@charset "utf-8";
/* =====================================================================
   Your Boosting Wellness - sitewide redesign
   Loaded LAST from common-header.php so it overrides the older sheets.
   Palette is taken from the logo: deep forest green, leaf green, lime.
   Fonts: Fraunces (headings) + Plus Jakarta Sans (body / UI).
   ===================================================================== */

:root {
  --forest: #0a4a20;
  --forest-deep: #062e14;
  --forest-2: #0d6b2b;
  --green: #128a32;
  --leaf: #43a832;
  --lime: #b6d82c;
  --lime-soft: #e6f2b8;
  --cream: #f6faee;
  --mint: #eaf5df;
  --ink: #12301b;
  --muted: #5a6e5f;
  --line: #d9e8c9;

  /* re-map the old variables so every old rule picks up the new palette */
  --primary: #128a32;
  --primary-dark: #0d6b2b;
  --accent: #b6d82c;
  --accent-dark: #8fb01b;
  --dark: #0a4a20;
  --dark-2: #0d6b2b;
  --text: #12301b;
  --border: #d9e8c9;
  --bg-soft: #f6faee;
  --bg-tint: #eaf5df;
  --shadow: 0 20px 50px rgba(10, 74, 32, .13);
  --radius: 22px;

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;

  --grad: linear-gradient(115deg, #0b6b28 0%, #16913a 45%, #6fbf2b 100%);
  --btn-grad: linear-gradient(100deg, #0a5a24 0%, #14893a 28%, #4fae32 52%, #a6d62f 78%, #c8e43c 100%);
}

/* ---------- base typography ---------- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: #fff;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  text-transform: none;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--forest);
}
p { color: inherit; }
::selection { background: var(--lime); color: var(--forest-deep); }

.eyebrow,
.section-title .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--lime));
}

/* =====================================================================
   BUTTONS  (leaf-shaped, gradient, animated on hover)
   ===================================================================== */
.commonBtn,
.click-btn2,
a.header-btn,
.submit-btn,
.contact_send_btn,
.continue-brwbtn,
.proceed-chkbtn,
.continue-shpbtn,
#browse,
.billingtogglbtn,
.paymybtn,
input.submit,
.order-btn,
.continue-btn,
.yes-btn,
ul.nav-rgt li a {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: none;
  color: #fff;
  background: var(--btn-grad);
  background-size: 220% 100%;
  background-position: 0 0;
  border: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 22px 6px 22px 6px;
  box-shadow: 0 12px 26px rgba(18, 138, 50, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-position .55s ease, transform .3s ease, box-shadow .3s ease,
              border-radius .4s ease, color .3s ease;
}
.commonBtn::after,
.click-btn2::after,
.submit-btn::after,
.contact_send_btn::after,
.continue-brwbtn::after,
.proceed-chkbtn::after,
.continue-shpbtn::after,
.billingtogglbtn::after,
.paymybtn::after,
ul.nav-rgt li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-22deg);
  pointer-events: none;
}
.commonBtn:hover,
.click-btn2:hover,
a.header-btn:hover,
.submit-btn:hover,
.contact_send_btn:hover,
.continue-brwbtn:hover,
.proceed-chkbtn:hover,
.continue-shpbtn:hover,
#browse:hover,
.billingtogglbtn:hover,
.paymybtn:hover,
input.submit:hover,
.order-btn:hover,
.continue-btn:hover,
.yes-btn:hover,
ul.nav-rgt li a:hover {
  background: var(--btn-grad);
  background-size: 220% 100%;
  background-position: 100% 0;
  color: var(--forest-deep);
  text-shadow: none;
  transform: translateY(-4px);
  border-radius: 6px 22px 6px 22px;
  box-shadow: 0 18px 34px rgba(143, 176, 27, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.commonBtn:hover::after,
.click-btn2:hover::after,
.submit-btn:hover::after,
.contact_send_btn:hover::after,
.continue-brwbtn:hover::after,
.proceed-chkbtn:hover::after,
.continue-shpbtn:hover::after,
.billingtogglbtn:hover::after,
.paymybtn:hover::after,
ul.nav-rgt li a:hover::after {
  left: 130%;
  transition: left .75s ease;
}
.commonBtn:active,
.click-btn2:active,
.submit-btn:active,
ul.nav-rgt li a:active { transform: translateY(-1px) scale(.98); }

.commonBtn { border: 0; }

/* outline variant (used on dark sections) */
.btn-outline,
.btn-outline:hover { text-shadow: none; }
.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: none;
}
.btn-outline:hover {
  background: linear-gradient(100deg, #b6d82c, #d6ec55);
  border-color: transparent;
  color: var(--forest-deep);
  box-shadow: 0 18px 34px rgba(182, 216, 44, .4);
}

/* small pill-ish variant for product cards */
.click-btn2 {
  max-width: 84%;
  height: 50px;
  line-height: 50px;
  font-size: 14.5px;
  margin-top: 22px;
}

/* cookie popup */
.pop-up-bg-in { background: var(--forest-deep); border-top: 3px solid var(--lime); }
.pop-up-left-txt span { font-family: var(--font-head); font-weight: 700; }
.yes-btn, .no-btn { height: 42px; border-radius: 16px 5px 16px 5px; font-size: 13px; letter-spacing: .5px; }
.no-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: none;
  color: #fff;
  text-shadow: none;
}
.no-btn:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 5px 16px 5px 16px;
  box-shadow: none;
}

/* =====================================================================
   HEADER
   ===================================================================== */
.header {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(10, 74, 32, .07);
}
ul.mainMenu li { padding: 0 20px; }
ul.mainMenu li a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .3px;
  color: var(--ink);
  position: relative;
  padding-bottom: 6px;
  transition: color .25s ease;
}
ul.mainMenu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
ul.mainMenu li a:hover,
ul.mainMenu li a.active { color: var(--green); }
ul.mainMenu li a:hover::after,
ul.mainMenu li a.active::after { transform: scaleX(1); }

