/* ═══════════════════════════════════════════════════════
   شركة المنجد — Static Stylesheet  (birebir Next.js)
   Brand: #1e3b40 (green) | #af906a (gold)
   Base font: 17.5px  (matches globals.css html{font-size:17.5px})
   Tailwind container max-w-screen-xl ≈ 1280px
═══════════════════════════════════════════════════════ */

/* ── Local Fonts ── */

/* Arabic — FFShamel */
@font-face {
  font-family: 'FFShamel';
  src: url('fonts/FFShamelFamily-SansOneBook.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FFShamel';
  src: url('fonts/FFShamelFamily-SansOneBold.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* Latin — Gotham */
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Variables ── */
:root {
  --green:          #1e3b40;
  --green-dark:     #152c30;
  --green-light:    #2a4f55;
  --gold:           #af906a;
  --gold-dark:      #9a7d5a;
  --gold-light:     #c4a882;
  --neutral-50:     #fafafa;
  --neutral-100:    #f5f5f5;
  --neutral-200:    #e5e5e5;
  --neutral-400:    #a3a3a3;
  --neutral-500:    #737373;
  --neutral-600:    #525252;
  --neutral-700:    #404040;
  --neutral-900:    #171717;
}

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

html {
  font-size: 17.5px;   /* ← globals.css html { font-size: 17.5px } */
  scroll-behavior: smooth;
}

body {
  font-family: 'FFShamel', system-ui, sans-serif;
  direction: rtl;
  color: var(--neutral-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ══ container-custom = container mx-auto px-4 sm:px-6 lg:px-8 (max ~1280px) ══ */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem; /* px-4 default */
}
@media (min-width: 640px)  { .container { padding-inline: 1.5rem; } }  /* sm:px-6 */
@media (min-width: 1024px) { .container { padding-inline: 2rem;   } }  /* lg:px-8 */

/* ══ section-padding = py-14 sm:py-16 md:py-24 lg:py-28 ══
   14 = 3.5rem | 16 = 4rem | 24 = 6rem | 28 = 7rem  (×17.5px base) */
.section-padding { padding-block: 3.5rem; }   /* py-14 */
@media (min-width: 640px)  { .section-padding { padding-block: 4rem;   } }   /* py-16 */
@media (min-width: 768px)  { .section-padding { padding-block: 6rem;   } }   /* py-24 */
@media (min-width: 1024px) { .section-padding { padding-block: 7rem;   } }   /* py-28 */

/* ══ Typography — exact Tailwind values ×17.5px ══ */
/* heading-1: text-4xl→7xl font-extrabold */
.h1 {
  font-size: 2.25rem;   /* text-4xl */
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}
@media (min-width: 640px)  { .h1 { font-size: 3rem;    } }   /* text-5xl */
@media (min-width: 768px)  { .h1 { font-size: 3.75rem; } }   /* text-6xl */
@media (min-width: 1024px) { .h1 { font-size: 4.5rem;  } }   /* text-7xl */

/* heading-2: text-3xl→[3.25rem] font-extrabold */
.h2 {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}
@media (min-width: 640px)  { .h2 { font-size: 2.25rem; } }
@media (min-width: 768px)  { .h2 { font-size: 3rem;    } }
@media (min-width: 1024px) { .h2 { font-size: 3.25rem; } }

/* body-large: text-xl→[1.45rem] font-medium leading-relaxed */
.body-large {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.625;
}
@media (min-width: 640px)  { .body-large { font-size: 1.5rem;   } }
@media (min-width: 768px)  { .body-large { font-size: 1.45rem;  } }

/* body-text: text-lg→[1.2rem] font-medium leading-relaxed */
.body-text {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.625;
}
@media (min-width: 640px)  { .body-text { font-size: 1.25rem; } }
@media (min-width: 768px)  { .body-text { font-size: 1.2rem;  } }

/* ══ Brand Pattern (About bg) — same SVG as Next.js globals.css ══ */
.pattern-almunjid {
  background-image:
    linear-gradient(30deg,  rgba(175,144,106,.04) 12%, transparent 12.5%, transparent 87%, rgba(175,144,106,.04) 87.5%, rgba(175,144,106,.04)),
    linear-gradient(150deg, rgba(175,144,106,.04) 12%, transparent 12.5%, transparent 87%, rgba(175,144,106,.04) 87.5%, rgba(175,144,106,.04)),
    linear-gradient(30deg,  rgba(175,144,106,.04) 12%, transparent 12.5%, transparent 87%, rgba(175,144,106,.04) 87.5%, rgba(175,144,106,.04)),
    linear-gradient(150deg, rgba(175,144,106,.04) 12%, transparent 12.5%, transparent 87%, rgba(175,144,106,.04) 87.5%, rgba(175,144,106,.04)),
    linear-gradient(60deg,  rgba(30,59,64,.03)    25%, transparent 25.5%, transparent 75%, rgba(30,59,64,.03)    75%, rgba(30,59,64,.03)),
    linear-gradient(60deg,  rgba(30,59,64,.03)    25%, transparent 25.5%, transparent 75%, rgba(30,59,64,.03)    75%, rgba(30,59,64,.03));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* ════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: all .3s;
}
/* gold bar = h-[3px] bg-almunjid-gold */
.nav__gold-bar { height: 3px; background: var(--gold); }

/* states */
.nav--top      { background: rgba(30,59,64,.85); backdrop-filter: blur(12px); }
.nav--scrolled { background: #fff; box-shadow: 0 1px 0 rgba(30,59,64,.10), 0 4px 20px rgba(0,0,0,.07); }

/* inner = h-[70px] flex items-center justify-between */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* ── Logo ── flex items-center gap-3 shrink-0 */
.nav__logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* logo img wrap = relative w-14 h-14 shrink-0 rounded-xl p-1 */
.nav__logo-img-wrap {
  position: relative;
  width: 3.5rem;       /* w-14 */
  height: 3.5rem;      /* h-14 */
  flex-shrink: 0;
  border-radius: .75rem; /* rounded-xl */
  padding: .25rem;     /* p-1 */
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.nav--top      .nav__logo-img-wrap { background: rgba(255,255,255,.15); backdrop-filter: blur(4px); }
.nav--scrolled .nav__logo-img-wrap { background: transparent; }

.nav__logo-img { width: 100%; height: 100%; object-fit: contain; padding: .25rem; }

/* logo text */
.nav__logo-text { line-height: 1.25; display: none; }
@media (min-width: 640px) { .nav__logo-text { display: block; } }

.nav__logo-name {
  font-size: 17px;    /* text-[17px] */
  font-weight: 700;   /* font-bold */
  letter-spacing: .025em; /* tracking-wide */
  transition: color .3s;
}
.nav--top      .nav__logo-name { color: #fff; }
.nav--scrolled .nav__logo-name { color: var(--green); }

.nav__logo-sub {
  color: var(--gold);
  font-size: 11px;     /* text-[11px] */
  font-weight: 600;
  letter-spacing: .1em; /* tracking-widest */
  text-transform: uppercase;
}

/* ── Desktop Links — hidden lg:flex items-center gap-1 ── */
.nav__links { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .nav__links { display: flex; } }

/* link = px-4 py-2 text-[15px] font-semibold rounded */
.nav__link {
  position: relative;
  padding: .5rem 1rem;   /* py-2 px-4 */
  font-size: 15px;
  font-weight: 600;
  border-radius: .25rem; /* rounded */
  transition: all .2s;
}

/* states */
.nav--top .nav__link          { color: rgba(255,255,255,.8); }
.nav--top .nav__link:hover    { color: #fff; background: rgba(255,255,255,.12); }
.nav--top .nav__link.active   { background: rgba(255,255,255,.2); color: #fff; }

.nav--scrolled .nav__link       { color: rgba(30,59,64,.75); }
.nav--scrolled .nav__link:hover { color: var(--green); background: rgba(30,59,64,.1); }
.nav--scrolled .nav__link.active{ background: var(--green); color: #fff; }

/* active dot — absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-almunjid-gold */
.nav__link.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── Right actions ── flex items-center gap-3 shrink-0 */
.nav__actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Lang button — hidden sm:flex px-3 py-1.5 rounded text-[13px] font-bold tracking-widest uppercase border */
.nav__lang {
  display: none;
  align-items: center;
  padding: .375rem .75rem; /* py-1.5 px-3 */
  border-radius: .25rem;   /* rounded */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid;
  transition: all .2s;
}
@media (min-width: 640px) { .nav__lang { display: inline-flex; } }

.nav--top      .nav__lang { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
.nav--top      .nav__lang:hover { border-color: rgba(255,255,255,.7); color: #fff; background: rgba(255,255,255,.12); }
.nav--scrolled .nav__lang { border-color: rgba(30,59,64,.3); color: var(--green); }
.nav--scrolled .nav__lang:hover { border-color: var(--green); background: rgba(30,59,64,.08); }

/* CTA — hidden md:inline-flex px-5 py-2 text-sm font-semibold border (NO radius = straight border) */
.nav__cta {
  display: none;
  align-items: center;
  padding: .5rem 1.25rem; /* py-2 px-5 */
  font-size: .875rem;     /* text-sm */
  font-weight: 600;
  border: 1px solid;
  transition: all .3s;
  border-radius: 0; /* square edges — same as Next.js */
}
@media (min-width: 768px) { .nav__cta { display: inline-flex; } }

.nav--top      .nav__cta { border-color: rgba(255,255,255,.5); color: #fff; }
.nav--top      .nav__cta:hover { background: #fff; color: var(--green); }
.nav--scrolled .nav__cta { border-color: var(--green); color: var(--green); }
.nav--scrolled .nav__cta:hover { background: var(--green); color: #fff; }

/* Burger — lg:hidden p-1.5 */
.nav__burger { display: flex; flex-direction: column; gap: 5px; padding: .375rem; }
.nav__burger span { display: block; width: 24px; height: 2px; border-radius: 1px; transition: background .3s; }
.nav--top      .nav__burger span { background: #fff; }
.nav--scrolled .nav__burger span { background: var(--green); }
@media (min-width: 1024px) { .nav__burger { display: none; } }

/* ── Mobile Menu — fixed inset-0 z-40 bg-almunjid-green flex flex-col ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--green);
  display: none;
  flex-direction: column;
}
.mobile-menu.open { display: flex; }

/* header = px-6 h-[70px] border-b border-white/10 flex items-center justify-between */
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.5rem;
  height: 70px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
/* logo in mobile = w-11 h-11 rounded-lg bg-white/15 */
.mobile-menu__logo-wrap {
  width: 2.75rem; height: 2.75rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.15);
  padding: .25rem;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu__logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.mobile-menu__logo-name { color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .025em; }
.mobile-menu__logo-sub  { color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* close btn */
.mobile-menu__close { color: rgba(255,255,255,.7); font-size: 1.5rem; padding: .25rem; transition: color .2s; }
.mobile-menu__close:hover { color: #fff; }

/* nav links — flex flex-col justify-center flex-1 px-8 */
.mobile-menu__links { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-inline: 2rem; }

/* link — py-5 border-b border-white/10 text-xl font-bold tracking-wide */
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .025em;
  color: rgba(255,255,255,.7);
  transition: color .2s;
}
.mobile-menu__link:hover,
.mobile-menu__link.active { color: var(--gold); }

.mobile-menu__link .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: none;
  flex-shrink: 0;
}
.mobile-menu__link.active .dot { display: block; }

/* footer — px-8 pb-10 pt-6 flex items-center justify-between border-t border-white/10 */
.mobile-menu__footer {
  padding: 1.5rem 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.mobile-menu__lang { color: rgba(255,255,255,.6); font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color .2s; }
.mobile-menu__lang:hover { color: #fff; }
/* CTA in mobile — px-6 py-2.5 border border-almunjid-gold text-almunjid-gold */
.mobile-menu__cta {
  padding: .625rem 1.5rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: .875rem;
  font-weight: 600;
  transition: all .3s;
}
.mobile-menu__cta:hover { background: var(--gold); color: #fff; }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
/* relative min-h-[92vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-almunjid-green via-almunjid-green-dark to-almunjid-green-light */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 50%, var(--green-light) 100%);
}

/* background pattern — absolute inset-0 opacity-10 */
.hero__pattern {
  position: absolute; inset: 0; opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* gradient overlay — absolute inset-0 bg-gradient-to-b from-transparent via-almunjid-green/50 to-almunjid-green-dark */
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(30,59,64,.5), var(--green-dark));
}

/* logo watermark — absolute inset-0 flex items-center justify-center */
.hero__logo-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; user-select: none;
}
/* w-[380px] sm:w-[520px] lg:w-[660px] opacity-[0.07] */
.hero__logo-bg img {
  width: 380px; height: 380px;
  opacity: .07;
  object-fit: contain;
}
@media (min-width: 640px)  { .hero__logo-bg img { width: 520px; height: 520px; } }
@media (min-width: 1024px) { .hero__logo-bg img { width: 660px; height: 660px; } }

/* glow blobs — matching exact Tailwind classes */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px); /* blur-3xl ≈ 48px */
}
/* top-20 left-10 w-32 h-32 bg-almunjid-gold/10 = top:5rem left:2.5rem w:8rem h:8rem */
.hero__glow--tl {
  top: 5rem; left: 2.5rem;
  width: 8rem; height: 8rem;
  background: rgba(175,144,106,.1);
  animation: floatY 6s ease-in-out infinite;
}
/* bottom-20 right-10 w-40 h-40 bg-almunjid-gold/10 */
.hero__glow--br {
  bottom: 5rem; right: 2.5rem;
  width: 10rem; height: 10rem;
  background: rgba(175,144,106,.1);
  animation: floatY 8s ease-in-out infinite reverse;
}
@keyframes floatY {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-20px) rotate(5deg); }
}

/* hero inner = container-custom relative z-10 py-20 sm:py-24 */
.hero__inner { position: relative; z-index: 10; padding-block: 5rem; }
@media (min-width: 640px) { .hero__inner { padding-block: 6rem; } }

/* content = max-w-5xl mx-auto text-center px-2 sm:px-0 */
.hero__content {
  max-width: 64rem; /* 5xl = 1024px but Tailwind max-w-5xl = 64rem */
  margin-inline: auto;
  text-align: center;
  padding-inline: .5rem;
}
@media (min-width: 640px) { .hero__content { padding-inline: 0; } }

/* badge — inline-flex items-center space-x-2 rtl:space-x-reverse px-6 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full mb-8 */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;   /* py-3 px-6 */
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9999px;    /* rounded-full */
  margin-bottom: 2rem;      /* mb-8 */
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}
.hero__badge-icon { color: var(--gold); width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* title — heading-1 text-white mb-6 */
.hero__title {
  color: #fff;
  margin-bottom: 1.5rem; /* mb-6 */
}

/* description — body-large text-white/90 mb-12 max-w-3xl mx-auto */
.hero__desc {
  color: rgba(255,255,255,.9);
  margin-bottom: 3rem;      /* mb-12 */
  max-width: 48rem;         /* max-w-3xl */
  margin-inline: auto;
}

/* buttons — flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-4 sm:px-0 */
.hero__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .hero__buttons { flex-direction: row; gap: 1rem; padding-inline: 0; }
}

/* Primary CTA — group inline-flex items-center space-x-2 px-8 py-4 bg-almunjid-gold ... rounded-lg shadow-2xl hover:-translate-y-1 */
.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 2rem;      /* py-4 px-8 */
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  border-radius: .5rem;    /* rounded-lg */
  box-shadow: 0 25px 50px rgba(0,0,0,.25); /* shadow-2xl */
  transition: all .3s;
  font-size: 1rem;
  font-family: inherit;
}
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-4px); box-shadow: 0 25px 50px rgba(175,144,106,.5); }

/* Secondary — inline-flex px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-2 border-white/30 rounded-lg */
.btn-outline-white {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 2rem;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
  border-radius: .5rem;
  border: 2px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  transition: all .3s;
  font-size: 1rem;
  font-family: inherit;
}
.btn-outline-white:hover { background: rgba(255,255,255,.2); }

/* wave — absolute bottom-0 left-0 right-0 overflow-hidden leading-none */
.hero__wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.hero__wave svg { display: block; width: 100%; height: 120px; }

/* ════════════════════════════════════════
   ABOUT
════════════════════════════════════════ */
/* section-padding bg-gradient-to-b from-white via-almunjid-neutral-50 to-white pattern-almunjid */
.about {
  background: linear-gradient(to bottom, #fff, var(--neutral-50), #fff);
  position: relative;
}

/* grid lg:grid-cols-2 gap-12 lg:gap-20 items-center */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem; /* gap-12 */
  align-items: center;
}
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* badge — inline-flex items-center space-x-2 px-4 py-2 bg-almunjid-green/10 rounded-full mb-6 */
.about__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;    /* py-2 px-4 */
  background: rgba(30,59,64,.1);
  border-radius: 9999px;
  margin-bottom: 1.5rem;  /* mb-6 */
  color: var(--green);
  font-size: .875rem;
  font-weight: 600;
}

/* h2 = heading-2 text-almunjid-green mb-6 */
.about__title { color: var(--green); margin-bottom: 1.5rem; }

/* desc = body-text text-almunjid-neutral-600 mb-8 leading-relaxed */
.about__desc { color: var(--neutral-600); margin-bottom: 2rem; }

/* features list — space-y-4 mb-8 */
.about__features { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* each feature row — flex items-center space-x-3 */
.about__feature { display: flex; align-items: center; gap: .75rem; }

/* icon wrap — flex-shrink-0 w-6 h-6 rounded-full bg-almunjid-gold/20 flex items-center justify-center */
.about__feature-icon {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: rgba(175,144,106,.2);
  display: flex; align-items: center; justify-content: center;
}
.about__feature-icon svg {
  width: 1rem; height: 1rem;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about__feature > span { color: var(--neutral-700); font-weight: 500; }

/* stats — grid grid-cols-2 gap-3 sm:gap-6 p-4 sm:p-6 bg-gradient-to-br from-almunjid-green to-almunjid-green-dark rounded-2xl */
.about__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  border-radius: 1rem; /* rounded-2xl */
}
@media (min-width: 640px) { .about__stats { gap: 1.5rem; padding: 1.5rem; } }

.about__stat { text-align: center; }
/* divider: border-s border-white/20 on second */
.about__stat + .about__stat { border-right: 1px solid rgba(255,255,255,.2); }

.about__stat-num { font-size: 1.875rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: .25rem; }
.about__stat-num--gold { color: var(--gold); }
.about__stat-label { font-size: .875rem; color: rgba(255,255,255,.8); }

/* ── Values grid — grid-cols-1 sm:grid-cols-2 gap-6 ── */
.values-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .values-grid { grid-template-columns: 1fr 1fr; } }

/* value card — group relative bg-white rounded-2xl p-8 border-2 border-almunjid-green/35 shadow-[0_4px_20px_rgba(30,59,64,0.10)] hover:border-almunjid-green hover:shadow-[0_10px_40px_rgba(30,59,64,0.22)] transition-all hover:-translate-y-1 */
.value-card {
  position: relative;
  background: #fff;
  border-radius: 1rem;           /* rounded-2xl */
  padding: 2rem;                 /* p-8 */
  border: 2px solid rgba(30,59,64,.35);
  box-shadow: 0 4px 20px rgba(30,59,64,.10);
  transition: all .3s;
  overflow: hidden;
}
.value-card:hover {
  border-color: var(--green);
  box-shadow: 0 10px 40px rgba(30,59,64,.22);
  transform: translateY(-4px);
}

/* hover gradient — absolute inset-0 bg-gradient-to-br from-almunjid-green/12 via.../5 to-transparent opacity-0 group-hover:opacity-100 */
.value-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,59,64,.12), rgba(30,59,64,.05), transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.value-card:hover::before { opacity: 1; }

/* top accent bar — absolute top-0 left-6 right-6 h-[3px] opacity-0 group-hover:opacity-100 */
.value-card::after {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 3px;
  background: linear-gradient(to left, transparent, rgba(30,59,64,.4), transparent);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity .3s;
}
.value-card:hover::after { opacity: 1; }

/* decorative blur — absolute -top-2 -right-2 w-24 h-24 bg-almunjid-green/8 rounded-full blur-2xl opacity-0 group-hover:opacity-100 */
.value-card__glow {
  position: absolute;
  top: -.5rem; right: -.5rem;
  width: 6rem; height: 6rem;
  background: rgba(30,59,64,.08);
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.value-card:hover .value-card__glow { opacity: 1; }

/* icon — w-14 h-14 rounded-xl bg-gradient-to-br from-almunjid-green to-almunjid-green-dark flex items-center justify-center mb-4 group-hover:scale-110 shadow-md */
.value-card__icon {
  position: relative; z-index: 1;
  width: 3.5rem; height: 3.5rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: transform .3s, box-shadow .3s;
}
.value-card__icon svg { color: #fff; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.value-card:hover .value-card__icon { transform: scale(1.1); box-shadow: 0 4px 16px rgba(30,59,64,.3); }

/* h3 — text-xl font-bold text-almunjid-green mb-3 group-hover:text-almunjid-green-dark */
.value-card h3 {
  position: relative; z-index: 1;
  font-size: 1.25rem; /* text-xl ×17.5px = ~21px */
  font-weight: 700;
  color: var(--green);
  margin-bottom: .75rem;
  transition: color .3s;
}
.value-card:hover h3 { color: var(--green-dark); }

.value-card p { position: relative; z-index: 1; color: var(--neutral-600); line-height: 1.625; font-size: .9rem; }

/* About bottom ornament */
.about__ornament {
  margin-top: 5rem;
  position: relative;
}
.about__ornament-line {
  position: absolute; inset: 0;
  display: flex; align-items: center;
}
.about__ornament-line::before {
  content: '';
  display: block;
  width: 100%;
  border-top: 2px solid var(--neutral-200);
}
.about__ornament-dots {
  position: relative;
  display: flex;
  justify-content: center;
}
.about__ornament-dots-inner {
  background: #fff;
  padding: .5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.about__ornament-dot {
  border-radius: 50%;
  background: var(--gold);
}
.about__ornament-dot:nth-child(1),
.about__ornament-dot:nth-child(3) { width: 8px; height: 8px; }
.about__ornament-dot:nth-child(2) { width: 12px; height: 12px; }

/* ════════════════════════════════════════
   SERVICES
════════════════════════════════════════ */
/* section-padding bg-almunjid-green relative overflow-hidden */
.services { background: var(--green); position: relative; overflow: hidden; }

/* bg pattern — absolute inset-0 opacity-5 */
.services__pattern {
  position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* decorative blobs */
.services__glow-tl {
  position: absolute; top: 5rem; left: 2.5rem;
  width: 8rem; height: 8rem;
  background: rgba(175,144,106,.1); border-radius: 50%; filter: blur(48px);
}
.services__glow-br {
  position: absolute; bottom: 5rem; right: 2.5rem;
  width: 10rem; height: 10rem;
  background: rgba(175,144,106,.1); border-radius: 50%; filter: blur(48px);
}

/* header — text-center max-w-3xl mx-auto mb-16 */
.services__header { text-align: center; max-width: 48rem; margin-inline: auto; margin-bottom: 4rem; }

/* badge in services — bg-white/10 backdrop-blur-sm rounded-full px-4 py-2 mb-6 */
.badge-service {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
}

/* grid — sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 lg:gap-8 */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px)  { .services-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } }

/* card — group relative bg-white rounded-2xl p-6 sm:p-8 border border-almunjid-gold/20 shadow... hover:border-almunjid-gold/55 hover:shadow... hover:-translate-y-1 */
.service-card {
  position: relative;
  background: #fff;
  border-radius: 1rem;   /* rounded-2xl */
  padding: 1.5rem;       /* p-6 */
  border: 1px solid rgba(175,144,106,.2);
  box-shadow: 0 4px 20px rgba(30,59,64,.10);
  transition: all .3s;
  overflow: hidden;
}
@media (min-width: 640px) { .service-card { padding: 2rem; } }  /* sm:p-8 */
.service-card:hover {
  border-color: rgba(175,144,106,.55);
  box-shadow: 0 8px 32px rgba(175,144,106,.18);
  transform: translateY(-4px);
}

/* gradient overlay — absolute inset-0 bg-gradient-to-br from-almunjid-gold/20 to-transparent opacity-0 group-hover:opacity-100 */
.service-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(175,144,106,.2), transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }

/* icon — w-16 h-16 rounded-xl bg-gradient-to-br from-almunjid-green to-almunjid-green-dark flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 */
.service-card__icon {
  position: relative; z-index: 1;
  width: 4rem; height: 4rem;   /* w-16 h-16 */
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;       /* mb-6 */
  transition: transform .3s;
}
.service-card__icon svg { color: #fff; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-card:hover .service-card__icon { transform: scale(1.1) rotate(3deg); }

/* h3 — text-xl font-bold text-almunjid-green mb-4 group-hover:text-almunjid-gold */
.service-card h3 {
  position: relative; z-index: 1;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 1rem; /* mb-4 */
  transition: color .3s;
}
.service-card:hover h3 { color: var(--gold); }

.service-card p { position: relative; z-index: 1; color: var(--neutral-600); line-height: 1.625; font-size: .9rem; }

/* number badge — absolute top-4 right-4 rtl:left-4 rtl:right-auto w-10 h-10 rounded-full bg-almunjid-gold/10 */
.service-card__num {
  position: absolute;
  top: 1rem;
  left: 1rem;       /* RTL: left = visual left */
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: rgba(175,144,106,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  color: var(--gold);
  z-index: 1;
}

/* ════════════════════════════════════════
   LAWYERS
════════════════════════════════════════ */
/* section-padding bg-gradient-to-b from-white to-almunjid-neutral-50 */
.lawyers { background: linear-gradient(to bottom, #fff, var(--neutral-50)); }

/* card — group relative bg-white rounded-2xl overflow-hidden border-2 border-almunjid-green/25 shadow-[0_8px_40px_rgba(30,59,64,0.13)] hover:border-almunjid-gold/50 hover:shadow-[0_12px_48px_rgba(175,144,106,0.18)] */
.lawyer-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid rgba(30,59,64,.25);
  box-shadow: 0 8px 40px rgba(30,59,64,.13);
  transition: all .5s;
}
.lawyer-card:hover {
  border-color: rgba(175,144,106,.5);
  box-shadow: 0 12px 48px rgba(175,144,106,.18);
}

/* inner grid — grid md:grid-cols-5 */
.lawyer-card__grid { display: grid; }
@media (min-width: 768px) { .lawyer-card__grid { grid-template-columns: 2fr 3fr; } }

/* image column — md:col-span-2 relative h-[320px] sm:h-[400px] md:h-auto overflow-hidden bg-almunjid-green */
.lawyer-card__img {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--green);
}
@media (min-width: 640px)  { .lawyer-card__img { height: 400px; } }
@media (min-width: 768px)  { .lawyer-card__img { height: auto; } }

.lawyer-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: .8;
  mix-blend-mode: luminosity;
  transition: transform .7s;
}
.lawyer-card:hover .lawyer-card__img img { transform: scale(1.05); }

/* gradient overlay */
.lawyer-card__img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--green), rgba(30,59,64,.5), transparent);
}
@media (min-width: 768px) {
  .lawyer-card__img-overlay {
    background: linear-gradient(to right, transparent, transparent, rgba(30,59,64,.3));
  }
}

/* membership badge — absolute bottom-6 left-6 right-6 flex items-center gap-2 bg-almunjid-gold/90 backdrop-blur-sm px-4 py-2.5 rounded-lg shadow-lg */
.lawyer-card__badge {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  display: flex; align-items: center; gap: .5rem;
  background: rgba(175,144,106,.9);
  backdrop-filter: blur(8px);
  padding: .625rem 1rem;   /* py-2.5 px-4 */
  border-radius: .5rem;    /* rounded-lg */
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.lawyer-card__badge span:last-child { color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.3; }

/* content — md:col-span-3 p-7 sm:p-10 md:p-14 flex flex-col justify-between */
.lawyer-card__content {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 640px)  { .lawyer-card__content { padding: 2.5rem; } }
@media (min-width: 768px)  { .lawyer-card__content { padding: 3.5rem; } }

/* title — text-almunjid-gold text-base font-semibold tracking-widest uppercase mb-3 */
.lawyer-card__title {
  color: var(--gold);
  font-size: 1rem; /* text-base */
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

/* name — text-4xl sm:text-5xl md:text-6xl font-bold text-almunjid-green mb-6 sm:mb-8 */
.lawyer-card__name {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 700;
  color: var(--green);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}
@media (min-width: 640px)  { .lawyer-card__name { font-size: 3rem; margin-bottom: 2rem; } }
@media (min-width: 768px)  { .lawyer-card__name { font-size: 3.75rem; } }

/* stats row — flex flex-wrap gap-4 mb-8 pb-8 border-b border-almunjid-green/10 */
.lawyer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(30,59,64,.1);
}

/* stat box base — flex-1 min-w-[140px] relative overflow-hidden rounded-2xl px-6 py-5 */
.stat-box {
  flex: 1;
  min-width: 140px;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;   /* py-5 px-6 */
}

/* decorative circles */
.stat-box::before {
  content: '';
  position: absolute;
  top: -1rem; right: -1rem;
  width: 5rem; height: 5rem;
  border-radius: 50%;
}
.stat-box::after {
  content: '';
  position: absolute;
  bottom: -.75rem; left: -.75rem;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
}

/* green stat — bg-gradient-to-br from-almunjid-green to-almunjid-green-dark border border-almunjid-green shadow-lg shadow-almunjid-green/20 */
.stat-box--green {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  border: 1px solid var(--green);
  box-shadow: 0 4px 20px rgba(30,59,64,.2);
}
.stat-box--green::before { background: rgba(255,255,255,.05); }
.stat-box--green::after  { background: rgba(175,144,106,.1);  }

/* gold stat — bg-gradient-to-br from-almunjid-gold/15 to-almunjid-gold/5 border border-almunjid-gold/40 */
.stat-box--gold {
  background: linear-gradient(135deg, rgba(175,144,106,.15), rgba(175,144,106,.05));
  border: 1px solid rgba(175,144,106,.4);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.stat-box--gold::before { background: rgba(175,144,106,.08); }
.stat-box--gold::after  { background: rgba(30,59,64,.08);    }

/* stat num — text-3xl md:text-4xl font-extrabold text-almunjid-gold mb-1 tracking-tight */
.stat-box__num {
  position: relative; z-index: 1;
  font-size: 1.875rem; /* text-3xl */
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .25rem;
  letter-spacing: -.025em;
}
@media (min-width: 768px) { .stat-box__num { font-size: 2.25rem; } } /* text-4xl */

/* stat label — text-sm font-bold tracking-widest uppercase */
.stat-box__label {
  position: relative; z-index: 1;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stat-box--green .stat-box__label { color: rgba(255,255,255,.7); }
.stat-box--gold  .stat-box__label { color: rgba(30,59,64,.6); }

/* specialties — mb-6 */
.lawyer-specialties { margin-bottom: 1.5rem; }

.lawyer-specialties__title {
  font-size: .875rem;
  font-weight: 700;
  color: rgba(30,59,64,.6);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
}

.specialty-tags { display: flex; flex-wrap: wrap; gap: .5rem; }

/* tag — flex items-center gap-1.5 px-4 py-2 bg-almunjid-green/5 border border-almunjid-green/15 text-almunjid-green text-base font-semibold rounded-lg */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem;   /* py-2 px-4 */
  background: rgba(30,59,64,.05);
  border: 1px solid rgba(30,59,64,.15);
  border-radius: .5rem;  /* rounded-lg */
  color: var(--green);
  font-size: 1rem;        /* text-base */
  font-weight: 600;
}
.tag svg { stroke: var(--gold); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* achievement — bg-almunjid-gold/12 border-s-4 border-almunjid-gold rounded-lg p-5 mb-5 */
.achievement {
  background: rgba(175,144,106,.12);
  border-right: 4px solid var(--gold);  /* border-s-4 in RTL = border-right */
  border-radius: .5rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.achievement svg { color: var(--gold); stroke: var(--gold); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: .1rem; width: 1.25rem; height: 1.25rem; }
.achievement p { color: rgba(30,59,64,.8); font-size: 1rem; line-height: 1.625; font-weight: 500; }

/* team note — flex items-start gap-3 mb-8 */
.team-note { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 2rem; }
.team-note svg { color: var(--gold); stroke: var(--gold); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: .1rem; width: 1.25rem; height: 1.25rem; }
.team-note p { color: var(--neutral-500); font-size: 1rem; line-height: 1.625; }

/* contact links — grid grid-cols-1 sm:grid-cols-2 gap-3 pt-6 border-t border-almunjid-green/10 */
.lawyer-contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(30,59,64,.1);
}
@media (min-width: 640px) { .lawyer-contacts { grid-template-columns: 1fr 1fr; } }

/* link — flex items-center gap-3 p-4 rounded-xl border */
.contact-link {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem;
  border-radius: .75rem;  /* rounded-xl */
  border: 1px solid;
  transition: all .3s;
}
.contact-link--gold  { border-color: rgba(175,144,106,.2); }
.contact-link--gold:hover  { background: rgba(175,144,106,.05); border-color: rgba(175,144,106,.4); }
.contact-link--green { border-color: rgba(30,59,64,.2); }
.contact-link--green:hover { background: rgba(30,59,64,.05); border-color: rgba(30,59,64,.4); }

/* icon — w-11 h-11 rounded-lg bg-xxx flex items-center justify-center flex-shrink-0 */
.contact-link__icon {
  width: 2.75rem; height: 2.75rem; /* w-11 h-11 */
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .3s;
}
.contact-link__icon svg { stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; width: 1.125rem; height: 1.125rem; }

.contact-link--gold .contact-link__icon  { background: rgba(175,144,106,.1); }
.contact-link--gold .contact-link__icon svg { stroke: var(--gold); }
.contact-link--gold:hover .contact-link__icon { background: var(--gold); }
.contact-link--gold:hover .contact-link__icon svg { stroke: #fff; }

.contact-link--green .contact-link__icon { background: rgba(30,59,64,.1); }
.contact-link--green .contact-link__icon svg { stroke: var(--green); }
.contact-link--green:hover .contact-link__icon { background: var(--green); }
.contact-link--green:hover .contact-link__icon svg { stroke: #fff; }

/* meta text */
.contact-link__meta small { display: block; font-size: .75rem; color: var(--neutral-400); margin-bottom: .125rem; font-weight: 500; }
.contact-link__meta span  { font-size: .875rem; font-weight: 600; color: var(--green); }

/* ════════════════════════════════════════
   CONTACT
════════════════════════════════════════ */
/* section-padding bg-gradient-to-b from-white to-almunjid-neutral-50 */
.contact { background: linear-gradient(to bottom, #fff, var(--neutral-50)); }

/* section header — text-center max-w-3xl mx-auto mb-16 */
.contact .section-header { max-width: 48rem; margin-inline: auto; text-align: center; margin-bottom: 4rem; }

/* grid — lg:grid-cols-2 gap-8 mb-8 items-stretch */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: stretch;
}
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 1fr 1fr; } }

/* form — bg-white rounded-2xl p-6 sm:p-8 border border-almunjid-green/25 shadow... hover:border-almunjid-gold/40 flex flex-col */
.contact-form {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(30,59,64,.25);
  box-shadow: 0 4px 20px rgba(30,59,64,.08);
  transition: all .3s;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) { .contact-form { padding: 2rem; } }
.contact-form:hover { border-color: rgba(175,144,106,.4); box-shadow: 0 8px 32px rgba(30,59,64,.13); }

/* h3 — text-xl font-bold text-almunjid-green mb-6 */
.contact-form h3 { font-size: 1.25rem; font-weight: 700; color: var(--green); margin-bottom: 1.5rem; }

/* form fields — space-y-5 */
.contact-form form { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }

.form-group label { display: block; color: var(--green); font-weight: 600; margin-bottom: .5rem; font-size: .875rem; }
.form-group small { display: block; font-size: .75rem; color: var(--neutral-400); margin-bottom: .5rem; }

/* inputs — px-4 py-3 border border-almunjid-neutral-200 rounded-xl focus:border-almunjid-gold focus:ring-2 focus:ring-almunjid-gold/10 bg-almunjid-neutral-50/40 */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: .75rem 1rem;   /* py-3 px-4 */
  border: 1px solid var(--neutral-200);
  border-radius: .75rem;  /* rounded-xl */
  font-family: inherit;
  font-size: .95rem;
  color: var(--neutral-900);
  background: rgba(250,250,250,.4);
  transition: border-color .25s, box-shadow .25s;
  direction: rtl;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(175,144,106,.1);
}
.form-group textarea { resize: none; min-height: 140px; }

/* submit — w-full inline-flex items-center justify-center gap-2 px-8 py-4 bg-almunjid-gold rounded-xl hover:-translate-y-0.5 */
.btn-submit {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 1rem 2rem;
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: .75rem;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
  transition: all .3s;
  font-family: inherit;
  cursor: pointer;
  border: none;
  margin-top: auto;
}
.btn-submit:hover { background: var(--gold-dark); box-shadow: 0 6px 20px rgba(175,144,106,.35); transform: translateY(-2px); }
.btn-submit svg { stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* info cards — flex flex-col gap-4 h-full */
.contact-info { display: flex; flex-direction: column; gap: 1rem; }

/* info card — flex flex-1 items-center gap-4 bg-white rounded-2xl px-5 py-4 border border-almunjid-green/20 shadow... hover:border-almunjid-gold/45 */
.info-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem 1.25rem;  /* py-4 px-5 */
  border: 1px solid rgba(30,59,64,.2);
  box-shadow: 0 4px 20px rgba(30,59,64,.08);
  transition: all .3s;
}
.info-card:hover { border-color: rgba(175,144,106,.45); box-shadow: 0 8px 28px rgba(30,59,64,.13); }

/* icon — flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-br from-almunjid-green to-almunjid-green-dark flex items-center justify-center */
.info-card__icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  display: flex; align-items: center; justify-content: center;
}
.info-card__icon svg { stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 1.25rem; height: 1.25rem; }

/* text */
.info-card h4 { font-size: .875rem; font-weight: 700; color: var(--green); margin-bottom: .125rem; }
.info-card p  { font-size: .875rem; font-weight: 600; color: var(--neutral-700); line-height: 1.4; }
.info-card a  { color: var(--gold); transition: color .2s; text-decoration: underline; }
.info-card a:hover { color: var(--gold-dark); }
.info-card small { font-size: .75rem; color: var(--neutral-400); margin-top: .125rem; display: block; }

/* map — bg-white rounded-2xl border border-almunjid-green/20 overflow-hidden */
.contact-map {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(30,59,64,.2);
  box-shadow: 0 4px 20px rgba(30,59,64,.08);
  overflow: hidden;
}
.contact-map iframe { display: block; width: 100%; }

/* map footer — px-5 sm:px-6 py-4 flex items-center justify-between gap-3 border-t border-almunjid-green/10 */
.contact-map__footer {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid rgba(30,59,64,.1);
  flex-wrap: wrap;
}
@media (min-width: 640px) { .contact-map__footer { padding-inline: 1.5rem; } }

.contact-map__address {
  display: flex; align-items: center; gap: .5rem;
  color: var(--neutral-500); font-size: .875rem;
}
.contact-map__address svg { stroke: var(--green); fill: none; stroke-width: 2; width: .9rem; height: .9rem; flex-shrink: 0; }

/* open maps btn — inline-flex items-center gap-2 px-5 py-2.5 bg-almunjid-green text-white font-semibold text-sm rounded-xl */
.btn-maps {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1.25rem;  /* py-2.5 px-5 */
  background: var(--green);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  border-radius: .75rem;
  box-shadow: 0 2px 8px rgba(30,59,64,.2);
  transition: all .3s;
}
.btn-maps:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30,59,64,.3); }
.btn-maps svg { stroke: #fff; fill: none; stroke-width: 2; width: .9rem; height: .9rem; flex-shrink: 0; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer { background: var(--green); color: #fff; }

/* main — py-16 = 4rem */
.footer__main { padding-block: 4rem; }

/* grid — grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 */
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }

/* about col (lg:col-span-2) — in 3-col layout it's naturally 2fr */

/* logo — inline-flex items-center mb-6, relative w-20 h-20 */
.footer__logo { display: inline-flex; align-items: center; margin-bottom: 1.5rem; }
.footer__logo img { width: 10rem; height: 10rem; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.15)); }

/* desc — text-white/80 leading-relaxed mb-6 max-w-md */
.footer__desc {
  color: rgba(255,255,255,.8);
  line-height: 1.625;
  margin-bottom: 1.5rem;
  max-width: 28rem;
  font-size: .95rem;
}

/* socials — flex space-x-4 */
.footer__socials { display: flex; gap: 1rem; }
.footer__social {
  width: 2.5rem; height: 2.5rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  transition: all .3s;
}
.footer__social:hover { background: var(--gold); transform: translateY(-4px); }
.footer__social svg { stroke: #fff; fill: none; stroke-width: 2; width: 1.125rem; height: 1.125rem; }

/* heading — text-lg font-bold mb-6 relative inline-block */
.footer__heading {
  display: inline-block;
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: .5rem;
  position: relative;
}
/* underline — absolute -bottom-2 left-0 w-12 h-1 bg-almunjid-gold rounded-full */
.footer__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;  /* RTL: left → right */
  width: 3rem; height: 4px;
  background: var(--gold);
  border-radius: 9999px;
}

/* quick links — space-y-3 */
.footer__links { display: flex; flex-direction: column; gap: .75rem; }
.footer__link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  transition: color .2s;
}
.footer__link:hover { color: var(--gold); }
.footer__link svg { stroke: currentColor; fill: none; stroke-width: 2; width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .2s; }
.footer__link:hover svg { transform: translateX(3px); }

/* contact list — space-y-4 */
.footer__contact-items { display: flex; flex-direction: column; gap: 1rem; }
.footer__contact-item { display: flex; align-items: flex-start; gap: .75rem; }
.footer__contact-item svg { stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .15rem; }
.footer__contact-item a,
.footer__contact-item span { color: rgba(255,255,255,.8); font-size: .875rem; transition: color .2s; line-height: 1.5; }
.footer__contact-item a:hover { color: var(--gold); }

/* hours box — mt-6 p-4 bg-white/5 rounded-lg border border-white/10 */
.footer__hours {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(255,255,255,.05);
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.1);
}
.footer__hours-title { font-size: .875rem; font-weight: 600; color: var(--gold); margin-bottom: .75rem; }
.footer__hours-rows { display: flex; flex-direction: column; gap: .5rem; }
.footer__hours-row { color: rgba(255,255,255,.8); font-size: .875rem; }
.footer__hours-row strong { display: block; color: #fff; font-weight: 600; margin-top: .25rem; }

/* bottom bar — border-t border-white/10 py-6 */
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.5rem; }
.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 768px) { .footer__bottom-inner { flex-direction: row; } }

