/* style6.css */
/* Primary Brand Colors to use

Red (#C82026) → Bold, vibrant, eye-catching. Use for headers, call-to-action buttons, and highlights.

Green (#10622C) → Natural, fresh, organic feel. Use for menus, navigation bars, or section backgrounds.

Gold/Yellow (#F4B62D) → Warm, premium feel. Use for accents, icons, hover effects, or section dividers.

Supporting Colors

White (#FFFFFF) → Clean background for readability.

Black / Dark Gray (#1C1C1C) → For text, footer, and contrast.

Light Cream (#FFF6E5) → Neutral background alternative for product sections (gives warmth without being heavy). */

/* Global typography */
body {
  font-family: museo-sans, "Helvetica Neue", "Arial", sans-serif;
  font-weight: 400;  /* default normal weight for body text */
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: museo-sans, "Helvetica Neue", "Arial", sans-serif;
  font-weight: 700;  /* bold headings */
  line-height: 1.3;
  color: #057c26;    /* all headers now use this color */
}

p, li, a, span, button, input, textarea {
  font-weight: 400;  /* keep paragraphs, links, etc. normal */
}

/* Navbar gradient green background */
.bg-brown {
  background: linear-gradient(
    to bottom,
    #057c26 0%,      /* light green at very top */
    #057c26 33%,     /* hold light green until 25% */
    #00511b 100%     /* gradually darken to deep green */
  );
  backdrop-filter: none; /* keep clean, no blur */
}

/* Navbar height + spacing fix */
.navbar {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: unset; /* remove Bootstrap's default */
}

/* Navbar brand + logo */
.navbar-brand img {
  height: 40px; /* keep logo size */
  margin-top: 3;
  margin-bottom: 3;
  display: block;
}

/* Navbar brand + links (make them white) */
.navbar .navbar-brand,
.navbar .nav-link {
  color: #ffffff !important; 
  padding: 8px 10px;
  border-radius: 4px; /* for the hover box */
  transition: background 0.3s ease, color 0.3s ease;
}

/* Hover + Active states for top-level menu */
.navbar .nav-link:hover,
.navbar .nav-item.show .nav-link {
  background-color: rgba(255, 255, 255, 0.30); /* soft white overlay */
  color: #f4b62d !important; /* golden yellow text */
}

/* Dropdown background - slightly transparent white */
.dropdown-menu {
  background-color: rgba(255, 255, 255, 0.95); 
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  border-radius: 4px;
}

/* Dropdown items */
.dropdown-menu .dropdown-item {
  color: #333 !important;
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.7); 
  color: #000 !important;
}

/* Orange dropdown section titles */
.dropdown-header {
  font-weight: 700;
  font-size: 0.85rem;
  color: #c87120; /* Bright orange */
  text-transform: uppercase;
  margin-top: 2px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px; /* small gap between arrow and text */
}

/* Add the ▼ arrow on the left */
.dropdown-header::before {
  content: "▼";
  font-size: 0.65rem;
  color: #c87120;
}

/* Reduce spacing between dropdown links */
.dropdown-menu .dropdown-item {
  padding-top: 2px;
  padding-bottom: 2px;
}



/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* aligns neatly under nav */
}

/* Ensure dropdown-toggle caret stays active on hover */
.nav-item.dropdown:hover > .nav-link {
  color: #fbbf24 !important;
}
/* ==============================
   HERO SECTION BASE STYLES
============================== */
.hero-section {
  width: 100%;
  position: relative;
  padding-top: 60px; /* spacing for navbar */
  overflow: hidden;
  background-color: #cdc641;
}

/* Each carousel item */
.hero-section .carousel-item {
  position: relative;
}

/* Default hero image behavior */
.hero-section .hero-img {
  width: 100%;
  height: 70vh;           /* standard height */
  object-fit: cover;      /* fill image without stretching */
  display: block;
}

