/*
Theme Name: Ashjar Al-Fusul — أشجار الفصول
Theme URI: https://example.com/
Author: Ahmed Dev
Description: ثيم رسمي وفخم لمشروع "أشجار الفصول" — تطوير المزارع الريفية وتحويلها لنُزُل سياحية.
Version: 1.0.0
Text Domain: ashjar-alfusul
*/

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap");

/* =========================================================
   TOKENS
========================================================= */
:root{
  /* Base */
  --af-bg:#ffffff;
  --af-surface:#ffffff;
  --af-ink:#0d1714;
  --af-muted: rgba(13,23,20,.62);
  --af-border: rgba(13,23,20,.10);

  /* Brand */
  --af-primary:#40423c;
  --af-primary-hover:#2a2b29;

  /* Accents (subtle) */
  --af-accent:#48c39a;
  --af-accent2:#A4C85D;

  /* Layout */
  --af-radius: 18px;
  --af-radius2: 22px;
  --af-container: 980px;

  /* Shadows */
  --af-shadow: 0 28px 80px rgba(13,23,20,.10);
  --af-shadow2: 0 14px 35px rgba(13,23,20,.06);

  /* Header */
  --af-headerH: 78px;

  /* Dark canvas */
  --af-dark: #0b0f14;
  --af-dark2:#0b1a16;
}

/* =========================================================
   BASE
========================================================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--af-ink);
  background:
    radial-gradient(1000px 600px at 18% 18%, rgba(139,195,74,.12), transparent 62%),
    radial-gradient(1000px 700px at 85% 22%, rgba(94,202,216,.10), transparent 62%),
    radial-gradient(900px 700px at 55% 88%, rgba(242,197,93,.08), transparent 62%),
    linear-gradient(180deg, #fff, #fff);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background: rgba(72,195,154,.18); }

/* Containers */
.af-container{
  width:min(100% - 32px, var(--af-container));
  margin-inline:auto;
}
.af-container--wide{
  width:min(100% - 40px, 1280px);
  margin-inline:auto;
}

/* Screen reader */
.af-sr{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =========================================================
   REVEAL (Safe)
   - ما يخفي شيء إلا لو html عليه class "js"
========================================================= */
.af-reveal{ opacity: 1; transform: none; }
html.js .af-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
html.js .af-reveal.is-in{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  html.js .af-reveal{ opacity: 1; transform:none; transition:none; }
}

/* =========================================================
   BUTTONS
========================================================= */
.af-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(13,23,20,.12);
  background: rgba(255,255,255,.78);
  color: rgba(13,23,20,.92);
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.af-btn:hover{ transform: translateY(-1px); }
.af-btn:active{ transform: translateY(0); }

.af-btn--primary{
  border:0;
  background: var(--af-primary);
  color:#fff;
  box-shadow: 0 14px 34px rgba(13,23,20,.16);
}
.af-btn--primary:hover{ background: var(--af-primary-hover); }

.af-btn--ghost{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color:#fff;
}

/* Luxury CTA (light pages) */
.af-btn--luxuryLite{
  position:relative;
  overflow:hidden;
  height:46px;
  padding:0 22px;
  border-radius:16px;
  border:0;
  color:#fff;
  font-weight:900;
  letter-spacing:.1px;
  background: linear-gradient(135deg, #2e5f43 0%, #273a32 45%, #303b2a 100%);
  box-shadow: 0 14px 36px rgba(13,23,20,.16), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .16s ease, filter .18s ease, box-shadow .2s ease;
}

.af-btn--luxuryLite::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-120%;
  width:60%;
  height:220%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
  transform: rotate(20deg);
  pointer-events:none;
}
.af-btn--luxuryLite:hover{
  transform: translateY(-2px);
  filter: saturate(1.05) brightness(1.02);
  box-shadow: 0 22px 55px rgba(13,23,20,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.af-btn--luxuryLite:hover::after{ left: 140%; transition: left .75s ease; }
@media (prefers-reduced-motion: reduce){
  .af-btn--luxuryLite::after{ display:none; }
  .af-btn--luxuryLite{ transition:none; }
}

/* =========================================================
   HEADER (Overlay on hero + glass on scroll)
========================================================= */
.af-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:60;
  background:transparent;
  border:0;
  box-shadow:none;
}
.af-header__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  min-height: var(--af-headerH);
  gap:14px;
}

/* widen header only (keeps pages unified) */
.af-header .af-container{
  width: min(100% - 40px, 1280px);
}
@media (min-width: 1100px){
  .af-header .af-container{
    width: calc(100% - 48px);
    max-width: 1400px;
  }
}

/* Brand */
.af-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:180px;
  z-index:2;
}
.af-brand__mark{ background:transparent; border:0; padding:0; display:block; }
.af-logo{
  height:34px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
.af-brand__name{ display:flex; flex-direction:column; line-height:1.05; }
.af-brand__name b{
  font-size:16px;
  color:#fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
}
.af-brand__name span{
  font-size:12px;
  margin-top:2px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* Center nav */
.af-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

/* Menu capsule (desktop) */
.af-menu{
  display:inline-flex;
  align-items:center;
  gap:6px;
  list-style:none;
  padding:6px 10px;
  margin:0;
  border-radius:999px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.18);
}
.af-menu li{ position:relative; }
.af-menu a{
  padding:8px 12px;
  border-radius:999px;
  color:#fff;
  font-weight:500;
  font-size:14px;
  transition: background .15s ease, transform .15s ease;
}
.af-menu a:hover{ background: rgba(255,255,255,.14); }

/* Submenu (desktop) */
.af-menu .af-has-sub > a{ display:flex; align-items:center; gap:8px; }
.af-menu .af-has-sub > a::after{ content:"▾"; font-size:12px; opacity:.7; margin-right:2px; }

.af-submenu{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  min-width:240px;
  border-radius:18px;
  display:none;
  z-index:70;
  background: rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.16);
}
.af-submenu li a{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  color: rgba(255,255,255,.86);
  font-size:14px;
}
.af-submenu li a:hover{ background: rgba(255,255,255,.12); }
.af-has-sub:hover > .af-submenu{ display:block; }

/* Right side */
.af-right{
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
}
.af-social{
  display:flex;
  align-items:center;
  gap:6px;
}
.af-social a{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  font-size:15px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  transition: transform .15s ease, background .15s ease;
}
.af-social a:hover{ background: rgba(255,255,255,.18); transform: translateY(-1px); }

.af-actions{ display:flex; align-items:center; gap:10px; }

/* Burger */
.af-burger{
  width:44px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.af-burger span{
  width:18px; height:2px;
  background: rgba(255,255,255,.92);
  display:block;
  position:relative;
  border-radius:999px;
}
.af-burger span::before,
.af-burger span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:2px;
  background: rgba(255,255,255,.92);
  border-radius:999px;
}
.af-burger span::before{ top:-6px; }
.af-burger span::after{ top:6px; }

/* Drawer (mobile) */
.af-drawer{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.af-drawer.is-open{ display:block; }
.af-drawer__overlay{ position:absolute; inset:0; background: rgba(10,8,6,.45); }
.af-drawer__panel{
  position:absolute;
  top:14px;
  right:14px;
  width:min(360px, calc(100% - 28px));
  border-radius:22px;
  padding:14px;
  background: rgba(255,255,255,.94);
  border:1px solid rgba(13,23,20,.10);
  box-shadow: 0 26px 80px rgba(13,23,20,.18);
}
.af-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 6px 12px;
}
.af-x{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(13,23,20,.12);
  background: rgba(13,23,20,.04);
  cursor:pointer;
}
.af-drawer .af-menu{
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding:6px;
  background: transparent;
  border:0;
}
.af-drawer .af-menu a{
  color: var(--af-ink);
  background: rgba(13,23,20,.03);
  border:1px solid rgba(13,23,20,.08);
}
.af-drawer .af-submenu{
  position:static;
  display:block;
  background: transparent;
  border:0;
  padding:6px 6px 0;
}
.af-drawer .af-submenu a{ color: var(--af-ink); }
.af-drawer .af-actions{
  padding:10px 6px 6px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.af-drawer .af-btn{
  color: var(--af-ink);
  background: rgba(13,23,20,.04);
  border-color: rgba(13,23,20,.10);
}
.af-drawer .af-btn--primary{
  background: var(--af-primary);
  color:#fff;
}

/* Scroll state: glass */
.af-header.is-scrolled{
  position:fixed;
  background: rgba(10,15,12,.40);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.af-header.is-scrolled .af-menu{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}
.af-header.is-scrolled .af-brand__name b,
.af-header.is-scrolled .af-menu a{ color:#fff; text-shadow:none; }
.af-header.is-scrolled .af-brand__name span{ color: rgba(255,255,255,.70); text-shadow:none; }
.af-header.is-scrolled .af-social a{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}
.af-header.is-scrolled .af-btn--ghost{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}

/* =========================================================
   HERO (Front Page)
========================================================= */
.af-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  border-bottom:1px solid rgba(13,23,20,.06);
  padding-top: calc(var(--af-headerH) + 14px);
}
.af-hero__bg{
  position:absolute;
  inset:0;
  background: url("./assets/hero.jpg") center/cover no-repeat;
  transform: scale(1.03);
  filter: brightness(.95) contrast(1.02) saturate(1.02);
}
.af-hero__veil{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.14) 55%, rgba(0,0,0,0));
}
.af-hero__content{
  position:relative;
  width:100%;
  padding: 44px 0 64px;
  display:flex;
  align-items:flex-end;
}
.af-hero__box{
  width:min(760px, 100%);
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  background: rgba(0,0,0,.60);
  border:1px solid rgba(255,255,255,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.af-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-weight:900;
  font-size:13px;
}
.af-hero__title{
  margin:14px 0 0;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height:1.08;
  letter-spacing:.2px;
  color:#fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.af-hero__note{
  margin-top:12px;
  color: rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.9;
  max-width: 600px;
}

/* Rotating hero text */
.af-hero__rotating{
  display:block;
  position:relative;
  height:34px;
  line-height:34px;
  margin:10px auto 0;
  text-align:center;
  overflow:hidden;
  width:100%;
  max-width:680px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255,255,255,.92);
}
.af-hero__rotating span{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.af-hero__rotating span.active{
  opacity:1;
  transform: translateY(0);
}
.af-hero__actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================================================
   SECTIONS / TYPO / CARDS
========================================================= */
.af-section{ padding: 70px 0; }
.af-section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.af-h2{ margin:0; font-size:26px; letter-spacing:.2px; }
.af-sub{ margin:6px 0 0; color: var(--af-muted); font-size:14px; }

.af-link{
  color: var(--af-ink);
  font-weight:900;
  font-size:14px;
  border-bottom:1px solid rgba(13,23,20,.18);
  padding-bottom:4px;
}
.af-link:hover{ border-bottom-color: rgba(13,23,20,.32); }

.af-grid{ display:grid; gap:16px; }
.af-grid--3{ grid-template-columns: repeat(3, 1fr); }

.af-card{
  background: rgba(255,255,255,.88);
  border:1px solid var(--af-border);
  border-radius: var(--af-radius2);
  padding:18px;
  box-shadow: var(--af-shadow2);
}
.af-card h3{ margin:0 0 8px; font-size:18px; }
.af-card p{ margin:0; color: var(--af-muted); font-size:14px; line-height:1.7; }

/* Vision (homepage) */
.af-vision{
  margin-top: 28px;
  padding: 24px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(164,200,93,.08), rgba(164,200,93,.03));
  border: 1px solid rgba(164,200,93,.18);
  text-align: center;
}
.af-vision__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(13,23,20,.90);
}
.af-vision__text{
  margin: 0 auto;
  max-width: 680px;
  font-size: 14.5px;
  line-height: 2;
  color: rgba(13,23,20,.75);
}

