/* === CSS variables consumed by HTML via var() arbitrary-value classes ===
 * --container-site / --container-inner: site-wide layout container widths.
 * --spec-bg is set inline on city-individual specialities cards via style=
 * "--spec-bg: #..." and needs no default.
 */
:root {
  --container-site: 1440px;
  --container-inner: 1380px;
}
/* FAQ answer: ensure overflow is hidden and provide a smooth height fallback */
.faq-answer {
  overflow: hidden;
  transition: height 360ms cubic-bezier(.22,.8,.3,1);
}
.lg\:leading-\[45px\]{line-height: 43px!important;}
/**
 * CFS Homepage - Custom CSS overrides
 * Minimal overrides on top of Tailwind utility classes.
 * Add component-specific styles here only when Tailwind utilities are insufficient.
 */

/* Utility-bar dropdown caret — filled downward triangle 10w x 7h (#434343).
 * CSS border triangle rasterizes closer to Figma's vector export than a
 * sub-10px SVG path at the per-node SSIM gate. */
.util-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #434343;
}

/* Utility-bar dropdown: flip the caret while its submenu is open. */
[data-dropdown-toggle][aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Centres section — card image shadow */
.centre-card__image {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Centres section — backdrop blur on card images */
.centre-card__image {
  backdrop-filter: blur(2px);
}

/* Specialities — inactive triggers 75px, active 92px (desktop only).
 * !important + flex-shrink:0 override Tailwind's `lg:w-auto` + flex-shrink
 * defaults. Without these, flex squeezes inactive triggers to ~54px and the
 * vertical labels overflow visibly. 8 inactive (75) + 1 active (92) +
 * 700px open panel = 1392px (just over 1380 container, accepted overflow). */
@media (min-width: 1024px) {
  .spec-trigger {
    width: 78px !important;
    flex-shrink: 0 !important;
  }
}


/* Doctor cards: hover state per Figma component variant `Doctor Card - Mahipal`
 * (node 71:1591), Default → Variant2 delta. Restored 2026-05-27 after the
 * variant audit found Figma DOES specify hover (just no prototype reactions). */
.doctor-card,
.featured-doctor {
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.doctor-card:hover,
.featured-doctor:hover {
  border-color: #2b286f;
}
.doctor-card:hover .doctor-card__loc-bar {
  background-color: #ffcb05 !important;
}
.doctor-card:hover .doctor-card__city {
  color: #2b286f !important;
}
.doctor-card:hover .doctor-card__spec-pill {
  opacity: 1 !important;
}
.doctor-card:hover .doctor-card__book {
  font-weight: 500 !important;
}
/* Hover effects for doctor-list scroll cards — IR-verified against the Figma
 * "Dr. Lalit Verma" component (Property 1=Default → Variant2):
 *   • image scales up
 *   • location pill #d9d9d9 → #ffcb05 + pin grows (handled inline via group-hover)
 *   • experience bar BACKGROUND STAYS #2b286f — only its text grows (16→~19/23px)
 *   • "Book An Appointment" 13→15px, weight 400→500, gains underline
 * Desktop only (mobile has no hover). */
@media (min-width: 1024px) {
  .doctor-card .doctor-card__image img {
    transition: transform 0.3s ease;
    transform-origin: bottom center;
  }
  .doctor-card:hover .doctor-card__image img {
    transform: scale(1.13);
  }
  /* Experience text grows; the bar background is intentionally NOT recoloured
   * (Figma keeps Rectangle 89 = #2b286f in both states). */
  .doctor-card .doctor-card__exp {
    transition: font-size 0.3s ease;
    /* Figma exp text uses textCase=TITLE; our desktop span is lowercase chars. */
    text-transform: capitalize;
  }
  .doctor-card:hover .doctor-card__exp {
    font-size: 19px;
  }
}
/* CMS-friendly book CTA wrapper hover — weight 400→500 at all sizes; on desktop
 * also 13→15px + underline (Figma Default→Variant2). <p> is CMS-bare, so the
 * styling lives on the wrapper `> p` selector. */
.doctor-card:hover .cms-doctor-card-book > p,
.doctor-card:hover .cms-doctor-card-book-responsive > p,
.featured-doctor:hover .cms-doctor-card-book > p,
.featured-doctor:hover .cms-doctor-card-book-responsive > p {
  font-weight: 500;
}
@media (min-width: 1024px) {
  /* Book CTA hover: underline only (weight 400→500 comes from the rule above).
   * The Figma variants also grow the font ~2px (13→15 scroll, 17→19 featured),
   * but that delta is intentionally omitted — it's visually negligible next to
   * the underline. Rest sizes (scroll 13px, featured 17px) stay unchanged. */
  .doctor-card:hover .cms-doctor-card-book-responsive > p,
  .featured-doctor:hover .cms-doctor-card-book-responsive > p {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  
}
/* Specialisation pill (Figma Component 173 — Group 775 Default → 776 Selected).
 * Pattern reused on multiple sibling pill components in the same family. */
.spec-pill[aria-pressed="true"],
.spec-pill.is-selected {
  background-color: #ffcb05;
  font-weight: 500;
}
/* Same pattern for state filter pills (Component 201) */
.state-pill[aria-pressed="true"],
.state-pill.is-selected {
  background-color: #ffcb05;
  font-weight: 500;
}

/* Callback Submit button hover (Figma Component 203, Default → Hover):
 * 1px inset white ring + text Medium 500. Targets `.cta-submit` inside
 * the callback form. */
.callback-form .cta-submit:hover,
.callback-form__card .cta-submit:hover,
form[data-hero-form] .cta-submit:hover,
form[data-hero-form-mobile] .cta-submit:hover {
  box-shadow: inset 0 0 0 1px #ffffff;
  font-weight: 500;
}

/* Footer address item hover (Figma Component 204/205/206): icon circle
 * fills yellow. Target `.footer-address__icon`. */
.footer-address-item:hover .footer-address__icon {
  background-color: #ffcb05;
  border-color: #ffcb05;
}

/* Why Us: background highlight grid — 10x6 ellipse cells per Figma (60 total).
 * Each cell renders as an ellipse via border-radius:50%. JS sets per-cell opacity
 * based on distance from mouse pointer to create a spotlight effect. */
.whyus-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.whyus-tile {
  opacity: 0;
  border: 1px solid #2b286f;
  background: transparent;
  transition: opacity 0.2s ease-out;
}

/* Phone bar: text and icon turn navy on hover (yellow bg) */
.phone-bar__item:hover span {
  color: #2b286f;
  transition: color 0.3s;
}
.phone-bar__item:hover svg path {
  fill: #2b286f;
  transition: fill 0.3s;
}

/* === CMS paragraph wrappers — literal CSS (do not use @apply; Play CDN strips it) ===
 * Bare <p> tags inside these wrappers inherit/get all styling. Used so paragraph
 * content can be CMS-edited without classes on <p>. Mirrors css/input.css lines
 * 162-197 (the @apply versions, kept until output.css is deleted in Phase 4).
 */

.cms-card-excerpt > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.375;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-card-excerpt > p {
    font-size: 14px;
  }
}

.cms-card-excerpt-3 > p {
  -webkit-line-clamp: 3;
}

/* Blog listing card excerpt — same wrapper as .cms-card-excerpt but desktop scales up to
   Poppins 20/33 (Figma 'Desktop blog' instance). Mobile inherits the 13px base. */
.cms-blog-card-excerpt > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.375;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-blog-card-excerpt > p {
    font-size: 20px;
    line-height: 33px;
    letter-spacing: -0.8px;
  }
}

.cms-doctor-card-book {
  margin-top: auto;
}
.cms-doctor-card-book > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  text-align: center;
}

.cms-doctor-card-book-responsive {
  margin-top: auto;
}
.cms-doctor-card-book-responsive > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.375;
  color: #000;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-top: 1rem;
}
@media (min-width: 1024px) {
  .cms-doctor-card-book-responsive > p {
    font-size: 13px;
    text-decoration: none;
    padding-top: 0;
  }
  /* Featured (Mahipal) CTA rest size is larger than the scroll-card CTA
   * (Figma: 17px vs 13px). Scoped to .featured-doctor so scroll cards keep 13px. */
  .featured-doctor .cms-doctor-card-book-responsive > p {
    font-size: 17px;
  }
}

