@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap");

:root {
  --color-1: #fff8dc;
  --text-color: #503530;
  --accent-color: #c77f20;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensure padding is included in width calculations */
}

html {
  font-size: 12pt;
  font-family: Poppins, Segoe UI, Tahoma, sans-serif;
  background-color: #fff8dc;
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
  overflow-x: hidden; /* Also prevent horizontal scrolling on body */
  width: 100%;
  max-width: 100%;
}

nav {
  height: 60px;
  background-color: var(--color-1);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.links-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

nav a {
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  position: relative;
  overflow: hidden;
  font-size: 15pt; /* Increased by 25% from 12pt */
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

nav a:hover {
  background-color: var(--accent-color);
}

nav .home-link {
  margin-right: auto;
}

nav svg {
  fill: var(--text-color);
}

#sidebar-active {
  display: none;
}

.open-sidebar-button,
.close-sidebar-button {
  display: none;
}

@media (max-width: 450px) {
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent;
  }

  .links-container {
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 10;
    width: 300px;
    background-color: var(--color-1);
    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
    transition: 0.75s ease-out;
    padding-top: 60px;
  }

  nav a {
    box-sizing: border-box;
    height: auto;
    width: 100%;
    padding: 20px 30px;
    justify-content: flex-start;
    font-size: 13.75pt; /* Increased by 25% from 11pt for mobile */
  }

  .open-sidebar-button,
  .close-sidebar-button {
    padding: 20px;
    display: block;
  }

  .open-sidebar-button {
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 101;
    background-color: rgba(255, 248, 220, 0.6);
    border-radius: 5px;
    padding: 8px;
  }

  #sidebar-active:checked ~ .links-container {
    right: 0;
  }

  #sidebar-active:checked ~ #overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .container {
    margin-top: 0;
    padding-top: 0;
  }

  .banner-section {
    margin-top: 0;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden; /* Prevent overflow content */
}

.banner-section,
.chal-section,
.nolen-gur-section {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 1;
  animation: scaleIn 1s ease-out;
  max-width: 100%;
}

.chal-section button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background-color: #c4bfbe;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.chal-section button:hover {
  background-color: #b87149;
  transform: translateX(-50%) scale(1.1);
}

.achar-section {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1000 / 441;
  margin-top: 0px;
}

.nolen-gur-section {
  height: auto; /* Changed from fixed height to auto */
  aspect-ratio: 5 / 1; /* Maintain the same aspect ratio as other banners */
}

.nolen-gur-section button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background-color: #c4bfbe;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.nolen-gur-section button:hover {
  background-color: #b87149;
  transform: translateX(-50%) scale(1.1);
}

.nolen-gur-section1,
.doshokorma-section {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 1;
  margin-bottom: 2px;
  border-radius: 5px;
}

/* Make the entire banner sections clickable and show hover feedback */
.clickable-section {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.clickable-section img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.clickable-section:hover img {
  transform: scale(1.03);
  filter: brightness(0.98);
}

/* Remove old button rules for these sections since buttons were removed */
.achar-section button,
.aamsotto-section button,
.chanachur-section button,
.chatni-section button,
.kasundi-section button,
.chal-section button,
.nolen-gur-section button,
.doshokorma-section button {
  display: none !important;
}

.nolen-gur-section1 {
  height: 80vh;
}

.aamsotto-section,
.chanachur-section,
.chatni-section,
.kasundi-section {
  flex: 1 1 calc(50% - 10px);
  height: 100vh;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.achar-image,
.background-image,
.kasundi-image,
.aamsotto-image,
.chanachur-image,
.chatni-image,
.nolen-gur-image,
.nolen-gur-image1,
.doshokorma-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.nolen-gur-image1 {
  margin-bottom: 0px;
}

button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background-color:#c4bfbe;
  color: whitesmoke;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

button:hover {
  background-color: #b87149;
  transform: translateX(-50%) scale(1.1);
}

/* Navbar and Sidebar Styles for mobile*/
      @media (max-width: 450px) {
        nav {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 100;
          background-color: rgba(255, 248, 220, 0.7);
          backdrop-filter: blur(5px);
          height: auto;
          padding: 0;
          margin: 0;
          width: 100%;
        }
        
        .open-sidebar-button {
          position: fixed;
          top: 5px;
          right: 5px;
          z-index: 101;
          background-color: rgba(255, 248, 220, 0.6);
          border-radius: 5px;
          padding: 8px;
          width: auto;
          height: auto;
        }
        
        /* Improve the links-container background for better visibility */
        .links-container {
          flex-direction: column;
          align-items: flex-start;
          position: fixed;
          top: 0;
          right: -100%;
          z-index: 10;
          width: 80%;
          max-width: 300px;
          height: 100vh;
          background-color: rgba(255, 248, 220, 0.95); /* More opaque background */
          box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3); /* Stronger shadow */
          transition: 0.75s ease-out;
          padding-top: 60px;
          backdrop-filter: blur(10px); /* Stronger blur effect */
        }
        
        /* Ensure menu items are clearly visible */
        nav a {
          color: #503530; /* Make text darker */
          font-weight: 500; /* Make text slightly bolder */
          width: 100%;
          padding: 15px 25px;
          border-bottom: 1px solid rgba(80, 53, 48, 0.1); /* Add subtle separator */
        }
        
        /* Add hover effect */
        nav a:hover {
          background-color: rgba(199, 127, 32, 0.15);
        }
        
        .container {
          padding-top: 0; /* Remove padding to make banner touch the top edge */
          width: 100%;
          overflow-x: hidden;
        }
        
        /* Make the banner section touch the top */
        .banner-section {
          margin-top: 0;
          padding-top: 0;
        }
        
        html, body {
          width: 100%;
          overflow-x: hidden;
        }
      }

/* Added the same button behavior for doshokorma section */
.doshokorma-section button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background-color: #c4bfbe;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.doshokorma-section button:hover {
  background-color: #b87149;
  transform: translateX(-50%) scale(1.1);
}

