:root{
  --mf-primary:#0b6aa6;
  --mf-primary-2:#0a5e95;
  --mf-light:#f4f8fc;
  --mf-card:#0d6ea8;
  --mf-text:#0b2233;
  --mf-muted:#6b7a88;
  --hero-overlay: rgba(0, 38, 64, .55);
  --hero-bg: none; /* can be overridden inline */
}

body{
  font-family:"Cairo",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#fff;
  color:var(--mf-text);
}

a{ color:inherit; }

/* Top bar (buttons on the left, logo on the right — like the default Mediflow reference) */
.topbar{
  position:relative;
  margin-top:0;
  z-index:50;
}
.topbar-inner{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  direction:ltr; /* keep layout like reference (actions left, logo right) */

background: rgba(255,255,255,.92);
  padding:10px 14px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
  direction:ltr;
}
.topbar-actions > a{ direction:rtl; }
.topbar-brand{ direction:rtl; }
.pill-btn{
  border:0;
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  background:linear-gradient(180deg, #3bb6ee, #0b6aa6);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.pill-btn.secondary{
  background:linear-gradient(180deg, #0f7db8, #0b5f94);
}

.hero{
  position:relative;
  background:#fff;
}

/* Background area starts under the header and fills the hero block */
.hero-bg{
  position:relative;
  min-height: 560px;
  background-color:#0b5f94;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  /* keep a small gap under the topbar without moving the header itself */
  margin-top: 14px;
  padding:18px 0 48px; /* spacing inside hero only */
}
.hero-bg::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:inherit;
  background-size:cover;
  background-position:center;
  filter: blur(2.5px);
  transform: scale(1.05);
  z-index:0;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,35,60,.35), rgba(0,25,45,.65));
  z-index:1;
}
.hero-bg > *{
  position:relative;
  z-index:2;
}

.hero .container{
  width:min(1180px, calc(100% - 32px));
}

.hero-logo{
  width:120px;
  height:auto;
  border-radius:8px;
  background:transparent;
  padding:0;
  box-shadow:none;
}

.hero-grid{
  display:flex;
  flex-direction:row; /* مع RTL: أول عنصر يمين (الهيرو)، والفورم يسار — مطابق للريفيرنس */
  gap:48px;
  align-items:center;
}
@media (max-width: 992px){
  .hero-grid{ flex-direction:column; }
  .hero-bg{ min-height:auto; padding-top:22px; }
  .topbar{ margin-top:0; }
}


/* a tiny breathing space so the booking card doesn't hug the header */
.book-card{ margin-top:18px; }

.hero-copy-card{
  padding:0;
  background:transparent;
  border:0;
}

.hero-sub-strong{
  font-weight:900;
  color:rgba(255,255,255,.92);
  margin-top:8px;
}

.form-hint{
  margin-top:6px;
  font-weight:700;
  color:#4c6477;
  font-size:12px;
}

