@media screen and (max-width: 1740px) {
    #depoimentos .content .dir .depoimento {
        padding: 11px 21px;
        padding-left: 28px;
    }
    #depoimentos .box-botoes-swiper {
        bottom: 9px;
        right: -30px;
    }
    #sobre .dir .box-video {
        width: 128%;
    }
    #vantagens .content .top {
        padding-left: 171px;
        width: 550px;
    }
    #vantagens .content .swiper {
        padding-left: 9.4vw;
    }
}

@media screen and (max-width: 1680px) {
    #vantagens .content .top {
        padding-left: 102px;
        width: 481px;
    }

}

@media screen and (max-width: 1600px) {
    .pop-up .icone-x {
        right: 20px;
    }
    #banner .swiper .content-slide .esq .titulo {
        line-height: 55px;
        font-size: 45px;
    }

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

    #ecossistema .card .front .btn {
        bottom: 15px;
    }
    #banner .swiper .content-slide .dir .imagem {
        width: 35vw;
        height: 35vw;
    }
    #banner .swiper .content-slide .dir .borda-gradiente {
        width: 35.7vw;
        height: 35.7vw;
    }
    #banner .swiper .content-slide .dir .imagem img {
        max-width: 113%;
    }
    #banner .box-botoes-swiper {
        bottom: 6vw;
    }
    #depoimentos .content {
        align-items: center;
        column-gap: 44px;
    }
    #depoimentos .content .esq .texto, #depoimentos .content .esq .texto span, #bandeiras .content .esq .texto, #bandeiras .content .esq .texto span, #parceiros .content .esq .texto, #parceiros .content .esq .texto span  {
        font-size: 1.5vw;
        line-height: 2vw;
    }

    #depoimentos .esq {
        width: 15.5%;
    }
    #depoimentos .content .dir {
        width: 81.6%;
    }
    #depoimentos .box-botoes-swiper {
        bottom: 9px;
        right: -53px;
    }
    #sobre .content {

        padding: 45px 49px;
        padding-bottom: 9vw;
    }
    #sobre .dir .box-video {
        width: 114%;
        height: 29vw;
    }
    #sobre .content .esq .titulo {
        font-size: 34px;
    }
    #sobre .esq .area-texto .texto {
        row-gap: 15px;
    }
    #sobre .dir .box-video .play, #minimercado .dir .play, #nossos-clientes .content .play {
        width: 123px;
        height: 123px;
    }
    #sobre .bottom .card .numeros {
        font-size: 46px;
    }
    #sobre .bottom .card-3 span.detalhe {
        font-size: 34px;
    }
    #sobre .bottom .card .texto {
        font-size: 12px;
    }
    #sobre .bottom .card {
        width: 25vw;
        height: 9.25vw;
    }
    #touchpay .content .dir .titulo, #minimercado .content .esq .titulo   {
        font-size: 42px;
    }
    #touchpay .content .esq .imagem {
        width: 34vw;
        height: 34vw;
    }
    #touchpay .content .esq .borda-gradiente {
        width: 34.5vw;
        height: 34.5vw;
    }
    #touchpay .content .esq .imagem img {
        max-width: 121%;
    }
    #touchpay {
        height: auto;
        position: relative;
        padding-bottom: 6vw;
    }

    #touchpay .dir {
        position: relative;
        top: 45px;
    }
    #touchpay .content {

        align-items: flex-start;
    }
    #touchpay .esq .play {
        width: 9vw;
        height: 9vw;
        left: 23%;
    }
    #bandeiras .content .esq .texto,  #parceiros .content .esq .texto  {
        width: 100%;
    }

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

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

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

    #minimercado .dir .borda-gradiente {
        width: 32vw;
        height: 32vw;
    }
    #minimercado .dir .imagem {
        width: 31.5vw;
        height: 31.5vw;
        border: 17px solid #FFF;
    }
    #vantagens .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 5%;
    }
    #vantagens .content .swiper {
        padding-left: 0;
        width: 100%;
    }
    #vantagens .content .top {
        padding-left: 0;
        width: 379px;
    }
    #vantagens .content .top {
        font-size: 24px;
    }
    #vantagens .content .vantagem {
        padding: 25px 24px 28px;
    }

    #minimercado {
        margin-bottom: -5vw;
    }
    #ecossistema .content .box-titulo .titulo {
        font-size: 40px;
        line-height: 53px;
    }
    #ecossistema .content .box-titulo .texto {
        font-size: 14px;
        line-height: 25px;
    }
    #nossos-clientes .content .esq {
        padding: 34px;
    }
    #nossos-clientes .content {
        height: 562px;
    }
    #nossos-clientes .content .esq .titulo {
        font-size: 27px;
        line-height: 39px;
    }
    #nossos-clientes .content .esq .texto {
        font-size: 14px;
        line-height: 23px;
    }

    #blog .content>.titulo {
        font-size: 30px;
    }
    #blog .content .sub {
        font-size: 16px;
    }

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

