/* ═══ SAFETY: Ensure content always visible ═══ */
body { opacity: 1 !important; visibility: visible !important; }
/* M-K Daar Theme — Main Stylesheet v1.0 */


/* ═══════════════════════════════════════
   RESET + ROOT
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* :root colors injected by customizer */
html{direction:rtl;scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;color:var(--fg);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.stagger-1{transition-delay:.1s}
.reveal.stagger-2{transition-delay:.2s}
.reveal.stagger-3{transition-delay:.3s}
.reveal.stagger-4{transition-delay:.4s}
.reveal.stagger-5{transition-delay:.5s}
.reveal.stagger-6{transition-delay:.6s}
.reveal.stagger-7{transition-delay:.7s}
.reveal.stagger-8{transition-delay:.8s}
.reveal.stagger-9{transition-delay:.9s}

.reveal-left{
  opacity:0;transform:translateX(50px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal-left.visible{opacity:1;transform:translateX(0)}

.reveal-right{
  opacity:0;transform:translateX(-50px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal-right.visible{opacity:1;transform:translateX(0)}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right{opacity:1!important;transform:none!important}
}

/* SAFETY: if JS disabled or slow, show content after 1s */
@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal-left,.reveal-right{opacity:1!important;transform:none!important}
}

/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(-40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.stagger-1{transition-delay:.1s}
.stagger-2{transition-delay:.18s}
.stagger-3{transition-delay:.26s}
.stagger-4{transition-delay:.34s}
.stagger-5{transition-delay:.42s}
.stagger-6{transition-delay:.5s}
.stagger-7{transition-delay:.58s}
.stagger-8{transition-delay:.66s}
.stagger-9{transition-delay:.74s}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}

/* ═══════════════════════════════════════
   TOP BAR
═══════════════════════════════════════ */
.topbar{background:rgba(26,37,53,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:12px;position:relative;z-index:101}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem;height:36px;display:flex;align-items:center;justify-content:space-between}
.topbar-social{display:flex;gap:14px;align-items:center}
.topbar-social a{color:rgba(255,255,255,.65);font-size:12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:.2s}
.topbar-social a:hover{color:var(--teal);background:rgba(255,255,255,.08)}
.topbar-phone{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-size:12px}
.topbar-phone .label{display:none}
@media(min-width:640px){.topbar-phone .label{display:inline}}
.topbar-phone .num{font-weight:700;direction:ltr;letter-spacing:.4px}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.header{position:sticky;top:0;z-index:100;background:transparent}
.nav-wrap{max-width:1280px;margin:0 auto;padding:0 1.5rem;background:transparent}
.navbar-box{
  background:#fff;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.12));
  clip-path:polygon(0 0, 100% 0, 95.5% 100%, 4.5% 100%);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 48px;min-height:58px;
  transition:filter .3s
}
.navbar-box:hover{filter:drop-shadow(0 8px 28px rgba(0,0,0,.18))}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-icon{width:36px;height:36px;background:var(--teal);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-icon svg{width:20px;height:20px}
.nav-logo-text{font-size:18px;font-weight:900;color:var(--fg);line-height:1}
.nav-logo-sub{font-size:9px;color:var(--muted);font-weight:500;letter-spacing:.5px}
.nav-links{display:flex;gap:4px;list-style:none;flex:1;justify-content:center}
.nav-links a{font-size:13px;font-weight:600;color:var(--fg);padding:6px 10px;border-radius:6px;transition:.2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:2px;right:10px;left:10px;height:2px;background:var(--teal);border-radius:2px;transform:scaleX(0);transition:.25s}
.nav-links a:hover,.nav-links a.active{color:var(--teal)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{background:linear-gradient(135deg,#23898D 0%,#1e7a7e 100%);color:#fff;padding:10px 22px;font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;border-radius:8px;text-decoration:none;white-space:nowrap;transition:all .25s;box-shadow:var(--shadow-teal);flex-shrink:0}
.nav-cta:hover{background:linear-gradient(135deg,#1e7a7e 0%,#1a6b6e 100%);transform:translateY(-1px);box-shadow:0 12px 36px rgba(35,137,141,.45)}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px;transition:.3s}
.nav-mobile{display:none}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  background:#0a1520;
  min-height:100vh;
}

/* ── Full background photo ── */
.hero-bg-photo{
  position:absolute;inset:0;
  background-color:#0a1520;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* Subtle blueprint/grid overlay */
.hero-grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
  z-index:1;pointer-events:none;
}
/* Very light dark overlay on full hero */
.hero-full-overlay{
  position:absolute;inset:0;
  background:rgba(8,18,30,.45);
  z-index:2;
}

/* ── Hero inner wrapper ── */
.hero-inner{
  position:relative;z-index:3;
  max-width:1600px;margin:0 auto;padding:0;
}

/* ── Two-panel layout ── */
.hero-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  align-items:stretch;
}

/* ── LEFT PANEL: dark angled bg + island ── */
.hero-left-panel{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:80px 40px 40px;
  overflow:visible;
  /* The dark panel with sharp diagonal cut on right (in LTR = left side visually) */
}
/* Dark panel behind island — clip-path sharp diagonal on right edge */
.hero-left-dark{display:none;
  position:absolute;inset:0;
  background:rgba(8,15,20,.75);
  /* Sharp diagonal cut: top-right corner pulls in, bottom-right is straight */
  clip-path:polygon(0 0, 55% 0, 100% 100%, 0 100%);
  z-index:0;
}
/* Teal glow inside left panel */
.hero-left-dark::after{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 40% 60%, rgba(35,137,141,.18) 0%, transparent 65%);
}

/* Island positioning */
.hero-island-wrap{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:100%;
}
.hero-island{
  width:420px;max-width:100%;
  position:relative;
  animation:island-float 8s ease-in-out infinite;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(35,137,141,.15));
}
@keyframes island-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(.3deg)}
}

/* ── RIGHT PANEL: text ── */
.hero-right-panel{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:90px 60px 50px 40px;
}
/* Subtle dark overlay on text side only */
.hero-right-panel::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to right, rgba(8,15,20,.0) 0%, rgba(8,15,20,.3) 100%);
  pointer-events:none;
}

/* Hero text styles */
.hero-eyebrow{
  font-size:13px;font-weight:700;
  color:rgba(255,255,255,.7);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
  position:relative;z-index:1;
}
.hero-eyebrow::before{
  content:'';width:28px;height:2px;
  background:var(--teal);border-radius:2px;flex-shrink:0;
}
.hero-h1{
  font-size:clamp(32px,3.8vw,54px);
  font-weight:900;color:#fff;
  line-height:1.15;margin-bottom:18px;
  position:relative;z-index:1;
}
.hero-h1 em{color:var(--teal);font-style:normal}
.hero-p{
  font-size:14px;color:rgba(255,255,255,.72);
  line-height:2.1;max-width:500px;margin-bottom:36px;
  position:relative;z-index:1;
}
.hero-actions{
  display:flex;gap:14px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.btn-hero-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#23898D 0%,#1e7a7e 100%);
  color:#fff;padding:13px 24px;
  font-size:13.5px;font-weight:700;font-family:'Cairo',sans-serif;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,8px 100%);
  text-decoration:none;transition:all .25s;
  box-shadow:0 8px 28px rgba(35,137,141,.4);
}
.btn-hero-primary:hover{
  background:linear-gradient(135deg,#1e7a7e 0%,#1a6b6e 100%);
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(35,137,141,.55);
}
.btn-hero-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);
  padding:13px 24px;font-size:13.5px;font-weight:700;
  font-family:'Cairo',sans-serif;border-radius:0;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,8px 100%);
  text-decoration:none;transition:all .25s;
}
.btn-hero-outline:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.7);
}

