/* =================================================================== */
/* File: assets/css/main.css                                           */
/* RTL-first • Mobile & iPad Friendly • Safe-Area aware • Reduced Motion */
/* Polished typography + cleaned responsive rules                       */
/* =================================================================== */

/* ===================== 0) Font Faces (NRT + fallbacks) ==============
   - يفضَّل استخدام WOFF2 للأداء مع توفير TTF كنسخة احتياطية
   - نطاق Unicode يغطي العربية والكردية مع لاتيني أساسي للأرقام والرموز
===================================================================== */
@font-face {
  font-family: 'NRT';
  src: url('/fonts/NRT-Reg.woff2') format('woff2'),
       url('/fonts/NRT-Reg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+202A-202E;
}
@font-face {
  font-family: 'NRT';
  src: url('/fonts/NRT-Bd.woff2') format('woff2'),
       url('/fonts/NRT-Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+202A-202E;
}

/* ========================= 1) CSS Variables ======================== */
:root{
  /* Colors */
  --primary-gold:#d4af37;
  --secondary-gold:#b8941f;
  --accent-gold:#f4d03f;

  --bg-0:#ffffff;
  --bg-1:#f7f7f8;
  --bg-2:#f0f0f0;

  --text-0:#0f172a; /* darker for contrast */
  --text-1:#334155;
  --text-2:#64748b;
  --muted:#94a3b8;

  --border:rgba(0,0,0,.08);
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.12);

  /* Gradients */
  --gold-gradient:linear-gradient(135deg,var(--primary-gold),var(--accent-gold));
  --glass-bg:rgba(255,255,255,.85);

  /* Easing & Motion */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --t-fast:.18s var(--ease);
  --t-md:.28s var(--ease);
  --t-slow:.5s var(--ease);

  /* Typography */
  --font:'NRT', system-ui, -apple-system, 'Segoe UI', 'Amiri', serif;
  --fs-0:clamp(.9rem, .86rem + .25vw, 1rem);   /* base */
  --fs-1:clamp(1rem, .95rem + .5vw, 1.25rem);  /* lead */
  --fs-2:clamp(1.2rem, 1rem + 1vw, 1.5rem);    /* h4 */
  --fs-3:clamp(1.5rem, 1.2rem + 1.6vw, 2rem);  /* h3 */
  --fs-4:clamp(2rem, 1.6rem + 2.1vw, 2.75rem); /* h2 */
  --fs-5:clamp(2.2rem, 1.8rem + 4vw, 4.2rem);  /* hero */

  /* Layout */
  --header-h:88px;
  --header-h-sm:68px;
  --container-w:1200px;
  --gutter:clamp(14px, 2.5vw, 28px);
  --radius:16px;

  /* Safe-area (iOS) */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);

  /* dynamic header height for mega menu positioning */
  --header-current-h:var(--header-h);
}

@media (prefers-reduced-motion:reduce){
  :root{ --t-fast:0s; --t-md:0s; --t-slow:0s; }
}