@media screen and (max-width: 1440px) {
    .pop-up .logo-amlabs {
    margin-left: 0px;
    }
    .pop-up p {
        font-size: 14px;
    }
     .pop-up a {
        font-size: 14px;
     }
    #banner .swiper .content-slide .esq {
        max-width: 50%;
    }
    #banner .swiper .content-slide .esq .titulo {
        line-height: 46px;
        font-size: 38px;
    }

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

    #bandeiras .content .dir {
        max-width: 73%;
    }
    #ecossistema .card .front, #ecossistema .card .back  {
        padding: 40px 26px;
    }
}

@media screen and (max-width: 1366px) {
    #depoimentos .esq {
        width: 19.5%;
    }
    #depoimentos .content .dir {
        width: 77.6%;
    }
    #depoimentos .box-botoes-swiper {
        bottom: 9px;
        right: -23px;
    }
    #sobre .esq .area-texto {
        height: 250px;
    }
    #sobre .content {
        padding-bottom: 7vw;
    }
    #sobre .dir .box-video {
        height: 380px;
    }
    #touchpay .content .dir .texto {
        line-height: 24px;
        font-size: 14px;
    }
    #touchpay .content {
        column-gap: 70px;
    }
    #minimercado .content .esq .texto {
        line-height: 22px;
         font-size: 14px;
    }

    #bandeiras .esq, #parceiros .esq {
        position: relative;
        width: 19%;
    }
    #bandeiras .content .dir, #parceiros .content .dir {
        max-width: 74%;
    }


}

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

    .pop-up p {
        width: 60%;
    }
    #banner .swiper .content-slide .esq .titulo {
        line-height: 39px;
        font-size: 33px;
    }
    #banner .swiper .content-slide .esq .descricao {
        line-height: 23px;
        font-size: 14px;
    }
    #banner .swiper .content-slide .esq .box-botoes .conheca, #banner .swiper .content-slide .esq .box-botoes .saiba, #sobre .esq .box-botoes .conheca, #sobre .esq .box-botoes .saiba, #touchpay .dir .box-botoes .conheca, #touchpay .dir .box-botoes .saiba, #minimercado .esq .box-botoes .conheca, #minimercado .esq .box-botoes .saiba, #nossos-clientes .esq .box-botoes .conheca, #nossos-clientes .esq .box-botoes .saiba {

        font-size: 14px;
    }
    #sobre .content .esq .area-texto .texto p {
        font-size: 14px;
    }
    #sobre .bottom .card .numeros {
        font-size: 38px;
    }
    #sobre .esq {
        width: 43%;
    }
    #sobre .dir {
        width: 53%;
    }
    #palestrante .content .esq svg {
        width: 420px;
        height: 135px;
    }
    #palestrante .content .esq .texto {
        width: 100%;
    }
    #palestrante .content .esq .informacoes {
        font-size: 24px;
    }
    #palestrante .content .dir svg {
        width: 430px;
    }

    #palestrante .content .dir .info-palestrante {
        width: 510px;
        max-width: 90%;
    }
    #palestrante .content .dir .info-palestrante .nome {
        font-size: 40px;
    }
    #touchpay .content .dir .texto.negrito {
        margin-bottom: 8px;
    }

    #minimercado .dir .imagem {
        width: 460px;
        height: 460px;
    }
    #minimercado .dir .borda-gradiente {
        width: 467px;
        height: 467px;
    }
    #sobre .esq .box-botoes {
        width: 134%;
    }
    #minimercado .esq .box-botoes {
        width: 106%;
    }
    #bandeiras {
        margin-bottom: 75px;
    }

    #vantagens .content .vantagem .icone {
        min-width: 89px;
        min-height: 89px;
        width: 89px;
        height: 89px;
    }
    #ecossistema .card {
        width: 23.7%;
    }
    #bandeiras .content .dir, #parceiros .content .dir {
        max-width: 71%;
    }
    #bandeiras .esq, #parceiros .esq {
        width: 22%;
    }

    #contato .content .esq>.titulo {
        font-size: 42.3px;
        line-height: 51px;
    }
    #contato .content .dir {
        max-width: 50%;
    }
    #contato .content .dir button {
        font-size: 20px;
    }
    #blog .box-post .post .imagem {
        height: 200px;
        min-height: 200px;
    }
}

