/* RESET + BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
   font-size: 14px;
   line-height: 1.6;
  background: #fdfdfd;
  color: #333;
   margin: 0;
     padding: 0;
}

  /*4️⃣ Devices Breakpoints  */
   @media (max-width: 767px) { /* Mobile */ }
   @media (min-width: 768px) and (max-width: 1023px) { /* Tablet */ }
   @media (min-width: 1024px) { /* Desktop */ }

  /* Mobile (default) */
.container {
  padding: 1rem;
  grid-template-columns: 1fr; /* single column */
}

/* Tablet (portrait & landscape) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* two columns */
    gap: 1.5rem;
  }

  .product-card {
    font-size: 1rem; /* slightly bigger */
    min-height: 350px; /* balanced card height */
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .container {
    grid-template-columns: repeat(3, 1fr); /* three columns */
    gap: 2rem;
  }
} 

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 1.1rem;
  }
  button, input, select {
    font-size: 1rem;
  }
}


                               /* MENU/TOP-BAR */
 #tab-top {
      display: flex;
      background-color:#4E342E;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      height: 40px;   
      
}
#tab-top a{
      color:#4E342E;
      font-family: Helvetica, sans-serif;
      font-size: 18px;
      text-decoration:none;
      padding: 0 10px;  /* optional: space between text and other elements */
      margin: 0;        /* fully removes space around links */
    
        
}
#tab-top a:hover{
color: #ffffff

}                                /* LOGO */
 .logo {
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;  
      margin-right: 15px;
      font-style: italic;
      font-family: 'georgia', serif;
      margin-top: 5px;
      margin-left: 10px;    
}  

.search-box {
  flex: 1; /* Takes remaining space */
  max-width: 400px; /* Optional: cap how wide it can grow */
}

         /* SEARCH BUTTON */            /* SEARCH BOX */   
  .search-box input {
  height: 25px;
  border-radius: 10px;
  border: none;
  width: 100%;
  padding: 0 10px;
  margin-right: 10px;
  
}
@media (max-width: 600px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .search-box input {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }
}

 .nav-menu {
      display: flex;
      background-color: #4E342E; 
      padding: 10px 20px;
      flex-wrap: wrap;
      justify-content: space-evenly; /* or center if needed */
      align-items: center;
      position: fixed;
      top: 40px; /* Adjusted to avoid overlap with the top bar */
      left: 0;
      width: 100%;
      z-index: 1000;
      height: 40px;   
      list-style: none;
      margin: 0;
      padding: 0;
 
}

.nav-menu a {
  display: block;
  color: #fff;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px; 
  height: 35px;

  font-family: Helvetica, sans-serif;
}

.nav-menu a:hover {
  background-color: #A67C52; /* Gold accent */
}

.navbar {
  background-color: #4B2E1E; /* Rich brown */
  padding: 10px;
}

.nav-menu li {
  position: relative;
}

/* Dropdown Styling */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  color: #333;
  min-width: 180px;

  flex-direction: column;
  margin-left: 0;
  margin-top: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 10px 0;
  border-radius: 4px;
  z-index: 999;
}

.dropdown-content a {
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #333;
}

.dropdown:hover .dropdown-content {
  display: flex;
}

/* Desktop styles */
@media screen and (min-width: 1024px) {
  .nav-menu {
    justify-content: space-between; /* Spread items evenly */  
  }

  /* Increase font sizes & spacing for big screens */
  body {
    font-size: 18px;
  }

  main {
    max-width: 1200px; /* center menu within a readable width */
    margin: 0 auto;     /* center horizontally */  
  }
}

                         /* Base Hero Container */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* center content vertically */
  background-color: white;
  padding: 0;
  margin: 0;
  overflow: hidden;
 
}

/* Hero Image */
.hero img {
  display: block;
  width: 100%;
  height: 350px;
  max-width: 1600px;
  max-height: 90vh;
  object-fit: contain;
  object-position: center;
  margin: 0;
  padding: 0;
  transition: transform 0.3s ease;
 
}
.hero-center {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}

.hero-center h1 {
  font-size: 18px;
  font-weight: 600;
  color: #4B2E1E;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  font-family: 'Georgia', serif;

}

/* Mobile Optimization */
@media (max-width: 768px) {
  .hero {
    padding-top: 30px;
    height: 350px;
  }
  .hero img {
    margin-top: 75px;
    margin-bottom: 0;
  }
}

/* Desktop Optimization */
@media (min-width: 1024px) {
  .hero {
  padding-top: 60px;

  }
  .hero img {
    object-fit: inherit;
    zoom: normal;
    width: 1580px;
    margin-top: 85px;
    margin-bottom: 0;
  }
}


