/* ==========================
   TABLET
========================== */

@media (max-width:992px){

    .top-header{
        display:none;
    }

    .featured-grid{

    grid-template-columns:repeat(2,1fr);

}

.products-grid{

    grid-template-columns:repeat(2,1fr);

}

.collections-banner h1{

    font-size:42px;

}

}


/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    .navbar{

        height:75px;
        position:relative;

    }

    .logo img{

        width:140px;

    }

    .menu-toggle{

        display:block;

    }

    .whatsapp-btn{

        display:none;

    }

   nav{
    position:fixed;
    top:75px;
    left:0;
    width:100%;
    height:calc(100vh - 75px);

    background:#fff;

    transform:translateX(-100%);
    transition:transform .3s ease;

    z-index:99999;
    overflow-y:auto;
}

nav.active{
    transform:translateX(0);
}

    nav.active{

    transform:translateX(0);

}

    nav ul{

        display:flex;

        flex-direction:column;

        gap:0;

    }

    nav ul li{

        border-bottom:1px solid #eee;

    }

    nav ul li a{

        display:block;

        padding:18px;

        text-align:center;

        font-size:18px;

    }

    .nav-icons{

        gap:15px;

    }

    /* WHY CHOOSE */

.why-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

/* SHIPPING */

.shipping-wrapper{
    grid-template-columns:1fr;
}

/* CONTACT */

.contact-container{
    display:flex;
    flex-direction:column;
}



/* FOOTER */

.footer{
    overflow:hidden;
}

.footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
}

.footer-map iframe{
    width:100%;
}

/* mobile view fixes */



.hero-left,
.hero-right{
    width:100%;
}

.features .container{
    grid-template-columns:repeat(5,1fr);
}

.features .container{
    grid-template-columns:1fr;
}

.shipping-wrapper{
    grid-template-columns:1fr;
}

.contact-container{
    grid-template-columns:1fr;
}

.contact-info,
.contact-form{
    width:100%;
}

/* HERO FIX */

html,
body{
    width:100%;
    overflow-x:hidden;
}

header{
    width:100%;
    overflow:visible;
}

.navbar{
    width:100%;
    position:relative;
    overflow:visible;
}

.hero{
    width:100%;
    overflow:hidden;
}

.hero{
    margin-top:0;
}

.hero .container{
    width:100%;
    max-width:100%;
    padding:0 15px;
    margin:0 auto;
}

.hero-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin:0;
    min-height:auto;
    padding:100px 15px 60px;
}

.hero-left,
.hero-right{
    width:100%;
}

.hero-right{
    display:flex;
    justify-content:center;
}

.hero-right img{
    width:85%;
    max-width:350px;
}

.hero img{
    width:100%;
    display:block;
}

.featured-grid{

    grid-template-columns:1fr;

}

.products-grid{

    grid-template-columns:1fr;

}

.collections-banner{

    padding:120px 20px 60px;

}

.collections-banner h1{

    font-size:34px;

}

/* ==========================
   Lenin Collection Mobile
========================== */

.lenin-grid{

    grid-template-columns:1fr !important;

    gap:20px;

}

.lenin-card{

    width:100%;

}

.lenin-card img{

    height:420px;

    object-fit:cover;

}

}


/* ==========================
   576
========================== */

@media (max-width:576px){

    .hero-left h1{

        font-size:42px;

    }

    .hero-left h2{

        font-size:24px;

    }

    .hero-left p{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .shop-btn,
    .chat-btn{

        width:100%;
        text-align:center;

    }

    
/* ABOUT SECTION */

.about-container{

    flex-direction:column;

    gap:40px;

}

.about-image{

    width:100%;

}

.about-image img{

    width:100%;
    max-width:100%;
    border-radius:15px;

}

.about-content{

    width:100%;
    text-align:center;

}

.about-features{

    grid-template-columns:1fr;

}

.about-item{

    justify-content:flex-start;

}

.lenin-grid{

    grid-template-columns:1fr;

}

}