@media screen and (max-width: 1200px) {
    #depoimentos .content .esq .texto, #depoimentos .content .esq .texto span, #bandeiras .content .esq .texto, #bandeiras .content .esq .texto span, #parceiros .content .esq .texto, #parceiros .content .esq .texto span {
        font-size: 18px;
        line-height: 26px;
    }

    #sobre .esq .area-texto {
        padding-left: 21px;
    }
    #sobre .bottom .card .numeros {
        font-size: 32px;
    }
    #sobre .bottom .card-3 span.detalhe {
        font-size: 26px;
    }
    #sobre .bottom .card-1 .numeros span.detalhe {
        bottom: 0px;
    }
    #depoimentos {
        margin-bottom: 70px;
    }

    #touchpay .content .esq .imagem {
        width: 408px;
        height: 408px;
    }
    #touchpay .content .esq .borda-gradiente {
        width: 414px;
        height: 414px;
    }
    #touchpay .esq .play {
        width: 108px;
        height: 108px;
        bottom: -52px;

    }
    #sobre {
        padding-bottom: 145px;
    }
    #bandeiras .content, #parceiros .content {
        column-gap: 3%;
    }
    #bandeiras .box-botoes-swiper, #parceiros .box-botoes-swiper {
        right: -35px;
    }

    #minimercado .content {
        column-gap: 4%;
    }
    #nossos-clientes .esq .box-botoes .conheca {
        padding: 17px 39.4px 17px 13.4px;
    }
    #nossos-clientes .esq .box-botoes .saiba {
        padding: 15px 19.8px;
    }
    #blog .box-post .post .descricao .titulo {
        font-size: 16px;
        line-height: 22px;
    }
    #blog .box-post .post .saiba {
        padding: 8px 14.2px;
    }

    #blog .confira {
        font-size: 14px;
    }

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

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


@media screen and (max-width: 1080px) {
    #banner .swiper .content-slide .esq .titulo {
        font-size: 31px;
    }
    #banner .swiper .content-slide .esq .box-botoes .conheca, #sobre .esq .box-botoes .conheca, #touchpay .dir .box-botoes .conheca, #minimercado .esq .box-botoes .conheca {
        padding: 15px 40.4px 15px 23.4px;
    }
    #banner .swiper .content-slide .esq .box-botoes .saiba, #sobre .esq .box-botoes .saiba, #touchpay .dir .box-botoes .saiba, #minimercado .esq .box-botoes .saiba {
        padding: 13px 29.8px;
    }
    #depoimentos .box-botoes-swiper {
        bottom: 9px;
        right: -36px;
    }
    #palestrante .content .dir .info-palestrante .nome {
        font-size: 36px;
    }
    #touchpay {
        padding-bottom: 75px;
    }

    #minimercado .esq .box-botoes {
        width: 119%;
    }
    #contato .content .esq>.titulo {
        font-size: 40.3px;
    }

}