.footer__bottom p { color: rgba(255,255,255,.55); font-size: .875rem; }

/* Dev badge */
.footer__dev-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem .3rem .5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px;
  text-decoration: none;
  transition: background .22s, border-color .22s, transform .18s;
}
.footer__dev-badge:hover {
  background: rgba(175,144,106,.15);
  border-color: rgba(175,144,106,.4);
  transform: translateY(-1px);
}
.footer__dev-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(175,144,106,.7);
  flex-shrink: 0;
}
.footer__dev-badge-label {
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
}
.footer__dev-badge-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .02em;
}
.footer__dev-badge svg {
  width: 11px; height: 11px;
  stroke: rgba(255,255,255,.35);
  flex-shrink: 0;
  transition: stroke .22s, transform .18s;
}
.footer__dev-badge:hover svg {
  stroke: var(--gold-light);
  transform: translate(1px, -1px);
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--green);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: .75rem;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  border-right: 4px solid var(--gold);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  z-index: 9999;
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════
   COMMON UTILS
════════════════════════════════════════ */
/* section header shared styles */
.section-header { text-align: center; }

.section-badge-green {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  background: rgba(30,59,64,.1);
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  color: var(--green);
  font-size: .875rem;
  font-weight: 600;
}
.section-badge-green svg { stroke: var(--green); fill: none; stroke-width: 2; width: 1.125rem; height: 1.125rem; }

