/* ==========================================
   BailJi Organic Premium Theme v2
   style.css (Part 1)
========================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#f8faf7;

    color:#333;

    overflow-x:hidden;

    line-height:1.7;

}

/* Variables */

:root{

--primary:#2E7D32;
--primary-dark:#1B5E20;
--primary-light:#66BB6A;

--secondary:#FFC107;

--danger:#E53935;

--light:#ffffff;

--dark:#222;

--gray:#777;

--border:#ececec;

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

--radius:18px;

}

/* Typography */

h1,h2,h3,h4,h5,h6{

font-weight:700;

margin-bottom:15px;

color:#222;

}

h1{

font-size:55px;

}

h2{

font-size:42px;

}

h3{

font-size:30px;

}

p{

font-size:16px;

color:#666;

margin-bottom:15px;

}

/* Links */

a{

text-decoration:none;

transition:.3s;

}

a:hover{

color:var(--primary);

}

/* Images */

img{

max-width:100%;

display:block;

}

/* Container */

.container{

max-width:1320px;

margin:auto;

padding:0 15px;

}

/* Section */

section{

padding:90px 0;

}

/* Buttons */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 32px;

border-radius:40px;

font-weight:600;

font-size:15px;

transition:.3s;

cursor:pointer;

}

.btn-primary{

background:linear-gradient(135deg,#43A047,#2E7D32);

color:#fff;

box-shadow:0 10px 30px rgba(46,125,50,.25);

}

.btn-primary:hover{

transform:translateY(-3px);

background:#1B5E20;

color:#fff;

}

.btn-outline{

border:2px solid var(--primary);

color:var(--primary);

background:#fff;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/* Top Bar */

.topbar{

background:#1B5E20;

color:#fff;

font-size:14px;

padding:10px 0;

}

.topbar a{

color:#fff;

margin-left:20px;

}

/* Navbar */

.navbar-nav a{

color:#222;

font-weight:500;

position:relative;

}

.navbar-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--primary);

transition:.3s;

}

.navbar-nav a:hover::after{

width:100%;

}

/* Search */

.search-box{

position:relative;

width:280px;

}

.search-box input{

width:100%;

padding:12px 45px 12px 20px;

border-radius:40px;

border:1px solid #ddd;

outline:none;

}

.search-box i{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

color:#999;

}

/* Icons */

.header-icons{

display:flex;

gap:20px;

align-items:center;

}

.header-icons a{

position:relative;

font-size:22px;

color:#333;

}

.badge-count{

position:absolute;

top:-8px;

right:-10px;

width:20px;

height:20px;

border-radius:50%;

background:#E53935;

color:#fff;

font-size:11px;

display:flex;

align-items:center;

justify-content:center;

}

/* Cards */

.card{

background:#fff;

border:none;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

}

.card:hover{

transform:translateY(-8px);

}

/* Section Title */

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

display:inline-block;

background:#E8F5E9;

padding:8px 18px;

border-radius:30px;

color:var(--primary);

font-weight:600;

margin-bottom:15px;

}

.section-title h2{

margin-bottom:15px;

}

.section-title p{

max-width:650px;

margin:auto;

}

/* Utility */

.bg-primary{

background:var(--primary);

}

.bg-light{

background:#F7F9F7;

}

.text-primary{

color:var(--primary);

}

.rounded{

border-radius:20px;

}

.shadow{

box-shadow:var(--shadow);

}

.mt-5{

margin-top:50px;

}

.mb-5{

margin-bottom:50px;

}

.py-5{

padding:90px 0;

}
/* ==========================================
   Product Cards
========================================== */

.product-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

}

.product-card:hover{

    transform:translateY(-10px);

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

}

.product-image{

    position:relative;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.4s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

/* Discount Badge */

.discount-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#E53935;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

/* Wishlist */

.wishlist-btn{

    position:absolute;

    top:15px;

    right:15px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#E53935;

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

    transition:.3s;

}

.wishlist-btn:hover{

    background:#E53935;

    color:#fff;

}

/* Quick View */

.quick-view{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%) translateY(30px);

    opacity:0;

    transition:.35s;

}