@media screen and (max-width: 1024px) {
    header > .content::before {
        top: 235px !important;
    }
    header > .content.sempopup::before {
        top: 142px !important;
     }
    header > .content {
        top: 245px !important;
    }
    header > .content.sempopup{
        top: 140px !important;
     }
    /* header{
        padding-top: 160px !important;
        transition: .2s ease-in-out;
    } */
    header.top-scroll{
        padding-top: 205px !important;
    }
    header.subir{
        padding-top: 60px !important;
    }
    header > .content.comPopup{
        top: 180px !important;
    }
    header > .content.comPopup::before{
        top: 200px !important;
    }
    .pop-up{
        left: 0;

    }
    .pop-up a {
        margin-right: 30px;
    }
    .pop-up p {
        width: 50%;
    }
    .pop-up .logo-amlabs svg {
        width: 125px;
        height: auto;
    }


    #banner .swiper .content-slide .esq .box-botoes .conheca {
        padding: 15px 37.4px 15px 23.4px;
    }


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

    #nossos-clientes {
        background-size: 100% 72%;
        background-position: top center;
        margin-bottom: 47px;
        background-image: linear-gradient(185deg, rgba(255,255,255,1) 21%, rgba(203,201,223,1) 100%);
        box-shadow: 0 0 10px rgba(97,93,181,0.1);
    }

    #banner .swiper .content-slide .esq .titulo {
        font-size: 28px;
    }
    #banner .swiper .content-slide .esq {
        max-width: 59%;
    }

    #banner .swiper .content-slide .esq .box-botoes {
        width: 110%;
    }

    #banner .swiper .content-slide {
        column-gap: 0;
    }

    #banner .swiper .content-slide .esq .descricao {
        margin-bottom: 48px;
    }

    #banner .swiper .content-slide .dir {

        margin-top: 1vw;
    }

    #banner {
        margin-bottom: 16px;
        margin-top: 40px;
    }

    #depoimentos .content .dir {
        width: 100%;
    }
    #depoimentos .esq {
        width: 100%;
        padding-left: 5%;

    }

    #depoimentos .box-botoes-swiper {
        bottom: 9px;
        left: 230px;
        right: unset;
    }

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

    #depoimentos {
        margin-bottom: 70px;
        padding: 0;
    }

    #depoimentos .content {
        align-items: center;
        column-gap: 44px;
        width: 100% !important;
        justify-content: flex-start;
        flex-direction: column;
    }

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

    #sobre .box-esq-dir {
        display: flex;
        flex-direction: column;
    }

    #sobre .esq {
        width: 100%;
    }

    #sobre .dir .box-video {
        height: 45vw;
        width: 100%;
    }

    #sobre .esq .box-botoes {
        width: 100%;
        margin-bottom: 30px;
    }

    #sobre .dir {
        width: 100%;
        margin-bottom: 17px;
    }

    #sobre .content {
        padding: 35px 29px;
    }

    #sobre .esq .area-texto {
        margin-bottom: 22px;
    }

    #sobre .bottom {
        display: flex;
        position: unset;
        row-gap: 17px;
        flex-direction: column;
    }

    #sobre .bottom .card {
        width: 100%;
        height: 135px;
    }

    #sobre {
        padding-bottom: 80px;
    }
    #palestrante{
        background-position: 90%;
    }
    #palestrante .overlay{
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        width: 100%;
        height: 100%;
        background-color: #00000070;
    }
    #palestrante .content {
        flex-direction: column;
        z-index: 2;
        row-gap: 50px;
    }
    #palestrante .content .dir {
        z-index: 2;
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #palestrante .content .dir svg {
        width: 378px;
    }



    #palestrante .content .dir .info-palestrante {
        padding-left: 0px;
        padding: 0px 10px;
        max-width: 100%;
        width: 100%;
        align-items: center;
    }
    #palestrante .content .dir .info-palestrante .funcao {
        text-align: center;
    }
    #palestrante .content .dir .info-palestrante .nome{
        text-align: center;
    }
    #palestrante .content .esq {
        z-index: 2;
        order: 2;
        width: 100%;
    }

    #touchpay .content {
        flex-direction: column;
    }

    #touchpay .content .esq {
        width: 100%;
        margin-bottom: 46px;
        margin-top: -57px;
    }

    #touchpay .content .esq .imagem {
        background-color: #fff;
    }

    #touchpay {
        padding: 90px 0px 0px 30px;
        position: relative;
        margin-bottom: 0;
    }

    #touchpay::before {
        content: '';
        background-image: url(../../totem-de-pagamento/home/touchpay-before-touchpay-mobile.webp);
        width: 125px;
        height: 218px;
        position: absolute;
        right: 5%;
        top: 185px;
    }

    #touchpay .dir {
        position: unset;
        z-index: 1;
    }

    #touchpay .content .esq .borda-gradiente, #touchpay .content .esq .imagem {
        max-width: 100%;
    }

    #bandeiras .content, #parceiros .content {
        column-gap: 3%;
        flex-direction: column;
        padding: 0;
    }
    #bandeiras .esq, #parceiros .esq {
        width: 100% !important;
        padding-left: 5%;
    }

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

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

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

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

    #parceiros .content .dir {
        width: 100%;
    }

    #minimercado .content {
        flex-direction: column-reverse;
        margin-bottom: 40px;

    }

    #minimercado .esq {
        width: 100%;
        max-width: 100%;
        padding-bottom: 60px;
    }

    #minimercado .dir {
        width: 100%;
        margin-bottom: 40px;
        margin-top: 0;
    }

    #vantagens .content .top {
        font-size: 18px;
    }
    #vantagens .box-botoes-swiper {
        right: unset;
        left: 257px;
    }

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

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

    #nossos-clientes .content {
        height: 1100px;
        max-width: 100%;
        justify-content: center;
        flex-direction: column;
    }

    #nossos-clientes .content .esq, #nossos-clientes .content .dir {
        width: 100%;
        height: 50%;
    }

    #blog .box-post {
        flex-direction: column;
        align-items: center;
        row-gap: 30px;
        max-width: 100%;
    }
    #blog .box-post .post {
        width: 384px;
        max-width: 100%;
    }

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

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

    #vantagens .progresso-vantagens {
        width: 100%;
        max-width: 100%;
        margin-top: 50px;
        margin-left: 5% !important;
    }
    #vantagens {
        padding-top: 0;
        background-position: center top;
        background-size: cover;
        background-image: linear-gradient(185deg, rgba(255,255,255,1) 21%, rgba(203,201,223,1) 100%);

    }

    #vantagens .content .top h3, #vantagens .content .top span {
        display: none;
    }

    #vantagens .content {
        padding-left: 0;
    }
    #vantagens .content .swiper {
        padding-left: 5%;
    }

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

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

    #nossos-clientes .content .esq {
        padding: 30px 5%;
        padding-bottom: 30px;
        background-color: transparent;
    }

 #nossos-clientes .content .dir {
        width: 90%;
        border-radius: 15px;
        height: 474px;
    }

    #nossos-clientes .content .play {
        bottom: 210px;
    }
}
@media screen and (max-width: 800px) {

    #palestrante .content .esq svg {
        width: 385px;
        height: 140px;
    }
}

