/* ==========
  Base
========== */
:root{
  --green:#212F15;
  --green2:#5FA613;
  --light:#f7ffe9;
  --text:#1f2a1f;
  --muted:#5b6b5b;
  --card:#ffffff;
  --shadow: 0 1px 12px rgba(0,0,0);
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.4;
}

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

.container{
  margin-inline:auto;
}
#menuX{
  display: nones;
}

.section-title{
  text-align:center;
  font-size:1.2rem;
  margin: 18px 0 8px;
  font-weight:800;
}

.section-subtitle{
    width: 90%;
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
  margin: 0 auto 14px;
  max-width: 560px;
}

/* ==========
  Header
========== */
.topbar{
  position:sticky;
  top:0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
  }

.menu-btn{
  font-size: 1.3rem;
  border:none;
  background:transparent;
  cursor:pointer;
  margin-left: 5%;
}
.menu-list{
  display: none;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  color: var(--green);
  position: absolute;
  height: 800px;
  top: 100%;
  width: 100%;
  left: 0;
  align-items: center;
  list-style-type: none;
  font-size: 2em;
  row-gap: 5%;
  padding-top: 25%;
  font-weight: bold;
}

.menu-btn ul{
    list-style-type: none;
    width: 80%;
}
.menu-list a{
  text-decoration: none;
  color: inherit;
}
#menuX{
  display: nones;
}
.logo{
  height: 80px; /* Change to resize logo */
  width: auto;
}
.menu{
  height: 60px; /* Change to resize logo */
  width: auto;
}

/* ==========
  Hero
========== */
.hero{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, #f2ffe2 0%, #ffffff 70%);
}

/* Hero background image (optional) */
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity: 0.3; /* Reduce if too strong */
  pointer-events:none;
}

.hero-inner{
  position:relative;
display: flex;
flex-direction: column;
align-items: center;
}