/* Tablet Optimization (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero {
   padding-top: 40px;

  }
  .hero img {
    object-fit: inherit;
    zoom: normal;
    width: 1024px;
    margin-top: 85px;
    margin-bottom: 0;
  }
}


/* CTA button – slight polish + consistent spacing */
.cta {
  background-color: #4E342E;
  color: #fff;
  border: none;
  padding: 10px 20px;          /* better horizontal padding */
  border-radius: 20px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  margin-top: clamp(8px, 2vh, 16px);
  margin-bottom: 0;
}
.cta:hover {
  background: #ffe0b2;
  color: #4E342E;
}

      /* Isicelo Banner Section */

.isicelo-highlight {
  background: white;
  padding: 20px 15px;
  text-align: center;
  border-top: 1px solid #ffcc80;
  border-bottom: 1px solid #ffcc80;
  margin-top: 0; 

}

.isicelo-highlight h1 {
  font-size: 22px;
  color: #5a351c;
  margin-bottom: 8px;
  font: bold;
}

.isicelo-highlight h2 {
  font-size: 22px;
  color: #5a351c;
  margin-bottom: 8px;
  font: bold;
}

.isicelo-highlight p {
  font-size: 18px;
  color: #3e1e0c;
  margin-bottom: 10px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
  font: bold;
}

.isicelo-highlight .cta {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #4E342E;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.isicelo-highlight .cta:hover {
  background-color: #5a2a12;
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 5px;
  justify-items: center;
  margin-top: 10px;
  margin-bottom: 15px;
}
              /*Desktop CTA Grid */
 .cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* smaller min size */
  gap: 15px;
}

/* Upcoming Events *//* EVENTS MENU */
               /* Upcoming Events */

.events-preview {
  background: #fff8e1;
  padding: 30px 20px;
  text-align: center;
  border-top: 1px solid #ffcc80;
  border-bottom: 1px solid #ffcc80;
  margin-top: 0;
  width: 100%;
}
.events-preview h2 {
  font-size: 22px;
  color: #5a351c;
  margin-bottom: 0;
}
.events-preview ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}
.events-preview li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #3e1e0c;
}
.events-preview .cta {
  background-color: #3e1e0c;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
}


                      /*CALENDER */ 

.calendar-link {
  font-size: 13px;
  text-decoration: none;
  color: #5c3b16;
  font-weight: bold;
}

                                             /*Feature/Product Grid */
    .product-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: relative;
      gap: 10px;
      margin-top: 0;
      justify-content: center; /* Center cards horizontally */
      padding: 0 10px;
      margin-bottom: 45px;
    }
    .product-card {
      background: white;
      border-radius: 12px;
      padding: 15px 15px; /* Balanced vertical & horizontal padding */
      width: 180px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    .product-card img {
      width: 100%;
      flex-shrink: 0;
      height: 140px;
      object-fit: contain;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .product-card img:hover {
      transform: scale(1.05);
    }
    .product-card .qty-container {
     display: flex;
     align-items: center; /* vertically center the label and input */
     gap: 10px; /* space between label and input */
     margin-top: 1px;
    margin-left: 20px; /* space from the left */
}

    .product-card .option-container {
    display: flex;
    align-items: center; /* vertically center label and select */
    gap: 10px;           /* space between label and select */
    margin-top: 1px;
    margin-left: 20px;   /* consistent spacing from left */
}

  .product-card select {
    padding: 2px;
    border-radius: 2px;
    width: 50px;
    font-size: 12px;
    cursor: pointer;
}

   .product-card input {
     width: 50px;
     padding: 2px;
}
    .product-card h3 {
    font-size: 16px;
    margin: 12px 0 5px;
    color: #5d4037;
      
    }
    .product-card p {
    font-size: 14px;
    color: #3e2c12;
    margin: 5px 0 10px;
    }
   
 .btn {
      background-color:#523218;
      color: white;
      border: none;
      padding: 8px 5px;
      border-radius: 5px;
      margin-top: 10px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s ease;
      display: inline-block; /* prevent full width stretching */
      width: auto;           /* force natural size */
  

    }
    .product-card button:hover {
      background-color: #A67C52;
    }
    /* Product Card Hover Effect */
       .product-card:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
       transform: translateY(-2px);
}                               
      .product-actions {
       display: flex;
       gap: 10px;
}
      .btn-small {
      padding: 8px 8px;
      font-size: 14px;
      flex: 1;
}
 
                                                     /* Image Scroll Container */
.image-scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(199, 199, 199, 0.301) transparent;
  
}
/* WebKit (Chrome, Safari, Edge) custom scrollbar */
.image-scroll-container::-webkit-scrollbar {
  height: 1px; /* thinner scrollbar */
  width: 1px; /* thinner scrollbar */
}