/* ===================== 2) Reset & Base ============================ */
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-0);
  line-height:1.75;
  color:var(--text-0);
  background:var(--bg-0);
  direction:rtl;
  text-align:right;
  overflow-x:hidden;
  padding-top:calc(var(--header-h) + var(--safe-top));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures: common-ligatures contextual;
}
:where(img,svg,video,canvas){ max-inline-size:100%; block-size:auto; }
:where(button,input,select,textarea){ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(28px, 4vw, 64px);
}
.container.narrow{ max-width:900px; }
.container-footer{
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Utilities */
.hidden{ display:none !important; }
.center{ display:grid; place-items:center; }
.round{ border-radius:var(--radius); }
.shadow{ box-shadow:var(--shadow); }

/* ============================ 3) Header =========================== */
.modern-header{
  position:fixed;
  inset-inline:0;
  inset-block-start:0;
  height:var(--header-h);
  background:var(--glass-bg);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-block-end:1px solid var(--border);
  z-index:1000;
  transition:height var(--t-md), background var(--t-md), box-shadow var(--t-md);
  padding-block-start:var(--safe-top);
}
.modern-header.scrolled{
  background:rgba(255,255,255,.98);
  height:calc(var(--header-h) - 8px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.header-container{
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}

.logo-section{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.brand-logo{ display:flex; align-items:center; gap:12px; }
.logo-frame{
  inline-size:56px; block-size:56px; border-radius:50%;
  background:var(--gold-gradient); color:#fff;
  display:grid; place-items:center; font-size:1.2rem;
  box-shadow:0 0 0 3px rgba(212,175,55,.18), 0 10px 24px rgba(212,175,55,.25);
  transition:transform var(--t-md), box-shadow var(--t-md);
}
.brand-logo:hover .logo-frame{ transform:translateY(-2px) scale(1.03); }

.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.company-name{ font-weight:900; font-size:1.1rem; color:var(--text-0); }
.company-tagline{ font-size:.85rem; color:var(--text-2); }

.main-navigation{ flex:1; display:flex; justify-content:center; }
.nav-menu{ display:flex; list-style:none; gap:6px; align-items:center; flex-wrap:wrap; padding:0; margin:0; }
.nav-item{ position:relative; }
.nav-link{
  position:relative; display:flex; align-items:center; gap:.5rem;
  padding:.65rem 1rem; border-radius:999px; isolation:isolate;
  transition:transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.nav-link::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:transparent; transition:background var(--t-fast);
  border:1px solid var(--border);
}
.nav-link:hover,
.nav-link.active{ color:#fff; transform:translateY(-2px); }
.nav-link:hover::before,
.nav-link.active::before{ background:var(--gold-gradient); border-color:transparent; }
.nav-icon{ font-size:1rem; transform-origin:center; transition:transform var(--t-fast); }
.nav-link:hover .nav-icon{ transform:scale(1.08); }

.header-controls{ display:flex; align-items:center; gap:8px; }
.lang-toggle{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:999px; background:transparent;
  border:1px solid var(--border); cursor:pointer; transition:var(--t-fast);
  touch-action:manipulation;
}
.lang-toggle:hover{ border-color:var(--primary-gold); color:var(--primary-gold); background:rgba(212,175,55,.06); }

.lang-menu{
  position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0;
  min-inline-size:160px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-md), transform var(--t-md), visibility var(--t-md);
  z-index:1001;
}
.language-selector.active .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-option{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; color:var(--text-0);
  border-block-end:1px solid var(--border); transition:background var(--t-fast), color var(--t-fast);
}
.lang-option:last-child{ border:0; }
.lang-option:hover{ background:var(--gold-gradient); color:#fff; }

.search-toggle,
.action-btn{
  inline-size:46px; block-size:46px; border-radius:50%;
  border:0; color:#fff; background:var(--gold-gradient);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  touch-action:manipulation;
}
.search-toggle:hover,
.action-btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow-lg); }

.mobile-toggle{
  display:none; flex-direction:column; justify-content:space-between;
  inline-size:28px; block-size:20px; background:transparent; border:0; padding:0; cursor:pointer;
}
.hamburger-line{ inline-size:100%; block-size:2px; background:var(--text-0); transition:var(--t-fast); transform-origin:center; }
.mobile-toggle.active .hamburger-line:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.mobile-toggle.active .hamburger-line:nth-child(2){ opacity:0; }
.mobile-toggle.active .hamburger-line:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* Search overlay */
.search-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; opacity:0; visibility:hidden; transition:var(--t-md); z-index:1200;
  padding-inline:var(--gutter); padding-block:var(--safe-top) var(--safe-bottom);
}
.search-overlay.active{ opacity:1; visibility:visible; }
.search-container{ inline-size:min(680px, 100%); position:relative; }
.search-box{
  display:flex; background:#fff; border-radius:999px; overflow:hidden; box-shadow:var(--shadow-lg);
}
.search-input{
  flex:1; padding:1.1rem 1.3rem; border:0; outline:none; background:transparent; font-size:var(--fs-1);
}
.search-btn{
  inline-size:76px; border:0; background:var(--gold-gradient); color:#fff; font-size:1.1rem; cursor:pointer; transition:var(--t-fast);
}
.search-close{
  position:absolute; inset-inline-start:50%; transform:translateX(-50%);
  inset-block-start:-58px; inline-size:48px; block-size:48px; border-radius:50%;
  display:grid; place-items:center; border:1.5px solid #fff; color:#fff; background:transparent; cursor:pointer;
}

/* ========================= 4) Hero Section ======================== */
.hero-section{ position:relative; inline-size:100vw; block-size:min(100svh, 900px); min-block-size:680px; overflow:hidden; }
.slide{ position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity var(--t-slow), transform var(--t-slow); }
.slide.active{ opacity:1; transform:scale(1); z-index:2; }
.slide.prev{ opacity:0; transform:scale(.985); z-index:1; }

.hero-background, .hero-bg-image{ position:absolute; inset:0; inline-size:100%; block-size:100%; }
.hero-bg-image{ object-fit:cover; object-position:center; transition:transform var(--t-slow);} 
.slide:not(.active) .hero-bg-image{ transform:scale(1.06); }
.hero-background::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,0,0,.62), rgba(0,0,0,.35)); }

