:root{
      --brand:#1b8f5a;      /* primary */
      --brand-2:#0e3b2b;    /* dark */
      --accent:#f9c74f;     /* accent */
      --muted:#edf7f2;      /* light bg */
      --text:#1a1d1a;
    }

/* Global Animation Styles */
* {
  transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

body {
  overflow-x: hidden;
}

/* Navbar / Header Gradient with improved animation */
.navbar {
  background: linear-gradient(135deg, #ecf0ec,#3CB371); /* Green → Dark Green */
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  animation: fadeInDown 0.8s ease-out forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Override nav links for light text with improved transitions */
.navbar .nav-link {
  color: #fff;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #28a745; /* highlight stays green */
  background: rgba(255, 255, 255, 0.2); /* keep frosted hover */
  transform: translateY(-2px);
}


    /* Navbar Links */
.navbar .nav-link {
  position: relative;
  padding: 8px 18px;
  border-radius: 25px;
  font-weight: 500;
  color: #000;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  z-index: 1;
}

/* Active Glass Effect (Green) */
.navbar .nav-link.active {
  background: rgba(255, 255, 255, 0.15); /* semi-transparent glass */
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px); /* frosted blur */
  color: #28a745; /* Green highlight */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}

/* Hover Glass Effect (Green) */
.navbar .nav-link:hover {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  color: #28a745; /* Green hover */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px) scale(1.05);
}

/* Link hover animation */
.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #28a745;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateX(-50%);
  opacity: 0;
}

.navbar .nav-link:hover::after {
  width: 70%;
  opacity: 1;
}

/* Contact Button with Green Glass */
.btn-dark {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  position: relative;
}

.btn-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(40, 167, 69, 0.85);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 0;
}

.btn-dark:hover::before {
  left: 0;
}

.btn-dark:hover {
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
  transform: translateY(-3px);
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between text and arrow */
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-btn .btn-arrow {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  font-size: 1.2em;
  position: relative;
  z-index: 1;
}

.contact-btn:hover .btn-arrow {
  transform: translateX(8px); /* arrow slides further */
}

.contact-btn .btn-text {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  z-index: 1;
}

.contact-btn:hover .btn-text {
  transform: translateX(4px); /* text follows the arrow */
}


    /* Hero Section Animations */
.hero {
  overflow: hidden;
  position: relative;
}

.hero h1, .hero p, .hero .badge, .hero .btn, .hero .d-flex {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.hero h1 { animation-delay: 0.2s; }
.hero p { animation-delay: 0.4s; }
.hero .badge { animation-delay: 0.1s; }
.hero .btn { animation-delay: 0.6s; }
.hero .d-flex.align-items-center { animation-delay: 0.8s; }

.hero-art img {
  opacity: 0;
  transform: translateX(40px);
  animation: fadeInRight 1s forwards cubic-bezier(0.25, 1, 0.5, 1);
  animation-delay: 0.5s;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-art img:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}


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

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



/* =========================================
   🌟 SERVICE CARD ANIMATIONS + POPOVER EFFECT
   ========================================= */
#services {
  padding: 5rem 0;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
}

#services .section-title {
  font-size: 3rem;
  color: var(--brand-2);
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: fadeInDown 1s forwards;
}

#services .section-title::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  bottom: -15px;
  left: 20%;
  border-radius: 5px;
  animation: expandWidth 1.5s forwards;
}

@keyframes expandWidth {
  from { width: 0; left: 50%; }
  to { width: 60%; left: 20%; }
}

#services .card {
  position: relative;
  background: hsl(var(--card, 0 0% 100%));
  color: hsl(var(--card-foreground, 140 20% 10%));
  border-radius: 1.5rem;
  border: 1px solid hsl(var(--border, 145 30% 90%));
  box-shadow: 0 8px 25px hsla(0, 0%, 0%, 0.08);
  padding: 2rem !important;
  min-height: 320px;

  transition:
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(40px);
  opacity: 0;
}

