@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600&family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');

:root {
  --navy: #0D1B2A;
  --navy-mid: #162032;
  --navy-light: #1E2F45;
  --orange: #F5A623;
  --orange-dark: #D4891A;
  --orange-glow: rgba(245,166,35,0.15);
  --white: #FFFFFF;
  --offwhite: #F7F5F1;
  --gray: #8A9BB0;
  --gray-light: #C5D0DC;
  --border: #E2E8F0;
  --text: #2D3B4E;
  --text-light: #5A6B80;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Barlow',sans-serif; background:var(--white); color:var(--text); overflow-x:hidden; }

/* ── TOPBAR ── */
.topbar { background:#060E18; padding:8px 0; border-bottom:1px solid rgba(245,166,35,0.1); }
.topbar-inner { max-width:1320px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.topbar-left, .topbar-right { display:flex; gap:20px; align-items:center; font-size:12.5px; color:var(--gray); }
.topbar-left span, .topbar-right span { display:flex; align-items:center; gap:6px; }
.topbar a { color:var(--orange); text-decoration:none; transition:opacity .2s; }
.topbar a:hover { opacity:.8; }

/* ── NAVBAR ── */
nav { background:var(--white); position:sticky; top:0; z-index:200; box-shadow:0 1px 0 var(--border), 0 4px 24px rgba(13,27,42,.08); }
.nav-inner { max-width:1320px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:74px; gap:32px; }
.logo { display:flex; align-items:center; gap:13px; text-decoration:none; flex-shrink:0; }
.logo-icon { width:48px; height:48px; background:var(--navy); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.logo-text { line-height:1.1; }
.logo-en { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:18px; color:var(--navy); text-transform:uppercase; letter-spacing:.5px; }
.logo-en em { color:var(--orange); font-style:normal; }
.logo-sub { font-size:10.5px; color:var(--gray); letter-spacing:.5px; margin-top:1px; font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; }
.nav-links { display:flex; list-style:none; gap:4px; align-items:center; }
.nav-links a { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text); text-decoration:none; padding:8px 14px; border-radius:4px; transition:color .2s, background .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--orange); background:var(--orange-glow); }
.nav-links .nav-cta { background:var(--orange); color:var(--navy) !important; padding:9px 20px; margin-left:8px; }
.nav-links .nav-cta:hover { background:var(--orange-dark); }

/* ── PAGE HEADER ── */
.page-header { background:var(--navy); padding:72px 0 56px; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.025) 39px,rgba(255,255,255,.025) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.025) 39px,rgba(255,255,255,.025) 40px); }
.page-header::after { content:''; position:absolute; right:-80px; top:-80px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, var(--orange-glow) 0%, transparent 70%); }
.page-header-inner { max-width:1320px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray); margin-bottom:16px; }
.breadcrumb a { color:var(--orange); text-decoration:none; }
.breadcrumb span { color:var(--gray-light); }
.page-header h1 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(40px,6vw,64px); text-transform:uppercase; color:var(--white); line-height:1; }
.page-header h1 em { color:var(--orange); font-style:normal; }
.page-header-sub { font-family:'Barlow Condensed',sans-serif; font-size:16px; letter-spacing:2px; text-transform:uppercase; color:var(--gray); margin-top:10px; }

/* ── SECTION UTILITIES ── */
.section { padding:88px 0; }
.section-alt { background:var(--offwhite); }
.section-dark { background:var(--navy); }
.container { max-width:1320px; margin:0 auto; padding:0 40px; }
.section-tag { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }
.section-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(32px,4vw,50px); text-transform:uppercase; line-height:1.02; color:var(--navy); margin-bottom:14px; }
.section-title em { color:var(--orange); font-style:normal; }
.section-title.light { color:var(--white); }
.section-desc { font-size:15.5px; line-height:1.72; color:var(--text-light); max-width:580px; }
.section-desc.light { color:rgba(255,255,255,.55); }
.text-center { text-align:center; }
.text-center .section-desc { margin:0 auto; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; border-radius:4px; transition:all .2s; cursor:pointer; border:none; }
.btn-primary { background:var(--orange); color:var(--navy); padding:13px 28px; }
.btn-primary:hover { background:var(--orange-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(245,166,35,.35); }
.btn-outline { border:1.5px solid var(--border); color:var(--text); padding:12px 28px; background:transparent; }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }
.btn-outline-light { border:1.5px solid rgba(255,255,255,.2); color:var(--white); padding:12px 28px; background:transparent; }
.btn-outline-light:hover { border-color:var(--orange); color:var(--orange); }

/* ── FOOTER ── */
footer { background:#060E18; color:rgba(255,255,255,.4); padding:64px 0 0; }
.footer-grid { max-width:1320px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:2.2fr 1fr 1fr 1.1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-brand-desc { font-size:14px; line-height:1.75; margin:16px 0 24px; color:rgba(255,255,255,.4); }
.footer-social { display:flex; gap:8px; }
.social-btn { width:34px; height:34px; background:rgba(255,255,255,.06); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; transition:background .2s; text-decoration:none; }
.social-btn:hover { background:var(--orange); }
.footer-col-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--white); margin-bottom:20px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:rgba(255,255,255,.4); text-decoration:none; font-size:14px; transition:color .2s; }
.footer-links a:hover { color:var(--orange); }
.footer-contact-item { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:13.5px; line-height:1.5; }
.footer-contact-item a { color:rgba(255,255,255,.4); text-decoration:none; }
.footer-contact-item a:hover { color:var(--orange); }
.footer-bottom { max-width:1320px; margin:0 auto; padding:20px 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { color:rgba(255,255,255,.3); text-decoration:none; font-size:13px; }
.footer-bottom-links a:hover { color:var(--orange); }

/* ── FLOATING WA ── */
.float-wa { position:fixed; bottom:28px; right:28px; z-index:999; width:54px; height:54px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 4px 20px rgba(37,211,102,.4); cursor:pointer; transition:transform .2s; text-decoration:none; }
.float-wa:hover { transform:scale(1.1); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-up { animation:fadeUp .6s ease both; }
.fade-up-d1 { animation-delay:.1s; }
.fade-up-d2 { animation-delay:.2s; }
.fade-up-d3 { animation-delay:.3s; }
.fade-up-d4 { animation-delay:.4s; }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .nav-links { gap:0; }
  .nav-links a { padding:8px 10px; font-size:13px; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .topbar-left { display:none; }
  .container { padding:0 20px; }
  .section { padding:60px 0; }
  .page-header { padding:52px 0 40px; }
  .page-header-inner { padding:0 20px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; padding:0 20px 40px; }
  .footer-bottom { padding:20px; flex-direction:column; text-align:center; }
  .topbar-inner { padding:0 20px; }
  .nav-inner { padding:0 20px; }
}