/* =========================================
TOKENS (Updated to match Logo / Gold + Charcoal palette)
========================================= */
:root {
  --brand-dark: #2C2C2C;
  --brand-dark-2: #1F1F1F;
  --brand-gold: #D0A030;
  --brand-gold-2: #C09020;
  --brand-brown: #806030;
  --brand-pale: #f5f1e8;
  --brand-ink: #0f172a;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15, 23, 42, .10);
  --header-h: 74px;
  --topbar-h: 42px;
  --scroll-offset: calc(var(--header-h) + 16px);
  /* CTA fallback */
  --cta-bg: var(--brand-gold);
  --cta-text: #0b1220;
}

/* =========================================
BASE
========================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
}
body {
  font-family: 'Cairo', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  font-weight: 400;
  background: #f7f4ee;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
  letter-spacing: .2px;
}
/* Anchor scroll offset */
#home, #partners, #about, #contact {
  scroll-margin-top: var(--scroll-offset);
}
/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page { padding-top: 30px; }

/* =========================================
NAVBAR
========================================= */
:root{
  --header-total: calc(var(--topbar-h) + var(--header-h));
  --scroll-offset: calc(var(--header-total) + 16px);
}
/* تحديث offsets للـanchors */
html, body{
  scroll-padding-top: var(--scroll-offset);
}
#home, #partners, #about, #contact{
  scroll-margin-top: var(--scroll-offset);
}
/* Mobile groups */
.mobile-nav .m-group { display:block; }
.mobile-nav .m-toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:transparent;
  border:0;
  padding:14px 0;
  font:inherit;
  cursor:pointer;
}
.mobile-nav .m-sub{
  display:none;
  padding:0 0 10px 0;
}
.mobile-nav .m-group.is-open .m-sub{ display:block; }
.mobile-nav .m-sub a{ display:block; padding:10px 0; }

