@media screen and (max-width: 1600px) {
    #ecossistema .content .box-titulo .titulo {
        font-size: 40px;
        line-height: 53px;
    }
    #ecossistema .content .box-titulo .texto {
        font-size: 14px;
        line-height: 25px;
    }

    #ecossistema .card .front .btn {
        bottom: 15px;
    }
    #contato .content .esq>.titulo {
        font-size: 48.3px;
        line-height: 60px;
        margin-bottom: 33px;
    }
    #comodidade .content .esq {
        min-width: unset;
        width: 46%;
    }

    #contato .content {
        justify-content: space-between;
    }

    #contato .content .esq {
        max-width: 47%;
    }

    #contato .content .esq>.texto {
        font-size: 24.16px;
        line-height: 38px;
        margin-bottom: 49px;
    }

    #banner .content {
        column-gap: 10vw;
    }
    #banner .content .dir .borda-gradiente {
        width: 38.7vw;
        height: 38.7vw;
    }
    #banner .content .dir .imagem {
        width: 38.2vw;
        height: 38.2vw;
    }
    #banner .content .dir .play {
        width: 7vw;
        height: 7vw;
    }

    #facilidade .content .dir .box-video, #facilidade .content .dir {
        width: 58vw;
        height: 30vw;
    }


}

@media screen and (max-width: 1440px) {
    #banner .content {
        column-gap: 6vw;
    }
    #banner .content .esq .titulo {
        font-size: 44px;
        line-height: 58px;
    }
    #comodidade .content .dir .titulo {
        font-size: 34px;
        line-height: 45px;
    }

    #facilidade .content .esq {
        min-width: 336px;
        margin-right: 4vw;
    }
    #facilidade .content {
        padding-left: 40px;
    }

    #facilidade .content .dir .box-video, #facilidade .content .dir {
        width: 61vw;
        height: 30vw;
    }

    #facilidade .content .esq .titulo {
        font-size: 37px;
        line-height: 54px;
    }

    #ecossistema .card .front, #ecossistema .card .back  {
        padding: 40px 26px;
    }


}

@media screen and (max-width: 1366px) {

    #banner .content {
        column-gap: 2vw;
    }

    #facilidade .content .esq {
        margin-right: 3vw;
    }

}

@media screen and (max-width: 1280px) {
    #ecossistema .card {
        width: 23.7%;
    }
    #contato .content .esq>.titulo {
        font-size: 42.3px;
        line-height: 51px;
    }
    #contato .content .dir {
        max-width: 50%;
    }
    #contato .content .dir button {
        font-size: 20px;
    }

    #banner .content .esq .titulo {
        width: 548px;
    }
    #banner .content {
        column-gap: 4vw;
    }
    #banner .content .esq .descricao {
        width: auto;
    }

    #comodidade .content {
        column-gap: 45px;
    }
    #comodidade .content .dir ul li, #comodidade .content .dir .texto {
        font-size: 14px;
    }

    #comodidade .content .dir .titulo {
        font-size: 28px;
        line-height: 39px;
    }

    #facilidade .content .esq .box-botoes .conheca {
        padding: 15px 35.4px 15px 15.4px;
    }

    #facilidade .content .esq .box-botoes .saiba {
        padding: 15px 17.8px;
    }
    #facilidade .content .dir .box-video, #facilidade .content .dir {
        width: 59vw;
    }
    #facilidade .content {
        height: 550px;
    }
}

@media screen and (max-width: 1200px) {
    #contato .content {
        padding: 0 54px;
    }
    #banner .content .esq .titulo {
        font-size: 36px;
        line-height: 46px;
    }

    #facilidade .content .esq {
        margin-right: 1vw;
    }
    #facilidade .content .esq .texto {

        width: 303px;
    }
    #facilidade .content .esq {
        min-width: 313px;
    }

    #facilidade .content .dir .box-video, #facilidade .content .dir {
        width: 62vw;
        height: 35vw;
    }

    #lightbox .box-video {
        width: 63%;
        height: 39vw;
    }
}

@media screen and (max-width: 1140px) {
    #facilidade .content .dir .box-video, #facilidade .content .dir {
        width: 60vw;
        height: 35vw;
    }
}