/* =========================================================
   PROJECTS (Card default — used in homepage sections)
========================================================= */
.af-project{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 22px 60px rgba(13,23,20,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.af-project:hover{
  transform: translateY(-6px);
  border-color: rgba(13,23,20,.14);
  box-shadow: 0 34px 90px rgba(13,23,20,.14);
}
.af-project__thumb{
  position: relative;
  height: 240px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  line-height:0;
}
.af-project__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .45s ease;
}
.af-project:hover .af-project__thumb img{ transform: scale(1.06); }

.af-project__body{
  padding: 18px 18px 20px;
}
.af-project__title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.7;
  color: rgba(13,23,20,.92);
}

/* =========================================================
   CTA (Light)
========================================================= */
.af-cta{ padding: 60px 0 10px; }
.af-cta__card{
  border-radius: 22px;
  padding: 26px;
  border: 1px solid var(--af-border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--af-shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.af-cta__title{ margin:0; font-size:22px; }
.af-cta__text{ margin:8px 0 0; color: var(--af-muted); font-size:14px; line-height:1.8; }

/* =========================================================
   GENERIC HERO (Pages: Projects/Partnerships/Gallery/Contact)
========================================================= */
.af-about-hero{
  position: relative;
  overflow: hidden;
  padding: 120px 0 78px;
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.16), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.12), transparent 60%),
    radial-gradient(900px 520px at 55% 110%, rgba(242,197,93,.10), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16);
}
.af-about-hero__veil{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.12) 55%, rgba(0,0,0,0));
}
.af-about-hero__inner{
  position: relative;
  z-index: 2;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.af-about-title{
  margin:0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.af-about-hero__lead{
  margin: 0;
  max-width: 820px;
  padding: 12px 16px;
  color: rgba(255,255,255,.90);
  line-height: 2;
  font-size: 16px;
  text-align: center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================================================
   ABOUT PAGE — DARK (Final, one source of truth)
   wrapper: .af-about-page.af-about-page--dark
========================================================= */
.af-about-page{ padding: 0 0 70px; }
.af-about-page--dark{
  position: relative;
  color: rgba(255,255,255,.92);
  background: var(--af-dark);
  padding-bottom: 70px;
}
.af-about-page--dark .af-about-hero{
  background: transparent;
  padding: 132px 0 76px;
}
.af-about-page--dark .af-about-hero__veil{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(164,200,93,.16), transparent 60%),
    radial-gradient(900px 420px at 85% 18%, rgba(94,202,216,.12), transparent 60%),
    radial-gradient(900px 520px at 55% 110%, rgba(242,197,93,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.08) 60%, rgba(0,0,0,0));
}
.af-about-page--dark .af-about-body{ padding-top: 10px; }

/* Intro card */
.af-about-page--dark .af-about-introCard{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  padding: 26px 24px 22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  text-align:center;
  margin: 18px auto 20px;
}
.af-about-page--dark .af-about-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 0 0 14px;
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}
.af-about-page--dark .af-about-logo img{
  width: 86px;
  height:auto;
  display:block;
  margin: 0 auto;
  background:none;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.36));
}
.af-about-page--dark .af-about-introText{ max-width: 74ch; margin: 0 auto; }
.af-about-page--dark .af-about-introText p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2.1;
  color: rgba(255,255,255,.84);
}
.af-about-page--dark .af-about-introText p:last-child{
  margin-bottom: 0;
  color: rgba(255,255,255,.78);
}

/* Split grid (2 cards) */
.af-about-page--dark .af-about-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 18px 0 18px;
}
.af-about-page--dark .af-about-card{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.af-about-page--dark .af-about-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 30px 95px rgba(0,0,0,.28);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.15);
}
.af-about-page--dark .af-about-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
}
.af-about-page--dark .af-about-card p{
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
  color: rgba(255,255,255,.78);
}

/* Values pills */
.af-about-page--dark .af-about-values{
  padding: 22px 22px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  text-align:center;
}
.af-about-page--dark .af-about-values h3{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
}
.af-about-page--dark .af-about-values ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}
.af-about-page--dark .af-about-values li{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  font-weight: 800;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .16s ease, background .18s ease, border-color .18s ease;
}
.af-about-page--dark .af-about-values li:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.16);
}

/* =========================================================
   TABS — TOP NAV (single clean system)
   Use wrapper: .af-tabs.af-tabs--topnav
========================================================= */
.af-tabs{ padding-top: 10px; }
.af-tabs--topnav .af-tabs__head{
  display:flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 18px;
  margin: 0 0 18px;
  padding: 0;
}
.af-tabs--topnav .af-tab{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;

  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 900;
  line-height: 1.2;

  color: rgba(13,23,20,.30);
  cursor:pointer;
  transition: color .18s ease, opacity .18s ease;
}
.af-tabs--topnav .af-tab:hover{ color: rgba(13,23,20,.55); }
.af-tabs--topnav .af-tab.is-active{
  color: #0b89b8;
  opacity: 1;
}
.af-tabs--topnav .af-tab + .af-tab{
  position: relative;
  padding-right: 22px;
}
.af-tabs--topnav .af-tab + .af-tab::before{
  content: "|";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-55%);
  color: rgba(13,23,20,.22);
  font-weight: 800;
}

/* Panels */
.af-tabs--topnav .af-tabs__content{ position: relative; min-height: 160px; }
.af-tabs--topnav .af-tab-panel{
  display:none;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.af-tabs--topnav .af-tab-panel.is-active{
  display:block;
  opacity:1;
  transform: translateY(0);

  border-radius: 26px;
  border: 1px solid rgba(13,23,20,.12);
  background: #fff;
  padding: 22px;
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
}

@media (max-width: 640px){
  .af-tabs--topnav .af-tabs__head{ flex-wrap: wrap; gap: 10px 14px; }
  .af-tabs--topnav .af-tab{ font-size: 20px; }
}

/* =========================================================
   SERVICES — One Premium Pack (Light)
========================================================= */
.af-services-page{ padding: 0 0 70px; }
.af-servicesPack{
  position:relative;
  border-radius: 24px;
  padding: 26px 24px 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  overflow:hidden;
}
.af-servicesPack::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(540px 260px at 12% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(540px 260px at 88% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(540px 260px at 55% 110%, rgba(242,197,93,.07), transparent 60%);
  opacity:.95;
}
.af-servicesPack::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg,#8bc34a,#5ecad8,#2e5f43,#f2c55d);
  opacity:.95;
}
.af-servicesPack__head{ position:relative; z-index:1; text-align:center; margin-bottom: 14px; }
.af-servicesPack__title{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
}
.af-servicesPack__sub{
  margin: 8px auto 0;
  max-width: 70ch;
  font-size: 14.8px;
  line-height: 2;
  color: rgba(13,23,20,.68);
}
.af-servicesPack__list{
  position:relative;
  z-index:1;
  margin: 16px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 10px;
  max-width: 860px;
  margin-inline:auto;
}
.af-servicesPack__list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(13,23,20,.03);
  border: 1px solid rgba(13,23,20,.06);
  color: rgba(13,23,20,.86);
  font-weight: 800;
  line-height: 1.9;
}
.af-servicesPack__dot{
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg,#8bc34a,#5ecad8);
  box-shadow: 0 0 0 6px rgba(94,202,216,.10);
  flex: 0 0 auto;
}
.af-servicesPack__actions{
  position:relative;
  z-index:1;
  margin-top: 16px;
  display:flex;
  justify-content:center;
}

