:root{
  --navy:#024976;
  --navy-dark:#01324f;
  --blue:#0080B8;
  --gray:#676F74;
  --gray-light:#B3B3B1;
  --bg:#F7F6F4;
  --bg-alt:#EFEDEA;
  --ink:#152731;
  --white:#ffffff;
  --radius:14px;
  --maxw:1180px;
  --shadow: 0 10px 30px rgba(2,73,118,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Cairo', sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
}
html[dir="ltr"] body{ letter-spacing:.1px; }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:96px 0;}
h1,h2,h3{font-weight:800; color:var(--navy-dark);}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.5px;
  color:var(--blue); text-transform:uppercase;
  margin-bottom:14px;
}
html[dir="rtl"] .eyebrow{ letter-spacing:0; }
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--blue); display:inline-block;
}
.section-head{max-width:680px; margin-bottom:56px;}
.section-head p{color:var(--gray); font-size:16.5px; margin-top:14px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:10px; font-weight:700; font-size:15px;
  cursor:pointer; border:none; transition:.25s ease; white-space:nowrap;
}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 12px 24px rgba(0,128,184,.28);}
.btn-primary:hover{background:#02729f; transform:translateY(-2px);}
.btn-outline{background:transparent; border:1.5px solid rgba(255,255,255,.5); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-navy{background:transparent; border:1.5px solid var(--navy); color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:#fff;}

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; inset-inline:0; z-index:100;
  background:rgba(247,246,244,0.88); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(2,73,118,0.08);
  transition:.3s ease;
}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo-mark{height:66px;}
nav.links{display:flex; align-items:center; gap:36px;}
.nav-links{display:flex; gap:32px; font-weight:600; font-size:15px; color:var(--navy-dark);}
.nav-links a{position:relative; padding:4px 0;}
.nav-links a::after{
  content:""; position:absolute; bottom:-2px; inset-inline:0; height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:center; transition:.25s ease;
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-actions{display:flex; align-items:center; gap:14px;}
.lang-switch{
  display:flex; border:1.5px solid var(--navy); border-radius:8px; overflow:hidden; font-size:13px; font-weight:700;
}
.lang-switch button{
  padding:8px 14px; background:transparent; border:none; cursor:pointer; color:var(--navy); font-family:inherit;
}
.lang-switch button.active{background:var(--navy); color:#fff;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:26px; height:2px; background:var(--navy-dark); border-radius:2px;}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:120px;
  background:
    linear-gradient(100deg, rgba(1,29,48,0.92) 0%, rgba(2,50,79,0.82) 42%, rgba(2,73,118,0.42) 68%, rgba(2,73,118,0.15) 100%),
    url('../images/hero.jpg') center 30%/cover no-repeat;
}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:0 28px; width:100%;}
.hero-content{max-width:640px; color:#fff;}
.hero .eyebrow{color:#8fd3ee;}
.hero .eyebrow::before{background:#8fd3ee;}
.hero h1{
  font-size:clamp(34px,5vw,54px); line-height:1.22; color:#fff; margin-bottom:22px;
}
.hero h1 span{color:#8fd3ee;}
.hero p.lead{font-size:18px; color:#dfe9ef; max-width:540px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
.hero-stats{
  display:flex; gap:0; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.18); padding-top:28px;
}
.hero-stats .stat{padding-inline-end:40px; margin-inline-end:40px; border-inline-end:1px solid rgba(255,255,255,.18);}
.hero-stats .stat:last-child{border:none;}
.hero-stats .num{font-size:30px; font-weight:800; color:#fff;}
.hero-stats .lbl{font-size:13px; color:#b9cdd8; margin-top:4px;}
.scroll-cue{
  position:absolute; bottom:34px; inset-inline-start:50%; transform:translateX(-50%);
  color:#cfe3ec; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:.8;
}
html[dir="rtl"] .scroll-cue{transform:translateX(50%);}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(#8fd3ee,transparent); animation:scrolldown 1.8s infinite;}
@keyframes scrolldown{0%{opacity:0; transform:translateY(-6px);}50%{opacity:1;}100%{opacity:0; transform:translateY(12px);}}

/* ---------- ABOUT ---------- */
.about{background:var(--white);}
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.about-copy p{color:var(--gray); font-size:16.5px; margin-bottom:18px;}
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px;}
.pillar{
  background:var(--bg); border-radius:var(--radius); padding:22px; border:1px solid rgba(2,73,118,.07);
}
.pillar .icon{width:38px; height:38px; margin-bottom:12px; color:var(--blue);}
.pillar h4{font-size:15.5px; color:var(--navy-dark); margin-bottom:4px;}
.pillar p{font-size:13.5px; color:var(--gray); margin:0;}
.about-visual{
  position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  background:var(--navy);
  aspect-ratio: 4/5;
}
.about-visual img{width:100%; height:100%; object-fit:cover; opacity:.9;}
.about-visual .badge{
  position:absolute; bottom:22px; inset-inline:22px; background:rgba(1,29,48,.82); backdrop-filter:blur(6px);
  border-radius:12px; padding:18px 20px; color:#fff;
}
.about-visual .badge .n{font-size:26px; font-weight:800; color:#8fd3ee;}
.about-visual .badge .t{font-size:13px; color:#cfe3ec; margin-top:2px;}

/* ---------- SERVICES ---------- */
.services{background:var(--bg-alt);}
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.service-card{
  background:var(--white); border-radius:var(--radius); padding:28px 24px;
  border:1px solid rgba(2,73,118,.06); transition:.3s ease; position:relative; overflow:hidden;
}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent;}
.service-card .num{
  position:absolute; top:14px; inset-inline-end:18px; font-size:34px; font-weight:800;
  color:rgba(2,73,118,0.06);
}
.service-card .icon-wrap{
  width:56px; height:56px; border-radius:14px; background:linear-gradient(145deg,var(--navy),var(--blue));
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.service-card .icon-wrap svg{width:28px; height:28px; stroke:#fff; fill:none;}
.service-card h3{font-size:16.5px; margin-bottom:8px; color:var(--navy-dark);}
.service-card p{font-size:13.5px; color:var(--gray); margin:0;}

/* ---------- WHY US ---------- */
.why{background:var(--navy-dark); color:#fff; position:relative;}
.why::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 15% 20%, rgba(0,128,184,.25), transparent 60%);
}
.why .wrap{position:relative;}
.why .section-head h2, .why .section-head .eyebrow{color:#fff;}
.why .section-head .eyebrow{color:#8fd3ee;}
.why .section-head .eyebrow::before{background:#8fd3ee;}
.why .section-head p{color:#b9cdd8;}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.why-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  padding:26px 22px;
}
.why-card .icon-wrap{
  width:50px; height:50px; border-radius:12px; background:rgba(143,211,238,.14);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.why-card .icon-wrap svg{width:26px; height:26px; stroke:#8fd3ee; fill:none;}
.why-card h4{font-size:16px; margin-bottom:8px; color:#fff;}
.why-card p{font-size:13.5px; color:#b9cdd8; margin:0;}

/* ---------- CONTACT ---------- */
.contact{background:var(--white);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.contact-card{
  background:var(--bg); border-radius:18px; padding:34px; border:1px solid rgba(2,73,118,.07);
}
.contact-row{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(2,73,118,.08);}
.contact-row:last-child{border:none;}
.contact-row .icon-wrap{
  width:44px; height:44px; min-width:44px; border-radius:10px; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.contact-row .icon-wrap svg{width:20px; height:20px; stroke:#fff; fill:none;}
.contact-row .label{font-size:12.5px; color:var(--gray); text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px;}
.contact-row .value{font-size:15.5px; font-weight:700; color:var(--navy-dark);}
.contact-row .value small{display:block; font-weight:500; font-size:13px; color:var(--gray); margin-top:2px;}
.contact-form{
  background:var(--navy); border-radius:18px; padding:34px; color:#fff;
}
.contact-form h3{color:#fff; font-size:20px; margin-bottom:6px;}
.contact-form p{color:#bcd6e4; font-size:14px; margin-bottom:24px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.contact-form input, .contact-form textarea{
  width:100%; padding:13px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:#fff; font-family:inherit; font-size:14px;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#a9c4d3;}
.contact-form textarea{resize:vertical; min-height:100px; margin-bottom:18px;}
.contact-form .btn-primary{width:100%; justify-content:center;}
.note{font-size:12px; color:#9fc0d1; margin-top:14px; text-align:center;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-dark); color:#cfe3ec; padding:60px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-logo{height:56px; margin-bottom:16px;}
.footer-grid p{font-size:14px; color:#9fbecb; max-width:320px;}
.footer-col h5{color:#fff; font-size:14.5px; margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px; font-size:14px;}
.footer-col ul li a:hover{color:#8fd3ee;}
.footer-bottom{padding-top:22px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#7fa2b3; flex-wrap:wrap; gap:10px;}

/* reveal animation */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

html[data-lang="ar"] [data-lang="en"]{display:none !important;}
html[data-lang="en"] [data-lang="ar"]{display:none !important;}

@media (max-width: 980px){
  .about-grid, .contact-grid{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 720px){
  .nav-links, .nav-actions .lang-switch{display:none;}
  .burger{display:flex;}
  .service-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .hero{padding-top:110px;}
  .hero-stats{gap:0;}
  .hero-stats .stat{padding-inline-end:24px; margin-inline-end:24px;}
}
.mobile-menu{
  position:fixed; inset:0; background:var(--navy-dark); z-index:150; display:flex; flex-direction:column;
  padding:28px; transform:translateY(-100%); transition:.35s ease;
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu .close-btn{align-self:flex-end; background:none; border:none; color:#fff; font-size:28px; cursor:pointer;}
.mobile-menu ul{margin-top:40px; display:flex; flex-direction:column; gap:26px;}
.mobile-menu ul a{color:#fff; font-size:22px; font-weight:700;}
.mobile-menu .lang-switch{margin-top:40px; align-self:flex-start; border-color:#fff;}
.mobile-menu .lang-switch button{color:#fff;}
.mobile-menu .lang-switch button.active{background:#fff; color:var(--navy);}