@font-face {
  font-family:"IBM Plex Sans Arabic";
  src:url("../../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"IBM Plex Sans Arabic";
  src:url("../../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"IBM Plex Sans Arabic";
  src:url("../../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"IBM Plex Sans Arabic";
  src:url("../../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root {
  --primary-dark:#071A38;
  --primary:#122B59;
  --blue:#006EEB;
  --logo:#B5A89B;
  --logo-dark:#8F8275;
  --logo-soft:#F1EEE9;
  --bg:#EEF1F4;
  --soft:#F6F8FC;
  --white:#FFFFFF;
  --text:#10213F;
  --muted:#657489;
  --line:rgba(18,43,89,.12);
  --shadow:0 24px 70px rgba(8,26,56,.13);
  --shadow-soft:0 14px 38px rgba(8,26,56,.08);
  --container:1180px;
  --wide:1880px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family:"IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
  background:#fff;
  color:var(--text);
  line-height:1.8;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button, input, textarea, select { font-family:inherit; }

.container {
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

.wide {
  max-width:var(--wide);
  margin-inline:auto;
}

.top-shell {
  background:var(--bg);
  padding:16px 20px 54px;
}

.site-header {
  position:sticky;
  top:16px;
  z-index:70;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  border-radius:22px;
  padding:0 34px;
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  box-shadow:0 12px 35px rgba(8,26,56,.06);
  border:1px solid rgba(255,255,255,.7);
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:max-content;
}

.brand-logo {
  display:block;
  width:182px;
  height:auto;
  max-height:58px;
}

.site-header .brand {
  padding:8px 14px;
  border-radius:18px;
  background:var(--primary);
  box-shadow:0 12px 28px rgba(8,26,56,.10);
}

.nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  font-size:15px;
  font-weight:700;
  color:#18314F;
  flex:1;
}

.nav a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:31px 0;
  transition:.22s ease;
}

.nav a:hover,
.nav a.active {
  color:var(--logo-dark);
}

.header-left {
  display:flex;
  align-items:center;
  gap:22px;
  min-width:max-content;
}

.header-social { display:flex; align-items:center; gap:8px; direction:ltr; }
.social-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(18,43,89,.12);
  box-shadow:0 8px 22px rgba(8,26,56,.06);
  transition:.22s ease;
}
.social-icon:hover { transform:translateY(-2px); background:var(--logo-soft); }
.social-icon img { width:18px; height:18px; object-fit:contain; }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:12px 24px;
  border-radius:999px;
  border:1px solid rgba(18,43,89,.32);
  background:#fff;
  color:var(--primary);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
  white-space:nowrap;
}

.btn:hover {
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 35px rgba(18,43,89,.18);
}

.btn-solid {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 18px 36px rgba(18,43,89,.18);
}

.btn-logo {
  background:var(--logo-dark);
  color:#fff;
  border-color:var(--logo-dark);
  box-shadow:0 18px 36px rgba(143,130,117,.18);
}

.btn-logo:hover {
  background:var(--primary);
  border-color:var(--primary);
}

.menu-toggle {
  display:none;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--primary);
  font-size:24px;
  cursor:pointer;
}

.page-hero {
  position:relative;
  min-height:440px;
  margin-top:32px;
  border-radius:20px;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(7,26,56,.96) 0%, rgba(18,43,89,.88) 48%, rgba(18,43,89,.48) 100%),
    url('../../img/aboutimg.webp') center/cover;
  box-shadow:var(--shadow);
}

.page-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 18%, rgba(181,168,155,.24), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px);
  pointer-events:none;
}

.hero-mark {
  position:absolute;
  z-index:1;
  left:7%;
  top:12%;
  width:360px;
  height:360px;
  color:rgba(255,255,255,.06);
  border:2px solid currentColor;
  border-radius:42% 58% 42% 58%;
  transform:rotate(45deg);
}

.hero-mark::after {
  content:"";
  position:absolute;
  inset:90px;
  border:2px solid currentColor;
  border-radius:42% 58% 42% 58%;
  transform:rotate(-45deg);
}

.page-hero-inner {
  position:relative;
  z-index:2;
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:70px 40px;
}

.page-hero h1 {
  color:#fff;
  font-size:clamp(46px, 6vw, 82px);
  line-height:1.15;
  letter-spacing:-2px;
  margin-bottom:18px;
  font-weight:700;
}

.page-hero p {
  max-width:760px;
  margin-inline:auto;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:2;
}

.contact-page {
  padding:86px 0 96px;
  background:#fff;
}

.contact-layout {
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) .95fr;
  gap:30px;
  align-items:start;
}

.form-panel {
  border-radius:36px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  padding:36px;
  position:relative;
  overflow:hidden;
}

.form-panel::after {
  content:"";
  position:absolute;
  left:-90px;
  bottom:-90px;
  width:240px;
  height:240px;
  border:2px solid rgba(181,168,155,.16);
  border-radius:42% 58% 42% 58%;
  transform:rotate(45deg);
  pointer-events:none;
}

.section-title {
  margin-bottom:26px;
  position:relative;
  z-index:2;
}

.kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--logo-dark);
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
}

.kicker::before {
  content:"";
  width:38px;
  height:2px;
  background:var(--logo);
}

.section-title h2 {
  color:var(--primary);
  font-size:clamp(30px, 3.6vw, 46px);
  line-height:1.28;
  letter-spacing:-1px;
  font-weight:700;
  margin-bottom:10px;
}

.section-title p {
  color:var(--muted);
  font-size:16px;
  line-height:2;
  max-width:660px;
}

.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  position:relative;
  z-index:2;
}

