/* Samarth IVF — base layer reproducing the live samarthivf.com (Astra + Elementor) look.
   Section blocks follow Elementor's container model: full-width wrapper with 10px padding, rounded box,
   boxed content 1250px. Values measured on the live site at 1440px and 1024px. */

/* Site fonts (owner, 28 Oct 2026): Montserrat, Archivo and K2D only. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/montserrat-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('/fonts/montserrat-latin-wght-italic.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/archivo-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-style: normal; font-display: swap; font-weight: 500; src: url('/fonts/k2d-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-style: normal; font-display: swap; font-weight: 700; src: url('/fonts/k2d-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-style: normal; font-display: swap; font-weight: 800; src: url('/fonts/k2d-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-style: italic; font-display: swap; font-weight: 600; src: url('/fonts/k2d-latin-600-italic.woff2') format('woff2'); }

:root {
  --sv-purple: #563084;      /* astglobalcolor0 / 2 */
  --sv-violet: #8b2b89;      /* astglobalcolor1 */
  --sv-slate: #334155;       /* astglobalcolor3 */
  --sv-ghost: #f6f8ff;       /* e-global 47bd502 / secondary */
  --sv-line: #e4e4ff;        /* e-global cefc03b */
  --sv-accent: #7468f1;      /* e-global accent */
  --sv-soft: #8f86f3;        /* e-global ddb62ca */
  --sv-ink: #131319;         /* e-global primary */
  --sv-night: #1a0f2e;       /* services section */
  --sv-grad: linear-gradient(122deg, #563084 0%, #8b2b89 100%);
  --sv-content: 1250px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Lenis smooth scrolling (motion.js) takes over from the browser's own. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: #fff;
  color: var(--sv-slate);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--sv-purple); }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
.sv-skip { position: absolute; left: -999px; top: 8px; z-index: 100000; background: #fff; color: var(--sv-purple); padding: 8px 14px; border-radius: 8px; }
.sv-skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--sv-violet); outline-offset: 2px; }
@media (max-width: 1024px) { html { font-size: 91.2%; } }

