/* About page — rebuilt to match samarthivf.com/about-samarth-ivf/ (Elementor page 753). Measurements in
   comments are from the live site at 1440px. */

/* Shared bits */
.ab-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 10px; background: var(--sv-ghost); border: 1px solid var(--sv-line); border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; line-height: 25.2px; color: var(--sv-slate); }
.ab-badge svg { width: 14px; height: 14px; fill: none; stroke: var(--sv-purple); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-badge--center { align-self: center; }
.ab-h2 { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 500; line-height: 1.2; color: var(--sv-purple); }
.ab-h2 span { font-size: 40px; font-weight: 700; color: #000; }
.ab-center { text-align: center; }
.ab-lead { max-width: 850px; margin: 0 auto; font-family: 'Archivo', sans-serif; font-size: 14px; line-height: 24px; color: var(--sv-ink); text-align: center; }
.ab-text { font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 19.5px; color: var(--sv-slate); text-align: justify; }
.ab-text p { margin: 0 0 14px; }
.ab-ico { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 15px; background: var(--sv-line); color: var(--sv-purple); }
.ab-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-ico--glass { background: rgba(255, 255, 255, 0.18); color: var(--sv-ghost); }

/* 1. Hero — 630 tall, content 1250 wide: text 638 | video 573 */
.ab-hero { max-width: 1250px; min-height: 630px; margin: 0 auto; padding: 10px; display: grid; grid-template-columns: 638px 573px; justify-content: space-between; align-items: center; gap: 20px; }
.ab-hero-l { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 10px; }
.ab-h1 { margin: 0; font-family: 'K2D', sans-serif; font-size: 30px; font-weight: 500; line-height: 36px; color: #000; }
.ab-h1 span { display: inline-block; font-size: 32px; font-weight: 700; color: var(--sv-violet); }
.ab-intro { padding: 15px 15px 15px 20px; border-left: 5px solid var(--sv-purple); border-radius: 15px; background: var(--sv-line); font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 25.2px; color: var(--sv-slate); }
.ab-intro p { margin: 0; }
.ab-intro strong { color: #000; }
.ab-hero-r { position: relative; height: 522px; overflow: hidden; }
.ab-hero-r video { width: 100%; height: 100%; object-fit: cover; }

/* 2. Story + impact — box 1420×626, two 470 columns */
.ab-story { background: var(--sv-ghost); padding: 50px 40px; display: grid; grid-template-columns: 470px 470px; justify-content: center; gap: 59px; align-items: stretch; }
.ab-story-l { padding: 49px 10px 10px; }
.ab-story-l .ab-h2 { margin-bottom: 20px; }
.ab-impact { padding: 40px 63px 40px 40px; border-radius: 25px; background: linear-gradient(180deg, #8b2b89 0%, #563084 100%); color: #fff; display: flex; flex-direction: column; gap: 20px; }
.ab-impact h2 { font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 700; line-height: 36px; color: #fff; }
.ab-impact .ab-text { color: #fff; }

/* 3. Mission — three 397×360 cards */
.ab-mission { max-width: 1270px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.ab-cards3 { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; }
.ab-card { min-height: 360px; padding: 25px; border-radius: 25px; background: var(--sv-ghost); border: 1px solid rgba(86, 48, 132, 0.21); display: flex; flex-direction: column; gap: 15px; }
.ab-card h3, .ab-tcard h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--sv-purple); }
.ab-card hr, .ab-tcard hr { width: 74%; margin: 0; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.22); }
.ab-card p { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 19.5px; color: var(--sv-slate); }

/* 4. Core values — dark box, 2×2 grid of 610×204 cards, 30px gaps */
.ab-values { background: var(--sv-night); padding: 64px 75px 40px; display: flex; flex-direction: column; gap: 20px; }
.ab-values .ab-h2, .ab-values .ab-h2 span, .ab-values .ab-lead { color: #fff; }
.ab-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 1250px; width: 100%; margin: 0 auto; }
.ab-vcard { min-height: 204px; padding: 20px; border-radius: 15px; background: rgba(255, 255, 255, 0.18); border: 1px double var(--sv-line); box-shadow: 0 0 10px rgba(68, 54, 99, 0.29); }
.ab-vico { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 25px; background: #fff; color: var(--sv-purple); }
.ab-vico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-vcard h3 { margin: 0 0 10px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; line-height: 16.8px; color: #fff; }
.ab-vcard p { margin: 0; font-family: 'Archivo', sans-serif; font-size: 12px; line-height: 18px; color: #fff; }
.ab-quote { margin: 0 auto; max-width: 952px; font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 300; font-style: italic; line-height: 25.2px; color: #fff; text-align: center; }

/* 5. Team — 4 cards (285 wide in 305 slots) per view, arrows and dots */
.ab-team { background: var(--sv-ghost); padding: 50px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ab-team-h { font-family: 'Montserrat', sans-serif; font-size: 47px; font-weight: 400; line-height: 61.1px; color: var(--sv-purple); text-align: center; }
.ab-team-p { max-width: 1250px; margin: 0; padding: 0 10px; font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 19.5px; color: var(--sv-slate); text-align: center; }
.ab-car { position: relative; width: 100%; max-width: 1250px; padding-bottom: 30px; }
.ab-car-track { list-style: none; margin: 0; padding: 60px 0 0; align-items: flex-start; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.ab-car-track::-webkit-scrollbar { display: none; }
.ab-doc { flex: 0 0 25%; padding: 0 10px; scroll-snap-align: start; }
.ab-doc-card { display: flex; flex-direction: column; align-items: center; padding: 20px 20px 55px; border-radius: 25px; background: #fff; text-align: center; }
.ab-doc-card > a { display: block; }
.ab-doc img { width: 150px; height: 205px; object-fit: contain; }
.ab-doc h3 { margin: 15px 0 20px; font-family: 'Montserrat', sans-serif; font-size: 25px; font-weight: 400; line-height: 32.5px; color: var(--sv-purple); }
.ab-doc h3 a { color: inherit; text-decoration: none; }
.ab-doc p { margin: 0; font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 21px; color: var(--sv-slate); }
.ab-doc .ab-reg { margin-top: 8px; font-size: 12px; color: #8a8698; }
.ab-car-track { isolation: isolate; }
.ab-car-btn { position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--sv-purple); cursor: pointer; }
.ab-car-btn svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-car-prev { left: -40px; }
.ab-car-next { right: -40px; }
.ab-dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; }
.ab-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.2); cursor: pointer; }
.ab-dots button[aria-current='true'] { background: #000; }

/* 6. Treatments — 3×2 cards 397×344, the second raised and in gradient */
.ab-treat { background: #f8fafc; padding: 47px 0 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ab-treat-h { font-family: 'K2D', sans-serif; font-size: 39px; font-weight: 700; line-height: 46.8px; color: var(--sv-purple); text-align: center; }
.ab-tgrid { width: 100%; max-width: 1250px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; }
.ab-tcard { min-height: 344px; padding: 25px; border-radius: 25px; background: #fff; border: 1px solid rgba(86, 48, 132, 0.21); display: flex; flex-direction: column; gap: 15px; }
.ab-tcard h3 { font-size: 24px; line-height: 31.2px; }
.ab-tcard--hi { background: linear-gradient(157deg, #563084 0%, #8b2b89 100%); transform: translateY(-15px); }
.ab-tcard.ab-tcard--hi h3, .ab-tcard.ab-tcard--hi li { color: #fff; }
.ab-tcard--hi hr { border-top-color: rgba(255, 255, 255, 0.27); }
.ab-tcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5px; }
.ab-tcard li { display: flex; align-items: center; gap: 8px; font-family: 'Archivo', sans-serif; font-size: 18px; line-height: 25.2px; color: var(--sv-slate); }
.ab-tcard li i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--sv-purple); position: relative; }
.ab-tcard li i::after { content: ''; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border: solid var(--sv-purple); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ab-tcard.ab-tcard--hi li i, .ab-tcard.ab-tcard--hi li i::after { border-color: #fff; }
.ab-tcard ul.ab-regions { grid-template-columns: auto auto; grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start; column-gap: 21px; }
.ab-regions li svg { width: 14px; height: 14px; fill: none; stroke: var(--sv-purple); stroke-width: 2; }

/* 7. Appointment — heading in K2D on this page */
.ab-book { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 50px; padding-bottom: 50px; }
.ab-book-h { font-family: 'K2D', sans-serif; font-size: 43px; font-weight: 700; line-height: 51.6px; color: var(--sv-purple); text-align: center; }
.ab-book-w { width: 100%; max-width: 1203px; }

/* 8. Centres + map (same block as the homepage) */
.ab-ct { background: var(--sv-ghost); border: 1px solid var(--sv-purple); padding: 10px 0; }
.ab-ct-grid { max-width: 1250px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding: 0 10px; }
.ab-ct-l { padding: 10px; }

/* Tablet */
@media (max-width: 1024px) {
  .ab-hero { grid-template-columns: 1fr 1fr; padding: 20px; }
  .ab-hero-r { height: 420px; }
  .ab-story { grid-template-columns: 1fr 1fr; gap: 24px; padding: 40px 20px; }
  .ab-story-l { padding-top: 10px; }
  .ab-cards3, .ab-tgrid { grid-template-columns: 1fr 1fr; }
  .ab-values { padding: 50px 24px 32px; }
  .ab-doc { flex-basis: 33.333%; }
  .ab-car-prev { left: 4px; }
  .ab-car-next { right: 4px; }
}

/* Phone */
@media (max-width: 767px) {
  .ab-hero { grid-template-columns: 1fr; min-height: 0; padding: 20px 10px; }
  .ab-hero-r { height: 360px; }
  .ab-h2 { font-size: 24px; }
  .ab-h2 span { font-size: 26px; }
  .ab-story { grid-template-columns: 1fr; padding: 24px 16px; }
  .ab-impact { padding: 28px 22px; }
  .ab-impact h2 { font-size: 24px; line-height: 1.2; }
  .ab-cards3, .ab-tgrid, .ab-vgrid { grid-template-columns: 1fr; }
  .ab-card, .ab-tcard { min-height: 0; }
  .ab-tcard--hi { transform: none; }
  .ab-team-h { font-size: 30px; line-height: 1.2; padding: 0 12px; }
  .ab-doc { flex-basis: 100%; padding: 0 44px; }
  .ab-car-track { padding-top: 20px; }
  .ab-treat-h { font-size: 28px; line-height: 1.2; padding: 0 12px; }
  .ab-tcard li { font-size: 16px; }
  .ab-book-h { font-size: 28px; line-height: 1.2; }
  .ab-ct-grid { grid-template-columns: 1fr; }
}