.hero-badge{
  width: 70%;
  margin: 0 auto 12px;
  background: linear-gradient(to left, #212F15, #5FA613);
  color:#fff;
  height: 12em;
  border-radius: 100%;
  padding: 10px 12px;
  text-align:center;
   display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hero-badge h1{ font-size:.85rem; font-weight:700; opacity:.9; }
.hero-badge h2{ font-size:1.05rem; font-weight:900; letter-spacing:.5px; }
.hero-badge p{ font-size:.75rem; opacity:.9; }

.hero-grid{
    width: 90%;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items:center;
}
.list_circle{
    width: 30px;
    height: 30px;
      background: linear-gradient(to left, #212F15, #5FA613);

    margin-right: 5%;
    border-radius: 100%;
}
/* Pills */
.pill{
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  margin: 10px 0;
  box-shadow: 0 6px 15px rgba(0,0,0,.08);
  font-size: .50rem;
  color: black;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.hero-note{
  margin-top: 10px;
  font-size: .88rem;
  color: #365814;
  text-align: center;
}

.hero-note.small{
  font-size:.78rem;
  opacity:.9;
}

/* Product stand */
.product-stand{
  width: min(280px, 80%);
  margin: 0 auto;
  padding: 18px 18px 10px;
  border-radius: 22px;
  display:flex;
  justify-content:center;
  align-items:center;
 }

.hero-product{
  width: 1800px; /* Change to resize the bottle */
  height: auto;
  position: relative;
  top: 35px;
}

.hero-features{
  background: #F4FFBE;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 12px;
  font-size: .85rem;
  color: black;
  font-weight: bold;
  padding-top: 2%;
  padding-bottom: 2%;
  width: 100%;
}
.hero-features span{margin-right: 5%;}
/* ==========
  Benefits
========== */
.benefits{
  padding: 8px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefit-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}

.benefit-col{
  display:grid;
  gap: 12px;
}

.benefit-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
}
.benefit-icon{
  width: 34px;   /* resize icon */
  height: 34px;  /* resize icon */
  object-fit:contain;
}

.benefit-center{
  text-align:center;
}

.center-stage{
  position:relative;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
bottom: 55px;
}

.leaf{
  position:absolute;
  width: 120px; /* resize decorative leaves */
  height:auto;
  opacity:.9;
  pointer-events:none;
}

.leaf-left{ left:-20px; bottom:-10px; transform: rotate(-8deg); }
.leaf-right{ right:-20px; bottom:-8px; transform: rotate(10deg); }

.bottles{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 10px;
  margin-top: 6px;
}

.bottle{
  height: 170px; /* overall bottle height */
  width:auto;
}

.small-bottle{ height: 150px; opacity:.95; }
.big-bottle{ height: 180px; }

.btn-primary{
  display:inline-block;
  margin-top: 12px;
  background: #5FA613;
  color:#fff;
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration:none;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight:700;
  box-shadow: 0 10px 18px rgba(47,107,58,.25);
}

/* ==========
  Store
========== */
.store{
  background: var(--light);
  padding: 18px 0 24px;
  margin-top: 10px;
}
.store-prompt{
    text-align: center;
}
.store-grid{
  margin-top: 14px;
  display:flex;

  gap: 12px;
}

.product-card{
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  text-align:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  width: 50%;
}

.product-card img{
  width: 100%;
  height: 120px; /* set product image height */
  object-fit: contain;
  margin-bottom: 6px;
}

.product-card h4{
  font-size:.95rem;
  margin-top: 4px;
}

.product-card p{
  color: var(--muted);
  font-weight:700;
  margin: 6px 0 8px;
}

.btn-secondary{
  display:inline-block;
  text-decoration:none;
  background: var(--green);
  color:#fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight:700;
  font-size:.85rem;
}


  .benefit-item_benefit-energy{
    justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .92rem;
}
.benefit-item_benefit-immune{
        justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;

}
.benefit-item_benefit-stomach{
        justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;

}
.benefit-item_benefit-heart{
        justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;

}
.benefit-item_benefit-bones{
          justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}
.benefit-item_benefit-sleep{
          justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}
.benefit-item_benefit-love{
          justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}

.benefit-item_benefit-hand{
          justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}




/* ==========
  Testimonial
========== */
.testimonial{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../images/pattern-leaves_mobile.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: auto;
  position:relative;
  overflow:hidden;
  padding: 5%;
  
}

.testi-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items:center;
}

.testi-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.18;
  pointer-events:none;
}

.testi-card{
  position:relative;
  background:#fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  width: min(320px, 100%);
  margin: 0 auto;
}

.testi-img{
  width:100%;
  height: 100%; /* change height */
  object-fit:cover;
  border-radius: 14px;
}

.testi-text{
  position:relative;
  background:#fff;
  border-radius: 18px;
  padding: 14px;
  text-align: center;
}

.testi-text h5{
  font-size: 1.05rem;
  margin-bottom: 6px;
  font-weight:900;
}

.testi-text p{
  color: var(--muted);
  font-size: .92rem;
}

   /* =========================
  FOOTER
========================= */
.footer{
  background: var(--green2);
  color: #fff;
  padding: 26px 0 14px;
  text-align: center;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.footer h3{
  font-size: 1.15rem;
  font-weight: 1000;
}

.footer h4{
  margin-bottom: 6px;
  font-weight: 1000;
}

.footer a{
  display:block;
  margin-top: 6px;
  opacity: .95;
  color: inherit;
  text-decoration: none;
}

.muted{ opacity: .92; }

.footer-bottom{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.18);
  text-align:center;
  opacity: .9;
  font-size: .95rem;
}


/* ==========
  Tablet / Desktop layout
========== */
@media (min-width: 768px){
    .hero-note{
        text-align: left;
    }
  .hero-grid{
    grid-template-columns: 1.15fr .85fr;
    gap: 22px;
  }

  .hero-badge{
    width: 420px;
  }

  .benefit-wrap{
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items:start;
  }

  .store-grid{
    grid-template-columns: repeat(4, 1fr);
  }

  .testi-inner{
    grid-template-columns: 1fr 1.2fr;
  }

  .testi-card{
    margin: 0;
  }

  .benefit-item_benefit-energy{
    justify-content: end;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
}
.benefit-item_benefit-immune{
        justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;

}
.benefit-item_benefit-stomach{
        justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;

}
.benefit-item_benefit-heart{
        justify-content: end;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;

}
.benefit-item_benefit-bones{
          justify-content: start;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}
.benefit-item_benefit-sleep{
          justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}
.benefit-item_benefit-love{
          justify-content: center;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}

.benefit-item_benefit-hand{
          justify-content: start;
      display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background:#fff;
  border-radius: 14px;
  font-size: .92rem;
 
}
.testi-text{
  position:relative;
  background:#fff;
  border-radius: 18px;
  padding: 14px;
  text-align: right;
}
.testimonial{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../images/pattern-leaves.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: auto;
  position:relative;
  overflow:hidden;
  padding: 5%;
  
}


  .footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items:start;
  }
.menu-btn{
display: none;
}
.menu-list{
  display: flex;
  flex-direction: row;
  background: none;
  color: var(--green);
  position: static;
  height: 0px;
  top: 100%;
  width: 70%;
  left: 0;
  align-items: center;
  list-style-type: none;
  font-size: 1em;
  row-gap: 0;
  column-gap: 15%;
  padding-top: 0;
  font-weight: bold;
}
.menu-list li{
  cursor: pointer;
}
}