.home-link {
  color: #503530;
  text-decoration: none;
  font-size: 1rem;
}

/* Media queries for responsiveness */

@media (max-width: 1200px) {
  .banner-section,
  .chal-section,
  .achar-section,
  .nolen-gur-section,
  .nolen-gur-section1 {
    height: 100vh;  
  }

  .aamsotto-section,
  .chanachur-section,
  .chatni-section,
  .kasundi-section {
    height: 45vh;
  }
}

@media (max-width: 992px) {
  .banner-section,
  .chal-section,
  .nolen-gur-section {
    height: 26vh; 
  }

  .nolen-gur-section1 {
    height: 30vh;  /* Increased from 30vh */
  }

  .aamsotto-section,
  .chanachur-section,
  .chatni-section,
  .kasundi-section {
    height: 40vh;
  }
}

@media (max-width: 576px) {
  /* Remove gap between banners in mobile view */
  .container {
    gap: 0;
  }
  
  .banner-section,
  .chal-section,
  .achar-section,
  .nolen-gur-section,
  .doshokorma-section {
    /* Make parent establish flow and a minimum visible height on small screens */
    height: auto;
    margin: 0; /* Remove any margins */
    position: relative;
    min-height: 10px;
  }

  .nolen-gur-section {
    height: auto; /* Changed from 15vh to auto to maintain consistency */
    margin: 0; /* Remove any margins */
  }

  .nolen-gur-section button,
  .chal-section button {
    padding: 5px 10px;
    font-size: 0.8rem;
    bottom: 5px;
  }

  .nolen-gur-section1 {
    height: 20vh;
    margin: 0; /* Remove any margins */
  }

  .aamsotto-section,
  .chanachur-section,
  .chatni-section,
  .kasundi-section {
    height: 20vh;
    margin: 0; /* Remove any margins */
  }

  /* Override absolute positioning for banner images on phones so they remain visible
     and participate in layout (parent has auto height). Use !important to override
     earlier global rules that set images absolute and z-index:-1. */
  .banner-section img,
  .achar-image,
  .background-image,
  .kasundi-image,
  .aamsotto-image,
  .chanachur-image,
  .chatni-image,
  .nolen-gur-image,
  .nolen-gur-image1,
  .doshokorma-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    z-index: 0 !important;
    object-fit: cover;
    display: block;
  }

  .doshokorma-image {
    width: 100%;
    height: auto;
    object-fit: contain; /* Ensures that the image maintains its aspect ratio */
  }
  .doshokorma-section button {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    border: none;
    padding: 5px 10px; /* Reduced padding for mobile */
    border-radius: 5px;
    font-size: 0.2rem;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
  }

  .chal-section button {
    padding: 5px 10px; /* This was a more specific rule, will be overridden below if it applies to an explore button */
    font-size: 0.8rem;
  }

  button { /* General button styling for mobile, explore buttons will get more specific styling */
    padding: 5px 10px;
    font-size: 0.8rem;
    bottom: 5px;
  }

  /* Apply opacity and reduced size to the Explore button elements themselves for specified sections */
  .achar-section button,
  .aamsotto-section button,
  .chanachur-section button,
  .chatni-section button,
  .kasundi-section button,
  .chal-section button, /* This will override the .chal-section button rule above for explore buttons */
  .nolen-gur-section button,
  .doshokorma-section button {
    opacity: 0.7;
    padding: 4px 8px; /* Reduced padding by approx 15% */
    font-size: 0.68rem; /* Reduced font-size by approx 15% */
  }

  button {
    padding: 5px 10px;
    font-size: 0.8rem;
    bottom: 5px;
  }

  /* Apply opacity to the button elements themselves for specified sections */
  .achar-section button,
  .aamsotto-section button,
  .chanachur-section button,
  .chatni-section button,
  .kasundi-section button,
  .chal-section button,
  .nolen-gur-section button,
  .doshokorma-section button {
    opacity: 0.7;
  }
}

