/*
Theme Name: HindBio Dr Good Health
Theme URI: https://hindbio.com
Author: HindBio
Author URI: https://hindbio.com
Description: A holistic women's wellness supplement brand theme with personalized health analysis, shop by concern, and clinical-grade herbal nutraceuticals.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hindbio
Tags: e-commerce, wellness, health, green, botanical
*/

/* Google Fonts Import for Figma Match */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@700&display=swap');

/* ============================================================
   CSS VARIABLES
============================================================ */
:root {
  --color-primary:     #2D6A4F;
  --color-primary-dark:#1B4332;
  --color-accent:      #74C69D;
  --color-accent-light:#B7E4C7;
  --color-gold:        #D4A853;
  --color-off-white:   #F8F5F0;
  --color-cream:       #FDF6EC;
  --color-text:        #1C2B20;
  --color-text-muted:  #5A7A65;
  --color-white:       #FFFFFF;
  --color-border:      #D8E8DC;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  --radius-sm:  6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-soft: 0 4px 24px rgba(45,106,79,0.10);
  --shadow-card: 0 8px 40px rgba(45,106,79,0.12);

  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-off-white);
  line-height: 1.65;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

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

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent-light);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45,106,79,0.28);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-gold {
  background: var(--color-gold);
  color: var(--color-white);
}
.btn-gold:hover {
  background: #b8892e;
  transform: translateY(-2px);
}

/* ============================================================
   ANNOUNCEMENT BAR
============================================================ */
.announcement-bar {
  background: var(--color-primary-dark);
  color: var(--color-white);
  text-align: center;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.announcement-bar strong {
  color: var(--color-gold);
}

/* ============================================================
   SITE HEADER / NAVIGATION
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}

.site-header.scrolled {
  box-shadow: var(--shadow-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

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

.site-logo img {
  height: 40px;
  width: auto;
}

.site-logo .logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.site-logo .logo-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition);
  position: relative;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition);
  border-radius: 2px;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-primary);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-lang {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.cart-icon {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-light);
  cursor: pointer;
  transition: var(--transition);
}

.cart-icon:hover { background: var(--color-accent); }

.cart-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 18px; height: 18px;
  background: var(--color-gold);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: var(--transition);
}
/* ============================================================
   TRUST STRIP
============================================================ */
.trust-strip {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.trust-icon {
  width: 36px; height: 36px;
  background: var(--color-accent-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ============================================================
   SECTION: NUTRITION ADAPTS
============================================================ */
.nutrition-section {
  padding: 96px 0;
  background: var(--color-cream);
}

.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.nutrition-image {
  position: relative;
}

.nutrition-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 100%;
}

.nutrition-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
}

.nutrition-badge-number {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.nutrition-badge-text {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

.nutrition-content h2 {
  font-size: clamp(32px, 4vw, 48px);
  color: var(--color-primary-dark);
  margin-bottom: 20px;
}

.nutrition-content p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.nutrition-content p strong {
  color: var(--color-primary);
}

/* ============================================================
   SECTION: SHOP BY CONCERN
============================================================ */
.shop-concern-section {
  padding: 96px 0;
  background: var(--color-white);
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header h2 {
  font-size: clamp(30px, 4vw, 44px);
  color: var(--color-primary-dark);
  margin-bottom: 12px;
}

.section-header p {
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 540px;
  margin: 0 auto;
}

.concern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.concern-card {
  background: #eaf4ea;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
/* 
.concern-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
} */

.concern-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-white);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: var(--shadow-soft);
}

.concern-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}

.concern-card p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============================================================
   SECTION: PRODUCT GRID
============================================================ */
.products-section {
  padding: 96px 0;
  background: var(--color-cream);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.product-image {
  position: relative;
  height: 220px;
  background: var(--color-accent-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.product-image img {
  height: 180px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition);
}

.product-card:hover .product-image img {
  transform: scale(1.08);
}

.product-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--color-gold);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.product-info {
  padding: 20px;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.star { color: var(--color-gold); font-size: 13px; }

.product-info h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}

.product-info .product-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}

.add-to-cart {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}

.add-to-cart:hover {
  background: var(--color-primary-dark);
  transform: scale(1.1);
}

/* ============================================================
   SECTION: SYSTEMS SUPPORT
============================================================ */
.systems-section {
  padding: 96px 0;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #2D6A4F 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.systems-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(116,198,157,0.12) 0%, transparent 60%);
}

.systems-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.systems-image img {
  border-radius: var(--radius-lg);
  width: 100%;
  filter: brightness(0.9) contrast(1.05);
}

.systems-content h2 {
  font-size: clamp(30px, 3.5vw, 44px);
  color: white;
  margin-bottom: 40px;
}

.system-item {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.system-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.system-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.system-text h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-accent-light);
  margin-bottom: 6px;
}

.system-text p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
}

/* ============================================================
   SECTION: TESTIMONIALS
============================================================ */
.testimonials-section {
  padding: 96px 0;
  background: var(--color-white);
}

.testimonial-slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.testimonial-card {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: var(--transition);
}

.testimonial-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.testimonial-text {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.author-location {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ============================================================
   SECTION: CLINICAL PRECISION
============================================================ */
.clinical-section {
  padding: 96px 0;
  background: var(--color-cream);
}

.clinical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.clinical-card {
  text-align: center;
  padding: 40px 28px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.clinical-card-icon {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--color-accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}

.clinical-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-primary-dark);
  margin-bottom: 12px;
}

.clinical-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================================
   SECTION: FAQ
============================================================ */
.faq-section {
  padding: 96px 0;
  background: var(--color-white);
}

.faq-list {
  max-width: 720px;
  margin: 48px auto 0;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  transition: background var(--transition);
}

.faq-question:hover { background: var(--color-off-white); }

.faq-question.active {
  background: var(--color-accent-light);
  color: var(--color-primary-dark);
}

.faq-chevron {
  font-size: 20px;
  transition: transform var(--transition);
  color: var(--color-primary);
  flex-shrink: 0;
}

.faq-question.active .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.75;
}

.faq-answer.open { display: block; }

/* ============================================================
   SECTION: CTA BANNER
============================================================ */
.cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, #1B5E38 100%);
  text-align: center;
  color: white;
}

