:root{
      --bibanner-height: 520px;
      --bidot-size: 10px;
      --bitransition: 600ms;
      --bg-white: #e7dcd3;
    }

    *{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}

    body {
      background-color: #e7dcd3;
      color: #111;
    }

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 100%;
  max-width: 120px;
}


/* Navbar Container */
.navbar {
  width: 100%;
  background: #d9c7b5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 40px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Logo */
.logo {
  font-size: 22px;
  font-weight: bold;
  color: #2b1d0e;
  letter-spacing: 1px;
}

/* Navigation Links */
.nav-links ul {
  list-style: none;
  display: flex;
  gap: 35px;
}

.nav-links a {
  text-decoration: none;
  color: #2b1d0e;
  font-weight: 500;
  transition: 0.3s;
}

.nav-links a:hover {
  color: #8a5b2c;
}

/* Icons + Login */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #2b1d0e;
}

.nav-icons i {
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.nav-icons i:hover {
  color: #8a5b2c;
}

.nav-icons .login {
  text-decoration: none;
  color: #2b1d0e;
  font-weight: 500;
  transition: 0.3s;
}

.nav-icons .login:hover {
  color: #8a5b2c;
}

/* Hamburger menu (hidden on desktop) */
.menu-toggle {
  display: none;
  cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 65px;
    left: -100%;
    width: 100%;
    background: #d9c7b5;
    text-align: center;
    transition: 0.3s;
  }

  .nav-links ul {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
  }

  .nav-links.active {
    left: 0;
  }

  .menu-toggle {
    display: block;
  }
}
/* =========================banner============= */


    .bibanner {
      position: relative;
      width: 100%;
      max-width: 1420px;
      margin: 24px auto;
      overflow: hidden;
      border-radius: 12px;
      height: var(--bibanner-height);
      background-color: #e7dcd3;
    }
    .bislides {
      display: flex;
      height: 100%;
      width: 100%;
      transition: transform var(--bitransition) ease;
    }

    .bislide {
      min-width: 100%;
      height: 100%;
      position: relative;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .bislide img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    .bicaption {
      position: absolute;
      left: 20px;
      bottom: 18px;
      background: rgba(0,0,0,0.4);
      color: #fff;
      padding: 10px 14px;
      border-radius: 8px;
      backdrop-filter: blur(4px);
      font-size: 15px;
    }

    .binav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      background: rgba(0,0,0,0.35);
      color: #fff;
      border: none;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background .2s;
    }
    .binav-btn:hover { background: rgba(0,0,0,0.55); }
    .binav-btn:active { transform: translateY(-50%) scale(.98); }

    .binav-prev { left: 12px; }
    .binav-next { right: 12px; }

    .binav-btn svg { width: 18px; height: 18px; pointer-events: none; }

    .bidots {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 12px;
      display: flex;
      gap: 8px;
      z-index: 6;
    }

    .bidot {
      width: var(--bidot-size);
      height: var(--bidot-size);
      border-radius: 50%;
      background: rgba(255,255,255,0.45);
      cursor: pointer;
      transition: transform .18s, background .18s;
    }
    .bidot.active {
      transform: scale(1.25);
      background: rgba(255,255,255,0.95);
    }

    @media (max-width:700px){
      :root{ --bibanner-height: 200px; }
      .bicaption{ font-size:13px; left:12px; bottom:12px; padding:8px 10px;}
      .binav-btn{ width:38px; height:38px; }
    }
/* =========================about============= */
.banner {
  padding: 40px;
  overflow: hidden;
  background-color: #e7dcd3;
}
.banner-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  height: 100%;            /* fill full column height */
  text-align: center;      /* center text */
}

/* Make the heading and content look good centered */
.banner-content h1 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.banner-content .desc {
  max-width: 500px;
  margin: 15px 0 25px;
}

.banner-content h1 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
}

.banner-content h1 span {
  display: block;
  color: #000;
}

.sub-images {
  display: flex;
  gap: 15px;
  margin: 25px 0;
}

.sub-images .small-img img {
  width: 130px;
  height: 180px;
  object-fit: cover;
  border-radius: 70px 70px 0 0;
}

.desc {
  font-size: 15px;
  color: #444;
  max-width: 400px;
  margin-bottom: 25px;
}

.buttons {
  display: flex;
  gap: 15px;
}

.shop-btn, .try-btn {
  border: none;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}

.shop-btn {
  background-color: #fdd835;
  color: #000;
}

.shop-btn:hover {
  background-color: #fbc02d;
}

.try-btn {
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
}

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

/* ===== Image Section ===== */
.banner-image {
  position: relative;
  text-align: center;
}

.slider {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 500px;
  margin: auto;
  overflow: hidden;
  border: 12px solid #f0cbae;
  border-radius: 50% 50% 0 0;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
  padding: 30px 30px 0 30px;
  border-radius: 50% 50% 0 0;
}

.slider img.active {
  opacity: 1;
}

.tagline {
  margin-top: 15px;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 500;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .banner-content {
    text-align: center;
  }
  .desc {
    max-width: 100%;
    margin: 15px auto;
  }
  .sub-images {
    justify-content: center;
  }
  .slider {
    height: 350px;
  }
}



