@media (max-width: 1125px) {
    .aval-cards .col {
        position: unset !important;
    }
}


@media (max-width: 1125px) {

    /* ----------------------------- HOME-MAIN ---------------------------------- */

    #home-main .main-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #home-main .main-logo .desc {
        text-align: center;
    }

    #home-main .col:has(.home-frascos) {
        display: none;
    }

    #home-main .home-main-svg-bg::before {
        top: 10%;
    }

    #vantagens {
        display: flex;
        align-items: center;
        text-align: center;
    }

    #vantagens .col .vantagem {
        white-space: normal !important;
    }

    #vantagens .col .vantagem {
        flex-direction: column;
        align-items: center;
    }

    #vantagens .col .vantagem img {
        max-width: 30px;
    }

    #info-section {
        gap: 100px !important;
    }


    #info-section .row:has(.info1-text) {
        align-items: center;
        flex-direction: column;
        gap: 40px;
    }

    #info-section .info1-text {
        text-align: center;
        align-items: center;
    }

    #info-section .col-4:has(.info1-img) {
        width: 100% !important;
    }

    #info-section .info-1 .info1-img {
        justify-content: center !important;
    }

    #info-section .info1-img img {
        position: relative;
        width: 100%;
    }

    #info-section .info1-img::before {
        display: none;
        left: 0 !important;
        right: 0 !important;
        /* width: 100% !important; */
        height: 100% !important;
        /* background-position: center !important; */
    }

    #info-section .row:has(.info2-text) {
        align-items: center;
        flex-direction: column-reverse;
        justify-content: center;
        gap: 30px;
    }

    #info-section .info2-text {
        text-align: center;
        align-items: center;
    }

    #info-section .info-2 .info2-img {
        position: relative;
        justify-content: center !important;
    }

    #info-section .info-2 .info2-img img {
        max-width: 500px !important;
        max-height: 500px !important;
    }

    #info-section .info-2 .info2-img::before {
        width: 100%;
        height: 100%;
    }

    #info-section .info-2 .description {
        max-width: 83%;
    }


    /* ----------------------------- ESPECIALISTAS ---------------------------------- */

    #especialistas .esp-image .pv_frasco {
        display: none;
    }

    #especialistas .text-info {
        font-size: 20% !important;
    }

    #especialistas .esp-image .esp {
        max-width: 200px;
    }

    #especialistas .text-info h3 {
        white-space: nowrap;
    }
    
    #especialistas .ingred-cards {
        padding-top: 0 !important;
    }

    .container:has(.main-esp-row) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 100px;
        max-width: 85% !important;
    }

    .col-4:has(.esp-image) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
    }

    /* ----------------------------- AVALIACOES ---------------------------------- */

    .aval-cards {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .aval-cards .col {
        position: unset !important;
        display: flex;
        justify-content: center;
    }


    /* ----------------------------- CHECKOUTS ---------------------------------- */

    #checkout .checkout-cards {
        display: flex;
        justify-content: center;
    }

    #checkout .checkout-cards .col {
        display: flex;
        justify-content: center;
        margin-bottom: 30px !important;
    }


    /* ----------------------------- MODO-DE-USO ---------------------------------- */

    #modo-de-uso .usemode-cards {
        display: flex;
        justify-content: center;
    }

    #modo-de-uso .usemode-cards .col {
        display: flex;
        justify-content: center;
    }
}




@media (max-width: 1060px) {
    .col-4:has(.esp-image) {
        display: none;
    }

    #especialistas .text-info {
        text-align: center;
    }
}



