:root { --teal:#00A099;
--teal-dark:#00807B;
--teal-soft:#E8F8F7;
--teal-glow:rgba(0,160,153,.15);
--purple:#6D3FD3;
--purple-dark:#5A2FBF;
--purple-soft:#F1EBFF;
--purple-glow:rgba(109,63,211,.15);
--pink:#F05AA0;
--pink-soft:#FFF0F6;
--green:#20B26B;
--green-dark:#168F59;
--blue:#3B82F6;
--navy:#111A3C;
--text:#4B5572;
--text-light:#7A85A3;
--line:#E8EDF3;
--soft:#F8FAFC;
--shadow-sm:0 2px 8px rgba(26,46,80,.05);
--shadow:0 7px 22px rgba(26,46,80,.08);
--shadow-lg:0 18px 45px rgba(26,46,80,.12);
--radius-sm:8px;
--radius-md:10px;
--radius:12px;
--radius-lg:18px;
--radius-full:999px;
--transition:.25s cubic-bezier(.4,0,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:#F5F8FB; color:var(--navy); font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif; line-height:1.6; padding-bottom:76px; -webkit-font-smoothing:antialiased; }
.container {margin-top: 65px;overflow: auto}
a { text-decoration:none; color:inherit; transition:var(--transition); }
button,input,select,textarea { font:inherit; outline:none; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
[hidden] { display:none!important; }
main { width:100%; max-width:720px; margin:0 auto; background:#fff; box-shadow:0 14px 42px rgba(20,43,73,.06); overflow:hidden; }
.site-header { height:72px; background:#fff; border-bottom:1px solid #EDF1F5; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; position:sticky; top:0; z-index:70; }
.brand img { width:142px; display:block; }
.desktop-nav,.header-cta,.desktop-bottom-bar { display:none; }
.header-actions { display:flex; align-items:center; gap:10px; }
.language-btn,.menu-btn,.nav-dropdown-toggle { border:0; background:transparent; color:var(--navy); font-weight:700; }
.menu-btn { width:34px; display:flex; flex-direction:column; gap:5px; padding:8px 4px; }
.menu-btn span { display:block; height:2px; background:var(--navy); border-radius:4px; }
.mobile-drawer { position:fixed; inset:0 0 0 22%; z-index:100; background:#fff; padding:66px 26px 30px; transform:translateX(110%); transition:.25s; box-shadow:-18px 0 38px rgba(0,0,0,.14); overflow:auto; }
.mobile-drawer.open { transform:none; }
.drawer-close { position:absolute; right:20px; top:14px; border:0; background:none; font-size:34px; }
.mobile-drawer>a,.mobile-treatments-toggle { width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--navy); font-weight:700; text-align:left; }
.mobile-treatment-links { display:none; padding-left:12px; background:#FAFBFD; }
.mobile-treatment-links.open { display:block; }
.mobile-treatment-links a { display:block; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; }
.hero { display:grid; grid-template-columns:1fr; min-height:430px; background:linear-gradient(135deg,#F7FFFF 0%,#fff 44%,#F7FBFC 100%); position:relative; overflow:hidden; }
.hero-copy { padding:36px 18px 26px; z-index:2; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { display:inline-block; font-size:12px; letter-spacing:1.5px; font-weight:800; color:var(--teal); background:var(--teal-soft); padding:6px 14px; border-radius:var(--radius-full); width:fit-content; margin-bottom:14px; text-transform:uppercase; }
.hero h1 { font-size:28px; line-height:1.15; letter-spacing:-.8px; margin:0 0 16px; font-weight:800; }
.hero h1 span { color:var(--teal); position:relative; }
.hero h1 span::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:6px; background:var(--teal-glow); border-radius:3px; z-index:-1; }
.hero p { font-size:14.5px; line-height:1.65; color:var(--text); max-width:340px; margin:0 0 22px; }
.hero-actions { display:grid; gap:10px; max-width:340px; }
.hero-media { position:relative; min-height:220px; overflow:hidden; }
.hero-media:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.7) 20%,transparent 55%); z-index:1; pointer-events:none; }
:is([dir="rtl"], html[lang="fa"], html[lang="ar"]) .hero-media:before { background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.7) 20%,transparent 55%); }
.hero-media>img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-note { position:absolute; z-index:2; left:8px; top:50px; color:var(--teal); font-style:italic; font-size:15px; line-height:1.45; font-weight:700; background:rgba(255,255,255,.85); padding:4px 10px; border-radius:6px; }
.hero-bubble { position:absolute; z-index:2; right:8px; bottom:55px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-radius:var(--radius-full); padding:10px 14px 10px 8px; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-lg); animation:float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hero-bubble img { width:48px; height:48px; }
.hero-bubble strong { font-size:11.5px; line-height:1.3; color:var(--teal-dark); font-weight:800; }
.micro-trust { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; color:var(--text-light); font-size:12px; font-weight:700; }
.btn { min-height:48px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:700; padding:0 18px; transition:var(--transition); border:1.5px solid transparent; cursor:pointer; }
.btn:hover { transform:translateY(-2px); }
.btn-primary,.btn.primary { background:linear-gradient(135deg,var(--teal-dark),var(--teal)); color:#fff; box-shadow:0 6px 16px rgba(0,160,153,.25); }
.btn-outline,.btn.outline { border-color:var(--purple); color:var(--purple); background:#fff; }
.btn-outline:hover,.btn.outline:hover { background:var(--purple-soft); }
.btn.whatsapp-outline,.whatsapp-outline { border-color:var(--green); color:var(--green-dark); background:#fff; }
.btn.whatsapp-outline:hover,.whatsapp-outline:hover { background:var(--green); color:#fff; }
.trust-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:20px 16px; }
.trust-grid article { min-height:140px; border:1px solid var(--line); border-radius:var(--radius); text-align:center; padding:16px 10px; background:#fff; box-shadow:var(--shadow-sm); transition:var(--transition); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.trust-grid article:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--teal-soft); }
.trust-grid img { width:68px; height:68px; margin:0 auto 6px; }
.trust-grid h3 { font-size:13.5px; line-height:1.3; margin:0 0 6px; font-weight:800; }
.trust-grid p { font-size:12px; line-height:1.45; color:var(--text); margin:0; }
.why-grid,.surr-benefit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; width:100%; box-sizing:border-box; margin:10px 0; }
.why-grid article,.surr-benefit-grid article { border:1px solid var(--line); border-radius:var(--radius); text-align:center; padding:16px 12px 14px; box-shadow:var(--shadow-sm); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; overflow:hidden; transition:var(--transition); }
.why-grid article:hover,.surr-benefit-grid article:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.why-grid img,.surr-benefit-grid img { width:46px; height:46px; margin:0 auto 8px; flex-shrink:0; }
.why-grid h3,.surr-benefit-grid h3 { font-size:13.5px; font-weight:800; line-height:1.35; margin:0 0 6px; color:var(--navy); word-break:break-word; }
.why-grid p,.surr-benefit-grid p { font-size:12.5px; line-height:1.5; color:var(--text); margin:0; word-break:break-word; }
.section { padding:24px 16px 18px; }
.section-heading,.faq-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.section-heading h2,.section h2,.related-section h2,.faq-heading h2,.quick h2,.related h2 { font-size:19px; margin:0 0 14px; display:flex; align-items:center; gap:8px; font-weight:800; line-height:1.3; }
.section-heading h2 img,.section h2 img,.related-section h2 img,.faq-heading h2 img,.quick h2 img,.related h2 img { width:24px!important; height:24px!important; max-width:24px; max-height:24px; object-fit:contain; flex-shrink:0; margin:0; display:inline-block; vertical-align:middle; }
.section-heading>a,.faq-heading>a { font-size:13px; color:var(--teal); font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.split-section { display:grid; grid-template-columns:1fr; gap:22px; width:100%; }
.about-card { display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center; }
.about-card>img { width:110px; height:110px; border-radius:50%; object-fit:cover; border:6px solid var(--purple-soft); }
.about-card p { font-size:13.5px; line-height:1.6; color:var(--text); margin:0 0 8px; }
.about-card a,.context-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--teal); font-weight:800; }
.ivf-timeline,.ivf-journey,.journey,.mini-timeline { display:flex; align-items:flex-start; justify-content:space-between; position:relative; overflow-x:auto; scrollbar-width:none; gap:8px; padding:10px 0; width:100%; }
.ivf-timeline::-webkit-scrollbar,.ivf-journey::-webkit-scrollbar,.journey::-webkit-scrollbar { display:none; }
.ivf-timeline:before,.ivf-journey:before,.journey:before,.mini-timeline:before { content:""; position:absolute; left:6%; right:6%; top:32px; border-top:2px dashed #CFE1F1; z-index:0; }
.ivf-timeline article,.ivf-journey article,.journey article,.mini-timeline article { flex:0 0 135px; text-align:center; position:relative; z-index:1; min-width:130px; }
.step,.dot,.number { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11.5px; font-weight:800; margin:0 auto 6px; box-shadow:0 3px 8px rgba(0,0,0,.12); }
.teal { background:var(--teal); }
.purple-bg { background:var(--purple); }
.pink-bg { background:var(--pink); }
.ivf-timeline img,.ivf-journey img,.journey img,.mini-timeline img { width:48px; height:48px; background:#fff; border-radius:12px; padding:6px; margin:0 auto 6px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.ivf-timeline h3,.ivf-journey h3,.journey h3,.mini-timeline h3 { font-size:13px; line-height:1.3; margin:0 0 4px; font-weight:800; }
.ivf-timeline p,.ivf-journey p,.journey p,.mini-timeline p { font-size:12px; line-height:1.45; color:var(--text); margin:0; }
.arrow { color:#66AEE1; font-size:18px; padding-top:42px; flex-shrink:0; }
.package-grid,.ivf-package-grid { display:grid; grid-template-columns:1fr; gap:16px; width:100%; min-width:0; }
.package-card,.ivf-package-card { border:1px solid var(--line); border-radius:var(--radius); padding:24px 16px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; box-shadow:var(--shadow-sm); background:#fff; transition:var(--transition); }
.package-card:hover,.ivf-package-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--teal); }
.package-card img,.ivf-package-card img { width:54px; height:54px; margin-bottom:12px; }
.package-card h3,.ivf-package-card h3 { font-size:16px; font-weight:800; margin:0 0 10px; color:var(--navy); }
.package-card ul,.ivf-package-card ul { font-size:13.5px; line-height:1.65; text-align:left; width:100%; padding-left:20px; color:var(--text); margin:0 0 18px; }
.package-card ul li,.ivf-package-card ul li { margin-bottom:6px; }
.package-card>a,.ivf-package-card>a,.small-btn { margin-top:auto; width:100%; min-height:44px; border:1.5px solid var(--teal); border-radius:var(--radius-sm); color:var(--teal-dark); display:inline-flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700; background:#fff; }
.package-card>a.filled,.ivf-package-card>a.filled,.small-btn.filled { background:var(--purple); color:#fff; border-color:var(--purple); }
.ribbon { position:absolute; top:-12px; left:18%; right:18%; height:24px; background:linear-gradient(135deg,var(--purple),var(--purple-dark)); color:#fff; border-radius:var(--radius-full); font-size:11.5px; font-weight:800; display:grid; place-items:center; box-shadow:0 4px 10px var(--purple-glow); }
.comparison-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin:0 -4px; }
.comparison-table { width:100%; min-width:500px; border-collapse:collapse; font-size:12.5px; }
.comparison-table th { background:var(--teal-soft); color:var(--teal-dark); padding:10px 12px; text-align:left; font-weight:800; border-bottom:2px solid var(--teal); }
.comparison-table td { padding:10px 12px; border-top:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; color:var(--text); line-height:1.55; }
.story-cta { display:grid; grid-template-columns:1fr; margin:22px 16px; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.story-photo { position:relative; min-height:180px; overflow:hidden; }
.story-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.story-cta:hover .story-photo img { transform:scale(1.04); }
.story-photo span { position:absolute; left:16px; top:16px; color:#fff; font-style:italic; font-size:14px; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.story-copy { padding:20px 16px; }
.story-copy blockquote { font-size:13.5px; line-height:1.65; color:var(--text); margin:0; font-style:italic; padding-left:16px; border-left:3px solid var(--teal); }
.story-copy p { font-size:12px; color:var(--text-light); margin:8px 0 0; }
.story-dots { text-align:center; margin-top:12px; }
.story-dots span { display:inline-block; width:7px; height:7px; background:#C9D8E6; border-radius:50%; margin:0 3px; transition:var(--transition); }
.story-dots .active { background:var(--teal); width:20px; border-radius:var(--radius-full); }
.cta-panel { padding:22px 18px; background:linear-gradient(135deg,#EAF9F7 0%,#F3FAF9 100%); position:relative; overflow:hidden; }
.cta-panel h2 { font-size:19px; margin:0 0 8px; font-weight:800; }
.cta-panel p { font-size:13px; color:var(--text); margin:0 0 14px; line-height:1.6; }
.cta-actions { display:grid; grid-template-columns:1fr; gap:10px; }
.faq-grid,.faq-list { display:grid; grid-template-columns:1fr; gap:10px; width:100%; }
.faq-item,.ivf-faq-item,.faqs article { border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#fff; transition:var(--transition); box-shadow:var(--shadow-sm); width:100%; }
.faq-item:hover,.ivf-faq-item:hover,.faqs article:hover { border-color:var(--teal-soft); box-shadow:var(--shadow); }
.faq-item button,.ivf-faq-item button,.faq-q,.faqs button { width:100%; min-height:50px; background:#fff; border:0; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; color:var(--navy); font-size:13.5px; font-weight:700; transition:var(--transition); cursor:pointer; line-height:1.45; }
.faq-item button:before,.ivf-faq-item button:before,.faq-q:before { content:"✓"; color:var(--teal); font-weight:800; margin-right:6px; flex-shrink:0; }
.faq-item button span,.ivf-faq-item button span,.faq-q span { flex-shrink:0; transition:transform .3s ease; display:inline-flex; }
.faq-item.open button span,.ivf-faq-item.open button span,.faq-item.open .faq-q span { transform:rotate(180deg); }
.faq-answer,.faq-a { display:none; background:#FAFBFD; border-top:1px solid var(--line); padding:12px 16px 14px; }
.faq-item.open .faq-answer,.ivf-faq-item.open .faq-answer,.faq-item.open .faq-a { display:block; animation:faqFade .25s ease-in-out; }
@keyframes faqFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.faq-answer p,.faq-a p { margin:0; font-size:13px; line-height:1.7; color:var(--text); }
.final-cta { margin:24px 16px; padding:20px 16px; border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:repeat(1,1fr); background:linear-gradient(135deg,#EAFBFA,#F4F1FF); box-shadow:var(--shadow); position:relative; }
.final-photo { position:relative; min-height:180px; overflow:hidden; }
.final-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.final-photo span { position:absolute; left:14px; top:16px; color:#fff; font-size:15px; font-style:italic; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.final-copy { padding:20px 16px 8px; }
.final-copy h2 { font-size:19px; margin:0 0 6px; font-weight:800; }
.final-copy p { font-size:13.5px; line-height:1.6; color:var(--text); margin:0; }
.final-actions { padding:0 16px 20px; display:grid; grid-template-columns:1fr; gap:10px; }
.related,.related-section { margin:14px 16px 24px; padding:18px 16px; border-radius:var(--radius-lg); background:linear-gradient(135deg,#EFFBFA 0%,#F5F0FF 100%); }
.related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; }
.related-grid a { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); display:grid; grid-template-columns:34px 1fr 18px; align-items:center; gap:10px; padding:10px 12px; font-size:13px; font-weight:700; transition:var(--transition); color:var(--navy); box-shadow:0 3px 8px rgba(20,43,73,.04); min-width:0; }
.related-grid a:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--teal); }
.related-grid img:first-child { width:32px; height:32px; flex-shrink:0; }
.related-grid a>img:last-child { width:16px!important; height:16px!important; max-width:16px; max-height:16px; flex-shrink:0; opacity:.6; justify-self:end; margin:0; }
:is([dir="rtl"], html[lang="fa"], html[lang="ar"]) .related-grid a>img:last-child { transform:scaleX(-1); }
.mobile-actions,.sticky-actions,.mobile-sticky { position:fixed; left:0; right:0; bottom:0; max-width:720px; margin:auto; height:66px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); padding:8px 12px; display:flex; gap:8px; z-index:80; border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(0,0,0,.06); }
.mobile-actions a,.sticky-actions a,.mobile-sticky a { flex:1; border-radius:var(--radius-sm); color:#fff; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:800; transition:var(--transition); }
.assessment,.btn-primary,.mobile-actions a:first-child,.sticky-actions a.consultation,.mobile-sticky a:first-child { background:linear-gradient(135deg,var(--teal-dark),var(--teal)); }
.whatsapp,.sticky-actions a.whatsapp,.mobile-sticky a:last-child { background:linear-gradient(135deg,var(--green-dark),var(--green)); }
.field-grid label > span,
.form-step label > span,
.textarea-label > span,
.label-text {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.4;
}
.field-grid label > span b,
.form-step label > span b {color: #E23A5B;font-weight: 800;}
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="url"],input[type="date"],input[type="time"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: var(--navy);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 43, 73, 0.03);
    transition: border-color var(--transition),
                box-shadow var(--transition),
                background var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
textarea {min-height: 120px;padding: 12px 14px;resize: vertical;line-height: 1.6}
select {background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%234B5572' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");background-repeat: no-repeat;background-position: right 14px center;background-size: 12px;padding-right: 38px}
:is([dir="rtl"], html[lang="fa"], html[lang="ar"]) select {
    background-position: left 14px center;padding-right: 14px;padding-left: 38px
}
input::placeholder,
textarea::placeholder {color: #A8B3C7;font-weight: 400}
input:hover,
select:hover,
textarea:hover {
    border-color: #C9D6E5;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-glow);
    background: #fff;
    outline: none;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #E23A5B;
    box-shadow: 0 0 0 3px rgba(226, 58, 91, 0.12);
}
input:disabled,
select:disabled,
textarea:disabled {background: #F3F6FA;color: #96A1B8;cursor: not-allowed;
}
input[type="checkbox"],
input[type="radio"] {width: 18px;height: 18px;min-height: 18px;margin: 0;accent-color: var(--teal);cursor: pointer;flex-shrink: 0
}
.check-row input[type="checkbox"],
.inline-radio-group input[type="radio"],
.pill-checks input[type="checkbox"],
.choice-card input,
.icon-choice input {width: auto;min-height: auto
}
.error,
.group-error {display: block;color: #B83A50;font-size: 12px;line-height: 1.4;min-height: 14px;margin-top: 4px;font-weight: 600}
fieldset {border: 0;padding: 0;margin: 0 0 14px;min-width: 0}
legend {font-size: 13.5px;font-weight: 700;color: var(--navy);margin-bottom: 10px;padding: 0}
legend b {color: #E23A5B;font-weight: 800;}
.phone-wrap {display: grid;grid-template-columns: 130px 1fr; gap: 8px;}
.phone-wrap select {padding-left: 12px;padding-right: 32px;}
@media(max-width:400px) { .related-grid { grid-template-columns:1fr; } }
@media(min-width:640px) { .hero { grid-template-columns:1fr 1fr; min-height:460px; } .hero-copy { padding:40px 24px; } .hero h1 { font-size:36px; } .hero p { font-size:15px; } .hero-actions { grid-template-columns:1fr 1fr; } .trust-grid { grid-template-columns:repeat(4,1fr); gap:14px; padding:24px; } .section { padding:28px 24px 20px; } .section-heading h2,.support-title { font-size:19px; } .faq-grid { grid-template-columns:1fr 1fr; gap:12px; } .final-cta { margin:36px 24px; grid-template-columns: repeat(3,1fr); } .final-actions { grid-template-columns:1fr; } .package-grid,.ivf-package-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:768px) { .split-section { grid-template-columns:1fr; align-items:start; gap:24px; } .related-grid { grid-template-columns:repeat(3,1fr); gap:12px; } .cta-actions { grid-template-columns:1fr 1fr; } }
@media(min-width:900px) { body { padding-bottom:0; } main { max-width:1280px; margin:0 auto 70px; border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:0 18px 55px rgba(20,43,73,.07); } .site-header { max-width:1280px; margin:auto; height:82px; padding:9px 28px; } .brand img { width:165px; } .menu-btn { display:none; } .desktop-nav { display:flex; align-items:center; gap:24px; font-size:13px; font-weight:700; } .desktop-nav>a,.nav-dropdown-toggle { padding:15px 0; } .header-cta { display:inline-flex; background:var(--teal); color:#fff; padding:12px 18px; border-radius:8px; font-size:12px; font-weight:800; } .nav-dropdown { position:relative; } .dropdown-menu { position:absolute; left:-15px; top:46px; width:205px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px; box-shadow:0 15px 35px rgba(20,43,73,.14); opacity:0; visibility:hidden; transform:translateY(5px); transition:.18s; } .nav-dropdown:hover .dropdown-menu,.nav-dropdown.open .dropdown-menu { opacity:1; visibility:visible; transform:none; } .dropdown-menu a { display:block; padding:9px 10px; border-radius:6px; font-size:13px; } .dropdown-menu a:hover { background:var(--teal-soft); color:var(--teal-dark); } .hero { min-height:520px; grid-template-columns:49% 51%; } .hero-copy { padding:60px 40px 40px 56px; } .eyebrow { font-size:13px; } .hero h1 { font-size:48px; line-height:1.1; margin:16px 0 20px; } .hero p { font-size:17px; max-width:480px; margin-bottom:26px; } .hero-actions { display:flex; gap:14px; max-width:520px; } .hero-actions .btn { width:auto; min-width:230px; height:54px; font-size:14px; } .trust-grid { gap:20px; padding:32px 54px 24px; } .trust-grid article { min-height:190px; padding:24px 16px; }.trust-grid h3 { font-size:15px; } .trust-grid p { font-size:13px; } .section { padding:32px 54px 24px; } .section-heading h2,.section h2,.related-section h2 { font-size:22px; } .package-grid,.ivf-package-grid { grid-template-columns:repeat(3,1fr); gap:16px; } .why-grid { grid-template-columns:repeat(4,1fr); gap:14px; } .story-cta { grid-template-columns:1fr 1.2fr 1.6fr; margin:32px 54px; } .story-photo { min-height:240px; } .story-copy { padding:32px 24px; } .cta-panel { padding:36px 32px; border-top:none; border-left:1px solid var(--line); } .cta-panel h2 { font-size:24px; } .final-cta { margin:48px 54px; align-items:center; } .final-photo { min-height:240px; } .final-copy { padding:36px 30px; } .final-actions { padding:36px 30px; } .mobile-actions,.sticky-actions,.mobile-sticky { display:none; } .desktop-bottom-bar { margin:0 54px 30px; background:linear-gradient(90deg,var(--teal-dark),var(--teal)); height:52px; border-radius:var(--radius-sm); color:#fff; display:grid; grid-template-columns:1fr 1px 1fr; align-items:center; text-align:center; font-size:13.5px; font-weight:700; } .desktop-bottom-bar span { height:22px; background:rgba(255,255,255,.4); } .desktop-bottom-bar a { display:flex; justify-content:center; align-items:center; height:100%; } .related-grid { grid-template-columns:repeat(4,1fr); gap:12px; } .related-grid a { padding:12px 14px; font-size:13px; }.phone-wrap {grid-template-columns: 140px 1fr;}}
@media(min-width:1200px) { .site-header { height:86px; } .desktop-nav { gap:28px; font-size:14px; } .header-cta { font-size:13px; padding:13px 22px; } .hero { min-height:550px; } .hero-copy { padding-left:70px; padding-top:60px; } .hero h1 { font-size:54px; } .hero p { font-size:18px; } .trust-grid,.section { padding-left:60px; padding-right:60px; } .story-cta,.related-section,.final-cta { margin-left:60px; margin-right:60px; } .desktop-bottom-bar { margin-left:60px; margin-right:60px; } }