.mobile-nav .mobile-cta{
  margin-top:10px;
  display:block;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: transparent;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

/* عند scroll: يصبح الهيدر "قطعة واحدة" (بدون topbar) */
.site-header.scrolled{
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  --header-total: var(--header-h); /* ✅ دمج فعلي: إجمالي الهيدر الآن = mainbar فقط */
}

.site-header.has-hero,
.site-header.is-home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* ===== Topbar ===== */
.topbar{
  height: var(--topbar-h);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: height .22s ease, opacity .18s ease, border-color .18s ease;
}
.site-header.scrolled .topbar{
  height: 0;
  opacity: 0;
  border-bottom-color: transparent;
  pointer-events: none;
}
.topbar-inner{
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.topbar-nav{
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar-link{
  text-decoration: none;
  color: #475569;
  font-weight: 700;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.topbar-link:hover{ color: var(--brand-gold); }
.topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== Mainbar ===== */
.mainbar{ background: transparent; }
.header-inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Brand   بالالوان العادية */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo{ width: 38px; height: 38px; }
.brand-text{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.3px;
  color: var(--brand-dark);
}
/* ===== Brand ===== 
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo {
  width: 38px;
  height: 38px;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

/* اللون الافتراضي (داكن) 
.brand-text {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.3px;
  color: var(--brand-dark);
  transition: color 0.15s ease;
}*/

/* ===== Hero- Brand ===== */
/* الشعار والنص أبيض في الصفحات ) */
.site-header.is-home:not(.scrolled) .brand-logo,
.site-header.has-hero:not(.scrolled) .brand-logo {
  filter: brightness(0) invert(1); /* يخلي الشعار أبيض */
  opacity: 0.95;
}

.site-header.is-home:not(.scrolled) .brand-text,
.site-header.has-hero:not(.scrolled) .brand-text {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* يتم هني                  ===========          ========= ====== */


/* Nav */
.nav{
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-link{
  text-decoration: none;
  color: #334155;
  font-weight: 700;
  transition: color 0.15s ease;
}
.nav-link:hover{ color: var(--brand-gold); }

/* CTA */
.nav-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-text);
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .10);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, .14);
  filter: brightness(0.98);
}

.menu-btn{
  display: none;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

/* ===== Mobile Nav ===== */
.mobile-nav{
  display: none;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.94);
}
.mobile-nav a{
  display: block;
  padding: 10px 0;
  color: #334155;
  font-weight: 800;
  text-decoration: none;
}
.mobile-nav a:hover{ color: var(--brand-gold); }
@media (max-width: 900px){
  .topbar-nav{ display: none; }
  .nav{ display: none; }
  .menu-btn{ display: inline-flex; }
  body.menu-open .mobile-nav{ display: block; }
}

/* ===== Dropdown Menu ===== */
.nav-dropdown{
  position: relative;
  display: inline-block;
}
.nav-dropdown .dropdown-toggle{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #334155;
  font-weight: 700;
  transition: color 0.15s ease;
}
.nav-dropdown:hover .dropdown-toggle,
.nav-dropdown .dropdown-toggle:hover{
  color: var(--brand-gold);
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown .dropdown-menu:hover{
  display: block;
}
.nav-dropdown.open .dropdown-menu{ display: block; }
.dropdown-menu{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
  border-radius: 0;
  z-index: 1000;
  padding: 8px 0;
  margin-top: 0;
}
[dir="rtl"] .dropdown-menu{ left: auto; right: 0; }
.dropdown-item{
  display: block;
  padding: 10px 20px;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-item:hover{
  background: rgba(208, 160, 48, 0.08);
  color: var(--brand-gold);
}
.dropdown-divider{
  height: 1px;
  margin: 6px 0;
  background: rgba(15, 23, 42, 0.08);
  border: none;
}

/* ===== Language Switcher ===== */
.lang-switcher{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-pale);
  border: 1px solid rgba(128, 96, 48, 0.25);
  transition: all 0.15s ease;
  font-size: 0.92rem;
  min-width: 110px;
  justify-content: center;
}
.lang-switcher:hover{
  background: rgba(208, 160, 48, 0.15);
  border-color: rgba(208, 160, 48, 0.35);
  transform: translateY(-1px);
  color: var(--brand-gold);
}
.lang-icon{ font-size: 1.1em; line-height: 1; }
.lang-text{ font-weight: 700; }
.mobile-lang{
  margin-top: 12px;
  padding: 12px;
  min-width: auto;
  width: 100%;
  justify-content: center;
}

/* ===== Hero- ===== */
/* ✅ التعديل الأساسي: دعم كلا الفئتين is-home و has-hero */
.site-header.is-home:not(.scrolled) .nav-link,
.site-header.is-home:not(.scrolled) .nav-dropdown .dropdown-toggle,
.site-header.is-home:not(.scrolled) .topbar-link,
.site-header.has-hero:not(.scrolled) .nav-link,
.site-header.has-hero:not(.scrolled) .nav-dropdown .dropdown-toggle,
.site-header.has-hero:not(.scrolled) .topbar-link {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.site-header.is-home:not(.scrolled) .lang-switcher,
.site-header.has-hero:not(.scrolled) .lang-switcher {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff !important;
}
.site-header.is-home:not(.scrolled) .lang-switcher:hover,
.site-header.has-hero:not(.scrolled) .lang-switcher:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff !important;
}

.site-header.is-home:not(.scrolled) .nav-cta,
.site-header.has-hero:not(.scrolled) .nav-cta {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}
.site-header.is-home:not(.scrolled) .nav-cta:hover,
.site-header.has-hero:not(.scrolled) .nav-cta:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Home & Hero Pages (fixed) behavior */
.site-header.is-home,
.site-header.has-hero {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header.is-home:not(.scrolled),
.site-header.has-hero:not(.scrolled) .topbar {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.10);
}

.site-header.is-home:not(.scrolled),
.site-header.has-hero:not(.scrolled) .mainbar {
  background: transparent;
}

.site-header.is-home.scrolled,
.site-header.has-hero.scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

/* =========================================
HERO
========================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 70px 0 60px;
  margin-top: 0;
  overflow: hidden;
  filter: saturate(1.05) contrast(1.06);
  height: 620px;          /* قالب ثابت */
  min-height: 870px;      /* احتياط */
  max-height: 870px;      /* احتياط */
 
}

/* ✅ الفيديو لا يفرض ارتفاعه */
.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* يملأ القالب بدون تشويه */
  object-position: center 35%;
  display: block;
}


/*=============================الستار الذهبي =================================--------------
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(212,175,55,.18) 0%,
    rgba(212,175,55,.10) 45%,
    rgba(15,23,42,.35) 100%
  );
  z-index: 0;
}*/
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    1200px 600px at 50% 35%,
    rgba(255, 255, 255, .06) 0%,
    rgba(0, 0, 0, .20) 70%,
    rgba(0, 0, 0, .30) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero-content {
  max-width: 820px;
  margin: 0 ;
  text-align: start;
  color: #fff;
}
/* STEP 4 – Position hero content by direction + safe edge spacing */
:root{
  --hero-edge: 28px; /* غيرها إلى 0 إذا تريد لصق كامل */
}

.hero-content{
  max-width: 820px;        /* خليها أو ارفعها لاحقاً */
  text-align: start;
  margin: 0;
}

/* English (LTR): stick to left edge */
[dir="ltr"] .hero-content{
  padding-left: var(--hero-edge);
  padding-right: 0;
}

/* Arabic (RTL): stick to right edge */
[dir="rtl"] .hero-content{
  padding-right: var(--hero-edge);
  padding-left: 0;
}

.hero-title {
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.05;
  font-weight: 900;
  margin-bottom: 18px;
  margin: 0 0 12px;
}
.hero-subtitle {
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, .88);
}
.hero-actions {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hero-video{
  background: #0f1115;
}
.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.06);
}
.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
}
html.hero-fade .hero-title,
html.hero-fade .hero-subtitle,
html.hero-fade .hero-kicker{
  opacity: .15;
  transform: translateY(2px);
  transition: opacity .6s ease, transform .6s ease;
}
.hero-title,
.hero-subtitle,
.hero-kicker{
  transition: opacity .6s ease, transform .6s ease;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-2) 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(208, 160, 48, .45);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(208, 160, 48, .60);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat-card {
  padding: 20px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}
.stat-number {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--brand-gold);
}
.stat-label {
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
}
@media (max-width: 950px) {
  .hero { min-height: 640px; padding: 60px 0 55px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .hero { min-height: 680px; }
  .stat-number { font-size: 28px; }
}
.hero-content{
  overflow: hidden;
}
.hero-kicker,
.hero-title,
.hero-subtitle{
  will-change: transform, opacity, filter;
}
.hero-kicker,
.hero-title,
.hero-subtitle{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
  transition:
    opacity 700ms cubic-bezier(.2,.9,.2,1),
    transform 900ms cubic-bezier(.2,.9,.2,1),
    filter 700ms cubic-bezier(.2,.9,.2,1);
}
html.hero-fade .hero-kicker{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition-delay: 0ms;
}
html.hero-fade .hero-title{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  transition-delay: 70ms;
}
html.hero-fade .hero-subtitle{
  opacity: 0;
  transform: translateY(22px);
  filter: blur(10px);
  transition-delay: 140ms;
}
.hero-enter{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
}
.hero-enter.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}
#heroKicker.hero-enter{ transition-delay: 0ms; }
#heroTitle.hero-enter{ transition-delay: 90ms; }
#heroSubtitle.hero-enter{ transition-delay: 170ms; }
.hero-title{
  letter-spacing: .2px;
}