/* =========================================================
   PROJECTS PAGE
========================================================= */
.af-projects-page{ padding-bottom: 60px; }
.af-projects-page .af-grid{ gap: 18px; }
.af-projectsCard{
  margin-top: 16px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 22px 60px rgba(13,23,20,.08);
}
.af-projectsCard .af-grid{ gap: 16px; }

/* Projects grid columns */
.af-projects-page .af-grid--3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .af-projects-page .af-grid--3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .af-projects-page .af-grid--3{ grid-template-columns: 1fr; } }

/* =========================================================
   GALLERY / ALBUMS
========================================================= */
.af-page--lite{ padding-bottom: 60px; }

.af-albums{ display:grid; gap:18px; margin-top: 26px; }

.af-album{
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  overflow:hidden;
}
.af-album__head{
  padding: 18px 18px 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(13,23,20,.06);
}
.af-album__title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
}
.af-album__meta{
  font-size: 13px;
  color: rgba(13,23,20,.62);
  font-weight: 800;
}
.af-album__grid{
  padding: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.af-album__img{
  width:100%;
  height: 180px;
  border-radius: 18px;
  object-fit: cover;
  display:block;
  border: 1px solid rgba(13,23,20,.08);
  box-shadow: 0 10px 28px rgba(13,23,20,.10);
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.af-album__img:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(13,23,20,.14);
  filter: saturate(1.02) contrast(1.02);
}
@media (max-width: 900px){
  .af-album__grid{ grid-template-columns: repeat(2, 1fr); }
  .af-album__img{ height: 170px; }
}
@media (max-width: 520px){
  .af-album__grid{ grid-template-columns: 1fr; }
  .af-album__img{ height: 210px; }
}

/* Lightbox */
.af-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.af-lightbox.is-open{ display:block; }
.af-lightbox__overlay{
  position:absolute;
  inset:0;
  background: rgba(8,17,15,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.af-lightbox__card{
  position:absolute;
  inset: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.af-lightbox__img{
  max-width: min(1100px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  width: auto;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.45);
}
.af-lightbox__x{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 22px;
  cursor:pointer;
}

/* Coming soon card */
.af-soonCard{
  border-radius: 22px;
  padding: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  position: relative;
  overflow:hidden;
  text-align:center;
}
.af-soonCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.12), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(520px 260px at 55% 92%, rgba(242,197,93,.08), transparent 60%);
  opacity:.95;
}
.af-soonCard__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(13,23,20,.88);
  background: rgba(242,197,93,.18);
  border: 1px solid rgba(242,197,93,.35);
  position: relative;
  z-index: 1;
}
.af-soonCard__title{
  margin-top: 12px;
  font-size: 22px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
  position: relative;
  z-index: 1;
}
.af-soonCard__text{
  margin: 10px auto 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 2;
  color: rgba(13,23,20,.70);
  position: relative;
  z-index: 1;
}

/* =========================================================
   CONTACT (Light)
========================================================= */
.af-contactWrap{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  align-items:start;
}
.af-contactInfo__card,
.af-contactForm__card{
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  padding: 20px;
  position:relative;
  overflow:hidden;
}
.af-contactInfo__card::before,
.af-contactForm__card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.95;
}
.af-contactInfo__title{
  position:relative;
  margin:0 0 14px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
}
.af-contactList{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 12px;
}
.af-contactList li{
  display:flex;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(13,23,20,.03);
  border: 1px solid rgba(13,23,20,.06);
}
.af-contactIcon{ width: 28px; text-align:center; }
.af-contactLabel{
  font-size: 12.5px;
  color: rgba(13,23,20,.62);
  font-weight: 800;
}
.af-contactValue{
  display:block;
  margin-top: 2px;
  font-weight: 900;
  color: rgba(13,23,20,.90);
}
.af-contactQuick{
  position:relative;
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Form */
.af-form{ position:relative; display:grid; gap: 12px; }
.af-field{ display:grid; gap: 6px; }
.af-label{ font-size: 13px; font-weight: 900; color: rgba(13,23,20,.80); }
.af-input,
.af-textarea{
  width:100%;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(13,23,20,.10);
  background: rgba(255,255,255,.92);
  outline: none;
  font: inherit;
  color: rgba(13,23,20,.90);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.af-input:focus,
.af-textarea:focus{
  border-color: rgba(94,202,216,.45);
  box-shadow: 0 0 0 6px rgba(94,202,216,.12);
}
.af-formActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.af-formNote{
  position:relative;
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(13,23,20,.62);
  font-weight: 800;
  line-height: 1.9;
}
@media (max-width: 980px){
  .af-contactWrap{ grid-template-columns: 1fr; }
}

/* =========================================================
   CONTACT (Dark page)
   wrapper: .af-page--dark
========================================================= */
.af-page--dark{
  background: var(--af-dark);
  color: rgba(255,255,255,.92);
}
.af-page--dark .af-about-hero{
  background: transparent;
}
.af-page--dark .af-about-hero__veil{ display:none; }

/* Dark cards */
.af-page--dark .af-contactInfo__card,
.af-page--dark .af-contactForm__card{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}
.af-page--dark .af-contactInfo__card::before,
.af-page--dark .af-contactForm__card::before{ opacity:.55; }

.af-page--dark .af-contactInfo__title{
  color: rgba(255,255,255,.95);
}
.af-page--dark .af-contactList li{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}
.af-page--dark .af-contactLabel{ color: rgba(255,255,255,.68); }
.af-page--dark .af-contactValue{ color: rgba(255,255,255,.92); }

.af-page--dark .af-label{ color: rgba(255,255,255,.78); }
.af-page--dark .af-input,
.af-page--dark .af-textarea{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
.af-page--dark .af-input::placeholder{ color: rgba(255,255,255,.55); }
.af-page--dark .af-input:focus,
.af-page--dark .af-textarea:focus{
  border-color: rgba(164,200,93,.40);
  box-shadow: 0 0 0 6px rgba(164,200,93,.12);
}
.af-page--dark .af-formNote{ color: rgba(255,255,255,.65); }

/* =========================================================
   FOOTER (Final, one clean design)
========================================================= */
.af-footer{
  background: var(--af-dark);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding: 46px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 0;
}
.af-footer:before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(900px 420px at 18% 25%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(900px 420px at 50% 95%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
  opacity:.9;
}
.af-footer__container{
  position:relative;
  width: min(100% - 40px, 1240px);
  margin-inline:auto;
}
.af-footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 34px;
  align-items:start;
}
.af-footer__title{
  font-size: 18px;
  font-weight: 800;
  margin: 6px 0 14px;
  opacity:.95;
}
.af-footer__brandTitle{
  font-size: 40px;
  line-height: 1.05;
  margin: 0 0 14px;
  font-weight: 900;
  letter-spacing: .2px;
}
.af-footer__brandText{
  margin:0;
  max-width: 520px;
  color: rgba(255,255,255,.72);
  line-height: 1.9;
  font-size: 15px;
}
.af-footer__logo{
  margin-top: 18px;
  width: 54px;
}
.af-footer__logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:none;
  border:none;
  box-shadow:none;
}

/* Links */
.af-footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 16px;
}
.af-footer__links a{
  color: rgba(255,255,255,.62);
  font-weight:700;
  font-size: 16px;
  transition: .15s ease;
}
.af-footer__links a:hover{ color: rgba(255,255,255,.92); }

/* Contact list (icon left) */
.af-footer__contact{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 18px;
}
.af-footer__contact li{
  display:flex;
  align-items:center;
  gap: 12px;
  direction:ltr;
}
.af-footer__icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.70);
  font-size:16px;
  flex-shrink:0;
}
.af-footer__contact a{
  direction:rtl;
  text-align:right;
  color: rgba(255,255,255,.65);
  font-size:14px;
  font-weight:700;
}
.af-footer__contact a:hover{ color:#fff; }

/* CTA */
.af-footer__cta{
  margin-top: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 900;
  color: #0b0f14;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .15s ease;
}
.af-footer__cta:hover{ transform: translateY(-1px); }

/* Bottom */
.af-footer__bottom{
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  gap: 14px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}
.af-footer__bottom a{
  color: rgba(255,255,255,.70);
  font-weight: 700;
  transition: .2s;
}
.af-footer__bottom a:hover{ color:#fff; }

@media (max-width: 980px){
  .af-footer__grid{ grid-template-columns: 1fr; gap: 26px; }
  .af-footer__brandTitle{ font-size: 34px; }
  .af-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================================
   WORDPRESS CONTENT (safe)
========================================================= */
.entry-content{ line-height:1.9; }
.wp-block-image img{ border-radius: 18px; }


/* =========================================================
   FRONT PAGE: ABOUT (Light) — missing styles
========================================================= */

/* Intro card (homepage / light) */
.af-about-introCard{
  margin: 18px auto 18px;
  padding: 22px 22px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.af-about-introCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 260px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.95;
}
.af-about-introCard > *{ position:relative; z-index:1; }

.af-about-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 0 12px;
  background: none;
  border: 0;
  padding: 0;
}
.af-about-logo img{
  width: 68px;           /* <-- هنا علاج “اللوقو ضخم” */
  max-width: 68px;
  height: auto;
  display:block;
  object-fit:contain;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 14px 34px rgba(13,23,20,.14));
}

.af-about-introText{
  max-width: 74ch;
  margin: 0 auto;
}
.af-about-introText p{
  margin: 0;
  font-size: 15.5px;
  line-height: 2.05;
  color: rgba(13,23,20,.74);
  font-weight: 500;
}

/* Split cards below intro */
.af-about-split{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.af-about-splitCard{
  border-radius: 24px;
  padding: 20px 20px 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.07);
  position: relative;
  overflow: hidden;
}
.af-about-splitCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 220px at 12% 18%, rgba(94,202,216,.09), transparent 60%),
    radial-gradient(420px 220px at 88% 22%, rgba(164,200,93,.08), transparent 60%);
  opacity:.9;
}
.af-about-splitCard > *{ position:relative; z-index:1; }