/* Bottom white bar */
.hero-bar{height:12px;background:#fff}

/* Hero responsive */
@media(max-width:900px){
  .hero-layout{grid-template-columns:1fr}
  .hero-left-panel{display:none}
  .hero-right-panel{padding:80px 24px 50px}
  .hero-h1{font-size:32px}
}

/* ═══════════════════════════════════════
   ABOUT
═══════════════════════════════════════ */
section
section#about .about-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex !important;
  flex-direction: row !important;
  gap: 80px;
  align-items: center;
  direction: ltr !important;
}

/* TEXT: first child = LEFT in LTR, but we push it RIGHT with order */
section#about .about-text {
  flex: 1;
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  direction: rtl;
}

/* IMAGE: second child = RIGHT in LTR, push LEFT with order */
section#about .about-media {
  flex: 1;
  order: 1;
  position: relative;
  padding: 20px 20px 80px 0;
  flex-shrink: 0;
}

section#about .about-dots {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 130px;
  height: 95px;
  background-image: radial-gradient(circle, rgba(35,137,141,.55) 2.8px, transparent 2.8px);
  background-size: 14px 14px;
  z-index: 3;
  pointer-events: none;
}

section#about .about-photo-wrap {
  position: relative;
  width: 100%;
}

section#about .about-blue-rect {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 100%;
  height: 100%;
  background: #cde8f0;
  border-radius: 16px;
  z-index: 0;
}

