/* ═══════════════════════════════════════════════════════
   المركز الألماني للأطراف الصناعية — Main Stylesheet
   prosthesiscenter.com
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --teal:       #0a4a4a;
  --teal-mid:   #0d5c5c;
  --teal-light: #117a6a;
  --teal-pale:  #e4f5f2;
  --gold:       #b8841e;
  --gold-light: #d4a535;
  --gold-pale:  #fdf4e3;
  --cream:      #f8f7f4;
  --white:      #ffffff;
  --dark:       #0f1923;
  --text:       #1e2d3a;
  --muted:      #607080;
  --muted2:     #8fa0b0;
  --border:     rgba(10,74,74,.10);
  --border2:    #cdd6de;
  --red:        #d63031;
  --red-pale:   #ffeaea;
  --green:      #00897b;
  --green-pale: #e0f4f1;
  --blue:       #1565c0;
  --blue-pale:  #e8f1fd;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Cairo', 'Amiri', sans-serif;
  background: var(--cream);
  color: var(--text);
  direction: rtl;
  overflow-x: hidden;
}

/* ── TOPBAR ─────────────────────────────────────────── */
.topbar {
  background: var(--teal);
  color: rgba(255,255,255,.8);
  font-size: 12px;
  padding: 6px 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar a { color: rgba(255,255,255,.75); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar-items { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar-item  { display: flex; align-items: center; gap: 6px; }

/* ── NAV ─────────────────────────────────────────────── */
nav {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 2.5rem;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }

.nav-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.logo-mark {
  width: 46px; height: 46px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 28px; height: 28px; }
.logo-en  { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--gold); text-transform: uppercase; }
.logo-ar  { font-family: 'Amiri', serif; font-size: 17px; font-weight: 700; color: var(--teal); }
.logo-sub { font-size: 10px; color: var(--muted); }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--text);
  font-size: 14px; font-weight: 600;
  position: relative; padding-bottom: 4px;
  transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-cta {
  background: var(--teal) !important;
  color: #fff !important;
  padding: 9px 22px;
  border-radius: 9px;
  font-size: 13px !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover  { background: var(--teal-light) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: transparent;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all .3s;
  display: block;
}

/* ── PAGE HERO ───────────────────────────────────────── */
.page-hero {
  background: linear-gradient(145deg, #071f1f 0%, #0a3e3e 50%, #0d5844 100%);
  padding: 4.5rem 2.5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 60%, rgba(184,132,30,.14) 0%, transparent 55%);
}
.page-hero-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.page-hero .badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(184,132,30,.2);
  border: 1px solid rgba(212,165,53,.4);
  color: #d4a535;
  font-size: 12px; font-weight: 600;
  padding: 6px 18px; border-radius: 50px;
  margin-bottom: 1.2rem;
  letter-spacing: .05em;
}
.page-hero h1 {
  font-family: 'Amiri', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700; color: #fff;
  line-height: 1.4; margin-bottom: .8rem;
}
.page-hero p { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.9; }

/* ── HERO (homepage) ─────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  background: linear-gradient(145deg, #071f1f 0%, #0a3e3e 45%, #0d5844 100%);
  position: relative; overflow: hidden;
  padding-top: 72px;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(184,132,30,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(255,255,255,.04) 0%, transparent 45%);
}
.geo-bg {
  position: absolute; left: -120px; top: 50%;
  transform: translateY(-50%);
  width: 620px; height: 620px; opacity: .045;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 1160px; margin: 0 auto;
  padding: 5rem 2.5rem;
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 5rem; align-items: center; width: 100%;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(184,132,30,.18);
  border: 1px solid rgba(212,165,53,.4);
  color: #d4a535;
  font-size: 12px; font-weight: 600;
  padding: 7px 18px; border-radius: 50px;
  margin-bottom: 1.8rem; letter-spacing: .05em;
}
.hero-tag .pulse {
  width: 7px; height: 7px;
  background: #d4a535; border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

.hero-title {
  font-family: 'Amiri', serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 700; color: white;
  line-height: 1.4; margin-bottom: 1.2rem;
}
.hero-title em { font-style: normal; color: #d4a535; }
.hero-sub {
  font-size: 15px; color: rgba(255,255,255,.72);
  line-height: 2; margin-bottom: 2.2rem; font-weight: 300;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── SECTIONS ────────────────────────────────────────── */
.section { padding: 5rem 2.5rem; max-width: 1160px; margin: 0 auto; }
.section-eye {
  font-size: 12px; font-weight: 700; color: var(--teal-light);
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: 10px;
}
.section-eye::before { content: ''; width: 28px; height: 2px; background: var(--gold); display: inline-block; }
.section-h {
  font-family: 'Amiri', serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700; color: var(--teal);
  line-height: 1.3; margin-bottom: .8rem;
}
.section-p { font-size: 15px; color: var(--muted); line-height: 2; max-width: 600px; }

/* ── CARDS ────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(10,74,74,.1); }

/* ── BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 11px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  border: none; transition: all .18s;
}
.btn-teal    { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-light); transform: translateY(-1px); }
.btn-gold    { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }
.btn-outline:hover { background: var(--teal); color: #fff; }
.btn-ghost   { background: rgba(255,255,255,.15); color: white; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: white; background: rgba(255,255,255,.22); }

/* ── ALERT ────────────────────────────────────────────── */
.alert { padding: .9rem 1.2rem; border-radius: 11px; font-size: 14px; margin-bottom: 1.2rem; line-height: 1.6; }
.alert-success { background: var(--green-pale); color: #007a68; border: 1px solid #9fe1cb; }
.alert-error   { background: var(--red-pale);   color: #a32d2d; border: 1px solid #f09595; }
.alert-info    { background: var(--blue-pale);   color: #0c447c; border: 1px solid #85b7eb; }
.alert-warning { background: #fff3e0; color: #bf360c; border: 1px solid #ffcc80; }

/* ── FORM ─────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 11px 15px;
  border: 1px solid var(--border2); border-radius: 10px;
  font-family: 'Cairo', sans-serif; font-size: 14px; color: var(--text);
  background: var(--white); outline: none; direction: rtl;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 3px rgba(13,92,92,.08);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-hint  { font-size: 11px; color: var(--muted); margin-top: 4px; }
.required   { color: var(--gold); }

/* ── STATS BAR ───────────────────────────────────────── */
.stats-bar {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: rgba(255,255,255,.1);
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.stat-cell { background: rgba(0,0,0,.1); padding: 2rem; text-align: center; transition: background .2s; }
.stat-cell:hover { background: rgba(255,255,255,.08); }
.stat-num { font-family: 'Amiri',serif; font-size: 2.4rem; font-weight: 700; color: #d4a535; display: block; }
.stat-lbl { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 5px; }

/* ── TEAM CARDS ──────────────────────────────────────── */
.team-director {
  display: grid; grid-template-columns: 280px 1fr;
  border-radius: 22px; overflow: hidden;
}
.team-director-photo {
  background: linear-gradient(145deg, var(--teal), var(--teal-light));
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem; min-height: 320px;
}
.team-director-photo img {
  width: 200px; height: 200px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 4px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.team-member-photo {
  width: 110px; height: 110px; border-radius: 50%;
  border: 3px solid var(--teal-light);
  margin: 0 auto 1.2rem; overflow: hidden;
  background: var(--teal-pale);
}
.team-member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ── FOOTER ───────────────────────────────────────────── */
footer { background: var(--dark); color: rgba(255,255,255,.55); direction: rtl; }
.footer-top {
  max-width: 1160px; margin: 0 auto;
  padding: 4rem 2.5rem 2rem;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem;
}
.footer-col h4 {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9);
  margin-bottom: 1rem; padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .6rem; }
.footer-col ul li a,
.footer-col ul li span {
  font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none;
  transition: color .2s; display: flex; align-items: center; gap: 8px;
}
.footer-col ul li a:hover { color: var(--gold-light); }
.footer-col ul li svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; opacity: .6; }
.footer-social { display: flex; gap: .7rem; margin-top: .8rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); text-decoration: none; transition: all .2s;
}
.footer-social a:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.2rem 2.5rem; text-align: center; font-size: 12px;
}
.footer-bottom a { color: var(--gold-light); text-decoration: none; }

/* ── FADE-IN ──────────────────────────────────────────── */
.fi { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.fi.on { opacity: 1; transform: translateY(0); }

/* ── SERVICE CARD ─────────────────────────────────────── */
.svc-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 1.8rem;
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.svc-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 70px; height: 70px;
  background: var(--teal-pale);
  border-radius: 0 18px 0 100%;
  transition: width .3s, height .3s;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(10,74,74,.1); border-color: rgba(10,74,74,.22); }
.svc-card:hover::after { width: 110px; height: 110px; }
.svc-icon {
  width: 54px; height: 54px; background: var(--teal);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem; position: relative; z-index: 1;
}
.svc-icon svg { width: 27px; height: 27px; fill: white; }

/* ── CONTACT INFO ─────────────────────────────────────── */
.cinfo-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 1.3rem; }
.cinfo-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--teal-pale); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.cinfo-icon svg { width: 20px; height: 20px; fill: var(--teal); }

/* ── ADMIN TOPBAR BADGE ───────────────────────────────── */
.badge-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 50px;
  font-size: 11px; font-weight: 700;
}
.badge-new     { background: var(--blue-pale);  color: var(--blue); }
.badge-active  { background: var(--green-pale); color: var(--green); }
.badge-done    { background: #f0f0f0; color: var(--muted); }
.badge-pending { background: #fff3e0; color: #bf360c; }
.badge-dir     { background: var(--gold-pale);  color: var(--gold); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 900px
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Hero */
  .hero-content { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .geo-bg { display: none; }

  /* All 2-col inline grids → 1 col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Reset order on mobile (RTL stacking = natural) */
  [style*="order:1"], [style*="order:2"],
  [style*="order: 1"], [style*="order: 2"] {
    order: unset !important;
  }

  /* Named grid classes */
  .hero-content,
  .team-director,
  .why-grid,
  .contact-body,
  .contact-grid,
  .grid2, .grid3 {
    grid-template-columns: 1fr !important;
  }

  /* Footer */
  .footer-top { grid-template-columns: 1fr !important; gap: 2rem; }

  /* Stats bar */
  .stats-bar { grid-template-columns: 1fr 1fr; }

  /* Contact strip inner grid */
  .contact-shell-grid { grid-template-columns: 1fr !important; }

  /* German panel — don't let it stretch too tall */
  .de-panel { padding: 2rem 1.5rem; }

  /* Section padding */
  .section { padding: 3rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤ 640px
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Topbar — hide emails on small screens */
  .topbar { font-size: 11px; padding: 5px 1rem; gap: 0.5rem; }
  .topbar-items { gap: .9rem; }
  .topbar .tb-item:last-child { display: none; }

  /* Nav */
 
  nav { padding: 0 1rem; height: 90px; }
  .logo-ar { font-size: 14px; }
  .logo-sub { display: none; }
  .nav-toggle { display: flex; }
  .site-logo{
  padding: 3px;
    width:65px;
    height:65px;
    object-fit:contain;
    display:block;
}
  #nav-menu {
    display: none;
    position: absolute;
    top: 62px; right: 0; left: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: .8rem;
    flex-direction: column;
    align-items: stretch;
    z-index: 199;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
  }
  #nav-menu.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-size: 14px; }
  .nav-links a::after { display: none; }
  .nav-links a.nav-cta { margin: .5rem 0 0; border-radius: 9px; text-align: center; justify-content: center; }

  /* Hero */
  .hero { padding-top: 62px; }
  .hero-content { padding: 2.5rem 1rem !important; }
  .hero-title { font-size: 1.9rem !important; }
  .hero-sub { font-size: 13.5px !important; }
  .hero-btns { flex-direction: column; }
  .hero-btns a { text-align: center; justify-content: center; }

  /* Stats row — 3 cols keep, just smaller */
  .stats-row div { padding: 1rem .6rem !important; }
  .stat-n, [style*="font-size:2rem"] { font-size: 1.5rem !important; }

  /* Director card in hero */
  .dir-row { padding: 1rem !important; gap: 10px !important; }

  /* All inline 2-col grids */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1.1fr .9fr"],
  [style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Services grid */
  .svc-grid, [style*="minmax(270px"] { grid-template-columns: 1fr !important; }

  /* Team grid */
  [style*="minmax(155px"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Section */
  .section { padding: 2.5rem 1rem !important; }

  /* Form rows */
  .form-row, [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Contact strip */
  .contact-shell-grid,
  [style*="grid-template-columns:1fr 1fr;position:relative"] {
    grid-template-columns: 1fr !important;
  }
  /* Remove left border on stacked contact panels */
  [style*="border-left:1px solid rgba(255,255,255,.08)"] {
    border-left: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  /* About / Why Us — panel doesn't need min-height */
  .de-panel { min-height: unset; padding: 2rem 1.2rem; }

  /* Why items */
  .why-item { padding: .75rem; }

  /* Page hero */
  .page-hero { padding: 3rem 1.2rem 2.5rem; }
  .page-hero h1 { font-size: 1.8rem; }

  /* Footer */
  .footer-top { padding: 2.5rem 1rem 1.5rem !important; gap: 1.5rem !important; }
  .footer-bottom { padding: 1rem; }

  /* Buttons */
  .btn { font-size: 13px; padding: 10px 20px; }

  /* Alerts */
  .alert { font-size: 13px; }

  /* Tabs (contact page) */
  .tab-btn { padding: 7px 14px; font-size: 12px; }

  /* Cards in dark contact shell */
  [style*="padding:2.5rem"] { padding: 1.5rem !important; }

  /* Map */
  [style*="height:300px"] { height: 220px !important; }

  /* Admin sidebar — hide on mobile */
  #sidebar { transform: translateX(100%); transition: transform .3s ease; }
  #sidebar.open { transform: translateX(0); }
  #main { margin-right: 0 !important; }
}

/* ── GERMAN PANEL ─────────────────────────────────── */
.de-panel {
  background: linear-gradient(145deg, var(--teal) 0%, var(--teal-light) 100%);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.de-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 75%, rgba(184,132,30,.2) 0%, transparent 60%);
}
.de-flag-lg {
  width: 62px; height: 42px;
  margin: 0 auto 1.3rem;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  position: relative;
}
.de-panel h3 {
  font-family: 'Amiri', serif;
  font-size: 1.4rem;
  font-weight: 700;
  position: relative;
  margin-bottom: .5rem;
}
.de-panel p {
  font-size: 13.5px;
  opacity: .8;
  line-height: 1.85;
  position: relative;
}

/* ── WHY ITEMS ────────────────────────────────────── */
.why-list  { display: flex; flex-direction: column; gap: .9rem; }
.why-item  { display: flex; gap: 13px; align-items: flex-start; padding: 1rem; border-radius: 12px; transition: background .2s; }
.why-item:hover { background: var(--teal-pale); }
.why-num   { width: 36px; height: 36px; flex-shrink: 0; background: var(--teal-pale); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: 'Amiri', serif; font-weight: 700; color: var(--teal); font-size: 1rem; }

/* ── SECTION H ALIAS ──────────────────────────────── */
.sec-h {
  font-family: 'Amiri', serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: var(--teal);
  line-height: 1.3;
  margin-bottom: .8rem;
}

/* ── placeholder text color in dark bg ────────────── */
::placeholder { color: rgba(255,255,255,.35); }

/* ══════════════════════════════════════════════════════
   COMPONENT CLASSES — replacing inline styles
   ══════════════════════════════════════════════════════ */

/* ── Two-column grid (About / Why Us) ── */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.two-col-text {}
.two-col-panel {}

/* ── Director card (team.php) ── */
.director-card-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  overflow: hidden;
  border-radius: 22px;
}
.director-photo-side {
  background: linear-gradient(145deg, var(--teal), var(--teal-light));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  min-height: 280px;
}
.director-img {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  display: block;
}
.director-avatar-fallback {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 4px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Amiri', serif;
  font-size: 4rem; font-weight: 700; color: white;
}
.director-info-side { padding: 2.5rem; }
.director-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-pale);
  border: 1px solid rgba(184,132,30,.3);
  color: var(--gold);
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 50px;
  margin-bottom: 1rem;
}
.director-name {
  font-family: 'Amiri', serif;
  font-size: 2rem; color: var(--teal);
  margin-bottom: .4rem;
}
.director-role-en {
  font-size: 14px; color: var(--muted);
  margin-bottom: 1.2rem;
  direction: ltr; text-align: right;
}
.director-bio { font-size: 15px; color: var(--muted); line-height: 2; }

/* ── Index Contact Shell ── */
.idx-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
.idx-contact-info {
  padding: 2.5rem;
  border-left: 1px solid rgba(255,255,255,.08);
}
.idx-contact-title {
  font-family: 'Amiri', serif;
  font-size: 1.7rem; color: #fff;
  margin-bottom: .5rem; line-height: 1.3;
}
.idx-contact-desc {
  font-size: 13px; color: rgba(255,255,255,.65);
  margin-bottom: 1.8rem; line-height: 1.8;
}
.idx-cinfo-list { display: flex; flex-direction: column; gap: 1.1rem; }
.idx-cinfo-item { display: flex; align-items: flex-start; gap: 12px; }
.idx-cinfo-ic {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(255,255,255,.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.idx-cinfo-ic svg { width: 18px; height: 18px; }
.idx-cinfo-lbl { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.idx-cinfo-val {
  display: block;
  font-size: 13px; color: rgba(255,255,255,.65);
  text-decoration: none; line-height: 1.6;
  direction: ltr; text-align: right;
}
a.idx-cinfo-val:hover { color: var(--gold-light); }
.idx-social-row { display: flex; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.idx-social-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; text-decoration: none;
  padding: 8px 16px; border-radius: 9px;
  font-size: 12px; font-weight: 600;
  transition: background .2s;
}
.idx-social-btn:hover { background: rgba(255,255,255,.22); }
.idx-social-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.idx-contact-form {
  padding: 2.5rem;
  background: rgba(0,0,0,.1);
}
.idx-form-title {
  font-family: 'Amiri', serif;
  font-size: 1.3rem; color: #fff;
  margin-bottom: 1.2rem;
}
.idx-form-inner { display: flex; flex-direction: column; gap: .7rem; }
.idx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.idx-input {
  width: 100%; padding: 10px 13px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  font-family: 'Cairo', sans-serif;
  font-size: 13px; color: #fff;
  outline: none; direction: rtl;
  transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
.idx-input:focus { border-color: #d4a535; }
.idx-input::placeholder { color: rgba(255,255,255,.35); }
.idx-input option { background: #0a4a4a; color: #fff; }
.idx-submit-btn {
  width: 100%; padding: 12px;
  background: var(--gold); color: #fff;
  border: none; border-radius: 9px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s;
}
.idx-submit-btn:hover { background: var(--gold-light); }
.idx-submit-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   MOBILE FIXES for new component classes
   ══════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* Two-col grids */
  .two-col-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .two-col-text, .two-col-panel { order: unset !important; }

  /* Director card — stack vertically */
  .director-card-wrap { grid-template-columns: 1fr !important; }
  .director-photo-side { min-height: 200px !important; padding: 2rem !important; }
  .director-img { width: 140px !important; height: 140px !important; }
  .director-avatar-fallback { width: 140px !important; height: 140px !important; font-size: 3rem !important; }
  .director-info-side { padding: 1.5rem !important; }
  .director-name { font-size: 1.6rem !important; }
  .director-bio { font-size: 14px !important; }

  /* Index contact shell — stack vertically */
  .idx-contact-grid { grid-template-columns: 1fr !important; }
  .idx-contact-info {
    padding: 1.5rem !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .idx-contact-form { padding: 1.5rem !important; }
  .idx-form-row { grid-template-columns: 1fr !important; }
  .idx-contact-title { font-size: 1.4rem !important; }

  /* Why Us ordering on mobile — panel first */
  .why-list { order: 1 !important; }

  /* De panel on mobile */
  .de-panel { padding: 1.8rem 1.2rem !important; }

  /* Staff member grid */
  .staff-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 420px) {
  .idx-social-btn { font-size: 11px; padding: 7px 12px; }
  .director-info-side { padding: 1.2rem !important; }
  .idx-contact-info, .idx-contact-form { padding: 1.2rem !important; }
}


.nav-logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.site-logo{
  padding: 3px;
    width:65px;
    height:65px;
    object-fit:contain;
    display:block;
}

.logo-en{
    font-size:14px;
    font-weight:700;
}

.logo-ar{
    font-size:16px;
    font-weight:700;
}