.af-about-splitTitle{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
}

/* Pills */
.af-about-pills{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}
.af-about-pills li{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(13,23,20,.03);
  border: 1px solid rgba(13,23,20,.08);
  color: rgba(13,23,20,.86);
  font-weight: 900;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

/* Vision text */
.af-about-visionText{
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
  color: rgba(13,23,20,.72);
  text-align: center;
}

/* Responsive */
@media (max-width: 980px){
  .af-about-split{ grid-template-columns: 1fr; }
}


/* =========================================================
   FRONT PAGE: CONTACT (afc-*) — missing styles
   (Your form uses afc classes, so we style them)
========================================================= */

.afc{
  padding: 70px 0;
}
.afc-wrap{
  display:flex;
  justify-content:center;
}
.afc-card{
  width: min(860px, 100%);
  border-radius: 26px;
  padding: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  position:relative;
  overflow:hidden;
}
.afc-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.95;
}
.afc-card > *{ position:relative; z-index:1; }

.afc-title{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
  text-align:center;
}

.afc-form{ display:grid; gap: 12px; }
.afc-field{ display:grid; gap: 6px; }
.afc-label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(13,23,20,.82);
}

.afc-input,
.afc-textarea{
  width:100%;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(13,23,20,.10);
  background: rgba(255,255,255,.92);
  outline: none;
  font: inherit;
  color: rgba(13,23,20,.90);
  transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.afc-input:focus,
.afc-textarea:focus{
  border-color: rgba(94,202,216,.45);
  box-shadow: 0 0 0 6px rgba(94,202,216,.12);
}
.afc-input::placeholder{ color: rgba(13,23,20,.42); }

.afc-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
  margin-top: 6px;
}

.afc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid rgba(13,23,20,.12);
  background: rgba(255,255,255,.78);
  color: rgba(13,23,20,.92);
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.afc-btn:hover{ transform: translateY(-1px); }
.afc-btn:active{ transform: translateY(0); }

.afc-btn--primary{
  border:0;
  background: var(--af-primary);
  color:#fff;
  box-shadow: 0 14px 34px rgba(13,23,20,.16);
}
.afc-btn--primary:hover{ background: var(--af-primary-hover); }

.afc-btn--ghost{
  background: rgba(13,23,20,.04);
  border-color: rgba(13,23,20,.10);
  color: rgba(13,23,20,.85);
}

.afc-note{
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(13,23,20,.62);
  font-weight: 800;
  line-height: 1.9;
  text-align:center;
}

@media (max-width: 520px){
  .afc-card{ padding: 18px; border-radius: 22px; }
  .afc-actions{ justify-content:stretch; }
  .afc-btn{ width:100%; }
}


/* =========================================================
   RESPONSIVE (Global)
========================================================= */
@media (max-width: 980px){
  .af-grid--3{ grid-template-columns: 1fr; }
  .af-nav{ position:static; transform:none; }
  .af-menu{ display:none; }
  .af-burger{ display:flex; }
  .af-hero{ min-height:74vh; padding-top: calc(var(--af-headerH) + 6px); }
  .af-hero__box{ padding: 22px; }
  .af-logo{ height:30px; }

  .af-about-page--dark .af-about-hero{ padding: 112px 0 64px; }
  .af-about-page--dark .af-about-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .af-actions .af-btn--ghost{ display:none; }
  .af-cta__card{ flex-direction:column; align-items:stretch; }
  .af-about-page--dark .af-about-introCard{ padding: 22px 18px 18px; border-radius: 22px; }
}

/* =========================================================
   Toast / Modal (sent=1 or sent=0)
========================================================= */
.af-toast{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.af-toast.is-open{ display:block; }

.af-toast::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(8,17,15,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.af-toast__card{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100% - 28px));
  border-radius: 22px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(13,23,20,.12);
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
  text-align:center;
}
.af-toast__title{
  font-weight: 900;
  font-size: 18px;
  color: rgba(13,23,20,.92);
  margin-bottom: 8px;
}
.af-toast__text{
  font-size: 14px;
  line-height: 2;
  color: rgba(13,23,20,.70);
  margin-bottom: 14px;
}
.af-toast__btn{
  height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  border: 0;
  cursor:pointer;
  font-weight: 900;
  color:#fff;
  background: var(--af-primary);
  box-shadow: 0 14px 34px rgba(13,23,20,.16);
}
.af-toast__btn:hover{ background: var(--af-primary-hover); }
/* Projects page: make hero lead NOT a card */
.af-page--projects .af-about-hero__lead{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  max-width: 880px;
  color: rgba(255,255,255,.88);
  font-size: 16px;
  line-height: 2;
}
/* Projects page spacing */
.af-page--projects{
  padding-bottom: 80px;      /* مسافة قبل الفوتر */
}
.af-page--projects .af-about-hero{
  margin-bottom: 26px;       /* مسافة بين الهيرو والمحتوى */
}
.af-page--projects > .af-container{
  padding-top: 28px;         /* زيادة هواء بعد الهيرو */
}

/* Hero refinement (Projects only) */
.af-page--projects .af-about-hero__inner{
  max-width: 820px;
  margin-inline: auto;
}

.af-page--projects .af-about-title{
  letter-spacing: .3px;
}

.af-page--projects .af-about-hero__lead{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;

  margin-top: 8px;
  color: rgba(255,255,255,.82);
  font-size: 15.5px;
  line-height: 2;
}

/* خط subtle تحت الهيرو */
.af-page--projects .af-about-hero::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:1px;
  background: rgba(255,255,255,.18);
}

 
/* =========================================================
   PROJECTS PAGE: Head (title + lead) OUTSIDE hero
========================================================= */

.af-page--projects{
  padding: 26px 0 90px; /* مسافة فوق وتحت + قبل الفوتر */
}

.af-pageHead{
  margin: 22px 0 26px;
  text-align: center;
}

.af-pageHead__title{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(13,23,20,.94);
}

.af-pageHead__lead{
  margin: 10px auto 0;
  max-width: 74ch;
  color: rgba(13,23,20,.68);
  line-height: 2;
  font-size: 15px;
}

/* =========================================================
   Projects page: header becomes solid (NO glass)
========================================================= */

body.af-is-projects .af-header{
  position: sticky;
  top: 0;

  /* نفس هوية الهيرو (قماش غامق + راديال) */
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);

  /* إلغاء الزجاج */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* حتى لو JS حط is-scrolled لا نرجع للزجاج */
body.af-is-projects .af-header.is-scrolled{
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* تثبيت ألوان النص والأزرار */
body.af-is-projects .af-brand__name b,
body.af-is-projects .af-brand__name span,
body.af-is-projects .af-menu a{
  color:#fff !important;
  text-shadow: none !important;
}

body.af-is-projects .af-social a{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}

body.af-is-projects .af-btn--ghost{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}

/* =========================================================
   Investment page: header becomes solid (NO glass)
========================================================= */

body.af-is-invest .af-header{
  position: sticky;
  top: 0;

  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.af-is-invest .af-header.is-scrolled{
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ثبّت الألوان */
body.af-is-invest .af-brand__name b,
body.af-is-invest .af-brand__name span,
body.af-is-invest .af-menu a{
  color:#fff !important;
  text-shadow: none !important;
}

body.af-is-invest .af-social a{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}

body.af-is-invest .af-btn--ghost{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}

/* =========================================================
   Page Head (title + lead) — used in Projects/Partnerships
========================================================= */
.af-page{ padding: 26px 0 90px; }
.af-pageHead{
  margin: 22px 0 26px;
  text-align:center;
}
.af-pageHead__title{
  margin:0;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(13,23,20,.94);
}
.af-pageHead__lead{
  margin: 10px auto 0;
  max-width: 74ch;
  color: rgba(13,23,20,.68);
  line-height: 2;
  font-size: 15px;
}

/* =========================================================
   Investment / Partnerships styles
========================================================= */
.af-invest{ margin-top: 18px; }

.af-invest__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Premium cards */
.af-premCard{
  border-radius: 26px;
  padding: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  position:relative;
  overflow:hidden;
}
.af-premCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.95;
}
.af-premCard > *{ position:relative; z-index:1; }

.af-premCard__top{ margin-bottom: 12px; }
.af-premCard__title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
}

/* List */
.af-premList{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}
.af-premList li{
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(13,23,20,.03);
  border: 1px solid rgba(13,23,20,.06);
  color: rgba(13,23,20,.86);
  font-weight: 800;
  line-height: 1.9;
  position:relative;
}
.af-premList li::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg,#8bc34a,#5ecad8);
  box-shadow: 0 0 0 6px rgba(94,202,216,.10);
  display:inline-block;
  margin-left: 10px;
  transform: translateY(1px);
}

