/* ============================================
   ARS - AWAD RABIE IBRAHIM & SONS LTD
   Professional Website v2.0
   Colors: Navy #1B3A6B | Gold #C9A84C | White #FFFFFF
   ============================================ */

/* ===== CSS VARIABLES ===== */
:root {
  --navy:        #1B3A6B;
  --navy-dark:   #0D2147;
  --navy-mid:    #1e4080;
  --navy-light:  #2a5298;
  --gold:        #C9A84C;
  --gold-light:  #E8C76A;
  --gold-dark:   #A8872E;
  --white:       #FFFFFF;
  --off-white:   #F7F9FC;
  --gray-100:    #EEF1F8;
  --gray-300:    #CBD5E1;
  --gray-500:    #8892A4;
  --gray-700:    #475569;
  --text:        #1a2035;
  --shadow-sm:   0 2px 12px rgba(27,58,107,.10);
  --shadow-md:   0 8px 32px rgba(27,58,107,.14);
  --shadow-lg:   0 20px 60px rgba(27,58,107,.18);
  --shadow-gold: 0 6px 25px rgba(201,168,76,.35);
  --r-sm:  8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .35s;
  /* Dark mode tokens */
  --bg:       #FFFFFF;
  --bg-card:  #FFFFFF;
  --bg-alt:   #F7F9FC;
  --border:   rgba(27,58,107,.10);
  --txt:      #1a2035;
  --txt-muted:#8892A4;
}
[data-theme="dark"] {
  --bg:       #0f1624;
  --bg-card:  #172033;
  --bg-alt:   #111827;
  --border:   rgba(255,255,255,.08);
  --txt:      #e8edf5;
  --txt-muted:#8899bb;
  --off-white:#111827;
  --gray-100: #1e2a40;
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior:smooth; font-size:16px;
  overflow-x:hidden;
}
body {
  font-family:'Tajawal','Segoe UI',sans-serif;
  direction:rtl;
  background:var(--bg);
  color:var(--txt);
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  transition:background var(--dur), color var(--dur);
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input, select, textarea { font-family:inherit; }

/* ===== LOADER ===== */
#pageLoader {
  position:fixed; inset:0; z-index:99999;
  background:var(--navy-dark);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:28px;
  transition:opacity .6s var(--ease), visibility .6s;
}
#pageLoader.done { opacity:0; visibility:hidden; }
.loader-logo-wrap {
  width:90px; height:90px; border-radius:50%;
  background:#fff; padding:10px;
  animation:loaderPulse 1.4s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(201,168,76,.5);
}
.loader-logo-wrap img { width:100%; border-radius:50%; object-fit:contain; }
@keyframes loaderPulse {
  0%   { box-shadow:0 0 0 0 rgba(201,168,76,.6); }
  70%  { box-shadow:0 0 0 18px rgba(201,168,76,.0); }
  100% { box-shadow:0 0 0 0 rgba(201,168,76,.0); }
}
.loader-text { color:#fff; font-size:1rem; font-weight:600; letter-spacing:2px; opacity:.7; }
.loader-progress {
  width:220px; height:3px;
  background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden;
}
.loader-bar {
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:3px;
  animation:loaderBar 1.6s var(--ease) forwards;
}
@keyframes loaderBar { from{width:0} to{width:100%} }

/* ===== TOP BAR ===== */
.topbar {
  background:var(--navy-dark);
  padding:7px 0;
  font-size:.8rem;
  color:rgba(255,255,255,.75);
}
.topbar .wrap {
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap;
}
.topbar a { color:var(--gold-light); transition:color var(--dur); }
.topbar a:hover { color:#fff; }
.tb-left, .tb-right { display:flex; align-items:center; gap:20px; }
.tb-left i, .tb-right i { margin-left:5px; }

/* ===== NAVBAR ===== */
.navbar {
  position:fixed;           /* ← FIXED — stays on scroll */
  top:0; left:0; right:0;
  z-index:1000;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:background var(--dur), box-shadow var(--dur);
}
.navbar.scrolled {
  box-shadow:var(--shadow-md);
  background:rgba(255,255,255,.97);
}
[data-theme="dark"] .navbar.scrolled { background:rgba(15,24,42,.97); }
/* push content below fixed navbar */
body { padding-top:86px; }
@media(max-width:768px){ body { padding-top:72px; } }
.nav-wrap {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:8px 0;
}
/* ── Logo bigger ── */
.nav-brand { display:flex; align-items:center; gap:12px; }
.nav-logo-img {
  height:68px; width:68px;
  object-fit:contain; border-radius:8px;
  flex-shrink:0;
  /* white bg so logo shows on all themes */
  background:#fff;
  padding:3px;
  box-shadow:0 2px 10px rgba(27,58,107,.15);
}
.nav-brand-text { display:flex; flex-direction:column; line-height:1.4; }
.nav-brand-text .en {
  font-size:.68rem; font-weight:700;
  color:var(--navy); letter-spacing:.4px;
}
.nav-brand-text .ar {
  font-size:.82rem; font-weight:800;
  color:var(--gold-dark);
}
[data-theme="dark"] .nav-brand-text .en { color:rgba(255,255,255,.7); }
[data-theme="dark"] .nav-brand-text .ar { color:var(--gold-light); }

.nav-menu { display:flex; align-items:center; gap:2px; }
.nav-menu a {
  color:var(--txt);
  font-size:.86rem; font-weight:600;
  padding:8px 12px; border-radius:var(--r-sm);
  position:relative; transition:color var(--dur), background var(--dur);
  white-space:nowrap;
}
.nav-menu a::after {
  content:''; position:absolute;
  bottom:4px; right:12px; left:12px;
  height:2px; background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav-menu a:hover { color:var(--navy); background:var(--gray-100); }
.nav-menu a:hover::after { transform:scaleX(1); }
[data-theme="dark"] .nav-menu a:hover { color:var(--gold-light); background:rgba(255,255,255,.06); }

.nav-actions { display:flex; align-items:center; gap:8px; }
.btn-nav-cta {
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff !important; padding:9px 20px !important;
  border-radius:50px !important; font-weight:700 !important;
  box-shadow:var(--shadow-gold);
  transition:transform var(--dur), box-shadow var(--dur) !important;
}
.btn-nav-cta:hover { transform:translateY(-2px) !important; box-shadow:0 8px 28px rgba(201,168,76,.5) !important; }
.btn-nav-cta::after { display:none !important; }

/* Language toggle — pill with subtle gray border */
.lang-toggle {
  height:34px; padding:0 16px; border-radius:50px;
  background:transparent;
  border:1.5px solid #CBD5E1;
  font-size:.82rem; font-weight:800; color:var(--gray-700);
  letter-spacing:.8px; cursor:pointer; font-family:inherit;
  transition:all var(--dur); line-height:1;
}
.lang-toggle:hover { border-color:var(--navy); color:var(--navy); background:rgba(27,58,107,.06); }
[data-theme="dark"] .lang-toggle { border-color:#4a5a7a; color:rgba(255,255,255,.75); background:rgba(255,255,255,.04); }
[data-theme="dark"] .lang-toggle:hover { border-color:var(--gold-light); color:var(--gold-light); }

/* Dark mode toggle */
.theme-toggle {
  width:38px; height:38px; border-radius:10px;
  background:var(--gray-100); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-700); font-size:.95rem;
  transition:background var(--dur), color var(--dur), transform var(--dur);
}
.theme-toggle:hover { background:var(--navy); color:#fff; transform:rotate(15deg); }
[data-theme="dark"] .theme-toggle { background:rgba(255,255,255,.08); color:var(--gold-light); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; border-radius:var(--r-sm);
  background:var(--gray-100);
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--navy); border-radius:2px;
  transition:transform var(--dur), opacity var(--dur);
}
[data-theme="dark"] .hamburger { background:rgba(255,255,255,.08); }
[data-theme="dark"] .hamburger span { background:var(--gold-light); }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile nav drawer */
.mobile-nav {
  display:flex;
  position:fixed; top:0; right:-100%; bottom:0;
  width:290px; z-index:1100;
  background:var(--bg-card);
  box-shadow:-5px 0 40px rgba(0,0,0,.25);
  flex-direction:column; padding:80px 24px 40px;
  gap:6px; overflow-y:auto;
  transition:right .4s var(--ease);
  pointer-events:none;
}
.mobile-nav.open { right:0; pointer-events:auto; }
.mobile-nav a {
  color:var(--txt); font-size:1rem; font-weight:600;
  padding:13px 18px; border-radius:var(--r-sm);
  border-right:3px solid transparent;
  transition:all var(--dur);
}
.mobile-nav a:hover {
  color:var(--navy); background:var(--gray-100);
  border-right-color:var(--gold);
  padding-right:24px;
}
[data-theme="dark"] .mobile-nav a:hover { color:var(--gold-light); background:rgba(255,255,255,.06); }
.mobile-nav-overlay {
  display:none; position:fixed; inset:0; z-index:1099;
  background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
}
.mobile-nav-overlay.show { display:block; }
.mobile-nav-close {
  position:absolute; top:20px; left:20px;
  width:36px; height:36px; border-radius:50%;
  background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:1rem;
  transition:background var(--dur);
}
.mobile-nav-close:hover { background:var(--gold); color:#fff; }

/* ===== LAYOUT HELPERS ===== */
.wrap { max-width:1220px; margin:0 auto; padding:0 20px; }
section {
  padding:90px 0;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}
.sec-header { text-align:center; margin-bottom:65px; }
.sec-badge {
  display:inline-block;
  background:rgba(201,168,76,.12);
  color:var(--gold-dark); border:1px solid rgba(201,168,76,.35);
  padding:5px 18px; border-radius:50px;
  font-size:.78rem; font-weight:700; letter-spacing:1px;
  margin-bottom:14px;
}
[data-theme="dark"] .sec-badge { color:var(--gold-light); background:rgba(201,168,76,.18); }
.sec-title {
  font-size:clamp(1.7rem,3.5vw,2.5rem);
  font-weight:800; color:var(--txt);
  line-height:1.3; margin-bottom:14px;
}
.sec-title span { color:var(--gold); }
.sec-desc {
  font-size:1rem; color:var(--txt-muted);
  max-width:560px; margin:0 auto; line-height:1.85;
}
.sec-divider {
  display:flex; justify-content:center; align-items:center;
  gap:8px; margin-top:18px;
}
.sd-line { height:3px; border-radius:3px; }
.sd-navy { width:18px; background:var(--navy); }
.sd-gold  { width:48px; background:var(--gold); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:9px; padding:13px 30px; border-radius:50px;
  font-weight:700; font-size:.95rem;
  transition:transform var(--dur), box-shadow var(--dur), background var(--dur);
  white-space:nowrap;
}
.btn-primary {
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff; box-shadow:var(--shadow-gold);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 35px rgba(201,168,76,.55); }
.btn-navy {
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  color:#fff; box-shadow:var(--shadow-md);
}
.btn-navy:hover { transform:translateY(-3px); box-shadow:0 10px 35px rgba(27,58,107,.4); }
.btn-outline {
  border:2px solid var(--gold); color:var(--gold); background:transparent;
}
.btn-outline:hover { background:var(--gold); color:#fff; transform:translateY(-3px); }
.btn-white {
  background:#fff; color:var(--navy); box-shadow:var(--shadow-md);
}
.btn-white:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }

/* ===== REVEAL ANIMATION ===== */
.reveal {
  opacity:0; transform:translateY(36px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.from-left  { transform:translateX(-36px); }
.reveal.from-right { transform:translateX(36px); }
.reveal.visible { opacity:1; transform:translate(0); }

/* ===== HERO — compact two-column ===== */
.hero {
  position:relative;
  min-height:85vh;           /* reduced from 100vh */
  display:flex; align-items:center;
  background:var(--navy-dark); overflow:hidden;
}
.hero-bg-img {
  position:absolute; inset:0;
  background-image:url('../images/hero-bg.jpg');
  background-size:cover; background-position:center;
  opacity:.12;
  animation:heroBgDrift 18s ease-in-out infinite alternate;
}
@keyframes heroBgDrift { from{transform:scale(1)} to{transform:scale(1.06)} }
.hero-gradient {
  position:absolute; inset:0;
  background:linear-gradient(130deg,
    rgba(9,22,52,.97) 0%,
    rgba(27,58,107,.88) 55%,
    rgba(13,33,71,.95) 100%);
}
.hero-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle {
  position:absolute; border-radius:50%;
  background:var(--gold); opacity:.3;
  animation:floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform:translateY(105vh); opacity:0; }
  8%   { opacity:.3; }
  92%  { opacity:.3; }
  100% { transform:translateY(-60px); opacity:0; }
}

/* Two-column inner */
.hero-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:48px; align-items:center;
  padding:80px 0 70px;
  width:100%;
}

/* ── Left col: text ── */
.hero-text-col {}
.hero-badge-wrap {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,168,76,.15);
  border:1px solid rgba(201,168,76,.4);
  color:var(--gold-light);
  padding:7px 18px; border-radius:50px;
  font-size:.8rem; font-weight:700;
  margin-bottom:22px;
  animation:fadeInUp .8s var(--ease) both;
}
.hero-badge-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--gold); animation:blink 1.5s infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.hero-text-col h1 {
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:900; color:#fff; line-height:1.2;
  margin-bottom:16px;
  animation:fadeInUp .9s var(--ease) .1s both;
}
.hero-text-col h1 .gold { color:var(--gold); }
.hero-text-col h1 .gold-line {
  position:relative; display:inline-block;
  padding-bottom:4px;
}
.hero-text-col h1 .gold-line::after {
  content:''; position:absolute;
  bottom:0; right:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:3px;
  animation:lineGrow 1s var(--ease) .7s both;
}
@keyframes lineGrow { from{transform:scaleX(0);transform-origin:right} to{transform:scaleX(1)} }

.hero-subtitle {
  font-size:clamp(.88rem,1.6vw,1rem);
  color:rgba(255,255,255,.78); line-height:1.85;
  margin-bottom:32px;
  animation:fadeInUp .9s var(--ease) .2s both;
}
.hero-btns {
  display:flex; gap:12px; flex-wrap:wrap;
  animation:fadeInUp .9s var(--ease) .3s both;
}
.btn-outline-white {
  border:2px solid rgba(255,255,255,.55); color:#fff;
  background:transparent; padding:13px 28px; border-radius:50px;
  font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; gap:9px;
  transition:all var(--dur); white-space:nowrap;
}
.btn-outline-white:hover {
  border-color:var(--gold); color:var(--gold-light);
  background:rgba(201,168,76,.1); transform:translateY(-3px);
}

/* ── Right col: stats + quick contact ── */
.hero-stats-col {
  display:flex; flex-direction:column; gap:18px;
  animation:fadeInUp 1s var(--ease) .25s both;
}
.hero-stats-card {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:28px 24px;
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center; gap:0;
  backdrop-filter:blur(8px);
}
.hsc-item { text-align:center; padding:8px 10px; }
.hsc-num {
  font-size:1.9rem; font-weight:900; color:var(--gold);
  line-height:1;
}
.hsc-lbl { font-size:.75rem; color:rgba(255,255,255,.65); margin-top:5px; }
.hsc-divider {
  width:1px; height:50px;
  background:rgba(255,255,255,.15); flex-shrink:0;
}

/* Quick contact card */
.hero-contact-card {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md); padding:20px 22px;
  backdrop-filter:blur(8px);
}
.hero-contact-card > p {
  color:rgba(255,255,255,.55); font-size:.78rem;
  font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; margin-bottom:12px;
}
.hcc-phone {
  display:flex; align-items:center; gap:10px;
  color:#fff; font-size:1.05rem; font-weight:800;
  margin-bottom:12px; letter-spacing:.3px;
}
.hcc-phone i { color:var(--gold); }
.hcc-wa {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:11px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  border-radius:10px; color:#fff; font-weight:700; font-size:.9rem;
  transition:transform var(--dur), box-shadow var(--dur);
}
.hcc-wa:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,211,102,.4); color:#fff; }
.hcc-wa i { font-size:1.1rem; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideRight { from{opacity:0;transform:translate(30px,-50%)} to{opacity:1;transform:translate(0,-50%)} }

/* Hero mobile */
@media(max-width:860px){
  .hero-inner {
    grid-template-columns:1fr;
    gap:32px; padding:70px 0 50px;
    text-align:center;
  }
  .hero-badge-wrap { justify-content:center; }
  .hero-btns { justify-content:center; }
  .hero-stats-card {
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  }
  .hcc-phone { justify-content:center; }
}
@media(max-width:540px){
  .hero { min-height:auto; }
  .hero-inner { padding:60px 0 40px; }
  .hero-text-col h1 { font-size:1.7rem; }
  .hero-stats-card {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    gap:2px;
  }
  .hsc-divider { display:none; }
  .hsc-item { border-bottom:1px solid rgba(255,255,255,.1); }
  .hero-btns { flex-direction:column; }
  .btn, .btn-outline-white { width:100%; justify-content:center; }
}

/* ===== FEATURES BAND ===== */
.features-band {
  background:linear-gradient(135deg,var(--navy-dark),var(--navy));
  padding:65px 0;
  overflow-x:hidden;
  width:100%;
}
.features-band-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.fb-card {
  text-align:center; padding:28px 18px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:transform var(--dur), background var(--dur), border-color var(--dur);
}
.fb-card:hover {
  transform:translateY(-6px);
  background:rgba(201,168,76,.15);
  border-color:rgba(201,168,76,.45);
}
.fb-icon {
  width:56px; height:56px; border-radius:14px; margin:0 auto 16px;
  background:rgba(201,168,76,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--gold);
  transition:background var(--dur), transform var(--dur);
}
.fb-card:hover .fb-icon { background:var(--gold); transform:rotate(6deg) scale(1.1); }
.fb-card:hover .fb-icon i { color:#fff; }
.fb-card h3 { font-size:1rem; font-weight:700; color:#fff; margin-bottom:8px; }
.fb-card p  { font-size:.83rem; color:rgba(255,255,255,.6); line-height:1.7; }

/* ===== ABOUT ===== */
.about-sec { background:var(--bg-alt); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-imgs { position:relative; height:500px; }
.ab-img-main {
  position:absolute; top:0; right:0; width:82%; height:380px;
  object-fit:cover; border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.ab-img-sub {
  position:absolute; bottom:0; left:0; width:52%; height:230px;
  object-fit:cover; border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  border:4px solid var(--bg);
}
.ab-badge {
  position:absolute; top:28px; left:4px; z-index:2;
  background:var(--navy); color:#fff;
  padding:16px 20px; border-radius:var(--r-md);
  box-shadow:var(--shadow-md); text-align:center;
}
.ab-badge .big { font-size:2rem; font-weight:900; color:var(--gold); line-height:1; }
.ab-badge small { font-size:.72rem; color:rgba(255,255,255,.8); display:block; }
.about-text p { color:var(--txt-muted); line-height:1.9; margin-bottom:18px; }
.about-feats {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px;
}
.af-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:var(--r-sm);
  background:var(--bg); border-right:3px solid var(--gold);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur), box-shadow var(--dur);
}
.af-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.af-item i { color:var(--gold); font-size:1.2rem; margin-top:2px; flex-shrink:0; }
.af-item h4 { font-size:.88rem; font-weight:700; color:var(--txt); margin-bottom:3px; }
.af-item p  { font-size:.78rem; color:var(--txt-muted); margin:0; }

/* ===== SERVICES ===== */
.services-sec { background:var(--bg); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.srv-card {
  background:var(--bg-card);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.srv-card:hover {
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(201,168,76,.4);
}
.srv-img-wrap { position:relative; overflow:hidden; }
.srv-img-wrap img { width:100%; height:220px; object-fit:cover; transition:transform .55s var(--ease); }
.srv-card:hover .srv-img-wrap img { transform:scale(1.07); }
.srv-tag {
  position:absolute; top:14px; right:14px;
  background:var(--gold); color:#fff;
  padding:4px 14px; border-radius:50px;
  font-size:.73rem; font-weight:700;
}
.srv-body { padding:26px; }
.srv-icon {
  width:48px; height:48px; border-radius:12px;
  background:var(--gray-100); margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur), transform var(--dur);
}
.srv-icon i { font-size:1.35rem; color:var(--navy); transition:color var(--dur); }
.srv-card:hover .srv-icon { background:var(--gold); transform:rotate(6deg); }
.srv-card:hover .srv-icon i { color:#fff; }
[data-theme="dark"] .srv-icon { background:rgba(255,255,255,.08); }
[data-theme="dark"] .srv-icon i { color:var(--gold-light); }
.srv-body h3 { font-size:1.05rem; font-weight:700; color:var(--txt); margin-bottom:10px; }
.srv-body p  { font-size:.86rem; color:var(--txt-muted); line-height:1.75; margin-bottom:20px; }
.srv-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  color:#fff; padding:10px 22px; border-radius:50px;
  font-size:.84rem; font-weight:700;
  transition:transform var(--dur), box-shadow var(--dur);
  cursor:pointer; border:none;
}
.srv-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(27,58,107,.35); }

/* ===== PRODUCTS ===== */
.products-sec { background:var(--bg-alt); }
.prod-tabs {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:10px; margin-bottom:46px;
}
.tab-btn {
  padding:10px 24px; border-radius:50px;
  border:2px solid var(--border);
  background:var(--bg-card); color:var(--txt);
  font-weight:600; font-size:.88rem;
  transition:all var(--dur); font-family:inherit;
}
.tab-btn.active, .tab-btn:hover {
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 18px rgba(27,58,107,.3);
}
.tab-btn.active { font-weight:800; }
.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.prod-group { display:contents; }
.prod-group.hidden { display:none; }
.prod-card {
  background:var(--bg-card); border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform var(--dur), box-shadow var(--dur);
}
.prod-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.prod-img-w { position:relative; overflow:hidden; }
.prod-img-w img { width:100%; height:175px; object-fit:cover; transition:transform .5s; }
.prod-card:hover .prod-img-w img { transform:scale(1.09); }
.prod-overlay {
  position:absolute; inset:0;
  background:rgba(27,58,107,.0);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur);
}
.prod-card:hover .prod-overlay { background:rgba(27,58,107,.6); }
.prod-view-btn {
  background:var(--gold); color:#fff;
  padding:9px 22px; border-radius:50px;
  font-size:.82rem; font-weight:700;
  opacity:0; transform:translateY(14px);
  transition:all var(--dur); border:none; font-family:inherit; cursor:pointer;
}
.prod-card:hover .prod-view-btn { opacity:1; transform:translateY(0); }
.prod-body { padding:16px; }
.prod-body h4 { font-size:.92rem; font-weight:700; color:var(--txt); margin-bottom:5px; }
.prod-body p  { font-size:.8rem; color:var(--txt-muted); }

/* ===== WHY US ===== */
.whyus-sec { background:var(--bg); }
.whyus-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.whyus-img-wrap { position:relative; border-radius:var(--r-lg); overflow:hidden; }
.whyus-img-wrap img { width:100%; height:480px; object-fit:cover; }
.whyus-img-badge {
  position:absolute; bottom:28px; right:28px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff; padding:18px 22px; border-radius:var(--r-md);
  text-align:center; box-shadow:var(--shadow-gold);
}
.whyus-img-badge .big { font-size:2rem; font-weight:900; line-height:1; display:block; }
.whyus-img-badge small { font-size:.75rem; opacity:.9; }
.whyus-list { display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.wu-item {
  display:flex; gap:18px; align-items:flex-start;
  padding:20px 22px; border-radius:var(--r-md);
  background:var(--bg-alt); border:1px solid var(--border);
  transition:border-color var(--dur), transform var(--dur), background var(--dur);
}
.wu-item:hover {
  border-color:rgba(201,168,76,.4);
  background:rgba(201,168,76,.05);
  transform:translateX(-6px);
}
.wu-icon {
  width:50px; height:50px; flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.wu-icon i { color:var(--gold); font-size:1.25rem; }
.wu-item h4 { font-size:.97rem; font-weight:700; color:var(--txt); margin-bottom:5px; }
.wu-item p  { font-size:.85rem; color:var(--txt-muted); line-height:1.7; margin:0; }

/* Stats grid */
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:60px;
}
.stat-card {
  text-align:center; padding:30px 16px;
  background:var(--bg-alt); border-radius:var(--r-md);
  border:1px solid var(--border);
  transition:transform var(--dur), box-shadow var(--dur);
}
.stat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.stat-num {
  font-size:2.4rem; font-weight:900; color:var(--gold); line-height:1;
}
.stat-lbl { font-size:.82rem; color:var(--txt-muted); margin-top:6px; }

/* ===== GALLERY ===== */
.gallery-sec { background:var(--bg-alt); }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
  gap:14px;
}
.gal-item { border-radius:var(--r-md); overflow:hidden; position:relative; cursor:pointer; }
.gal-item.wide { grid-column:span 2; }
.gal-item.tall { grid-row:span 2; }
.gal-item img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.gal-item:hover img { transform:scale(1.07); }
.gal-overlay {
  position:absolute; inset:0;
  background:rgba(27,58,107,0);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur);
}
.gal-item:hover .gal-overlay { background:rgba(27,58,107,.6); }
.gal-overlay i {
  color:var(--gold); font-size:2rem;
  opacity:0; transform:scale(.5);
  transition:all var(--dur);
}
.gal-item:hover .gal-overlay i { opacity:1; transform:scale(1); }

/* ===== TESTIMONIALS ===== */
.testimonials-sec {
  background:linear-gradient(135deg,var(--navy-dark),var(--navy));
  padding:90px 0;
}
.testimonials-sec .sec-title { color:#fff; }
.testimonials-sec .sec-desc { color:rgba(255,255,255,.65); }
.testimonials-sec .sec-badge { color:var(--gold-light); background:rgba(201,168,76,.2); }
.testi-slider { position:relative; overflow:hidden; }
.testi-track {
  display:flex; gap:24px;
  transition:transform .55s var(--ease);
}
.testi-card {
  flex-shrink:0;
  min-width:calc(33.33% - 16px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:34px 28px;
  position:relative;
}
.testi-card::before {
  content:'"'; position:absolute; top:18px; right:22px;
  font-size:5rem; color:var(--gold); opacity:.2;
  font-family:Georgia,serif; line-height:1;
}
.testi-stars { color:var(--gold); font-size:.85rem; margin-bottom:14px; }
.testi-text {
  color:rgba(255,255,255,.82); font-size:.93rem;
  line-height:1.85; margin-bottom:22px; font-style:italic;
}
.testi-author { display:flex; align-items:center; gap:14px; }
.testi-avatar {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:800; color:#fff; flex-shrink:0;
}
.testi-info h4 { color:#fff; font-size:.92rem; font-weight:700; }
.testi-info span { color:var(--gold-light); font-size:.78rem; }
.testi-controls {
  display:flex; justify-content:center; gap:10px; margin-top:34px;
}
.t-dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.25); cursor:pointer; border:none;
  transition:background var(--dur), transform var(--dur);
}
.t-dot.active { background:var(--gold); transform:scale(1.35); }
.testi-nav {
  display:flex; justify-content:center; gap:12px; margin-top:20px;
}
.testi-nav button {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:.95rem;
  transition:background var(--dur), transform var(--dur);
}
.testi-nav button:hover { background:var(--gold); transform:scale(1.1); border-color:var(--gold); }

/* ===== FAQ ===== */
.faq-sec { background:var(--bg); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.faq-item {
  background:var(--bg-card); border-radius:var(--r-md);
  border:1px solid var(--border); overflow:hidden;
  transition:border-color var(--dur), box-shadow var(--dur);
}
.faq-item.open { border-color:rgba(201,168,76,.45); box-shadow:var(--shadow-sm); }
.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:20px 22px; cursor:pointer;
  font-weight:700; font-size:.95rem; color:var(--txt);
  transition:color var(--dur);
  user-select:none;
}
.faq-item.open .faq-q { color:var(--navy); }
[data-theme="dark"] .faq-item.open .faq-q { color:var(--gold-light); }
.faq-icon {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:.85rem;
  transition:background var(--dur), transform var(--dur), color var(--dur);
}
.faq-item.open .faq-icon { background:var(--gold); color:#fff; transform:rotate(45deg); }
[data-theme="dark"] .faq-icon { background:rgba(255,255,255,.08); color:var(--gold-light); }
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease), padding var(--dur);
}
.faq-item.open .faq-a { max-height:500px; }
.faq-a-inner {
  padding:0 22px 20px;
  color:var(--txt-muted); font-size:.88rem; line-height:1.85;
}

/* ===== CONTACT ===== */
.contact-sec { background:var(--bg-alt); }
.contact-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:48px; align-items:start; }
.contact-info-box {
  background:linear-gradient(160deg,var(--navy-dark),var(--navy));
  border-radius:var(--r-lg); padding:38px; color:#fff;
  box-shadow:var(--shadow-md);
}
.contact-info-box h3 { font-size:1.4rem; font-weight:800; margin-bottom:8px; }
.contact-info-box p { color:rgba(255,255,255,.7); font-size:.88rem; line-height:1.8; margin-bottom:28px; }
.c-detail { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.c-detail-icon {
  width:42px; height:42px; flex-shrink:0;
  background:rgba(201,168,76,.2); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.c-detail-icon i { color:var(--gold); font-size:1rem; }
.c-detail h4 { color:var(--gold-light); font-size:.78rem; font-weight:600; margin-bottom:3px; }
.c-detail p, .c-detail a {
  color:rgba(255,255,255,.85); font-size:.88rem; margin:0; line-height:1.6;
}
.c-detail a:hover { color:var(--gold-light); }
.c-social { margin-top:28px; }
.c-social h4 { color:#fff; font-size:.88rem; font-weight:700; margin-bottom:14px; }
.social-row { display:flex; gap:10px; flex-wrap:wrap; }
.s-btn {
  width:42px; height:42px; border-radius:10px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.8); font-size:1rem;
  transition:background var(--dur), transform var(--dur), color var(--dur);
}
.s-btn:hover { background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-4px); }
.s-btn.fb:hover  { background:#1877F2; border-color:#1877F2; }
.s-btn.wa:hover  { background:#25D366; border-color:#25D366; }

/* Form */
.form-box {
  background:var(--bg-card); border-radius:var(--r-lg);
  padding:42px; box-shadow:var(--shadow-md);
  border:1px solid var(--border);
}
.form-box h3 { font-size:1.5rem; font-weight:800; color:var(--txt); margin-bottom:5px; }
.form-box > p { color:var(--txt-muted); font-size:.88rem; margin-bottom:28px; }
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg { margin-bottom:18px; }
.fg label {
  display:block; font-size:.85rem; font-weight:700;
  color:var(--txt); margin-bottom:7px;
}
.fg label .req { color:#e53e3e; }
.fg input, .fg select, .fg textarea {
  width:100%; padding:13px 16px;
  border:2px solid var(--border);
  border-radius:10px; font-size:.9rem;
  font-family:inherit; color:var(--txt);
  background:var(--bg); direction:rtl;
  transition:border-color var(--dur), box-shadow var(--dur), background var(--dur);
  outline:none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color:var(--navy); background:var(--bg-card);
  box-shadow:0 0 0 3px rgba(27,58,107,.1);
}
.fg input.error, .fg select.error { border-color:#e53e3e; }
.fg .err-msg { font-size:.78rem; color:#e53e3e; margin-top:5px; display:none; }
.fg .err-msg.show { display:block; }
.fg textarea { resize:vertical; min-height:120px; }
.btn-submit {
  width:100%; padding:15px; border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  color:#fff; font-size:1rem; font-weight:800;
  font-family:inherit; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform var(--dur), box-shadow var(--dur), background var(--dur);
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(27,58,107,.35); }
.btn-submit:disabled { opacity:.65; cursor:not-allowed; }
.btn-wa-direct {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:12px; padding:13px;
  border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff; font-size:.95rem; font-weight:700; font-family:inherit;
  text-decoration:none;
  transition:transform var(--dur), box-shadow var(--dur);
}
.btn-wa-direct:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,.4); color:#fff; }

/* Toast notification */
.toast {
  position:fixed; bottom:30px; right:30px; z-index:9000;
  padding:14px 22px; border-radius:12px;
  font-size:.9rem; font-weight:600; color:#fff;
  box-shadow:var(--shadow-lg);
  transform:translateY(80px); opacity:0;
  transition:transform .4s var(--ease), opacity .4s;
  display:flex; align-items:center; gap:10px;
  max-width:320px;
}
.toast.success { background:linear-gradient(135deg,#25D366,#128C7E); }
.toast.error   { background:linear-gradient(135deg,#e53e3e,#c53030); }
.toast.show    { transform:translateY(0); opacity:1; }

/* ===== FOOTER ===== */
.footer { background:var(--navy-dark); color:#fff; padding-top:70px; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:48px; padding-bottom:50px;
}
/* Logo wrap — white card منفصل عن خلفية الـ footer */
.ft-brand-logo-wrap {
  display:inline-flex;
  align-items:center; justify-content:center;
  background:#ffffff;
  border-radius:14px;
  padding:10px 14px;
  margin-bottom:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.ft-brand-logo-wrap img {
  height:62px; width:auto;
  display:block;
  border-radius:8px;
  object-fit:contain;
}
.ft-brand p { color:rgba(255,255,255,.65); font-size:.86rem; line-height:1.9; margin-bottom:22px; max-width:320px; }
.ft-social { display:flex; gap:10px; }
.ft-social a {
  width:38px; height:38px; border-radius:9px;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.75); font-size:.95rem;
  transition:background var(--dur), transform var(--dur), color var(--dur);
}
.ft-social a:hover { background:var(--gold); color:#fff; transform:translateY(-4px); }
.ft-col h4 {
  font-size:.95rem; font-weight:700; color:var(--gold-light);
  margin-bottom:20px; padding-bottom:10px;
  border-bottom:2px solid rgba(201,168,76,.25);
}
.ft-links li { margin-bottom:9px; }
.ft-links a {
  color:rgba(255,255,255,.6); font-size:.85rem;
  display:inline-flex; align-items:center; gap:7px;
  transition:color var(--dur), padding var(--dur);
}
.ft-links a:hover { color:var(--gold-light); padding-right:6px; }
.ft-links a i { font-size:.65rem; color:var(--gold); }
.ft-contact { display:flex; flex-direction:column; gap:14px; }
.ft-c-item { display:flex; gap:10px; align-items:flex-start; }
.ft-c-item i { color:var(--gold); font-size:.9rem; margin-top:3px; flex-shrink:0; }
.ft-c-item span { color:rgba(255,255,255,.65); font-size:.84rem; line-height:1.65; }
.ft-c-item a { color:rgba(255,255,255,.65); font-size:.84rem; }
.ft-c-item a:hover { color:var(--gold-light); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom p { color:rgba(255,255,255,.45); font-size:.8rem; }
.footer-bottom a { color:var(--gold-light); }

/* ===== FLOATING ELEMENTS ===== */
.wa-float {
  position:fixed; bottom:28px; left:28px; z-index:800;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; text-decoration:none;
  box-shadow:0 6px 25px rgba(37,211,102,.55);
  animation:waPulse 2.5s infinite;
  transition:transform var(--dur);
}
.wa-float:hover { transform:scale(1.12); color:#fff; }
@keyframes waPulse {
  0%,100%{ box-shadow:0 6px 25px rgba(37,211,102,.55); }
  50%    { box-shadow:0 6px 38px rgba(37,211,102,.85), 0 0 0 12px rgba(37,211,102,.12); }
}
.back-top {
  position:fixed; bottom:28px; right:28px; z-index:800;
  width:48px; height:48px; border-radius:12px;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur), visibility var(--dur), transform var(--dur), background var(--dur);
}
.back-top.show { opacity:1; visibility:visible; }
.back-top:hover { background:var(--gold); transform:translateY(-4px); }

/* ===== MODAL ===== */
.modal-wrap {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden;
  transition:opacity var(--dur), visibility var(--dur);
}
.modal-wrap.open { opacity:1; visibility:visible; }
.modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.72); cursor:pointer; }
.modal-box {
  background:var(--bg-card); border-radius:var(--r-lg);
  padding:38px; max-width:540px; width:100%;
  position:relative; z-index:1;
  transform:scale(.88) translateY(20px);
  transition:transform .4s var(--ease);
  max-height:92vh; overflow-y:auto;
}
.modal-wrap.open .modal-box { transform:scale(1) translateY(0); }
.modal-x {
  position:absolute; top:14px; left:14px;
  width:34px; height:34px; border-radius:50%;
  background:var(--gray-100); color:var(--navy); font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur), color var(--dur);
}
.modal-x:hover { background:var(--gold); color:#fff; }
.modal-img { width:100%; border-radius:var(--r-md); height:230px; object-fit:cover; margin-bottom:20px; }
.modal-box h3 { font-size:1.25rem; font-weight:800; color:var(--txt); margin-bottom:10px; }
.modal-box p  { color:var(--txt-muted); font-size:.9rem; line-height:1.8; margin-bottom:18px; }
.modal-specs { padding:16px 0; border-top:1px solid var(--border); }
.modal-spec {
  display:flex; align-items:center; gap:10px;
  color:var(--txt); font-size:.86rem; margin-bottom:8px;
}
.modal-spec i { color:var(--gold); }
.modal-actions { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.modal-actions a, .modal-actions button { flex:1; min-width:140px; }

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .prod-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:34px; }
  .hero-float-card { display:none; }
}
@media(max-width:900px){
  .services-grid { grid-template-columns:1fr 1fr; }
  .about-grid,.whyus-grid,.contact-grid { grid-template-columns:1fr; gap:38px; }
  .features-band-grid { grid-template-columns:repeat(2,1fr); }
  .faq-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gal-item.wide { grid-column:span 1; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .testi-card { min-width:calc(50% - 12px); }
}
@media(max-width:768px){
  .topbar { display:none; }
  .nav-menu { display:none; }
  .nav-actions { display:flex; }
  .theme-toggle { display:flex; }
  .hamburger { display:flex; }
  section { padding:65px 0; }
  .about-imgs { height:340px; }
  .ab-img-main { height:270px; }
  .ab-img-sub { height:170px; }
  .prod-grid { grid-template-columns:repeat(2,1fr); }
  .form-row2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:26px; }
  .testi-card { min-width:calc(88% - 12px); }
  .hero h1 { font-size:2rem; }
  .hero-stats { gap:22px; flex-wrap:wrap; }
  .hero-btns { flex-direction:column; align-items:stretch; }
  .btn { width:100%; box-sizing:border-box; }
  .about-feats { grid-template-columns:1fr; }
  .hero-content { padding:100px 0 60px; }
  .testi-slider { overflow:hidden; width:100%; }
  .gallery-grid { gap:10px; }
  .hero-badge-wrap { font-size:.75rem; padding:6px 14px; }
  /* footer logo wrap في الجوال */
  .ft-brand-logo-wrap { display:inline-flex; width:auto; }
}
@media(max-width:480px){
  .services-grid,.prod-grid { grid-template-columns:1fr; }
  .features-band-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  /* Shrink logo slightly on small phones but keep visible */
  .nav-logo-img { height:52px; width:52px; }
  .nav-brand-text .en { display:none; }
  .nav-brand-text .ar { font-size:.75rem; }
  /* About images — تجنب overflow */
  .about-imgs { overflow:hidden; position:relative; height:260px; }
  .ab-img-main { width:100%; position:relative; top:auto; right:auto; height:220px; border-radius:var(--r-md); }
  .ab-img-sub  { display:none; }
  .ab-badge    { top:10px; left:10px; padding:10px 14px; }
  .ab-badge .big { font-size:1.5rem; }
  /* hero stats */
  .hero-stats .h-stat .num { font-size:1.6rem; }
  .hero-stats .h-stat .lbl { font-size:.75rem; }
  .hero-badge-wrap { display:none; }
  /* gallery */
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .gal-item.tall { grid-row:span 1; }
  /* contact */
  .contact-info-box { padding:24px 18px; }
  .form-box { padding:24px 18px; }
  /* footer */
  .footer-grid { gap:20px; }
  .ft-brand { text-align:center; }
  .ft-brand-logo-wrap { margin:0 auto 16px; }
  .ft-social { justify-content:center; }
  .ft-brand p { margin-left:auto; margin-right:auto; }
}

/* ===== MOBILE NAV ===== */
@media(min-width:769px){
  .mobile-nav { display:none !important; }
  .mobile-nav-overlay { display:none !important; }
  .hamburger { display:none !important; }
}
.mobile-nav a {
  display:flex; align-items:center;
  color:var(--txt); font-size:1rem; font-weight:600;
  padding:13px 18px; border-radius:var(--r-sm);
  border-right:3px solid transparent;
  transition:all var(--dur);
}
.mobile-nav a:hover,
.mobile-nav a:active {
  color:var(--navy);
  background:var(--gray-100);
  border-right-color:var(--gold);
  padding-right:24px;
}
[data-theme="dark"] .mobile-nav a:hover { color:var(--gold-light); background:rgba(255,255,255,.06); }
.mobile-nav .divider { height:1px; background:var(--border); margin:8px 0; }

/* ===== GLOBAL OVERFLOW GUARD ===== */
*,*::before,*::after { box-sizing:border-box; }
section, .footer, .features-band, .navbar, .topbar {
  max-width:100%;
  overflow-x:clip;
}
.wrap { width:100%; max-width:1220px; margin:0 auto; padding:0 20px; box-sizing:border-box; }