@font-face {
    font-family: 'Mosvita';
    src: url('/fonts/Mosvita-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mosvita';
    src: url('/fonts/Mosvita-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Mosvita';
    src: url('/fonts/Mosvita-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Mosvita';
    src: url('/fonts/Mosvita-SemiBold.otf') format('opentype');
    font-weight: 600; 
    font-style: normal;
}

@font-face {
    font-family: 'Mosvita';
    src: url('/fonts/Mosvita-BlackExpanded.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Mosvita';
    src: url('/fonts/Mosvita-Expanded.otf') format('opentype');
    font-weight: 910;
    font-style: normal;
}
@font-face {
    font-family: 'Mosvita';
    src: url('/fonts/Mosvita-Expanded.otf') format('opentype');
    font-weight: 910;
    font-style: normal;
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #161616; 
    background-image: url(../img/bg.webp);
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Mosvita', sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
}


@keyframes fadeIn {
    from {opacity:0}
    to {opacity:1}
}

.header {
    width: 100dvw;
    height: 6rem;
    /* background: #161616; */
    /* border-bottom: 2px solid #242424; */
    display: flex;
    justify-content: center;
}

.container {
    position: relative;
    width: 100dvw;
    max-width: 92.5rem;
}

.header .container {
    width: 100dvw;
    max-width: 92.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items: center;
    padding: 0 1.25rem;
}

.header .logo {
    display: flex;
    justify-content: center;
    grid-area: 1 / 2 / 2 / 3;
}

.header .logo img {
    filter: brightness(0) invert(1);
}

.header .social {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-area: 1 / 3 / 2 / 4;
}

.header .social a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .social svg {
    width: 0.8854166666666666vw;
    height: 1.8660812294182216vh;
    cursor: pointer;
    fill: white; 
    transition: fill 0.3s ease, transform 0.3s ease;
    padding: 0.5rem;
}

.header .social svg:hover {
    fill: #ff6e00; 
    transform: scale(1.1); 
}

.language-switcher {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
  }
  
  .language-switcher img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 3px;
    opacity: 0.5;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s, filter 0.3s;
  }
  
  .language-switcher img:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
  
  .language-switcher img.active {
    opacity: 1;
    filter: drop-shadow(0 0 2px ) brightness(1.2);
  }
  

.topics {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Mosvita", sans-serif;
    font-weight: 500;
    z-index: 1;
}

.topics div {
    padding: 0.938rem 0.938rem;
    min-width: 5.729166666666667vw;
    text-align: center;
    cursor: pointer;
    transition: color .3s;
    will-change: font-weight;
    font-size: 14px;
}

.topics div:hover {
    color: #777;
    font-weight: 700;
}

.topics div.selected {
    color: #ff6d00;
    font-weight: 700;
}

.article {
    position: relative;
    width: 100dvw;
    height: calc(100dvh - 97px);
    min-height: 780px;
    transition: min-height .8s;
}

.article .container {
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

.article .container.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}


.article .style.one {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 9.427083333333334vw;
    height: 57.73874862788145vh;
    background-image: url(../img/style0.png);
}

.article .style.two {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 13.229166666666666vw;
    height: 100%;
    background-image: url(../img/style1.png);
    animation: animateStyleTwo 30s linear infinite;
}

@keyframes animateStyleTwo {
    from {background-position-y:0px}
    to {background-position-y:842px}
}

.article .ecosistema {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items: center;
    justify-items: center;
    height: 100%;
}

.article .ecosistema .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.article .ecosistema .title {
    font-family: "Mosvita", sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #161616;
    background: #ff6d00;
    padding: 8px 24px;
    margin-bottom: 48px;
    opacity: 0;
    animation: fadeIn .6s 100ms forwards;
}

.article .ecosistema .desc {
    font-family: "Mosvita", sans-serif;
    font-weight: 900;
    font-size: 62px;
    line-height: 62px;
    margin-bottom: 40px;
    animation: fadeIn .6s 250ms forwards;
    opacity: 0;
}

.article .ecosistema .desc .highlight-white {
    color: white;
}

.article .ecosistema .desc .highlight-orange {
    color: #ff6d00;
}


.article .ecosistema .desc span {
    font-weight: 700;
}

.article .ecosistema .desc span.a1 {
    opacity: 0;
    animation: fadeIn .6s 200ms forwards;
}

.article .ecosistema .desc span.a2 {
    opacity: 0;
    animation: fadeIn .6s 300ms forwards;
}

.article .ecosistema .subtext {
    font-family: "Mosvita", sans-serif;
    font-weight: 400;
    color: #fff;
    width: 465px;
    height: 85px;
    font-size: 22px;
    opacity: 0;
    animation: fadeIn .6s 400ms forwards;
}

.article .ecosistema .circle {
    position: relative;
    width: 46.432491767288695vh;
    height: 46.432491767288695vh;
    background-image: url(../img/circle.png);
    margin-right: 11.25rem;
    opacity: 0;
    animation: fadeIn .6s 550ms forwards;
}

.article .ecosistema .circle .logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    will-change: transform;
    transition: transform .3s;
    padding: 1.875rem;
    opacity: 0;
    animation: fadeIn .6s 600ms forwards;
}

.article .ecosistema .circle .logo:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.article .ecosistema .circle .box {
    width: 54px;
    height: 54px;
    background: #ff6d00;
    border-radius: 10px;
    will-change: box-shadow, transform;
    transition: transform .3s, box-shadow .6s, opacity .4s;
    -webkit-box-shadow: 0px 0px 30px -15px rgba(255,165,0,1);
    -moz-box-shadow: 0px 0px 30px -15px rgba(255,165,0,1);
    box-shadow: 0px 0px 30px -15px rgba(255,165,0,1);
    cursor: pointer;
}


.article .ecosistema .circle .box .name, .article .ecosistema .circle .produtos-nome {
    position: absolute;
    top: 3.75rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: "Mosvita", sans-serif;
    font-weight: 400;
    width: 8.333333333333334vw;
    text-align: center;
    font-size: 20px;
    line-height: 22px;
}

.article .ecosistema .circle .produtos-nome {
    top: 4.063rem;
    opacity: 0;
    animation: fadeIn .8s 800ms forwards;
}

.article .ecosistema .circle .box img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1.9791666666666667vw;
    height: 4.171240395170143vh;
}

.article .ecosistema .circle .box.producao {
    position: absolute;
    top: 50%;
    left: -24px;
    transform: translateY(-50%) scale(1);
    opacity: 0;
    animation: fadeIn .8s 900ms forwards;
}

.article .ecosistema .circle .box.tecnologia {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    opacity: 0;
    animation: fadeIn .8s 1000ms forwards;
}

.article .ecosistema .circle .box.estrategia {
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translateY(-50%) scale(1);
    opacity: 0;
    animation: fadeIn .8s 1100ms forwards;
}

.article .ecosistema .circle .box.producao:hover, .article .ecosistema .circle .box.estrategia:hover {
    transform: translateY(-50%) scale(1.1);
}

.article .ecosistema .circle .box.tecnologia:hover {
    transform: translateX(-50%) scale(1.1);
}

.article .ecosistema .circle .box.producao:active, .article .ecosistema .circle .box.estrategia:active {
    transform: translateY(-50%) scale(1);
}

.article .ecosistema .circle .box.tecnologia:active {
    transform: translateX(-50%) scale(1);
}

.article .ecosistema .circle .box.producao:active, .article .ecosistema .circle .box.estrategia:active, .article .ecosistema .circle .box.tecnologia:active {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(255,109,0,.3);
    -moz-box-shadow: 0px 0px 30px 0px rgba(255,109,0,.3);
    box-shadow: 0px 0px 30px 0px rgba(255,109,0,.3);
}

.article .ecosistema .circle .box:hover {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(255,109,0,.5);
    -moz-box-shadow: 0px 0px 30px 0px rgba(255,109,0,.5);
    box-shadow: 0px 0px 30px 0px rgba(255,109,0,.5);
}

.article .ecosistema .circle .box:active {
    transform: scale(.95);
    opacity: .9;
}

.article .ecosistema .circle .produtos {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    overflow: hidden;
    padding: 10px;
    border: 2px solid #ff6d00;
    /* border-radius: 20px; */
    background: #161616;
    transition: width .6s;
    opacity: 0;
    animation: fadeIn .8s 800ms forwards;
}

.article .ecosistema .circle .produtos .shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(24,24,24,1) 80%, rgba(24,24,24,1) 100%);
    transition: right .6s;
    z-index: 2;
}

.article .ecosistema .circle .produtos .scroll {
    width: auto; 
    min-width: 550px; 
    display: flex;
    gap: 10px;
}

.article .ecosistema .circle .produtos:hover {
    width: 550px;
}

.article .ecosistema .circle .produtos:hover .shadow {
    right: -90px;
}

/* .arrow {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 47px;
    height: 17px;
    background-image: url(../img/arrow.png);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.9);
    transition: transform .4s;
    cursor: pointer;
}

.arrow:hover {
    transform: translateX(-50%) scale(1.1);
} */

.splide .gradiente.one {
    position: absolute;
    top: 0;
    right: -1px;
    width: 500px;
    height: 100%;
    /* background: linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 1) 100%); */
    z-index: 5;
    pointer-events: none;
}

.splide .gradiente.two {
    position: absolute;
    top: 0;
    left: 0px;
    width: 50px;
    height: 100%;
    /* background: linear-gradient(270deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 1) 100%); */
    z-index: 5;
    pointer-events: none;
}

.splide__arrow--prev {
    left: -4em;
}

.splide__arrow--next {
    right: -4em;
}

.splide__pagination {
    bottom: -2.5em;
}