/* Design System Variables */
:root {
  --primary-green: #0b6623;
  --dark-green: #063d14;
  --accent-gold: #ffd700;
  --gold-gradient: linear-gradient(135deg, #ffd700 0%, #fdb931 100%);
  --bg-light: #f9f9f9;
  --bg-dark: #121212;
  --text-dark: #222222;
  --text-light: #ffffff;
  --text-muted: #666666;
  --font-heading: "Roboto", sans-serif;
  --font-body: "Roboto", sans-serif;
  --transition-speed: 0.4s;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-speed);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--primary-green);
  line-height: 1.2;
}

.section-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.center-text {
  text-align: center;
  width: 100%;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--transition-speed);
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary {
  background-color: var(--primary-green);
  color: var(--text-light);
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--text-dark);
  color: var(--text-dark);
}

.btn-gold {
  background: var(--gold-gradient);
  color: var(--dark-green);
}

/* Age Verification Modal Removed */

/* Navigation */
.navbar {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  height: 130px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo img {
  display: block;
}

.nav-icon {
  height: 50px;
  width: auto;
}

.nav-text {
  height: 50px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-links a {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-links a:hover {
  color: var(--primary-green);
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: var(--primary-green);
}

/* Hero Section */
.hero {
  min-height: 100vh;
  padding-top: 130px; /* Account for fixed navbar */
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)),
    url("assets/hero.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax effect */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-dark); /* Changed to dark text */
  position: relative;
}

.hero-content {
  max-width: 800px;
}

.hero-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 1.2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--accent-black);
}

.hero-content h1 {
  font-size: 4.5rem;
  margin-bottom: 20px;
  color: var(--primary-green); /* Changed to primary green */
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 40px;
  font-weight: 300;
  opacity: 0.9;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--primary-green); /* Changed to primary green */
  animation: bounce 2s infinite;
}

.scroll-indicator span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* Sections General */
section {
  padding: 120px 0;
}

/* Legacy Section */
.legacy-section {
  background-color: var(--bg-light);
}

.split-layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.split-text {
  flex: 1;
}

.lead-text {
  font-size: 1.5rem;
  color: var(--primary-green);
  font-family: var(--font-heading);
  margin-bottom: 20px;
  font-style: italic;
}

.split-text p {
  margin-bottom: 20px;
  color: var(--text-muted);
}

.split-image {
  flex: 1;
  position: relative;
}

