:root{
    --dark-green: #3a4a2b;
    --dark-green-2: #33421f;
    --brand-green: #7cb92f;
    --brand-green-light: #8ec93f;
    --leaf-green: #6fae2a;
    --text-gray: #9ea3a0;
    --text-dark: #4a4a4a;
    --brown: #6b3f1d;
    --white: #ffffff;
    --border-light: #ececec;
    --max-width: 1300px;
  }

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

  body{
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    background: var(--white);
  }

  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }

  .container{
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
  }

  
  
  
  
  
  
/* nav  */

 /* ===== Top bar ===== */
  .top-bar{
    background: var(--dark-green);
    color: var(--white);
  }
  .top-bar .container{
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
    min-height: 42px;
  }
  .top-links{
    display:flex;
    gap: 28px;
    flex-wrap: wrap;
  }
  .top-links a{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 10px 0;
    transition: color .2s ease;
    white-space: nowrap;
  }
  .top-links a:hover{ color: var(--brand-green-light); }

  .top-right{
    display:flex;
    align-items:center;
    gap: 22px;
    flex-wrap: wrap;
  }
  .login-link{
    display:flex;
    align-items:center;
    gap:6px;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 0;
    white-space: nowrap;
  }
  .login-link svg{ width:14px; height:14px; flex-shrink:0; }

  /* ===== Middle bar ===== */
  .mid-bar{
    padding: 22px 0;
    border-bottom: 1px solid var(--border-light);
  }
  .mid-bar .container{
    display:flex;
    align-items:center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .logo img{ height: 58px; width:auto; }
  .logo-text{
    font-family:'Playfair Display', serif;
  }
  .logo-text .name{
    color: var(--dark-green-2);
    font-size: 22px;
    font-weight:700;
    line-height:1.1;
    letter-spacing: .5px;
  }
  .logo-text .sub{
    color: var(--brown);
    font-size: 13px;
    font-weight:700;
    letter-spacing: 2px;
    text-align:center;
    display:block;
    margin-top:2px;
  }

  .info-items{
    display:flex;
    align-items:center;
    gap: 34px;
    flex-wrap: wrap;
  }

  .info-item{
    display:flex;
    align-items:center;
    gap: 12px;
  }

  .icon-wrap{
    width:52px;
    height:52px;
    border-radius:50%;
    background: linear-gradient(160deg, #e8f5da, #cdeaa8);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative;
  }
  .icon-wrap svg{ width:24px; height:24px; }
  .icon-wrap::after{
    content:'';
    position:absolute;
    top:-4px;
    right:2px;
    width:14px;
    height:14px;
    background: var(--brand-green);
    border-radius: 0 60% 0 60%;
    transform: rotate(20deg);
  }

  .info-text{
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.5;
    max-width: 230px;
  }
  .info-text.cart-label{ max-width:none; }
  .info-item.cart-item{ position:relative; }
  .cart-count-badge{
    position:absolute;
    top:-6px;
    left:34px;
    background: var(--brown);
    color:#fff;
    font-size:11px;
    font-weight:700;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* ===== Nav bar ===== */
  .nav-bar{
    padding: 16px 0;
  }
  .nav-bar .container{
    display:flex;
    align-items:center;
    justify-content: space-between;
  }
  .main-nav{
    display:flex;
    align-items:center;
    gap: 26px;
    flex-wrap: wrap;
  }
  .main-nav li{
    display:flex;
    align-items:center;
    gap:26px;
    position: relative;
  }
  .main-nav li:not(:last-child)::after{
    content:'';
    width:1px;
    height:14px;
    background: #d9d9d9;
    margin-left:26px;
  }
  .main-nav a{
    font-size: 14px;
    font-weight:700;
    letter-spacing: .5px;
    color: var(--brown);
    transition: color .2s ease;
  }
  .main-nav a.active,
  .main-nav a:hover{
    color: var(--brand-green);
  }

  /* Category dropdown (dynamic categories) */
  .nav-drop{ position:relative; }
  .nav-drop-menu{
    position:absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 210px;
    box-shadow: 0 12px 26px rgba(0,0,0,.12);
    border-radius: 8px;
    padding: 8px 0;
    display:none;
    z-index: 50;
    margin-top: 10px;
  }
  .nav-drop:hover .nav-drop-menu{ display:block; }
  .nav-drop-menu a{
    display:block;
    padding: 9px 18px;
    font-size: 13px;
    font-weight:600;
    color: var(--text-dark);
    letter-spacing:0;
  }
  .nav-drop-menu a:hover{
    background: #f3f8ea;
    color: var(--brand-green);
  }
  .nav-drop > a svg.chev{
    width:11px; height:11px; margin-left:4px;
  }

  .search-icon{
    width:20px;
    height:20px;
    cursor:pointer;
    color: var(--dark-green-2);
  }

  /* ===== Mobile menu toggle ===== */
  .menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    background:none;
    border:none;
  }
  .menu-toggle span{
    width:26px;
    height:3px;
    background: var(--dark-green-2);
    border-radius:2px;
  }

  /* ===================== RESPONSIVE (FIXED) ===================== */
  @media (max-width: 992px){
    .info-items{ gap: 20px; }
    .info-text{ max-width: 180px; font-size:13px; }
  }

  @media (max-width: 860px){
    .info-item.address-item{ display:none; }
  }

  @media (max-width: 768px){

    /* ---- Top bar: single line, horizontal scroll, no wrap ---- */
    .top-bar .container{
      flex-wrap: nowrap;
      justify-content: flex-start;
      padding: 6px 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .top-bar .container::-webkit-scrollbar{ display:none; }

    .top-links{
      flex-wrap: nowrap;
      white-space: nowrap;
      gap: 16px;
    }
    .top-right{
      order: 0;
      width: auto;
      flex-shrink: 0;
      margin-left: 18px;
      justify-content: flex-start;
    }

    /* ---- Mid bar: compact single row -> logo + icons only ---- */
    .mid-bar{ padding: 12px 0; }
    .mid-bar .container{
      flex-wrap: nowrap;
      justify-content: space-between;
      text-align: left;
      gap: 10px;
    }
    .logo img{ height: 42px; }
    .logo-text .name{ font-size: 16px; }
    .logo-text .sub{ font-size: 10px; letter-spacing: 1px; margin-top:0; }

    .info-items{
      justify-content: flex-end;
      gap: 12px;
      width: auto;
      flex-wrap: nowrap;
    }
    .info-item.address-item{ display:none; }
    .info-item .info-text{ display:none; }
    .icon-wrap{ width: 40px; height: 40px; }
    .icon-wrap svg{ width: 18px; height: 18px; }

    .info-item.cart-item{ order: 2; }
    .cart-count-badge{
      left: 26px; top:-4px;
      width:16px; height:16px; font-size:10px;
    }

    /* hide any inline search input on mobile, keep icon only */
    .info-item input[type="text"],
    .info-item input[type="search"]{ display:none; }

    .menu-toggle{ display:flex; }

    .main-nav{
      display:none;
      flex-direction:column;
      align-items:flex-start;
      width:100%;
      gap:0;
      background: var(--white);
    }
    .main-nav.open{ display:flex; }
    .main-nav li{
      width:100%;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
    }
    .main-nav li:not(:last-child)::after{ display:none; }
    .main-nav a{
      display:block;
      width:100%;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
    }
    .nav-drop-menu{
      position:static;
      box-shadow:none;
      display:none;
      margin-top:0;
      padding-left: 12px;
    }
    .nav-drop.open .nav-drop-menu{ display:block; }
    .nav-bar .container{
      flex-wrap:wrap;
    }
    .search-icon{ order:1; }
  }

  @media (max-width: 520px){
    .logo-text .name{ font-size:15px; }
    .top-links a, .login-link{ font-size: 11px; }
  }


/* nav  end*/









  
  
  
  
  
  
  
  
  
  
  
  
  

 /* footer start */
  
.site-footer{
    background: var(--dark-green-2);
    color: rgba(255,255,255,.7);
    padding-top: 55px;
  }
  .site-footer h5{
    color:#fff;
    font-family:'Playfair Display', serif;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .site-footer .about-text{
    font-size: 13.5px;
    line-height: 1.8;
    color: rgba(255,255,255,.6);
    margin-bottom: 18px;
  }
  .footer-logo{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
  }
  .footer-logo .fname{
    font-family:'Playfair Display', serif;
    font-size: 20px;
    font-weight:700;
    color:#fff;
  }
  .footer-logo .fsub{
    display:block;
    font-size: 11px;
    letter-spacing:2px;
    color: var(--brand-green-light);
  }
  .footer-links{ list-style:none; padding:0; margin:0; }
  .footer-links li{ margin-bottom: 12px; }
  .footer-links a{
    color: rgba(255,255,255,.65);
    font-size: 13.5px;
    transition: color .2s ease, padding-left .2s ease;
  }
  .footer-links a:hover{ color: var(--brand-green-light); padding-left:4px; }

  .footer-bottom{
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align:center;
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
  }
  .footer-bottom a{ color: rgba(255,255,255,.7); }
  .footer-bottom a:hover{ color: var(--brand-green-light); }

  @media (max-width: 991px){
    .contact-info-side{ margin-bottom: 24px; }
  }
  @media (max-width: 767px){
    .site-footer{ text-align:center; }
    .footer-logo{ justify-content:center; }
  }










 /* footer end */




 /* category-section css start  */


 /* ===== MAIN WRAPPER ===== */
 .product-slider {
     width: 92%;
     margin: 60px auto;
     position: relative;
     overflow: hidden;
 }

 /* ===== TRACK ===== */
 .slider-track {
     display: flex;
     transition: 0.5s ease;
 }

 /* ===== CARD ===== */
 .slider-card {
     min-width: 420px;
     height: 420px;
     padding: 12px;
     flex-shrink: 0;
 }

 .slider-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 12px;
 }

 /* ===== ARROWS ===== */
 .slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: white;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 20px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     z-index: 10;
 }

 .slider-prev {
     left: -15px;
 }

 .slider-next {
     right: -15px;
 }

 /* ===== RESPONSIVE ===== */
 @media(max-width:768px) {
     .slider-card {
         min-width: 260px;
         height: 300px;
     }
 }



 /* filter css start */


 /* TITLE */

 .title {
     text-align: center;
     margin-bottom: 30px;
 }

 /* FILTER BUTTON */

 .filter-btn {
     margin: 5px;
 }

 /* PRODUCT CARD */

 .product-card {
     border: none;
     border-radius: 15px;
     overflow: hidden;
     transition: 0.3s ease;
     background: #fff;
 }

 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .product-img {
     width: 100%;
     height: 220px;
     object-fit: cover;
     background: #f5f5f5;
 }

 .product-title {
     font-size: 16px;
     font-weight: 600;
     height: 40px;
     overflow: hidden;
 }

 .price {
     font-size: 18px;
     font-weight: bold;
     color: green;
 }

 .btn-cart {
     border-radius: 25px;
     font-size: 14px;
     padding: 8px;
     transition: 0.3s;
 }

 .btn-cart:hover {
     background: #000;
     color: #fff;
 }


 /* filter css end   */




 /* whatsapp icon css  */
 /* whatsapp icon css  */



 /* Section Background */
 .banner-section {
     width: 100%;
     height: 583px;
     /* adjust height */
     background: url('../images/banner/offerimg1.jpeg') no-repeat center center/cover;
     position: relative;
 }


 /* Section */
 .why-section {
     padding: 60px 20px;
     background: #f9fafb;
     font-family: 'Poppins', sans-serif;
 }

 /* Container */
 .why-container {
     width: 100%;
     margin: auto;
 }

 /* Header */
 .why-header {
     text-align: center;
     margin-bottom: 50px;
 }

 .why-header h2 {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .why-header p {
     color: #777;
     font-size: 15px;
 }

 /* Grid */
 .why-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 25px;
 }

 /* Card */
 .why-card {
     background: #fff;
     padding: 30px 20px;
     border-radius: 15px;
     text-align: center;
     transition: 0.3s;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 }

 .why-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 /* Icon */
 .why-icon {
     width: 60px;
     height: 60px;
     margin: auto;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 15px;
     font-size: 22px;
     color: #fff;
 }

 /* Colors */
 .green {
     background: #28a745;
 }

 .orange {
     background: #ffc107;
 }

 .red {
     background: #dc3545;
 }

 .blue {
     background: #007bff;
 }

 /* Text */
 .why-card h5 {
     font-weight: 600;
     margin-bottom: 8px;
 }

 .why-card p {
     font-size: 14px;
     color: #666;
 }

 /* Responsive */
 @media (max-width: 992px) {
     .why-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .why-grid {
         grid-template-columns: 1fr;
     }

     .why-header h2 {
         font-size: 24px;
     }
 }




 /* SECTION */
 .doon-feature-section {
     background: #FFA500;

 }

 /* HEADING */
 .doon-heading {
     font-size: 30px;
     font-weight: 700;
     color: #000;
     line-height: 1.4;
 }

 /* FEATURE BOX */
 .feature-item {
     padding: 15px;
     transition: 0.3s;
 }

 /* ICON BIGGER */
 .feature-item i {
     font-size: 125px;
     color: white;
     margin-bottom: 10px;
 }

 /* TEXT */
 .feature-item p {
     font-size: 14px;
     font-weight: 600;
     color: white;
     margin: 0;
 }

 /* HOVER EFFECT */
 .feature-item:hover {
     transform: translateY(-8px);
 }

 /* EQUAL SPACING */
 .feature-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {

     .doon-heading {
         font-size: 22px;
         text-align: center;
     }

     .feature-item i {
         font-size: 35px;
     }

     .feature-item p {
         font-size: 12px;
     }

     .feature-item {
         margin-bottom: 15px;
     }
 }



 /* SECTION */
 .quote-section {
     background: #cfd0df;
     padding: 20px 0px 0px 0px;
     position: relative;
     overflow: hidden;
 }

 /* DOT BACKGROUND */
 .quote-section::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(#aaa 1px, transparent 1px);
     background-size: 25px 25px;
     opacity: 0.3;
     z-index: 1;
 }

 .quote-content {
     position: relative;
     z-index: 2;
 }

 /* HEADING */
 .quote-title {
     font-family: 'Great Vibes', cursive;
     font-size: 36px;
     font-weight: 700;
     text-align: center;
     background: linear-gradient(90deg, #ff911c, #ff911c);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 15px;
 }

 .quote-subtitle {
     text-align: center;
     max-width: 750px;
     margin: auto;
     font-size: 16px;
     line-height: 1.7;
     color: #555;
     margin-bottom: 40px;
 }

 /* FORM */
 .form-box {
     border: 1px solid #999;
     padding: 30px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(6px);
 }

 .form-control {
     padding: 12px;
     border-radius: 6px;
 }

 .submit-btn {
     background: #222;
     color: #fff;
     border-radius: 30px;
     padding: 12px 35px;
     border: none;
     width: 100%;
 }

 /* IMAGE FIX (🔥 IMPORTANT PART) */
 .image-col {
     display: flex;
     align-items: flex-end;
     justify-content: center;
     line-height: 0;
     /* 🔥 gap remove */
 }

 .quote-img {
     display: block;
     /* 🔥 main fix */
     width: 100%;
     height: auto;
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {

     /* SECTION */
     .quote-section {
         padding: 20px 0px 0px 0px;

     }



     .quote-title {
         font-size: 28px;
     }

     .quote-img {
         max-height: 600px;
     }
 }

 @media (max-width: 768px) {

     .quote-section {
         padding: 20px 0px 0px 0px;

     }


     .quote-section {
         padding: 0px 15px;
     }

     .quote-title {
         font-size: 22px;
     }

     .quote-subtitle {
         font-size: 14px;
     }

     .image-col {
         margin-top: 20px;
         align-items: center;
     }

 }









 .slider-section {
     padding: 50px 2px 50px 2px;
 }

 .slider-container {
     display: flex;
     gap: 20px;
     overflow: hidden;
 }

 /* TRACK (IMPORTANT) */
 .slider-track {
     display: flex;
     gap: 20px;
     animation: scroll 20s linear infinite;
 }

 /* CARD */
 .card {
     min-width: 220px;
     height: auto;
     border-radius: 20px;
     overflow: hidden;
     flex-shrink: 0;
 }

 .card img {
     width: 300px;
     height: 300px;
     object-fit: cover;
 }



 /* 📱 Mobile responsive fix */
 @media (max-width: 576px) {
     .card img {
         width: 178px;
         height: 178px;
         object-fit: cover;
     }
 }




















 /* ANIMATION */
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* HOVER PAUSE */
 .slider-container:hover .slider-track {
     animation-play-state: paused;
 }

 /* RESPONSIVE */
 @media(max-width:768px) {
     .card {
         min-width: 160px;
         height: auto;
     }
 }






.desc-content {
    width: 100%;
    overflow-x: auto;
    text-align: justify;
}

.desc-content p {
    text-align: justify;
}



  /* WhatsApp floating button (from original site) */
  .whatsapp-btn{
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 999;
  }
  .whatsapp-btn img{ width: 56px; height:56px; }