/* =========================================
HERO STATS – ENTRY ANIMATION
========================================= */
.stat-card{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms cubic-bezier(.2,.9,.2,1),
    transform 900ms cubic-bezier(.2,.9,.2,1);
}
.hero-stats.is-inview .stat-card{
  opacity: 1;
  transform: translateY(0);
}
.hero-stats.is-inview .stat-card:nth-child(1){ transition-delay: 0ms; }
.hero-stats.is-inview .stat-card:nth-child(2){ transition-delay: 90ms; }
.hero-stats.is-inview .stat-card:nth-child(3){ transition-delay: 180ms; }
.hero-stats.is-inview .stat-card:nth-child(4){ transition-delay: 270ms; }
.stat-number{
  will-change: contents;
  font-variant-numeric: lining-nums tabular-nums;
}

/* =========================================
SECTIONS (shared)
========================================= */
.section-head {
  text-align: center;
  margin: 70px auto 40px;
}
.section-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: var(--brand-dark);
}
.section-subtitle {
  margin: 0 auto;
  max-width: 760px;
  line-height: 1.8;
  color: #64748b;
  font-weight: 600;
}


/* ===============================
   WORK / PORTFOLIO (Home) — FINAL (LTR loop in BOTH languages)
   Key idea:
   - Keep the SCROLLER itself always LTR so scrollLeft behaves the same.
   - Keep Arabic text RTL inside cards only.
================================ */
.work {
  padding: 90px 0;
  background:
    radial-gradient(
      900px 420px at 50% -120px,
      rgba(212, 175, 55, .18) 0%,
      rgba(212, 175, 55, .08) 35%,
      rgba(255, 255, 255, 0) 65%
    ),
    linear-gradient(
      180deg,
      #fbfbf7 0%,
      #ffffff 55%,
      #ffffff 100%
    );
  border-top: 1px solid rgba(15, 23, 42, .06);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  overflow: hidden;
}

.work-head {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 18px;
  position: relative;
}

/* Reveal head */
.work-title,
.work-subtitle{
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: transform, opacity, filter;
}

.work.is-inview .work-title{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.work.is-inview .work-subtitle{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .12s;
}

.work-head:hover .work-title{ transform: translateY(-2px); }
.work-head:hover .work-subtitle{ transform: translateY(-1px); }

.work-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  color: #0f172a;
}

.work-title-line{
  position: relative;
  display: inline-block;
  padding-bottom: 0;
}

.work-subtitle {
  margin: 0 auto 18px;
  max-width: 860px;
  color: #475569;
  font-weight: 700;
  line-height: 1.9;
}

.work-subtitle-line{
  background: none !important;
  padding: 0 !important;
}

@media (prefers-reduced-motion: reduce){
  .work-title,.work-subtitle{ transition: none; transform:none; filter:none; opacity:1; }
}