.cta-section h2 {
  font-size: clamp(28px, 4vw, 46px);
  margin-bottom: 16px;
}

.cta-section p {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  max-width: 500px;
  margin: 0 auto 36px;
}

.cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.8);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .logo-text {
  font-family: var(--font-display);
  font-size: 24px;
  color: white;
  margin-bottom: 14px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 260px;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 16px;
  color: white;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}

.footer-col ul li a:hover {
  color: var(--color-accent);
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.social-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background var(--transition);
  cursor: pointer;
}

.social-link:hover { background: var(--color-accent); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.4);
  transition: color var(--transition);
}

.footer-bottom-links a:hover { color: var(--color-accent); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .concern-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
    .cards-row { grid-template-columns: repeat(3, 1fr); }
    .adapt-grid, .systems-grid, .faq-grid { grid-template-columns: 1fr; }
    .precision-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
    .nomore-strip { gap: 20px; }
}

 /* ── Wrapper ── */
/*   .section-wrapper { max-width: 1200px; margin: 0 auto; padding: 48px 40px; } */

  /* ── TOP GRID ── */
.top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 60px;

  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}
.section-wrapper{
  background: #fff;
  padding: 56px 0 56px 0;

}

  /* Image side */
  .img-container { position: relative; border-radius: 16px; overflow: hidden; }
  .img-container img { width: 100%; display: block; border-radius: 16px; object-fit: cover; max-height: 420px; }
  .img-badges {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.15));
  }
  .badge {
    background: rgba(255,255,255,0.93);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .badge-icon { width: 18px; height: 18px; flex-shrink: 0; }

  /* Content side */
  .content-right h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 40px;
     font-weight: 800;
     color: #1a5c2a;
     line-height: 1.15;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
  }
  .content-right p {
     font-family: 'DM Sans', sans-serif;
     font-size: 16px;
     color: #5A7A65;
     line-height: 1.7;
     margin-bottom: 16px;
  }
  .content-right p strong { font-weight: 700; color: #222; }
  .cta-btn {
     display: inline-block;
     background: #1a5c2a;
     color: #fff;
     border: none;
     border-radius: 999px;
     padding: 14px 36px;
     font-size: 16px;
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     cursor: pointer;
     margin-top: 10px;
     transition: background 0.2s, box-shadow 0.2s;
     box-shadow: 0 2px 8px rgba(26,92,42,0.10);
  }
  .cta-btn:hover { background: #144a21; }

 /* ── SHOP BY CONCERN ── */
.shop-concern {
  margin: 40px 0;
}

.shop-concern h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #1a5c2a;
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: -0.5px;
}

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-right: 0;
  margin-left: 0;
  padding: 0 24px;
}

.concern-card {
  border-radius: 18px;
  padding: 28px 18px 22px 18px;
  text-align: center;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 10px rgba(26,92,42,0.07);
  border: 1.5px solid #e2e8e4;
  background: #f7fbf7;
}

