:root{
  --bg:#f6f8fb;
  --bg-2:#eef2f7;
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#16c79a;
  --brand-2:#10b981;
  --accent:#0ea5e9;
  --mint-1:#c9fdf0;
  --mint-2:#b7f7f2;
  --mint-3:#bef4cf;
  --white:#ffffff;
  --shadow: 0 24px 60px rgba(15,23,42,.12);
  --shadow-sm: 0 10px 24px rgba(15,23,42,.08);
  --radius: 18px;
  --radius-lg: 22px;
  --maxw: 1200px;
}

/* Base */
*{box-sizing:border-box}
html{
  scroll-behavior: smooth
}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins","Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 75% 15%, #e9eef8 10%, rgba(233,238,248,0) 60%),
    linear-gradient(180deg, #ffffff, var(--bg));
  overflow-x:hidden;
}
img{
  max-width:100%; 
  display:block
}
.container{
  max-width:var(--maxw); 
  margin-inline:auto; 
  padding:24px
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:16px; 
  gap:24px;
}
.nav ul a{
  padding-left:10px ;
  margin-left: 20px;
  position: relative;
  left: 200px;
}
.brand{
  display:flex;
  gap:12px; 
  align-items:center; 
  font-weight:700; 
  letter-spacing:.3px
}

.brand-logo{
  width:40px; 
  height:40px; 
  display:grid; 
  place-items:center; 
  border-radius:12px;
  background: linear-gradient(135deg, #34d399, #10b981); 
  color:#fff; 
  box-shadow: var(--shadow-sm);
  font-size:20px; 
  font-weight:800;
}

.nav ul{
  list-style:none; 
  margin:0; 
  padding:0; 
  display:flex; 
  gap:26px; 
  align-items:center
}
.nav a{
  color:var(--muted); 
  text-decoration:none; 
  font-weight:600
}
.nav a:hover{
  color:var(--text)
}
.cta{
  padding:10px 18px; 
  border:none; border-radius:999px; 
  background:var(--accent); 
  color:#fff; 
  font-weight:700;
  box-shadow: var(--shadow-sm); 
  cursor:pointer; 
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover{
  transform: translateY(-2px); 
  box-shadow: 0 14px 28px rgba(14,165,233,.25)
}

/* Hero */
.hero{
  display: flex; 
  grid-template-columns: 1.1fr .9fr; 
  gap:40px; 
  align-items:center; 
  margin-top:100px;
  margin-bottom: 100px;
}
.hero-copy h1{
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  margin:0 0 12px;
  letter-spacing:.2px;
}
.hero-copy p{
  margin:0 0 18px; 
  color:var(--muted); 
  max-width:56ch
}
.badges{
  display:flex; 
  gap:12px; 
  margin:18px 0 28px
}
.badge{
  width:44px; 
  height:44px; 
  border-radius:999px; 
  display:grid; 
  place-items:center;
  background: radial-gradient(60% 60% at 35% 30%, #5eead4, #10b981);
  color:#fff; box-shadow: var(--shadow-sm);
}
.actions{
  display:flex; 
  gap:12px; 
  align-items:center; 
  flex-wrap:wrap
}
.ghost{
  padding:10px 16px; 
  border-radius:999px; 
  border:2px solid #d4dbe8; 
  background:#fff; 
  color:#0f172a; 
  font-weight:700; 
  cursor:pointer;
}
.hero, .section, .contact-strip {
   scroll-margin-top: 90px
   ; }
/* Hero Art */
.art{
  position:relative; 
  padding:18px; 
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg,#ffffffaa,#f0f6ffdd);
  box-shadow: var(--shadow);
  overflow:hidden; isolation:isolate;
}
.art::before, .art::after{
  content:""; 
  position:absolute; 
  filter: blur(40px); 
  opacity:.5; 
  z-index:0;
  border-radius:50%;
}
.art::before{ 
  width:220px; 
  height:220px; 
  background: #a7f3d0; 
  top:-40px; 
  right:-30px; 
}
.art::after{ 
  width:260px; 
  height:260px; 
  background: #93c5fd; 
  bottom:-50px; 
  left:-30px; 
}
.doctor{
  position:relative; 
  z-index:1; 
  border-radius: 22px; 
  overflow:hidden; 
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-sm);
}
.doctor img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  object-position:center
}

/* Cards */
.cards{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 28px;
}

.card{
  position: relative;
  display: flex;                        /* hierarchy أوضح */
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  border-radius: var(--radius);
  padding: 22px 20px;
  background: var(--mint-1);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(15,23,42,.12);
}

.card:nth-child(2){ background: var(--mint-2); }
.card:nth-child(3){ background: var(--mint-3); }

.card h3{
  margin: 0 0 6px;
  font-size: clamp(18px,2.4vw,22px);
  letter-spacing: .2px;
}
.card p{
  margin: 0 0 12px;
  color: #0f1c2b;
}

/* وصف ثانوي أنعم */
.card-sub{ color:#2b3647; opacity:.9; }

/* قيمة رئيسية مثل رقم الهاتف */
.card-kv .tel{
  display: inline-block;
  font-weight: 800;
  font-size: clamp(18px,2.6vw,22px);
  color: #0f172a;
  text-decoration: none;
  letter-spacing: .2px;
  background: #ffffffb5;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.card .mini{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #10b981; color: #fff; box-shadow: var(--shadow-sm);
}

.card .action{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;                     /* الأزرار تلتصق بالأسفل */
}

.pill{
  background:#fff;
  border:none;
  border-radius: 999px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  color:#0f172a;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.link-btn{
  background: transparent;
  border:none; padding:0;
  color:#0f172a;
  font-weight:700;
  text-decoration: underline;
  cursor:pointer;
}

/* ساعات العمل + مؤشر Open now (اختياري) */
.hours{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hours li{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#ffffffa8; border-radius:10px; }
.hours li span:first-child{ color:#0f172a; font-weight:700; }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#94a3b8; vertical-align:middle; margin-inline-start:6px; }
.dot.open{ background:#10b981; box-shadow:0 0 0 4px #10b98122; }

/* وصولية للفوكس */
.pill:focus, .ghost:focus, .link-btn:focus, a:focus{
  outline: 3px solid #93c5fd; outline-offset: 2px;
}

/* تخصيصك */
#telphone{ margin-bottom: 20px; }

/* ===== Responsive tweak ===== */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; gap: 28px; }
  .art{ order: -1; }
  .cards{ grid-template-columns: 1fr; gap: 14px; }
}
/* Modal Booking */
.modal{
  position:fixed; 
  inset:0; 
  display:grid; 
  place-items:center; 
  background: rgba(2,6,23,.4);
  opacity:0; 
  pointer-events:none; 
  transition: opacity .2s ease;
}
.modal.open{
  opacity:1; 
  pointer-events:auto}
.dialog{
  width:min(560px, 92vw); 
  background:#fff; 
  border-radius: 18px; 
  box-shadow: var(--shadow);
  padding:20px; 
  transform: translateY(14px); 
  transition: transform .25s ease; 
  max-height:90vh; 
  overflow:auto;
}
.modal.open .dialog{
  transform: translateY(0)
}
.dialog header{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:8px; 
  margin-bottom:10px}
.dialog h3{
  margin:0; 
  font-size:22px
}
.close{
  background:#eef2f7; 
  border:none; 
  width:38px; 
  height:38px; 
  border-radius:10px; 
  cursor:pointer
}
.grid{
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:14px
}
.field{
  display:flex; 
  flex-direction:column; 
  gap:6px
}
.field label{
  font-weight:700; 
  color:#334155
}
.field input,.field select{
  padding:12px 14px; 
  border:1.5px solid #d5deea; 
  border-radius:10px; 
  font:inherit; 
  outline:none;
}
.field input:focus,.field select:focus{
  border-color:#86b6ff; 
  box-shadow:0 0 0 3px #dbeafe}
.full{
  grid-column:1/-1
}
.submit{
  margin-top:10px; 
  width:100%; 
  padding:12px 16px; 
  border:none; 
  border-radius:12px; 
  background:var(--accent); 
  color:#fff; 
  font-weight:800; 
  cursor:pointer
}

/* Slots */
.slots{
  display:flex; 
  gap:8px; 
  flex-wrap:wrap
}
.slot{
  padding:8px 12px; 
  border-radius:999px; 
  border:1.5px solid #d5deea; 
  cursor:pointer; 
  user-select:none;
  background:#fff; 
  transition: all .15s ease;
}
.slot.active{
  background:#0ea5e9; 
  color:#fff; 
  border-color:#0ea5e9; 
  box-shadow:0 6px 16px rgba(14,165,233,.25)}
.slot[disabled]{
  opacity:.45; 
  cursor:not-allowed
}

/* Toast */
.toast{
  position:fixed; 
  bottom:22px; 
  left:50%; 
  transform:translateX(-50%) translateY(20px);
  background:#0ea5e9; 
  color:#fff; padding:12px 18px; 
  border-radius:999px; font-weight:700; 
  box-shadow: var(--shadow);
  opacity:0; 
  pointer-events:none; 
  transition: .25s ease;
}
.toast.show{
  opacity:1; 
  pointer-events:auto; 
  transform:translateX(-50%)
}

/* Reveal on scroll */
.reveal{
  opacity:0; 
  transform: translateY(18px); 
  transition: .4s ease
}
.reveal.in{
  opacity:1; 
  transform:none
}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr; gap:28px}
  .art{order:-1}
  .cards{grid-template-columns: 1fr; gap:14px}
}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .cta,.pill,.slot{transition:none}
}

/* ===== Sections base ===== */
.section{ padding: 80px 0; }
.section-head{ text-align:center; margin-bottom: 28px; }
.section-head h2{ margin:0 0 6px; font-size: clamp(22px,3.2vw,34px); }
.section-head p{ color:#4b5563; }

/* ===== Departments ===== */
.dept-grid{
  display:grid; grid-template-columns: repeat(6,1fr); gap:16px;
}
@media (max-width: 1100px){ .dept-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .dept-grid{ grid-template-columns: repeat(2,1fr); } }

.dept{
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:16px;
  padding:18px; box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition:.25s ease; position:relative; overflow:hidden;
}
.dept:hover{ transform: translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.12); }
.dept h3{ margin:10px 0 6px; font-size:18px; }
.dept p{ margin:0; color:#475569; font-size:.98rem; }

.i{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; box-shadow: var(--shadow-sm); }
.i-heart{ background: linear-gradient(135deg,#ef4444,#f97316); }
.i-tooth{ background: linear-gradient(135deg,#22d3ee,#0ea5e9); }
.i-kid{ background: linear-gradient(135deg,#10b981,#34d399); }
.i-stetho{ background: linear-gradient(135deg,#a78bfa,#6366f1); }
.i-bone{ background: linear-gradient(135deg,#fb7185,#f472b6); }
.i-eye{ background: linear-gradient(135deg,#f59e0b,#84cc16); }

/* ===== Doctors slider ===== */
.slider{ position:relative; }
.track{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap:16px; overflow:hidden; scroll-behavior:smooth;
}
.card.doc{
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:18px; padding:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.card.doc img{ width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:12px; margin-bottom:10px; }
.slide-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
.prev{ left:-10px } .next{ right:-10px }

/* ===== Testimonials ===== */
.t-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 980px){ .t-grid{ grid-template-columns: 1fr; } }
.t-card{
  background: #fff; border:1px solid rgba(15,23,42,.06); border-radius:16px;
  padding:20px; box-shadow:0 10px 26px rgba(0,0,0,.06); position:relative;
}
.t-card p{ margin:0 0 10px; font-size:1.05rem; }
.t-card footer{ color:#64748b; }

/* ===== FAQ ===== */
.faq{ max-width:900px; margin:0 auto; display:grid; gap:12px; }
.qa{
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:14px; padding:10px 14px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.qa summary{
  cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; gap:10px;
}
.qa[open] summary{ color:#0ea5e9; }
.qa .a{ padding:8px 2px 6px; color:#334155; }

/* ===== Contact strip ===== */
.contact-strip{
  background: linear-gradient(135deg,#e0f7ff,#dcfce7);
  border:1px solid rgba(15,23,42,.06); border-radius:18px;
  margin: 60px 0 100px; padding: 26px; text-align:center;
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.contact-strip h3{ margin:0 0 6px; font-size: clamp(18px,3vw,26px); }
.contact-strip p{ margin:0 0 12px; color:#475569; }
.strip-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===== Reveal animations (new) ===== */
html{ scroll-behavior: smooth; }
.reveal-up{ opacity:0; transform: translateY(18px); transition: .6s cubic-bezier(.2,.6,.2,1); }
.reveal-up.in{ opacity:1; transform: none; }
.reveal-right{ opacity:0; transform: translateX(-18px); transition: .6s cubic-bezier(.2,.6,.2,1); }
.reveal-right.in{ opacity:1; transform: none; }
.reveal-up{ 
  transition-delay: var(--d, 0s); 
}

/* ========================= RESPONSIVE ========================= */

@media (max-width: 1200px){
  .container { padding-inline: 20px; }
}

@media (max-width: 1100px){
  .nav { flex-wrap: wrap; gap: 14px; }
  .nav ul { gap: 14px; }
  .nav ul a { 
    position: static;   
    left: auto;
    margin-left: 0;
    padding-left: 0;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 70px;
  }
  .badges, .actions { justify-content: center; }

  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px){
  .nav ul{
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .nav ul li { display: inline-block; }
  .cta { flex: 0 0 auto; }
}

@media (max-width: 640px){
  #projects .section__title,
  .section-head { text-align: center; }
  .container { padding-inline: 16px; }

  /* NAV:*/
  .nav { gap: 10px; }
  .brand { order: 0; }
  .nav ul { order: 1; width: 100%; justify-content: center; }
  .cta { order: 2; width: 100%; }

  /* HERO */
  .hero-copy h1 { font-size: clamp(26px, 6vw, 34px); }
  .hero-copy p { max-width: 60ch; margin-inline: auto; }
  .badges { gap: 10px; }
  .actions { gap: 10px; }
  .ghost, .cta { width: auto; }

  /* CARDS: عمود واحد */
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card { min-height: auto; }

  .dept { padding: 16px; }

  .track { grid-auto-columns: minmax(240px, 85vw); }
  .prev { left: 4px; } 
  .next { right: 4px; }

  .t-card { padding: 16px; }

  /* Contact strip */
  .contact-strip { margin: 40px 0 70px; padding: 20px; }
  .strip-actions { gap: 8px; }

  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .brand-logo { width: 36px; height: 36px; }
  .nav { gap: 8px; }
  .hero { gap: 22px; }
  .badge { width: 40px; height: 40px; }
  .pill { padding: 9px 14px; }
  .cta { padding: 10px 14px; }
  .contact-strip h3 { font-size: clamp(18px, 5.2vw, 22px); }
}

/* تحسين الوصولية عند تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .card, .dept, .track, .cta, .pill { transition: none !important; }
}




/* Doctors slider – enable swipe + snap */
.slider { position: relative; }
.track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 16px;

  overflow-x: auto;              /* بدال hidden */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; /* سناك لطيف */
  scroll-padding: 1px;           /* يمنع قصّ أول كرت */
  cursor: grab;
}
.track:active{ cursor: grabbing; }

/* كل كرت يسناب عند البداية */
.card.doc{ scroll-snap-align: start; }

/* إخفاء السكрол بار بشكل أنيق */
.track::-webkit-scrollbar{ height: 0; }
.track{ scrollbar-width: none; }

/* في الشاشات الصغيرة اعرض كرت أعرض */
@media (max-width: 640px){
  .track{ grid-auto-columns: minmax(260px, 85vw); }
}