/* Controls */
.work-controls{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.work-filters{
  order: 1;
  width: 100%;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* IMPORTANT:
   You asked: same as English in BOTH -> do NOT reverse filters row.
*/
.work-filters{ flex-direction: row; }

.work-chip {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255, 255, 255, .65);
  color: #0f172a;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.work-chip:hover { transform: translateY(-1px); }

.work-chip.is-active {
  background: linear-gradient(180deg, #D4AF37, #B8860B);
  border-color: rgba(212, 175, 55, .35);
  color: #1b1b1b;
}

.work-arrows{
  order: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.work-arrow{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(255,255,255,.75);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.work-arrow:hover{ transform: translateY(-1px); }

@media (max-width: 520px){
  .work-controls{ gap: 10px; }
  .work-arrow{ width: 36px; height: 36px; }
}

/* ===================== RAIL / LOOP ===================== */
/* ✅ FINAL FIX: force the scroller itself to LTR so scrollLeft is consistent */
.work-rail{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px 6px 18px;

  direction: ltr;          /* ✅ THE FIX */
  unicode-bidi: isolate;   /* avoid inheriting RTL bidi quirks */
}
.work-rail::-webkit-scrollbar{ display:none; }

/* Track remains flex */
.work-track{
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
  direction: ltr;          /* keep flex flow consistent */
}

.work-grid{
  display: flex;
  gap: 18px;
  align-items: stretch;
  direction: ltr;          /* keep same flow always */
}
.work-grid-clone{ opacity: 1; }

/* Cards */
.work-card {
  width: 340px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;

  border-radius: 0; /* sharp */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

  direction: ltr; /* card box in LTR (layout stable) */
}

.work-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
  border-color: rgba(212, 175, 55, .22);
}

.work-media {
  position: relative;
  background: #0b1f35;
  border-radius: 0;
}

.work-media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: saturate(1.03) contrast(1.03);
}

.work-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 8px 12px;
  border-radius: 0;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: #1b1b1b;
  background: linear-gradient(180deg, #D4AF37, #B8860B);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

/* ✅ Arabic: keep text RTL inside content only */
html[dir="rtl"] .work-body,
html[dir="rtl"] .work-card-title,
html[dir="rtl"] .work-card-text{
  direction: rtl;
  text-align: right;
}

/* Badge position for Arabic (optional) */
html[dir="rtl"] .work-badge { left: auto; right: 14px; }

.work-body { padding: 16px 16px 18px; }

.work-card-title {
  margin: 2px 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}

.work-card-text {
  margin: 0;
  color: #475569;
  font-weight: 650;
  line-height: 1.85;
  font-size: 14.8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: calc(1.85em * 3);
}

/* CTA */
.work-cta {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.work-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  background: rgba(15, 23, 42, .06);
  border: 1px solid rgba(15, 23, 42, .10);
  color: #0f172a;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.work-cta-btn:hover {
  transform: translateY(-2px);
  background: rgba(15, 23, 42, .08);
  border-color: rgba(212, 175, 55, .25);
}

/* Responsive */
@media (max-width: 900px) {
  .work-card { width: 320px; }
  .work-media img{ height: 240px; }
}

@media (max-width: 520px) {
  .work { padding: 75px 0; }
  .work-card { width: 86vw; }
  .work-media img{ height: 220px; }
}



/* =========================================
   GLOBAL PRESENCE SECTION (FINAL / CLEAN)
   Goal:
   - ALWAYS نفس تخطيط الإنجليزي: (Text LEFT) + (Image RIGHT) حتى في العربية
   - العربية فقط تغيّر اتجاه النص ومحاذاته (بدون قلب الأعمدة)
   - الصورة تعمل bleed لليمين فقط (بدون ما تدخل فوق النص)
========================================= */

:root{
  /* عدّلها إذا كان الـcontainer عندك مختلف */
  --container-max: 1200px;
}

/* ===== Section wrapper ===== */
.global-presence{
  background:#ffffff;
  padding:60px 0 100px;
  color:#0f172a;
  overflow:hidden; /* يمنع سكرول أفقي بسبب الـbleed */
}

/* ===== Grid layout (LOCK layout to LTR) =====
   IMPORTANT: this keeps columns visually identical in EN + AR
*/
.global-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* TEXT | IMAGE (always) */
  gap:60px;
  align-items:center;

  direction:ltr; /* ✅ الحل الأساسي: يمنع RTL من قلب الأعمدة */
}

/* ===== TEXT column ===== */
.global-content{
  max-width:560px;
}

/* Arabic text only (do NOT change layout) */
html[dir="rtl"] .global-content{
  direction:rtl;      /* النص عربي */
  text-align:right;   /* محاذاة عربية */
}

/* Kicker */
.global-kicker{
  display:inline-block;
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--brand-brown);
  margin-bottom:18px;
  text-decoration:none;
}
.global-kicker a{
  color: var(--brand-brown);
  text-decoration:none;
}
.global-kicker a:hover{ text-decoration:underline; }

/* Title */
.global-title{
  font-size:54px;
  line-height:1.1;
  font-weight:900;
  margin:0 0 20px;
}

/* Body text */
.global-text{
  font-size:18px;
  line-height:1.8;
  color:#475569;
  margin-bottom:34px;
}

/* Button */
.global-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 28px;
  border:2px solid var(--brand-gold);
 background: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-2) 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  color:#0b1220;
  font-weight:800;
  text-decoration:none;
  transition:all .22s ease;
  border-radius: 14px;
}

.global-btn:hover{
  background:#ffffff;
  color:#0b1220;
}

/* ===== IMAGE column ===== */
.global-media{
  position:relative;
  height:560px;
  overflow:hidden;

  /* افتراضيًا داخل الـcontainer */
  margin:0;
}

/* Full-bleed to the RIGHT edge only (works for EN + AR because layout is locked LTR) */
@media (min-width: 1000px){
  .global-media{
    margin-right: calc(-1 * ((100vw - var(--container-max)) / 2));
  }
}

.global-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;

  /* ✅ بدل width:120% (الذي كان يسبب تداخل على النص في RTL)
     نعمل تكبير آمن داخل الإطار بدون ما يزحف لليسار:
  */
  transform: scale(1.08);
  transform-origin: right center; /* يكبّر نحو اليمين */
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .global-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .global-title{
    font-size:42px;
  }

  .global-presence{
    padding:80px 0;
  }

  .global-media{
    height:420px;
    margin-right:0; /* نوقف الـbleed بالموبايل */
  }

  .global-media img{
    transform: scale(1.04);
    transform-origin:center center;
  }
}

@media (max-width: 520px){
  .global-media{
    height:340px;
  }

  .global-media img{
    transform:none;
  }
}


/* =========================================
   LOGO MARQUEE (MATCH GLOBAL PRESENCE)
========================================= */

/* =========================================
   LOGO MARQUEE (FIX RTL DISAPPEAR)
   - Force marquee mechanics to LTR even in Arabic
   - Keep title RTL aligned
========================================= */

.logo-marquee{
  padding: 34px 0 56px;
  background: #ffffff;
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
  overflow: hidden;
}

/* Title stays normal (can be RTL) */
.logo-marquee-title{
  margin: 0 0 18px;
  color: #0f172a;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  opacity: .9;
}

/* ✅ Force the moving rail to behave as LTR always */
.logo-marquee-rail,
.logo-marquee-track,
.logo-marquee-group{
  direction: ltr;
}

/* rail */
.logo-marquee-rail{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* edge fade */
.logo-marquee-rail::before,
.logo-marquee-rail::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 110px;
  z-index: 2;
  pointer-events:none;
}