/* ==============================
   SELECTIVE HEIGHTS
============================== */
/* Add this class to slides you want taller */
.hero-section .carousel-item.tall-slide .hero-img {
  height: 90vh;           /* taller slide (e.g. first and last) */
  object-fit: cover;
}

/* Keep normal slides shorter */
.hero-section .carousel-item:not(.tall-slide) .hero-img {
  height: 70vh;
  object-fit: cover;
}

/* ==============================
   OVERLAY & CONTENT POSITIONING
============================== */
.hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 0, 0, 0.1);
  z-index: 1;
}

.hero-section .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: left;
}

.hero-section p {
  color: #fff;
  margin-top: 20px;
}

/* ==============================
   HERO CONTENT BOX
============================== */
.hero-section .hero-content {
  position: absolute;
  top: 20%;
  left: 56%;
  transform: translateY(-50%);
  z-index: 2;
  color: #fff;
  max-width: 400px;
  text-align: center;
}

.hero-section .hero-content h1 {
  font-size: 1rem;
  font-weight: bold;
  color: #FFD700; /* golden yellow headline */
}

.hero-section .hero-content p {
  font-size: 0.9rem;
  margin-top: 10px;
  color: #fff;
}

.hero-text-box {
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 15px;
  border-radius: 30px;
  display: inline-block;
}

.hero-text-box h2,
.hero-text-box p {
  margin: 0 0 6px 0;
  color: #fff;
}

.hero-text-box p:last-child {
  margin-bottom: 0;
}

/* ==============================
   EXISTING MOBILE SETTINGS (UNCHANGED)
============================== */
/*@media (max-width: 768px) {
  .hero-section {
    height: calc(60vh - 60px); /* subtract navbar height *
    padding-top: 60px;
    position: relative;
  }

  .hero-section .hero-img {
    height: 60vh;       /* respect natural aspect ratio *
    object-fit: contain; /* show full portrait image *
  }
} */
@media (max-width: 768px) {
  .hero-section {
    position: relative;
    padding-top: 60px;
    height: auto; /* Let height follow image */
    background-color: #000; /* fallback background */
  }

  .hero-section .carousel-item {
    height: auto; /* Prevent Bootstrap from forcing height */
  }

  .hero-section .hero-img {
    width: 100%;
    height: auto;  /* natural height, maintain aspect ratio */
    max-height: 80vh; /* prevent overly tall images */
    object-fit: contain; /* fit image fully */
    object-position: center center;
    display: block;
    margin: 0 auto;
  }

  /* Optional: force text to overlay correctly */
  .hero-section .hero-content {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
    max-width: 90%;
  }
  @media (max-width: 768px) {
    .chilli {
      display: none !important;
    }
  }  
}