/* Top bar (desktop only) */
.sv-topbar { background: #fff; box-shadow: 0 4px 10px rgba(173, 156, 238, 0.15); padding: 0 20px; }
.sv-topbar ul { max-width: 1480px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 6px; list-style: none; padding: 10px 0; min-height: 45px; }
.sv-topbar li { display: flex; align-items: center; }
.sv-topbar a { display: inline-flex; align-items: center; gap: 6px; padding: 0 3px; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; color: var(--sv-purple); text-decoration: none; transition: color 0.3s; }
.sv-topbar a:hover { color: #ff5995; }
.sv-topbar i { width: 4px; height: 4px; border-radius: 50%; background: var(--sv-violet); }
@media (max-width: 1024px) { .sv-topbar { display: none; } }

/* Sticky header shell around the ported nav */
.sv-header { position: sticky; top: 0; z-index: 9999; background: rgba(246, 248, 255, 0.95); border-radius: 0 0 30px 30px; box-shadow: 0 0 10px rgba(145, 87, 255, 0.35); padding: 21px 0; min-height: 10vh; display: flex; align-items: center; transition: background 0.3s; }
.sv-header:hover { background: var(--sv-ghost); }
.sv-header.is-scrolled { background: rgba(250, 248, 255, 0.78); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 12px 34px -18px rgba(86, 48, 132, 0.45); }
.sv-header #sivf-nav { position: relative; width: 100%; margin-left: 0; }
/* Live: 14px/20px padding around a 10vh nav row on tablet and phone. */
.sv-header > #sivf-nav { min-height: 10vh; display: flex; align-items: center; }
.sv-header > #sivf-nav > .sn-wrap { width: 100%; }
@media (max-width: 1024px) { .sv-header { padding: 14px 20px; } }
@media (max-width: 767px) { .sv-header { border-radius: 0 0 18px 18px; } }

/* Section wrapper: Elementor top-level container (10px padding) holding a rounded box */
.sv-sec { padding: 10px; }
.sv-box { border-radius: 25px; position: relative; overflow: hidden; }
.sv-inner { width: 100%; max-width: var(--sv-content); margin: 0 auto; }
.sv-sec--gap { margin-top: 30px; }

/* Shared widgets */
.sv-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; padding: 6px 9px 6px 0; color: var(--sv-slate); }
.sv-eyebrow::before { content: ''; width: 14px; height: 2px; background: var(--sv-purple); border-radius: 2px; }
.sv-title { font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.1em; color: #000; }
.sv-title span { color: var(--sv-violet); }
.sv-btn { display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px 5px 20px; border: 1px solid transparent; border-radius: 25px; background: var(--sv-grad); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.65; text-decoration: none; transition: transform 0.3s, background 0.3s, color 0.3s; cursor: pointer; }
.sv-btn:hover { transform: translateY(-5px); color: #fff; }
.sv-btn svg { width: 25px; height: 25px; fill: currentColor; flex: none; }
.sv-btn--bold { font-weight: 700; }
.sv-btn--bold svg { width: 30px; height: 30px; }
.sv-btn--line { background: transparent; color: var(--sv-purple); border-color: var(--sv-purple); }
.sv-btn--line svg { fill: var(--sv-purple); }
.sv-btn--line:hover { background: var(--sv-purple); color: #fff; transform: none; }
.sv-btn--line:hover svg { fill: #fff; }

/* Footer wrapper (live: 50px top margin, gradient, rounded top) */
.sv-footer { margin-top: 50px; border-radius: 30px 38px 0 0; background: linear-gradient(62deg, #563084 0%, #131319 100%); overflow: hidden; }
.sv-footer #sivf-ft { width: 100%; margin-left: 0; }
.sv-legal { max-width: 1480px; margin: 0 auto; padding: 14px 40px 22px; font-family: 'Archivo', sans-serif; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); border-top: 1px solid rgba(124, 58, 237, 0.2); }
.sv-legal p { margin: 0 0 4px; }
.sv-legal strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Shared: screen-reader-only text and the purple booking banner used at the end of inner pages. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 44px 52px; background: linear-gradient(130deg, #563084 0%, #8b2b89 100%); }
.bl-cta h2 { margin: 0 0 6px; font-family: 'K2D', sans-serif; font-size: 30px; font-weight: 700; color: #fff; }
.bl-cta p { margin: 0; max-width: 560px; font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.bl-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px; background: #fff; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--sv-purple); text-decoration: none; transition: transform 0.25s; }
.bl-cta-btn:hover { transform: translateY(-2px); }
.bl-cta-btn svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 767px) {
  .bl-cta { padding: 30px 22px; }
  .bl-cta h2 { font-size: 24px; }
}

/* Scroll reveal (motion.js): fade up with a long, soft ease. html.rv is set in <head> unless reduced motion is on;
   the fallback animation shows everything after 2.5 s if the script never runs (rv-live switches it off). */
html.rv [data-rv] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--rv-d, 0) * 90ms); animation: sv-rv-fallback 0.6s 2.5s forwards; }
html.rv.rv-live [data-rv] { animation: none; }
html.rv [data-rv].is-in { opacity: 1; transform: none; animation: none; }
@keyframes sv-rv-fallback { to { opacity: 1; transform: none; } }
html.rv-live img[loading="lazy"] { opacity: 0; transition: opacity 0.8s ease; }
html.rv-live img[loading="lazy"].is-loaded { opacity: 1; }

/* Page-change loader (motion.js): shown while leaving for another page of the site, and on arrival until the
   page is ready. html.sv-loading is set in <head>; the fallback animation clears it after 3.5 s regardless. */
.sv-loader { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(60% 60% at 50% 45%, #ffffff 0%, #f8f2ff 45%, #efe4fb 100%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.45s; }
html.sv-loading .sv-loader, .sv-loader.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }
html.sv-loading .sv-loader { animation: sv-loader-away 0.45s 3.5s forwards; }
@keyframes sv-loader-away { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.sv-loader-in { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.sv-loader-glow { position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, rgba(250, 232, 255, 1) 0%, rgba(214, 186, 245, 0.55) 55%, rgba(214, 186, 245, 0) 72%); animation: sv-glow 1.6s ease-in-out infinite; }
.sv-loader-mark { position: relative; width: 72px; height: 72px; animation: sv-breathe 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 16px rgba(86, 48, 132, 0.25)); }
.sv-loader-orbit { position: absolute; inset: 0; animation: sv-orbit 3s linear infinite; }
.sv-loader-orbit svg { position: absolute; top: 2px; left: 50%; width: 20px; height: 20px; margin-left: -10px; fill: #8b2b89; transform-origin: 10px 73px; animation: sv-heart 1.6s ease-in-out infinite; }
.sv-loader-orbit svg:nth-child(2) { transform: rotate(120deg); fill: #c06bbf; animation-delay: -0.53s; }
.sv-loader-orbit svg:nth-child(3) { transform: rotate(240deg); fill: #563084; animation-delay: -1.06s; }
.sv-loader-tag { margin: 0; font-family: 'K2D', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--sv-purple); opacity: 0.85; animation: sv-tag 1.6s ease-in-out infinite; }
.sv-loader-bar { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--sv-grad); transform-origin: 0 50%; transform: scaleX(0); }
html.sv-loading .sv-loader-bar, .sv-loader.is-on .sv-loader-bar { animation: sv-bar 2.4s cubic-bezier(0.1, 0.7, 0.2, 1) forwards; }
@keyframes sv-breathe { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.04); } }
@keyframes sv-glow { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes sv-orbit { to { transform: rotate(360deg); } }
@keyframes sv-heart { 0%, 100% { scale: 0.85; } 50% { scale: 1.15; } }
@keyframes sv-tag { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes sv-bar { to { transform: scaleX(0.92); } }
@media (prefers-reduced-motion: reduce) {
  .sv-loader-glow, .sv-loader-mark, .sv-loader-orbit, .sv-loader-orbit svg, .sv-loader-tag, .sv-loader-bar { animation: none !important; }
  .sv-loader-orbit { display: none; }
}

/* Logos are served as small WebP copies inside <picture>; keep the wrapper out of the inline flow. */
#sivf-nav .sn-logo picture, #sivf-ft picture { display: block; }