/* Footer Styling */
footer {
  background-color: #fff8dc; /* Lighter than the page background for better visibility */
  border-top: 2px solid #fff8dc; /* Subtle border to separate footer from content */
  padding: 20px 10px;
  text-align: center;
  margin-top: 30px; /* Ensures spacing from the content above */
}

.footer-content {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-content p {
  color: 503530;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.footer-content .social-icons {
  margin: 10px 0;
}

.footer-content .social-icons a {
  margin: 0 10px;
  display: inline-block;
  width: 32px;
  height: 32px;
}

.footer-content .social-icons img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.footer-content .social-icons img:hover {
  transform: scale(1.2);
}

.footer-content a {
  color: var(--footer-link);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-content a:hover {
  color: #c79c3f;
}

/* Footer Button */
.footer-button {
  display: inline-block;
  margin-top: 15px;
  background-color: #503530;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.footer-button:hover {
  background-color: #614540;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Media Queries for Footer */
@media (max-width: 576px) {
  .footer-content p {
    font-size: 0.8rem;
  }

  .footer-content .social-icons img {
    width: 24px;
  }

  .footer-button {
    font-size: 0.9rem;
    padding: 8px 16px;
  }
}
.available-at-section {
  text-align: center;
  margin: 10px 4px;
  background: linear-gradient(145deg, #fff8dc, #dbdad2);
  box-shadow: 4px 4px 8px #cccccc, -4px -4px 8px #ffffff;
  border-radius: 15px;
  padding: 10px;
}

.available-at-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #503530;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.logo-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.available-logo {
  max-width: 100px;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  animation: slideInRight 0.5s ease-out;
  animation-fill-mode: both;
}

.available-logo:hover {
  transform: scale(1.1);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.available-logo:nth-child(2) { animation-delay: 0.1s; }
.available-logo:nth-child(3) { animation-delay: 0.2s; }
.available-logo:nth-child(4) { animation-delay: 0.3s; }
.available-logo:nth-child(5) { animation-delay: 0.4s; }

/* Mobile responsiveness */
@media (max-width: 768px) {
  .available-at-section h2 {
    font-size: 20px;
  }

  .logo-container {
    gap: 15px;
  }

  .available-logo {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .available-at-section h2 {
    font-size: 18px;
  }

  .logo-container {
    gap: 10px;
  }

  .available-logo {
    max-width: 60px;
  }
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply animations to elements */
.product {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.product:nth-child(2) { animation-delay: 0.2s; }
.product:nth-child(3) { animation-delay: 0.4s; }
.product:nth-child(4) { animation-delay: 0.6s; }

/* Enhanced hover effects */
.product {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.banner img {
    transition: transform 0.5s ease;
}

.banner:hover img {
    transform: scale(1.02);
}

/* Loading animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.check-availability {
  display: inline-block;
  padding: 12px 25px;
  background: #503530;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 0 auto;
}

.check-availability:hover {
  background: #614540;
}

/* Button Style from style4.css */
.availability-btn {
  background-color: #503530; /* Changed to a dark brown color */
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.2s;
  width: 220px; /* Increased width slightly */
  text-align: center;
  display: inline-block; /* Ensure it's displayed */
  box-shadow: 0 3px 5px rgb(255, 255, 255); /* Add shadow for visibility */
  position: relative; /* Add position relative */
  z-index: 2; /* Add z-index */
  text-decoration: none; /* Remove underline from link */
}

.availability-btn:hover {
  background-color: #503530; /* Darker shade on hover */
  box-shadow: 0 3px 5px rgba(0,0,0,0.2); /* Add shadow on hover */
}