.section-title-green { color: var(--green); margin-bottom: 1.5rem; }
.section-title-white { color: #fff;         margin-bottom: 1.5rem; }

.section-desc-neutral { color: var(--neutral-600); }
.section-desc-white   { color: rgba(255,255,255,.8); }

/* ════════════════════════════════════════
   LTR OVERRIDES  (dir="ltr" — English version)
════════════════════════════════════════ */

/* Body / base direction */
[dir="ltr"] body { direction: ltr; font-family: 'Gotham', system-ui, sans-serif; }

/* About stats: divider on left in LTR */
[dir="ltr"] .about__stat + .about__stat {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,.2);
}

/* Achievement: accent bar on left in LTR */
[dir="ltr"] .achievement {
  border-right: none;
  border-left: 4px solid var(--gold);
}

/* Footer heading underline: left-aligned in LTR */
[dir="ltr"] .footer__heading::after { right: auto; left: 0; }

/* Footer link arrows: no rotation in LTR */
[dir="ltr"] .footer__link svg { transform: none; }
[dir="ltr"] .footer__link:hover svg { transform: translateX(-3px); }

/* Toast accent: left border in LTR */
[dir="ltr"] .toast {
  border-right: none;
  border-left: 4px solid var(--gold);
}

/* Nav logo sub stays gold, text aligns left */
[dir="ltr"] .nav__logo-text { text-align: left; }

