/*
OT Elegance Responsive Design
*/


/* =========================
   TABLET
========================= */


@media(max-width:1024px){



.main-header{

    padding:0 3%;

}



.main-menu{

    gap:15px;

}



.hero-section{

    padding:50px 4%;

}



.hero-content h1{

    font-size:48px;

}



.category-grid{

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

}



.product-grid{

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

}



.footer-grid{

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

}



}









/* =========================
   MOBILE
========================= */


@media(max-width:768px){



body{

    padding-bottom:70px;

}





/* TOP BAR */


.top-bar{

    display:none;

}






/* HEADER */


.main-header{

    height:70px;

    padding:0 20px;

}



.main-menu{

    display:none;

}



.logo-text{

    font-size:24px;

}



.header-icons{

    gap:12px;

    font-size:18px;

}







/* MOBILE MENU */


.mobile-header{

    display:flex;

    background:white;

    height:70px;

    padding:0 20px;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid #eee;

}



.mobile-logo{

    font-family:Georgia,serif;

    font-size:24px;

    font-weight:bold;

}





/* HERO */


.hero-section{

    flex-direction:column;

    padding:40px 20px;

    text-align:center;

}



.hero-content{

    width:100%;

}



.hero-content h1{

    font-size:38px;

}



.hero-content p{

    font-size:15px;

}



.hero-image{

    width:100%;

}



.hero-image img{

    border-radius:20px;

}





/* FEATURES */


.features{

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

    gap:20px;

    padding:30px 20px;

}





/* CATEGORY */


.category-section{

    padding:50px 20px;

}



.section-title{

    font-size:30px;

}



.category-grid{

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

    gap:15px;

}



.category-card img{

    width:80px;

    height:80px;

}





/* PRODUCTS */


.products-section{

    padding:50px 20px;

}



.product-grid{

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

    gap:15px;

}



.product-card{

    padding:12px;

    border-radius:15px;

}



.product-card h3{

    font-size:14px;

}





/* FOOTER */


.footer{

    padding:50px 20px;

}



.footer-grid{

    grid-template-columns:1fr;

}



.footer-bottom{

    font-size:13px;

}






/* MOBILE BOTTOM MENU */


.mobile-bottom-nav{

    display:flex;

    position:fixed;

    bottom:0;

    left:0;

    right:0;

    height:65px;

    background:white;

    box-shadow:0 -5px 20px rgba(0,0,0,.15);

    z-index:9999;

    justify-content:space-around;

    align-items:center;

}



.mobile-bottom-nav a{

    text-align:center;

    font-size:12px;

    color:#536b36;

}



}









/* =========================
 SMALL PHONE
========================= */


@media(max-width:400px){



.hero-content h1{

    font-size:32px;

}



.product-grid{

    grid-template-columns:1fr;

}



.features{

    grid-template-columns:1fr;

}



}