section#about .about-photo-clip {
  position: relative;
  z-index: 2;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  max-height: 500px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
section#about .about-photo-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

section#about .badge-exp {
  position: absolute;
  top: 36px;
  right: -76px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
  min-width: 125px;
  z-index: 10;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  border: 1px solid #ebebeb;
}
section#about .badge-exp-label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
}
section#about .badge-exp-num {
  font-size: 32px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}

section#about .badge-rev {
  position: absolute;
  bottom: 20px;
  left: -16px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
  z-index: 10;
  min-width: 175px;
  border: 1px solid #ebebeb;
}
section#about .badge-rev-stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 7px;
}
section#about .badge-rev-row { display:flex; align-items:center; gap:10px; }
section#about .badge-rev-avs { display:flex; }
section#about .badge-rev-avs .av {
  width:30px; height:30px; border-radius:50%;
  border:2.5px solid #fff; overflow:hidden;
  margin-left:-8px; flex-shrink:0; background:#e5e7eb;
}
section#about .badge-rev-avs .av:first-child { margin-left:0; }
section#about .badge-rev-avs .av img { width:100%;height:100%;object-fit:cover; }
section#about .badge-rev-avs .av-plus {
  background:#f3f4f6; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:800; color:#888;
}
section#about .badge-rev-txt { font-size:13px; font-weight:700; color:#111827; white-space:nowrap; }

section#about .about-pill {
  display: inline-flex;
  background: #228589;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 18px;
}
section#about .about-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  color: #111827 !important;
  line-height: 1.5;
  margin-bottom: 22px;
}
section#about .about-title em { color: #228589; font-style: normal; }
section#about .about-p {
  font-size: 14.5px;
  color: #6b7280 !important;
  line-height: 2;
  margin-bottom: 14px;
}
section#about .btn-about {
  display: inline-flex;
  align-items: center;
  background: #228589;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  padding: 13px 40px;
  border-radius: 8px;
  text-decoration: none !important;
  margin-top: 24px;
  box-shadow: 0 6px 20px rgba(35,137,141,.3);
  transition: all .25s;
}
section#about .btn-about:hover {
  background: #1a6b6e;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
}