/* Chilli bounce styles (desktop only) */
@media (min-width: 769px) {
  .chilli {
    position: absolute;
    z-index: 3;
    pointer-events: none; /* avoid blocking clicks */
  }

  .chilli-1 {
    bottom: 25%;
    right: 7%;
    width: 130px;
    animation: bounceChilli 3.5s infinite ease-in-out; /* slower & longer */
  }

  .chilli-2 {
    bottom: 10%;
    right: 15%;
    width: 200px;
    animation: bounceChilli 1s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.5s; /* starts later */
  }

  .chilli-3 {
    bottom: 10%;
    right: 75%;
    width: 100px;
    animation: bounceChilli 5s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.5s; /* starts later */
  }

  .chilli-4 {
    bottom: 10%;
    right: 83%;
    width: 190px;
    animation: bounceChilli 5s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.5s; /* starts later */
  }

  .chilli-5 {
    bottom: 20%;
    right: 60%;
    width: 400px;
    animation: bounceChilli 9s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.5s; /* starts later */
  }
  .chilli-6 {
    bottom: 40%;
    right: 62%;
    width: 110px;
    animation: bounceChilli 5s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.5s; /* starts later */
  }

  .chilli-7 {
    bottom: 10%;
    right: 30%;
    width: 100px;
    animation: bounceChilli 3.5s infinite ease-in-out; /* slower & longer */
  }

  .chilli-8 {
    bottom: 46%;
    right: 52%;
    width: 170px;
    animation: bounceChilli 6s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.8s; /* starts later */
  }
  .chilli-9 {
    bottom: 35%;
    right: 72%;
    width: 160px;
    animation: bounceChilli 5s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.5s; /* starts later */
  }
  .chilli-10 {
    bottom: 65%;
    right: 17%;
    width: 130px;
    animation: bounceChilli 3.5s infinite ease-in-out; /* slower & longer */
  }
  .chilli-11 {
    bottom: 1%;
    right: 31%;
    width: 70px;
    animation: bounceChilli 0s infinite ease-in-out; /* slower & longer */
  }
  
    .chilli-12 {
    bottom: 40%;
    right: 62%;
    width: 140px;
    animation: bounceChilli 9s infinite ease-in-out;   /* quicker bounce */
    animation-delay: 0.7s; /* starts later */
  }

  @keyframes bounceChilli {
    0%, 100% {
      transform: translateY(0) scale(1, 1);
    }
    50% {
      transform: translateY(-40px) scale(1, 1);
    }
  }

 /* Hide chilli images completely on mobile */
@media (max-width: 768px) {
  .hero-section .chilli {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}


}



/* Info section */
.info-section p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Image cards */
.info-card img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

/* Zoom 15% on hover */
.info-card img:hover {
  transform: scale(1.15);
}


/* Benefit boxes */
.benefit-box {
  background: #fff6e5;
  border: 1px solid #F4B62D;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.benefit-title {
  color: #036c21 /* golden orange heading */
  font-weight: 600;
  margin-bottom: 15px;
}

/* Grey Info Box */
.info-box {
  background: #eee5d4;
  border-radius: 6px;
  border: 1px solid #eee;
  color: #333;
  line-height: 1.6;
}

.info-box p {
  margin: 10;
  font-size: 1rem;
}

/* Footer */
.footer {
  background-color: #9c9433;
  color: #fefcfc;
  font-size: 0.80rem; /* smaller text */
  font-weight: bold;
}

.footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: bold;
}

.footer a:hover {
  color: #94f81a /* golden hover */
}

/* Social media column */
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.social-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.footer-social img {
  width: auto;
  height: 75px;
  background: rgba(255, 255, 255, 0.19);
  border-radius: 4px;
  padding: 8px 10px;
}

/* Links column */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 5px;
}

/* Company column */
.footer-company img {
  max-width: 120px;
}

.footer-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #131111;
  border-radius: 4px;
  background: rgba(16, 68, 3, 0.5);
  margin-bottom: 1px;
  font-size: 0.9rem;
  width: 100%;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-social {
    align-items: center;
    margin-bottom: 20px;
    width: 100%;          /* make it full width */
    flex: 1 1 100%;       /* force auto size */
  }


  .footer-social .social-row {
    justify-content: center; /* center icons when stacked */
    flex-wrap: wrap;         /* wrap if needed */
  }

  .footer-company {
    text-align: center;
  }
}


/* Mobile styles */
@media (max-width: 768px) {
  /* Hide logo, footer links and socials on mobile */
    .footer-social,
    .footer-links {
    display: none !important;
  }

  /* Show text instead */
  .navbar-brand-text {
    display: inline-block;
    margin-left: auto; /* push text opposite hamburger */
  }

  /* Make sure it doesn't overlap */
  .navbar-brand {
    position: static;
  }
}

/* Make the logo animate smoothly */
.desktop-logo {
  transition: transform 0.3s ease, height 0.3s ease;
  transform-origin: top center;
}

/* When scrolled */
.navbar.scrolled .desktop-logo {
  transform: scale(0.6);
}