.product-card:hover .quick-view{

    opacity:1;

    transform:translateX(-50%);

}

/* Product Body */

.product-body{

    padding:22px;

}

.product-title{

    font-size:19px;

    font-weight:600;

    margin-bottom:8px;

}

.product-title a{

    color:#222;

}

.product-title a:hover{

    color:#2E7D32;

}

/* Rating */

.rating{

    color:#FFC107;

    margin-bottom:12px;

    font-size:15px;

}

.rating span{

    color:#777;

    margin-left:8px;

}

/* Price */

.price{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}

.current-price{

    font-size:24px;

    font-weight:700;

    color:#2E7D32;

}

.old-price{

    text-decoration:line-through;

    color:#999;

}

/* Add Cart */



/* ==========================================
   Category Cards
========================================== */

.category-card{

    background:#fff;

    text-align:center;

    padding:35px 20px;

    border-radius:22px;

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

    transition:.35s;

}

.category-card:hover{

    transform:translateY(-8px);

}

.category-card img{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:18px;

}

.category-card h5{

    font-weight:600;

    margin-bottom:8px;

}

.category-card span{

    color:#888;

    font-size:14px;

}

/* ==========================================
   Feature Boxes
========================================== */

.feature-box{

    text-align:center;

    padding:35px;

    border-radius:20px;

    background:#fff;

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

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-8px);

}

.feature-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#E8F5E9;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#2E7D32;

}

.feature-box h4{

    margin-bottom:12px;

}

/* ==========================================
   Newsletter
========================================== */

.newsletter{

    background:linear-gradient(135deg,#2E7D32,#43A047);

    padding:80px 0;

    color:#fff;

    border-radius:30px;

}

.newsletter h2{

    color:#fff;

}

.newsletter-form{

    max-width:650px;

    margin:auto;

    display:flex;

    gap:15px;

    margin-top:30px;

}

.newsletter-form input{

    flex:1;

    border:none;

    padding:18px 20px;

    border-radius:50px;

    outline:none;

}

.newsletter-form button{

    padding:18px 35px;

    border:none;

    border-radius:50px;

    background:#FFC107;

    color:#222;

    font-weight:700;

}

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

footer{

    background:#16361E;

    color:#ddd;

    padding:80px 0 30px;

}

.footer-logo{

    font-size:32px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}

.footer-title{

    color:#fff;

    margin-bottom:20px;

    font-size:20px;

}

.footer-links{

    list-style:none;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#bbb;

}

.footer-links a:hover{

    color:#FFC107;

}

.social-icons{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.social-icons a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#2E7D32;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    transition:.3s;

}

.social-icons a:hover{

    background:#FFC107;

    color:#222;

}

.footer-bottom{

    margin-top:50px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

    text-align:center;

    color:#aaa;

}
/* ==================================================
   BailJi Organic Premium Theme
   style.css (Part 3)
==================================================*/

/* ===========================
   Glassmorphism
=========================== */

.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:20px;
}

/* ===========================
   Hover Effects
=========================== */

.hover-up{
    transition:.35s;
}

.hover-up:hover{
    transform:translateY(-10px);
}

.hover-scale{
    transition:.35s;
}

.hover-scale:hover{
    transform:scale(1.05);
}

.hover-shadow:hover{
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* ===========================
   Image Zoom
=========================== */

.img-zoom{
    overflow:hidden;
}

.img-zoom img{
    transition:.5s;
}

.img-zoom:hover img{
    transform:scale(1.1);
}

/* ===========================
   Section Background
=========================== */

.bg-light-green{
    background:#F4FBF4;
}

.bg-gradient{

background:linear-gradient(
135deg,
#E8F5E9,
#FFFFFF
);

}

/* ===========================
   Loader
=========================== */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

z-index:99999;

display:flex;

align-items:center;

justify-content:center;

}

.loader-circle{

width:70px;

height:70px;

border-radius:50%;

border:6px solid #ddd;

border-top:6px solid #2E7D32;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* ===========================
   Back To Top
=========================== */

#backToTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

background:#2E7D32;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.2);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

#backToTop.active{

opacity:1;

visibility:visible;

}

#backToTop:hover{

background:#1B5E20;

}

