/*
|--------------------------------------------------------------------------
| DIVAS DRINKS RP
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

/* ===============================
   Notebook
================================*/

@media(max-width:1200px){

    .container{
        max-width:100%;
        padding:0 30px;
    }

}

/* ===============================
   Tablet
================================*/

@media(max-width:992px){

    section{
        padding:70px 0;
    }

    .section-title{
        font-size:2.2rem;
    }

    .hero-title{
        font-size:3rem;
    }

    .hero-description{
        font-size:1rem;
    }

    .destaques-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .perfis-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .sobre-content{
        grid-template-columns:1fr;
    }

    .footer-content{
        grid-template-columns:1fr;
        gap:40px;
    }

}

/* ===============================
   Mobile
================================*/

@media(max-width:768px){

    body{
        padding-top:70px;
    }

    .header .container{
        height:70px;
    }

    .navbar{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .hero{
        min-height:auto;
        padding:100px 0;
        text-align:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-title{
        font-size:2.4rem;
    }

    .hero-description{
        margin:0 auto 35px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .section-title{
        font-size:2rem;
    }

    .destaques-grid{
        grid-template-columns:1fr;
    }

    .perfis-grid{
        grid-template-columns:1fr;
    }

    .perfil-info{
        text-align:center;
    }

    .sobre-text{
        text-align:center;
    }

    .footer{
        text-align:center;
    }

    .footer-brand p{
        margin:auto;
    }

}

/* ===============================
   Mobile Pequeno
================================*/

@media(max-width:480px){

    .container{
        padding:0 20px;
    }

    .hero-title{
        font-size:2rem;
    }

    .section-title{
        font-size:1.7rem;
    }

    .btn{
        width:100%;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .whatsapp{
        right:20px;
        bottom:20px;
        width:58px;
        height:58px;
        font-size:1.7rem;
    }

}