@media(max-width:960px) {
  section#about .about-inner {
    flex-direction: column !important;
    gap: 50px;
    padding: 0 24px;
  }
  section#about .about-text { order:2; }
  section#about .about-media { order:1; padding:20px 80px 80px 0; width:100%; }
  section#about .about-blue-rect { display:none; }
}
@media(max-width:480px) {
  section#about .about-media { padding:10px 65px 70px 0; }
  section#about .badge-exp { right:-60px; }
  section#about .badge-exp-num { font-size:26px; }
}

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
.services{padding:100px 0;background:var(--gray-bg)}
.sec-header{text-align:center;max-width:660px;margin:0 auto 60px}
.sec-header h2{font-size:clamp(24px,3vw,36px);font-weight:900;color:var(--fg);margin-bottom:14px;margin-top:8px}
.sec-header p{font-size:14.5px;color:var(--muted);line-height:2}
.sec-label{font-size:11.5px;font-weight:700;color:var(--teal);letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px}
.sec-label::before,.sec-label::after{content:'';flex:1;max-width:40px;height:1.5px;background:var(--teal);opacity:.4}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{
  background:linear-gradient(145deg,#23898D 0%,#1d7c80 100%);color:#fff;border-radius:18px;padding:28px 24px;
  transition:all .3s cubic-bezier(.16,1,.3,1);cursor:default;
  box-shadow:0 6px 24px rgba(35,137,141,.22);
  position:relative;overflow:hidden
}
.svc-card::before{content:'';position:absolute;top:-40px;left:-40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.05);transition:.3s}
.svc-card:hover{background:linear-gradient(145deg,#1d7c80 0%,#1a6b6e 100%);transform:translateY(-5px);box-shadow:0 16px 48px rgba(35,137,141,.4)}
.svc-card:hover::before{transform:scale(1.4)}
.svc-icon{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:.3s}
.svc-card:hover .svc-icon{background:rgba(255,255,255,.22)}
.svc-icon svg{width:26px;height:26px;stroke:white;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc-card h3{font-size:15.5px;font-weight:800;margin-bottom:8px;line-height:1.4}
.svc-card p{font-size:13px;opacity:.78;line-height:1.85}
.svc-cta{text-align:center;margin-top:48px}
.btn-pill{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#23898D 0%,#1e7a7e 100%);color:#fff;padding:13px 32px;border-radius:50px;font-size:14px;font-weight:700;font-family:'Cairo',sans-serif;text-decoration:none;box-shadow:0 8px 28px rgba(35,137,141,.35);transition:all .25s}
.btn-pill:hover{background:linear-gradient(135deg,#1e7a7e 0%,#1a6b6e 100%);transform:translateY(-2px);box-shadow:0 14px 40px rgba(35,137,141,.5)}
.btn-pill .arr{font-size:17px;transition:.2s;display:inline-block}
.btn-pill:hover .arr{transform:translateX(-4px)}

/* ═══════════════════════════════════════
   WHY US
═══════════════════════════════════════ */
.whyus {
  background: #fff;
  padding: 90px 0 100px;
  overflow: hidden;
  position: relative;
}
.whyus-watermark {
  position: absolute;
  top: 30px;
  right: 50%;
  transform: translateX(50%);
  font-size: clamp(60px, 10vw, 130px);
  font-weight: 900;
  color: rgba(35,137,141,.06);
  letter-spacing: 8px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.whyus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
  direction: ltr;
}

/* TEXT COL — order 2 = right visually */
.whyus-text-col {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  direction: rtl;
  width: 100%;
}
.whyus-sublabel {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.whyus-h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  color: #111827;
  margin-bottom: 18px;
  line-height: 1.3;
}
.whyus-intro {
  font-size: 14.5px;
  color: #6b7280;
  line-height: 2;
  margin-bottom: 28px;
}
.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  align-items: flex-end;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-direction: row;
  direction: rtl;
  width: 100%;
}
.check-item span { font-size:14.5px; color:#374151; font-weight:500; }
.chk {
  width:24px; height:24px; min-width:24px;
  border-radius:50%; background:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.chk svg { width:13px; height:13px; }

/* IMAGE COL — order 1 = left visually */
.whyus-img-col { order: 1; position: relative; }
.whyus-img-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/5;
  max-height: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.whyus-img-photo {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.whyus-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(5,20,15,.3) 0%,
    rgba(5,20,15,.65) 55%,
    rgba(5,20,15,.88) 100%);
  z-index:1;
}
.whyus-img-content {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  padding:28px;
}
/* Logo + Brand block */
.whyus-brand {
  display:flex; align-items:center; gap:16px;
  margin-bottom:auto;
  padding-top: 24px;
}
.whyus-img-logo {
  height:44px; width:auto;
  filter:brightness(0) invert(1);
  opacity:.9; flex-shrink:0;
}
.whyus-brand-text { color:#fff; }
.whyus-brand-ar {
  font-size:20px; font-weight:800;
  letter-spacing:1px; margin-bottom:2px;
  direction: rtl;
}
.whyus-brand-en {
  font-size:13px; font-weight:600;
  letter-spacing:2px; opacity:.75;
  margin-bottom:4px;
}
.whyus-brand-sub {
  font-size:11px; opacity:.6; line-height:1.5;
  direction: rtl;
}
/* Deco rectangles */
.whyus-deco { position:absolute; bottom:24px; left:24px; width:80px; height:80px; }
.whyus-deco-r { position:absolute; border:2px solid rgba(35,137,141,.7); border-radius:4px; }
.whyus-deco-r1 { width:52px; height:52px; bottom:0; left:0; }
.whyus-deco-r2 { width:36px; height:36px; bottom:16px; left:16px; background:rgba(35,137,141,.25); }
.whyus-deco-r3 { width:20px; height:20px; bottom:28px; left:28px; background:#228589; border-color:#228589; }

@media(max-width:900px) {
  .whyus-grid { grid-template-columns:1fr; gap:50px; direction:rtl; }
  .whyus-text-col { order:1; }
  .whyus-img-col { order:2; }
  .whyus-img-card { aspect-ratio:16/9; max-height:300px; }
}

/* ═══════════════════════════════════════
   SECTORS
═══════════════════════════════════════ */
.sectors{padding:100px 0;background:var(--gray-bg)}
.sectors-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sec-card{
  background:linear-gradient(145deg,#23898D 0%,#1d7c80 100%);color:#fff;border-radius:16px;padding:20px 12px 18px;text-align:center;
  cursor:default;transition:all .3s cubic-bezier(.16,1,.3,1);
  box-shadow:0 4px 16px rgba(35,137,141,.2);position:relative;overflow:hidden
}
.sec-card::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:.3s}
.sec-card:hover{background:linear-gradient(145deg,#1d7c80 0%,#1a6b6e 100%);transform:translateY(-5px);box-shadow:0 12px 36px rgba(35,137,141,.4)}
.sec-icon{width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:.3s}
.sec-card:hover .sec-icon{background:rgba(255,255,255,.22)}
.sec-icon svg{width:24px;height:24px;stroke:white;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sec-card span{font-size:12px;font-weight:700;line-height:1.5}

/* ═══════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════ */
.cta-sec{padding:100px 0}
.cta-top{text-align:center;max-width:680px;margin:0 auto 64px}
.cta-icon-wrap{width:68px;height:68px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.cta-icon-wrap svg{width:32px;height:32px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta-top h2{font-size:clamp(22px,3vw,34px);font-weight:900;margin-bottom:14px}
.cta-top p{font-size:14.5px;color:var(--muted);line-height:2.1;margin-bottom:20px}
.cta-text-link{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:700;font-size:14.5px;transition:.2s}
.cta-text-link:hover{opacity:.75}
.cta-banner{
  background:#228589!important;border-radius:24px;padding:clamp(40px,6vw,60px);text-align:center;
  position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(34,133,137,.2)
}
.cta-banner::before{content:'';position:absolute;top:-80px;right:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.06)}
.cta-banner::after{content:'';position:absolute;bottom:-60px;left:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04)}
.cta-banner h3{font-size:clamp(20px,2.5vw,28px);font-weight:900;color:#fff;margin-bottom:12px;position:relative;z-index:1}
.cta-banner p{color:rgba(255,255,255,.8);font-size:14.5px;line-height:2;margin-bottom:26px;max-width:580px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.btn-white{display:inline-flex;align-items:center;gap:8px;padding:14px 36px;background:#fff;color:var(--fg);font-size:14px;font-weight:700;font-family:'Cairo',sans-serif;border-radius:10px;text-decoration:none;transition:all .25s;box-shadow:0 8px 28px rgba(0,0,0,.15);position:relative;z-index:1}
.btn-white:hover{background:rgba(255,255,255,.92);transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.2)}
.btn-white svg{stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════════════════════
   FOOTER — TEAL BACKGROUND
═══════════════════════════════════════ */
footer{background:#228589;color:#fff}

/* Logo top-right */
.footer-top{padding:26px 0 20px;display:flex;justify-content:flex-start;align-items:center}
.footer-logo-wrap{display:flex;align-items:center;gap:10px}
.footer-logo-icon{width:44px;height:44px;background:rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(255,255,255,.25)}
.footer-logo-icon svg{width:24px;height:24px;stroke:white;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-logo-text{font-size:17px;font-weight:900;color:#fff;line-height:1}
.footer-logo-sub{font-size:9px;color:rgba(255,255,255,.55);letter-spacing:1px;margin-top:3px}

/* Divider */
.footer-divider{height:1px;background:rgba(255,255,255,.22)}

/* Middle 3-col */
.footer-mid{padding:26px 0 24px}
.footer-mid-grid{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.footer-socials{display:flex;gap:10px}
.fsoc{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;transition:.25s;border:1.5px solid rgba(255,255,255,.2)}
.fsoc:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
.fsoc svg{width:15px;height:15px;stroke:rgba(255,255,255,.85);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-contact-center{text-align:center;display:flex;flex-direction:column;gap:7px}
.fcc-row{font-size:13.5px;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.fcc-row .lbl{color:rgba(255,255,255,.7);font-weight:600}
.fcc-row a,.fcc-row span{color:#fff;font-weight:700;text-decoration:none;transition:.2s;direction:ltr}
.fcc-row a:hover{color:rgba(255,255,255,.75)}
.footer-address{text-align:start;font-size:14px;color:#fff;font-weight:700;line-height:1.95}

/* Bottom */
.footer-bottom{border-top:1px solid rgba(255,255,255,.2);padding:14px 0;text-align:center;border-bottom:3px solid #1a6b6e}
.footer-bottom p{color:rgba(255,255,255,.75);font-size:13px;font-weight:500}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .sectors-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .hero-layout{grid-template-columns:1fr;min-height:auto;padding:80px 0 40px}
  .hero-right-panel{padding:40px 24px 32px}
  .hero-left-panel{padding:20px 24px;min-height:300px}
  .hero-island{width:280px}
  .hero-h1{font-size:32px}
  .hero-bar{display:none}
  
  .about-grid,.whyus-grid{grid-template-columns:1fr;gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1/-1}
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:flex}
  .nav-mobile.open{
    display:block;background:#fff;border-top:1px solid var(--border);
    padding:16px 0 20px;box-shadow:0 12px 32px rgba(0,0,0,.08)
  }
  .nav-mobile ul{list-style:none;padding:0 24px;display:flex;flex-direction:column;gap:4px}
  .nav-mobile a{display:block;padding:10px 12px;font-size:14px;font-weight:600;border-radius:8px;color:var(--fg);transition:.2s}
  .nav-mobile a:hover{background:var(--gray-bg);color:var(--teal)}
  .nav-mobile .mob-cta{margin:12px 24px 0;background:var(--teal);color:#fff;padding:12px;border-radius:8px;text-align:center;font-size:14px;font-weight:700;display:block}
}
@media(max-width:640px){
  .services-grid{grid-template-columns:1fr}
  .sectors-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom-inner{flex-direction:column;text-align:center}
  .footer-bottom-links{flex-wrap:wrap;justify-content:center}
  .cta-banner{padding:36px 24px}
  .hero-h1{font-size:30px}
}
@media(max-width:768px){
  .footer-mid-grid{grid-template-columns:1fr;gap:18px;text-align:center}
  .footer-address{text-align:center!important}
  .footer-socials{justify-content:center}
  .footer-top,.footer-top>*{justify-content:center}
  .footer-contact-center{align-items:center}
}
@media(max-width:420px){
  .sectors-grid{grid-template-columns:repeat(2,1fr)}
  .hero-actions{flex-direction:column}
  .btn-hero-primary,.btn-hero-outline{justify-content:center}
}

/* ── Logo images ── */
.nav-logo-img{height:44px;width:auto;object-fit:contain;filter:brightness(0);transition:.2s}
.navbar-box:hover .nav-logo-img{opacity:.85}
.footer-logo-img{height:54px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}

/* ── Floating Background Icons ── */
.bg-icons{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.bg-icon{position:absolute;opacity:0;color:rgba(35,137,141,.18);animation:bg-float-in .8s ease forwards,bg-float var(--dur,12s) ease-in-out var(--delay,0s) infinite}
@keyframes bg-float-in{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bg-float{0%,100%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-18px) rotate(3deg) scale(1.04)}50%{transform:translateY(-8px) rotate(-2deg) scale(.98)}75%{transform:translateY(-22px) rotate(4deg) scale(1.03)}}
@keyframes bg-float-alt{0%,100%{transform:translateY(0) rotate(0) scale(1)}30%{transform:translateY(-14px) rotate(-5deg) scale(1.05)}60%{transform:translateY(-24px) rotate(3deg) scale(.97)}}
@keyframes bg-spin-float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes bg-pulse-float{0%,100%{transform:translateY(0) scale(1);opacity:.12}50%{transform:translateY(-20px) scale(1.15);opacity:.22}}

/* ── Global Fixed BG Icons ── */
.global-bg-icons{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.gbi{position:absolute;width:var(--s,44px);height:var(--s,44px);color:rgba(35,137,141,var(--op,.10));opacity:0;animation:gbi-in .8s ease var(--delay,0s) forwards,gbi-float var(--dur,14s) ease-in-out var(--delay,0s) infinite}
@keyframes gbi-in{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gbi-float{0%,100%{transform:translateY(0) rotate(0) scale(1)}20%{transform:translateY(-14px) rotate(2deg) scale(1.03)}45%{transform:translateY(-6px) rotate(-1.5deg) scale(.98)}70%{transform:translateY(-20px) rotate(3deg) scale(1.04)}}
@keyframes gbi-spin{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes gbi-pulse{0%,100%{transform:translateY(0) scale(1);opacity:var(--op,.10)}50%{transform:translateY(-18px) scale(1.18);opacity:calc(var(--op,.10)*1.8)}}
.gbi-spin{animation:gbi-in .8s ease var(--delay,0s) forwards,gbi-spin var(--dur,20s) linear var(--delay,0s) infinite}
.gbi-pulse{animation:gbi-in .8s ease var(--delay,0s) forwards,gbi-pulse var(--dur,10s) ease-in-out var(--delay,0s) infinite}
header,main,section,footer,.header,.topbar{position:relative;z-index:1}

/* ═══════════════════════════════════════
   RESPONSIVE — COMPREHENSIVE FIXES
═══════════════════════════════════════ */

/* ── Tablet 768-1024px ── */
@media(max-width:1024px) and (min-width:769px) {
  .hero-h1 { font-size:36px; }
  .hero-right-panel { padding:80px 40px 40px 20px; }
  .hero-island { width:340px; }}

/* ── Mobile ≤768px ── */
@media(max-width:768px) {
  /* Hero */
  .hero { min-height:auto; }
  .hero-layout {
    grid-template-columns:1fr;
    min-height:auto;
  }
  /* Image panel first on mobile (top) */
  .hero-left-panel {
    order:1;
    padding:100px 24px 20px;
    min-height:320px;
  }
  /* Text panel second (bottom) */
  .hero-right-panel {
    order:2;
    padding:32px 24px 48px;
    text-align:right;
  }
  .hero-h1 { font-size:28px; line-height:1.4; }
  .hero-eyebrow { font-size:11px; }
  .hero-p { font-size:13px; }
  .hero-actions { flex-direction:column; gap:12px; }
  .btn-hero-primary,.btn-hero-outline { justify-content:center; width:100%; }
  .hero-island { width:240px; }

  /* Navbar */
  .nav-links,.nav-cta { display:none; }
  .nav-hamburger { display:flex; }

  /* About: handled by section#about scoped rules */

  /* Services */
  .services-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .service-card { padding:20px 16px; }

  /* WhyUs */
  .whyus-grid { grid-template-columns:1fr; gap:40px; }
  .whyus-img-card { min-height:300px; }

  /* Sectors */
  .sectors-grid { grid-template-columns:repeat(2,1fr); }

  /* Stats */
  .stats-grid { grid-template-columns:1fr 1fr; gap:16px; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-brand { grid-column:auto; }
  .footer-bottom-inner { flex-direction:column; text-align:center; gap:12px; }
  .footer-bottom-links { justify-content:center; flex-wrap:wrap; }

  /* Container */
  .container { padding:0 20px; }
}

/* ── Small Mobile ≤480px ── */
@media(max-width:480px) {
  .hero-h1 { font-size:24px; }
  .hero-island { width:200px; }
  .services-grid { grid-template-columns:1fr; }
  .sectors-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:1fr 1fr; }  .badge-exp { min-width:100px; padding:10px 14px; }
  .badge-exp .yoe-num { font-size:26px; }
  .badge-rev { min-width:150px; }
  .section-h2 { font-size:22px; }
}