/* ===========================
   Floating WhatsApp
=========================== */

.whatsapp{

position:fixed;

left:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

box-shadow:0 15px 35px rgba(0,0,0,.2);

z-index:999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:#2E7D32;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#1B5E20;

}

/* ===========================
   Utilities
=========================== */

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.d-flex{

display:flex;

}

.align-center{

align-items:center;

}

.justify-between{

justify-content:space-between;

}

.gap-10{

gap:10px;

}

.gap-20{

gap:20px;

}

.mt-30{

margin-top:30px;

}

.mt-50{

margin-top:50px;

}

.mb-30{

margin-bottom:30px;

}

.mb-50{

margin-bottom:50px;

}

.py-100{

padding:100px 0;

}

/* ===========================
   Animations
=========================== */

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-left{

animation:fadeLeft .8s;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.fade-right{

animation:fadeRight .8s;

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.zoom-in{

animation:zoomIn .7s;

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}

/* ===========================
   Responsive Helpers
=========================== */

@media(max-width:992px){

.container{

max-width:95%;

}

.hide-lg{

display:none;

}

}

@media(max-width:768px){

.btn{

width:100%;

}

.section-title h2{

font-size:34px;

}

h1{

font-size:40px;

}

}

@media(max-width:576px){

section{

padding:70px 0;

}

h1{

font-size:32px;

}

h2{

font-size:28px;

}

p{

font-size:15px;

}

}



/*=================================
    Premium Hero Banner
==================================

#homeBanner{
    width:95%;
    margin:25px auto;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

#homeBanner .carousel-item{
    position:relative;
    height:650px;
}

#homeBanner .carousel-item img{
    width:100%;
    height:650px;
    object-fit:cover;
    transition:.6s;
}

#homeBanner .carousel-item::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(18,58,22,.70) 0%,
        rgba(18,58,22,.35) 35%,
        rgba(18,58,22,.05) 100%
    );
    z-index:1;
}

#homeBanner .carousel-caption{

    position:absolute;

    left:8%;

    right:auto;

    top:50%;

    transform:translateY(-50%);

    bottom:auto;

    text-align:left;

    width:45%;

    z-index:10;

}

#homeBanner .carousel-caption span{

    display:inline-block;

    color:#5B8C32;

    font-size:22px;

    font-weight:600;

    margin-bottom:15px;

}

#homeBanner .carousel-caption h1{

    color:#fff;

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:20px;

}

#homeBanner .carousel-caption p{

    color:#fff;

    font-size:22px;

    line-height:1.7;

    margin-bottom:35px;

}

#homeBanner .carousel-caption .btn{

    padding:15px 38px;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    margin-right:15px;

}

#homeBanner .btn-success{

    background:#2E7D32;

    border:none;

}

#homeBanner .btn-success:hover{

    background:#1B5E20;

}

#homeBanner .btn-outline-light{

    border:2px solid #fff;

    color:#fff;

}

#homeBanner .btn-outline-light:hover{

    background:#fff;

    color:#222;

}

.carousel-control-prev,
.carousel-control-next{

    width:60px;

    height:60px;

    background:#fff;

    border-radius:50%;

    top:50%;

    transform:translateY(-50%);

    opacity:1;

}

.carousel-control-prev{

    left:20px;

}

.carousel-control-next{

    right:20px;

}

.carousel-control-prev-icon,
.carousel-control-next-icon{

    filter:invert(1);

}

.carousel-indicators{

    bottom:20px;

}

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;

    margin:0 6px;

}
*/

/*=============================
 HERO SECTION
==============================*/

.hero-section{

padding:80px 0;

background:url('../images/banner/bg.jpg') center center/cover;

border-radius:30px;

overflow:hidden;

margin:25px;

position:relative;

}

.hero-section::before{

content:'';

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(255,255,255,.15);

backdrop-filter:blur(2px);

}

.hero-section .container{

position:relative;

z-index:2;

}

.hero-tag{

display:inline-block;

background:#eef8ea;

padding:10px 22px;

border-radius:30px;

color:#2E7D32;

font-weight:600;

margin-bottom:20px;

}

.hero-section h1{

font-size:72px;

font-weight:800;

line-height:1.1;

color:#222;

}

.hero-section h1 span{

color:#2E7D32;

}

.hero-section p{

font-size:20px;

line-height:1.8;

margin:30px 0;

color:#444;

max-width:550px;

}

.hero-buttons{

display:flex;

gap:15px;

margin-bottom:35px;

}

.hero-buttons .btn{

padding:15px 40px;

border-radius:50px;

font-size:18px;

font-weight:600;

}

.hero-product{

width:95%;

animation:float 4s ease-in-out infinite;

}

.badge-circle{

position:absolute;

right:40px;

top:60px;

width:150px;

height:150px;

border-radius:50%;

border:5px solid #2E7D32;

background:white;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:700;

color:#2E7D32;

text-align:center;

}

.hero-features{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:30px;

}

.hero-features div{

background:white;

padding:15px 20px;

border-radius:15px;

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

font-weight:600;

}

.hero-features i{

color:#2E7D32;

margin-right:8px;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:992px){

.hero-section{

margin:10px;

padding:50px 20px;

}

.hero-section h1{

font-size:45px;

}

.hero-product{

margin-top:40px;

}

.badge-circle{

display:none;

}

.hero-features{

justify-content:center;

}

}


/* Login 

.btn-login{

padding:11px 28px;

border-radius:50px;

font-weight:600;

margin-left:15px;

}

.btn-register{

padding:11px 30px;

border-radius:50px;

background:#2E7D32;

color:#fff;

font-weight:600;

}

.btn-register:hover{

background:#1B5E20;

color:#fff;

}

/* Dropdown 

.dropdown-menu{

border:none;

border-radius:15px;

box-shadow:0 20px 45px rgba(0,0,0,.12);

padding:10px;

}

.dropdown-item{

border-radius:10px;

padding:10px 15px;

transition:.3s;

}

.dropdown-item:hover{

background:#eef8ea;

color:#2E7D32;

}

/* Mobile 

@media(max-width:992px){

.navbar{

width:100%;

margin:0;

border-radius:0;

padding:12px;

}

.nav-search{

margin:20px 0;

}

.nav-search input{

width:100%;

}

.navbar-nav{

gap:5px;

}

}
*/
/*=====================================
    Announcement Bar
======================================*/

.announcement-bar{

background:#2E7D32;

color:#fff;

padding:10px 0;

font-size:15px;

font-weight:500;

}

.announcement-bar i{

margin-right:8px;

color:#FFD54F;

}

/*=====================================
    User Avatar
======================================*/

.nav-user{

display:flex;

align-items:center;

text-decoration:none;

color:#333;

font-weight:600;

}

.user-avatar{

width:42px;

height:42px;

border-radius:50%;

object-fit:cover;

border:2px solid #2E7D32;

}

/*=====================================
    Dropdown
======================================*/

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

@media(max-width:991px){

.nav-search{

margin:20px 0;

width:100%;

}

.nav-search input{

width:100%;

}

.announcement-bar{

display:none;

}

.navbar-nav{

text-align:center;

}

.nav-icon{

margin:10px;

}

}

/*==================================
    CATEGORY SECTION
==================================*/

.category-section{

padding:80px 0;

background:#fff;

}

.section-heading span{

display:inline-block;

background:#E8F5E9;

padding:10px 22px;

border-radius:30px;

color:#2E7D32;

font-weight:600;

margin-bottom:15px;

}

.section-heading h2{

font-size:42px;

font-weight:800;

margin-bottom:15px;

}

.section-heading p{

color:#666;

font-size:18px;

}

.category-card{

display:block;

background:#fff;

border-radius:25px;

padding:30px;

text-align:center;

text-decoration:none;

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

transition:.35s;

height:100%;

}

.category-card:hover{

transform:translateY(-10px);

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

}

.category-image{

width:130px;

height:130px;

margin:auto;

border-radius:50%;

overflow:hidden;

background:#F5F8F5;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

}

.category-image img{

width:90%;

transition:.4s;

}

.category-card:hover img{

transform:scale(1.1);

}

.category-card h5{

font-size:20px;

font-weight:700;

color:#222;

}

/*==================================
 Featured Products
==================================*/

.featured-section{

background:#f8faf8;

padding:80px 0;

}

.product-card{

background:#fff;

border-radius:25px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.product-card:hover{

transform:translateY(-10px);

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

}

.product-image{

position:relative;

overflow:hidden;

height:260px;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

}

.product-image img{

width:85%;

transition:.4s;

}

.product-card:hover img{

transform:scale(1.08);

}

.discount-badge{

position:absolute;

top:15px;

left:15px;

background:#E53935;

color:#fff;

padding:8px 12px;

border-radius:30px;

font-size:14px;

font-weight:700;

}

.product-icons{

position:absolute;

right:15px;

top:15px;

display:flex;

flex-direction:column;

gap:10px;

opacity:0;

transition:.3s;

}

.product-card:hover .product-icons{

opacity:1;

}

.product-icons a{

width:42px;

height:42px;

background:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#2E7D32;

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

}

.product-content{

padding:25px;

}

.product-category{

font-size:14px;

color:#2E7D32;

font-weight:600;

}

.product-content h4{

margin:12px 0;

font-size:20px;

}

.product-content h4 a{

text-decoration:none;

color:#222;

}

.rating{

color:#FFC107;

margin-bottom:15px;

}
/* Price */

.price{

display:flex;

align-items:center;

gap:12px;

margin-bottom:20px;

}

.new-price{

font-size:24px;

font-weight:700;

color:#2E7D32;

}

.old-price{

font-size:16px;

color:#888;

text-decoration:line-through;

}

/* Buttons */

.product-buttons{

display:flex;

flex-direction:column;

gap:10px;

}


.btn-view{

background:#fff;

border:2px solid #2E7D32;

color:#2E7D32;

text-decoration:none;

padding:12px;

border-radius:50px;

text-align:center;

font-weight:600;

transition:.3s;

}

.btn-view:hover{

background:#2E7D32;

color:#fff;

}

/* Mobile */

@media(max-width:768px){

.product-card{

margin-bottom:25px;

}

.product-content h4{

font-size:18px;

}

.new-price{

font-size:20px;

}

}
/*=========================
Best Seller Slider
==========================*/

.best-seller-section{

background:#fff;

padding:80px 0;

}

.swiper{

padding-bottom:50px;

}

.swiper-slide{

height:auto;

}

.swiper-button-next,
.swiper-button-prev{

color:#2E7D32;

}

.swiper-pagination-bullet-active{

background:#2E7D32;

}
.sold-count{

display:inline-flex;

align-items:center;

gap:6px;

font-size:14px;

font-weight:600;

color:#666;

margin-bottom:12px;

}

.sold-count i{

color:#ff5722;

}
/*==========================
Today's Deals
==========================*/

.deals-section{

padding:80px 0;

background:#FFFDF8;

}

.deal-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.3s;

height:100%;

}

.deal-card:hover{

transform:translateY(-8px);

}

.deal-image{

position:relative;

height:220px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

}

.deal-image img{

width:80%;

}

.offer-ribbon{

position:absolute;

top:15px;

left:-35px;

background:#E53935;

color:#fff;

padding:8px 45px;

transform:rotate(-45deg);

font-size:12px;

font-weight:700;

}

.deal-timer{

display:inline-block;

background:#2E7D32;

color:#fff;

padding:12px 25px;

border-radius:40px;

font-size:22px;

font-weight:700;

}
/*=================================
 Today's Deals Part 2
==================================*/

.stock-warning{

background:#FFF3CD;

color:#D97706;

padding:8px 12px;

border-radius:25px;

font-size:14px;

font-weight:600;

display:inline-block;

margin-bottom:12px;

}

.deal-card .price{

display:flex;

gap:10px;

align-items:center;

}

.deal-card .new-price{

font-size:24px;

font-weight:700;

color:#2E7D32;

}

.deal-card .old-price{

text-decoration:line-through;

color:#999;

font-size:16px;

}

.deal-card .btn{

padding:10px;

font-weight:600;

}

.deal-card:hover{

transform:translateY(-10px);

transition:.35s;

}
/*=================================
Testimonials
==================================*/

.testimonial-section{

padding:80px 0;

background:#f8faf8;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:25px;

max-width:700px;

margin:auto;

text-align:center;

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

}

.testimonial-img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;

border:4px solid #2E7D32;

}

.testimonial-card h4{

font-weight:700;

margin-bottom:10px;

}

.testimonial-card p{

font-size:18px;

color:#666;

line-height:1.7;

}

.testimonial-card .rating{

color:#FFC107;

margin-bottom:15px;

font-size:20px;

}

#testimonialCarousel .carousel-control-prev-icon,

#testimonialCarousel .carousel-control-next-icon{

background-color:#2E7D32;

border-radius:50%;

padding:18px;

}
/*==================================================
                TOP BAR
==================================================

.top-bar{

    background:#1b5e20;

    color:#fff;

    font-size:14px;

    padding:8px 0;

}

.top-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-right a{

    color:#fff;

    text-decoration:none;

    margin-left:15px;

}

.top-right span{

    margin-left:15px;

    color:#ddd;

}*/
.welcome-toast{
    position:fixed;
    top:25px;
    right:25px;
    min-width:320px;
    background:linear-gradient(135deg,#2E7D32,#43A047);
    color:#fff;
    border-radius:18px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
    z-index:999999;
    animation:toastIn .3s ease;
}

.welcome-toast .icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    flex-shrink:0;
}