@media screen and (max-width: 768px) {
    /* header {
        padding-top: 245px !important;
    } */
    header.top-scroll {
        padding-top: 305px !important;
    }
    header > .content::before {
        top: 320px !important;
    }
      header > .content {
        top: 325px !important;
    }
    header > .content.sempopup{
        top: 140px !important;
     }
    header > .content.sempopup::before {
        top: 142px !important;
     }
    header > .content.comPopup{
        top: 270px !important;
    }
    header > .content.comPopup::before{
        top: 298px !important;
    }
    .pop-up {
            height: auto;
            padding: 25px 0px;
    }
    .pop-up .conteudo {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 15px;
    }
    .pop-up::after {
        width: 20%;
        height: 100%;
    }
    .pop-up .logo-amlabs svg {
        width: 188px;
    }
    .pop-up p{
        text-align: center;
        width: 100%;
        z-index: 2;
    }
    .pop-up a{
        margin-right: 0px;
    }


    #banner {
        margin-top: 0;
    }

    #banner .swiper {
        padding-bottom: 90px;
        background-position: right top;
        background-size: auto;
    }
    #banner .swiper .content-slide {

        flex-direction: column-reverse;
    }

    #depoimentos .content .dir .depoimento {
        height: 106px;
        justify-content: center;
        padding: 0 30px;
    }

    #banner .swiper .content-slide .esq {
        max-width: 100%;
        padding-bottom: 0;
    }

    #banner .swiper .content-slide .dir {
        padding: 39px 0;
    }

    #banner .swiper .content-slide .dir .imagem {
        width: 69.5vw;
        height: 69.5vw;
    }

    #banner .swiper .content-slide .dir .borda-gradiente {
        width: 70.7vw;
        height: 70.7vw;
    }

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

    #banner .box-botoes-swiper {
        bottom: -34px;
        column-gap: 15px;
    }

    #banner .swiper .content-slide .esq .descricao {
        margin-bottom: 26px;
    }


    #sobre .esq .box-botoes, #minimercado .esq .box-botoes, #nossos-clientes .esq .box-botoes {
        flex-direction: column-reverse;
        row-gap: 15px;
        width: 100%;
    }

    #sobre .esq .box-botoes .conheca, #sobre .esq .box-botoes .saiba, #minimercado .esq .box-botoes .conheca, #minimercado .esq .box-botoes .saiba, #nossos-clientes .esq .box-botoes .conheca, #nossos-clientes .esq .box-botoes .saiba {
        width: 100%;
    }

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

    #nossos-clientes .content {
        height: 1200px;
    }

    #sobre {
        background-image: url(../../totem-de-pagamento/home/touchpay-bg-sobre-mobile.webp);
        background-position: center top;
        background-size: 100% 66%;
        box-shadow: 1px -7px 23px -2px rgb(0 0 0 / 8%);
        padding-top: 45px;
    }

    #sobre .content {
        padding: 35px 0px;
        background-image: none;

    }

    #sobre .bottom .card .numeros {
        font-size: 53px;
    }
    #sobre .bottom .card .texto {
        font-size: 14px;
    }

    #minimercado .esq {
        padding-bottom: 20px;
    }

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

    #palestrante .content .dir .info-palestrante {
        height: 90px;
    }
    #palestrante .content .esq svg {
        margin: 25px 0px;
    }
}
@media screen and (max-width: 600px) {

    #parceiros {
        padding-bottom: 108px;
    }

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

    #banner .swiper .content-slide .esq .titulo {
        font-size: 26px;
    }

    #touchpay .dir .box-botoes {
        flex-direction: column-reverse;
        row-gap: 15px;
    }

     #touchpay .dir .box-botoes .conheca, #touchpay .dir .box-botoes .saiba {
        width: 100%;
    }

    #touchpay .content .pagamentos {
        row-gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

   #nossos-clientes .content .dir {
        height: 300px;
    }

    #nossos-clientes .content .esq {
        padding-bottom: 30px;
        padding-top: 70px;
    }

    #nossos-clientes .content {
        height: auto;
    }

    #nossos-clientes .content .play {
        bottom: 90px;
    }

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

    #depoimentos .esq {
        width: 100%;
        padding-left: 0;
        text-align: center;
    }

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

    #depoimentos .content .dir .depoimento {
        height: 163px;
        padding-bottom: 10px;
    }

    #depoimentos .content .dir .depoimento .texto-depoimento {
        font-size: 14px;
        color: #000;
        line-height: 21px;
    }
    #depoimentos .content .dir .depoimento .area-texto-depoimento a:after {
        bottom:8px;
    }
    #depoimentos .box-botoes-swiper {
        left: 5%;
        top: 285px;
        column-gap: 15px;
    }
    #depoimentos {
        margin-bottom: 0;
        padding-bottom: 115px;
    }

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

    #sobre {
        padding-bottom: 90px;
    }


    #touchpay .dir .area-texto {
        height: 300px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        row-gap: 43px;
        padding-left: 25px;
        direction: rtl;
        text-align: left;
        margin-bottom: 30px;
    }

    #touchpay .content .dir .texto {
        unicode-bidi: plaintext;
    }
    #touchpay .dir .area-texto::-webkit-scrollbar-thumb {
        background-color: #5f5db5;
    }
    #touchpay .dir .area-texto::-webkit-scrollbar-track {
        background: #dfdfdf;
    }

    #touchpay .dir .area-texto::-webkit-scrollbar {
        width: 2px;
    }

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

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

    #bandeiras .box-botoes-swiper, #parceiros .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;
    }
}