/* 
.banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 40px 10%;
  flex-wrap: wrap;
}

.banner-content {
  flex: 1;
  min-width: 300px;
}

.banner-content h1 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
}

.banner-content h1 span {
  display: block;
  color: #000;
}

.sub-images {
  display: flex;
  gap: 15px;
  margin: 25px 0;
}

.sub-images .small-img img {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 50px 50px 0 0;
}

.desc {
  font-size: 15px;
  color: #444;
  max-width: 400px;
  margin-bottom: 25px;
}

.buttons {
  display: flex;
  gap: 15px;
}

.shop-btn, .try-btn {
  border: none;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}

.shop-btn {
  background-color: #fdd835;
  color: #000;
}

.shop-btn:hover {
  background-color: #fbc02d;
}

.try-btn {
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
}

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

.banner-image {
  flex: 1;
  min-width: 400px;
  position: relative;
  text-align: center;
}

.slider {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 500px;
  margin: auto;
  overflow: hidden;
  border: 12px solid #e8dacf;
  border-radius: 50% 50% 0 0;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
  padding:30px 30px 0 30px;
  border-radius: 50% 50% 0 0;
}

.slider img.active {
  opacity: 1;
}

.tagline {
  margin-top: 15px;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .banner {
    flex-direction: column;
    text-align: center;
  }
  .banner-content, .banner-image {
    width: 100%;
  }
  .sub-images {
    justify-content: center;
  }
} */
/* ==============product featured========================================= */
    /* Main container: ONE ROW */
    .product-container {
      display: flex;
      align-items: flex-start;
      gap: 25px;
      padding: 30px 5%;
      overflow-x: auto;
      scroll-behavior: smooth;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.1);
      white-space: nowrap;
    }

    .product-container::-webkit-scrollbar {
      height: 8px;
    }
    .product-container::-webkit-scrollbar-thumb {
      background: #d4af37;
      border-radius: 10px;
    }

    /* Product Detail (fixed left) */
    .product-details {
      flex: 0 0 350px;
      background: #fff9f3;
      border-radius: 10px;
      padding: 25px;
      text-align: center;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      display: inline-block;
      vertical-align: top;
    }

    .product-details img {
      width: 280px;
      height: 280px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 15px;
    }

    .product-title {
      font-size: 22px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .product-price {
      color: #b8860b;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .product-description {
      font-size: 14px;
      color: #555;
      margin-bottom: 20px;
    }

    .btn-add-cart {
      background: #b8860b;
      border: none;
      color: #fff;
      padding: 10px 22px;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }

    .btn-add-cart:hover {
      background: #d4af37;
    }

    /* Product Cards (scrollable right side) */
    .product-card {
      display: inline-block;
      width: 180px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      text-align: center;
      padding: 12px;
      margin:50px 15px 50px;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .product-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    }

    .product-card img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 8px;
    }

    .product-card h3 {
      font-size: 15px;
      color: #333;
      margin-bottom: 5px;
    }

    .product-card p {
      color: #b8860b;
      font-weight: 600;
      margin: 0;
    }
/* 
    @media (max-width: 768px) {
      .product-container {
        flex-wrap: nowrap;
        overflow-x: scroll;
      }
      .product-details {
        flex: 0 0 300px;
      }
      .product-card {
        width: 150px;
      }
    } */
    /* 🧩 Responsive Media Queries */
@media (max-width: 1024px) {
  .product-container {
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  /* Container setup */
  .product-container {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .product-details {
    order: -1;
    max-width: 90%;
    margin: 10px auto 20px;
  }

  /* Product cards row scroll */
  .product-container {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    scroll-behavior: smooth;
  }

  .product-card {
    flex: 0 0 auto;
    width: auto;
    margin: 0 5px;
    padding: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }

  /* Hide everything except image */
  .product-card h3,
  .product-card p {
    display: none;
  }

  .product-card img {
    width: 100px; /* adjust size as needed */
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
  }

  /* optional — hide scrollbar */
  .product-container::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .product-container {
    gap: 0;
  }

  .product-card img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
  }
}
/* ===============================Deal of the day=========================== */

  

    .deal-section {
      position: relative;
      height: 70vh;
      width: 100%;
      background: url('../images/rs-deal.png') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .deal-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }

    .deal-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      padding: 20px;
    }

    .deal-content h1 {
      font-size: 42px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .deal-content p {
      font-size: 18px;
      margin-bottom: 20px;
      opacity: 0.9;
    }

    .countdown {
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    .countdown div {
      background: rgba(255, 255, 255, 0.1);
      padding: 15px 20px;
      border-radius: 10px;
      min-width: 80px;
    }

    .countdown div strong {
      display: block;
      font-size: 28px;
      font-weight: 600;
      color: #ff4b4b;
    }

    .countdown div span {
      font-size: 14px;
      opacity: 0.8;
    }

    @media (max-width: 768px) {
      .deal-content h1 {font-size: 28px;}
      .countdown {gap: 10px;}
      .countdown div {padding: 10px; min-width: 60px;}
      .countdown div strong {font-size: 22px;}
    }