/* Lawyer card image gradient: LTR direction */
[dir="ltr"] .lawyer-card__img-overlay {
  background: linear-gradient(to top, var(--green), rgba(30,59,64,.5), transparent);
}
@media (min-width: 768px) {
  [dir="ltr"] .lawyer-card__img-overlay {
    background: linear-gradient(to left, transparent, transparent, rgba(30,59,64,.3));
  }
}

/* Specialty tag checkmark gap */
[dir="ltr"] .tag { gap: .375rem; }

/* Service card number: top-right in LTR */
[dir="ltr"] .service-card__num { left: auto; right: 1rem; }

/* Mobile menu link dots */
[dir="ltr"] .mobile-menu__link { flex-direction: row-reverse; }

/* Hero buttons full-width on mobile same as RTL */
[dir="ltr"] .hero__buttons { direction: ltr; }

/* About grid left→right columns order stays same */
[dir="ltr"] .about__grid { direction: ltr; }

/* Footer grid text align */
[dir="ltr"] .footer__desc { text-align: left; }
[dir="ltr"] .footer__socials { direction: ltr; }
[dir="ltr"] .footer__contact-items { direction: ltr; }
[dir="ltr"] .footer__links { direction: ltr; }
[dir="ltr"] .footer__hours-rows { direction: ltr; }
[dir="ltr"] .footer__bottom-inner { direction: ltr; }