ul.nav-rgt li a {
  padding: 9px 26px 9px 22px;
  font-size: 14.5px;
  line-height: 20px;
  color: #fff;
}
ul.nav-rgt li a::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin: -3px 9px 0 0;
  vertical-align: middle;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  transition: filter .3s ease;
}
ul.nav-rgt li a:hover::before { filter: brightness(0) saturate(100%) invert(15%) sepia(60%) saturate(1200%) hue-rotate(80deg); }

.bar1, .bar2, .bar3 { background-color: var(--green); }
.mobilemenu li a { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.mobilemenu li a:hover { color: var(--green); }

/* =====================================================================
   HERO  (all text on the LEFT)
   ===================================================================== */
.hero {
  background: var(--forest-deep);
  padding: 150px 0 210px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
/* banner image is shown whole (natural ratio), pinned right; the space above/below it is filled with its own edge colours */
.hero {
  min-height: 0;
  background: linear-gradient(90deg, #e1e9c5 0%, #cfe1aa 25%, #d5e8c6 50%, #a7c866 75%, #83a853 100%);
  padding-bottom: 230px;
}
.hero-bg {
  inset: auto 0 100px 0;
  width: 100%; height: auto; aspect-ratio: 2048 / 768;
  object-fit: contain; object-position: right center;
  filter: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 90%, transparent 100%);
}
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(4, 38, 15, .97) 0%, rgba(8, 62, 26, .9) 30%, rgba(10, 74, 32, .45) 44%, rgba(10, 74, 32, 0) 54%),
    radial-gradient(620px 420px at 8% 92%, rgba(182, 216, 44, .3), transparent 70%);
}
.hero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -170px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(182, 216, 44, .3);
  box-shadow: inset 0 0 0 60px rgba(182, 216, 44, .04);
  z-index: 1;
  pointer-events: none;
  mask-image: none;
  -webkit-mask-image: none;
  background: none;
}
.hero-content { max-width: 1170px; text-align: left; }
.hero-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--lime);
  background: rgba(182, 216, 44, .12);
  border: 1px solid rgba(182, 216, 44, .45);
  padding: 9px 20px;
  margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: 68px;
  line-height: 1.04;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.025em;
  color: #fff;
  max-width: 620px;
  margin-bottom: 26px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.hero h1 span {
  font-style: italic;
  background: linear-gradient(95deg, #d3ec4a 0%, #8fd12e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  display: block;
  font-size: 18px;
  line-height: 1.75;
  color: #d5e6cb;
  max-width: 590px;
  margin-bottom: 4px;
  text-align: left;
}
.hero-cta { justify-content: flex-start; margin-bottom: 54px; }
.hero-cta .commonBtn { margin-top: 34px; }
.hero-stats {
  justify-content: flex-start;
  gap: 16px;
  padding-top: 0;
  border-top: 0;
}
.hero-stats > div {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px 6px 20px 6px;
  padding: 16px 24px;
  min-width: 190px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.hero-stats > div:hover { transform: translateY(-5px); border-color: var(--lime); background: rgba(255, 255, 255, .13); }
.hero-stats b { font-family: var(--font-head); font-size: 23px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.hero-stats span { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--lime); margin-top: 4px; }

/* =====================================================================
   FEATURE STRIP
   ===================================================================== */
.features {
  margin: -92px auto 20px;
  max-width: 1120px;
  padding: 22px;
  gap: 18px;
  border-radius: 34px 8px 34px 8px;
  box-shadow: 0 28px 70px rgba(6, 46, 20, .18);
  border: 1px solid var(--line);
}
.feature {
  border-right: 0;
  background: var(--cream);
  border-radius: 24px 6px 24px 6px;
  padding: 26px 14px 22px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.feature:hover {
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 20px 40px rgba(10, 74, 32, .14);
}
.feature-icon {
  width: 66px;
  height: 66px;
  max-width: none;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad);
  border-radius: 22px 6px 22px 6px;
  box-shadow: 0 10px 22px rgba(18, 138, 50, .32);
  transition: transform .4s ease, border-radius .4s ease;
}
.feature-icon svg { width: 30px; height: 30px; }
.feature:hover .feature-icon { transform: rotate(-6deg) scale(1.08); border-radius: 6px 22px 6px 22px; }
.feature h4 {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--forest);
  letter-spacing: 0;
}

/* =====================================================================
   WELCOME / ABOUT
   ===================================================================== */
.welcome {
  background: var(--cream);
  color: var(--ink);
  padding: 120px 0 110px;
  position: relative;
  overflow: hidden;
}
.welcome::before {
  content: "";
  position: absolute;
  right: -180px;
  top: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 216, 44, .28), transparent 65%);
}
.welcome-grid {
  width: 1170px;
  max-width: 92%;
  margin: 0 auto;
  grid-template-columns: .95fr 1.05fr;
  gap: 90px;
  align-items: center;
  position: relative;
}
.welcome-image { position: relative; }
.welcome-image::before {
  content: "";
  position: absolute;
  inset: 28px -28px -28px 28px;
  border-radius: 46px 170px 46px 46px;
  background: var(--grad);
  z-index: 0;
}
.welcome-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 580px;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
  border-radius: 46px 170px 46px 46px;
  box-shadow: 0 30px 60px rgba(6, 46, 20, .25);
}
.welcome-badge {
  position: absolute;
  z-index: 2;
  left: -26px;
  bottom: 38px;
  background: #fff;
  padding: 16px 24px;
  border-radius: 20px 6px 20px 6px;
  border-left: 6px solid var(--lime);
  box-shadow: 0 20px 44px rgba(6, 46, 20, .22);
  animation: ybwFloat 5s ease-in-out infinite;
}
.welcome-badge b { display: block; font-family: var(--font-head); font-size: 24px; color: var(--forest); line-height: 1.1; }
.welcome-badge span { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .5px; }
@keyframes ybwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.welcome-content { padding: 0; }
.welcome-content h2 {
  font-size: 50px;
  line-height: 1.08;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 24px;
}
.welcome-content p { color: var(--muted); font-size: 16.5px; margin-bottom: 16px; }
.welcome-columns { gap: 18px; margin: 30px 0 4px; }
.wcol {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px 6px 22px 6px;
  padding: 22px 22px 20px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.wcol:hover { transform: translateY(-6px); border-color: var(--leaf); box-shadow: 0 18px 36px rgba(10, 74, 32, .12); }
.wcol h4 { color: var(--green); font-size: 19px; padding: 0 0 0 26px; text-transform: none; }
.wcol h4:before {
  top: 8px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--lime), var(--leaf));
  transform: none;
  border-radius: 60% 0 60% 0;
}
.wcol p { font-size: 15px; color: var(--muted); margin: 0; }

