/* =====================================
   RESPONSIVE.CSS
===================================== */


/* =====================================
   NOTEBOOKS E TELAS MÉDIAS
===================================== */

@media(max-width:1200px){


    .hero h1{

        font-size:44px;

    }


    .hero-grid{

        gap:40px;

    }


    .hero-product img{

        width:360px;

    }


}



/* =====================================
   TABLETS
===================================== */

@media(max-width:992px){


    .header-content{

        height:auto;

        padding:20px 0;

        flex-wrap:wrap;

        gap:20px;

    }



    nav{

        order:3;

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }



    .hero{

        padding:70px 0;

    }



    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }



    .hero-product{

        order:-1;

    }



    .hero-product img{

        width:320px;

        margin:auto;

    }



    .benefits-mini{

        max-width:500px;

        margin-left:auto;

        margin-right:auto;

        text-align:left;

    }



    .cards{

        grid-template-columns:1fr 1fr;

    }



    .steps-grid{

        grid-template-columns:1fr;

    }



}



/* =====================================
   CELULARES
===================================== */

@media(max-width:768px){



    .container{

        width:92%;

    }



    .top-bar{

        font-size:12px;

        text-align:center;

        padding:0 10px;

    }



    .header-content{

        justify-content:center;

    }



    .logo{

        font-size:24px;

    }



    nav{

        display:none;

    }



    .header-btn{

        display:none;

    }



    section{

        padding:70px 0;

    }



    h2{

        font-size:30px;

        margin-bottom:35px;

    }



    .hero{

        padding-top:50px;

    }



    .hero h1{

        font-size:34px;

    }



    .hero p{

        font-size:17px;

    }



    .hero-product img{

        width:240px;

    }



    .product-glow{

        width:250px;

        height:250px;

    }



    .benefits-mini{

        grid-template-columns:1fr;

    }



    .cta{

        width:100%;

        padding:18px 20px;

    }



    .cards{

        grid-template-columns:1fr;

    }



    .card{

        padding:30px 25px;

    }



    .steps-grid div{

        padding:30px 20px;

    }



    .offer-box{

        padding:35px 25px;

    }



    .offer-box h3{

        font-size:26px;

    }



    .price{

        font-size:38px;

    }



}



/* =====================================
   CELULARES PEQUENOS
===================================== */

@media(max-width:420px){



    .hero h1{

        font-size:29px;

    }



    .badge{

        font-size:13px;

    }



    .hero-product img{

        width:210px;

    }



    .price{

        font-size:34px;

    }



}

@media(max-width:768px){


.products-grid{

grid-template-columns:1fr;

}



.featured-product{

transform:none;

}



.featured-product:hover{

transform:translateY(-10px);

}


}

@media(max-width:600px){


.customer-info{

justify-content:center;

}



.customer-info img{

width:55px;

height:55px;

}


}


@media(max-width:768px){

    .logo img{

        width:140px;

    }

}

@media(max-width:768px){

    .footer-content{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;

    }

}