.image-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.image-scroll-container::-webkit-scrollbar-thumb {
    background: #fffcfc;
  border-radius: 1px;

}

.image-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25); /* slightly darker on hover */
}


.image-scroll-container img {
  flex-shrink: 0;
  width: 100%; /* fixed width for images */
  height: 140px;
  object-fit: contain;
  border-radius: 8px;
  scroll-snap-align: start;
  cursor: pointer;
}
              /*Desktop CTA Grid */


/* Mobile adjustments */ 

  .product-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* smaller min size */
  gap: 3px 50px; /* horizontal and vertical gaps */ margin-bottom: 20px;
}
@media (max-width: 480px) {
  .product-card {
    grid-template-columns: 1fr; /* single column on small phones */
    gap: 10px;
  }
}
      /* baskets product menu */
                                                      
      #categories {
      display: flex;
      overflow-x: auto;
      padding: 15px 10px;
      gap: 8px;
      background-color: #f5f5f5;
      scroll-behavior: smooth;

}

#categories::-webkit-scrollbar {
       height: 1px;
       width: 1px;
}
#categories::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 1px;
}

#categories a {
  padding: 6px 14px;
  background: linear-gradient(to right,#eeeeee, #fff4ec);
  color: #5a2c0d;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid #f1cfcf;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
  transition: all 0.2s ease-in-out;
  margin: 0 5px;
  white-space: nowrap;

}

#categories a:hover {
  background:  #e7d1ba;
  transform: scale(1.05);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

  .section-title {
      font-size: 20px;
      font-weight: bold;
      padding: 15px 20px 10px;
      color: #4a2f0a;
    }

                                                       /* Modal Styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
    }

    .modal img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 10px;
    }

              /* Heritage Spotlight Styles */
.heritage-spotlight {
  background: #fdf8f3;
  padding: 3rem 1rem;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
}

.spotlight-header h2 {
  font-size: 2rem;
  color: #5c3d2e;
  margin-bottom: 1rem;
  top: 0;
}

.spotlight-header p {
  font-size: 1rem;
  color: #7a6a58;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.spotlight-carousel {
  display: flex;
  overflow: hidden;
  justify-content: center;
  position: relative;
}

.spotlight-card {
  min-width: 300px;
  max-width: 400px;
  margin: 0 1rem;
  opacity: 0;
  transition: opacity 0.5s ease;
  position: absolute;
}

.spotlight-card.active {
  opacity: 1;
  position: relative;
}

.spotlight-card img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card-content {
  background: #fff;
  padding: 1rem;
  margin-top: -1rem;
  border-radius: 0 0 12px 12px;
}

.card-content h3 {
  font-size: 1.25rem;
  color: #3d2b1f;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.card-content p {
  font-size: 0.95rem;
  color: #5a4a3a;
  margin: 0.5rem 0;
}

.card-content button {
  background: #8c5e3c;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.carousel-controls {
  margin-top: 2rem;
}

.carousel-controls button {
  background: transparent;
  border: 2px solid #4E342E;
  color:#4E342E;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}

/* Desktop adjustments */
@media (min-width: 1024px) {
  .spotlight-carousel {
    display: flex;
    justify-content: center;
    overflow: visible; /* show all cards */
    position: relative;
    gap: 2rem; /* spacing between cards */
  }

  .spotlight-card {
    position: relative;  /* no absolute positioning on desktop */
    opacity: 1;          /* always visible */
    flex: 1 1 300px;     /* flexible card widths */
    max-width: 350px;
    min-width: 250px;
  }

  .spotlight-card img {
    max-height: 280px;   /* limit image height */
    object-fit: cover;   /* nicely fill the card */
  }

  .spotlight-header h2 {
    font-size: 2.5rem;
  }

  .spotlight-header p {
    font-size: 1.2rem;
  }
}



                                         /* Notification popup */
      .notification {
       position: fixed;
       top: 90px;
       right: 20px;
       background-color: #10b981;
       color: white;
       padding: 15px 25px;
       border-radius: 5px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       z-index: 2000;
       animation: slideIn 0.3s ease;
}

     /* Animation for notification */
        @keyframes slideIn {
        from {
        transform: translateX(100%);
        opacity: 0;
        }
     to {
        transform: translateX(0);
         opacity: 1;
        }
}
        
                                 /*CART LINK*/
 .cart-link {
  color:rgb(60, 61, 31);
  padding: 8px 16px;
  border-radius:20px;
  font-size: 14px;
}                                            
.cart-link:hover{
       color: #ffffff
                                   
}

                               /* Cart page layout */
.cart-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  margin-top: 10px;
}

                                /* Individual cart item */