.welcome-toast .content h5{
    color:#fff;
    margin:0;
    font-size:18px;
}

.welcome-toast .content p{
    color:#fff;
    margin:3px 0 0;
    opacity:.9;
}
@keyframes toastIn{

from{

opacity:0;
transform:translateX(120px);

}

to{

opacity:1;
transform:translateX(0);

}

}

/* new css add */

/* =========================================================
   MOBILE - EXPLORE ORGANIC CATEGORIES COMPACT
========================================================= */

@media (max-width: 767px) {

    section.category-section {

        padding: 18px 10px !important;

        margin: 0 !important;
    }


    section.category-section .section-heading {

        margin: 0 0 12px !important;

        padding: 0 !important;
    }


    section.category-section .section-heading span {

        display: inline-block !important;

        padding: 4px 12px !important;

        margin: 0 0 5px !important;

        font-size: 11px !important;

        line-height: 1.2 !important;
    }


    section.category-section .section-heading h2 {

        font-size: 22px !important;

        line-height: 1.1 !important;

        margin: 0 0 5px !important;
    }


    section.category-section .section-heading p {

        font-size: 12px !important;

        line-height: 1.25 !important;

        margin: 0 auto !important;

        max-width: 280px !important;
    }


    /* Category cards ko bhi thoda compact */

    section.category-section .category-card {

        padding: 14px !important;

        border-radius: 16px !important;
    }


    section.category-section .category-image {

        width: 85px !important;

        height: 85px !important;

        margin-bottom: 8px !important;
    }


    section.category-section .category-card h5 {

        font-size: 15px !important;

        margin: 0 !important;
    }


    section.category-section .row {

        margin-left: -4px !important;

        margin-right: -4px !important;
    }

}