.concern-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.concern-card.green-bg { background: #eaf4ea; }
.concern-card.cream-bg { background: #f2dcba; }
.concern-card.green-bg  { background: #eaf4ea; }

.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.icon-green { background: #1a5c2a; }
.icon-amber { background: #e8a020; }

.concern-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a5c2a;
  margin-bottom: 8px;
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.concern-card h4.amber-text { color: #e8a020; }

.concern-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: #5A7A65;
  line-height: 1.6;
}


  /* ── SHOP ALL ROW ── */
 /* ── SHOP ALL SECTION ── */
.shop-all-section {
  background: #fff;
  padding: 30px 20px;
/*   border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); */
/*   margin: 40px 0; */
}

.shop-all-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.shop-all-title {
  font-size: 28px;
  font-weight: 800;
  color: #1a5c2a; /* forest green */

}

/* Navigation buttons */
.shop-all-nav {
  display: flex;
  gap: 12px;
}

.shop-all-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shop-all-nav button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Left (green) button */
.shop-all-prev {
  background: #1a5c2a;
}
.shop-all-prev svg {
  width: 20px;
  height: 20px;
}

/* Right (white) button */
.shop-all-next {
  background: #fff;
  border: 2px solid #1a5c2a;
}
.shop-all-next svg {
  width: 20px;
  height: 20px;
}

/* Carousel wrapper */
.shop-all-carousel-wrapper {
  overflow: hidden;
}
.shop-all-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .shop-all-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .shop-all-title {
    font-size: 24px;
  }
  .shop-all-nav {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .shop-all-title {
    font-size: 20px;
  }
  .shop-all-nav button {
    width: 38px;
    height: 38px;
  }
}

/* ════════════════════════════════════════════════════════
   Dr Good Health — Hero Section Styles
   Covers: reset · CSS variables · nav · hero · animations
   ════════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── DESIGN TOKENS ───────────────────────────────────── */
:root {
  --bg-dark:      #0a130d;
  --bg-mid:       #0e1f12;
  --green-deep:   #0d2010;
  --green-glow:   #1a4a1f;
  --green-bright: #4ade6e;
  --green-pill:   #3dba55;
  --green-btn:    #48cc60;
  --gold:         #c8922a;
  --gold-light:   #d4a843;
  --text-white:   #f0f5f1;
  --text-muted:   #8aab8f;
  --text-label:   #6bc97a;
  --nav-bg:       rgba(10, 20, 12, 0.85);
}

/* ── BASE ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-dark);
  color: var(--text-white);
  overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(74, 222, 110, 0.08);
}

/* Logo group */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--green-btn);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.logo-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-white);
  letter-spacing: 0.01em;
}

.logo-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 400;
}

/* Links */
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--text-white);
}

/* CTA button */
.btn-shop {
  background: var(--green-btn);
  color: #0a130d;
  border: none;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.2s, transform 0.15s;
}

.btn-shop:hover {
  background: var(--green-bright);
  transform: scale(1.03);
}

/* ===== SHOP ALL SECTION ===== */
/* Matches the Dr Good Health / Hindbio theme exactly */

.shop-all-section {
  background-color: #ffffff;
}

/* Section Header Row */
.shop-all-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.shop-all-title {
  font-size: 32px;
  font-weight: 700;
  color: #2e7d32;
  margin: 0;
  font-family: 'Poppins', sans-serif;
	 text-align: center;
}

/* Navigation Arrows */
.shop-all-nav {
  display: flex;
  gap: 10px;
  align-items: center;

}

.shop-all-nav button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background-color: #2e7d32;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.shop-all-nav button:hover {
  background-color: #1b5e20;
  transform: scale(1.05);
}

.shop-all-nav button:disabled {
  background-color: #c8e6c9;
  cursor: default;
  transform: none;
}

.shop-all-nav button svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

/* Carousel Wrapper */
.shop-all-carousel-wrapper {
  overflow: hidden;
  position: relative;
  padding: 0 20px;
}

.shop-all-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Product Card */
.product-card {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* Product Image Container */
.product-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 8px;
  position: relative;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.product-card:hover .product-card-image img {
  transform: scale(1.04);
}

/* Add to Cart Button (shown on hover over image) */
.product-card-image .add-to-cart-hover {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background-color: #1a1a1a;
  color: #ffffff;
  border: none;
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  pointer-events: none;
}

.product-card:hover .add-to-cart-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.product-card-image .add-to-cart-hover:hover {
  background-color: #333;
}

/* Plus circle button (default visible) */
.product-card-image .add-btn-circle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #1a1a1a;
  color: #fff;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  font-family: 'Poppins', sans-serif;
}

.product-card:hover .add-btn-circle {
  opacity: 0;
}

/* Product Info */
.product-card-info {
  padding: 14px 4px 0;
}

.product-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #2e7d32;
  margin: 0 0 6px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.3;
}

.product-card-price {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .product-card {
    flex: 0 0 calc(33.333% - 14px);
  }
}

@media (max-width: 768px) {
  .shop-all-title {
    font-size: 24px;
  }

  .product-card {
    flex: 0 0 calc(50% - 10px);
  }

  .shop-all-carousel-wrapper {
    padding: 0 16px;
  }

  .shop-all-header {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .product-card {
    flex: 0 0 calc(80% - 10px);
  }

  .shop-all-title {
    font-size: 22px;
  }
}
/* Base nav styling */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
}

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

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.btn-shop {
  background: #4CAF50;
  color: #fff;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
}