.hero-content{ position:relative; z-index:3; inline-size:100%; max-inline-size:var(--container-w); margin-inline:auto; block-size:100%; display:flex; align-items:center; justify-content:center; padding-inline:var(--gutter); }
.hero-text{ color:#fff; max-inline-size:820px; transform:translateY(24px); opacity:0; transition:transform var(--t-md), opacity var(--t-md); }
.slide.active .hero-text{ transform:translateY(0); opacity:1; transition-delay:.25s; }

.company-logo{ inline-size:112px; block-size:112px; border-radius:50%; background:rgba(255,255,255,.9); display:block; object-fit:contain; padding:14px; margin-block-end:22px; box-shadow:0 0 30px rgba(255,216,109,.4); transition:var(--t-md); }
.company-logo:hover{ transform:scale(1.03); }

.location-tag{ font-size:.85rem; letter-spacing:2px; text-transform:uppercase; opacity:.9; margin-block-end:10px; }
.hero-title{ font-size:var(--fs-5); font-weight:900; line-height:1.2; margin:0 0 14px; background:var(--gold-gradient); -webkit-background-clip:text; color:transparent; text-shadow:1px 1px 6px rgba(0,0,0,.35); }
.hero-description{ font-size:var(--fs-1); color:#fff; opacity:.96; max-inline-size:min(60ch, 92%); margin-block-end:22px; text-shadow:0 1px 3px rgba(0,0,0,.4); }

.discover-location{ display:inline-flex; align-items:center; gap:10px; text-transform:uppercase; font-weight:800; font-size:.92rem; cursor:pointer; transition:var(--t-fast); }
.discover-location:hover{ transform:translateX(-4px); }
.location-icon{ inline-size:40px; block-size:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,165,0,.9); }

/* ============================ 5) Buttons ========================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.85rem 1.6rem; border-radius:999px; font-weight:800; border:0; cursor:pointer; position:relative; transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); touch-action:manipulation; min-inline-size:min(46vw, 280px); }
.btn-primary{ background:#fff; color:#111; }
.btn-primary:hover{ transform:translateY(-2px); background:var(--primary-gold); color:#fff; box-shadow:0 8px 24px rgba(255,228,109,.5); }

.btn-outline{ background:transparent; color:var(--primary-gold); border:2px solid var(--primary-gold); min-inline-size:auto; padding:.75rem 1.25rem; }
.btn-outline:hover{ background:var(--primary-gold); color:#fff; }

/* ======================== 6) Content Sections ===================== */
.section-header{ text-align:center; margin-block-end:3rem; padding-inline:var(--gutter); }
.section-badge{ display:inline-block; background:var(--gold-gradient); color:#fff; padding:.4rem 1.2rem; border-radius:999px; font-weight:800; font-size:.95rem; margin-block-end:.75rem; }
.section-header h2{ font-size:var(--fs-4); font-weight:900; color:var(--text-0); margin:.3rem 0 .6rem; }
.section-header p{ font-size:var(--fs-1); color:var(--text-2); max-inline-size:65ch; margin-inline:auto; }

.about{ background:var(--bg-1); }
.about-content{ display:flex; flex-direction:column; gap:clamp(24px, 4vw, 48px); }
.about-main{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px, 4vw, 48px); align-items:center; }
.about-text h3{ font-size:var(--fs-3); font-weight:900; margin:0 0 14px; }
.about-text p{ font-size:var(--fs-1); color:var(--text-1); margin:0 0 18px; }

.vision-mission{ display:grid; gap:18px; }
.vision, .mission{ display:flex; align-items:flex-start; gap:12px; }
.icon-wrapper{ inline-size:48px; block-size:48px; border-radius:50%; background:var(--gold-gradient); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.vision .content h4, .mission .content h4{ font-size:1.15rem; font-weight:900; margin:.15rem 0 .3rem; }
.vision .content p, .mission .content p{ color:var(--text-2); }

.about-image{ position:relative; max-inline-size:100%; }
.image-wrapper{ position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:#000; }
.about-image img{ inline-size:100%; block-size:clamp(280px, 40vw, 560px); object-fit:cover; transition:transform var(--t-slow); }
.image-overlay{ position:absolute; inset:0; background:rgba(224,164,35,.35); opacity:0; transition:opacity var(--t-md); }
.about-image:hover img{ transform:scale(1.04); }
.about-image:hover .image-overlay{ opacity:.18; }

/* Features */
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:clamp(14px, 3vw, 24px); }
.feature-card{ background:#fff; padding:clamp(18px,3.2vw,28px); border-radius:20px; text-align:center; box-shadow:var(--shadow); transition:transform var(--t-md), box-shadow var(--t-md); }
.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.feature-icon{ inline-size:72px; block-size:72px; border-radius:50%; background:var(--gold-gradient); color:#fff; display:grid; place-items:center; margin:0 auto 14px; font-size:1.75rem; transition:transform var(--t-md); }
.feature-card:hover .feature-icon{ transform:scale(1.06); }
.feature-card h4{ font-size:1.2rem; font-weight:900; margin:.4rem 0 .5rem; }
.feature-card p{ color:var(--text-2); }

/* Stats */
.stats{ background:var(--gold-gradient); color:#fff; padding-block:clamp(36px, 5vw, 64px); }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:clamp(16px, 3vw, 28px); }
.stat-card{ text-align:center; padding:clamp(16px, 3vw, 24px); }
.stat-icon{ font-size:2.4rem; opacity:.9; margin-block-end:6px; }
.stat-number{ font-size:clamp(2rem, 1.5rem + 3vw, 3.25rem); font-weight:900; }
.stat-label{ font-size:1rem; font-weight:700; opacity:.95; }

/* Projects */
.projects{ background:#fff; }
.projects-filter{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-block-end:clamp(18px, 3vw, 28px); }
.filter-btn{ background:transparent; border:1px solid var(--border); color:var(--text-0); padding:.65rem 1.3rem; border-radius:999px; cursor:pointer; transition:var(--t-fast); }
.filter-btn:hover, .filter-btn.active{ background:var(--gold-gradient); color:#fff; border-color:transparent; }

.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:clamp(14px, 3vw, 24px); }
.project-card{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:transform var(--t-md), box-shadow var(--t-md); }
.project-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.project-image{ position:relative; overflow:hidden; aspect-ratio:16/10; }
.project-image img{ inline-size:100%; block-size:100%; object-fit:cover; transition:transform var(--t-slow); }
.project-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; opacity:0; transition:opacity var(--t-md); }
.project-card:hover .project-overlay{ opacity:1; }
.project-card:hover .project-image img{ transform:scale(1.06); }
.project-actions{ display:flex; gap:10px; }

.project-info{ padding:clamp(14px, 3vw, 22px); }
.project-category{ display:inline-block; background:rgba(212,175,55,.12); color:var(--primary-gold); padding:.25rem .8rem; border-radius:999px; font-size:.8rem; font-weight:800; margin-block-end:.6rem; }
.project-info h3{ font-size:1.15rem; font-weight:900; margin:.3rem 0; }
.project-info p{ color:var(--text-2); margin:.4rem 0 1rem; }
.project-meta{ display:flex; justify-content:space-between; align-items:center; padding-block-start:.8rem; border-block-start:1px solid var(--border); }
.status{ padding:.25rem .8rem; border-radius:999px; font-size:.8rem; font-weight:800; }
.status.completed{ background:rgba(34,197,94,.1); color:#22c55e; }
.status.in-progress{ background:rgba(251,191,36,.12); color:#f59e0b; }
.status.planning{ background:rgba(59,130,246,.12); color:#3b82f6; }
.location{ color:var(--text-2); font-size:.9rem; }

/* Contact */
.contact{ background:var(--bg-1); }
.contact-content{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 4vw, 40px); }
.contact-info h3{ font-size:var(--fs-3); font-weight:900; margin:0 0 14px; }
.contact-items{ display:grid; gap:16px; margin-block-end:18px; }
.contact-item{ display:flex; align-items:flex-start; gap:12px; }
.contact-icon{ inline-size:46px; block-size:46px; border-radius:50%; background:var(--gold-gradient); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.contact-details h4{ font-size:1.05rem; font-weight:900; margin:.2rem 0 .35rem; }
.contact-details p{ color:var(--text-2); }

.social-links h4{ font-size:1.05rem; font-weight:900; margin:.6rem 0; }
.social-icons{ display:flex; gap:10px; }
.social-icon{ inline-size:44px; block-size:44px; border-radius:50%; background:var(--gold-gradient); color:#fff; display:grid; place-items:center; transition:var(--t-fast); }
.social-icon:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

.contact-form{ background:#fff; padding:clamp(18px, 4vw, 36px); border-radius:20px; box-shadow:var(--shadow); }
.contact-form h3{ font-size:1.35rem; font-weight:900; margin:0 0 14px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group{ margin-block-end:14px; }
.form-group :where(input,select,textarea){ inline-size:100%; padding:1rem; border:1.5px solid var(--border); border-radius:12px; background:#fff; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.form-group :where(input,select,textarea):focus{ outline:none; border-color:var(--primary-gold); box-shadow:0 0 0 3px rgba(212,175,55,.12); }
.form-group textarea{ resize:vertical; min-block-size:120px; }
.submit-btn{ inline-size:100%; background:var(--gold-gradient); color:#fff; border:0; padding:1rem 1.2rem; border-radius:999px; font-weight:900; cursor:pointer; box-shadow:var(--shadow); transition:var(--t-fast); }
.submit-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ============================= 7) Footer ========================== */
.footer{ background:var(--bg-2); color:var(--text-1); padding-block:clamp(28px, 4vw, 48px); }
.footer-content{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:clamp(12px, 3vw, 20px); margin-block-end:clamp(16px, 3vw, 28px); }
.footer-section h4{ font-size:1.05rem; font-weight:900; color:var(--primary-gold); margin:0 0 12px; }
.footer-logo{ display:flex; align-items:center; gap:10px; margin-block-end:10px; }
.footer-logo .logo-frame{ inline-size:46px; block-size:46px; }
.footer-logo .logo-text h3{ font-size:1.1rem; font-weight:900; color:var(--text-0); }
.footer-logo .logo-text span{ font-size:.9rem; color:var(--text-2); }
.footer-section p{ color:var(--text-2); }
.footer-social{ display:flex; gap:10px; }
.social-link{ inline-size:40px; block-size:40px; border-radius:50%; background:var(--gold-gradient); color:#fff; display:grid; place-items:center; transition:var(--t-fast); }
.social-link:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.footer-section ul{ list-style:none; padding:0; margin:0; }
.footer-section li{ margin-block-end:.7rem; }
.footer-section a{ color:var(--text-2); transition:color var(--t-fast); }
.footer-section a:hover{ color:var(--primary-gold); }
.footer-section .contact-info{ display:grid; gap:10px; }
.footer-section .contact-item{ display:flex; align-items:center; gap:.6rem; color:var(--text-2); }
.footer-section .contact-item i{ color:var(--primary-gold); }
.footer-bottom{ border-block-start:1px solid rgba(0,0,0,.08); padding-block-start:16px; }
.footer-bottom-content{ display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--text-2); flex-wrap:wrap; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a{ color:var(--text-2); transition:color var(--t-fast); }
.footer-links a:hover{ color:var(--primary-gold); }

/* ===================== 8) Back to Top Button ====================== */
.back-to-top{ position:fixed; inset-inline-start:clamp(12px, 2vw, 24px); inset-block-end:calc(clamp(12px, 2vw, 24px) + var(--safe-bottom)); inline-size:48px; block-size:48px; border-radius:50%; background:var(--gold-gradient); color:#fff; border:0; cursor:pointer; font-size:1.1rem; opacity:0; visibility:hidden; transition:var(--t-md); z-index:100; }
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* ======================== 9) Mega Menu / Drawer =================== */
/* Prevent body jump when opening drawer */
.modern-header.nav-open{ transform:none !important; }

/* Desktop mega menu (centered physically – RTL/LTR safe) */
@media (min-width:1201px){
  .nav-item.has-mega-menu{ position:static; }
  .nav-item.has-mega-menu .mega-menu-container{
    position:fixed;
    top:var(--header-current-h);
    left:50% !important; right:auto !important;
    transform:translateX(-50%) translateY(12px);
    inline-size:min(96vw, 1200px);
    max-block-size:calc(100vh - var(--header-current-h) - 24px);
    overflow:auto; border-radius:16px; box-shadow:var(--shadow-lg); z-index:1500;
    background:#fff; border:1px solid var(--border);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  }
  .nav-item.has-mega-menu:hover .mega-menu-container,
  .nav-item.has-mega-menu .mega-menu-container.is-open{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
}

/* Drawer (mobile/iPad) */
@media (max-width:1200px){
  .mobile-drawer{
    position:fixed; inset:0 0 0 auto; inline-size:min(92vw, 420px);
    background:#fff; box-shadow:-20px 0 40px rgba(0,0,0,.14); z-index:1400; padding:16px;
    visibility:hidden; transform:translateX(110%); transition:transform var(--t-md), visibility var(--t-md);
    contain:layout paint; will-change:transform;
  }
  html[dir="ltr"] .mobile-drawer{ inset:auto auto 0 0; transform:translateX(-110%); }
  .mobile-drawer.open{ visibility:visible; transform:translateX(0); }

  .mobile-drawer-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1390;
    visibility:hidden; opacity:0; transition:opacity var(--t-md), visibility var(--t-md);
  }
  .mobile-drawer-backdrop.show{ visibility:visible; opacity:1; }
}

/* ======================== 10) Responsive Rules ==================== */
/* --- iPad & small laptops (≤ 1200px) --- */
@media (max-width:1200px){
  :root{ --header-current-h:var(--header-h); }
  body{ padding-top:calc(var(--header-h) + var(--safe-top)); }
  .main-navigation{ display:none; }
  .mobile-toggle{ display:flex; }
  .hero-content{ padding-inline:clamp(16px, 4vw, 40px); }
  .about-main{ grid-template-columns:1fr; }
  .features-grid{ grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
  .stats-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-content{ grid-template-columns:2fr 1fr 1fr 1fr; }
}

/* --- Tablets portrait (≤ 992px) --- */
@media (max-width:992px){
  :root{ --header-h:80px; }
  .company-name{ font-size:1.05rem; }
  .hero-title{ font-size:clamp(2.2rem, 4.2vw, 3rem); }
  .hero-description{ font-size:clamp(1rem, 1.2vw + .8rem, 1.2rem); }
  .project-image{ aspect-ratio:16/11; }
  .footer-content{ grid-template-columns:1fr 1fr; gap:clamp(14px, 4vw, 24px); }
  .form-row{ grid-template-columns:1fr; }
}

/* --- Large phones / small tablets (≤ 768px) --- */
@media (max-width:768px){
  :root{ --header-h:var(--header-h-sm); }
  body{ font-size:clamp(.94rem, .9rem + .4vw, 1rem); }
  .brand-text{ display:none; }
  .header-controls{ gap:6px; }
  .lang-toggle{ padding:.5rem .7rem; }
  .hero-section{ min-block-size:620px; }
  .company-logo{ inline-size:96px; block-size:96px; }
  .hero-title{ font-size:clamp(2rem, 7vw, 2.6rem); }
  .hero-description{ font-size:1rem; max-inline-size:65ch; }
  .btn{ min-inline-size:min(82vw, 340px); }
  .projects-grid{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .contact-content{ grid-template-columns:1fr; }
  .footer-bottom-content{ flex-direction:column; text-align:center; }
}

/* --- Phones (≤ 576px) --- */
@media (max-width:576px){
  .logo-frame{ inline-size:48px; block-size:48px; }
  .search-toggle{ inline-size:42px; block-size:42px; }
  .hero-title{ font-size:clamp(1.85rem, 8vw, 2.2rem); }
  .hero-description{ font-size:.98rem; }
  .contact-form{ padding:clamp(16px, 5vw, 24px); }
  .features-grid, .projects-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
}

/* --- Very small phones (≤ 390px) --- */
@media (max-width:390px){
  .hero-section{ min-block-size:560px; }
  .btn{ padding:.75rem 1.1rem; }
}

/* ========================== 11) Print ============================= */
@media print{
  .modern-header, .search-overlay, .back-to-top, .slider-controls, .slide-number, .progress-bar, .hero-overlay, .hero-background, .destinations-preview{ display:none !important; }
  body{ padding-top:0 !important; }
  .hero-section{ block-size:auto; min-block-size:auto; padding-block:1.2rem; background:none !important; }
  .hero-title, .hero-description{ color:var(--text-0) !important; background:none !important; -webkit-text-fill-color:var(--text-0) !important; text-shadow:none !important; }
  .hero-content{ align-items:flex-start; gap:10px; padding:0 !important; }
  .hero-text{ opacity:1 !important; transform:none !important; max-inline-size:100% !important; color:var(--text-0) !important; }
  .location-tag, .discover-location{ display:none !important; }
  .project-image{ aspect-ratio:auto; }
}

/* ===================== 12) Minor Accessibility ==================== */
@media (hover:none){
  .nav-link:hover::before{ background:transparent; }
  .nav-link.active::before{ background:var(--gold-gradient); }
}
/* قياس الهيدر الديناميكي للتموضع الصحيح */
:root{ --header-current-h: var(--header-height); }

/* Drawer: تأكيد الإخفاء الافتراضي ومنع وميض المحتوى */
@media (max-width:1200px){
  .mobile-drawer{
    visibility: hidden;
    transform: translateX(110%);
    will-change: transform;
    contain: layout paint;
  }
  html[dir="ltr"] .mobile-drawer{ transform: translateX(-110%); }
  .mobile-drawer.open{ visibility: visible; transform: translateX(0); }

  .mobile-drawer-backdrop{
    visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease;
  }
  .mobile-drawer-backdrop.show{ visibility: visible; opacity: 1; }
}