/* Floating logo outside navbar (default for desktop) */
.navbar-brand {
  position: absolute;
  top: -5px;       /* adjust vertical position */
  left: 57px;      /* adjust horizontal position */
  z-index: 1050;   /* keep it above navbar */
}

.navbar-brand img {
  height: 80px;    /* logo size on desktop */
  width: auto;      
}

/* Hide text by default */
.navbar-brand-text {
  display: none;
  font-weight: bold;
  color: #fff !important;
  font-size: 1.2rem;
}

/* -------------------
   Mobile overrides 
------------------- */
@media (max-width: 768px) {
  /* Hide logo on mobile */
  .navbar-brand img {
    display: block;
  }

  /* Show text instead */
  .navbar-brand-text {
    display: inline-block;
    margin-left: auto; /* pushes text away from hamburger */
  }

  /* Reset positioning for mobile */
  .navbar-brand {
    position: static;
  }
}

/* Fade animation */
.fade {
  opacity: 0; /* start fully transparent */
  transition: opacity 1s linear;
}
.fade.show {
  opacity: 1; /* fade to fully visible */
}

/* Section-specific overrides */
section.py-5 h1,
section.py-5 h2,
section.py-5 h3,
section.py-5 h4,
section.py-5 h5,
section.py-5 h6 {
  color: #03671f !important; /* 🔴 all headings red */
}


/* All buttons site-wide */
.btn,
.btn-warning {
  background-color: #057c26 !important;
  border-color: #057c26 !important;
  color: #fff !important;  /* keep text white for contrast */
  transition: background 0.3s ease, border 0.3s ease;
}

/* Hover / active states for ALL buttons */
.btn:hover,
.btn:focus {
  background-color: #cdc641 !important; /* gold on hover */
  border-color: #cdc641 !important;
  color: #0f0f0f !important;
}

/* Our Brands Section */
.our-brands h2 {
  color: #1C1C1C; /* Dark Gray for heading */
}

.our-brands p {
  color: #fff; /* White text on background */
}

.brand-card img {
  max-height: 160px;
  object-fit: contain;
}

.brand-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* ---------------------------
   OUR BRANDS (floating cards)
---------------------------- */

/* Full-width background */
.our-brands {
  width: 100%;
  height: 400px; /* adjust depending on how tall you want */
  position: relative;
  background-size: cover;        /* ensures it stretches */
  background-position: center;   /* keeps it centered */
  background-repeat: no-repeat;  /* prevents tiling */
  margin-top: 12px; 
}


.our-brands .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* darkens background for readability */
  z-index: 1;
}

.our-brands h2,
.our-brands p {
  position: relative;
  z-index: 2;
}

/* Floating product boxes */
.brands-cards {
  margin-top: -200px; /* pushes the boxes up halfway into background */
  position: relative;
  z-index: 3;
}

.brand-card img {
  max-height: 180px;
  object-fit: contain;
}

.brand-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #F4B62D;
}

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

.brands-cards .brand-card {
  background-color: #eee5d4 !important;
}

/* Zoom effect for brand images (desktop only) 
@media (min-width: 769px) {
  .brand-card img {
    transition: transform 0.3s ease;
  }  */

  .brand-card:hover img {
    transform: scale(1.25); /* zoom in 25% */
    transition: transform 0.4s ease;
  }

@media (max-width: 768px) {
  section.py-5 .mt-4 {
    display: flex;
    flex-direction: column;   /* stack vertically */
    align-items: center;      /* center horizontally */
    gap: 10px;                /* space between buttons */
  }
}

/* Desktop logo visible, mobile logo hidden */
.navbar-brand > img {
  display: block;
}

.navbar-brand-text img {
  display: none;
}