@media screen and (max-width: 1080px) {
    #contato .content .esq>.titulo {
        font-size: 40.3px;
    }
    #banner .content .esq .descricao {
        width: 467px;
    }
    #banner .content {
        column-gap: 1vw;
    }


    #comodidade .content {
        column-gap: 17px;
    }

    #facilidade .content .esq .box-botoes {
        font-size: 14px;
    }

    #facilidade .content .dir .box-video, #facilidade .content .dir {
        width: 58vw;
        height: 33vw;
    }

    #facilidade .content {
        height: 453px;
    }

}

@media screen and (max-width: 1024px) {

    #comodidade .content {
        height:  auto;
        flex-direction: column;
        row-gap: 60px;
    }
    #comodidade .content .esq {
        min-width: unset;
        width: 100%;
        height: 440px;
    }

    #facilidade .content {
        height: auto;
        padding: 40px;
        flex-direction: column;
        row-gap: 40px;
    }

    #facilidade .content .esq {
        min-width: unset;
        width: 100%;
    }
    #facilidade .content .esq .titulo, #facilidade .content .esq .texto {
        width: 100%;
    }

    #facilidade .content .esq .box-botoes {
        flex-direction: row;
    }

    #facilidade .content .dir .box-video, #facilidade .content .dir {
        width: 100%;
        height: 45vw;
    }
    #comodidade {
        padding-bottom: 200px;
    }
    #comodidade .content .esq .box-imagem, #comodidade .content .esq .swiper-slide, #comodidade .content .esq .swiper {
        border-radius: 10px 10px 0 0;
    }

    #comodidade .content .esq::after {
        width: 100%;
        height: 7px;
        background: linear-gradient(90deg, rgba(233,50,74,1) 8%, rgba(97,92,180,1) 84%);
        top: unset;
        bottom: 0;
    }
    #ecossistema .card {
        width: 32.4%;
        max-width: unset;
    }

    #banner .content {
        padding-top: 47px;
    }

    #banner .content .esq .box-botoes {

        width: 110%;
    }
    #banner {
        padding-top: 60px;
    }

    #banner .content .esq .titulo {
        width: 497px;
    }


    #ecossistema .content .box-titulo .titulo {
        font-size: 34px;
        line-height: 42px;
    }
    #contato .content .esq .contatos {
        height: auto;
        flex-direction: column;
        align-items: center;
        row-gap: 24px;
        position: absolute;
        bottom: 90px;
        width: 90%;
    }

    #contato .content .dir {
        border-bottom: 1px solid var(--vermelho);
        padding-bottom: 57px;
    }

    #contato .svg {
        position: relative;
        mask: unset !important;
        opacity: 1 !important;
        width: 36px;
        height: 36px;
        border-radius: 7px;
        background-color: var(--vermelho) !important;
        align-items: center;
    }



    #contato .content .esq .contatos .texto {
        text-align: center;
        margin-bottom: 15px;
    }

    #contato .content .esq .contatos .separador {
        width: 219px;
        height: 2px;
    }

    #contato .svg::before {
        width: 20px;
        height: 20px;
        filter: invert(1);
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #contato .svg.facebook::before {
        content: '';
        background-image: url(../../totem-de-pagamento/geral/facebook.svg);
    }

    #contato .svg.instagram::before {
        content: '';
        background-image: url(../../totem-de-pagamento/geral/instagram.svg);
    }

    #contato .svg.linkedin::before {
        content: '';
        background-image: url(../../totem-de-pagamento/geral/linkedin.svg);
    }

    #contato .svg.youtube::before {
        content: '';
        background-image: url(../../totem-de-pagamento/geral/youtube.svg);

    }

    #contato .svg.tiktok::before {
        content: '';
        background-image: url(../../totem-de-pagamento/geral/tiktok.svg);
    }

    #contato .content .esq .contatos .telefone a {
        font-size: 18px;
        font-weight: 400;
    }
    #contato .content .esq, #contato .content .dir {
        width: 100%;
        max-width: 100%;
    }

    #contato .content {
        flex-direction: column;
        height: auto;
        row-gap: 40px;
        max-width: 100%;
        border-radius: 0;
        padding: 60px 5%;
        height: 1103px;
        justify-content: initial;
    }

    #contato .content .esq>.titulo {
        font-size: 36px;

    }
    #contato .content .esq>.texto {
        width: 100%;
    }

    #contato .content .dir .obrigatorio {
        text-align: center;
    }



}