/* Hamburger styling */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #333;
  border-radius: 2px;
  transition: 0.3s;
}

/* Mobile view */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background: #fff;
    flex-direction: column;
    width: 200px;
    padding: 20px;
    gap: 15px;
    border: 1px solid #ddd;
    display: none;
  }

  .nav-links.active {
    display: flex;
  }

  .hamburger {
    display: flex;
	  background:#fff;
  }

  .btn-shop {
    display: none; /* optional: hide shop button on mobile */
  }
		.top-grid { display: block;}
  .hero-inner    { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual   { display: none; }
  .hero-title    { font-size: 38px; }

  .main-nav { display: none; }
  .hamburger { display: flex; }

  .nutrition-grid  { grid-template-columns: 1fr; }
  .systems-inner   { grid-template-columns: 1fr; }
  .clinical-grid   { grid-template-columns: 1fr; }
  .testimonial-slider { grid-template-columns: 1fr; }
  .concern-grid    { grid-template-columns: 1fr; }
  .product-grid    { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr; }
.cards-row { grid-template-columns:  1fr; }
    .content-right h2 { font-size: 28px; }
	section { padding: 30px 2%; }
    .footer-grid { grid-template-columns: 1fr; }
    .concern-grid { grid-template-columns: 1fr 1fr; }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .trust-strip-inner { gap: 24px; }

  /* Hamburger animation when active */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
  }
}
:root {
      --background: 140 20% 4%;
      --foreground: 60 20% 95%;
      --card: 140 15% 8%;
      --card-foreground: 60 20% 95%;
      --primary: 145 60% 42%;
      --primary-foreground: 140 20% 4%;
      --secondary: 140 12% 14%;
      --secondary-foreground: 60 20% 90%;
      --muted: 140 10% 12%;
      --muted-foreground: 140 8% 55%;
      --accent: 42 80% 55%;
      --accent-foreground: 140 20% 4%;
      --border: 140 12% 16%;
      --glass: 140 15% 10%;
      --glass-border: 140 15% 20%;
      --gold: 42 80% 55%;
      --gold-glow: 42 90% 65%;
      --hero-glow: 145 80% 30%;
      --radius: 0.75rem;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; border-color: hsl(var(--border)); }

    body {
      font-family: 'DM Sans', sans-serif;
      background: hsl(var(--background));
      color: hsl(var(--foreground));
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }

    /* Utility classes */
    .font-display { font-family: 'Playfair Display', serif; }
    .font-body { font-family: 'DM Sans', sans-serif; }

    .glass-panel {
      background: hsl(var(--glass) / 0.4);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid hsl(var(--glass-border) / 0.3);
      border-radius: 1rem;
    }

    .glass-card {
      background: hsl(var(--glass) / 0.3);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid hsl(var(--glass-border) / 0.2);
      border-radius: 0.75rem;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .glow-primary { box-shadow: 0 0 40px hsl(var(--primary) / 0.2), 0 0 80px hsl(var(--primary) / 0.1); }
    .glow-gold { box-shadow: 0 0 30px hsl(var(--gold) / 0.3), 0 0 60px hsl(var(--gold) / 0.1); }

    .text-gradient-primary {
      background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--gold-glow)));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .text-gradient-gold {
      background: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-glow)));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-padding { padding: 5rem 1.5rem; }
    @media (min-width: 768px) { .section-padding { padding: 8rem 3rem; } }
    @media (min-width: 1024px) { .section-padding { padding: 8rem 5rem; } }

    /* Animations */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    @keyframes float-slow {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-30px) rotate(5deg); }
    }
    @keyframes pulse-glow {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 0.8; }
    }
    @keyframes fade-up {
      0% { opacity: 0; transform: translateY(40px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes scroll-dot {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(12px); }
    }
    @keyframes particle-float {
      0%, 100% { transform: translateY(0) translateX(0); opacity: 0.6; }
      25% { transform: translateY(-30px) translateX(10px); opacity: 0.3; }
      50% { transform: translateY(-15px) translateX(-8px); opacity: 0.8; }
      75% { transform: translateY(-40px) translateX(5px); opacity: 0.4; }
    }

    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
    .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
    .animate-spin-slow { animation: spin-slow 20s linear infinite; }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-left {
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal-right {
      opacity: 0;
      transform: translateX(50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal-left.visible, .reveal-right.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* ===== NAVBAR ===== */
    .navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      margin: 1rem;
      animation: fade-up 0.8s ease-out 0.5s both;
    }
    @media (min-width: 768px) { .navbar { margin: 1rem 2rem; } }

    .navbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.5rem;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .nav-logo svg { width: 24px; height: 24px; color: hsl(var(--primary)); }

    .nav-logo-text {
      font-family: 'Playfair Display', serif;
      font-size: 1.125rem;
      font-weight: 600;
      color: hsl(var(--foreground));
    }

    .nav-logo-sub {
      font-size: 0.75rem;
      color: hsl(var(--muted-foreground));
      margin-left: 0.25rem;
    }

    .nav-links {
      display: none;
      align-items: center;
      gap: 2rem;
    }
    @media (min-width: 768px) { .nav-links { display: flex; } }

    .nav-links a {
      font-size: 0.875rem;
      color: hsl(var(--muted-foreground));
      text-decoration: none;
      transition: color 0.3s;
    }
    .nav-links a:hover { color: hsl(var(--primary)); }

    .nav-cta {
      display: inline-block;
      padding: 0.5rem 1.25rem;
      border-radius: 9999px;
      background: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
      transition: box-shadow 0.3s;
    }
    .nav-cta:hover {
      box-shadow: 0 8px 25px hsl(var(--primary) / 0.2);
    }

    /* ══════════════════════════════════════
     HERO / BANNER
  ══════════════════════════════════════ */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
  }

  /* Radial bg glow */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 75% 60% at 50% 60%, rgba(14,50,14,0.7) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 50% 50%, rgba(20,70,20,0.4) 0%, transparent 60%),
      linear-gradient(170deg, #091409 0%, #050f05 100%);
    z-index: 0;
  }

  /* Ground glow ellipse under the bottle */
  .hero::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 18px;
    background: radial-gradient(ellipse, rgba(61,189,95,0.35) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 2;
    animation: groundPulse 3s ease-in-out infinite;
  }

  @keyframes groundPulse {
    0%, 100% { opacity: 0.6; width: 200px; }
    50%       { opacity: 1;   width: 240px; }
  }

  /* ── FLOATING OBJECTS ── */
  .float-objects {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  /* Base object */
  .obj {
    position: absolute;
    animation: floatY 6s ease-in-out infinite;
  }

  /* Sphere – green */
  .sphere-g {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #72f56e, #2a9c2a 45%, #0f4a0f 80%, #082008);
    box-shadow:
      0 0 18px rgba(61,189,95,0.5),
      inset -4px -4px 12px rgba(0,0,0,0.5),
      inset 3px 3px 8px rgba(130,255,130,0.2);
  }

  /* Sphere – dark/black */
  .sphere-d {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #3a5a3a, #1a2e1a 45%, #0a140a 80%, #040804);
    box-shadow:
      0 0 10px rgba(0,0,0,0.6),
      inset -4px -4px 12px rgba(0,0,0,0.7),
      inset 3px 3px 8px rgba(80,120,80,0.15);
  }

  /* Capsule */
  .capsule {
    border-radius: 50px;
  }

  .capsule-g {
    background: linear-gradient(135deg, #72f56e 0%, #2db52d 35%, #0f520f 70%, #082008 100%);
    box-shadow:
      0 0 20px rgba(61,189,95,0.45),
      inset -3px -3px 10px rgba(0,0,0,0.5),
      inset 3px 3px 8px rgba(150,255,150,0.2);
  }

  .capsule-gold {
    background: linear-gradient(135deg, #f0d060 0%, #c9a227 35%, #8b6914 70%, #4a3508 100%);
    box-shadow:
      0 0 20px rgba(201,162,39,0.45),
      inset -3px -3px 10px rgba(0,0,0,0.5),
      inset 3px 3px 8px rgba(255,220,100,0.2);
  }

  /* Individual object positions & sizes */
  /* top-left large capsule (vertical) */
  .o1 { width: 38px; height: 90px; top: 14%; left: 30%; animation-delay: 0s; animation-duration: 7s; transform: rotate(10deg); }
  /* top-left small sphere */
  .o2 { width: 22px; height: 22px; top: 11%; left: 28%; animation-delay: 1.5s; animation-duration: 5s; }
  /* top-center-left sphere */
  .o3 { width: 28px; height: 28px; top: 10%; left: 55%; animation-delay: 0.8s; animation-duration: 6.5s; }
  /* right large dark sphere */
  .o4 { width: 78px; height: 78px; top: 20%; right: 12%; animation-delay: 0.5s; animation-duration: 8s; }
  /* left mid sphere */
  .o5 { width: 58px; height: 58px; top: 52%; left: 7%; animation-delay: 1.2s; animation-duration: 7.5s; }
  /* bottom-left capsule (diagonal) */
  .o6 { width: 28px; height: 70px; top: 65%; left: 31%; animation-delay: 2s; animation-duration: 6s; transform: rotate(30deg); }
  /* bottom-center-left small sphere */
  .o7 { width: 34px; height: 34px; top: 72%; left: 40%; animation-delay: 0.3s; animation-duration: 5.5s; }
  /* right mid capsule (gold, slight tilt) */
  .o8 { width: 24px; height: 58px; top: 55%; right: 12%; animation-delay: 1.8s; animation-duration: 6.8s; transform: rotate(-15deg); }
  /* small top-right sphere green */
  .o9 { width: 18px; height: 18px; top: 42%; right: 18%; animation-delay: 0.6s; animation-duration: 5.2s; }
  /* tiny dots */
  .o10 { width: 10px; height: 10px; top: 30%; left: 18%; animation-delay: 2.5s; animation-duration: 4.5s; }
  .o11 { width: 8px;  height: 8px;  top: 60%; right: 30%; animation-delay: 1.1s; animation-duration: 5.8s; }

  @keyframes floatY {
    0%, 100% { transform: translateY(0px) rotate(var(--rot, 0deg)); }
    50%       { transform: translateY(-18px) rotate(var(--rot, 0deg)); }
  }

  .o1 { --rot: 10deg; }
  .o6 { --rot: 30deg; }
  .o8 { --rot: -15deg; }

  /* ── CENTER BOTTLE ── */
  .bottle-wrap {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -52%);
    z-index: 3;
    animation: bottleFloat 4s ease-in-out infinite;
  }

  @keyframes bottleFloat {
    0%, 100% { transform: translate(-50%, -52%); }
    50%       { transform: translate(-50%, -56%); }
  }

  .bottle {
    width: clamp(80px, 10vw, 130px);
    height: clamp(170px, 22vw, 270px);
    border-radius: 18px 18px 22px 22px;
    background: linear-gradient(175deg,
      #2a5a2a 0%,
      #1a3a1a 20%,
      #0d200d 45%,
      #1a3a1a 65%,
      #0d200d 100%);
    position: relative;
    box-shadow:
      0 0 60px rgba(61,189,95,0.2),
      0 30px 80px rgba(0,0,0,0.7),
      inset 3px 0 15px rgba(61,189,95,0.1),
      inset -3px 0 15px rgba(0,0,0,0.5);
  }

  /* Gold lid */
  .bottle::before {
    content: '';
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 20px;
    background: linear-gradient(180deg, #e8c35a, #c9a227 50%, #8b6914);
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 -2px 10px rgba(201,162,39,0.4);
  }

  /* Bottle shine */
  .bottle::after {
    content: '';
    position: absolute;
    top: 15%; left: 12%;
    width: 18%; height: 55%;
    background: linear-gradient(180deg, rgba(150,255,150,0.18) 0%, transparent 100%);
    border-radius: 50%;
    filter: blur(3px);
  }

  /* Bottle label */
  .bottle-label {
    position: absolute;
    top: 22%; left: 10%; right: 10%; bottom: 15%;
    background: linear-gradient(180deg, rgba(61,189,95,0.08) 0%, rgba(0,0,0,0.2) 100%);
    border-radius: 10px;
    border: 1px solid rgba(61,189,95,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bottle-label-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(5px, 0.7vw, 8px);
    color: rgba(200,240,200,0.6);
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.6;
  }

  /* ── HERO TEXT ── */
  .hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 0 clamp(1rem, 5vw, 2rem);
    max-width: 800px;
    width: 100%;
  }

  .hero-eyebrow {
    font-size: clamp(0.58rem, 1.2vw, 0.72rem);
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(180,220,180,0.7);
    margin-bottom: 1.2rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.3s forwards;
  }

  .hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 8.5vw, 7rem);
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 1.4rem;
    opacity: 0;
    animation: fadeUp 0.9s 0.5s forwards;
  }

  .hero-title .line1 {
    display: block;
    color: #e8f0e8;
    text-shadow: 0 0 60px rgba(61,189,95,0.15);
  }

  .hero-title .line2 {
    display: block;
    background: linear-gradient(90deg, #5ce87a 0%, #c9a227 50%, #5ce87a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    animation: shimmer 4s linear infinite, fadeUp 0.9s 0.5s forwards;
    opacity: 0;
  }

  @keyframes shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
  }

  .hero-desc {
    font-size: clamp(0.88rem, 1.6vw, 1rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted);
    max-width: 480px;
    margin: 0 auto 2.4rem;
    opacity: 0;
    animation: fadeUp 0.9s 0.7s forwards;
  }

  .btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: rgba(61,189,95,0.18);
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 50px;
    border: 1.5px solid rgba(61,189,95,0.55);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.04em;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 30px rgba(61,189,95,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    opacity: 0;
    animation: fadeUp 0.9s 0.9s forwards;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.25s;
  }

  .btn-explore:hover {
    background: rgba(61,189,95,0.32);
    border-color: rgba(92,232,122,0.8);
    box-shadow: 0 0 50px rgba(61,189,95,0.35);
    transform: translateY(-2px);
  }

  .btn-explore .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: rgba(61,189,95,0.3);
    border-radius: 50%;
    font-size: 0.75rem;
    transition: transform 0.3s;
  }

  .btn-explore:hover .arrow { transform: translateY(3px); }

  /* Scroll indicator */
  .scroll-dot {
    position: absolute;
    bottom: 2.5rem; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 22px; height: 36px;
    border: 2px solid rgba(61,189,95,0.35);
    border-radius: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5px;
    opacity: 0;
    animation: fadeIn 1s 1.5s forwards;
  }

  .scroll-dot::after {
    content: '';
    width: 4px; height: 8px;
    background: var(--green-btn);
    border-radius: 4px;
    animation: scrollBounce 1.6s ease-in-out infinite;
  }

  @keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    70%       { transform: translateY(10px); opacity: 0; }
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeIn {
    to { opacity: 1; }
  }

  /* ══════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════ */
  @media (max-width: 900px) {
    .nav-links, .btn-shop { display: none; }
    .hamburger { display: flex; }

    /* Show mobile shop now inside mobile menu */
    .mobile-btn-shop {
      display: inline-flex;
      padding: 12px 28px;
      background: var(--green-btn);
      color: #fff;
      font-size: 0.9rem;
      font-weight: 500;
      border-radius: 50px;
      text-decoration: none;
      box-shadow: 0 0 22px rgba(61,189,95,0.4);
    }

    /* Scale down floating objects on mobile */
    .o4 { width: 54px; height: 54px; }
    .o5 { width: 40px; height: 40px; }
    .o1 { height: 65px; width: 28px; }
  }

  @media (max-width: 480px) {
    .o4, .o8, .o5 { opacity: 0.5; }
    .o10, .o11 { display: none; }
  }

  /* Hide mobile btn on desktop */
  .mobile-btn-shop { display: none; }
  @media (min-width: 901px) { .mobile-menu { display: none !important; } }
/* ============================================================
   SUPPORT THE SYSTEMS — CSS
   Background: Rectangle_2240.png (dark teal stripe texture)
   Model:      Subtract.png (cut-out, transparent bg)
   ============================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #1c3f52; }

/* ── Section ────────────────────────────────────────────────── */
.systems-section {
  position: relative;
  width: 100%;
  min-height: 580px;
  overflow: hidden;

  /* Real background image */
  background-image: url('Rectangle_2240.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ── 3-column inner grid ────────────────────────────────────── */
.systems-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* col 1: photo | col 2: heading | col 3: features */
  grid-template-columns: 38% 28% 34%;
  grid-template-rows: 1fr;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 580px;
  align-items: center;
}

/* ── LEFT COL: Model photo ──────────────────────────────────── */
.systems-photo-col {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100%;
  min-height: 580px;
}

.hero-photo {
  position: absolute;
  bottom: 0;
  left: 0;
  /* Let image fill column height naturally */
  height: 100%;
  width: auto;
  max-width: 235%;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  /* Fade right edge into background */
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 60%,
    transparent 92%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 60%,
    transparent 92%
  );
}

/* ── CENTER COL: Heading ────────────────────────────────────── */
.systems-heading-col {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 60px 24px 60px 0;
}

.systems-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 48px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* ── RIGHT COL: Features ────────────────────────────────────── */
.systems-features-col {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px 48px 20px;
  gap: 0;
}

/* ── Feature Item ───────────────────────────────────────────── */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--white-dim);

  /* Scroll-triggered animation start state */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.feature-item:last-child {
  border-bottom: none;
}

/* Animate in */
.feature-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Icon */
.feature-icon {
  width: 28px;
  height: 28px;
  color: var(--white);
  margin-bottom: 8px;
}

.feature-icon svg {
  width: 100%;
  height: 100%;
}

/* Feature heading */
.feature-text h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* Feature body */
.feature-text p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--white-75);
  max-width: 270px;
  margin: 0 auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet: 701–1080px ─────────────────────────────────────── */
@media (max-width: 1080px) {
  .systems-inner {
    grid-template-columns: 36% 64%;
    grid-template-rows: auto auto;
    align-items: start;
  }

  .systems-photo-col {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 520px;
  }

  .systems-heading-col {
    grid-column: 2;
    grid-row: 1;
    padding: 48px 30px 16px 20px;
    align-items: flex-start;
  }

  .systems-features-col {
    grid-column: 2;
    grid-row: 2;
    padding: 0 30px 48px 20px;
  }

  .feature-item {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
  }

  .feature-icon {
    margin-bottom: 0;
    margin-top: 2px;
    flex-shrink: 0;
  }

  .feature-text p {
    margin: 0;
    max-width: 100%;
  }
}

/* ── Mobile: ≤700px ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .systems-section {
    min-height: unset;
    background-position: top center;
  }

  .systems-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: unset;
    align-items: start;
  }

  /* Photo stacks on top */
  .systems-photo-col {
    grid-column: 1;
    grid-row: 1;
    min-height: 320px;
    width: 100%;
    overflow: hidden;
  }

  .hero-photo {
    position: relative;
    width: 75%;
    height: auto;
    max-width: 75%;
    margin: 0 auto;
    display: block;
    mask-image: linear-gradient(
      to bottom,
      black 60%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 60%,
      transparent 100%
    );
  }

  /* Heading below photo */
  .systems-heading-col {
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
    padding: 0 24px 24px;
  }

  .systems-title {
    text-align: center;
    font-size: clamp(24px, 7vw, 34px);
  }

  /* Features below heading */
  .systems-features-col {
    grid-column: 1;
    grid-row: 3;
    padding: 0 24px 48px;
  }

  .feature-item {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
  }

  .feature-icon {
    margin-bottom: 0;
    margin-top: 2px;
    flex-shrink: 0;
  }

  .feature-text p {
    margin: 0;
    max-width: 100%;
  }
}    
.systems-section {
  background-image: url("http://localhost/hindbio/wp-content/uploads/2026/04/Rectangle-2240.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 80px 0; /* adjust spacing */
  position: relative;
}

/* ============================================================
   FIGMA EXACT MATCH — Nutrition Adapts + Shop By Concern
   These overrides sit at the end to win specificity.
============================================================ */

/* ── Section wrapper ── */
.section-wrapper {
  background: #ffffff !important;
  padding: 72px 0 48px !important;
  max-width: 100% !important;
}

/* ── Top Grid (image + content) ── */
.top-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

/* Image container */
.section-wrapper .img-container {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.section-wrapper .img-container img {
  width: 100% !important;
  height: auto !important;
  max-height: 420px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  display: block !important;
}

/* Right content */
.section-wrapper .content-right {
  padding: 0 !important;
}
.section-wrapper .content-right h2 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #1a5c2a !important;
  line-height: 1.18 !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.3px !important;
}
.section-wrapper .content-right p {
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #6b7c70 !important;
  line-height: 1.75 !important;
  margin-bottom: 14px !important;
}
.section-wrapper .content-right p strong {
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* CTA Button */
.section-wrapper .cta-btn {
  display: inline-block !important;
  background: #1a5c2a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 13px 32px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  letter-spacing: 0.01em !important;
  transition: background 0.2s ease !important;
  box-shadow: none !important;
}
.section-wrapper .cta-btn:hover {
  background: #144a21 !important;
}

/* ── Shop By Concern wrapper ── */
.section-wrapper .shop-concern {
  margin: 52px auto 0 auto !important;
  padding: 0 40px !important;
  max-width: 1140px !important;
}

/* Shop By Concern heading */
.section-wrapper .shop-concern h3 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #1a5c2a !important;
  margin-bottom: 24px !important;
  text-align: left !important;
  letter-spacing: -0.3px !important;
  padding-left: 0 !important;
}

/* Cards row — clips overflow, arrow reveals more */
.section-wrapper .cards-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  overflow: hidden !important;
  padding: 4px 0 8px 0 !important;
  margin: 0 !important;
}