/* Contact map footer */
[dir="ltr"] .contact-map__footer { direction: ltr; }

/* Info cards */
[dir="ltr"] .contact-info { direction: ltr; }

/* Input placeholder direction */
[dir="ltr"] .form-group input,
[dir="ltr"] .form-group textarea { direction: ltr; text-align: left; }

/* Lawyer card content padding alignment */
[dir="ltr"] .lawyer-card__badge { flex-direction: row; }

/* Stat box decorative circles stay same */

/* Section badges */
[dir="ltr"] .section-badge-green { direction: ltr; }
[dir="ltr"] .about__badge        { direction: ltr; }
[dir="ltr"] .badge-service       { direction: ltr; }
[dir="ltr"] .hero__badge         { direction: ltr; }

/* Nav lang button — shown at sm+ */
.nav__lang-btn {
  display: none;
  align-items: center;
  padding: .375rem .75rem;
  border-radius: .25rem;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid;
  transition: all .2s;
  cursor: pointer;
  background: none;
  font-family: inherit;
  text-decoration: none;
}
@media (min-width: 640px) { .nav__lang-btn { display: inline-flex; } }

.nav--top      .nav__lang-btn { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
.nav--top      .nav__lang-btn:hover { border-color: rgba(255,255,255,.7); color: #fff; background: rgba(255,255,255,.12); }
.nav--scrolled .nav__lang-btn { border-color: rgba(30,59,64,.3); color: var(--green); }
.nav--scrolled .nav__lang-btn:hover { border-color: var(--green); background: rgba(30,59,64,.08); }