@media screen and (max-width: 500px) {
    .pop-up::after {
        top: 45%;
        height: 50%;
    }
    .pop-up::before {
        width: 70%;
        height: 50%;
    }
    #banner .swiper .content-slide .esq .box-botoes .conheca, #banner .swiper .content-slide .esq .box-botoes .saiba, #sobre .esq .box-botoes .conheca, #sobre .esq .box-botoes .saiba, #touchpay .dir .box-botoes .conheca, #touchpay .dir .box-botoes .saiba, #minimercado .esq .box-botoes .conheca, #minimercado .esq .box-botoes .saiba, #nossos-clientes .esq .box-botoes .conheca, #nossos-clientes .esq .box-botoes .saiba {
        font-size: 14px;
        width: 100%;
    }

    #banner .swiper .content-slide .esq .box-botoes {
        flex-direction: column;
        row-gap: 10px;
    }

    #minimercado .dir .borda-gradiente {
        width: 84vw;
        height: 84vw;
    }
    #minimercado .dir .imagem {
        width: 82.5vw;
        height: 82.5vw;
    }

    #banner .swiper .content-slide .esq .box-botoes .conheca, #sobre .esq .box-botoes .conheca, #touchpay .dir .box-botoes .conheca, #minimercado .esq .box-botoes .conheca, #nossos-clientes .esq .box-botoes .conheca {
        padding: 18px 40.4px 18px 23.4px;
    }
    #banner .swiper .content-slide .esq .box-botoes .saiba, #sobre .esq .box-botoes .saiba, #touchpay .dir .box-botoes .saiba, #minimercado .esq .box-botoes .saiba, #nossos-clientes .esq .box-botoes .saiba {
        padding: 16px 29.8px;
    }

    #palestrante .content .dir .info-palestrante {
        height: auto;
        padding: 10px;
    }
    #palestrante .content .dir .info-palestrante .nome {
        padding-top: 10px;
        font-size: 30px;
    }
    #palestrante .content .esq .texto {
        font-size: 18px;
        line-height: 24px;
    }
    #palestrante .content .esq svg {
        margin: 10px 0px;
        width: 350px;
        max-width:90%;
        height: 125px;
    }
    #palestrante .content .esq .informacoes {
        font-size: 18px;
    }
    #palestrante .content .esq a {
        max-width: 100%;
    }
    #palestrante {
        background-position: 88%;
    }
    #palestrante .content .dir svg {
        width: 310px;

    }



}

