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

    #bandeiras .content .esq .texto,
    #bandeiras .content .esq .texto span {
        font-size: 1.5vw;
        line-height: 2vw;
    }

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

    #ecossistema .card .front .btn {
        bottom: 15px;
    }


    #bandeiras .content {
        padding-left: 5%;
        justify-content: space-between;
    }

    #bandeiras .esq {
        position: relative;
        width: 22%;
    }

    #bandeiras .box-botoes-swiper {
        right: -39px;
    }

    #ecossistema .content .box-titulo .titulo {
        font-size: 40px;
        line-height: 53px;
    }

    #ecossistema .content .box-titulo .texto {
        font-size: 14px;
        line-height: 25px;
    }

    #contato .content .esq>.titulo {
        font-size: 48.3px;
        line-height: 60px;
        margin-bottom: 33px;
    }

    #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 .esq .titulo {
        font-size: 36px;
        line-height: 47px;
    }

    #banner .dir .borda-gradiente,
    #totem .content .esq .borda-gradiente,
    #gestao .dir .borda-gradiente {
        width: 35.3vw;
        height: 35.3vw;
    }

    #banner .dir .imagem,
    #totem .content .esq .imagem,
    #gestao .dir .imagem {
        width: 34.88vw;
        height: 34.88vw;
    }

    #gestao .dir .play {
        width: 9.6vw;
        height: 9.6vw;
        left: -19%;
    }

    #gestao .dir .imagem img {
        width: 121%;
    }

    #banner .dir .play {
        width: 9.6vw;
        height: 9.6vw;
        left: 28%;
    }

    #banner .dir .imagem img {

        width: 118%;
    }

    #banner .content {
        column-gap: 8.5%;
    }

    #totem .content .esq .imagem img {
        width: 119%;
    }

    #totem .esq .play {
        width: 9.6vw;
        height: 9.6vw;
        left: 30%;
    }

    #totem .content .dir .titulo {
        font-size: 46px;
    }

    #gestao .content .esq .titulo {
        font-size: 44px;
    }

}

@media screen and (max-width: 1440px) {
    #banner .content {
        column-gap: 3.5%;
    }

    #bandeiras .content .dir {
        max-width: 74%;
    }

    #gestao .content .esq .texto {
        width: auto;
    }

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

@media screen and (max-width: 1366px) {
    #bandeiras .esq {
        position: relative;
        width: 19%;
    }

    #bandeiras .content .dir {
        max-width: 74%;
    }

    #banner .content .esq .titulo {
        font-size: 32px;
        line-height: 43px;
    }

    #totem .content .dir .titulo {
        font-size: 42px;
    }

    #totem .content .dir .texto {
        font-size: 14px;
    }

    #gestao .content .esq .titulo {
        font-size: 38px;
    }

    #gestao .esq .box-botoes {
        width: 130%;
    }

}

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


    #bandeiras .content .dir {
        max-width: 71%;
    }

    #bandeiras .esq {
        width: 22%;
    }

    #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 .descricao {
        font-size: 14px;
    }

    #banner .content .esq .descricao {
        width: auto;
    }

    #totem .content {
        column-gap: 47px;
    }

    #totem {
        height: 46vw;
    }

    #gestao .content .esq .texto {
        font-size: 14px;
        line-height: 23px;
    }

    #gestao .content {
        padding-left: 32px;
        padding-right: 15px;
    }

    #gestao .content {
        margin-top: -64px;
    }
}

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

    #bandeiras .content .esq .texto,
    #bandeiras .content .esq .texto span {
        font-size: 18px;
        line-height: 26px;
    }

    #bandeiras .content {
        column-gap: 3%;
    }

    #bandeiras .box-botoes-swiper {
        right: -35px;
    }

    #contato .content {
        padding: 0 54px;
    }

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

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

}

@media screen and (max-width: 1080px) {
    #contato .content .esq>.titulo {
        font-size: 40.3px;
    }

    #totem .dir .box-botoes {
        width: 115%;
    }
}