.logo-marquee-rail::before{
  left:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0) 100%
  );
}

.logo-marquee-rail::after{
  right:0;
  background: linear-gradient(
    270deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0) 100%
  );
}

/* track */
.logo-marquee-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: logoMarquee 28s linear infinite;
}

/* group */
.logo-marquee-group{
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 10px 24px;
}

/* logos */
.logo-marquee-group img{
  height: 56px;
  width: 170px;
  object-fit: contain;
  object-position: center;
  display: block;

  opacity: .95;
  filter: saturate(1.02) contrast(1.05);
  transform: translateZ(0);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.logo-marquee-group img:hover{
  opacity: 1;
  transform: translateY(-2px);
  filter: saturate(1.06) contrast(1.08);
}

/* motion */
@keyframes logoMarquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* pause on hover */
.logo-marquee-rail:hover .logo-marquee-track{
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 900px){
  .logo-marquee-group{ gap: 22px; }
  .logo-marquee-group img{
    height: 48px;
    width: 150px;
  }
  .logo-marquee-track{ animation-duration: 24s; }
}

@media (max-width: 520px){
  .logo-marquee-group img{
    height: 44px;
    width: 140px;
  }
  .logo-marquee-rail::before,
  .logo-marquee-rail::after{ width: 70px; }
}

@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{ animation: none; }
}

/* ✅ RTL: keep title right aligned only (marquee remains LTR) */
html[dir="rtl"] .logo-marquee-title{
  text-align: right;
}
/* ORC logo fix (image is too light) */
.logo-marquee-group img.logo-orc{
  filter: brightness(0) saturate(100%); /* يحوّل الأبيض إلى أسود */
  opacity: .92;
}

/* =========================================
   ABOUT (UPDATED: FULL-HEIGHT IMAGE)
   ========================================= */
#about.about {
  background: var(--brand-pale);
  padding: 80px 0;
}

/* ✅ التغيير الأساسي: خلّي الأعمدة تتمدد بطول السكشن */
#about .about-grid {
  display: grid;
  grid-template-columns: 1.1fr .95fr;
  gap: 40px;
  align-items: stretch;                 /* ✅ بدل center */
  direction: ltr;
  grid-template-areas: "text media";
}

#about .about-text { grid-area: text; }
#about .about-media { grid-area: media; direction: ltr; }

/* ✅ اجعل حاوية الصورة تمتد بارتفاع العمود بالكامل */
#about .about-image {
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(15, 23, 42, .18);
  background: #efe6d6;

  height: 100%;                        /* ✅ */
  min-height: 520px;                   /* ✅ يحافظ على شكل قوي */
}

/* ✅ الصورة تملأ الحاوية من فوق لتحت */
#about .about-image img {
  width: 100%;
  height: 100%;                        /* ✅ بدل 520px */
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

#about .about-title {
  margin: 0 0 14px;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 900;
  color: var(--brand-dark);
}

#about .about-paragraph {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.9;
  color: #334155;
  font-weight: 600;
  max-width: 640px;
}

#about .about-checklist {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

#about .about-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-dark);
}

#about .about-checklist .check {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(208, 160, 48, .16);
  color: var(--brand-gold-2);
  font-weight: 900;
  flex: 0 0 auto;
}

#about .about-cards {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

#about .about-card {
  background: rgba(208, 160, 48, .12);
  border: 1px solid rgba(128, 96, 48, .16);
  border-radius: 0px;
  padding: 24px 22px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#about .about-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
  border-color: rgba(208, 160, 48, .28);
}

#about .about-card-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 900;
  color: var(--brand-dark);
}

#about .about-card-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #27496D;
  font-weight: 600;
}

@media (max-width: 900px) {
  #about .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
    gap: 24px;
    align-items: initial;
  }
  #about .about-title { font-size: 40px; }

  /* على الموبايل نخليها ارتفاع ثابت جميل */
  #about .about-image{
    height: auto;
    min-height: 0;
  }
  #about .about-image img { height: 380px; }

  #about .about-cards { grid-template-columns: 1fr; }
}

/* ===================== ABOUT REVEAL ANIMATION ===================== */

#about .reveal-left,
#about .reveal-right{
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity 1.0s ease-out,
    transform 1.0s ease-out,
    filter 1.0s ease-out;
  will-change: transform, opacity, filter;
}

/* النص يدخل من اليسار */
#about .reveal-left{
  transform: translateX(-28px);
}

/* الصورة تدخل من اليمين (العكس) */
#about .reveal-right{
  transform: translateX(28px);
}

#about.is-inview .reveal-left,
#about.is-inview .reveal-right{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* عناصر داخل النص (عنوان/فقرة/نقاط/كروت) */
#about .reveal-item{
  opacity: 0;
  transform: translateX(-18px);
  filter: blur(6px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out,
    filter 0.9s ease-out;
  will-change: transform, opacity, filter;
}

#about .reveal-item.is-in{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  #about .reveal-left,
  #about .reveal-right,
  #about .reveal-item{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* =========================================
   TRUST / PARTNERS
   ========================================= */

.trust{
  padding: 90px 0;
  background: linear-gradient(180deg, #0f1115 0%, #171b22 55%, #0f1115 100%);
  color: #f3f4f6;
}

.trust-head{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 40px;
  overflow: hidden; /* يمنع قصّ الحركة خارج الهيدر */
}

.trust-title{
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #ffffff;
}

.trust-subtitle{
  margin: 0 auto;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
}

/* ===== Grid ===== */
.trust-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

/* ===== Card ===== */
.trust-card{
  border-radius: 0;             
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(208, 160, 48, .16);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.trust-card:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(208, 160, 48, .48);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .58);
}