/* =====================================================================
   SUPPORT YOUR ACTIVE LIFESTYLE  (deep green)
   ===================================================================== */
.gear {
  background: var(--forest) url('../images/gear.jpg') center/cover no-repeat;
  padding: 120px 0;
  overflow: hidden;
}
.gear::before { background: linear-gradient(140deg, rgba(4, 40, 16, .96) 0%, rgba(10, 74, 32, .93) 55%, rgba(13, 107, 43, .9) 100%); }
.gear::after {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -170px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 1px solid rgba(182, 216, 44, .28);
  box-shadow: inset 0 0 0 70px rgba(182, 216, 44, .035);
  pointer-events: none;
}
.gear .section-title { margin-bottom: 56px; }
.gear .section-title h2 { color: #fff; font-size: 48px; }
.gear .eyebrow { color: var(--lime); }
.gear-grid { grid-template-columns: .9fr 2fr; gap: 28px; }
.gear-featured {
  background: linear-gradient(165deg, #cbe63e 0%, #72c22d 42%, #128a32 100%);
  color: var(--forest-deep);
  border-radius: 42px 8px 42px 8px;
  padding: 46px 26px 40px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .32);
  transition: transform .4s ease;
}
.gear-featured:hover { transform: translateY(-6px); }
.gear-featured h3 { font-size: 27px; line-height: 1.2; letter-spacing: -.01em; color: var(--forest-deep); text-transform: none; }
.gear-featured .btn-outline {
  background: var(--forest);
  color: #fff;
  border: 0;
  box-shadow: 0 14px 28px rgba(6, 46, 20, .35);
}
.gear-featured .btn-outline:hover { background: linear-gradient(100deg, #fff, #eaf5df); color: var(--forest-deep); }
.gear-cards { gap: 20px; }
.gear-card {
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 32px 8px 32px 8px;
  padding: 34px 30px 32px;
  text-align: left;
  color: #d3e6c8;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.gear-card:hover {
  transform: translateY(-9px);
  background: rgba(255, 255, 255, .13);
  border-color: var(--lime);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .3);
}
.gear-img {
  width: 60px;
  height: 60px;
  max-width: none;
  margin: 0 0 20px;
  display: grid;
  place-items: center;
  color: var(--forest-deep);
  background: linear-gradient(135deg, var(--lime), var(--leaf));
  border-radius: 20px 6px 20px 6px;
  transition: transform .4s ease, border-radius .4s ease;
}
.gear-img svg { width: 28px; height: 28px; }
.gear-card:hover .gear-img { transform: rotate(-7deg) scale(1.1); border-radius: 6px 20px 6px 20px; }
.gear-card h4 { font-size: 23px; color: #fff; margin-bottom: 10px; text-transform: none; }
.gear-card p { font-size: 15.5px; line-height: 1.7; color: #cfe2c5; }

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.prod-section { background: #fff; padding: 120px 0 110px; }
.prod-box .eyebrow { justify-content: center; }
.bdhding2 {
  font-family: var(--font-head);
  font-size: 50px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: none;
  color: var(--forest);
}
.sec-para {
  display: block;
  width: auto;
  max-width: 660px;
  margin: 16px auto 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  text-align: center;
}
.shop-box { margin-top: 58px; column-gap: 22px; row-gap: 28px; justify-content: center; }
.shop-colm-list {
  width: calc(25% - 17px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 34px 8px 34px 8px;
  padding: 0 0 30px;
  box-shadow: 0 10px 30px rgba(10, 74, 32, .06);
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.shop-colm-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  z-index: 2;
  background: linear-gradient(90deg, var(--forest-2), var(--leaf), var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.shop-colm-list:hover {
  transform: translateY(-12px);
  border-color: var(--leaf);
  box-shadow: 0 30px 60px rgba(10, 74, 32, .18);
}
.shop-colm-list:hover::before { transform: scaleX(1); }
.shop-prod {
  padding: 30px 14px 20px;
  margin-bottom: 20px;
  background: radial-gradient(circle at 50% 38%, #fff 0%, var(--mint) 100%);
}
.shop-colm-list { display: flex; flex-direction: column; align-items: center; }
.shop-colm-list .shop-prod, .shop-colm-list .sp-bx-pr, .shop-colm-list .sp-bx-pr2 { width: 100%; float: none; }
.shop-colm-list .click-btn2 { margin-top: auto; width: 84%; }
.shop-colm-list .sp-bx-pr2 { margin-bottom: 22px; }
.prod-picc { transition: transform .55s ease; }
.shop-colm-list:hover .prod-picc { transform: scale(1.09) translateY(-5px); }
.sp-bx-pr {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--forest);
  letter-spacing: -.01em;
}
.sp-bx-pr span { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.sp-bx-pr2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.2;
}
.sp-bx-pr2 span {
  display: block;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--green);
  text-transform: none;
  line-height: 1.1;
  margin-top: 4px;
}

/* =====================================================================
   CTA BANNER
   ===================================================================== */
.cta-banner {
  background: var(--cream);
  padding: 110px 0;
  text-align: left;
}
.cta-banner-inr {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  padding: 84px 72px;
  text-align: left;
  border-radius: 56px 12px 56px 12px;
  background:
    radial-gradient(520px 320px at 92% 8%, rgba(182, 216, 44, .38), transparent 70%),
    linear-gradient(120deg, #06361a 0%, #0d6b2b 55%, #2f9d33 100%);
  box-shadow: 0 40px 80px rgba(6, 46, 20, .3);
}
.cta-banner-inr::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(182, 216, 44, .4);
  box-shadow: inset 0 0 0 50px rgba(182, 216, 44, .05);
}
.cta-banner-inr > * { position: relative; }
.cta-banner .eyebrow { color: var(--lime); }
.cta-banner h2 {
  display: block;
  max-width: 640px;
  font-size: 50px;
  line-height: 1.08;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
}
.cta-banner p { display: block; max-width: 600px; font-size: 17.5px; line-height: 1.75; color: #d5e6cb; }
.cta-banner .commonBtn { margin-top: 34px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.ftr-links-sec {
  position: relative;
  padding: 76px 0 40px;
  background: linear-gradient(180deg, #0a4a20 0%, #062e14 100%);
  color: #c7ddbb;
}
.ftr-links-sec::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--forest-2), var(--leaf), var(--lime));
}
.ftr-links-inr { border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: 38px; }
.ftr-links-hd {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
  color: #fff;
  margin-bottom: 8px;
}
.ftr-links-list li { font-size: 14.5px; color: #c7ddbb; }
.ftr-links-list li a { color: #c7ddbb; display: inline-block; transition: color .25s ease, transform .25s ease; }
.ftr-links-list li a:hover { color: var(--lime); transform: translateX(5px); }
.ftr-tx { color: #a9c69b; font-size: 13.5px; line-height: 1.75; }
.ftr-tx a { color: var(--lime); padding: 0 4px; }

/* =====================================================================
   INNER PAGES / FORMS  (same palette + fonts)
   ===================================================================== */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 4px rgba(18, 138, 50, .14);
}
.sec-heading { font-family: var(--font-head); text-transform: none; color: var(--forest); }
.sec-heading span { color: var(--green); }
.common-heading span, .bdhding2 span { color: var(--green); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media only screen and (max-width: 1200px) {
  .hero h1 { font-size: 58px; }
  .welcome-grid { gap: 60px; }
  .welcome-content h2, .bdhding2, .cta-banner h2, .gear .section-title h2 { font-size: 42px; }
  .shop-colm-list { width: calc(33.333% - 15px); }
  .cta-banner-inr { padding: 70px 50px; }
}
@media only screen and (max-width: 1023px) {
  .hero { padding: 120px 0 170px; }
  .hero-content { max-width: 100%; padding: 0 20px; }
  .hero h1 { font-size: 50px; }
  .features { margin: -80px auto 20px; max-width: 94%; }
  .welcome-grid { grid-template-columns: 1fr; gap: 70px; }
  .welcome-image img { height: 460px; }
  .welcome-badge { left: 12px; }
  .gear-grid { grid-template-columns: 1fr; }
  .gear-featured { max-width: 520px; margin: 0 auto; }
  .shop-colm-list { width: calc(50% - 11px); }
  ul.mainMenu li { padding: 0 12px; }
}
@media only screen and (max-width: 767px) {
  .hero { padding: 70px 0 130px; min-height: auto; display: block; }
  .hero-content { padding: 0 16px; }
  .hero h1 { font-size: 36px; line-height: 1.08; }
  .hero p { font-size: 16px; max-width: 100%; }
  .hero-cta { margin-bottom: 34px; }
  .hero-stats { gap: 10px; }
  .hero-stats > div { min-width: 0; flex: 1 1 100%; padding: 12px 18px; }
  .hero::after { display: none; }
  .features { margin: -70px auto 10px; padding: 14px; gap: 12px; grid-template-columns: repeat(2, 1fr); border-radius: 26px 6px 26px 6px; }
  .feature { padding: 18px 8px 14px; }
  .feature-icon { width: 52px; height: 52px; }
  .feature-icon svg { width: 24px; height: 24px; }
  .feature h4 { font-size: 12.5px; }
  .welcome { padding: 60px 0 60px; }
  .welcome-grid { max-width: 90%; gap: 52px; }
  .welcome-image img { height: 340px; border-radius: 34px 100px 34px 34px; }
  .welcome-image::before { border-radius: 34px 100px 34px 34px; inset: 18px -14px -18px 14px; }
  .welcome-content h2, .bdhding2, .cta-banner h2, .gear .section-title h2 { font-size: 30px; line-height: 1.15; }
  .welcome-columns { grid-template-columns: 1fr; }
  .gear { padding: 64px 0; }
  .gear-cards { grid-template-columns: 1fr; }
  .prod-section { padding: 64px 0; }
  .shop-box { margin-top: 34px; }
  .shop-colm-list { width: 100%; max-width: 380px; }
  .cta-banner { padding: 50px 0; }
  .cta-banner-inr { padding: 46px 26px; border-radius: 36px 10px 36px 10px; }
  .cta-banner .commonBtn { width: 100%; }
  .ftr-links-sec { padding: 50px 0 30px; }
}

/* =====================================================================
   INNER PAGES  (breadcrumb, product page, contact, checkout, terms ...)
   ===================================================================== */
.prodBreadcrm {
  position: relative;
  overflow: hidden;
  padding: 58px 0;
  background: linear-gradient(120deg, #062e14 0%, #0d6b2b 58%, #2f9d33 100%);
}
.prodBreadcrm::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -130px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(182, 216, 44, .38);
  box-shadow: inset 0 0 0 44px rgba(182, 216, 44, .05);
  pointer-events: none;
}
.prodBreadcrm::before {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 216, 44, .3), transparent 70%);
  pointer-events: none;
}
.prodBreadcrm .container { z-index: 1; }
.prodBreadcrm p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .4px;
  color: #fff;
}
.prodBreadcrm p a { color: var(--lime); font-weight: 700; transition: color .25s ease; }
.prodBreadcrm p a:hover { color: #fff; }

.sec-heading { font-family: var(--font-head); font-weight: 700; letter-spacing: -.015em; }
.sec-heading span { font-family: var(--font-body); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; color: var(--green); }
.prod-nameHdng, .cntct-hdng, .proDetails-right .hdng1, .cmn-head,
.safebox p, .contct-txt1, .prd-strength-p1 {
  font-family: var(--font-head);
  color: var(--forest);
  font-weight: 700;
  letter-spacing: -.01em;
}
.prd-prc, .prd-price { font-family: var(--font-head); font-size: 34px; font-weight: 700; color: var(--green); letter-spacing: -.02em; }
.prd-p2 { color: var(--muted); font-size: 16.5px; line-height: 1.8; }
.proDetails-left { border-radius: 40px 8px 40px 8px; overflow: hidden; background: linear-gradient(160deg, var(--mint), #fff) !important; }

.contact-Box, .cntct-lft { border-radius: 30px 8px 30px 8px; }
.contact-Box { border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(10, 74, 32, .08); }
.contct-txt1 { font-size: 20px; }

.trm-bx h1, .trm-bx h3 { font-family: var(--font-head); color: var(--forest); text-transform: none; }
.trm-bx strong { color: var(--forest); }

.pack-op { font-family: var(--font-body); font-weight: 700; border-radius: 14px 4px 14px 4px; transition: all .3s ease; }
.pack-op.opted, .pack-op:hover { background: var(--btn-grad); color: #fff; border-color: transparent; }

#browse { margin-bottom: 24px; }
.card-error { max-width: 210px; }

/* hero banner on tablets / phones: copy first, banner image whole underneath */
@media (max-width: 900px) {
  .hero {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 90px 0 110px;
    background: linear-gradient(180deg, #05321a 0%, #0a4a20 62%, #0d5a26 100%);
  }
  .hero-overlay, .hero::after { display: none; }
  .hero-content { order: 1; }
  .hero-bg {
    order: 2; position: relative; inset: auto;
    width: 100%; height: auto; margin-top: 30px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 88%, transparent 100%);
  }
}
@media (max-width: 767px) {
  .hero-bg { width: 150%; max-width: none; margin-left: -50%; margin-top: 10px; object-position: right center; }
}