/* new css add */
@media (max-width: 767px) {

    section.category-section .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 5px 8px !important;
    }

    section.category-section .row > div {
        flex: 0 0 auto !important;
        width: 120px !important;
        max-width: 120px !important;
    }

    section.category-section .category-card {
        padding: 12px !important;
        border-radius: 15px !important;
    }

    section.category-section .category-image {
        width: 75px !important;
        height: 75px !important;
        margin-bottom: 8px !important;
    }

    section.category-section .category-card h5 {
        font-size: 14px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* scrollbar hide */
    section.category-section .row::-webkit-scrollbar {
        display: none;
    }

    section.category-section .row {
        scrollbar-width: none;
    }
}

/* new css add */
@media (max-width: 767px) {

    /* ================================
       BEST SELLING PRODUCTS
       SINGLE HORIZONTAL ROW
    ================================= */

    section.products-section .row,
    section.best-selling-section .row,
    .best-selling-products .row {

        display: flex !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        gap: 10px !important;

        margin: 0 !important;

        padding: 0 6px 10px !important;

        scrollbar-width: none !important;
    }


    section.products-section .row::-webkit-scrollbar,
    section.best-selling-section .row::-webkit-scrollbar,
    .best-selling-products .row::-webkit-scrollbar {

        display: none !important;
    }


    /* PRODUCT CARD WIDTH */

    section.products-section .row > div,
    section.best-selling-section .row > div,
    .best-selling-products .row > div {

        flex: 0 0 165px !important;

        width: 165px !important;

        max-width: 165px !important;

        padding: 0 !important;
    }


    /* CARD */

    section.products-section .product-card,
    section.best-selling-section .product-card,
    .best-selling-products .product-card {

        width: 100% !important;

        border-radius: 15px !important;

        overflow: hidden !important;
    }


    /* PRODUCT IMAGE */

    section.products-section .product-image,
    section.best-selling-section .product-image,
    .best-selling-products .product-image {

        height: 145px !important;
    }


    section.products-section .product-image img,
    section.best-selling-section .product-image img,
    .best-selling-products .product-image img {

        width: 100% !important;

        height: 145px !important;

        object-fit: cover !important;
    }


    /* PRODUCT CONTENT */

    section.products-section .product-content,
    section.best-selling-section .product-content,
    .best-selling-products .product-content {

        padding: 10px !important;
    }


    section.products-section .product-content h5,
    section.best-selling-section .product-content h5,
    .best-selling-products .product-content h5 {

        font-size: 14px !important;

        line-height: 1.25 !important;

        margin-bottom: 5px !important;
    }


    /* SECTION HEADING */

    section.products-section .section-heading,
    section.best-selling-section .section-heading,
    .best-selling-products .section-heading {

        margin-bottom: 12px !important;
    }

}