/* ===== Media ===== */
.trust-media{
  position: relative;
  height: 310px;
  overflow: hidden;
  flex: 0 0 auto;
}

.trust-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.06); /* بدون blur */
  transform: scale(1.08);
  transition: transform .85s cubic-bezier(.22, .61, .36, 1);
  display: block;
}

.trust-card:hover .trust-media img{
  transform: scale(1.14);
}

.trust-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .06) 0%,
    rgba(0, 0, 0, .30) 45%,
    rgba(0, 0, 0, .62) 100%
  );
  pointer-events: none;
}

/* Badge */
.trust-badge{
  position: absolute;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #D0A030 0%, #C09020 100%);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .25);
}

/* Body */
.trust-body{
  padding: 18px 22px 22px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trust-card-title{
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
}

.trust-card-text{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
}

/* =========================================
   TRUST “GEAR” SCROLL MOTION (title/subtitle)
   - JS يتحكم بالترانسفورم/الأوباسيتي
   ========================================= */
.trust-gear .gear-title,
.trust-gear .gear-subtitle{
  will-change: transform, opacity;
  opacity: 0.15;     /* البداية */
  transition: none;  /* مهم: بدون time-based transition */
}

/* =========================================
   TRUST: Card reveal motion (slower + clear)
   - يعمل عند إضافة .is-inview من JS
   ========================================= */

/* قبل الظهور */
.trust .trust-card{
  opacity: 0;
  transform: translateY(85px) scale(.96);
  filter: blur(1px);
  will-change: transform, opacity, filter;
}

/* داخل الكرت */
.trust .trust-badge,
.trust .trust-card-title,
.trust .trust-card-text{
  opacity: 0;
  transform: translateX(90px);
  will-change: transform, opacity;
}

/* عند دخول السكشن */
.trust.is-inview .trust-card{
  animation: trustCardIn 1400ms cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: var(--d, 0ms);
}

/* ترتيب بطيء: badge ثم title ثم text */
.trust.is-inview .trust-card .trust-badge{
  animation: trustInnerIn 1200ms cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: calc(var(--d, 0ms) + 180ms);
}

.trust.is-inview .trust-card .trust-card-title{
  animation: trustInnerIn 1300ms cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: calc(var(--d, 0ms) + 320ms);
}

.trust.is-inview .trust-card .trust-card-text{
  animation: trustInnerIn 1400ms cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: calc(var(--d, 0ms) + 480ms);
}

/* Keyframes */
@keyframes trustCardIn{
  0%{
    opacity: 0;
    transform: translateY(85px) scale(.96);
    filter: blur(1px);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes trustInnerIn{
  0%{
    opacity: 0;
    transform: translateX(90px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

/* RTL: خلي دخول النصوص من الجهة الصحيحة */
html[dir="rtl"] .trust .trust-badge,
html[dir="rtl"] .trust .trust-card-title,
html[dir="rtl"] .trust .trust-card-text{
  transform: translateX(-90px);
}

/* Responsive */
@media (max-width: 1100px){
  .trust-title{ font-size: 46px; }
  .trust-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px){
  .trust{ padding: 70px 0; }
  .trust-title{ font-size: 38px; }
  .trust-grid{ grid-template-columns: 1fr; }
  .trust-media{ height: 220px; }
}

/* =========================================
   CONTACT (SHARP + REVEAL ANIMATION)
========================================= */

/* Global sharpness */
:root{
  --sharp: 0px; /* 0 = sharp | 6px = slightly rounded */
}

/* =========================================
   SECTION
========================================= */
.contact{
  padding: 90px 0;
  background: #f7f4ee;
  color: #0b1220;
  overflow: hidden;
}

/* Header */
.contact-head{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 40px;
}

.contact-title{
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .3px;
  color: var(--brand-dark);
}

.contact-subtitle{
  margin: 0 auto;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.9;
  color: rgba(11, 18, 32, .65);
}

/* =========================================
   GRID (Locked like English)
   NOTE: Columns order is fixed in both languages.
========================================= */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  direction: ltr;
}

/* =========================================
   CARDS
========================================= */
.contact-card{
  background: #fff;
  border-radius: var(--sharp);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .10);
  padding: 26px;
  overflow: hidden;
}

.contact-card-title{
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  color: var(--brand-dark);
}

/* =========================================
   FORM
========================================= */
.form-group{ margin-bottom: 18px; }

.form-group label{
  display: block;
  font-weight: 800;
  margin-bottom: 10px;
  color: rgba(11, 18, 32, .78);
}

.form-group input,
.form-group textarea{
  width: 100%;
  border-radius: var(--sharp);
  border: 1px solid rgba(11, 18, 32, .16);
  padding: 14px;
  font-size: 16px;
  outline: none;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color: rgba(11, 18, 32, .40);
}

.form-group input:focus,
.form-group textarea:focus{
  border-color: rgba(208, 160, 48, .70);
  box-shadow: 0 0 0 4px rgba(208, 160, 48, .16);
}

.form-btn{
  width: 100%;
  border: 0;
  border-radius: var(--sharp);
  padding: 16px 18px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-2) 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.form-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(0, 0, 0, .22);
  filter: brightness(1.03);
}

/* =========================================
   SIDE INFO
========================================= */
.contact-side{
  display: grid;
  gap: 26px;
  align-content: start;
}

.info-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.info-item{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icon box */
.info-icon{
  width: 54px;
  height: 54px;
  border-radius: var(--sharp);
  display: grid;
  place-items: center;
  background: rgba(208, 160, 48, .14);
  border: 1px solid rgba(208, 160, 48, .18);
  flex: 0 0 54px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.icon-svg{
  width: 26px;
  height: 26px;
  display: block;
}

.info-item:hover .info-icon{
  transform: translateY(-1px);
  background: rgba(208, 160, 48, .18);
  border-color: rgba(208, 160, 48, .28);
}

.info-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.info-label{
  font-weight: 900;
  margin-bottom: 6px;
  color: rgba(11, 18, 32, .72);
}

.info-value{
  color: var(--brand-brown);
  font-weight: 800;
}

/* Links inside values */
.info-value a{
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.info-value a:hover{ text-decoration: underline; }

/* Phone numbers stability (your Blade uses dir="ltr" on the phone value wrapper) */
.info-value[dir="ltr"]{
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: left;
}

/* =========================================
   HOURS CARD
========================================= */
.hours-card{
  border-radius: var(--sharp);
  padding: 28px;
  color: #fff;
  background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-dark-2) 100%);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
  border: 1px solid rgba(208, 160, 48, .22);
  overflow: hidden;
}

.hours-title{
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}

.hours-grid{
  display: grid;
  gap: 14px;
}

.hours-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.hours-row:last-child{ border-bottom: 0; }

.hours-days,
.hours-time{
  font-weight: 900;
  opacity: .95;
}

.hours-note{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-weight: 800;
  opacity: .92;
  text-align: center;
  color: rgba(255, 255, 255, .90);
}

/* =========================================
   REVEAL ANIMATION (Stable, no jitter)
========================================= */
.contact .reveal{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.contact .reveal-left{ transform: translate3d(-22px, 0, 0); }
.contact .reveal-right{ transform: translate3d(22px, 0, 0); }
.contact .reveal-up{ transform: translate3d(0, 18px, 0); }

.contact.is-inview .reveal{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.contact .reveal{
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce){
  .contact .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 950px){
  .contact-title{ font-size: 44px; }
  .contact-grid{ grid-template-columns: 1fr; }
}

/* =========================================
   RTL (Arabic Only)
   - Keeps column order
   - Moves icons to the right
   - Keeps phone numbers LTR
========================================= */
html[dir="rtl"] .contact{
  direction: rtl;
}

html[dir="rtl"] .contact-grid{
  direction: ltr; /* keep columns fixed */
}

/* Move icon box to the right for each info row */
html[dir="rtl"] .contact .info-item{
  flex-direction: row-reverse;
  text-align: right;
}

/* Right*



/* =========================================
   FOOTER
   ========================================= */

.site-footer{
  background:#faf7f2;
  color:#2a2a2a;
  padding:80px 0 40px;
  border-top:1px solid rgba(0,0,0,.06);
}

/* ================= GRID ================= */
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:48px;
  margin-bottom:40px;
}

/* ================= BRAND ================= */
.footer-about{
  max-width:420px;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  text-align:center;
}

/* logo container */
.footer-logo{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
}

/* drop logo */
.footer-drop{
  width:68px;
  height:auto;
  display:block;
}

/* wordmark */
.footer-wordimg{
  height:44px;
  width:auto;
  display:block;
  opacity:.98;
}

/* description */
.footer-text{
  font-size:15px;
  line-height:1.9;
  color:#4a4a4a;
}

/* ================= TITLES ================= */
.footer-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:18px;
  color:#111;
}

/* ================= LINKS ================= */
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.footer-links a{
  color:#444;
  text-decoration:none;
  font-weight:600;
  transition:color .15s ease;
}

.footer-links a:hover{
  color:#b8943c;
}

/* ================= CONTACT ================= */
.footer-contact{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:16px;
}

.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

/* ✅ Icon card (match image #2) */
.footer-icon{
  width:56px;
  height:56px;
  border-radius:12px;
  background:#f5f1e8;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:none;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

/* ✅ Force icon size + keep opacity */
.footer-icon img,
.footer-icon svg{
  width:22px;
  height:22px;
  opacity:1 !important;
}

/* ✅ IMPORTANT: fix white icons (<img src="...svg">) by overriding the old filter:none !important */
.footer-icon img{
  filter: brightness(0) saturate(100%) !important;
}

/* SVG internal color fix (if you ever inline SVG instead of <img>) */
.footer-icon svg path,
.footer-icon svg line,
.footer-icon svg circle{
  stroke:#1f1f1f !important;
  fill:#1f1f1f !important;
}

/* contact text */
.footer-value,
.footer-value a{
  color:#2a2a2a;
  font-weight:600;
  text-decoration:none;
  line-height:1.6;
}

.footer-value a:hover{
  color:#b8943c;
}

/* ================= FOOTER BOTTOM ================= */
.footer-bottom{
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.08);
  text-align:center;
}

.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:14px;
  color:#666;
  font-weight:600;
}

.footer-powered a{
  color:inherit;
  text-decoration:none;
}

.footer-powered a:hover{
  color:#b8943c;
  text-decoration:underline;
}

/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  .site-footer{
    padding:60px 0 30px;
  }

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

  .footer-contact li{
    justify-content:center;
  }

  .footer-bottom-inner{
    flex-direction:column;
  }
}

/* =========================================
   RTL / LTR RULES
   ========================================= */

/* SERVICES */
html[dir="rtl"] .service-card { direction: rtl; text-align: right; }
html[dir="ltr"] .service-card { direction: ltr; text-align: left; }

html[dir="rtl"] .service-icon { margin: 0 0 16px auto; }
html[dir="ltr"] .service-icon { margin: 0 auto 16px 0; }

/* ABOUT */
html[dir="rtl"] #about .about-text { direction: rtl; text-align: right; }
html[dir="ltr"] #about .about-text { direction: ltr; text-align: left; }

html[dir="rtl"] #about .about-checklist li { direction: rtl; text-align: right; }
html[dir="ltr"] #about .about-checklist li { direction: ltr; text-align: left; }

/* TRUST */
html[dir="rtl"] .trust { direction: rtl; }
html[dir="ltr"] .trust { direction: ltr; }

html[dir="rtl"] .trust-card-title,
html[dir="rtl"] .trust-card-text { text-align: right; }

html[dir="ltr"] .trust-card-title,
html[dir="ltr"] .trust-card-text { text-align: left; }

html[dir="rtl"] .trust-badge { right: 16px; left: auto; }
html[dir="ltr"] .trust-badge { left: 16px; right: auto; }

/* CONTACT */
html[dir="rtl"] .contact { direction: rtl; }
html[dir="ltr"] .contact { direction: ltr; }

html[dir="rtl"] .form-group label,
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group textarea { text-align: right; }

html[dir="ltr"] .form-group label,
html[dir="ltr"] .form-group input,
html[dir="ltr"] .form-group textarea { text-align: left; }

html[dir="rtl"] .info-text { text-align: right; }
html[dir="ltr"] .info-text { text-align: left; }

html[dir="ltr"] .contact-info,
html[dir="ltr"] .info-list { text-align: left; }

html[dir="ltr"] .info-item { flex-direction: row; }
html[dir="rtl"] .info-item { flex-direction: row-reverse; }

html[dir="ltr"] .info-icon {
  margin-right: 14px;
  margin-left: 0;
}

html[dir="rtl"] .info-icon {
  margin-left: 14px;
  margin-right: 0;
}

/* FOOTER */
html[dir="rtl"] .site-footer { direction: rtl; }
html[dir="ltr"] .site-footer { direction: ltr; }

:root{
  --header-total: calc(var(--topbar-h) + var(--header-h));
}

.site-header.is-home{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hero{
  margin-top: calc(-1 * var(--header-total));
  padding-top: calc(var(--header-total) + 70px);
}

.site-header.is-home:not(.scrolled) .topbar{
  background: transparent;
  border-bottom-color: rgba(255,255,255,.10);
}

.site-header.is-home:not(.scrolled) .mainbar{
  background: transparent;
}

.site-header.is-home.scrolled{
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

body.is-inner main{
  padding-top: calc(var(--header-offset, 0px) + 8px);
}
body.is-home main{ padding-top: 0; }

/* =========================================
   FOOTER – CONTACT FIX
   - Stack phone numbers
   - Fix link colors
========================================= */

/* اجعل قيم التواصل عمودية (رقمين فوق بعض) */
.site-footer .footer-contact .footer-phones{
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.3;
}

/* روابط الفوتر ترث اللون (منع الأزرق الافتراضي) */
.site-footer .footer-contact a{
  color:#2a2a2a;
  text-decoration: none;
  font-weight: 700;
}

/* hover أنيق */
.site-footer .footer-contact a:hover{
  color: var(--brand-gold);
  text-decoration: underline;
}

/* ثبات اتجاه الأرقام حتى في العربية */
html[dir="rtl"] .site-footer .footer-phones{
  direction: ltr;
  unicode-bidi: plaintext;
}

/* محاذاة محتوى الفوتر في العربية */
html[dir="rtl"] .site-footer .footer-contact li{
  flex-direction: row-reverse;
  text-align: right;
}

/* مسافة صحيحة بين الأيقونة والنص في العربية */
html[dir="rtl"] .site-footer .footer-icon{
  margin-left: 12px;
  margin-right: 0;
}

html[dir="ltr"] .site-footer .footer-icon{
  margin-right: 12px;
  margin-left: 0;
}

/* ✅ Footer contact text: match other items (no bold look) */
.site-footer .footer-contact .footer-value,
.site-footer .footer-contact .footer-value a{
  color:#2a2a2a !important;
  font-weight:600 !important;
  opacity:1 !important;
}

/* optional: make numbers look lighter like rest */
.site-footer .footer-contact .footer-phones a{
  display:block;
  line-height:1.45;
}

/* =========================================
   ISO CERTIFICATIONS – HOME
========================================= */

.iso-section{
  background:#f5f1e8;          /* نفس who we are */
  padding:70px 0;
}

.iso-title{
  text-align:center;
  font-size:22px;
  font-weight:800;
  color:#111;                 /* فحمي داكن */
  margin-bottom:36px;
}

.iso-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
  align-items:center;
  justify-items:center;
}

/* ISO card */
.iso-item{
  width:160px;
  height:160px;
  display:grid;
  place-items:center;
}

/* ISO image */
.iso-item img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;

  /* توحيد الطابع اللوني */
  filter: grayscale(100%) brightness(0.45);
  opacity:0.92;
  transition:filter .25s ease, opacity .25s ease;
}

/* subtle hover (اختياري) */
.iso-item:hover img{
  filter: grayscale(0%) brightness(1);
  opacity:1;
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  .iso-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .iso-item{
    width:140px;
    height:140px;
  }
}