.cms-sidebar-list-title > p {
  font-family: 'Poppins', sans-serif;
  /* mobile (vertical card): Poppins Medium 15, 2-line clamp (Figma "Latest Blogs") */
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: #2b286f;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-sidebar-list-title > p {
    /* desktop (horizontal list): Poppins Light 17, 3-line clamp */
    font-weight: 300;
    font-size: 17px;
    line-height: 25.5px;
    letter-spacing: -0.68px;
    -webkit-line-clamp: 3;
  }
}

.cms-doctor-meta > p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .cms-doctor-meta > p {
    gap: 0.75rem;
  }
}


/* === Cataract-page-only rules (selectors prefixed with [data-tabs="..."]
 *     or .cataract-* / .cat-*; inert on non-cataract pages) ===
 */
/**
 * CFS Cataract Page - Custom CSS overrides
 * Tab+panel connected shapes on mobile for cataract-specific sections.
 */

/* Cataract — tab+panel connected gray shape on mobile */
@media (max-width: 1023px) {
  /* All connected tab sections: base tab style */
  [data-tabs="understanding"] .cat-tab,
  [data-tabs="riskfactors"] .cat-tab,
  [data-tabs="surgery-group1"] .cat-tab,
  [data-tabs="surgery-group2"] .cat-tab,
  [data-tabs="iol-group1"] .cat-tab,
  [data-tabs="iol-group2"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Neutralize the desktop-pill overlay <span> (bg-[#ffcb05]/bg-[#2b286f])
     inside each tab on mobile — Figma mobile tabs are plain navy text, no
     filled blocks. The button bg above only covers the button layer; these
     -z-10 spans otherwise leak navy/yellow behind the labels on mobile. */
  [data-tabs="understanding"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="riskfactors"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="surgery-group1"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="surgery-group2"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="iol-group1"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="iol-group2"] .cat-tab > span[aria-hidden="true"] {
    background: transparent !important;
  }

  /* Active tab: gray bg + rounded top + underline */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"],
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"] {
    background: #f4f4f8 !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: none !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  /* Inverse rounded corners: pseudo-elements */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  /* Right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  /* First tab: hide left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  /* Last tab: hide right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

/* Slick slider minimal overrides for featured blog */
.blogs-hero .slick-slider {
  display: block;
}
.blogs-hero .slick-slide {
  display: block;
  outline: none;
}
.blogs-hero .slick-slide > * {
  height: 100%;
}
.blogs-hero .slick-list, .blogs-hero .slick-track {
  height: 100%;
}
/* Keep existing decorative arrows visible and clickable */
[data-slider-prev], [data-slider-next] {
  cursor: pointer;
  z-index: 20;
}

/* Theme tweaks for slick dots (if enabled later) */
.slick-dots li button:before {
  color: #2b286f;
  opacity: 0.6;
}
.slick-dots li.slick-active button:before {
  opacity: 1;
}
/* Featured slide content layout to match design */

.featured-slide-content {
  width: min(100%, 720px);
  max-width: 720px;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: 0;
  margin-right: auto;
}
@media (min-width: 768px) {
  .featured-slide-content {
    padding-left: 48px;
    padding-right: 0;
  }
}
@media (min-width: 1024px) {
  .featured-slide-content {
    padding-left: 96px;
    max-width: 820px;
  }
  .featured-slide-content h2 {
    font-size: 50px;
    line-height: 1.1;
  }
  .featured-slide-content p {
    font-size: 30px;
    line-height: 1.4;
    max-width: 560px;
  }
}

/* Buttons in featured slides — mobile: compact so both fit side-by-side (Figma);
   desktop: wide book button (min 260) per the desktop design. */
.featured-slide-content .inline-flex:first-of-type {
  border-width: 1px;
  padding-left: 4px;
  padding-right: 4px;
}
.featured-slide-content .inline-flex:last-of-type {
  padding-left: 4px;
  padding-right: 4px;
}
@media (min-width: 1024px) {
  .featured-slide-content .inline-flex:first-of-type {
    padding-left: 22px;
    padding-right: 22px;
  }
  .featured-slide-content .inline-flex:last-of-type {
    min-width: 260px;
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* Prevent slide heading/paragraph break issues */
.featured-slide-content h2,
.featured-slide-content p {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.featured-slide-content h2 {
  max-width: 100%;
}
.featured-slide-content p {
  max-width: 100%;
}

  /* Risks mobile: navy bg variant */
  [data-tabs="risks-mobile"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Risks tab active: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"] {
    background: #2b286f !important;
    color: white !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: white !important;
    text-decoration-thickness: 2px !important;
  }

  /* Prevention tab active: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"] {
    background: #f4f4f8 !important;
    color: #2b286f !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Risks tab scoops: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #2b286f;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #2b286f;
  }

  /* Prevention tab scoops: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Content panel overflow visible for scoops */
  [data-tabs="understanding"] .cat-panel:not(.hidden),
  [data-tabs="riskfactors"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group1"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group2"] .cat-panel:not(.hidden),
  [data-tabs="iol-group1"] .cat-panel:not(.hidden),
  [data-tabs="iol-group2"] .cat-panel:not(.hidden),
  [data-tabs="risks-mobile"] .cat-panel:not(.hidden) {
    position: relative;
    overflow: visible;
  }
}

/* === Hotfix 2026-05-27: regressed rules from input.css ===
 * These rules lived in css/input.css (lines 16-101, 132-154) but were not
 * @apply-based, so they were missed during the v4→v3 CDN migration when
 * cms-* @apply rules got expanded into custom.css. Restoring them here
 * un-breaks: yellow button hover scale, testimonials photo collage transitions,
 * specialities accordion expand/collapse + vertical desktop trigger text,
 * journey eye dot active scale, callback form gradient borders.
 */

/* Yellow button scale-up on hover — kept ONLY for the hero submit + main nav
 * Book An Appointment. Strict-parity strip removed .cta-btn from this rule
 * (Section 10 CTAs should stay static on hover per Figma). */
.cta-button:hover,
.cta-submit:hover {
  transform: scale(1.05);
}
.cta-button,
.cta-submit {
  transition: transform 0.2s ease, filter 0.3s, box-shadow 0.3s, font-weight 0.4s ease;
}

/* Doctor-individual booking sidebar submit: Figma hover variant is weight
 * Light→Medium ONLY (no scale) — overrides the global .cta-submit scale. */
.booking-sidebar .cta-submit:hover {
  transform: none;
  font-weight: 500;
}

/* Testimonials photo collage — smooth slide between positions */
.testimonial-photo {
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
.testimonial-photo[data-photo-slot="left"] {
  left: 16px; top: 193px; width: 197px; height: 218px; z-index: 0; opacity: 0.6;
}
.testimonial-photo[data-photo-slot="middle"] {
  left: 236px; top: 193px; width: 197px; height: 218px; z-index: 1; opacity: 1;
}
.testimonial-photo[data-photo-slot="main"] {
  left: 456px; top: 130px; width: 258px; height: 286px; z-index: 2; opacity: 1;
}

/* Specialities accordion panel — responsive animation */
.spec-panel {
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s ease;
}

/* Mobile: vertical expand (max-height) */
@media (max-width: 1023px) {
  .spec-panel {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .spec-panel.open {
    max-height: 600px;
    opacity: 1;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Desktop: horizontal expand (max-width) */
@media (min-width: 1024px) {
  .spec-panel {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .spec-panel.open {
    /* Fill the remaining track via flex:1 — do NOT hardcode a px width here.
       A fixed cap (was 700px) only fills when the tab count happens to add up
       to the container width (9 tabs on the homepage). With fewer tabs (e.g.
       city-individual's 5) the cap leaves a gray #F1F1F1 gap on the right.
       Tab count is CMS-dynamic, so cap at the container width and let flex
       grow into whatever space the triggers leave. */
    max-width: 100%;
    opacity: 1;
    padding-left: 40px;
    padding-right: 31px;
  }
  /* Figma interaction: the active tab's description panel sits IMMEDIATELY to
     the right of that tab. Each trigger+panel pair is interleaved in DOM order
     (spec-item is lg:contents), so leaving them in source order makes the open
     panel render right after its own trigger — earlier tabs to its left, later
     tabs to its right. (Do NOT force panels to order:1 — that pins every panel
     to the far-right end, detaching the description from a clicked middle tab.) */
}

/* Desktop: trigger text rotated vertically */
@media (min-width: 1024px) {
  .spec-trigger span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

/* Mobile: spec bars are full-bleed flat bands. JS toggles rounded-r-[20px] onto
   the active trigger (needed for the desktop vertical accordion), but on mobile
   that produces an inconsistent rounded notch on whichever bar is active, so
   flatten the right corners below lg. */
@media (max-width: 1023px) {
  .specialities-accordion .spec-trigger {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

/* Journey eye dots */
.journey-dot {
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
}
.journey-dot.active {
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 0 3px rgba(255, 203, 5, 0.4);
}

/* Callback form gradient border with border-radius */
.callback-gradient-border {
  position: relative;
}
.callback-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  padding: 1px;
  background: linear-gradient(180deg, #2B286F 0%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .callback-gradient-border::before {
    display: none;
  }
  .callback-form__card {
    background: white !important;
    backdrop-filter: none !important;
  }
}

/* Callback input gradient border */
.callback-input-border {
  position: relative;
}
.callback-input-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(180deg, #2B286F 0%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .callback-input-border {
    background: white !important;
    backdrop-filter: none !important;
  }
}


/* Section 13 — Blogs (Vision Care Insights) — CMS-friendly blog card excerpt */
.cms-blog-excerpt > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog card hover (Figma "Desktop blog" Default→hover variant): a 2px #2b286f
 * outside border appears + the cover image zooms ~1.13x. Desktop only (mobile
 * card already carries a static border; no hover on touch). box-shadow ring is
 * used so there's no layout shift and it sits outside the rounded corners. */
@media (min-width: 1024px) {
  .blog-card {
    transition: box-shadow 0.3s ease;
  }
  .blog-card:hover {
    box-shadow: 0 0 0 2px #2b286f;
  }
  .blog-card__image img {
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  .blog-card:hover .blog-card__image img {
    transform: scale(1.13);
  }

  .centre-loc-card {
    transition: box-shadow 0.3s ease;
  }
  .centre-loc-card:hover {
    box-shadow: 0 0 0 2px #2b286f;
  }
  .centre-loc-card__image img {
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  .centre-loc-card:hover .centre-loc-card__image img {
    transform: scale(1.13);
  }
}

/* Section 14 — callback form input focus border (gradient-border wrapper) */
.callback-input-border:focus-within::before {
  background: linear-gradient(180deg, #2B286F 0%, #2B286F 100%);
}

/* Cataract — symptom card hover (image zoom + indigo border), house style */
@media (min-width: 1024px) {
  .symptom-card {
    transition: box-shadow 0.3s ease;
  }
  .symptom-card:hover {
    box-shadow: 0 0 0 1px #2b286f;
  }
  .symptom-card .symptom-img {
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }
  .symptom-card:hover .symptom-img {
    transform: scale(1.09);
  }
}

/* shamnas style updates */

.d-flex{
  display: flex;
  flex-wrap: wrap;
}
.tablist button{
  min-width: 200px;
}
.white-bg-tab{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.white-bg-tab button{
  padding: 20px;
}
.white-bg-tab button[data-active="true"]{
  background-color: #2b286f;
  color: #fff;
}
.white-bg-tab button[data-active="false"]{
  background-color: #fff;
  color: #2b286f;
}
.white-bg-tab button[data-active="true"]:first-child{
  border-radius: 0px 0px 15px 0px;
}
.white-bg-tab button[data-active="true"]:last-child{
  border-radius: 15px 0px 0px 0px;
}
.white-bg-tab button[data-active="false"]:first-child{
  border-radius: 0px 0px 15px 0px;
}
.white-bg-tab button[data-active="false"]:last-child{
  border-radius: 0px 0px 0px 15px;
}
.blog-card-content-wrapper{
  padding: 15px;
}
.justify-content-between{
  justify-content: space-between;
}
.font-size-blog-box{
  font-size: 24px !important;
  line-height: 120% !important;
}
a.phone-icon{
  border-radius: 50%;
  border: 1px solid #2b286f;
  background-color: transparent;
}
.yellow-border{
  border-left: 5px solid #FFCB05;
}
.table-overflow{
  overflow-x: auto;
}
.award-slider{
  max-width: 1285px;
  margin: 0 auto;
}
.group:hover a.phone-icon{
  background-color: #2b286f;
}
/* city-individual: centre-card phone circle is navy-FILLED at rest on MOBILE
 * (Figma 3121:21144 Ellipse 44 fill #2b286f); desktop stays outlined-at-rest. */
@media (max-width: 1023px){
  .city-centres a.phone-icon{
    background-color: #fff;
  }
}
.blog-hover-card ul li a:hover, ul.blog-hover-card li a:hover{
  border: 2px solid #2b286f !important;
}
.blog-hover-card ul li a:hover .cms-sidebar-list-title p, ul.blog-hover-card li a:hover h3{
  font-weight: 500 !important;
}
/* Blog card: date / read-time row also bolds on hover (Figma 300 -> 500) */
.blog-hover-card ul li a:hover .blog-card-content-wrapper > div:last-child,
ul.blog-hover-card li a:hover .blog-card-content-wrapper > div:last-child{
  font-weight: 500 !important;
}
.blog-hover-card ul li a, ul.blog-hover-card li a{
  border: 2px solid transparent !important;
}
/* Sidebar widgets (Reader's Favourite / Hindi Blogs): one #f1f1f1 panel; items
   sit seamless in rest, a hovered item lifts to white + indigo border (Figma 29453/29460). */
.blogs-sidebar-widget{
  background: #f1f1f1;
  border-radius: 15px;
  padding: 25px 20px;
}
.blogs-sidebar-widget a[data-sidebar-list-item]{ transition: background-color .3s ease, border-color .3s ease; }
/* date (first meta span) bolds 300 -> 600 on hover; read-time stays 300 */
.blogs-sidebar-widget a[data-sidebar-list-item]:hover .mt-2 span:first-child{ font-weight: 600 !important; }
/* Mobile: items are white vertical cards with a persistent indigo border (Figma
   "Latest Blogs"). Desktop keeps the rest=transparent -> hover=indigo behaviour. */
@media (max-width: 1023px){
  .blogs-sidebar-widget a[data-sidebar-list-item]{ border-color: #2b286f !important; }
}
/* Centre location cards: desktop 1px border (rest transparent -> hover #2b286f).
 * Mobile (Figma city-individual): navy border at rest (no shadow). */
article.centre-loc-card{
  border: 1px solid transparent !important;
}
article.centre-loc-card:hover{
  border: 1px solid #2b286f !important;
}
@media (max-width: 1023px){
  article.centre-loc-card{ border: 1px solid #2b286f !important; }
}
@media (min-width: 1024px){
  .pb-130.pt-70{
    padding-top: 70px;
    padding-bottom: 130px;
  }
  .blogs-search{
    margin-top: -80px;
  }
}
@media (max-width: 1430px){
  .lg\:px-0{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
@media (min-width: 1024px) {
    .lg\:w-\[621px\] {
        width: auto !important;
    }
}
@media (max-width: 997px){
  .table-overflowing{
    width: 720px;   /* 6 cols × 120px → 3 columns visible per Figma mobile */
  }
}

/* Prevent why-cfs feature cards from stretching to match the tallest
 * item in the same grid row when one card reveals extra content on hover.
 * Keeps other cards visually stable. */
.blogs-why-cfs .grid {
  align-items: start;
}
.blogs-why-cfs .blogs-why-card {
  align-self: start;
}

/* Why-CFS hover: reduce padding and heading size without expanding other cards */
.blogs-why-cfs .blogs-why-card {
  transition: padding 0.18s ease, background-color 0.2s ease;
}
.blogs-why-cfs .blogs-why-card:hover {
  padding-top: 0.5rem; /* smaller vertical padding on hover */
  padding-bottom: 0.5rem;
}
.blogs-why-cfs .blogs-why-card h3 {
  transition: font-size 0.18s ease, color 0.18s ease;
}
@media (min-width: 1024px) {
  .blogs-why-cfs .blogs-why-card:hover h3 {
    font-size: 29px; /* slightly reduced from 31px */
  }
}
@media (max-width: 1023px) {
  .blogs-why-cfs .blogs-why-card:hover h3 {
    font-size: 18px; /* slightly reduced on mobile */
  }
}

/* Override hover color/background behaviors applied via Tailwind classes
 * so cards keep their original colors; only scale the heading on hover. */
.blogs-why-cfs .blogs-why-card:hover {
  background-color: transparent !important;
}
.blogs-why-cfs .blogs-why-card h3 {
  color: #000 !important;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease;
}
.blogs-why-cfs .blogs-why-card:hover h3 {
  transform: scale(0.95);
  color: #000 !important;
}
.blogs-why-cfs .blogs-why-card span[aria-hidden="true"] {
  background-color: #000 !important;
}
.blogs-why-cfs .blogs-why-card:hover span[aria-hidden="true"] {
  background-color: #000 !important;
}

/* Keep the hover paragraph color same as the heading (black) */
.blogs-why-cfs .blogs-why-card p {
  color: #000 !important;
  transition: color 0.18s ease;
}
.blogs-why-cfs .blogs-why-card:hover p {
  color: #000 !important;
}
html, body{
  scroll-behavior: smooth;
}
/* InnovEyes "See Beyond 6/6" body: highlighted phrase is Poppins SemiBold 600
   (Figma), not the browser-default bold 700 for <strong>. */
.see-beyond strong { font-weight: 600; }

/* InnovEyes "What Is..." lead: the trailing surgery-types phrase is Poppins
   Medium 500 (Figma), not the browser-default bold 700 for <strong>. */
.innov-what-is__lead strong { font-weight: 500; }

/* InnovEyes step-by-step procedure stepper: inactive circle grey, active yellow
   (Figma). JS toggles .is-active on click. */
.proc-step { background-color: #d9d9d9; color: #ffffff; cursor: pointer; }
.proc-step.is-active { background-color: #ffcb05; color: #2b286f; }

/* Procedure stepper: fade the active panel in when it becomes visible. */
@keyframes procPanelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.proc-panel:not(.hidden) { animation: procPanelFade 0.35s ease; }

/* Core Technology tabs: fade the active panel in when it becomes visible. */
@keyframes techPanelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.innov-tech-panels [data-tab-panel]:not(.hidden) { animation: techPanelFade 0.35s ease; }

/* InnovEyes benefit cards: the phrase before the colon is Poppins SemiBold 600
   (Figma), the rest stays Light 300 (the wrapper default). */
.innov-benefit-cards strong { font-weight: 600; }

/* InnovEyes mobile Core Technology — folder tabs (node 3121:23328).
   Active tab merges with the grey #f1f1f1 card; inactive tab is a white "notch"
   with rounded outer corners and a CONCAVE (inverted-radius) inner-bottom corner
   where the grey content curves up into it. Works for whichever tab is active. */
.mtab { position: relative; }
/* active tab = grey folder tab (rounded top); inactive = transparent (white card shows) */
.mtab[data-active="true"] { background: #f1f1f1; z-index: 1; border-radius: 15px 15px 0 0; }
/* concave flare bridging the active tab's inner-bottom corner into the grey content bar */
.mtab[data-active="true"]::after {
  content: ""; position: absolute; bottom: 0; width: 16px; height: 16px; background: #f1f1f1;
}
.mtab[data-active="true"]:first-child::after {
  right: -16px;
  -webkit-mask: radial-gradient(circle 16px at top right, transparent 0 16px, #000 16px);
          mask: radial-gradient(circle 16px at top right, transparent 0 16px, #000 16px);
}
.mtab[data-active="true"]:last-child::after {
  left: -16px;
  -webkit-mask: radial-gradient(circle 16px at top left, transparent 0 16px, #000 16px);
          mask: radial-gradient(circle 16px at top left, transparent 0 16px, #000 16px);
}
/* grey content bar — round the top corner on the NOTCH (inactive) side only */
[data-mtab-card][data-notch="right"] [data-mtab-body] { border-top-right-radius: 15px; }
[data-mtab-card][data-notch="left"]  [data-mtab-body] { border-top-left-radius: 15px; }

/* ── News & Media cards (news-media.html) ────────────────────────────────────
   Card hover = full colour-invert: bg→navy #2b286f, border off, all text→white.
   Matches Figma grid-card hover variant 3121:16909 (Component 232 → hover). */
.nm-card { transition: background-color 200ms ease, border-color 200ms ease; }
.nm-card:hover {
  background-color: #2b286f;
  border-color: #2b286f;
}
.nm-card:hover .nm-card__meta,
.nm-card:hover .nm-card__title,
.nm-card:hover .nm-card__title > h2,
.nm-card:hover .nm-card__title > h3,
.nm-card:hover .nm-card__excerpt,
.nm-card:hover .nm-card__excerpt > p { color: #ffffff; }
.nm-card:hover .nm-card__meta svg { color: #ffffff; }

/* city-individual hero: form column constrained to Figma 621px width at desktop */
@media (min-width:1024px){
  .city-hero .hero-callback{ width:621px; align-self:flex-start; }
}

/* doctor-individual Qualification/Experience card hover (Figma "Qualification DESKTOP"
   ON_HOVER → variant 3121:14923, SMART_ANIMATE 0.4s): header bar navy→yellow,
   title text white→navy. Body unchanged. */
.qual-card__header { transition: background-color 400ms cubic-bezier(0.4,0,1,1), color 400ms cubic-bezier(0.4,0,1,1); }
.qual-card:hover .qual-card__header { background-color: #ffcb05; color: #2b286f; }

/* doctor-individual Qualification/Experience bulleted list — custom round markers
   (Figma renders a plain text block; per Arjun the content is shown as a bulleted list).
   Dot sized + positioned here; bullets align with the card content padding, text hangs. */
.qual-card__body,
.research-list { list-style: none; }
.qual-card__body > li { position: relative; padding-left: 22px; }
.research-list > li { position: relative; padding-left: 22px; }
.qual-card__body > li::before,
.research-list > li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: #2b286f;
}

/* doctor-individual Awards card grey body with a top-center notch (badge pocket).
   Shape exported from Figma (Rectangle 1036) used as an alpha mask so the notch
   scales with the card and the page background shows through the cutout. */
.award-card__body {
  background-color: #f1f1f1;
  -webkit-mask: url("../assets/images/doctor-individual/award-card-notch.svg") no-repeat center / 100% 100%;
          mask: url("../assets/images/doctor-individual/award-card-notch.svg") no-repeat center / 100% 100%;
}

/* Awards badge medal — masked so it recolors on card hover (Figma ON_HOVER variant:
   medal #2b286f -> #ffcb05, SMART_ANIMATE 0.3s). Star is a cutout in the svg, so the
   notch background shows through it in both states. */
.award-card__badge {
  background-color: #2b286f;
  -webkit-mask: url("../assets/images/doctor-individual/award-badge-medal.svg") no-repeat center / contain;
          mask: url("../assets/images/doctor-individual/award-badge-medal.svg") no-repeat center / contain;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center;
  transition: background-color 300ms cubic-bezier(0.4, 0, 1, 1), transform 300ms cubic-bezier(0.4, 0, 1, 1);
}
/* hover: medal recolors navy->yellow AND rotates ~22.3deg (Figma hover variant) */
.award-card:hover .award-card__badge { background-color: #ffcb05; transform: translateX(-50%) rotate(-22.345deg); }

/* Awards slider arrows — disabled at the track ends shows at 50% opacity (Figma
   left arrow is opacity 0.5 when no previous). Not clickable while disabled. */
.awards [data-slider-prev]:disabled,
.awards [data-slider-next]:disabled { opacity: 0.5; pointer-events: none; }

/* ============================================================
   blog-individual — Side Effects "folder tab" (Figma Component 158)
   Navy notched vector (vectorPaths): M0,0 491,0 491,90.73 954,90.73 954,442 0,442
   — corners r15 INCLUDING the CONCAVE inner corner r15 at the active-tab→panel step.
   Reproduced (no screenshots; from IR path + corners only):
   (a) active tab is rounded-t-[15px] (Tailwind) + a scoop pseudo carves the concave
       inner corner where it meets the panel (box-shadow fill + inverse radius —
       same technique as the cataract connected tabs);
   (b) the panel top corner ADJACENT to the active tab is SQUARED so the tab's straight
       edge connects flush (no white gap); the far corner stays r15. Side flips via
       :has() on whichever tab is active.
   ============================================================ */
/* All state changes share the Figma SMART_ANIMATE timing: 300ms ease-in
   (cubic-bezier(0.4,0,1,1)) — so tab colour, scoop, and panel corner morph together
   instead of some snapping while others fade. */
#side-effects [role="tablist"] .se-tab { position: relative; }
/* scoops are ALWAYS rendered (so they can fade); opacity toggles with active state */
#side-effects [role="tablist"] .se-tab::before,
#side-effects [role="tablist"] .se-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 15px;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}
/* inner concave scoop toward the panel centre — a navy quarter with the corner
   facing the white bitten out (radial-gradient fills the box deterministically; a
   box-shadow scoop leaves the pseudo's own box partly uncovered = white notch) */
#side-effects [role="tablist"] .se-tab::before {
  left: -15px;
  background: radial-gradient(circle at top left, transparent 14.5px, #2b286f 15px);
}
#side-effects [role="tablist"] .se-tab::after {
  right: -15px;
  background: radial-gradient(circle at top right, transparent 14.5px, #2b286f 15px);
}
#side-effects [role="tablist"] .se-tab[data-active="true"]::before,
#side-effects [role="tablist"] .se-tab[data-active="true"]::after {
  opacity: 1;
}
/* the OUTER scoop (away from the panel centre) never shows */
#side-effects [role="tablist"] .se-tab:first-child::before,
#side-effects [role="tablist"] .se-tab:last-child::after {
  display: none;
}
/* panel corner morphs at the same 300ms; square the corner that meets the active
   tab (flush, no gap), round the far one — flipped via :has() on the active tab */
#side-effects .blog-tab-panels {
  transition: border-radius 300ms cubic-bezier(0.4, 0, 1, 1);
}
#side-effects:has(.se-tab[data-target="common"][data-active="true"]) .blog-tab-panels {
  border-radius: 0 15px 15px 15px;
}
#side-effects:has(.se-tab[data-target="rare"][data-active="true"]) .blog-tab-panels {
  border-radius: 15px 0 15px 15px;
}

/* blog-individual — Table of Content numbered list (Figma: ordered list 1..N, numbers
   right-aligned, navy Light, same size as items; not in IR text runs = Figma list numbering). */
.blog-toc .toc-list { counter-reset: toc; }
.blog-toc .toc-list > li { counter-increment: toc; display: flex; align-items: baseline; }
.blog-toc .toc-list > li::before {
  content: counter(toc) ".";
  flex: 0 0 auto;
  min-width: 21px;
  text-align: right;
  margin-left: -18px;   /* hang the number into the card's left padding so link text lands at Figma x29 */
  margin-right: 6px;
  color: #2b286f;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 23px;
}
@media (min-width: 1024px) {
  .blog-toc .toc-list > li::before { font-size: 20px; line-height: 30px; min-width: 24px; }
}

/* ============================================================
   Reusable 2-tab folder-tab (.ftab) — navy active block notched into a navy panel,
   navy-text inactive tab. Used by the MOBILE Types/Uses tab groups (Figma Components
   165/166): each toggles 2 tabs. Same notched-vector technique as #side-effects.
   ============================================================ */
.ftab [role="tablist"] .ftab-btn { position: relative; }
.ftab [role="tablist"] .ftab-btn::before,
.ftab [role="tablist"] .ftab-btn::after {
  content: ''; position: absolute; bottom: 0; width: 15px; height: 15px;
  background: transparent; pointer-events: none; opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}
.ftab [role="tablist"] .ftab-btn::before { left: -15px;  background: radial-gradient(circle at top left,  transparent 14.5px, #2b286f 15px); }
.ftab [role="tablist"] .ftab-btn::after  { right: -15px; background: radial-gradient(circle at top right, transparent 14.5px, #2b286f 15px); }
.ftab [role="tablist"] .ftab-btn[data-active="true"]::before,
.ftab [role="tablist"] .ftab-btn[data-active="true"]::after { opacity: 1; }
.ftab [role="tablist"] .ftab-btn:first-child::before,
.ftab [role="tablist"] .ftab-btn:last-child::after { display: none; }
.ftab .ftab-panel { transition: border-radius 300ms cubic-bezier(0.4, 0, 1, 1); }
.ftab:has(.ftab-btn:first-child[data-active="true"]) .ftab-panel { border-radius: 0 15px 15px 15px; }
.ftab:has(.ftab-btn:last-child[data-active="true"])  .ftab-panel { border-radius: 15px 0 15px 15px; }

/* ============================================================
   Bordered grey 3-tab folder-tab (.ftabb) — MOBILE Uses (Figma Component 163):
   grey #f1f1f1 panel + 1px navy border, r15, notched; active = grey raised block
   (navy Medium text) with the notch concave carrying the navy border arc; inactive
   = navy text. Image + body sit INSIDE the grey panel.
   ============================================================ */
.ftabb [role="tablist"] .ftabb-btn { position: relative; }
.ftabb [role="tablist"] .ftabb-btn::before,
.ftabb [role="tablist"] .ftabb-btn::after {
  content: ''; position: absolute; bottom: 0; width: 15px; height: 15px;
  pointer-events: none; opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}
.ftabb [role="tablist"] .ftabb-btn::before { left: -15px;  background: radial-gradient(circle at top left,  transparent 14px, #2b286f 14px, #2b286f 15px, #f1f1f1 15px); }
.ftabb [role="tablist"] .ftabb-btn::after  { right: -15px; background: radial-gradient(circle at top right, transparent 14px, #2b286f 14px, #2b286f 15px, #f1f1f1 15px); }
.ftabb [role="tablist"] .ftabb-btn[data-active="true"]::before,
.ftabb [role="tablist"] .ftabb-btn[data-active="true"]::after { opacity: 1; }
.ftabb [role="tablist"] .ftabb-btn:first-child::before,
.ftabb [role="tablist"] .ftabb-btn:last-child::after { display: none; }
.ftabb .ftabb-panel { transition: border-radius 300ms cubic-bezier(0.4, 0, 1, 1); }
.ftabb:has(.ftabb-btn:first-child[data-active="true"]) .ftabb-panel { border-top-left-radius: 0; }
.ftabb:has(.ftabb-btn:last-child[data-active="true"])  .ftabb-panel { border-top-right-radius: 0; }

#qualification,#specializations,#research,#awards {
  scroll-margin-top: 100px; /* Change 100px to the height of your top menu */
}