.cart-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  margin-bottom: 15px;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.cart-item-details {
  flex: 1;
}

.cart-item-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #1e293b;
}

.cart-item-price {
  color: #64748b;
  font-size: 14px;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}
                              /****Clear Cart Bar******/
.btn-secondary {
  background-color: #8c5e3c;;
  color: white;
}
.btn-secondary:hover {
  background-color: #8c5e3c;;
}
                              /* Quantity controls */
.quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #f1f5f9;
  border-radius: 5px;
  padding: 5px;
}

.quantity-btn {
  width: 10px;
  height: 10px;
  border: none;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  color: #64748b;
}

.quantity-btn:hover {
  background-color:  #8c5e3c;;
  color: white;
}

.quantity-display {
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

.cart-item-total {
  font-weight: bold;
  font-size: 18px;
  color: #22c55e;
  min-width: 80px;
  text-align: right;
}

.remove-btn {
  background-color: #8c5e3c;;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.remove-btn:hover {
  background-color: #8c5e3c;;
}

                                          /* Cart Summary */
.summary-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  position: sticky;
  top: 90px;
}

.summary-card h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #1e293b;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 0;
}

.total-row {
  border-top: 2px solid #e2e8f0;
  font-weight: bold;
  font-size: 18px;
  color: #1e293b;
  margin-top: 15px;
  padding-top: 15px;
}

.full-width {
  width: 100%;
  margin-bottom: 10px;
}

                                                                    /* Empty cart */
.empty-cart {
  text-align: center;
  padding: 80px 20px;
}

.empty-cart h2 {
  font-size: 28px;
  color: #64748b;
  margin-bottom: 15px;
}

.empty-cart p {
  color: #94a3b8;
  margin-bottom: 30px;
  font-size: 16px;
}

                                                             /* Mobile responsive */
@media (max-width: 768px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .cart-item-controls {
    width: 100%;
    justify-content: space-between;
  }
}

                                                               /* Checkout page layout */
.checkout-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

                                                                        /* Form styling */
.checkout-form {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
}

.form-section {
  margin-bottom: 30px;
}

.form-section h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #1e293b;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-row.three-col {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 5px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #8c5e3c;;
}

.btn-large {
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
}

                                                                      /* Checkout items display */
.checkout-items {
  margin-bottom: 20px;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f0;
}

.checkout-item:last-child {
  border-bottom: none;
}

.checkout-item-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
}

.checkout-item-details {
  flex: 1;
}

.checkout-item-name {
  font-weight: 500;
  font-size: 14px;
  color: #1e293b;
}

.checkout-item-quantity {
  font-size: 12px;
  color: #64748b;
}

.checkout-item-price {
  font-weight: bold;
  color: #8c5e3c;
}

.summary-totals {
  border-top: 2px solid #e2e8f0;
  padding-top: 15px;
}

                                                      /* Success message */
.success-message {
  background-color: #8c5e3c;
  color: white;
  padding: 40px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 30px;
}

.success-message h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

                           /* Mobile responsive */
@media (max-width: 768px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-row.three-col {
    grid-template-columns: 1fr;
  }
}
                      /* Contact page layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
  margin-top: 50px;
}

.contact-info {
  padding: 30px;
}

.contact-info h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #1e293b;
}

.contact-info p {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 30px;
  font-size: 16px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.contact-item h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #8c5e3c;
}

.contact-item p {
  color: #374151;
  margin: 0;
  font-size: 14px;
}

.contact-form {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
}

.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.contact-form textarea:focus {
  outline: none;
  border-color: #8c5e3c;
}

                                                               /* Mobile responsive */