@media screen and (max-width: 1024px) {
    #bandeiras .content {
        column-gap: 3%;
        flex-direction: column;
        padding: 0;
    }

    #bandeiras .esq {
        width: 100% !important;
        padding-left: 5%;
    }

    #bandeiras .swiper-wrapper {
        padding: 20px 0;
    }

    #bandeiras .swiper {
        width: 100% !important;
        padding-right: 30px;
        padding-left: 5%;
    }

    #bandeiras .box-botoes-swiper {
        right: unset;
        left: 267px;
    }

    #bandeiras .content .dir {
        max-width: 100% !important;
    }

    #bandeiras {
        padding-bottom: 75px;
        border-bottom: none;
        padding-top: 30px;
        background: linear-gradient(164deg, rgba(248, 248, 248, 1) 32%, rgba(182, 202, 217, 1) 113%);
    }

    #ecossistema .card {
        width: 32.4%;
        max-width: unset;
    }

    #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.tiktok::before {
        content: '';
        background-image: url(../../totem-de-pagamento/geral/tiktok.svg);
    }

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

    }

    #contato .content .esq .contatos .telefone a {
        font-size: 18px;
        font-weight: 400;
    }

    #contato .content {

        flex-direction: column;
    }

    #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;
    }

    #banner .content .esq .titulo {
        font-size: 31px;
    }

}

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

    #banner {
        background-size: auto;
    }

    #banner .content {
        flex-direction: column-reverse;
        row-gap: 40px;
    }

    #banner .dir {
        margin-top: 0;
    }

    #banner .dir .imagem,
    #totem .content .esq .imagem,
    #gestao .dir .imagem {
        width: 54.5vw;
        height: 54.5vw;
    }

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

    #banner .dir .play {
        width: 14.6vw;
        height: 14.6vw;
        left: 26%;
    }

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

    #totem {
        height: auto;
    }


    #totem .content {
        flex-direction: column;
        margin-top: 0;
        row-gap: 50px;
    }

    #totem .esq .play {
        width: 14.6vw;
        height: 14.6vw;
    }

    #gestao .content {
        margin-top: 0;
        flex-direction: column-reverse;
        height: auto;
        row-gap: 40px;
        box-shadow: none;
        padding: 35px 0;
        padding-bottom: 0;
    }

    #gestao .dir .play {
        width: 14.6vw;
        height: 14.6vw;
    }
}

@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) {

    #bandeiras .content .esq .texto,
    #bandeiras .content .esq .texto span {
        font-size: 26px;
        line-height: 32px;
    }

    #bandeiras .esq {
        padding-left: 0;
        text-align: center;
    }

    #bandeiras {
        padding-bottom: 75px;
        border-bottom: none;
    }

    #bandeiras .box-botoes-swiper {
        right: unset;
        left: 5%;
        bottom: -154px;
    }

    #bandeiras .box-botoes-swiper>div.botao-proximo-bandeiras::after,
    #bandeiras .box-botoes-swiper>div.botao-anterior-bandeiras::after {
        width: 30px;
        height: 30px;
    }

    #contato .content .esq .contatos {
        height: auto;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
    }

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

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

        column-gap: 7px;
    }

    #banner .dir .borda-gradiente,
    #totem .content .esq .borda-gradiente,
    #gestao .dir .borda-gradiente {
        width: 83.3vw;
        height: 83.3vw;
    }

    #banner .dir .imagem,
    #totem .content .esq .imagem,
    #gestao .dir .imagem {
        width: 81.5vw;
        height: 81.5vw;
    }

    #banner .dir .play {
        width: 23.6vw;
        height: 23.6vw;
        left: 22%;
    }

    #banner .content .esq .titulo {
        font-size: 27px;
        line-height: 39px;
    }

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

    #banner .content .esq .box-botoes .conheca,
    #banner .content .esq .box-botoes .saiba,
    #totem .content .dir .box-botoes .conheca,
    #totem .content .dir .box-botoes .saiba,
    #gestao .content .esq .box-botoes .conheca,
    #gestao .content .esq .box-botoes .saiba {
        width: 100%;
        font-size: 14px;
    }

    #totem .esq .play {
        width: 23.6vw;
        height: 23.6vw;
    }

    #gestao .dir .play {
        width: 23.6vw;
        height: 23.6vw;
        left: unset;
        bottom: -21%;

    }

    #gestao .content {
        row-gap: 75px;
    }

}

@media screen and (max-width: 490px) {
    #bandeiras .swiper {
        padding: 0;
    }

    #bandeiras .swiper .swiper-slide {
        text-align: center;
        filter: grayscale(1);
        opacity: 0.4;
    }

    #bandeiras .swiper .swiper-slide-next {
        text-align: center;
        transform: scale(1.4) !important;
        filter: grayscale(0);
        opacity: 1;


    }

    #bandeiras .esq {
        padding-bottom: 34px;
    }

    #ecossistema .card {
        width: 265px;
        max-width: 265px;
    }

    #ecossistema {
        background-size: cover;
        padding-bottom: 80px;

    }

    #ecossistema::before {
        display: none;
    }

    #ecossistema .scroll-cards {
        overflow: auto;
        padding: 20px 0;
        padding-left: 5%;
        padding-bottom: 80px;
    }

    #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;
    }

    #totem .content .dir .titulo {
        font-size: 34px;
    }

    #gestao .content .esq .titulo {
        font-size: 32px;
    }





}


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

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

}