/* ======================================================
   LT PROTEÇÕES
   RESPONSIVE.CSS
====================================================== */


/* ======================================================
   TABLETS
   até 1024px
====================================================== */


@media (max-width:1024px) {


    .menu ul {

        gap:20px;

    }


    .hero-grid {

        gap:40px;

    }


    .benefits-grid {

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

    }


    .categories-grid {

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

    }


    .products-grid {

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

    }


    .steps-grid {

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

    }


    .testimonial-grid {

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

    }


    .footer-grid {

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

    }


}



/* ======================================================
   MOBILE
   até 768px
====================================================== */


@media (max-width:768px) {



    section {

        padding:70px 0;

    }



    .container {

        width:92%;

    }



    /* HEADER */


    .header .container {

        height:75px;

    }


    .logo img {

        width:50px;

    }



    .menu {


        position:absolute;


        top:75px;


        left:0;


        width:100%;


        background:#090909;


        border-bottom:

        1px solid rgba(255,255,255,.1);


        padding:30px;


        transform:

        translateY(-150%);


        transition:.3s ease;


    }



    .menu.active {


        transform:

        translateY(0);


    }



    .menu ul {


        flex-direction:column;


        gap:25px;


        text-align:center;


    }



    .btn-loja {


        display:none;

    }



    .menu-mobile {


        display:flex;


        flex-direction:column;


        gap:6px;


        background:none;


        border:none;


        cursor:pointer;


    }



    .menu-mobile span {


        width:28px;


        height:3px;


        background:white;


        border-radius:5px;


    }



    /* HERO */


    .hero {


        padding-top:100px;


    }



    .hero-grid {


        grid-template-columns:1fr;


        text-align:center;


    }



    .hero h1 {


        font-size:38px;


    }



    .hero p {


        font-size:16px;


    }



    .hero-buttons {


        justify-content:center;


    }



    .hero-image {


        order:-1;


    }



    .hero-numbers {


        justify-content:center;


        gap:20px;


        flex-wrap:wrap;


    }



    .hero-numbers h3 {


        font-size:24px;


    }



    /* BENEFÍCIOS */


    .benefits-grid {


        grid-template-columns:1fr;


    }



    /* CATEGORIAS */


    .categories-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



    .category-card {


        height:110px;


    }



    .category-card h3 {


        font-size:18px;


    }



    /* PRODUTOS */


    .products-grid {


        grid-template-columns:1fr;


    }



    .product-card img {


        height:200px;


    }



    /* COMO FUNCIONA */


    .steps-grid {


        grid-template-columns:1fr;


    }



    /* SOBRE */


    .about-grid {


        grid-template-columns:1fr;


        gap:35px;


    }



    .about-grid img {


        order:2;


    }



    /* DEPOIMENTOS */


    .testimonial-grid {


        grid-template-columns:1fr;


    }



    /* FOOTER */


    .footer-grid {


        grid-template-columns:1fr;


        text-align:center;


    }



    .footer-logo {


        margin-left:auto;


        margin-right:auto;


    }



    /* WHATSAPP */


    .whatsapp {


        width:55px;


        height:55px;


        right:18px;


        bottom:18px;


    }



}





/* ======================================================
   CELULARES PEQUENOS
   até 400px
====================================================== */


@media(max-width:400px){



    .hero h1 {


        font-size:32px;


    }



    .categories-grid {


        grid-template-columns:1fr;


    }



    .hero-buttons a {


        width:100%;


    }



}
.store-links{

    display:none;

}