@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
/* Mobile Navigation */
@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    gap: 15px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 16px;
  }

  .hero {
    padding: 120px 20px 60px;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .filters {
    flex-direction: column;
    align-items: center;
  }

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

                                                              /* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

                                                                   /* Loading animation */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid  #8c5e3c;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
                                                                /* INFO BOX */
a.info-box{
      text-decoration : none;
      background      : rgba(255 ,225, 55, .8);
      width           : 90%;
      height          : 90px;
      display         : block;
      margin          : auto;
      margin-top      : 12px;
      padding         : 1px; 
}
                                                         /* CONTAINER FOR CENTERING CONTENT */
.container {
  max-width:1200px ;
  margin: 0 auto;
  padding: 0 20px;
 
}
 
                                                         /****Status Tracking Icons***/
.status-icon {
  font-size: 20px;
  margin-right: 10px;
  font-weight: bold;
}
.status-label {
  font-weight: bold;
  font-size: 18px;
  margin-top: 5px;
}
.status-processing {
  color: orange;
}
.status-shipped {
  color: green;
}
.status-delivered {
  color: #2e7d32;
}

                                   /* FOOTER */
footer {
position : fixed;
bottom   : 0;
left     : 0;
z-index  : 1000;
width    : 100%;
height   : 40px;
background-color:#4E342E;
display: flex;
justify-content: center;
align-items: center;


}

footer a {
font-family: Helvetica, sans-serif;
height : 35px;
color       : white;
text-align  : center;
text-decoration : none;
font-size: 18px;  
margin: 0 6px; /* spacing between links */
padding: 8px 8px;

}

footer a:hover{
color: #ffffff
}

/* Desktop styles */
@media screen and (min-width: 1024px) {
  footer {
    justify-content: space-between; /* Spread items evenly */
    padding: 10px 40px;
  }

  /* Increase font sizes & spacing for big screens */
  body {
    font-size: 18px;
  }

  main {
    max-width: 1200px;
    margin: 0 auto;
  }
}




                                /* Info Section Bar Bottom */

  /* APP FOOTER/ Global Footer */        

.app-footer {
  background-color: #4E342E;
  color: white;
  font-size: 14px;
  text-align: center;
  z-index: 1000;


  /* Full width and no spacing from body */
  width: 100%;
  margin: 0;
  padding: 0 0;
  left: 0;

  /* Make sure it overrides any container padding */
  box-sizing: border-box;

  
}

.app-footer .footer-links {
  margin-top: 10px;
}

.app-footer .footer-links a {
  margin: 0 10px;
  color: white;
  text-decoration: none;
}

.social-section a img,
.download-section a img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-top: 10px;
  transition: transform 0.3s ease;
}

.social-section a img:hover,
.download-section a img:hover {
  transform: scale(1.1);
}

.download-section a img {
  width: 30px;
  height: 30px;
}

                /* SOCIAL MEDIA CLASSES */
.social-icons a {
  color: #ff9800;
  margin: 0 10px;
  font-size: 20px;
  text-decoration: none;
}
                           
/* --- Orders Page Styles --- */

.order-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  font-family: 'Arial', sans-serif;
  transition: transform 0.2s ease;
}

.order-card:hover {
  transform: translateY(-4px);
}

.order-card h3 {
  color: #333;
  margin-bottom: 10px;
}

.order-card p {
  margin: 6px 0;
  font-size: 15px;
  color: #555;
}

.order-card ul {
  padding-left: 20px;
  margin-top: 8px;
}

.order-card li {
  margin-bottom: 4px;
  font-size: 14px;
}

/* Status Label Colors */
.status-label {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  margin-top: 8px;
}

.status-processing {
  background-color: #fff3cd;
  color: #856404;
}

.status-shipped {
  background-color: #d1ecf1;
  color: #0c5460;
}

.status-delivered {
  background-color: #d4edda;
  color: #155724;
}

a {
  text-decoration: none;
}

a h2 {
  text-decoration: none;
  color: #523218;
  font-family: playfair, serif;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

a h3 {
  text-decoration: none;
  color: #523218;
  font-family: playfair, serif;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

p1{
    color: rgb(27, 27, 27);
    font-family: sans-serif;
    font-Size: 18;
    font-Weight:normal;
    font-Style: 'italic';
    overflow-y: auto;
    margin-Top: 10px;
    margin-Bottom: 15px;
}

p3{
    color: rgb(50, 85, 63);
    font-family: sans-serif;
    font-Size: 20;
    font-Weight:600;
    font-Style: 'italic';
    margin-top: 50;
    margin-Bottom: 15px;
  margin-Left: 20px;
  padding-top: 50px;
  
}

p4{
    color: rgb(27, 27, 27);
    font-family: sans-serif;
    font-Size: 12;
    font-Weight:600;
    font-Style: 'italic';
    margin-Top: 10px;
    margin-Bottom: 15px;
  
}
                  /* 🎨 Suggested CSS for Delivery Badges */      
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85em;
  color: #fff;
  margin-top: 8px;
}

.badge-nationwide { background-color: #4c554d; }      /* Green */
.badge-local { background-color: #695537; }           /* Orange */
.badge-collection { background-color: #75412e; }      /* Brown */