/* Reveal animation when scrolled into view */
#services .card.reveal {
  transform: translateY(0);
  opacity: 1;
  animation: cardReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes cardReveal {
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Add staggered delay to cards */
#services .card:nth-child(1) { animation-delay: 0.1s; }
#services .card:nth-child(2) { animation-delay: 0.2s; }
#services .card:nth-child(3) { animation-delay: 0.3s; }
#services .card:nth-child(4) { animation-delay: 0.4s; }
#services .card:nth-child(5) { animation-delay: 0.5s; }
#services .card:nth-child(6) { animation-delay: 0.6s; }

/* Hover lift + glassy popover glow */
#services .card:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 20px 40px hsla(var(--brand, 150 56% 32%) / 0.2),
              0 10px 20px hsla(var(--brand, 150 56% 32%) / 0.1);
  background: linear-gradient(
    180deg,
    hsla(var(--popover, 0 0% 100%) / 0.98),
    hsla(var(--popover, 0 0% 100%) / 0.9)
  );
  backdrop-filter: blur(12px);
}

/* Improved glowing edge effect */
#services .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(145deg, hsla(var(--brand) / 0.5), transparent);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

#services .card:hover::after {
  opacity: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(27, 143, 90, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(27, 143, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 143, 90, 0); }
}

/* Icon animation */
#services .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(27, 143, 90, 0.1);
  color: var(--brand);
  font-size: 2rem;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Special styling for all service cards */
.general-card .icon-wrap {
  background: linear-gradient(135deg, rgba(27, 143, 90, 0.2), rgba(100, 200, 150, 0.2));
  color: #1b8f5a;
}

.general-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(27, 143, 90, 1), rgba(100, 200, 150, 0.7)) !important;
}

.womens-card .icon-wrap {
  background: linear-gradient(135deg, rgba(219, 112, 147, 0.2), rgba(255, 182, 193, 0.2));
  color: #db7093;
}

.womens-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(219, 112, 147, 1), rgba(255, 182, 193, 0.7)) !important;
}

.child-card .icon-wrap {
  background: linear-gradient(135deg, rgba(70, 130, 180, 0.2), rgba(135, 206, 250, 0.2));
  color: #4682b4;
}

.child-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(70, 130, 180, 1), rgba(135, 206, 250, 0.7)) !important;
}

.skin-card .icon-wrap {
  background: linear-gradient(135deg, rgba(221, 160, 221, 0.2), rgba(255, 192, 203, 0.2));
  color: #dd60dd;
}

.skin-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(221, 160, 221, 1), rgba(255, 192, 203, 0.7)) !important;
}

.allergy-card .icon-wrap {
  background: linear-gradient(135deg, rgba(100, 149, 237, 0.2), rgba(176, 224, 230, 0.2));
  color: #6495ed;
}

.allergy-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(100, 149, 237, 1), rgba(176, 224, 230, 0.7)) !important;
}

.lifestyle-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(27, 143, 90, 1), rgba(249, 199, 79, 0.7)) !important;
}

/* New service card styles */
.infertility-card .icon-wrap {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), rgba(219, 112, 147, 0.2));
  color: #db7093;
}

.infertility-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(255, 182, 193, 1), rgba(219, 112, 147, 0.7)) !important;
}

.mental-card .icon-wrap {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), rgba(219, 112, 147, 0.2));
  color: #db7093;
}

.mental-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(255, 182, 193, 1), rgba(219, 112, 147, 0.7)) !important;
}

/* New service card styles */
.arthritis-card .icon-wrap {
  background: linear-gradient(135deg, rgba(135, 206, 250, 0.2), rgba(70, 130, 180, 0.2));
  color: #4682b4;
}

.arthritis-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(135, 206, 250, 1), rgba(70, 130, 180, 0.7)) !important;
}

