/* ==========================================
   BailJi Organic Responsive CSS
   Part 1
========================================== */

/* =============================
   Large Screens
============================= */

@media (max-width:1400px){

.container{

max-width:1140px;

}

.hero-title{

font-size:58px;

}

}

/* =============================
   Laptop
============================= */

@media (max-width:1200px){

.container{

max-width:960px;

}

.hero-title{

font-size:50px;

}

.hero-image img{

max-width:450px;

}

.navbar{

padding:15px 0;

}

.search-box{

width:220px;

}

.section-title h2{

font-size:38px;

}

}

/* =============================
   Tablet
============================= */

@media (max-width:992px){

.container{

max-width:720px;

}

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

.hero-card{

display:none;

}

.navbar-nav{

display:none;

}

.mobile-toggle{

display:block;

font-size:28px;

cursor:pointer;

}

.search-box{

display:none;

}

.header-icons{

gap:15px;

}

.section{

padding:70px 0;

}

.product-grid{

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

gap:20px;

}

.category-grid{

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

}

.feature-grid{

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

}

.counter-grid{

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

}

.blog-grid{

grid-template-columns:1fr;

}

.footer-columns{

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

gap:30px;

}

}

/* =============================
   Mobile
============================= */

@media (max-width:768px){

.container{

max-width:540px;

padding:0 15px;

}

.hero{

padding:80px 0;

}

.hero-title{

font-size:38px;

}

.hero-text{

font-size:16px;

}

.hero-image img{

max-width:320px;

}

.product-grid{

grid-template-columns:1fr;

}

.category-grid{

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

}

.feature-grid{

grid-template-columns:1fr;

}

.counter-grid{

grid-template-columns:1fr;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form button{

width:100%;

}

.footer-columns{

grid-template-columns:1fr;

}

}
/* ==========================================
   Responsive.css Part 2
   Shop • Product • Cart • Checkout • User
========================================== */

/* ===========================
   Shop Page
=========================== */

@media(max-width:992px){

.shop-layout{

display:block;

}

.shop-sidebar{

width:100%;

margin-bottom:30px;

}

.shop-products{

width:100%;

}

.filter-box{

margin-bottom:20px;

}

.product-toolbar{

flex-direction:column;

gap:15px;

align-items:flex-start;

}

}

/* ===========================
   Product Details
=========================== */

@media(max-width:992px){

.product-details{

display:block;

}

.product-gallery{

margin-bottom:40px;

}

.product-gallery img{

width:100%;

}

.product-info{

padding:0;

}

.product-price{

flex-wrap:wrap;

}

.product-actions{

flex-direction:column;

gap:15px;

}

.product-actions .btn{

width:100%;

}

}

/* ===========================
   Cart
=========================== */

@media(max-width:992px){

.cart-layout{

display:block;

}

.cart-items{

width:100%;

margin-bottom:30px;

}

.cart-summary{

width:100%;

}

.cart-table{

overflow-x:auto;

display:block;

white-space:nowrap;

}

}

/* ===========================
   Checkout
=========================== */

@media(max-width:992px){

.checkout-layout{

display:block;

}

.checkout-form{

width:100%;

margin-bottom:30px;

}

.order-summary{

width:100%;

}

.checkout-form .row{

display:block;

}

.checkout-form .col-md-6{

width:100%;

margin-bottom:20px;

}

}

/* ===========================
   Wishlist
=========================== */

@media(max-width:768px){

.wishlist-grid{

grid-template-columns:1fr;

}

.wishlist-card{

margin-bottom:25px;

}

}

/* ===========================
   User Dashboard
=========================== */

@media(max-width:992px){

.user-dashboard{

display:block;

}

.user-sidebar{

width:100%;

margin-bottom:25px;

}

.user-content{

width:100%;

}

.user-menu{

display:flex;

overflow-x:auto;

gap:15px;

padding-bottom:10px;

}

.user-menu a{

white-space:nowrap;

}

}

/* ===========================
   Order History
=========================== */

@media(max-width:768px){

.order-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/* ===========================
   Invoice
=========================== */

@media(max-width:768px){

.invoice{

padding:20px;

}

.invoice-header{

display:block;

text-align:center;

}

.invoice-company{

margin-bottom:20px;

}

.invoice-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/* ===========================
   Forms
=========================== */

@media(max-width:768px){

.form-control{

font-size:15px;

padding:12px 15px;

}

.btn{

padding:14px 20px;

}

}

/* ===========================
   Footer
=========================== */

@media(max-width:768px){

.footer-top{

text-align:center;

}

.footer-links{

margin-top:25px;

}

.social-icons{

justify-content:center;

}

}

/* ===========================
   Utility
=========================== */

.hide-mobile{

display:none !important;

}

.text-center-mobile{

text-align:center !important;

}

.mt-mobile{

margin-top:30px;

}

.mb-mobile{

margin-bottom:30px;

}
/* ==========================================
   Responsive.css Part 3
   Mobile Navigation & Final Responsive
========================================== */

/* Mobile Navigation */

.mobile-menu{

    position:fixed;

    top:0;

    left:-100%;

    width:280px;

    height:100vh;

    background:#fff;

    box-shadow:0 10px 40px rgba(0,0,0,.15);

    transition:.4s;

    z-index:9999;

    overflow-y:auto;

}

.mobile-menu.active{

left:0;

}

.mobile-menu-header{

padding:25px;

background:#2E7D32;

color:#fff;

display:flex;

justify-content:space-between;

align-items:center;

}

.mobile-menu ul{

list-style:none;

padding:20px;

}

.mobile-menu ul li{

border-bottom:1px solid #eee;

}

.mobile-menu ul li a{

display:block;

padding:15px 0;

font-weight:500;

color:#333;

}

.mobile-menu ul li a:hover{

color:#2E7D32;

padding-left:10px;

}

.mobile-close{

font-size:26px;

cursor:pointer;

}

/* Mobile Bottom Navigation */

.mobile-bottom{

display:none;

}

@media(max-width:768px){

.mobile-bottom{

display:flex;

position:fixed;

bottom:0;

left:0;

width:100%;

background:#fff;

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

justify-content:space-around;

padding:10px 0;

z-index:999;

}

.mobile-bottom a{

text-align:center;

color:#444;

font-size:13px;

}

.mobile-bottom i{

display:block;

font-size:20px;

margin-bottom:5px;

}

}

/* Mobile Search */

@media(max-width:768px){

.mobile-search{

display:block;

margin:20px 0;

}

.mobile-search input{

width:100%;

padding:14px 20px;

border-radius:40px;

border:1px solid #ddd;

}

}

/* Hero */

@media(max-width:576px){

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats{

display:grid;

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

gap:20px;

}

}

/* Product Cards */

@media(max-width:576px){

.product-card{

margin-bottom:25px;

}

.product-card img{

height:220px;

}

.product-actions{

flex-direction:column;

gap:12px;

}

.product-actions .btn{

width:100%;

}

}

/* Categories */

@media(max-width:480px){

.category-grid{

grid-template-columns:1fr;

}

.category-card{

padding:25px;

}

}

/* Testimonials */

@media(max-width:576px){

.testimonial-card{

padding:25px;

text-align:center;

}

.customer{

flex-direction:column;

}

}

/* CTA */

@media(max-width:576px){

.cta-banner{

padding:35px 20px;

}

.cta-banner h2{

font-size:28px;

}

}

/* Newsletter */

@media(max-width:576px){

.newsletter{

padding:60px 20px;

}

.newsletter h2{

font-size:28px;

}

}

/* Footer */

@media(max-width:576px){

footer{

padding-bottom:0px;

}

.footer-logo{

font-size:26px;

}

.footer-title{

font-size:18px;

}

}

/* Back To Top */

@media(max-width:768px){

#backToTop{

right:15px;

bottom:90px;

width:50px;

height:50px;

}

}

/* WhatsApp */

@media(max-width:768px){

.whatsapp{

left:15px;

bottom:90px;

width:55px;

height:55px;

font-size:28px;

}

}

/* Performance */

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/* Extra Small */

@media(max-width:360px){

.hero-title{

font-size:26px;

}

.section-title h2{

font-size:24px;

}

.btn{

font-size:14px;

padding:12px 16px;

}

.product-title{

font-size:17px;

}

.current-price{

font-size:20px;

}

}

/* Print */

@media print{

.navbar,

.topbar,

.mobile-bottom,

.whatsapp,

#backToTop,

footer{

display:none;

}

body{

background:#fff;

}

.container{

width:100%;

max-width:100%;

}

}