.book-card{
  /* Wider booking card to visually align with the header width */
  width:520px;
  max-width:100%;
  background:linear-gradient(180deg, rgba(15,125,184,.86), rgba(11,95,148,.88));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 26px 60px rgba(0,0,0,.28);
  padding:18px 18px 16px;
  backdrop-filter: blur(8px);
}
@media (max-width: 1200px){
  .book-card{ width:480px; }
}
@media (max-width: 1200px){
  .book-card{ width:480px; }
}
@media (max-width: 992px){
  .book-card{ width:100%; }
}
.book-card h3{
  font-weight:900;
  margin:0 0 12px;
  color:#eaf6ff;
  text-align:center;
}
.book-card .form-label{
  color:#eaf6ff;
  font-weight:800;
  margin-bottom:6px;
}
.form-control, .form-select{
  border-radius:12px;
  padding:12px 12px;
  border:0;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.08);
}
.btn-book{
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
  background:linear-gradient(180deg, #6ad0ff, #1a86c6);
  border:0;
}
.hero-title{
  color:#fff;
  font-weight:900;
  font-size: clamp(28px, 4vw, 44px);
  line-height:1.2;
  text-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.hero-sub{
  margin-top:12px;
  color:rgba(255,255,255,.92);
  font-weight:700;
  max-width: 60ch;
  text-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.hero-text{
  font-size:16px;
  line-height:1.85;
}

.section{
  padding:64px 0;
}
.section-title{
  font-weight:900;
  color:#0b4f78;
  text-align:center;
  margin:0 0 26px;
}
.services{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  display:grid;
  /* Responsive grid that adapts to the number of items (we cap it at 5 in index.php) */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:18px;
}
@media (max-width: 1100px){ .services{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px){ .services{ grid-template-columns: repeat(2, 1fr); } }

.service-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
.service-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  background:linear-gradient(180deg, #1d93cf, #0b5f94);
  box-shadow:0 14px 34px rgba(10, 90, 140, .22);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:22px;
}
.service-item .label{
  font-weight:800;
  color:#0b4f78;
}

.strip{
  background:linear-gradient(180deg, #f2f7fc, #ffffff);
}

.stories-wrap{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
}
@media (max-width: 992px){ .stories-wrap{ grid-template-columns:1fr; } }

.story-card{
  background:linear-gradient(180deg, #0f7db8, #0b5f94);
  border-radius:14px;
  padding:16px;
  color:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
  min-height:150px;
}
.story-card .small{
  opacity:.9;
  font-weight:600;
  font-size:13px;
  line-height:1.6;
}
.story-card .name{
  margin-top:10px;
  font-weight:900;
}
.article-card{
  background:#eaf4fb;
  border-radius:14px;
  padding:14px;
  height:100%;
  border:1px solid #d5e9f6;
}
.article-card h5{
  margin:8px 0 6px;
  font-weight:900;
  color:#0b4f78;
}
.article-meta{
  color:var(--mf-muted);
  font-weight:700;
  font-size:12px;
}

.footer{
  background:linear-gradient(180deg, #0f7db8, #0b5f94);
  color:#fff;
  padding:34px 0 24px;
  position:relative;
}
.footer .container{
  width:min(1180px, calc(100% - 32px));
}
.footer a{ color:#fff; text-decoration:none; }
.footer h6{
  font-weight:900;
  margin-bottom:10px;
}
.footer .muted{ opacity:.9; }
.map-embed{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
/* === FINAL WHITE HEADER FIX === */
.mf-header{
  position:fixed;
  top:0;left:0;right:0;
  background:#ffffff;
  z-index:9999;
  border-bottom:3px solid #1da1d2;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.mf-hero{
  padding-top:120px;
}


/* === v11: make header like reference (white fixed bar) === */
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:9999 !important;
  background:#fff !important;
  border-bottom:3px solid #1a86c6 !important; /* same as booking button bottom color */
  box-shadow:0 6px 18px rgba(0,0,0,.10) !important;
}
.topbar-inner{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:14px 16px !important;
  width:min(1180px, calc(100% - 32px)) !important;
}
.hero{
  padding-top:0 !important; /* background should NOT go under the header */
}

/* When the header is fixed (override section), push the hero background to start under it */
.hero-bg{
  margin-top:92px !important; /* equals fixed header height/spacing */
}

/* === HERO BACKGROUND FIT (FULL IMAGE ALWAYS VISIBLE) === */
.mf-hero{
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  background-color: #e6f1f7 !important;
  min-height: 520px;
}
@media (max-width: 992px){
  .mf-hero{ min-height: 420px; }
}
@media (max-width: 576px){
  .mf-hero{ min-height: 360px; }
}

/* === GOLD POLISH: Wider Booking Box === */
.booking-box,
.appointment-box,
.mf-booking{
  width: 430px;
  max-width: 100%;
}

@media (max-width: 1200px){
  .booking-box,
  .appointment-box,
  .mf-booking{
    width: 400px;
  }
}

@media (max-width: 992px){
  .booking-box,
  .appointment-box,
  .mf-booking{
    width: 100%;
  }
}