:root{
  --primary:#0e2e3a;
  --secondary:#153f52;
  --accent:#17a05d;
  --bg:#f6f9fb;
  --card:#ffffff;
  --soft:#e9f4ee;
  --shadow:0 10px 30px rgba(2,30,43,.15);
  --radius:18px;
  --text:#0b1b22;
}
*,*:before,*:after{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; color:var(--text); background:var(--bg)}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
.container{width:min(1200px,92%); margin:0 auto}

/* Header */
header{position:sticky; top:0; z-index:1000; background:rgba(14,46,58,.92); backdrop-filter:saturate(140%) blur(6px); box-shadow:0 8px 18px rgba(0,0,0,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.8rem; color:#fff}
.brand img{width:56px; height:auto}
.brand .title{display:flex; flex-direction:column; font-weight:700; letter-spacing:.3px}
.brand .title small{font-weight:500; opacity:.85}
.menu{display:flex; gap:1.2rem}
.menu a{color:#e8f4fb; font-weight:600; font-size:.98rem; padding:.5rem .6rem; border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.12)}
.hamburger{display:none; background:transparent; border:none; color:#ffffff; font-size:1.6rem; line-height:1; padding:.35rem .5rem; border-radius:10px; cursor:pointer}
.hamburger:focus{outline:2px solid rgba(255,255,255,.5)}

@media (max-width: 900px){
  .hamburger{display:block}
  .menu{
    position:absolute; top:58px; right:4%; left:4%;
    background:rgba(14,46,58,.98);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    padding:.6rem;
    display:none; flex-direction:column; gap:.2rem;
    box-shadow:0 14px 30px rgba(0,0,0,.25);
    transform: translateX(110%); opacity:0; transition: transform .28s ease, opacity .28s ease; z-index:1001;
  }
  .menu.open{ display:flex; transform:translateX(0); opacity:1 }
}
.nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:900}
.nav-overlay.show{opacity:1; pointer-events:auto}

/* Hero slider */
.hero{position:relative; height:70vh; min-height:520px; overflow:hidden; background:#0b2530}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease-in-out}
.slide.active{opacity:1}
.slide::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.35))}
.slide img{width:100%; height:100%; object-fit:cover; filter:saturate(110%) contrast(105%)}
.hero-copy{position:absolute; inset:0; display:grid; place-items:center; text-align:left; color:#fff; padding:clamp(16px,4vw,40px)}
.hero-card{max-width:880px; background:rgba(14,46,58,.6); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:clamp(16px,3vw,28px); box-shadow:var(--shadow)}
.kicker{display:inline-block; padding:.35rem .7rem; border-radius:999px; background:rgba(255,255,255,.18); color:#d7f7e6; font-size:.85rem; letter-spacing:.6px; margin-bottom:.6rem}
.headline{font-size:clamp(1.8rem,3.4vw,3rem); margin:.2rem 0 8px; line-height:1.15; font-weight:800}
.sub{opacity:.95; max-width:70ch}
.cta-row{margin-top:12px; display:flex; gap:.75rem; flex-wrap:wrap}
.btn{background:var(--accent); color:#fff; border:none; padding:.8rem 1.1rem; border-radius:12px; font-weight:700; box-shadow:var(--shadow); cursor:pointer}
.btn.alt{background:transparent; border:2px solid var(--accent); color:var(--accent)}
.dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3}
.dots button{width:10px; height:10px; border-radius:50%; border:none; background:#d7e5ec; opacity:.75; cursor:pointer}
.dots button.active{background:var(--accent); opacity:1}

section{padding:clamp(48px,8vw,84px) 0}
.section-title{text-align:center; margin-bottom:30px}
.eyebrow{color:var(--accent); font-weight:800; letter-spacing:.7px; text-transform:uppercase; font-size:.8rem}
h1,h2,h3,h4{color:var(--primary)}

/* Services grid 3x3 with uniform cards */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
@media (max-width:900px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.services{grid-template-columns:1fr}}
.card{background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; height:100%}
.card h3{margin:.2rem 0}
.card p{margin:0; color:#3a5867; flex:1}
.svc-title{display:flex; align-items:center; gap:10px; margin:.2rem 0}
.svc-title svg{width:20px; height:20px; fill:var(--accent)}

/* About grid */
.container.about{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:start}
@media (max-width:980px){ .container.about{grid-template-columns:1fr} }
.about .photo{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); align-self:flex-start}
.photo-elevated{ margin-top:-40px }
@media (max-width:980px){ .photo-elevated{ margin-top:0 } }
.key-services-card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-top:14px}
.key-services-list{display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:8px 14px; list-style:none; padding:0; margin:0}
.key-services-list li{display:flex; align-items:center; gap:8px; color:#3a5867; font-weight:500}
.key-services-list li svg{width:18px; height:18px; fill:var(--accent)}
.heading-icon{display:flex; align-items:center; gap:10px; margin:0 0 8px 0}
.heading-icon svg{width:20px; height:20px}

/* Pillars spanning both columns */
.container.about > .pillars{grid-column:1 / -1; margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pillar{background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; height:100%; position:relative}
.pillar h4{display:flex; align-items:center; gap:10px; margin:0 0 8px 0}
.pillar h4 svg{width:20px; height:20px}
@media (max-width:980px){ .container.about > .pillars{grid-template-columns:1fr} }

/* Contact */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start}
form{background:var(--card); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow)}
label{display:block; font-weight:700; margin:.6rem 0 .25rem}
input, textarea{width:100%; padding:.8rem; border-radius:12px; border:1px solid #c9d5dc; outline:none}
textarea{min-height:120px}
.info-box{background:var(--secondary); color:#e9f7ff; padding:18px; border-radius:var(--radius); box-shadow:var(--shadow)}
.info-box h3{color:#ffffff}
.info-row{display:flex; gap:10px; margin:.5rem 0}
.info-row b{min-width:110px}
.map{border:0; width:100%; height:320px; border-radius:14px}

/* Footer */
footer{background:var(--primary); color:#cfe1ec; padding:22px 0}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* Floating buttons */
.whatsapp-float{ position:fixed; right:16px; bottom:16px; z-index:99; background:#25D366; color:#fff; border-radius:999px; padding:12px 16px; display:flex; align-items:center; gap:8px; box-shadow:0 10px 24px rgba(0,0,0,.2) }
.whatsapp-float svg{width:22px; height:22px; fill:#fff}
.call-float{ right:16px; bottom:80px; background:#0e2e3a }

/* RTL visibility */
html[lang='ar'] .lang-en{display:none}
html:not([lang='ar']) .lang-ar{display:none}
.rtl *{direction:rtl}