.split-image img {
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

/* Features Section */
.features-section {
  background-color: var(--bg-light);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.feature-card {
  text-align: center;
  padding: 40px;
  background: #fff;
  border-radius: 15px;
  transition: background-color 0.5s ease, transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: var(--shadow-soft);
}

.feature-card:hover {
  transform: translateY(-10px);
  background-color: #f4f9f5; /* Very slight green tint */
  box-shadow: var(--shadow-hover);
}

.icon-box {
  width: 80px;
  height: 80px;
  background-color: var(--primary-green);
  color: var(--accent-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 20px;
}

.feature-card h3 {
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.feature-card p {
  color: var(--text-muted);
}

/* Product Showcase (Feature Rows) */
.products-section {
  background-color: var(--bg-light);
}

.product-row {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
}

.product-row:last-child {
  margin-bottom: 0;
}

.product-row.reverse {
  flex-direction: row-reverse;
}

.product-visual {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blob-bg {
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: #d4eadd;
  border-radius: 50%;
  z-index: 0;
  filter: blur(40px);
  opacity: 0.6;
}

.blob-bg.gold {
  background-color: #fceeb5;
}

.blob-bg.blue {
  background-color: #add8e6;
}

.product-visual img {
  position: relative;
  z-index: 1;
  max-height: 450px;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
  transition: transform 0.5s ease;
}

.product-visual:hover img {
  transform: scale(1.05) rotate(2deg);
}

.product-details {
  flex: 1;
}

.product-tag {
  display: inline-block;
  background-color: var(--primary-green);
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.product-tag.gold {
  background-color: var(--accent-gold);
  color: var(--dark-green);
}

.product-details h3 {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.product-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.product-specs {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  font-weight: 500;
  color: var(--text-dark);
}

.product-specs i {
  color: var(--primary-green);
  margin-right: 8px;
}

.ingredients-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid var(--accent-gold);
  box-shadow: var(--shadow-soft);
}

.ingredients-box h4 {
  font-size: 1rem;
  margin-bottom: 5px;
  color: var(--text-dark);
}

.ingredients-box p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* How to Use Section */
.how-to-use-section {
  background-color: var(--bg-light); /* Changed from dark green to light */
  color: var(--text-dark);
  text-align: center;
}

.how-to-use-section .section-title {
  color: var(--primary-green); /* Changed to primary green */
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 50px;
  margin-top: 60px;
}

.step {
  position: relative;
  background: #fff;
  padding: 40px 20px;
  border-radius: 15px;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.5s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.step:hover {
  transform: translateY(-10px);
  background-color: #f4f9f5;
  box-shadow: var(--shadow-hover);
}

.step-number {
  font-size: 4rem;
  font-family: var(--font-heading);
  color: rgba(11, 102, 35, 0.1); /* Changed to faint green */
  position: absolute;
  top: 10px;
  right: 20px;
  left: auto;
  transform: none;
  z-index: 0;
}

.step-icon {
  height: 80px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.step h3 {
  color: var(--primary-green);
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.step p {
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* Reviews Section */
.reviews-section {
  background-color: #fff;
  padding: 100px 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.review-card {
  background-color: var(--bg-light);
  padding: 30px;
  border-radius: 15px;
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform var(--transition-speed);
}

.review-card:hover {
  transform: translateY(-5px);
}

.review-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 3px solid var(--accent-gold);
}

.stars {
  color: var(--accent-gold);
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.review-text {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-size: 1rem;
}

.reviewer-name {
  font-weight: 700;
  color: var(--primary-green);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

/* Footer */
.footer {
  background-color: #050505;
  color: #fff;
  padding: 80px 0 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo {
  height: 150px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.footer-contact h3 {
  color: var(--accent-gold);
  margin-bottom: 20px;
}

.footer-contact p {
  margin-bottom: 10px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 10px;
}

.health-warning-banner {
  background-color: #fff;
  color: #000;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  border: 5px solid #000;
  margin-bottom: 40px;
}

.copyright {
  text-align: center;
  color: #555;
  font-size: 0.9rem;
  border-top: 1px solid #222;
  padding-top: 20px;
}

/* Floating Widget */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.whatsapp-float:hover {
  transform: scale(1.1) rotate(10deg);
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Layout */
/* Hero Layout */
.hero-layout {
  display: flex;
  align-items: center;
  justify-content: center; /* Center text */
  position: relative; /* For absolute images */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-text {
  position: relative;
  z-index: 2;
  max-width: 800px; /* Optimal reading width */
  width: 100%;
}

.hero-product-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 280px; /* Fixed width */
  animation: float-absolute 6s ease-in-out infinite;
  z-index: 1;
}

.hero-product-img.left {
  left: 20px; /* Spacing from edge */
}

.hero-product-img.right {
  right: 20px; /* Spacing from edge */
  animation-delay: 3s;
}

.hero-product-img img {
  width: 100%;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  transform: rotate(-5deg);
}

.hero-product-img.right img {
  transform: rotate(5deg);
}

@keyframes float-absolute {
  0%,
  100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% - 15px));
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-links {
    position: fixed;
    left: -100%;
    top: 130px;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    padding: 40px 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

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

  /* Hero Mobile */
  .hero-layout {
    flex-direction: column;
    gap: 30px;
  }

  .hero-product-img {
    display: block;
    flex: 0 0 140px; /* Smaller on mobile */
    width: 140px;
    margin: 0 auto; /* Center images on mobile */
  }
  
  /* On mobile, we might want to change order or keep them stacked.
     Let's keep the current HTML order: Img(Dilpasand) -> Text -> Img(Boss)
     This will stack them vertically.
  */
  
  .hero-text {
    flex: 1;
    max-width: 100%;
    order: -1; /* Put text on top in mobile? Or keep in middle? 
                  User said "line should be between the small pictures".
                  So Img - Text - Img is correct for desktop.
                  For mobile, usually Text first is better, but let's stick to the flow or adjust.
                  Let's try Text first, then images side by side?
                  Or just stack them: Text -> Img -> Img.
               */
     order: 0;
  }
  
  /* Let's make images side by side below text on mobile? */
  .hero-layout {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .hero-text {
    width: 100%;
    order: 1;
    margin-bottom: 20px;
  }
  
  .hero-product-img.left {
    order: 2;
  }
  
  .hero-product-img.right {
    order: 3;
  }
  
  /* Actually, the user's previous request was "mobile view the footer logo...".
     They didn't complain about mobile hero. 
     Let's just ensure mobile doesn't break with the new large sizes.
     The previous mobile styles were:
     .hero-layout { flex-direction: row; justify-content: space-between; }
     .hero-product-img { flex: 0 0 100px; }
     
     Let's revert to a safe mobile layout: Column (Text) then Row (Images) or just Column.
     Let's stick to what we had but ensure sizes are appropriate.
  */
  
  .hero-layout {
    flex-direction: column;
    gap: 20px;
  }
  
  .hero-product-img {
    flex: 0 0 150px;
    width: 150px;
  }
  
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .split-layout {
    flex-direction: column;
  }

  .product-row,
  .product-row.reverse {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .product-specs {
    justify-content: center;
  }

  .ingredients-box {
    text-align: left;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    align-items: center; /* Center align items */
  }

  .footer-brand, .footer-contact {
    width: 100%;
    align-items: center; /* Ensure internal flex items are centered */
  }

  .footer-contact p {
    justify-content: center;
  }
}

/* Step Icons */
.step-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}