.brain-card .icon-wrap {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.2), rgba(255, 165, 0, 0.2));
  color: #ff8c00;
}

.brain-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(255, 140, 0, 1), rgba(255, 165, 0, 0.7)) !important;
}

.spondylosis-card .icon-wrap {
  background: linear-gradient(135deg, rgba(169, 169, 169, 0.2), rgba(128, 128, 128, 0.2));
  color: #808080;
}

.spondylosis-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(169, 169, 169, 1), rgba(128, 128, 128, 0.7)) !important;
}

/* New service card styles */
.renal-card .icon-wrap {
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.2), rgba(70, 130, 180, 0.2));
  color: #1e90ff;
}

.renal-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(30, 144, 255, 1), rgba(70, 130, 180, 0.7)) !important;
}

.diabetes-card .icon-wrap {
  background: linear-gradient(135deg, rgba(221, 160, 221, 0.2), rgba(255, 192, 203, 0.2));
  color: #dda0dd;
}

.diabetes-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(221, 160, 221, 1), rgba(255, 192, 203, 0.7)) !important;
}

.sleep-card .icon-wrap {
  background: linear-gradient(135deg, rgba(135, 206, 235, 0.2), rgba(70, 130, 180, 0.2));
  color: #87ceeb;
}

.sleep-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(135, 206, 235, 1), rgba(70, 130, 180, 0.7)) !important;
}

/* New service card styles */
.immune-card .icon-wrap {
  background: linear-gradient(135deg, rgba(144, 238, 144, 0.2), rgba(50, 205, 50, 0.2));
  color: #32cd32;
}

.immune-card:hover .icon-wrap {
  background: linear-gradient(135deg, rgba(144, 238, 144, 1), rgba(50, 205, 50, 0.7)) !important;
}

#services .card:hover .icon-wrap {
  transform: scale(1.2) rotate(10deg);
  background-color: var(--brand);
  color: white;
  box-shadow: 0 10px 20px rgba(27, 143, 90, 0.3);
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from { transform: scale(1.2) translateY(0) rotate(10deg); }
  to { transform: scale(1.2) translateY(-10px) rotate(10deg); }
}

:root {
  --card: 0 0% 100%;
  --card-foreground: 140 20% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 140 20% 10%;
  --border: 145 30% 90%;
  --brand: 150 56% 32%;
}

/* Stats Section Animations */
.stat-number {
  color: #28a745; /* Bootstrap green, change to #0d3b2e for dark green */
  font-size: 2.8rem; /* Increased size */
  font-weight: 700;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
  transform: translateY(20px);
  animation: countUp 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes countUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Add staggered delay to stats */
.stat-number:nth-child(1) { animation-delay: 0.1s; }
.stat-number:nth-child(2) { animation-delay: 0.3s; }
.stat-number:nth-child(3) { animation-delay: 0.5s; }
.stat-number:nth-child(4) { animation-delay: 0.7s; }

.stat-number:hover {
  transform: scale(1.1);
  color: var(--brand-2);
}

/* Hover Effect */
.stat-number:hover {
  transform: scale(1.2); /* Makes it pop */
}


/* Schedule Section */
.schedule-section {
  background: #fff; /* White background */
  border-radius: 20px;
  padding: 60px 20px;
  margin: 50px auto;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* optional subtle shadow */
}

.schedule-section h2 {
  font-size: 2.5rem;
  color: #000; /* Black text */
}

.schedule-section p {
  font-size: 1.1rem;
  color: #333; /* Dark gray for readability */
}

.schedule-section .btn {
  font-weight: 600;
  background: #000; /* Black button */
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
}

.schedule-section .btn:hover {
  background: #28a745; /* Green hover */
  color: #fff;
}



/* Features Section */
.features {
  background: #fff;
}

.feature-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s;
}

.feature-icon:hover {
  transform: scale(1.1);
}

.features h6 {
  font-size: 1rem;
  color: #333;
}


