@media (max-width: 768px) {
    .gradient {
        height: 150%;
        width: 50vw;
        border: none;
        padding: 0;
        margin: 0;
    }

    .logoImg {
        width: 300px;
    }

    .divPai {
        height: 100dvh;
        overflow: hidden;
    }

    .divGradient,
    .divGradient2 {
        overflow: hidden;
        inset: 0;
        width: 100vw;
        height: 100%;
    }

    .divPai h2 {
        font-size: 40px;
        width: 100%;
        margin: 0 5px;
        bottom: 50%;
        transform: translate(0, 50%);
    }

    .card {
        justify-content: space-evenly;
        bottom: 50%;
        transform: translate(0, 50%);
        max-height: 50%;
        width: 100vw;
    }

    .card img {
        width: 200px;
    }

    .card h3 {
        font-size: 40px;
        width: 100%;
        margin: 0 5px;
    }

    .cardFinal h3 {
        font-size: 36px;
    }

    .divObrigado {
        height: 100%;
        margin: 0 5px;
        margin-bottom: -1px;
    }

    .hero h1 {
        margin-top: 30px;
        font-size: 12vw;
    }

    .hero p {
        font-size: 20px;
    }

    header a.btnHeader {
        font-size: 16px;
        gap: 8px;
    }

    header a.btnHeader img {
        width: 14px;
    }

    header>img {
        width: 100px;
    }

    a:not(footer a) {
        font-size: 20px;
        gap: 10px;
    }


    .hero p {
        margin: 44px 5px 48px;
    }

    .hero a {
        margin-bottom: 0;
    }

    .quadrado {
        width: 100px;
        height: 100px;
    }

    .content {
        padding: 0 5px;
    }

    .divTela>img {
        width: 95%;
        margin-top: 0px;
    }

    .divTela {
        margin-top: 0;
    }

    /* ou 20px/40px */

    .divTela .funcoes {
        margin-top: 15px;
        gap: 20px;
    }

    .divTela .funcoes span {
        font-size: 14px;
    }

    .divTela .funcoes span img {
        width: 16px;
    }

    .content p.txtSobre {
        font-size: 34px;
        text-align: left;
        margin: 100px 5px;
    }

    section {
        margin: 100px 0px;
        width: 100%;
    }

    .sectionContent {
        width: 100%;
        padding: 0 5px;
    }

    .content h2 {
        font-size: 40px;
        align-self: flex-start;
    }

    .processo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        overflow: visible;
        text-align: center;
    }

    .clientes{
        margin-top: 0;
    }

    .processo .sectionContent {
        align-items: center;
    }

    section.crescimento{
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .pin-section {
        margin: 40px 0 0;
        height: auto;
        align-items: flex-start;
    }

    .pin-section .content {
        margin-bottom: 0;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .pin-section .list {
        width: 100%;
        padding: 0;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        font-size: 32px;
    }

    .pin-section .fill {
        display: none;
    }

    .pin-section .right {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pin-section .slide {
        width: 100%;
        gap: 14px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .pin-section .slide>img {
        width: 100%;
        max-width: 320px;
    }

    .pin-section .txt-slide {
        margin-top: 0;
        text-align: center;
    }

    .pin-section .slide h4 {
        font-size: 32px;
        text-align: center;
    }

    .pin-section .slide p {
        margin: 14px 0;
        font-size: 18px;
        text-align: center;
    }

    .divCardsCrescimento {
        display: flex;
        flex-direction: column;
        margin-top: 80px;
        margin-bottom: 80px;
        gap: 60px;
    }

    .cardCrescimento {
        width: 90%;
    }

    .cardsClientes {
        display: flex;
        flex-direction: column;
        margin-top: 80px;
        gap: 60px;
    }

    .cardClientes {
        width: 90%;
        min-height: auto;
        align-self: center;
    }

    .cardClientes h4 {
        font-size: 30px;
        font-weight: 500;
    }

    .cardClientes p {
        font-size: 16px;
    }

    .cardClientes .cardCirculo {
        right: 10px;
        top: -50px;
        width: 80px;
        height: auto;
    }

    .cardClientes .cardCirculo img {
        width: 70%;
        height: 70%;
    }

    .background h4 {
        font-size: 30px;
        font-weight: 500;
    }

    .background p {
        font-size: 16px;
    }

    span.cardCirculo {
        right: 10px;
        top: -50px;
        width: 80px;
        height: auto;

        img {
            width: 70%;
        }
    }

    .crescimento a {
        margin: 0;

        img {
            width: 16px;
        }
    }

    .empresas {
        margin-top: 00px;
        margin-bottom: 00px;

        h3 {
            margin-bottom: 20px;
            font-size: 28px;
            text-align: center;
        }

        img {
            width: 200%;
            flex-wrap: nowrap;
        }
    }

    section.chamada .sectionContent {
        padding: 0;

        h3 {
            width: 100%;
            font-size: 40px;
            margin: 0px;
        }

        p {
            font-size: 20px;
            margin: 40px 0 80px;
        }
    }

    section.chamada .sectionContent {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .botoesChamada {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .textoCarrossel p {
        font-size: 98px;
        opacity: 0.3;
    }

    .logoImgFooter {
        width: 300px;
    }

    footer .footer h3 {
        font-size: 90px;
        letter-spacing: 0;
    }

    .footerInfosLeft,
    .footerInfosRight {
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        align-items: center;
        text-align: center;
        gap: 2px;
    }

    .footerInfosLeft {
        bottom: 95px;
    }

    .footerInfosRight {
        bottom: 38px;
    }

    .footerInfosLeft p,
    .footerInfosRight p {
        font-size: 11px;
        line-height: 1.15;
    }

    .footerCredit {
        bottom: 8px;
        font-size: 9px;
        letter-spacing: 0.2px;
        width: 100%;
        padding: 0 8px;
    }



    .pin-section .content {
        margin-bottom: 0;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .pin-section .list {
        width: 100%;
        padding: 0;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        font-size: 32px;
    }

    .pin-section .right {
        width: 100%;
        min-height: 480px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pin-section .slide {
        width: 100%;
        gap: 14px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .pin-section .slide>img {
        width: 100%;
        max-width: 320px;
    }

    .pin-section .txt-slide {
        margin-top: 0;
        text-align: center;
    }

    .pin-section .slide h4 {
        font-size: 32px;
        text-align: center;
    }

    .pin-section .slide p {
        margin: 14px 0;
        font-size: 18px;
        text-align: center;
    }
}

/* Centralizar todas as divs e tags dentro de .section */