/* Individual concern cards */
.section-wrapper .concern-card {
  flex: 0 0 calc((100% - 5 * 16px) / 6) !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  padding: 22px 16px 18px 16px !important;
  text-align: left !important;
  border: 1.5px solid #e4ebe5 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
}
.section-wrapper .concern-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.09) !important;
}

/* Card backgrounds */
.section-wrapper .concern-card.green-bg  { background: #edf6ee !important; }
.section-wrapper .concern-card.cream-bg  { background: #fdf5e6 !important; }
.section-wrapper .concern-card.gray-bg   { background: #f2f4f2 !important; }

/* Icon circle */
.section-wrapper .icon-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 14px 0 !important;
  flex-shrink: 0 !important;
}
.section-wrapper .icon-green { background: #1a5c2a !important; }
.section-wrapper .icon-amber { background: #d4a020 !important; }

/* Card heading */
.section-wrapper .concern-card h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a5c2a !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}
.section-wrapper .concern-card h4.amber-text { color: #c8920a !important; }

/* Card description */
.section-wrapper .concern-card p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #7a8a7e !important;
  line-height: 1.55 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .section-wrapper .concern-card {
    flex: 0 0 calc((100% - 4 * 16px) / 5) !important;
  }
}
@media (max-width: 900px) {
  .top-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 20px !important;
  }
  .section-wrapper .shop-concern {
    padding: 0 20px !important;
  }
  .section-wrapper .cards-row {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .section-wrapper .cards-row::-webkit-scrollbar { display: none !important; }
  .section-wrapper .concern-card {
    flex: 0 0 160px !important;
    min-width: 160px !important;
  }
}
@media (max-width: 600px) {
  .section-wrapper .content-right h2 { font-size: 28px !important; }
  .section-wrapper .shop-concern h3  { font-size: 24px !important; }
  .section-wrapper .concern-card {
    flex: 0 0 148px !important;
    min-width: 148px !important;
    padding: 18px 12px 14px !important;
  }
}