/* CTA card */
.af-premCard__text{
  margin: 0 0 14px;
  color: rgba(13,23,20,.70);
  line-height: 2;
  font-size: 14.5px;
  font-weight: 600;
}
.af-premCard__actions{
  display:flex;
  justify-content:center;
  margin-top: 6px;
}

/* Full-width CTA on desktop */
.af-premCard--cta{
  grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 980px){
  .af-invest__grid{ grid-template-columns: 1fr; }
  .af-premCard--cta{ grid-column: auto; }
}
 .af-toast{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.af-toast.is-open{ display:block; }

.af-toast::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(8,17,15,.55);
  backdrop-filter: blur(10px);
}

.af-toast__card{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(480px, calc(100% - 28px));
  border-radius: 22px;
  padding: 20px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,23,20,.12);
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
  text-align:center;
}

.af-toast__title{
  font-weight:900;
  font-size:18px;
  margin-bottom:6px;
}

.af-toast__text{
  font-size:14px;
  line-height:2;
  margin-bottom:14px;
  color: rgba(13,23,20,.70);
}

.af-toast__btn{
  height:42px;
  padding:0 18px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  font-weight:900;
  color:#fff;
  background: var(--af-primary);
}
/* =========================================================
   Services page: header becomes solid (NO glass)
========================================================= */

body.af-is-services .af-header{
  position: sticky;
  top: 0;

  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.af-is-services .af-header.is-scrolled{
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* تثبيت الألوان */
body.af-is-services .af-brand__name b,
body.af-is-services .af-brand__name span,
body.af-is-services .af-menu a{
  color:#fff !important;
  text-shadow:none !important;
}

body.af-is-services .af-social a{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}

body.af-is-services .af-btn--ghost{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}
/* Services Pack – Wider & More Premium */
.af-services-page .af-servicesPack{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 48px;
  border-radius: 34px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(13,23,20,.08);
  box-shadow: 0 30px 90px rgba(13,23,20,.08);
}

/* =========================================================
   Gallery page: Header acts as hero (SOLID, no glass)
========================================================= */

body.af-is-gallery .af-header{
  position: sticky;
  top: 0;

  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.af-is-gallery .af-header.is-scrolled{
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(164,200,93,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 22%, rgba(94,202,216,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(242,197,93,.08), transparent 60%),
    linear-gradient(180deg, #07110f, #0b1a16) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ثبّت الألوان */
body.af-is-gallery .af-brand__name b,
body.af-is-gallery .af-brand__name span,
body.af-is-gallery .af-menu a{
  color:#fff !important;
  text-shadow:none !important;
}

body.af-is-gallery .af-social a{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}

body.af-is-gallery .af-btn--ghost{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}
/* =========================================================
   PROJECT SINGLE PAGES (Almarbad / Alosia / Grifel)
========================================================= */

.af-project-page{
  padding: 0 0 90px;
}

/* Hero */
.af-project-hero{
  position: relative;
  min-height: 38vh; /* كان 62vh تقريبًا */
    display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(13,23,20,.08);
}

.af-project-hero__bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform: scale(1.03);
  filter: brightness(.92) contrast(1.05) saturate(1.02);
}

.af-project-hero__veil{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 55%, rgba(0,0,0,0));
}

.af-project-hero__inner{
  position: relative;
  z-index: 2;
  padding: 70px 0 30px; /* كان 110px فوق */
    text-align: center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.af-project-hero__title{
  margin:0;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 900;
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.af-project-hero__lead{
  margin:0;
  max-width: 78ch;
  padding: 12px 16px;
  color: rgba(255,255,255,.88);
  line-height: 2;
  font-size: 15.5px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Content grid */
.af-project-grid2{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 980px){
  .af-project-grid2{ grid-template-columns: 1fr; }
}

/* Blocks */
.af-project-block{
  border-radius: 26px;
  padding: 22px 22px 20px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  position: relative;
  overflow:hidden;
}
.af-project-block::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.95;
}
.af-project-block > *{ position: relative; z-index: 1; }

.af-h3{
  margin:0 0 12px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
}

.af-project-text{
  margin:0;
  color: rgba(13,23,20,.70);
  line-height: 2;
  font-size: 14.8px;
}

/* Lists */
.af-list{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; }
.af-list--icons li{
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(13,23,20,.03);
  border: 1px solid rgba(13,23,20,.06);
  color: rgba(13,23,20,.86);
  font-weight: 800;
  line-height: 1.9;
  position: relative;
}
.af-list--icons li::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg,#8bc34a,#5ecad8);
  box-shadow: 0 0 0 6px rgba(94,202,216,.10);
  display:inline-block;
  margin-left: 10px;
  transform: translateY(1px);
}

/* CTA */
.af-project-cta{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

#almarbad-page .af-project-block:nth-child(1){
  grid-column: 1;
  grid-row: 1;
}

#almarbad-page .af-project-block:nth-child(3){
  grid-column: 2;
  grid-row: 1;
}

#almarbad-page .af-project-block:nth-child(2){
  grid-column: 1;
  grid-row: 2;
}

#almarbad-page .af-project-block:nth-child(4){
  grid-column: 2;
  grid-row: 2;
}
/* =========================================================
   ALOSIA PAGE — Missing styles (lead + branch tabs + booking modal)
   Matches the main AF design system above
========================================================= */

/* Intro lead card under hero */
.af-project-lead{
  margin-top: 22px;
  border-radius: 26px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  position: relative;
  overflow: hidden;
}
.af-project-lead::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.95;
}
.af-project-lead > *{ position:relative; z-index:1; }

/* =========================================================
   Branch Tabs (Alosia)
========================================================= */
.af-branch-wrap{ max-width: 1100px; margin: 0 auto; }

/* Capsule nav like header menu vibe but light */
.af-branch-nav{
  position: relative;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 18px 55px rgba(13,23,20,.08);
  overflow:hidden;
}

/* Moving indicator (works with your existing JS) */
.af-branch-indicator{
  position:absolute;
  top: 8px;
  bottom: 8px;
  right: 8px;
  width: 140px;
  border-radius: 999px;
  background: rgba(13,23,20,.05);
  border: 1px solid rgba(13,23,20,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .25s ease, width .25s ease;
  pointer-events:none;
}

.af-branch-tab{
  position:relative;
  z-index:1;
  border:0;
  background: transparent;
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  color: rgba(13,23,20,.58);
  transition: color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.af-branch-tab:hover{ color: rgba(13,23,20,.80); }
.af-branch-tab:active{ transform: translateY(1px); }
.af-branch-tab.is-active{ color: rgba(13,23,20,.92); }

/* Panels look like premium cards (same system) */
.af-branch-panels{ margin-top: 16px; }

.af-branch-panel{
  display:none;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}

.af-branch-panel.is-active{
  display:block;
  opacity:1;
  transform:none;

  border-radius: 26px;
  padding: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 22px 60px rgba(13,23,20,.08);
  position: relative;
  overflow:hidden;
}
.af-branch-panel.is-active::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.65;
}
.af-branch-panel.is-active > *{ position:relative; z-index:1; }

/* make grid spacing consistent */
.af-branch-panel .af-project-grid2{ margin-top: 14px !important; }

/* Mobile: stack tabs */
@media (max-width: 820px){
  .af-branch-nav{
    border-radius: 22px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    justify-content:center;
  }
  .af-branch-indicator{ display:none; }
  .af-branch-tab{
    width: 100%;
    text-align:center;
    background: rgba(13,23,20,.03);
    border: 1px solid rgba(13,23,20,.06);
    padding: 12px 14px;
  }
  .af-branch-tab.is-active{
    background: rgba(13,23,20,.06);
    border-color: rgba(13,23,20,.10);
  }
}

/* =========================================================
   Booking Modal (Alosia)
========================================================= */
.af-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.af-modal.is-open{ display:block; }

.af-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(8,17,15,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.af-modal__card{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(560px, calc(100% - 28px));
  border-radius: 26px;
  padding: 22px 20px 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,23,20,.12);
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
  overflow:hidden;
}
.af-modal__card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.85;
}
.af-modal__card > *{ position:relative; z-index:1; }

.af-modal__close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(13,23,20,.12);
  background: rgba(13,23,20,.04);
  cursor:pointer;
  font-size: 20px;
}

.af-modal__title{
  margin: 4px 0 6px;
  font-size: 20px;
  font-weight: 900;
  color: rgba(13,23,20,.92);
}
.af-modal__sub{
  margin: 0 0 14px;
  color: rgba(13,23,20,.62);
  font-weight: 800;
  line-height: 1.9;
  font-size: 13.5px;
}

.af-modal__notice{
  margin: 10px 0 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(13,23,20,.10);
  background: rgba(13,23,20,.04);
  color: rgba(13,23,20,.78);
  font-weight: 800;
}

