/* ==========================================
   BRAHMIN GROCERY
   RESPONSIVE CSS
========================================== */


/* ==========================================
   Large Tablets
   1200px
========================================== */

@media (max-width:1200px){

.container{
    width:95%;
}

.hero-main h1{
    font-size:46px;
}

}


/* ==========================================
   Tablets
   992px
========================================== */

@media (max-width:992px){

/* Header */

.navbar-modern .container{
    flex-wrap:wrap;
    gap:20px;
}

.logo{
    width:100%;
    text-align:center;
}

.logo img{
    margin:auto;
}

.search-box{
    width:100%;
    max-width:100%;
    order:3;
}

.desktop-menu{
    display:none;
}

.header-icons{
    margin-left:auto;
}

/* Hero */

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

.hero-main{
    padding:45px;
}

.hero-main h1{
    font-size:40px;
}

.hero-right{
    margin-top:30px;
}

/* Categories */

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

/* Products */

.product-image img{
    height:190px;
}

}


/* ==========================================
   Mobile
   768px
========================================== */

@media (max-width:768px){

.container{
    width:94%;
}

/* Hide Top Bar */

.top-bar{
    display:none;
}

/* Hero */

.hero-section{
    padding:35px 0;
}

.hero-main{
    padding:25px;
}

.hero-main h1{
    font-size:30px;
}

.hero-main p{
    font-size:15px;
}

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

.btn-shop,
.btn-offer{
    width:100%;
    text-align:center;
}

/* Product Cards */

.product-content{
    padding:15px;
}

.product-content h3{
    font-size:16px;
    height:auto;
}

.product-price{
    font-size:20px;
}

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

.view-btn,
.cart-btn{
    width:100%;
}

/* Categories */

.category-grid{
    gap:15px;
}

.category-card{
    padding:18px;
}

.category-icon{
    font-size:40px;
}

.category-card h4{
    font-size:15px;
}

}


/* ==========================================
   Small Phones
   576px
========================================== */

@media (max-width:576px){

.hero-main h1{
    font-size:26px;
}

.section-title h2{
    font-size:30px;
}

.section-title p{
    font-size:15px;
}

.product-image img{
    height:150px;
}

.logo img{
    height:48px;
}

.header-icons a{
    width:42px;
    height:42px;
    font-size:18px;
}

.search-box input{
    padding:12px 15px;
}

.search-box button{
    width:50px;
}

}


/* ==========================================
   Extra Small Phones
   400px
========================================== */

@media (max-width:400px){

.hero-main{
    padding:20px;
}

.hero-main h1{
    font-size:22px;
}

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

}
/* ==========================================
   FOOTER
========================================== */

@media (max-width:768px){

.page-footer .banners .container{

flex-direction:column;

}

.banner-award{

font-size:28px;

padding:30px;

width:100%;

}

.banner-social{

width:100%;

padding:30px;

gap:15px;

}

.banner-social__link{

width:48px;

height:48px;

font-size:18px;

}

.page-footer__subline .container{

flex-direction:column;

text-align:center;

}

.copyright,

.designby,

.developer{

width:100%;

}

}
@media(max-width:992px){

.menu-toggle{

display:flex;

justify-content:center;

align-items:center;

}

.desktop-menu{

display:none;

width:100%;

flex-direction:column;

background:#fff;

padding:20px;

margin-top:20px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.desktop-menu.active{

display:flex;

}

.desktop-menu a{

padding:15px;

border-bottom:1px solid #eee;

}

}
@media(max-width:768px){

.shop-filters{

padding:18px;

}

.shop-filters .category-menu{

display:flex;

flex-wrap:nowrap;

overflow-x:auto;

padding-bottom:10px;

}

.shop-filters .category-menu::-webkit-scrollbar{

height:5px;

}

.shop-filters .category-menu::-webkit-scrollbar-thumb{

background:#28a745;

border-radius:10px;

}

.shop-filters .category-menu label{

white-space:nowrap;

}

}