.field {
  width:100%;
  min-height:58px;
  border:1px solid var(--line);
  outline:0;
  border-radius:18px;
  background:var(--soft);
  color:var(--text);
  padding:0 18px;
  font-size:14px;
  transition:.2s ease;
}

.field:focus {
  border-color:rgba(181,168,155,.65);
  background:#fff;
  box-shadow:0 0 0 4px rgba(181,168,155,.13);
}

textarea.field {
  min-height:150px;
  padding-top:16px;
  resize:vertical;
}

select.field {
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--logo-dark) 50%), linear-gradient(135deg, var(--logo-dark) 50%, transparent 50%);
  background-position:22px 25px, 15px 25px;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
}

.full {
  grid-column:1 / -1;
}

.contact-side {
  display:grid;
  gap:20px;
}

.info-card {
  border-radius:32px;
  background:
    radial-gradient(circle at 12% 20%, rgba(181,168,155,.18), transparent 28%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  padding:30px;
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}

.info-card::after {
  content:"مرشاد";
  position:absolute;
  left:24px;
  bottom:-8px;
  color:rgba(255,255,255,.06);
  font-size:86px;
  line-height:1;
  font-weight:700;
}

.info-card h3 {
  color:#fff;
  font-size:28px;
  line-height:1.35;
  margin-bottom:10px;
  font-weight:700;
  position:relative;
  z-index:2;
}

.info-card p {
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:2;
  margin-bottom:22px;
  position:relative;
  z-index:2;
}

.contact-items {
  display:grid;
  gap:12px;
  position:relative;
  z-index:2;
}

.contact-item {
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  display:grid;
  gap:4px;
}

.contact-item span {
  color:var(--logo);
  font-size:12px;
  font-weight:700;
}

.contact-item strong {
  color:#fff;
  font-size:15px;
  line-height:1.5;
  font-weight:700;
  direction:ltr;
  text-align:right;
}

.quick-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}

.quick-card {
  border-radius:28px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(8,26,56,.055);
  padding:24px;
  transition:.25s ease;
}

.quick-card:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 55px rgba(8,26,56,.11);
  border-color:rgba(181,168,155,.45);
}

.quick-icon {
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:var(--logo-soft);
  color:var(--logo-dark);
  font-size:24px;
  margin-bottom:14px;
  font-weight:700;
}

.quick-card h3 {
  color:var(--primary);
  font-size:18px;
  line-height:1.45;
  margin-bottom:7px;
  font-weight:700;
}

.quick-card p {
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}

.map-section {
  padding:0 0 96px;
  background:#fff;
}

.map-box {
  border-radius:36px;
  overflow:hidden;
  background:var(--soft);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.map-box iframe {
  width:100%;
  height:430px;
  border:0;
  display:block;
  filter:saturate(.9);
}

/* ── Footer ── */
.footer {
  background:var(--primary-dark);
  color:#fff;
  padding:66px 0 24px;
  border-top:8px solid var(--logo);
}

.footer-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr .85fr;
  gap:34px;
  margin-bottom:44px;
}

.footer .brand-logo { filter:brightness(0) invert(1); opacity:.9; }

.footer p {
  color:rgba(255,255,255,.64);
  font-size:14px;
  max-width:330px;
  margin-top:16px;
}

.footer h3 {
  font-size:17px;
  margin-bottom:16px;
  color:#fff;
  font-weight:700;
}

.footer ul {
  list-style:none;
  display:grid;
  gap:9px;
}

.footer li,
.footer a {
  color:rgba(255,255,255,.64);
  font-size:14px;
}

.footer a:hover { color:#fff; }

.copyright {
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.54);
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.social {
  display:flex;
  align-items:center;
  gap:14px;
  direction:ltr;
}

.footer .social-icon { background:rgba(255,255,255,.95); border-color:rgba(255,255,255,.18); box-shadow:none; }

/* ── Responsive ── */
@media (max-width:1200px) {
  .nav, .header-left { display:none; }
  .menu-toggle { display:grid; place-items:center; }

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

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

@media (max-width:760px) {
  .top-shell { padding:10px 10px 40px; }
  .container { width:min(100% - 28px, var(--container)); }

  .site-header {
    top:10px;
    min-height:76px;
    padding:0 16px;
    border-radius:18px;
  }

  .page-hero {
    min-height:360px;
    margin-top:18px;
    border-radius:18px;
  }

  .page-hero-inner {
    min-height:360px;
    padding:52px 22px;
  }

  .page-hero h1 {
    font-size:40px;
    letter-spacing:-1px;
  }

  .page-hero p {
    font-size:15px;
  }

  .contact-page {
    padding:62px 0;
  }

  .form-panel,
  .info-card {
    border-radius:28px;
    padding:24px;
  }

  .contact-form,
  .quick-grid {
    grid-template-columns:1fr;
  }

  .full {
    grid-column:auto;
  }

  .map-section {
    padding-bottom:62px;
  }

  .map-box {
    border-radius:28px;
  }

  .map-box iframe {
    height:330px;
  }

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

  .copyright {
    display:grid;
    justify-content:center;
    text-align:center;
  }

  .social {
    justify-content:center;
    flex-wrap:wrap;
  }
}
.contact-form-message {
  margin:0 0 18px;
  padding:13px 16px;
  border-radius:16px;
  font-size:14px;
  font-weight:700;
  line-height:1.8;
}

.contact-form-message.is-success {
  color:#155d3b;
  background:#eaf8f0;
  border:1px solid rgba(21,93,59,.16);
}

.contact-form-message.is-error {
  color:#8a2c1f;
  background:#fff0ed;
  border:1px solid rgba(138,44,31,.16);
}

.contact-honeypot {
  position:absolute !important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}