*{margin:0; padding:0; box-sizing:border-box; font-family:"Segoe UI",sans-serif;}
body{background:#f6fdf9; color:#244b38;}

html {
  scroll-behavior: smooth; /* smooth scrolling for nav links */
}

.navbar{background:#e8f8ee; display:flex; justify-content:space-between; align-items:center; padding:12px 30px; position: sticky;   /* Added for sticky behavior */
  top: 0;             /* Stick to top */
  z-index: 1000;   }
.logo-area{display:flex; align-items:center; gap:12px;}
.logo-area img{width:48px; height:48px; border-radius:50%;}
.logo-area small{display:block; font-size:12px; color:#567;}
nav a{margin:0 10px; color:#244b38; text-decoration:none; font-weight:500; transition:.3s;}
nav a:hover{color:#1b3728;}


/* HERO */
.hero-section{
  height:90vh;
  position:relative;
  display:flex;
  align-items:center;
  animation:zoom 22s infinite alternate;
  justify-content:center;
  text-align:center;
   background:
    linear-gradient(
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.25)
    ),
    url("../images/hero.jpg") center/cover no-repeat;
}


.hero-content{position:relative; z-index:2;}
.hero-content h1{font-size:48px; font-weight:700; margin-bottom:12px;}
.hero-content p{font-size:18px; margin-bottom:20px; color:#2f6b55;}
.hero-btn{padding:12px 30px; background:#244b38; color:#fff; border-radius:30px; text-decoration:none; font-weight:600; transition:.3s;}
.hero-btn:hover{background:#1b3728;}
@keyframes zoom{0%{background-size:100% auto;}100%{background-size:112% auto;}}

/* SECTION HEADINGS */
section{padding:60px 8%;}
section h2{text-align:center; color:#244b38; font-size:32px; font-weight:700; margin:30px 0;}
.section-sub,.founder-sub,.subtitle{text-align:center; color:#4a6b58; margin-bottom:30px; font-size:15px; font-weight:500;}

/* ABOUT */
.about p{max-width:680px; margin:0 auto; font-size:17px; line-height:1.6; color:#3a5c4a; text-align:center;}

/* PRODUCTS */
.product-container{display:flex; gap:20px; flex-wrap:nowrap; justify-content:center; overflow-x:auto; padding-bottom:10px;}
.product-container::-webkit-scrollbar{height:8px;}
.product-container::-webkit-scrollbar-thumb{background:#244b38; border-radius:4px;}
.product-card{min-width:250px; max-width:250px; background:#fff; border-radius:18px; padding:18px; box-shadow:0 8px 20px rgba(0,0,0,.06); display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s;}
.product-card:hover{transform:translateY(-6px); box-shadow:0 15px 35px rgba(0,0,0,.1);}
.product-card img{width:100%; height:180px; object-fit:cover; border-radius:14px; margin-bottom:14px;}
.product-card h3{font-size:18px; color:#14532d; margin-bottom:6px;}
.tagline{font-size:13px; font-weight:600; color:#22c55e; margin-bottom:8px;}
.product-card ul{list-style:none; font-size:13px; color:#4b5563; margin-bottom:12px; padding-left:0;}
.price-box{background:#ecfdf5; border-radius:12px; padding:10px; margin-top:auto;}
.price-box p{font-size:14px; font-weight:600; color:#065f46; margin:4px 0;}

/* FOUNDERS */
.founder-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:20px;}
.founder-card{background:#fffdf8; border-radius:22px; padding:25px 18px; text-align:center; box-shadow:0 10px 20px rgba(0,0,0,.08); width:300px; transition:transform .3s, box-shadow .3s;}
.founder-card:hover{transform:translateY(-4px); box-shadow:0 15px 30px rgba(0,0,0,.12);}
.founder-card img{width:180px; height:250px; object-fit:cover; border-radius:16px; margin-bottom:12px;}
.founder-card h4{color:#1b3728;}
.founder-card span{color:#4a6b58; display:block; margin-bottom:10px; font-size:14px;}
.founder-card p,.founder-card em{color:#3a5c4a; line-height:1.5; font-size:14px;}
.founder-card em{font-style:italic; display:block; margin-top:10px; font-size:13px;}

/* CONTACT */
.contact{text-align:center;}
.contact i{font-size:26px; color:#e1306c;}

/* RESPONSIVE */
@media(max-width:1024px){.product-container{flex-wrap:wrap;}}
@media(max-width:768px){
  .hero-content h1{font-size:32px;}
  .hero-content p{font-size:16px;}
  .product-card img{height:160px;}
  .founder-card img{height:220px; width:160px;}
}
/* REVIEWS HERO SECTION */
.reviews-hero{
  max-width:800px;
  margin:40px auto 60px;
  text-align:center;
  padding:0 20px;
}
.reviews-hero h1{
  font-size:36px;
  color:#14532d;
  margin-bottom:10px;
}
.reviews-hero h3{
  font-size:20px;
  color:#2f6b55;
  margin-bottom:20px;
  font-weight:500;
}
.reviews-hero p{
  font-size:16px;
  color:#3a5c4a;
  line-height:1.7;
  margin-bottom:16px;
}

/* REVIEW FORM SECTION */
.reviews-form-section{
  max-width:500px;
  margin:0 auto 60px;
  text-align:center;
  padding:0 20px;
}
.reviews-form-section h2{
  font-size:28px;
  color:#14532d;
  margin-bottom:20px;
}
.reviews-form-section form{
  display:grid;
  gap:12px;
}
.reviews-form-section input,
.reviews-form-section textarea,
.reviews-form-section select{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #c7d7c8;
  font-size:14px;
  width:100%;
  resize:none;
}
.reviews-form-section button{
  padding:12px 20px;
  background:#244b38;
  color:#fff;
  border:none;
  border-radius:25px;
  cursor:pointer;
  font-weight:600;
  transition:0.3s;
}
.reviews-form-section button:hover{
  background:#1b3728;
}

/* LIST OF REVIEWS - PREMIUM STYLE */
.reviews-list{
  max-width:700px;
  margin:0 auto 80px;
  padding:0 20px;
}
.reviews-list h2{
  text-align:center;
  color:#14532d;
  font-size:28px;
  margin-bottom:20px;
}
#reviewList div {
  background: #f0fff4; /* soft green background */
  padding: 20px 24px;
  border-radius: 16px;
  margin-top: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
#reviewList div:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
#reviewList div strong {
  font-size: 16px;
  color: #14532d;
}
#reviewList div span {
  color: #22c55e; /* green stars */
  font-size: 16px;
  margin-left: 10px;
}
#reviewList div p {
  color: #3a5c4a;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 8px;
}
/* Quotation style */
#reviewList div::before {
  content: "“";
  font-size: 28px;
  color: #22c55e;
  vertical-align: top;
  margin-right: 4px;
}
#reviewList div::after {
  content: "”";
  font-size: 28px;
  color: #22c55e;
  vertical-align: bottom;
  margin-left: 4px;
}
body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: #f6fdf9;
  color: #244b38;
}

/* HEADER */
.blog-header {
  text-align: center;
  padding: 40px 20px 20px;
}

.blog-header h1 {
  font-size: 34px;
  margin-bottom: 6px;
}

.blog-header p {
  color: #4a6b58;
}

/* BLOG GRID */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px 8%;
}

.blog-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.blog-card:hover {
  transform: translateY(-6px);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-content {
  padding: 18px;
}

.blog-content h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.blog-preview,
.blog-full {
  font-size: 14px;
  line-height: 1.6;
  color: #3a5c4a;
}

.blog-full {
  display: none;
  margin-top: 8px;
}

.read-more {
  margin-top: 10px;
  background: none;
  border: none;
  color: #14532d;
  font-weight: 600;
  cursor: pointer;
}

/* ===== MOBILE NAVBAR FIX ===== */

.menu-toggle {
  display: none;
  font-size: 26px;
  cursor: pointer;
  color: #244b38;
}

/* MOBILE VIEW */
@media (max-width: 768px) {

  .navbar {
    flex-wrap: wrap;
  }

  nav {
    width: 100%;
    display: none;
    flex-direction: column;
    background: #e8f8ee;
    padding: 10px 0;
  }

  nav a {
    padding: 10px 0;
    text-align: center;
    margin: 0;
    border-top: 1px solid rgba(0,0,0,0.05);
  }

  .menu-toggle {
    display: block;
  }

  nav.active {
    display: flex;
  }
}
/* =========================
   MOBILE NAVBAR ONLY
   ========================= */

/* Hide hamburger on laptop */
.hamburger {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

/* Mobile view */
@media (max-width: 768px) {

  .hamburger {
    display: block; /* SHOW only on mobile */
  }

  .navbar nav {
    display: none; /* hide menu */
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #f6f8f4;
    flex-direction: column;
    text-align: center;
    padding: 15px 0;
  }

  .navbar nav.active {
    display: flex;
  }

  .navbar nav a {
    padding: 12px 0;
    display: block;
  }
}
/* HERO MOBILE OPTIMIZATION */
@media (max-width: 768px) {

  .hero-section {
    height: 65vh;
    background:
      linear-gradient(
        rgba(0,0,0,0.12),
        rgba(0,0,0,0.12)
      ),
      url("../images/hero.jpg") center/contain no-repeat;

    background-color: #e8f8ee; /* herbal theme */
    animation: mobileBreath 14s ease-in-out infinite;
  }

}

/* 🌿 MOBILE-SAFE ANIMATION */
@keyframes mobileBreath {
  0% {
    background-size: 100%;
  }
  50% {
    background-size: 104%;
  }
  100% {
    background-size: 100%;
  }
}


@media (max-width: 768px) {

  .hero-content h1 {
    font-size: 30px;
    color: #ffffff; /* pure white for clarity */
    line-height: 1.3;
  }

  .hero-content p {
    font-size: 15px;
    color: #e5f5ec; /* soft light green */
  }

}
/* FLOATING INSTAGRAM CHAT ICON */
.floating-instagram {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  z-index: 9999;
  animation: floatUpDown 3s ease-in-out infinite;
  text-decoration: none;
}

.floating-instagram:hover {
  transform: scale(1.1);
}

/* FLOATING ANIMATION */
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}