@media screen and (max-width: 490px) {
    #depoimentos .confira-todos .area-confira-todos img {
        width: 70px;
    }
    #depoimentos .confira-todos .depoimento{
        padding: 0 15px !important;
    }

    #nossos-clientes {
        background-size: 100% 81%;
    }
    #touchpay .content .esq .borda-gradiente {
        width: 84vw;
        height: 84vw;
    }
    #touchpay .content .esq .imagem {
        width: 82.5vw;
        height: 82.5vw;
    }
    #touchpay .esq .play {
        width: 20vw;
        height: 20vw;
        bottom: -52px;
        min-height: 90px;
        min-width: 90px;
    }

    #blog .box-post .post .descricao .categoria {
        width: 100%;
    }

    #blog .box-post .post .descricao {
        align-items: center;
    }


    #vantagens .progresso-vantagens {
        margin-top: 40px;
    }

    #vantagens .box-botoes-swiper {
        bottom: -515px;
    }
    #sobre .dir .box-video::after {
        width: 28vw;
        height: 7.76vw;
        bottom: 13px;
        right: 14px;
    }
    #vantagens .content .vantagem .icone {
        min-width: 49px;
        min-height: 49px;
        width: 49px;
        height: 49px;
        margin-bottom: 15px;
    }

    #vantagens .content .vantagem .texto {
        line-height: 18px;
    }

    #vantagens .content .vantagem {
        align-items: flex-start;
        flex-direction: column;
        padding: 50px 29px;
        height: 378px;
    }

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

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

    #contato .content .esq>.texto {
        font-size: 19.16px;
        line-height: 33px;
    }
    #bandeiras .swiper, #parceiros .swiper {
        padding: 0;
    }

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

    }

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

    }

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


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

    #nossos-clientes .content .esq .box-texto {
        height: 200px;
        overflow: auto;
        margin-bottom: 30px;
        direction: rtl;
        text-align: left;
        padding-left: 30px;
    }
    #nossos-clientes .content .esq .box-texto p {
        unicode-bidi: plaintext;
    }
   #nossos-clientes .content .esq .box-texto::-webkit-scrollbar {
        width: 2px;
    }
   #nossos-clientes .content .esq .box-texto::-webkit-scrollbar-thumb {
        background-color: #5f5db5;
    }
   #nossos-clientes .content .esq .box-texto::-webkit-scrollbar-track {
        background: #dfdfdf;
    }

    #blog .box-post .post .saiba {
        font-size: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        right: -4px;
        bottom: -13px;
    }

    #blog .box-post .post .saiba::before {
        content: '';
        background-image: url(../../totem-de-pagamento/home/touchpay-arrow-blog-mobile.webp);
        position: absolute;
        width: 8px;
        height: 15px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}


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

    #contato .content .esq>.titulo {
        font-size: 25.3px;
        line-height: 40px;
    }
    #sobre {
        background-size: 100% 63%;
    }
    #sobre .dir .box-video {
        height: 64vw;
    }
    #sobre .dir .box-video .play, #minimercado .dir .play, #nossos-clientes .content .play {
        width: 100px;
        height: 100px;
    }
    #touchpay .content .pagamentos img {
        max-width: 49px;
    }

}

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

    #sobre .content {
        padding: 35px 14px;
    }
    #blog .confira {
        padding: 16px 24.4px;
    }
    #depoimentos .content .dir .depoimento .texto-depoimento {
        font-size: 14px;
        line-height: 22px;
    }
    #palestrante {
        background-position: 84%;
    }
    #palestrante .content .esq .informacoes {
        font-size: 16px;
    }
    #palestrante .content .esq .texto {
        font-size: 16px;
        line-height: 20px;
    }


}

@media screen and (max-width: 360px) {
     header > .content::before {
        top: 330px;
    }
    header > .content {
        top: 320px;
    }

    .pop-up .icone-x {
        top: 20px;
    }
    .pop-up .logo-amlabs {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pop-up .logo-amlabs svg {
        max-width: 90%;
    }
    #palestrante .content .dir .info-palestrante .nome {
            font-size: 25px;
    }
    #palestrante .content .dir .info-palestrante .funcao {
        font-size: 14px;
    }

    #sobre .bottom .card .numeros {
        font-size: 42px;
    }
    #blog .box-post .post {
        height: 513px;
    }
    #palestrante .content .dir svg {
        max-width: 100%;

    }
}
@media screen and (max-width: 330px) {
    header{
        padding-top: 260px !important;
    }
    header.top-scroll {
        padding-top: 312px !important;
    }
    .pop-up {
        height: auto;
        padding: 20px 0px;
    }
}