.what-section {
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
}

.section-label {
  color: #0ea5e9;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.section-text {
  color: #555;
  line-height: 1.8;
  font-size: 0.95rem;
}

/* ✅ FINAL SMALL SIZE */
.title-img {
  width: 120px;        /* 👈 હવે ખરેખર small */
  height: auto;
  display: block;
  margin: 10px 0 15px 0;
  object-fit: contain;
}

/* 📱 Mobile */
@media (max-width: 768px) {
  .title-img {
    width: 100px;
  }
}

/* Image Frame */
.what-img-frame img {
  width: 100%;
  transition: transform 0.4s ease;
}

.what-img-frame:hover img {
  transform: scale(1.05);
}

/* Accent Card */
.accent-card {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: #0ea5e9;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

.big-num {
  font-size: 2rem;
  font-weight: bold;
}

.big-label {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Feature Pills */
.feature-pill {
  display: inline-block;
  background: #ffffff;
  padding: 10px 16px;
  margin: 6px 6px 0 0;
  border-radius: 50px;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.feature-pill:hover {
  background: #0ea5e9;
  color: #fff;
}

:root {
      --sky: #e8f4f8;
      --teal: #015B85;
      --teal-dark: #065f5f;
      --teal-light: #12b3b3;
      --cream: #fafaf7;
      --gold: #c9a84c;
      --charcoal: #1a1a2e;
      --soft-gray: #f0f4f4;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--cream);
      color: var(--charcoal);
      overflow-x: hidden;
    }

    /* ── HERO HEADER ─────────────────────────────── */
    .invis-hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #0a1628 0%, #0d3b4f 45%, #065f5f 100%);
      overflow: hidden;
    }

    .hero-particles {
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(18,179,179,.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(201,168,76,.12) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(10,138,138,.08) 0%, transparent 60%);
    }

    .hero-grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 50px 50px;
    }

    .floating-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: .35;
      animation: floatOrb 8s ease-in-out infinite;
    }
    .orb-1 { width: 320px; height: 320px; background: var(--teal-light); top: -80px; right: 10%; animation-delay: 0s; }
    .orb-2 { width: 200px; height: 200px; background: var(--gold); bottom: 5%; left: 5%; animation-delay: -3s; }
    .orb-3 { width: 150px; height: 150px; background: #3ab8c5; top: 55%; right: 25%; animation-delay: -5s; }

    @keyframes floatOrb {
      0%,100% { transform: translateY(0) scale(1); }
      50%      { transform: translateY(-30px) scale(1.08); }
    }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      color: #a8f0f0;
      font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
      padding: 7px 18px; border-radius: 50px;
      margin-bottom: 1.4rem;
      animation: fadeSlideDown .8s ease both;
    }
    .hero-badge i { color: var(--gold); font-size: 1rem; }

    .hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.8rem, 7vw, 5.2rem);
      font-weight: 600; line-height: 1.05;
      color: #fff;
      animation: fadeSlideDown .9s .15s ease both;
    }
    .hero-title span { color: var(--teal-light); font-style: italic; }
    .hero-title .gold { color: var(--gold); }

    .hero-sub {
      font-size: clamp(1rem, 2vw, 1.15rem);
      color: rgba(255,255,255,.7);
      max-width: 520px; line-height: 1.7;
      margin: 1.4rem 0 2rem;
      animation: fadeSlideDown 1s .3s ease both;
    }

    .btn-invis {
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      color: #fff; font-weight: 600; border: none;
      padding: 14px 36px; border-radius: 50px;
      font-size: 1rem; letter-spacing: .02em;
      box-shadow: 0 8px 30px rgba(10,138,138,.45);
      transition: all .3s ease;
      animation: fadeSlideDown 1.1s .45s ease both;
      text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-invis:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(10,138,138,.6);
      color: #fff;
    }
    .btn-outline-invis {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.35);
      color: rgba(255,255,255,.85);
      padding: 13px 30px; border-radius: 50px; font-size: 1rem;
      transition: all .3s ease;
      text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
      animation: fadeSlideDown 1.2s .55s ease both;
    }
    .btn-outline-invis:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6); }

    .hero-stats {
      display: flex; gap: 2.5rem; margin-top: 3.5rem;
      animation: fadeSlideDown 1.3s .65s ease both;
    }
    .stat-item { text-align: left; }
    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.4rem; font-weight: 600; color: #fff;
      line-height: 1;
    }
    .stat-num sup { font-size: 1.1rem; vertical-align: super; color: var(--teal-light); }
    .stat-label { font-size: .78rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }

    /* Hero aligner visual */
    .hero-visual {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      animation: fadeSlideLeft 1.1s .3s ease both;
    }
    .hero-img-card {
      position: relative;
      border-radius: 28px; overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
      width: 100%; max-width: 480px;
    }
    .hero-img-card img { width: 100%; height: 380px; object-fit: cover; display: block; }
    .hero-img-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(6,95,95,.6) 0%, transparent 60%);
    }
    .hero-img-badge {
      position: absolute; bottom: 20px; left: 20px; right: 20px;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 16px; padding: 14px 18px;
      display: flex; align-items: center; gap: 12px; color: #fff;
    }
    .hero-img-badge .badge-icon {
      width: 42px; height: 42px; border-radius: 12px;
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem; color: #fff; flex-shrink: 0;
    }
    .badge-text-main { font-weight: 600; font-size: .95rem; }
    .badge-text-sub { font-size: .78rem; color: rgba(255,255,255,.7); }

    .floating-pill {
      position: absolute;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 50px; padding: 8px 16px;
      color: #fff; font-size: .8rem; font-weight: 500;
      display: flex; align-items: center; gap: 6px;
      white-space: nowrap;
      animation: floatPill 5s ease-in-out infinite;
    }
    .pill-1 { top: -18px; right: -10px; animation-delay: 0s; }
    .pill-2 { top: 40%; left: -20px; animation-delay: -2s; }

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

    /* ── WHAT IS INVISALIGN ─────────────────────── */
    .section-label {
      display: inline-block; font-size: .75rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--teal); border-bottom: 2px solid var(--teal);
      padding-bottom: 4px; margin-bottom: 1rem;
    }
    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      font-weight: 600; line-height: 1.15; color: var(--charcoal);
    }
    .section-title em { color: var(--teal); font-style: italic; }

    .what-section { background: var(--cream); padding: 100px 0; }

    .feature-pill {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--soft-gray); border-radius: 12px;
      padding: 14px 20px; margin-bottom: 12px; width: 100%;
      border-left: 3px solid var(--teal);
      transition: all .3s ease;
    }
    .feature-pill:hover { background: #dff0f0; transform: translateX(6px); box-shadow: 0 4px 16px rgba(10,138,138,.12); }
    .feature-pill i { color: var(--teal); font-size: 1.2rem; flex-shrink: 0; }
    .feature-pill span { font-size: .92rem; font-weight: 500; color: var(--charcoal); }

    .what-img-wrap { position: relative; }
    .what-img-frame {
      border-radius: 24px; overflow: hidden;
      box-shadow: 0 20px 60px rgba(10,138,138,.18);
      position: relative;
    }
    .what-img-frame img { width: 100%; height: 420px; object-fit: cover; display: block; }
    .what-img-frame::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(10,138,138,.2) 0%, transparent 60%);
    }
    .accent-card {
      position: absolute; bottom: -24px; right: -24px;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      color: #fff; border-radius: 20px; padding: 22px 28px;
      box-shadow: 0 12px 40px rgba(10,138,138,.35);
      text-align: center; z-index: 2;
    }
    .accent-card .big-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.8rem; font-weight: 600; line-height: 1;
    }
    .accent-card .big-label { font-size: .78rem; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }

    /* ── CAROUSEL ────────────────────────────────── */
    .carousel-section { background: linear-gradient(135deg, #0d3b4f 0%, #065f5f 100%); padding: 100px 0; }

    .carousel-section .section-label { color: var(--teal-light); border-color: var(--teal-light); }
    .carousel-section .section-title { color: #fff; }
    .carousel-section .section-title em { color: var(--teal-light); }

    .invis-carousel .carousel-inner { border-radius: 24px; overflow: hidden; }
    .carousel-slide {
      position: relative; height: 480px;
      display: flex; align-items: flex-end;
    }
    .carousel-slide img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
    }
    .carousel-caption-custom {
      position: relative; z-index: 2;
      background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
      width: 100%; padding: 40px 36px 36px;
    }
    .carousel-caption-custom h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.9rem; color: #fff; margin-bottom: 6px;
    }
    .carousel-caption-custom p { color: rgba(255,255,255,.75); font-size: .92rem; max-width: 480px; }

    .invis-carousel .carousel-indicators button {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(255,255,255,.5); border: none;
      margin: 0 5px;
    }
    .invis-carousel .carousel-indicators button.active { background: var(--teal-light); width: 24px; border-radius: 4px; }

    .invis-carousel .carousel-control-prev,
    .invis-carousel .carousel-control-next {
      width: 52px; height: 52px;
      background: rgba(255,255,255,.15); backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
      top: 50%; transform: translateY(-50%);
      margin: 0 16px;
    }

    /* ── STEPS ───────────────────────────────────── */
    .steps-section { background: var(--cream); padding: 100px 0; }

    .step-card {
      background: #fff; border-radius: 20px; padding: 36px 30px;
      position: relative; overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,.06);
      transition: all .35s ease;
      height: 100%;
    }
    .step-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--teal), var(--teal-light));
      transform: scaleX(0); transform-origin: left;
      transition: transform .35s ease;
    }
    .step-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(10,138,138,.16); }
    .step-card:hover::before { transform: scaleX(1); }

    .step-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 4rem; font-weight: 600; line-height: 1;
      color: rgba(10,138,138,.12); position: absolute;
      top: 18px; right: 24px;
    }
    .step-icon {
      width: 56px; height: 56px; border-radius: 16px;
      background: linear-gradient(135deg, rgba(10,138,138,.12), rgba(18,179,179,.2));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; color: var(--teal); margin-bottom: 20px;
    }
    .step-card h5 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem; font-weight: 600; margin-bottom: 10px;
    }
    .step-card p { font-size: .9rem; color: #555; line-height: 1.65; }

    /* ── WHY US ──────────────────────────────────── */
    .why-section {
      background: linear-gradient(135deg, var(--teal-dark) 0%, #0a1628 100%);
      padding: 100px 0; position: relative; overflow: hidden;
    }
    .why-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle at 80% 20%, rgba(201,168,76,.12) 0%, transparent 50%),
                        radial-gradient(circle at 20% 80%, rgba(18,179,179,.1) 0%, transparent 50%);
    }
    .why-section .section-title { color: #fff; }

    .why-card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 20px; padding: 30px 26px;
      transition: all .3s ease; height: 100%;
    }
    .why-card:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(18,179,179,.4);
      transform: translateY(-6px);
    }
    .why-icon {
      width: 50px; height: 50px; border-radius: 14px;
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: #fff; margin-bottom: 16px;
    }
    .why-card h6 { color: #fff; font-weight: 600; margin-bottom: 8px; font-size: 1rem; }
    .why-card p { color: rgba(255,255,255,.65); font-size: .87rem; line-height: 1.6; }

    /* ── CTA BAND ─────────────────────────────────── */
    .cta-section { background: var(--cream); padding: 90px 0; }
    .cta-box {
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
      border-radius: 28px; padding: 60px 50px;
      position: relative; overflow: hidden;
      box-shadow: 0 20px 60px rgba(10,138,138,.3);
    }
    .cta-box::after {
      content: '';
      position: absolute; width: 300px; height: 300px; border-radius: 50%;
      background: rgba(255,255,255,.05); top: -100px; right: -80px;
    }
    .cta-box h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; line-height: 1.2;
    }
    .cta-box p { color: rgba(255,255,255,.75); font-size: 1rem; margin-top: .8rem; }
    .btn-cta-white {
      background: #fff; color: var(--teal-dark); font-weight: 700;
      padding: 14px 36px; border-radius: 50px; border: none;
      font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.15);
      transition: all .3s ease;
    }
    .btn-cta-white:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.2); color: var(--teal-dark); }

    .clinic-info-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem; }
    .chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
      color: rgba(255,255,255,.88); font-size: .82rem;
      padding: 6px 14px; border-radius: 50px;
    }
    .chip i { font-size: .9rem; }

    /* ── ANIMATIONS ──────────────────────────────── */
    @keyframes fadeSlideDown {
      from { opacity: 0; transform: translateY(-28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeSlideLeft {
      from { opacity: 0; transform: translateX(40px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .reveal {
      opacity: 0; transform: translateY(36px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }

    /* ── DIVIDER ─────────────────────────────────── */
    .wave-divider { line-height: 0; }
    .wave-divider svg { display: block; }

    /* Responsive tweaks */
    @media (max-width: 768px) {
      .hero-stats { gap: 1.4rem; }
      .accent-card { right: -4px; bottom: -18px; }
      .floating-pill.pill-2 { display: none; }
      .cta-box { padding: 40px 28px; }
    }