@media (max-width: 920px) {

    /* ---------------------------------- HOME ---------------------------------- */
    .container {
        max-width: 90%;
        /* Aumenta o espaço em dispositivos menores */
    }

    #home-main .main-logo .pv-logo {
        width: 230px !important;
        /* Diminui o logo em telas menores */
    }

    #home-main .lion-logo {
        width: 200px;
        /* Ajuste da imagem do leão */
        bottom: 40px;
        /* Ajusta a posição */
        left: 140px;
    }

    #home-main .desc {
        width: 100%;
        /* Ajusta o texto descritivo para caber melhor */
    }

    .get-pv-button,
    .main-button {
        width: 100%;
        /* Botões ocupam 100% da largura */
    }

    #home-main .home-frascos img {
        max-height: 450px;
        /* Diminui o tamanho das imagens */
    }

    /* ---------------------------------- HOME ---------------------------------- */

    .col-4:has(.esp-image) {
        display: none;
        justify-content: center;
        align-items: center;
    }

    #especialistas .text-info {
        text-align: center;
    }

    #especialistas .ingred-cards {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0 !important;
    }
}






/* -------- Estilos para smartphones (máx. 480px) -------- */
@media (max-width: 480px) {
    #home-main {
        padding-top: 50px !important;
        /* Ajuste de padding superior */
    }

    #home-main .title-bg {
        padding: 1% 5%;
    }

    #home-main .title-bg .title h2 {
        font-size: 15px;
    }

    #home-main .title-bg .title .energ-disp {
        max-height: 20px !important;
    }

    #home-main .main-button {
        font-size: 20px;
    }

    #vantagens {
        flex-direction: row;
    }

    #vantagens .vantagem {
        font-size: 13px !important;
    }

    #home-main .energ-disp {
        font-size: 10px;
    }

    .navbar p {
        font-size: 16px;
        /* Diminui o tamanho do texto da navbar */
    }

    .container {
        max-width: 100%;
        /* O container ocupa a largura completa */
    }

    #home-main .main-logo .pv-logo {
        width: 180px !important;
        /* Diminui o logo ainda mais para telas pequenas */
    }

    #home-main .lion-logo {
        width: 150px;
        /* Ajuste da imagem do leão */
        bottom: 30px;
        /* Ajusta a posição */
        left: 100px;
    }

    #home-main .desc {
        font-size: 14px;
        /* Ajusta o tamanho do texto */
        width: 100%;
        /* Texto ocupa 100% */
    }

    .get-pv-button {
        width: 80% !important;
        /* Botões ocupam 100% da largura */
        font-size: 20px;
        /* Ajusta o tamanho do texto */
    }

    #home-main .home-frascos img {
        max-height: 350px;
        /* Ajusta as imagens dos frascos */
    }

    #home-main .title h2 {
        font-size: 22px;
        /* Diminui o título principal */
    }

    /* INFO-TEXT */

    #info-section .info-1 h1 {
        font-size: 25x;
    }

    #info-section .info-1 h1 p {
        font-size: 23px;
    }

    #info-section .info-1 .description {
        font-size: 15px;
    }

    #info-section .info-2 .info2-img img {
        max-width: 100% !important;
    }

    #info-section .info-2 .col-5:has(.info2-img) {
        width: 80% !important;
    }

    #beneficios .vantagem-cards {
        gap: 25px;
    }

    #especialistas .text-info .title h3 {
        font-size: 20px;
        white-space: unset !important;
    }

    #especialistas .text-info .title h1 {
        font-size: 45px;
        white-space: unset !important;
    }

    #especialistas .text-info .description {
        font-size: 15px;
    }

    #especialistas .main-esp-row {
        max-height: none !important;
    }
    
     #especialistas .ingred-cards {
        padding-top: 0 !important;
    }

    .safe-cards {
        flex-direction: column;
        gap: 50px;
    }


    .safe-cards .col {
        position: unset !important;
    }

    #modo-de-uso .container .row .col {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #modo-de-uso button {
        width: 100% !important;
        padding: 0 30px;
    }

    footer .desc {
        font-size: 13px;
        max-width: 90%;
    }

    footer .row:has(.desc) {
        display: flex;
        justify-content: center;
    }

}