.elementor-112 .elementor-element.elementor-element-2556a1c{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-f1b5da8 *//*
================================================================
DR. SHRINATH VISWANATH — ABOUT PAGE
Prefix: ab-
Breakpoints: Mobile <576px | Tablet 576–991px | Laptop 992–1279px | Desktop 1280px+

NOTE: All design tokens (colors, type, spacing, radius, shadow) now come
from the global :root token set (loaded via the site-wide HTML widget).
This file no longer redeclares them — only page-specific overrides and
component rules live here.
================================================================
*/

/* ── WRAPPER — page-specific overrides + base state only ── */
.ab-wrap {
  /* About page reads body copy slightly larger than the global default */
  --fs-body: 1.125rem;

  position: relative !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background: var(--off-white) !important;
  font-family: var(--f-body) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── GRAIN OVERLAY ── */
.ab-bg-grain {
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
  opacity: 0.04 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── LAYOUT UTILS ── */
.ab-container {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding-inline: clamp(16px, 4vw, 60px) !important;
}

.ab-main {
  position: relative !important;
  z-index: 1 !important;
}

/* ── SCROLL REVEAL ── */
.ab-reveal {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity 0.65s ease calc(var(--rd, 0s)),
              transform 0.65s ease calc(var(--rd, 0s)) !important;
}
.ab-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.delay-05  { --rd: 0.05s; }
.delay-1   { --rd: 0.1s; }
.delay-15  { --rd: 0.15s; }
.delay-2   { --rd: 0.2s; }
.delay-25  { --rd: 0.25s; }
.delay-3   { --rd: 0.3s; }
.delay-35  { --rd: 0.35s; }
.delay-8   { --rd: 0.08s; }
.delay-11  { --rd: 0.11s; }

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.ab-hero {
  background: linear-gradient(135deg, var(--c2) 0%, #0a3a65 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 52vh !important;
  display: flex !important;
  align-items: flex-end !important;
}
.ab-hero-grid {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  pointer-events: none !important;
}
.ab-hero-glow {
  position: absolute !important;
  right: -80px !important;
  bottom: -80px !important;
  width: 480px !important;
  height: 480px !important;
  background: radial-gradient(circle, rgba(144, 202, 238, 0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.ab-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  padding: 80px clamp(16px, 4vw, 60px) 64px !important;
  width: 100% !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
}

/* Breadcrumb */
.ab-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 22px !important;
}
.ab-bc-link {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  font-weight: 300 !important;
  transition: color 0.2s !important;
}
.ab-bc-link:hover { color: rgba(255, 255, 255, 0.85) !important; }
.ab-bc-sep { color: rgba(255, 255, 255, 0.3) !important; font-size: 11px !important; }
.ab-bc-current { font-size: 13px !important; color: rgba(255, 255, 255, 0.85) !important; }

/* Eyebrow — light (on dark backgrounds) */
.ab-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.ab-eyebrow-line {
  display: inline-block !important;
  width: 32px !important;
  height: 1.5px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
}
.ab-eyebrow-text {
  font-size: --fs-small
  !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 700 !important;
}

/* Eyebrow — dark variant (on light backgrounds) */
.ab-eyebrow-dark .ab-eyebrow-line,
.ab-eyebrow-line-dark { background: var(--c4) !important; }
.ab-eyebrow-dark .ab-eyebrow-text,
.ab-eyebrow-text-dark { color: var(--c3) !important; }

/* H1 */
.ab-h1 {
  font-family: var(--f-title) !important;
  font-size: clamp(3rem, 7vw, 6.5rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  margin-bottom: 18px !important;
}
.ab-h1 em {
  font-style: italic !important;
  font-family: var(--f-sub) !important;
  color: var(--c5) !important;
  font-weight: 600 !important;
}
.ab-hero-sub {
  font-family: var(--f-sub) !important;
  font-size: clamp(1.5rem, 1.5vw, 1.3rem) !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ══════════════════════════════════════════════════════
   SHARED TYPOGRAPHY
   ══════════════════════════════════════════════════════ */
.ab-section-h2 {
  font-family: var(--f-title) !important;
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--c2) !important;
  margin-bottom: 20px !important;
}
.ab-section-h2 em {
  font-style: italic !important;
  color: var(--c3) !important;
  font-family: var(--f-sub) !important;
  font-weight: 600 !important;
}
.ab-h2-white { color: #fff !important; }
.ab-h2-white em { color: var(--c5) !important; }

.ab-body-text {
  font-size: 16px !important;
  color: var(--body) !important;
  line-height: 1.85 !important;
  font-weight: 300 !important;
  margin-bottom: 16px !important;
}
.ab-body-text:last-of-type { margin-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════
   INTRO SECTION
   ══════════════════════════════════════════════════════ */
.ab-intro {
  background: var(--white) !important;
  padding: 80px 0 !important;
}
.ab-intro-grid {
  display: grid !important;
  grid-template-columns: 420px 1fr !important;
  gap: 64px !important;
  align-items: start !important;
}

/* Left column — photo + consult stacked */
.ab-left-col {
  display: flex !important;
  flex-direction: column !important;
}

/* Doctor photo */
.ab-photo-wrap { position: relative !important; }
.ab-doctor-photo {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Credentials overlay card — bottom-right of photo */
.ab-photo-card {
  position: absolute !important;
  bottom: 20px !important;
  right: -20px !important;
  left: auto !important;
  max-width: 78% !important;
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 18px 22px !important;
  z-index: 2 !important;
}
.ab-photo-card-name {
  font-family: var(--f-title) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--c2) !important;
  margin-bottom: 6px !important;
  line-height: 1.25 !important;
}
.ab-photo-card-creds {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c3) !important;
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}
.ab-photo-card-reg {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}

/* Where to Consult */
.ab-consult-wrap { margin-top: 24px !important; }
.ab-consult-label {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--c3) !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}
.ab-consult-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ab-consult-card {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  background: var(--off) !important;
  border: 1px solid rgba(15, 76, 129, 0.09) !important;
  border-radius: var(--radius) !important;
  padding: 16px 18px !important;
  transition: border-color 0.3s !important;
}
.ab-consult-card:hover { border-color: rgba(15, 76, 129, 0.22) !important; }
.ab-consult-icon {
  width: 34px !important;
  height: 34px !important;
  background: var(--pale) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c2) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.ab-consult-info { flex: 1 !important; min-width: 0 !important; }
.ab-consult-name {
  font-family: var(--f-sub) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--c2) !important;
  margin-bottom: 3px !important;
}
.ab-consult-addr {
  font-size: 12.5px !important;
  color: var(--body) !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  margin-bottom: 2px !important;
}
.ab-consult-hours {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 300 !important;
  margin-bottom: 6px !important;
}
.ab-consult-directions {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--c3) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.ab-consult-directions:hover { color: var(--c2) !important; }
.ab-consult-note {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  margin-top: 12px !important;
}

/* Credentials grid */
.ab-creds {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 28px 0 !important;
}
.ab-cred {
  background: var(--off) !important;
  border: 1px solid rgba(15, 76, 129, 0.09) !important;
  border-radius: var(--radius) !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  transition: border-color 0.3s !important;
}
.ab-cred:hover { border-color: rgba(15, 76, 129, 0.22) !important; }
.ab-cred-icon {
  width: 36px !important;
  height: 36px !important;
  background: var(--pale) !important;
  border: 1px solid rgba(15, 76, 129, 0.12) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c2) !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.ab-cred-title {
  font-family: var(--f-sub) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--c2) !important;
  margin-bottom: 2px !important;
}
.ab-cred-sub {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
}

/* CTA row */
.ab-cta-row {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 28px !important;
}
.ab-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--c2) !important;
  color: #fff !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  min-height: 44px !important;
}
.ab-btn-primary:hover { background: var(--c3) !important; transform: translateY(-2px) !important; }

.ab-btn-wa {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--wa) !important;
  color: #fff !important;
  padding: 13px 22px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  min-height: 44px !important;
}
.ab-btn-wa:hover { background: #1ebe5a !important; transform: translateY(-2px) !important; }

/* ══════════════════════════════════════════════════════
   STORY SECTION
   ══════════════════════════════════════════════════════ */
.ab-story {
  background: var(--off) !important;
  padding: 80px 0 !important;
}
.ab-story-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  margin-top: 48px !important;
  align-items: start !important;
}
.ab-story-subhead {
  font-family: var(--f-sub) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--c2) !important;
  margin-bottom: 12px !important;
}
.ab-pull-quote {
  border-left: 3px solid var(--gold) !important;
  padding: 20px 24px !important;
  background: var(--white) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 20px !important;
}
.ab-pull-text {
  font-family: var(--f-sub) !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  color: var(--c2) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════
   SURGICAL DECISIONS
   ══════════════════════════════════════════════════════ */
.ab-decisions {
  background: var(--c2) !important;
  padding: 80px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.ab-decisions-glow {
  position: absolute !important;
  right: -100px !important;
  top: -100px !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.ab-decisions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 48px !important;
}
.ab-decision-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius) !important;
  padding: 32px !important;
  transition: all 0.3s !important;
}
.ab-decision-card:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.ab-decision-title {
  font-family: var(--f-sub) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 14px !important;
}
.ab-decision-text {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.82 !important;
  font-weight: 300 !important;
  margin: 0 !important;
}
.ab-decision-quote {
  border-left: 3px solid var(--c5) !important;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 6px 6px 0 !important;
  margin-bottom: 16px !important;
}
.ab-decision-quote-text {
  font-family: var(--f-sub) !important;
  font-size: 1rem !important;
  font-style: italic !important;
  color: #fff !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════
   TECHNOLOGY
   ══════════════════════════════════════════════════════ */
.ab-tech {
  background: var(--white) !important;
  padding: 80px 0 !important;
}
.ab-tech-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 48px !important;
}
.ab-tech-card {
  background: var(--off) !important;
  border: 1px solid rgba(15, 76, 129, 0.08) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  align-items: flex-start !important;
  transition: all 0.3s !important;
}
.ab-tech-card:hover {
  border-color: rgba(15, 76, 129, 0.22) !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-3px) !important;
}
.ab-tech-icon {
  width: 46px !important;
  height: 46px !important;
  background: var(--pale) !important;
  border: 1px solid rgba(15, 76, 129, 0.12) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c2) !important;
  flex-shrink: 0 !important;
  transition: all 0.3s !important;
}
.ab-tech-card:hover .ab-tech-icon {
  background: var(--c2) !important;
  color: #fff !important;
  border-color: var(--c2) !important;
}
.ab-tech-title {
  font-family: var(--f-sub) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--c2) !important;
  margin-bottom: 8px !important;
}
.ab-tech-text {
  font-size: 14px !important;
  color: var(--body) !important;
  line-height: 1.78 !important;
  font-weight: 300 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════ */
.ab-cta-band {
  background: var(--c2) !important;
  padding: 80px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.ab-cta-glow {
  position: absolute !important;
  right: -100px !important;
  top: -100px !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.ab-cta-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 60px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
}
.ab-cta-h2 {
  font-family: var(--f-title) !important;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
}
.ab-cta-h2 em {
  font-style: italic !important;
  color: var(--c5) !important;
  font-family: var(--f-sub) !important;
}
.ab-cta-sub {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 300 !important;
  margin: 0 !important;
}
.ab-cta-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 200px !important;
  align-items: stretch !important;
}
.ab-cta-note {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-align: center !important;
}
.ab-btn-white {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: var(--c2) !important;
  padding: 13px 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  min-height: 44px !important;
}
.ab-btn-white:hover { background: var(--pale) !important; transform: translateY(-2px) !important; }

.ab-btn-wa-band {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--wa) !important;
  color: #fff !important;
  padding: 13px 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  min-height: 44px !important;
}
.ab-btn-wa-band:hover { background: #1ebe5a !important; transform: translateY(-2px) !important; }

/* ══════════════════════════════════════════════════════
   BREAKPOINTS
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ab-intro-grid { grid-template-columns: 320px 1fr !important; gap: 40px !important; }
  .ab-story-grid,
  .ab-decisions-grid,
  .ab-tech-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .ab-cta-inner { gap: 40px !important; }
}

@media (max-width: 768px) {
  .ab-hero { min-height: 44vh !important; }
  .ab-hero-inner { padding: 48px 20px 48px !important; }
  .ab-h1 { font-size: clamp(2.4rem, 8vw, 3.5rem) !important; }
  .ab-intro { padding: 56px 0 !important; }
  .ab-intro-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ab-doctor-photo { max-width: 400px !important; margin: 0 auto !important; }
  .ab-story { padding: 56px 0 !important; }
  .ab-story-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-top: 32px !important; }
  .ab-decisions { padding: 56px 0 !important; }
  .ab-decisions-grid { grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 32px !important; }
  .ab-tech { padding: 56px 0 !important; }
  .ab-tech-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 32px !important; }
  .ab-cta-band { padding: 56px 0 !important; }
  .ab-cta-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ab-cta-actions { flex-direction: row !important; flex-wrap: wrap !important; }
  .ab-btn-white,
  .ab-btn-wa-band { flex: 1 !important; min-width: 140px !important; }
}

@media (max-width: 600px) {
  .ab-creds { grid-template-columns: 1fr !important; }
  .ab-cta-row { flex-direction: column !important; }
  .ab-btn-primary,
  .ab-btn-wa { justify-content: center !important; width: 100% !important; }
  .ab-cta-actions { flex-direction: column !important; }
  .ab-btn-white,
  .ab-btn-wa-band { width: 100% !important; }
}

@media (max-width: 375px) {
  .ab-h1 { font-size: 2.2rem !important; }
  .ab-decision-card,
  .ab-tech-card { padding: 20px !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .ab-hero { min-height: unset !important; }
}/* End custom CSS */