/* Icon bounce on hover */
#services .card:hover .icon-wrap {
  animation: bounce 0.6s;
}
/* ================================
   💳 Pricing Cards — Light Green Transparent Background
   ================================ */
#pricing .card {
  position: relative;
  background: hsla(150, 56%, 32%, 0.05); /* Light transparent green tint */
  color: hsl(var(--card-foreground, 140 20% 10%));
  border-radius: 1rem;
  border: 1px solid hsla(150, 56%, 32%, 0.15); /* subtle green border */
  box-shadow: 0 4px 12px hsla(150, 56%, 32%, 0.08);
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s ease,
    background 0.4s ease,
    opacity 0.4s ease-out;
  transform: translateY(30px);
  opacity: 0;
  backdrop-filter: blur(8px);
}

/* 👇 Reveal on scroll */
#pricing .card.reveal {
  transform: translateY(0);
  opacity: 1;
}

/* 💫 Hover: glassy popover effect */
#pricing .card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow:
    0 12px 25px hsla(150, 56%, 32%, 0.2),
    0 6px 12px hsla(150, 56%, 32%, 0.1);
  background: hsla(150, 56%, 32%, 0.1); /* stronger tint on hover */
  border-color: hsla(150, 56%, 32%, 0.25);
  backdrop-filter: blur(14px);
}

/* 🌈 Subtle glowing edge */
#pricing .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(145deg, hsla(150, 56%, 32%, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

#pricing .card:hover::after {
  opacity: 1;
}

/* ✨ Smooth pop animation for entry */
@keyframes popFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.03);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

#pricing .card.reveal {
  animation: popFadeUp 0.6s cubic-bezier(0.28, 1.5, 0.55, 1) forwards;
}


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

    html{scroll-behavior:smooth}
    body{font-family:'Inter', system-ui, Arial; color:var(--text);}
    .brand-gradient{background:linear-gradient(135deg, var(--brand) 0%, #6dd3a6 100%)}
    .hero{
      background:radial-gradient(1200px 600px at 80% -100px, rgba(27,143,90,.25), transparent 60%),
                 linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
      position:relative;
      overflow:hidden;
    }
    .hero:after{
      content:""; position:absolute; inset:auto -20% -40% -20%; height:60vh; background:var(--muted); transform:skewY(-6deg); z-index:-1;
    }
    .nav-link{font-weight:500}
    .btn-brand{background:var(--brand); color:#fff; border:none}
    .btn-brand:hover{background:#167a4c; color:#fff}
    .badge-soft{background:rgba(27,143,90,.1); color:var(--brand); border:1px solid rgba(27,143,90,.2)}
    .card{border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 24px rgba(0,0,0,.04)}
    .icon-wrap{width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:var(--muted);}
    .section-title{letter-spacing:.4px}
    .divider{height:2px; width:64px; background:var(--brand)}
    .floating-whatsapp{
      position:fixed; right:16px; bottom:16px; z-index:999; width:56px; height:56px; border-radius:50%;
      display:grid; place-items:center; color:#fff; background:#25D366; box-shadow:0 8px 22px rgba(0,0,0,.2)
    }
    .back-to-top{position:fixed; right:16px; bottom:84px; display:none}

    /* Testimonials */
    .testimonial-quote{font-size:1.05rem}

    /* Footer */
    .footer{background:var(--brand-2); color:#cfe7db}
    .footer a{color:#cfe7db; text-decoration:none}
    .footer a:hover{color:#fff}

    /* Forms */
    .form-control:focus{border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(27,143,90,.15)}

    /* Responsive Tweaks */
    @media (min-width:992px){
      .hero-art{transform:translateY(20px)}
    }
    
    /* Hero Image Slideshow */
    .hero-image-container {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 300px;
    }
    
    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    
    .hero-slide.active {
      opacity: 1;
      position: relative;
      display: block;
    }
    
    .hero-slide:not(.active) {
      display: none;
    }