/* ═══════════════════════════════════════════════
   DR. MOHAMMED ALSHEHRI — SHARED STYLESHEET
   Theme: #4e648b (muted slate blue)
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
  --blue:        #4e648b;
  --blue-dark:   #364661;
  --blue-mid:    #556d98;
  --blue-light:  #6d7f9f;
  --accent:      #7486a4;
  --accent-lt:   #98a5bb;
  --navy:        #273245;
  --navy-mid:    #32415a;
  --white:       #ffffff;
  --off:         #f6f7f9;
  --g100:        #eef0f4;
  --g200:        #dde2eb;
  --g400:        #94a3b8;
  --g600:        #475569;
  --g800:        #1e293b;
  --font-ar:     'Tajawal', sans-serif;
  --font-en:     'DM Sans', sans-serif;
  --font-disp:   'Cormorant Garamond', serif;
  --ease:        cubic-bezier(0.16,1,0.3,1);
  --tr:          all 0.42s var(--ease);
  --radius:      18px;
  --shadow:      0 8px 40px rgba(39,50,69,0.12);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-ar);
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;
  direction: ltr;
}
a { text-decoration: none; color: inherit; }
img { display: block; }

/* ── SCROLL PROGRESS ── */
#scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none; }
#scroll-bar { height:100%; background:linear-gradient(90deg,var(--blue),var(--accent)); width:0%; transition:width .1s linear; }

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: 96px; padding: 0 52px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(78,100,139,0.08);
  transition: var(--tr);
}
nav.scrolled { box-shadow: 0 4px 28px rgba(39,50,69,0.1); height:84px; }

.nav-logo { display:flex; align-items:center; }
.nav-logo img {
  height:84px; width:auto; object-fit:contain;
  transition: height .3s var(--ease);
}
nav.scrolled .nav-logo img { height:72px; }
/* Hide the textual logo block — the image already contains the name */
.nav-logo-text { display:none; }

.nav-links { display:flex; gap:4px; list-style:none; }
.nav-links a {
  font-family:var(--font-en); font-size:13.5px; font-weight:500;
  color:var(--g600); padding:8px 13px; border-radius:9px; transition:var(--tr);
}
.nav-links a:hover { color:var(--blue); background:rgba(78,100,139,0.08); }
.nav-links a.active { color:var(--blue); font-weight:700; }
.nav-cta {
  background:var(--blue) !important; color:white !important;
  font-weight:600 !important; border-radius:10px !important;
}
.nav-cta:hover { background:var(--blue-dark) !important; box-shadow:0 4px 18px rgba(78,100,139,0.35) !important; transform:translateY(-1px); }

.nav-mobile-btn { display:none; background:none; border:none; cursor:pointer; font-size:22px; color:var(--navy); }

/* ── PAGE HERO BANNER (inner pages) ── */
.page-banner {
  padding: 156px 52px 70px;
  background: linear-gradient(140deg, #eef1f7 0%, #e2e7f0 50%, #f3f5f9 100%);
  position: relative; overflow: hidden;
}
.page-banner::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(78,100,139,0.10) 0%,transparent 65%);
  border-radius:50%;
}
.page-banner-inner { max-width:1200px; margin:0 auto; position:relative; }
.page-banner-tag {
  font-family:var(--font-en); font-size:11.5px; font-weight:600;
  color:var(--blue-light); text-transform:uppercase; letter-spacing:2px; margin-bottom:12px;
}
.page-banner-title {
  font-family:var(--font-en); font-size:clamp(28px,4vw,48px);
  font-weight:800; color:var(--navy); letter-spacing:-1px; line-height:1.1;
  margin-bottom:14px;
}
.page-banner-sub {
  font-family:var(--font-en); font-size:15px; color:var(--g600); max-width:580px; line-height:1.7;
}

/* ── SECTION ── */
.section { padding:90px 52px; }
.section-inner { max-width:1200px; margin:0 auto; }
.section-tag {
  font-family:var(--font-en); font-size:11.5px; font-weight:600;
  color:var(--blue-light); text-transform:uppercase; letter-spacing:2px; margin-bottom:8px;
}
.section-title {
  font-family:var(--font-en); font-size:clamp(22px,3vw,34px);
  font-weight:800; color:var(--navy); letter-spacing:-0.5px; margin-bottom:40px;
}

/* ── FOOTER ── */
footer {
  background:var(--navy); padding:24px 52px;
  display:flex; align-items:center; justify-content:space-between;
}
footer p { font-family:var(--font-en); font-size:12px; color:rgba(255,255,255,0.4); }
footer .ft-tag { color:rgba(255,255,255,0.6); font-style:italic; }
footer .ft-links { display:flex; gap:20px; }
footer .ft-links a {
  font-family:var(--font-en); font-size:12px; color:rgba(255,255,255,0.5);
  transition:var(--tr);
}
footer .ft-links a:hover { color:var(--accent-lt); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:1; } }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.06s; }
.reveal-d2 { transition-delay:.13s; }
.reveal-d3 { transition-delay:.20s; }
.reveal-d4 { transition-delay:.27s; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:30px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:white; padding:14px 26px;
  border-radius:12px; font-family:var(--font-en); font-size:14px;
  opacity:0; transition:all .4s var(--ease); z-index:99999;
  border-left:4px solid var(--accent); pointer-events:none;
  white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── MOBILE ── */
@media(max-width:900px){
  nav { padding:0 20px; height:78px; }
  nav.scrolled { height:68px; }
  .nav-logo img { height:62px; }
  nav.scrolled .nav-logo img { height:54px; }
  .nav-links { display:none; position:fixed; top:78px; left:0; right:0; background:white; flex-direction:column; padding:16px; border-bottom:1px solid var(--g100); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
  .nav-links.open { display:flex; }
  .nav-mobile-btn { display:block; }
  .section { padding:56px 20px; }
  .page-banner { padding:120px 20px 50px; }
  footer { flex-direction:column; gap:12px; text-align:center; padding:24px 20px; }
  footer .ft-links { justify-content:center; }
}