/* new css add */
/* =========================================================
   MOBILE BEST SELLERS - SINGLE HORIZONTAL ROW
========================================================= */

@media (max-width: 767px) {

    .best-seller-section {
        padding: 18px 0 !important;
    }

    .best-seller-section .section-heading {
        margin-bottom: 14px !important;
        padding: 0 10px !important;
    }

    .best-seller-section .section-heading h2 {
        font-size: 22px !important;
        margin-bottom: 5px !important;
    }

    .best-seller-section .section-heading p {
        font-size: 12px !important;
        margin: 0 !important;
    }


    /* SWIPER */

    .bestSellerSlider {
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 10px !important;
    }

    .bestSellerSlider .swiper-wrapper {
        display: flex !important;
        align-items: stretch !important;
    }


    /* ONE CARD PER HORIZONTAL ITEM */

    .bestSellerSlider .swiper-slide {
        width: 165px !important;
        min-width: 165px !important;
        max-width: 165px !important;

        flex-shrink: 0 !important;

        height: auto !important;
    }


    /* PRODUCT CARD */

    .bestSellerSlider .product-card {
        width: 165px !important;
        height: 100% !important;

        border-radius: 15px !important;
        overflow: hidden !important;
    }


    /* IMAGE */

    .bestSellerSlider .product-image {
        height: 140px !important;
    }

    .bestSellerSlider .product-image img {
        width: 100% !important;
        height: 140px !important;

        object-fit: contain !important;
    }


    /* CONTENT */

    .bestSellerSlider .product-content {
        padding: 9px !important;
    }

    .bestSellerSlider .product-content h5 {
        font-size: 14px !important;
        line-height: 1.2 !important;

        margin: 0 0 5px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .bestSellerSlider .rating {
        font-size: 11px !important;
    }

    .bestSellerSlider .sold-count {
        font-size: 11px !important;
    }


    /* BADGES */

    .bestSellerSlider .best-badge,
    .bestSellerSlider .discount-badge {
        font-size: 9px !important;
        padding: 4px 7px !important;
    }


    /* HIDE SLIDER DOTS IF PRESENT */

    .bestSellerSlider .swiper-pagination {
        display: none !important;
    }

}

/* new css add */
/* =====================================================
   BEST SELLING - MOBILE HORIZONTAL ROW
===================================================== */

.best-selling-row {
    display: flex;

    gap: 12px;

    overflow-x: auto;

    overflow-y: hidden;

    flex-wrap: nowrap;

    padding: 5px 5px 12px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.best-selling-row::-webkit-scrollbar {
    display: none;
}


.best-selling-item {
    flex: 0 0 165px;

    width: 165px;

    min-width: 165px;
}


.best-selling-item .product-card {
    width: 165px;

    height: 100%;

    margin: 0;

    border-radius: 15px;

    overflow: hidden;

    background: #fff;
}


.best-selling-item .product-image {
    height: 135px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


.best-selling-item .product-image img {
    width: 100%;

    height: 135px;

    object-fit: contain;
}


.best-selling-item .product-content {
    padding: 9px !important;
}


.best-selling-item .product-content h5 {
    font-size: 14px !important;

    line-height: 1.25 !important;

    margin: 0 0 5px !important;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.best-selling-item .rating {
    font-size: 11px;

    margin-bottom: 3px;
}


.best-selling-item .sold-count {
    font-size: 10px;

    margin-bottom: 5px;
}


.best-price {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 8px;
}


.best-price span {
    font-size: 16px;

    font-weight: 800;

    color: #2E7D32;
}


.best-price del {
    font-size: 10px;

    color: #999;
}


.best-cart-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    width: 100%;

    padding: 7px 5px;

    border-radius: 20px;

    background: #2E7D32;

    color: #fff !important;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;
}


.best-cart-btn i {
    font-size: 10px;
}


.best-badge,
.discount-badge {
    z-index: 3;
}


@media (min-width: 768px) {

    .best-selling-row {
        overflow-x: auto;
    }

    .best-selling-item {
        flex-basis: 220px;

        min-width: 220px;
    }

    .best-selling-item .product-card {
        width: 220px;
    }

}

/* new css add */
/* =========================================================
   FEATURED PRODUCTS
   MOBILE HORIZONTAL ROW
========================================================= */

.featured-products-row {
    display: flex;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    flex-wrap: nowrap;

    padding: 5px 5px 12px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.featured-products-row::-webkit-scrollbar {
    display: none;
}


.featured-product-item {
    flex: 0 0 165px;

    width: 165px;
    min-width: 165px;
}


/* PRODUCT CARD */

.featured-product-item .product-card {
    width: 165px;

    height: 100%;

    margin: 0;

    border-radius: 15px;

    overflow: hidden;

    background: #fff;
}


/* IMAGE */

.featured-product-item .product-image {
    height: 135px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;
}


.featured-product-item .product-image img {
    width: 100%;

    height: 135px;

    object-fit: contain;
}


/* CONTENT */

.featured-product-item .product-content {
    padding: 9px !important;
}


.featured-product-item .product-category {
    font-size: 10px !important;

    margin-bottom: 3px !important;
}


.featured-product-item .product-content h4 {
    font-size: 14px !important;

    line-height: 1.25 !important;

    margin: 0 0 5px !important;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.featured-product-item .rating {
    font-size: 11px;

    margin-bottom: 5px;
}


/* PRICE */

.featured-product-item .price {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 8px;
}


.featured-product-item .new-price {
    font-size: 16px !important;

    font-weight: 800;

    color: #2E7D32;
}


.featured-product-item .old-price {
    font-size: 10px !important;

    color: #999;
}


/* BUTTONS */

.featured-product-item .product-buttons {
    display: flex;

    gap: 5px;
}


.featured-product-item .product-buttons a {
    font-size: 10px !important;

    padding: 7px 5px !important;

    border-radius: 18px !important;

    white-space: nowrap;
}


.featured-product-item .btn-cart {
    flex: 1;
}


.featured-product-item .btn-view {
    flex: 0 0 auto;
}


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

@media (max-width: 767px) {

    .featured-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .featured-section .section-heading {
        margin-bottom: 14px !important;
    }

    .featured-section .section-heading h2 {
        font-size: 22px !important;
    }

    .featured-section .section-heading p {
        font-size: 12px !important;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 768px) {

    .featured-products-row {
        overflow-x: auto;
    }

    .featured-product-item {
        flex: 0 0 220px;

        width: 220px;

        min-width: 220px;
    }

    .featured-product-item .product-card {
        width: 220px;
    }

}