/*=========================================
                1200px
=========================================*/

@media (max-width:1200px){

    .container{
        width:min(94%,1180px);
    }

    .hero-content h1{
        font-size:4rem;
    }

    .hero-image img{
        max-width:560px;
    }

    .tratamentos-grid{
        gap:45px;
    }

}


/*=========================================
                992px
=========================================*/

@media (max-width:992px){

    section{
        padding:90px 0;
    }

    .navbar{
        height:82px;
    }

    .menu{
        display:none;
    }

    .btn-header{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    /* HERO */

    .hero{

        padding:140px 0 80px;

    }

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-content{

        max-width:700px;

        margin:auto;

    }

    .hero-content h1{

        font-size:3.6rem;

    }

    .hero-content p{

        max-width:620px;

        margin:30px auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        justify-content:center;

    }

    .hero-image img{

        max-width:500px;

    }

    .hero-shape{

        display:none;

    }

    /* TRATAMENTOS */

    .tratamentos-grid{

        grid-template-columns:repeat(2,1fr);

        gap:45px;

    }

    /* SOBRE */

    .sobre .container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .sobre-imagem{

        order:-1;

    }

    .sobre-imagem img{

        max-width:500px;

    }

    /* PROCESSO */

    .processo{

        grid-template-columns:repeat(2,1fr);

    }

}


/*=========================================
                768px
=========================================*/

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    .container{

        width:92%;

    }

    /* HEADER */

    .navbar{

        height:74px;

    }

    .logo img{

        height:42px;

    }

    .logo-text h2{

        font-size:1.45rem;

    }

    .logo-text span{

        font-size:.72rem;

        letter-spacing:2px;

    }

    /* HERO */

    .hero{

        padding:120px 0 70px;

    }

    .hero-content h1{

        font-size:2.9rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-image img{

        max-width:400px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .btn{

        width:100%;

        max-width:320px;

    }

    /* TITULOS */

    .section-title{

        margin-bottom:60px;

    }

    .section-title h2{

        font-size:2.5rem;

    }

    /* TRATAMENTOS */

    .tratamentos-grid{

        grid-template-columns:1fr;

        gap:55px;

    }

    /* FAQ */

    .faq{

        margin-top:40px;

    }

    .faq-question{

        padding:18px 20px;

        font-size:.95rem;

    }

    .faq-answer p{

        padding:0 20px 20px;

        font-size:.95rem;

    }

    /* PROCESSO */

    .processo{

        grid-template-columns:1fr;

        gap:30px;

    }

    .processo-card{

        padding:35px 28px;

    }

    /* SOBRE */

    .sobre{

        padding:90px 0;

    }

    .sobre-conteudo{

        text-align:center;

    }

    .sobre-conteudo>span{

        margin:20px auto 30px;

    }

    .sobre-lista{

        grid-template-columns:1fr;

        text-align:left;

    }

    .sobre-info{

        flex-direction:column;

        gap:30px;

        text-align:center;

    }

}


/*=========================================
                576px
=========================================*/

@media (max-width:576px){

    .container{

        width:min(100% - 32px, var(--container));

    }

    .hero{

        padding:105px 0 60px;

    }

    .hero-content h1{

        font-size:2.35rem;

    }

    .hero-content p{

        font-size:.95rem;

    }

    .hero-image img{

        max-width:320px;

    }

    .hero-image::before{

        width:360px;
        height:360px;

    }

    .section-title h2,
    .sobre-conteudo h2{

        font-size:2.15rem;

    }

    .section-title p,
    .sobre-conteudo p{

        font-size:.96rem;
        line-height:1.75;

    }

    .btn{

        width:100%;

    }

    .faq-question{

        font-size:.92rem;

        line-height:1.5;

        gap:15px;

    }

    .faq-question span{

        width:32px;

        height:32px;

        font-size:1.2rem;

    }

    .sobre-numero h3{

        font-size:2.2rem;

    }

}


/*=========================================
                400px
=========================================*/

@media (max-width:400px){

    .logo{

        gap:8px;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-image img{

        max-width:270px;

    }

    .logo img{

        height:36px;

    }

    .logo-text h2{

        font-size:1.2rem;

    }

    .logo-text span{

        font-size:.65rem;

    }

    .menu-toggle{

        width:40px;
        height:40px;

    }

}