.af-modal__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* if you still use af-btn--luxury in this page */
.af-btn--luxury{
  position:relative;
  overflow:hidden;
  height:46px;
  padding:0 22px;
  border-radius:16px;
  border:0;
  color:#fff;
  font-weight:900;
  letter-spacing:.1px;
  background: linear-gradient(135deg, #2e5f43 0%, #5ecad8 45%, #f2c55d 100%);
  box-shadow: 0 14px 36px rgba(13,23,20,.16), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ===== Alosia tabs capsule fix ===== */
.af-branch-wrap{ max-width: 1100px; margin: 0 auto; }

.af-branch-nav{
  width: 100%;
  max-width: 980px;          /* بدل ما تتمدد أكثر من اللازم */
  margin: 0 auto;
  padding: 6px;              /* أنحف */
  gap: 6px;
  border-radius: 18px;       /* بدل 999px */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(13,23,20,.10);
  box-shadow: 0 12px 35px rgba(13,23,20,.06);
}

.af-branch-tab{
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 14px;       /* كبسولات صغيرة داخل كبسولة */
  color: rgba(13,23,20,.62);
}

.af-branch-tab.is-active{
  color: rgba(13,23,20,.92);
}

/* indicator يصير أهدأ */
.af-branch-indicator{
  top: 6px;
  bottom: 6px;
  right: 6px;
  border-radius: 14px;
  background: rgba(13,23,20,.06);
  border: 1px solid rgba(13,23,20,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

/* =========================================================
   Change ONLY header background (hero-less pages)
========================================================= */
body.af-is-projects .af-header,
body.af-is-invest .af-header,
body.af-is-services .af-header,
body.af-is-gallery .af-header,
body.af-is-projects .af-header.is-scrolled,
body.af-is-invest .af-header.is-scrolled,
body.af-is-services .af-header.is-scrolled,
body.af-is-gallery .af-header.is-scrolled{
  background: #0b0f14 !important;   /* أصفر */
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Footer quick links: center perfectly */
.af-footer__links{
  justify-items: center;  /* لأن عندك display:grid */
  text-align: center;
}

.af-footer__links li,
.af-footer__links a{
  text-align: center;
}
.af-footer__grid > .af-footer__col:nth-child(2){
  display: flex;
  justify-content: center;
}
/* Footer title */
.af-footer__title{
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 16px;
  text-align: center;
  color: rgba(255,255,255,.82);
  letter-spacing: .4px;
}
/* خلي عمود روابط سريعة عمودي */
.af-footer__linksCol{
  display: flex;
  flex-direction: column;
  align-items: center;   /* يخلي العنوان والقائمة بالنص */
}

/* تأكد العنوان ياخذ سطر كامل */
.af-footer__linksCol .af-footer__title{
  width: 100%;
  text-align: center;
  margin-bottom: 14px;
}

/* القائمة تحت العنوان */
.af-footer__linksCol .af-footer__links{
  width: 100%;
  justify-items: center;
  text-align: center;
}
/* Contact layout: make form wider */
.af-contactWrap{
  grid-template-columns: 1.4fr .9fr; /* الفورم أكبر */
}

/* موبايل يبقى عمود واحد زي ما هو */
@media (max-width: 980px){
  .af-contactWrap{ grid-template-columns: 1fr; }
}
/* Contact Cards Hover */
.af-contactForm__card,
.af-contactInfo__card{
  transition: 
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.af-contactForm__card:hover,
.af-contactInfo__card:hover{
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}
.af-contactInfo__title{
  font-weight: 500;
  letter-spacing: -.3px;
}
.af-label{
  font-weight: 400;
  font-size: 14px;
  opacity: .75;
}

.af-input,
.af-textarea{
  font-weight: 400;
  font-size: 15px;
  border-width: 1px;
}

.af-input:focus,
.af-textarea:focus{
  border-color: var(--af-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.af-contactLabel{
  font-weight: 400;
  font-size: 14px;
  opacity: .65;
}

.af-contactValue{
  font-weight: 500;
  font-size: 15px;
}
/* WhatsApp Button */
.af-contactQuick a[href*="wa.me"]{
background: #1fa855;
  color: #fff;
  border: none;
}

.af-contactQuick a[href*="wa.me"]:hover{
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37,211,102,.25);
}

/* Submit Button - Blue */
.af-formActions .af-btn--luxuryLite{
  background: #1e4db7;
  border-color: #1e4db7;
  color: #fff;
}

.af-formActions .af-btn--luxuryLite:hover{
  background: #163c8f;
  border-color: #163c8f;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(30,77,183,.25);
}

.af-toast{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.25);
  z-index:9999;
}
.af-toast.is-open{ display:flex; }

.af-toast__card{
  width:min(520px, 92vw);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  padding:14px 14px 12px;
}
.af-toast__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.af-toast__title{ font-weight:800; }
.af-toast__text{ opacity:.8; line-height:1.6; }
.af-toast__x{
  border:0;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  opacity:.7;
}
.af-toast__x:hover{ opacity:1; }
/* =========================
   Hero Stats (Home)
========================= */
.af-hero__stats{
  display:flex;
  gap:14px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16);
}

.af-heroStat{
  flex:1;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
}

.af-heroStat__num{
  font-weight:900;
  letter-spacing:.2px;
  font-size:20px;
  line-height:1.1;
  color:#fff;
}

.af-heroStat__label{
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,.75);
  font-weight:500;
}

@media (max-width: 720px){
  .af-hero__stats{
    flex-direction:column;
  }
}
.af-process__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.af-processCard{
  border:1px solid var(--af-border);
  background:var(--af-surface);
  border-radius:18px;
  padding:16px;
  transition:transform .18s ease, box-shadow .18s ease;
}

.af-processCard:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.af-processCard__kicker{
  font-weight:900;
  opacity:.5;
  margin-bottom:8px;
}

.af-processCard__text{
  color:var(--af-muted);
  line-height:1.8;
}

@media (max-width: 860px){
  .af-process__grid{ grid-template-columns:1fr; }
}
 /* =========================
   WHY (4) + QUICK (5)
   - tuned to match AF identity cards
========================= */

/* WHY grid */
.af-why__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

/* WHY card (same premium card system) */
.af-chipCard{
  position:relative;
  overflow:hidden;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:18px 18px 16px;
  border-radius:24px;

  background: rgba(255,255,255,.88);
  border:1px solid rgba(13,23,20,.10);
  box-shadow: var(--af-shadow2);

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.af-chipCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 220px at 14% 18%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(420px 220px at 86% 22%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(420px 220px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.95;
}

.af-chipCard > *{ position:relative; z-index:1; }

.af-chipCard:hover{
  transform: translateY(-3px);
  border-color: rgba(13,23,20,.14);
  box-shadow: 0 26px 80px rgba(13,23,20,.12);
  background: rgba(255,255,255,.92);
}

/* Icon */
.af-chipCard__icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;

  background: rgba(13,23,20,.04);
  border:1px solid rgba(13,23,20,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

.af-chipCard__icon i{
  font-size:18px;
  color: rgba(13,23,20,.72);
}

/* Text */
.af-chipCard__title{
  margin:0 0 6px 0;
  font-size:16px;
  font-weight:900;
  letter-spacing:.1px;
  color: rgba(13,23,20,.92);
}

.af-chipCard__text{
  margin:0;
  color: rgba(13,23,20,.66);
  line-height:2;
  font-size:14px;
  font-weight:500;
}

/* QUICK bar (one premium capsule card) */
.af-quick__bar{
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:14px 16px;
  border-radius:24px;

  background: rgba(255,255,255,.88);
  border:1px solid rgba(13,23,20,.10);
  box-shadow: var(--af-shadow2);
}

.af-quick__bar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(164,200,93,.10), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(94,202,216,.08), transparent 60%),
    radial-gradient(520px 240px at 55% 92%, rgba(242,197,93,.06), transparent 60%);
  opacity:.85;
}
.af-quick__bar > *{ position:relative; z-index:1; }

.af-quick__title{
  font-weight:900;
  letter-spacing:.1px;
  white-space:nowrap;
  color: rgba(13,23,20,.90);
}

/* Chips */
.af-quick__chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  flex:1 1 auto;
}

.af-qChip{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;

  border-radius:999px;
  border:1px solid rgba(13,23,20,.10);
  background: rgba(255,255,255,.86);

  color: rgba(13,23,20,.86);
  text-decoration:none;

  font-weight:900;
  font-size:13px;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.af-qChip:hover{
  transform: translateY(-1px);
  border-color: rgba(13,23,20,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 30px rgba(13,23,20,.08);
}

.af-quick__cta{ white-space:nowrap; }

/* Responsive */
@media (max-width: 980px){
  .af-why__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .af-quick__bar{ flex-direction:column; align-items:stretch; }
  .af-quick__title{ text-align:center; }
  .af-quick__cta{ display:flex; justify-content:center; }
}

@media (max-width: 520px){
  .af-why__grid{ grid-template-columns:1fr; }
}
/* =========================
   PROJECTS FULL WIDTH SECTION
========================= */
.af-projects-heroSection{
  position: relative;
  padding: 90px 0;
  margin-top: 70px;

  /* لون مختلف عن باقي الصفحة */
  background: linear-gradient(180deg, #0f1513, #0b0f14);
  color: #fff;

  overflow: hidden;
}

/* Glow subtle */
.af-projects-heroSection::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(164,200,93,.15), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(94,202,216,.12), transparent 60%);
  pointer-events:none;
  opacity:.8;
}

.af-projects-heroHead{
  text-align: center;
  margin-bottom: 40px;
}

.af-projects-heroHead h2{
  margin:0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  color: #fff;
}

.af-projects-heroHead p{
  margin-top: 12px;
  color: rgba(255,255,255,.70);
  font-size: 15px;
  line-height: 1.9;
}

/* خلي كروت المشاريع تتناسب مع الخلفية الداكنة */
.af-projects-heroSection .af-project{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

.af-projects-heroSection .af-project__title{
  color: #fff;
}

.af-projects-heroSection .af-project:hover{
  transform: translateY(-6px);
  box-shadow: 0 35px 90px rgba(0,0,0,.40);
  border-color: rgba(255,255,255,.25);
}
/* =========================
   PROJECTS SPLIT SECTION
========================= */
.af-projects-split{
  padding: 100px 6vw;
  background: linear-gradient(180deg,#111816,#0b0f14);
  color: #fff;
}

.af-projects-split__wrap{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}

.af-projects-title{
  font-size: clamp(32px,3vw,44px);
  font-weight: 900;
  margin-bottom: 20px;
}

.af-projects-text{
  font-size: 15.5px;
  line-height: 2;
  color: rgba(255,255,255,.75);
  max-width: 420px;
}

/* GRID RIGHT SIDE */
.af-projects-split__grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

/* كروت متوافقة مع الخلفية الداكنة */
.af-projects-split .af-project{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: .35s ease;
}

.af-projects-split .af-project__title{
  color:#fff;
}

.af-projects-split .af-project:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.30);
}

/* Responsive */
@media(max-width:1100px){
  .af-projects-split__wrap{
    grid-template-columns: 1fr;
  }
  .af-projects-text{
    max-width: 100%;
  }
}

/* =========================
   PROJECTS SPLIT (Overlapped Stack + Accent line)
========================= */
.af-projects-split{
  padding: 100px 6vw;
  background: linear-gradient(180deg,#111816,#0b0f14);
  color: #fff;
  overflow: hidden;
}

.af-projects-split__wrap{
  display:grid;
  grid-template-columns: 1.25fr 1fr; /* المشاريع يسار أكبر */
  gap: 60px;
  align-items: center;
}

/* ===== Left: Overlap stack ===== */
.af-projectsStack{
  position: relative;
  min-height: 420px;
}

.af-project--stack{
  position: absolute;
  inset: auto;
  width: min(560px, 100%);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.af-project--stack .af-project__thumb{ height: 320px; }
.af-project--stack .af-project__thumb img{ width:100%; height:100%; object-fit:cover; }
.af-projects-split .af-project__title{ color:#fff; }

/* Positioning overlap */
.af-project--a{
  top: 0;
  left: 0;
  transform: translate(0, 0);
  z-index: 2;
}

.af-project--b{
  top: 90px;
  left: 90px;               /* التداخل */
  transform: translate(0, 0);
  z-index: 1;
  opacity: .98;
}

/* Hover lift */
.af-project--stack:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 40px 120px rgba(0,0,0,.45);
}
.af-project--stack:hover .af-project__thumb img{
  transform: scale(1.05);
  transition: transform .45s ease;
}

/* ===== Right: Text + accent line ===== */
.af-projects-split__content{
  position: relative;
  padding-right: 18px;
}

.af-projects-split__content::before{
  content:"";
  position:absolute;
  right:0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(164,200,93,.95), rgba(72,195,154,.55));
  box-shadow: 0 0 0 6px rgba(164,200,93,.10);
}

.af-projects-title{
  font-size: clamp(32px,3vw,44px);
  font-weight: 900;
  margin: 0 0 18px;
}

.af-projects-text{
  margin: 0;
  font-size: 15.5px;
  line-height: 2;
  color: rgba(255,255,255,.75);
  max-width: 420px;
}

.af-projects-cta{ margin-top: 18px; }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .af-projects-split__wrap{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .af-projectsStack{
    min-height: 560px;
  }
  .af-project--b{
    left: 40px;
    top: 340px;
  }
  .af-projects-split__content{
    padding-right: 0;
    text-align: center;
  }
  .af-projects-split__content::before{
    right: 50%;
    transform: translateX(50%);
    top: -10px;
    bottom: auto;
    width: 90px;
    height: 3px;
  }
  .af-projects-text{ max-width: 100%; }
}
/* Title bar solid at bottom */
.af-project--stack .af-project__body{
  padding: 0;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 3;
}

.af-project--stack .af-project__title{
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.72);            /* ✅ واضح */
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 900;
  letter-spacing: .1px;
  text-shadow: 0 8px 22px rgba(0,0,0,.45);
}

.af-project--stack .af-project__thumb{
  height: 360px;                           /* شوي أطول لأن البار داخل */
  position: relative;
}
.af-projects-split__wrap{
  display:grid;
  grid-template-columns: 1fr 1.25fr; /* ✅ النص (يمين) أصغر / المشاريع (يسار) أكبر */
  gap: 60px;
  align-items: center;
}

/* نخلي المحتوى يظهر يمين بدون ما نغير HTML */
.af-projects-split__content{ order: 2; }
.af-projectsStack{ order: 1; }

/* النص يسار + المشاريع يمين */
.af-projects-split__wrap{
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 60px;
  align-items: center;
}

/* ✅ النص يسار */
.af-projects-split__content{ order: 1; }

/* ✅ المشاريع يمين */
.af-projectsStack{ order: 2; }

/* accent line يكون على يسار النص (طبيعي لأنه يسار) */
.af-projects-split__content{
  position: relative;
  padding-right: 0;
  padding-left: 18px;
}
.af-projects-split__content::before{
  content:"";
  position:absolute;
  left:0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: rgba(164,200,93,.55);
}
/* =========================
   Projects copy (right side) + accent line
========================= */
.af-projectCopy{
  display:flex;
  justify-content:flex-end;          /* يمين */
  align-items:center;
  padding: 28px 0;
}

.af-projectCopy__inner{
  position:relative;
  width:min(520px, 100%);
  text-align:right;

  /* give room for the accent line */
  padding: 18px 22px 18px 26px;
  padding-right: 28px;
 
}

/* accent line sticks to the card, not the page edge */
.af-projectCopy__inner::after{
  content:"";
  position:absolute;
  top: 14px;
  bottom: 14px;
  right: 10px;

  width: 3px;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    rgba(164,200,93,.10),
    rgba(164,200,93,.55),
    rgba(164,200,93,.12)
  );
  box-shadow: 0 0 0 6px rgba(164,200,93,.08);
}

.af-projectCopy__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 12px 35px rgba(0,0,0,.35);
}

.af-projectCopy__lead{
  margin: 0 0 14px;
  color: rgba(255,255,255,.78);
  line-height: 2.05;
  font-size: 15px;
  max-width: 46ch;
}

/* زر أنظف مع الكرت */
.af-projectCopy .af-btn{
  height: 42px;
  border-radius: 14px;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.90);
}

.af-projectCopy .af-btn:hover{
  background: rgba(255,255,255,.10);
}

/* موبايل: يوسع */
@media (max-width: 820px){
  .af-projectCopy{ justify-content:center; }
  .af-projectCopy__inner{ width: min(560px, 100%); }
}
 /* =========================
   Top & Bottom Shadow Only
========================= */

.af-projects-split{
  position: relative;
  box-shadow:
    0 -20px 40px -25px rgba(0,0,0,.25),  /* ظل علوي */
    0  20px 40px -25px rgba(0,0,0,.25);  /* ظل سفلي */
}


/* =========================
   Projects split — Mobile order fix
   (Text first, images second) + no effects
========================= */
@media (max-width: 900px){

  /* رجّعها Flex وعمود */
  .af-projects-split__wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  /* النص فوق */
  .af-projectCopy{
    order: 1 !important;
    margin: 0 !important;
  }

  /* الصور تحت */
  .af-projectsStack{
    order: 2 !important;
    position: static !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* كل كرت طبيعي بدون أي حركة/طبقات */
  .af-project--stack{
    position: static !important;
    transform: none !important;
    transition: none !important;
    margin: 0 0 14px 0 !important;
  }
}

/* =========================
   MOBILE ONLY: Fix projects split order + keep titles on images
========================= */
@media (max-width: 900px){

  /* النص فوق والصور تحت */
  .af-projects-split__wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .af-projectCopy{ order: 1 !important; }
  .af-projectsStack{ order: 2 !important; }

  /* بدال التداخل بالموبايل: خليها مرتبة */
  .af-projectsStack{
    display: grid !important;
    gap: 14px !important;
  }
  .af-project--stack{
    position: relative !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* أهم نقطة: العنوان يرجع فوق الصورة داخل نفس الكرت */
  .af-project--stack .af-project__thumb{
    position: relative !important;
    height: 220px !important;
    overflow: hidden !important;
  }

  .af-project--stack .af-project__body{
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2 !important;
    padding: 12px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58)) !important;
  }

  .af-project--stack .af-project__title{
    margin: 0 !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  }
}
/* =========================
   MOBILE ONLY: HARD RESET for stacked projects (stop escaping)
========================= */
@media (max-width: 900px){

  /* رتّب القسم: النص فوق، الصور تحت */
  .af-projects-split__wrap{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  .af-projectCopy{ order:1 !important; }
  .af-projectsStack{ order:2 !important; }

  /* أهم شيء: امنع أي absolute قديم للستاك */
  .af-projectsStack{
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* صفّر أي تموضع/تحريك من overlap */
  .af-project--stack,
  .af-project--a,
  .af-project--b{
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* اجعل الصورة طبيعية داخل الكرت */
  .af-project--stack .af-project__thumb{
    position: relative !important;
    height: 220px !important;
    overflow: hidden !important;
    border-radius: 22px 22px 0 0 !important;
  }
  .af-project--stack .af-project__thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  /* العنوان فوق الصورة (داخلها) */
  .af-project--stack .af-project__body{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    padding: 12px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)) !important;
  }
  .af-project--stack .af-project__title{
    margin: 0 !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  }
}

/* Mobile drawer: show menu even if global .af-menu is hidden on mobile */
@media (max-width: 980px){
  .af-drawer .af-menu{ display:flex !important; }
}

/* =========================================================
   Mobile Drawer Menu — Premium styling
========================================================= */

/* خلي لوحة الدروار أحلى وتقرأ صح */
.af-drawer__panel{
  padding:16px;
}

.af-drawer__head{
  padding:6px 6px 12px;
}

/* عنوان بسيط داخل الدروار */
.af-drawer__title{
  font-weight: 900;
  font-size: 16px;
  color: rgba(13,23,20,.92);
  letter-spacing: -.2px;
}

/* === القائمة داخل الدروار === */
@media (max-width: 980px){

  /* مهم: يظهر المينو داخل الدروار حتى لو مخفي بالجوال */
  .af-drawer .af-menu{ display:flex !important; }

  .af-drawer .af-menu{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px;
    margin:0;
    border-radius:20px;
    background: rgba(13,23,20,.03);
    border:1px solid rgba(13,23,20,.08);
  }

  .af-drawer .af-menu li{ margin:0; }

  .af-drawer .af-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-radius:16px;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(13,23,20,.10);
    color: rgba(13,23,20,.90);
    font-weight: 900;
    font-size: 14px;
    box-shadow: 0 10px 26px rgba(13,23,20,.06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .af-drawer .af-menu a:hover{
    transform: translateY(-1px);
    border-color: rgba(13,23,20,.14);
    box-shadow: 0 16px 40px rgba(13,23,20,.10);
  }

  /* Submenu داخل الدروار */
  .af-drawer .af-submenu{
    margin-top: 8px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(13,23,20,.025);
    border: 1px solid rgba(13,23,20,.06);
    box-shadow: none;
  }
  .af-drawer .af-submenu a{
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(13,23,20,.08);
    font-weight: 800;
    font-size: 13.5px;
  }

  /* أزرار/روابط تحت القائمة لو عندك .af-actions داخل الدروار */
  .af-drawer .af-actions{
    margin-top: 12px;
    padding: 0 6px 6px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .af-drawer .af-actions .af-btn{
    height:44px;
    border-radius:16px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(13,23,20,.10);
    box-shadow: 0 10px 26px rgba(13,23,20,.06);
  }
  .af-drawer .af-actions .af-btn--primary{
    background: var(--af-primary);
    color:#fff;
    border:0;
    box-shadow: 0 16px 40px rgba(13,23,20,.16);
  }

  /* سوشال (لو تحطها داخل الدروار) */
  .af-drawer .af-social{
    margin-top: 10px;
    justify-content:center;
  }
  .af-drawer .af-social a{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(13,23,20,.10);
    color: rgba(13,23,20,.85);
  }
}

/* =========================
   Drawer — Luxury Dark
========================= */

.af-drawer__panel{
  background: rgba(10,12,12,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.af-drawer__head{
  padding: 6px 6px 12px;
}

.af-drawer .af-x{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
.af-drawer .af-x:hover{
  background: rgba(255,255,255,.10);
}

/* Menu list */
.af-drawer .af-menu{
  list-style:none;
  margin:0;
  padding: 6px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Main links */
.af-drawer .af-menu > li > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 18px;

  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 15px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);

  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.af-drawer .af-menu > li > a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

/* Sub arrow (for has-sub) */
.af-drawer .af-has-sub > a::after{
  content:"▾";
  font-size: 12px;
  opacity: .75;
  transition: transform .2s ease, opacity .2s ease;
}
.af-drawer .af-has-sub.is-sub-open > a::after{
  transform: rotate(180deg);
  opacity: .95;
}

/* Submenu — collapsed by default */
.af-drawer .af-submenu{
  list-style:none;
  margin: 0;
  padding: 0 6px;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
}

/* Open state */
.af-drawer .af-has-sub.is-sub-open > .af-submenu{
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
  padding-top: 8px;
}

.af-drawer .af-submenu a{
  display:block;
  padding: 11px 12px;
  border-radius: 14px;

  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 13.5px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.af-drawer .af-submenu a:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

/* ==================================
   Footer — Mobile FIX (center + stack)
================================== */
@media (max-width: 900px){

  /* الفوتر كله بالنص */
  .af-footer,
  .af-footer *{
    text-align: center;
  }

  /* الأعمدة تصير عمود واحد */
  .af-footer__grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    justify-items: center !important;
    align-items: center !important;
  }

  /* كل عمود ياخذ عرض مرتب */
  .af-footer__col{
    width: 100% !important;
    max-width: 520px;
    margin-inline: auto;
  }

  /* الشعار + وصفه */
  .af-footer__brandTitle{ text-align:center !important; }
  .af-footer__brandText{
    margin-inline:auto !important;
    text-align:center !important;
  }
  .af-footer__logo{ margin-inline:auto !important; }

  /* روابط سريعة (قائمة بالنص) */
  .af-footer__linksCol{
    align-items: center !important;
  }
  .af-footer__links{
    justify-items: center !important;
    gap: 12px !important;
  }

  /* التواصل: خله بالنص وتحت بعض (بدون LTR) */
  .af-footer__contact{
    justify-items: center !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .af-footer__contact li{
    direction: rtl !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* الأيقونة + النص: وسط */
  .af-footer__icon{
    margin: 0 !important;
  }
  .af-footer__contact a{
    direction: rtl !important;
    text-align: center !important;
    display: inline-block;
  }

  /* البوتوم: وسط وتحت بعض */
  .af-footer__bottom{
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}
/* ==================================
   Footer — Mobile: Chips + Phone Fix
================================== */
@media (max-width: 900px){

  /* الفوتر كله بالنص */
  .af-footer,
  .af-footer *{
    text-align: center;
  }

  /* الأعمدة تصير عمود واحد */
  .af-footer__grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    justify-items: center !important;
    align-items: center !important;
  }

  .af-footer__col{
    width: 100% !important;
    max-width: 520px;
    margin-inline: auto;
  }

  .af-footer__brandTitle{ text-align:center !important; }
  .af-footer__brandText{
    margin-inline:auto !important;
    text-align:center !important;
  }
  .af-footer__logo{ margin-inline:auto !important; }

  /* =========================
     Links -> Chips (mobile)
  ========================= */
  .af-footer__linksCol{
    display: flex;
    flex-direction: column;
    align-items: center !important;
    gap: 12px;
  }

  .af-footer__links{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .af-footer__links li{
    margin:0 !important;
  }

  .af-footer__links a{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding: 10px 14px !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.84) !important;

    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1 !important;

    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .af-footer__links a:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.20) !important;
    color:#fff !important;
  }

  /* =========================
     Contact center + phone fix
  ========================= */
  .af-footer__contact{
    justify-items: center !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .af-footer__contact li{
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    direction: rtl !important;         /* لا LTR بالجوال */
    text-align: center !important;
  }

  .af-footer__icon{
    margin: 0 !important;
  }

  .af-footer__contact a{
    direction: ltr !important;          /* الرقم نفسه LTR عشان +966 ما ينقلب */
    unicode-bidi: plaintext !important; /* يمنع قلب/تشويه ترتيب الأرقام */
    text-align: center !important;
    display: inline-block;
    font-weight: 800;
    color: rgba(255,255,255,.78) !important;
  }

  /* البوتوم: وسط وتحت بعض */
  .af-footer__bottom{
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}

/* =========================================
   Almarbad mobile: stop overlap (reset manual grid placement)
========================================= */
@media (max-width: 980px){
  #almarbad-page .af-project-grid2{
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
  }

  /* يلغي أي grid-column/grid-row جاي من nth-child */
  #almarbad-page .af-project-block{
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    min-width: 0;
  }
}

/* Tabs Nav */
.af-branch-nav{
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--af-border);
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Tabs */
.af-branch-tab{
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--af-muted);
  font-weight: 800;
  border-radius: 14px;
  cursor: pointer;
}

.af-branch-tab.is-active{ color: var(--af-ink); }

/* Indicator (المهم هنا) */
.af-branch-indicator{
  position: absolute;
  z-index: 1;
  top: 10px;
  bottom: 10px;
  left: 10px;        /* بيتم تحديثها بالـ JS */
  width: 0;          /* بيتم تحديثها بالـ JS */
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,23,20,.08);
  box-shadow: 0 10px 30px rgba(13,23,20,.12);
  transition: left .28s ease, width .28s ease;
  pointer-events: none;
}

/* Panels */
.af-branch-panel{ display:none; }
.af-branch-panel.is-active{ display:block; }
/* Submenu (desktop) */
.af-menu .af-has-sub{ position:relative; }

.af-submenu{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;

  /* أهم تعديل: بدون gap قاتل */
  top: calc(100% + 2px);
  right:0;
  min-width:240px;

  border-radius:18px;
  z-index:70;

  background: rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.16);

  /* أنعم + يثبت */
  opacity:0;
  transform: translateY(6px);
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
}

/* “جسر حماية” فوق المنيو يمنع قطع الهوفر أثناء النزول */
.af-submenu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;          /* يغطي الفراغ */
  height:10px;
}

.af-submenu li a{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  color: rgba(255,255,255,.86);
  font-size:14px;
}
.af-submenu li a:hover{ background: rgba(255,255,255,.12); }

/* فتح بالهوفر + بالكيبورد */
.af-has-sub:hover > .af-submenu,
.af-has-sub:focus-within > .af-submenu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}