/* ---------------------------
   MOBILE OVERRIDES
---------------------------- */
@media (max-width: 768px) {
  /* Navbar brand area (logo container) */
  .navbar {
    background-color: #10622C !important; /* white background for logo row */
    padding: 5px 10px;
  }

  /* Reset brand positioning for mobile */
  .navbar-brand {
    position: relative;
    margin: 0 auto;           /* centers the logo */
    display: flex;
    justify-content: center;  /* horizontal centering */
    align-items: center;      /* vertical alignment */
  }

  /* Hide desktop logo */
  .navbar-brand > img {
    display: none;
  }

  /* Show mobile logo */
  .navbar-brand-text img {
    display: block;
    height: 65px;   /* adjust mobile size */
    width: auto;
  }

/* Hamburger button green with gold border */
.navbar-toggler {
  background-color: #10622C;   /* green background */
  border: 1px solid #f4b62d;   /* gold border */
  outline: none;  /* gold outline when focused */
  box-shadow: none;
  margin-left: auto;
  border-radius: 4px;          /* optional: rounded corners */
}

/* Hamburger button green with gold border */
.navbar-toggler {
  background: transparent;   /* remove background */
  border: none;   /* gold border */
  outline: none;
  box-shadow: none;
  margin-left: auto;
  border-radius: 4px;
}

/* Change hamburger bars to yellow */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23f4b62d' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Ensure the outline shows when focused (accessibility) */
.navbar-toggler:focus {
  outline: 2px solid #f4b62d;
  outline-offset: 2px;
}


  /* Keep dropdown menu background green */
  .navbar-collapse.collapse.show {
    background-color: #10622C;
    padding: 10px 0;
  }
}

/* ---------------------------
   MOBILE HERO OFFSET FIX
---------------------------- */
@media (max-width: 768px) {
  .hero-section {
    margin-top: 40px;  /* adjust based on your mobile navbar height */
  }
}
/* Mobile Search Icon */
.mobile-search-btn {
  display: none; /* hidden by default */
  background: transparent;   /* remove background */
  border: none;
  font-size: 1.4rem;
  color: #f4b62d; /* gold to match theme */
  margin-right: 10px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .mobile-search-btn {
    display: inline-block; /* only show on mobile */
  }

  /* Align properly with logo */
  .navbar .container {
    display: flex;
    align-items: center;
  }
}

.mobile-search-btn img.search-icon-img {
  height: 35px;    /* adjust size */
  width: auto;
  display: block;
  background: transparent;  

}

@media (max-width: 768px) {
  .navbar-brand img {
    max-height: 65px;  /* adjust until it sits nicely */
    width: auto;
  }

  .navbar .container {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 80px; /* same as navbar default height */
  }

  /* Center logo perfectly */
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* Keep icons aligned inside navbar */
  .mobile-search-btn,
  .navbar-toggler {
    position: relative;
    z-index: 2;
  }
}

#brandsCarousel .carousel-item {
  transition: transform 3s ease, opacity 3s ease-in-out;
}

#brandsCarousel .brand-card {
  background-color: #eee5d4 !important;
}

#brandsCarousel .carousel-control-prev-icon,
#brandsCarousel .carousel-control-next-icon {
  filter: invert(33%) sepia(92%) saturate(7490%) hue-rotate(353deg) brightness(92%) contrast(92%);
}
/* ==============================
   FOOTER WAVES TOP DECORATION
============================== */
.footer {
  position: relative;
  background-color: #b5ac36; /* solid green base */
  overflow: visible;
} 

.footer-waves {
  position: absolute;
  top: -60px; /* lifts the wave up */
  left: 0;
  width: 100%;
  height: 100px;
  line-height: 0;
  z-index: 4; /* keeps it above the footer background */
}


.footer-waves svg {
  position: absolute;
  width: 100%;
  height: 60%;
  display: block;
}

.wave1 {
  transform: scaleY(-1);
  opacity: 1;
  z-index: 2;
}

/*.wave2 {
  top: 0;
  opacity: 0.8;
  transform: scaleY(-1);
  mix-blend-mode: multiply; /* softly blends gold and green 
}*/



/* Keep actual footer content above waves */
.footer .container {
  position: relative;
  z-index: 2;
}.