@media screen and (max-width: 996px) {
    #banner {
        background-size: auto;
    }
    #banner .content {
        flex-direction: column-reverse;
        row-gap: 40px;
    }
    #banner .content .esq, #banner .content .dir {
        width: 100%;
    }

    #banner .content .dir .borda-gradiente{
        width: 55.3vw;
        height: 55.3vw;
    }

    #banner .content .dir .imagem{
        width: 54.5vw;
        height: 54.5vw;
    }

    #banner .content .dir .play {
        width: 15vw;
        height: 15vw;
    }

    #banner .content .esq .titulo {
        width: 100%;
    }

    #banner .content .esq .titulo span {
        display: unset;
    }

    #banner .content .esq .descricao {
        width: 100%;
    }

}

@media screen and (max-width: 768px) {
    #ecossistema .card {
        width: 49.3%;
        max-width: unset;
    }
    #lightbox .box-video {
        width: 85%;
        height: 48vw;
    }

}

@media screen and (max-width: 600px) {
    #contato .content .esq .contatos {
        height: auto;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
    }

    #facilidade .content .esq .box-botoes {
        flex-direction: column-reverse;
    }

    #facilidade .content .esq .box-botoes a {
        width: 100%;
    }
    #facilidade .content .esq .titulo {
        font-size: 28px;
        line-height: 47px;
    }
    #comodidade .content .dir ul {
        height: auto;
    }

    #facilidade .content .esq .texto {
        font-size: 14px;
    }
    #facilidade .content {
        padding: 30px 20px;
    }

    #banner .content .esq .box-botoes {
        row-gap: 15px;
        width: 100%;
        flex-direction: column;
    }

    #banner .content .esq .box-botoes a {
        width: 100%;
    }

    #contato .content .esq .contatos .texto {
        margin-bottom: 15px;
        text-align: center;
    }

    #contato .content .esq .contatos .telefone a {

        column-gap: 7px;
    }
    #banner .content .dir .borda-gradiente {
        width: 83.3vw;
        height: 83.3vw;
    }

    #banner .content .dir .imagem {
        width: 81.5vw;
        height: 81.5vw;
    }


}

@media screen and (max-width: 490px) {
    #banner .content .dir .play {
        width: 24vw;
        height: 24vw;
    }

    #banner .content .esq .box-botoes {
        font-size: 14px;
    }

    #ecossistema .card {
        width: 265px;
        max-width: 265px;
    }
    #ecossistema {
        background-size: cover;
        padding-bottom: 80px;
    }
    #ecossistema .scroll-cards {
        overflow: auto;
        padding: 20px 0;
        padding-left: 5%;
        padding-bottom: 80px;
    }

    #ecossistema::before {
        display: none;
    }

    #ecossistema .cards {
        flex-wrap: nowrap;
        width: max-content;
        column-gap: 20px;
    }

    #ecossistema .scroll-cards::-webkit-scrollbar-track {
        background: #dfdfdf;
    }

    #ecossistema .scroll-cards::-webkit-scrollbar-thumb {
        background-color: #5f5db5;
    }

    #ecossistema .scroll-cards::-webkit-scrollbar {
        width: 2px;
        height: 4px;
    }

    #ecossistema .content {
        max-width: 100%;
    }
    #ecossistema .content .box-titulo {
        max-width: 90%;
    }
    #contato .content .esq>.texto {
        font-size: 19.16px;
        line-height: 33px;
    }

    #facilidade .dir .box-video .play {
        width: 80px;
        height: 80px;
    }
    #facilidade .dir .box-video::after {
        width: 96px;
        height: 26px;
        bottom: 16px;
        right: 16px;

    }

}


@media screen and (max-width: 430px) {
    #contato .content {
        padding: 60px 20px;
    }

    #contato .content .esq>.titulo {
        font-size: 25.3px;
        line-height: 40px;
    }

}