/* =========================================================
   style.css | Manar Al-Amal Profile (FINAL) — UPDATED
   - ✅ ترتيب الأقسام الجديد (بـ HTML) مدعوم
   - ✅ Vision/Mission (#vision) تصميم جديد (Pattern + Cards) بدون صور
   - ✅ Dropdowns: Click-to-open support (no hover dependency)
   - ✅ Mobile Nav: ✅ Popup (بدل Drawer)
   - ✅ إزالة أيقونة الترجمة: لا نعتمد على <i> داخل زر اللغة
   - ✅ Footer: حذف الانستا + إضافة أيقونة الموقع
========================================================= */

:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.68);
  --line:rgba(2,6,23,.10);

  --primary:#062642;     /* Navy from logo */
  --primary-2:#0b3a5c;
  --accent:#c9a34a;      /* Gold accent */
  --soft:rgba(6,38,66,.08);
  --soft2:rgba(201,163,74,.12);

  --radius:18px;
  --radius2:14px;

  --shadow: 0 18px 40px rgba(0,0,0,.10);
  --shadow2: 0 12px 26px rgba(0,0,0,.10);
}

/* ========== Base ========== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Almarai", sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.9;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, textarea{ font-family:inherit; }

.container{
  width:min(1150px, calc(100% - 32px));
  margin-inline:auto;
}

/* =========================================================
   Header / Nav
========================================================= */
.header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:60;
}
.header__wrap{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:230px;
}
.brand__logo{
  width:52px;
  height:52px;
  object-fit:contain;
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand__name{
  font-weight:900;
  font-size:16px;
}
.brand__tag{
  font-weight:700;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

.nav{ margin-inline-start:auto; position:relative; }

/* Hamburger */
.nav__toggle{
  display:none; /* desktop default */
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  width:44px;
  height:44px;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
  transition:.2s;
}
.nav__toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(0,0,0,.10);
}
.nav__toggle i{ color:var(--primary); }

/* Desktop list */
.nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.nav__item{ position:relative; }

/* Links + Dropdown Button unified */
.nav__list a,
.nav__dropbtn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  color:rgba(0,0,0,.76);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:.22s;
  line-height:1;
  font-family:inherit;
  appearance:none;
  -webkit-appearance:none;
}
.nav__list a:hover,
.nav__dropbtn:hover{
  background:var(--soft);
  color:var(--primary);
}

.nav__dropbtn i{
  font-size:12px;
  opacity:.85;
  transition:.2s;
}
.nav__item--dropdown.open > .nav__dropbtn i{
  transform: rotate(180deg);
}

/* Dropdown (Desktop) */
.nav__dropdown{
  list-style:none;
  padding:10px;
  margin:0;
  min-width:220px;
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-start:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow2);
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: .22s ease;
  display:flex;
  flex-direction:column;
  gap:6px;

  /* ✅ FIX: keep dropdown above header effects/stacking contexts */
  z-index: 999;
}

/* ✅ Open by click only */
.nav__item--dropdown.open > .nav__dropdown{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* ✅ Safety: disable hover open (only when NOT open) */
.nav__item--dropdown:not(.open):hover > .nav__dropdown{
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
}

/* Dropdown links */
.nav__dropdown a{
  border-radius:12px;
  padding:10px 12px;
  background:rgba(6,38,66,.04);
  border:1px solid rgba(2,6,23,.06);
}
.nav__dropdown a:hover{
  background:rgba(201,163,74,.12);
  border-color:rgba(201,163,74,.28);
  color:var(--primary);
}

/* Language item */
.nav__item--lang{ margin-inline-start:6px; }

/* =========================================================
   Language switch (بدون أيقونة)
========================================================= */
.lang-switch{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  transition:.25s;
}
.lang-switch:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
}
.lang-switch__text{ font-weight:900; }

/* =========================================================
   Hero
========================================================= */
.hero{
  position:relative;
  min-height: 78vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.02);
}
.hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(6,38,66,.88), rgba(6,38,66,.62));
}

/* geometric pattern */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(201,163,74,.18), transparent 40%),
    radial-gradient(circle at 85% 65%, rgba(255,255,255,.10), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, auto, 90px 90px, 90px 90px;
  pointer-events:none;
  opacity:.55;
}

.hero__decor{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(201,163,74,.22), transparent 60%);
  filter: blur(1px);
  z-index:0;
}
.hero__decor--a{ top:-120px; inset-inline-end:-120px; }
.hero__decor--b{ bottom:-160px; inset-inline-start:-140px; }

.hero__content{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr;
  gap:22px;
  padding: 54px 0;
}
.hero__content--center{
  justify-items:center;
  text-align:center;
  padding-top: 64px;
  padding-bottom: 58px;
}

.hero__text{ max-width: 920px; }

.hero__title{
  margin:0;
  font-size:44px;
  line-height:1.2;
  font-weight:900;
  color:#fff;
}
.hero__desc{
  margin:12px auto 0;
  color:rgba(255,255,255,.88);
  font-weight:700;
  max-width: 760px;
}

.hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 18px;
}

.hero__features{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 18px;
}
.feature{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:900;
}
.feature i{ color: var(--accent); }

/* Hero outline button contrast */
.hero .btn--outline{
  background: rgba(255,255,255,.92);
  color: var(--primary);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.hero .btn--outline:hover{
  background: #fff;
  transform: translateY(-2px);
}

/* =========================================================
   Sections base
========================================================= */
.section{
  padding: 70px 0;
  position:relative;
}

.sec-title{
  margin:0;
  font-size:32px;
  font-weight:900;
}
.sec-desc{
  margin:10px 0 0;
  color:var(--muted);
  font-weight:700;
  max-width: 860px;
}

.sec-title--light,
.sec-desc--light{ color:#fff; }
.sec-desc--light{ color: rgba(255,255,255,.86); }

/* =========================================================
   Split layout
========================================================= */
.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}

.media-card{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.media-card img{ width:100%; height:360px; object-fit:cover; }
.media-card__tag{
  position:absolute;
  bottom:14px;
  inset-inline-start:14px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  padding:10px 12px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
}
.media-card__tag i{ color:var(--primary); }

.bullets{
  list-style:none;
  padding:0;
  margin: 18px 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bullets li{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(6,38,66,.05);
  border:1px solid rgba(2,6,23,.08);
  font-weight:900;
}
.bullets i{ color:var(--primary); }

/* =========================================================
   Grid utilities
========================================================= */
.grid{
  display:grid;
  gap: 16px;
  margin-top: 22px;
}
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
.grid--6{ grid-template-columns: repeat(6, 1fr); }

/* =========================================================
   Dividers
========================================================= */
.divider{ height:40px; }
.divider--compact{ height:26px; }

.divider--wave{
  height:60px;
  background:
    radial-gradient(60px 40px at 20% 50%, rgba(201,163,74,.18), transparent 70%),
    radial-gradient(60px 40px at 80% 50%, rgba(6,38,66,.10), transparent 70%);
}
.divider--slant{
  height:60px;
  background: linear-gradient(135deg, rgba(6,38,66,.10), transparent);
}
.divider--pattern{
  height:60px;
  background:
    radial-gradient(circle at 25% 35%, rgba(6,38,66,.06), transparent 45%),
    radial-gradient(circle at 80% 55%, rgba(201,163,74,.10), transparent 45%);
}
.divider--line{
  display:flex;
  align-items:center;
  justify-content:center;
  height:70px;
  position:relative;
}
.divider--line::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:50%;
  height:1px;
  background: var(--line);
}
.divider__icon{
  width:46px;
  height:46px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  position:relative;
  z-index:2;
}
.divider__icon i{ color: var(--primary); }

/* =========================================================
   Back to top
========================================================= */
.backtop{
  position:fixed;
  bottom:18px;
  inset-inline-end:18px;
  width:48px;
  height:48px;
  border-radius: 14px;
  background: var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  opacity:0;
  pointer-events:none;
  transform: translateY(8px);
  transition:.25s;
}
.backtop:hover{ transform:translateY(-2px); }

/* ✅ FIX: show state used by main.js */
.backtop.show{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

/* =========================================================
   Why + HSE Background (image sections)
========================================================= */
.why, .hse{
  position: relative;
  overflow: hidden;
}

.why__bg, .hse__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.why__bg img, .hse__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.why__overlay, .hse__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,38,66,.92), rgba(6,38,66,.62));
}

.why .container, .hse .container{
  position: relative;
  z-index: 1;
}

.why::before, .hse::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 20% 25%, rgba(201,163,74,.14), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.08), transparent 45%);
  pointer-events:none;
}

/* =========================================================
   Calm Pattern Background (Products/Contact/Partners)
========================================================= */
.projects,
.contact,
.partners{
  position: relative;
  background: #f8fafc;
  overflow: hidden;
}

.projects::before,
.contact::before,
.partners::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(6,38,66,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,38,66,.035) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
  z-index:0;
}

.projects .container,
.contact .container,
.partners .container{
  position: relative;
  z-index:1;
}

.projects .sec-title,
.contact .sec-title,
.partners .sec-title{ color: var(--primary); }

.projects .sec-desc,
.contact .sec-desc,
.partners .sec-desc{ color: var(--muted); }

/* =========================================================
   ✅ NEW: Vision & Mission (#vision) — Pattern + Cards (No Images)
========================================================= */
.vm{
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.vm--pattern{
  background: linear-gradient(180deg, #ffffff, #f7fafc);
}
.vm--pattern::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 28%, rgba(201,163,74,.10), transparent 44%),
    radial-gradient(circle at 82% 72%, rgba(6,38,66,.06), transparent 48%),
    linear-gradient(rgba(6,38,66,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,38,66,.035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  opacity: .9;
  pointer-events:none;
}

.vm .container{
  position: relative;
  z-index: 1;
}

.vm__grid{
  margin-top: 26px;
}

.vm-card{
  position: relative;
  border-radius: 22px;
  padding: 22px 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
  overflow: hidden;
  transition: .25s;
}
.vm-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0,0,0,.12);
}

.vm-card::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(201,163,74,.70), rgba(6,38,66,.10), rgba(201,163,74,.25));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity: .95;
}

.vm-card::after{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(201,163,74,.18), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
  opacity: .6;
}

.vm-card__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.vm-card__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(201,163,74,1), rgba(201,163,74,.78));
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.vm-card__icon i{
  color: #1b2a3a;
  font-size: 22px;
}

.vm-card__title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: .2px;
}

.vm-card__text{
  margin:0;
  position: relative;
  z-index: 1;
  color: rgba(15,23,42,.84);
  font-weight: 700;
  line-height: 1.95;
}

/* =========================================================
   Footer (New Design)
========================================================= */
.footer{
  background: linear-gradient(180deg, #051b2f, #041424);
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
  padding: 26px 0;
}

.footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 30%, rgba(201,163,74,.18), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.07), transparent 45%);
  pointer-events:none;
}

.footer__wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position: relative;
  z-index: 1;
}

.footer__brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer__brand img{
  width:54px;
  height:54px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.footer__brand strong{
  display:block;
  font-weight:900;
}

.footer__brand span{
  display:block;
  font-size:12px;
  color: rgba(255,255,255,.74);
  margin-top:4px;
}

.footer__social{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer__social a{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: .25s;
}

.footer__social a:hover{
  transform: translateY(-2px);
  background: rgba(201,163,74,.16);
  border-color: rgba(201,163,74,.28);
}

.footer__social i{
  color: #fff;
  font-size: 18px;
}

.footer__copy{
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

/* =========================================================
   Responsive (General)
========================================================= */
@media (max-width: 768px){
  .hero__title{ font-size:32px; }
  .split{ grid-template-columns:1fr; }
  .bullets{ grid-template-columns:1fr; }
  .grid--2,.grid--3,.grid--4,.grid--6{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .brand__logo{ width:50px; height:50px; }
  .hero__title{ font-size:28px; }
}

/* =========================================================
   ✅ Mobile Popup Nav (mnav) — Final
   - يعمل كنافذة منبثقة بالوسط
   - backdrop خلفها
========================================================= */
.mnav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: .25s;
  z-index: 9999;
}

/* overlay container */
.mnav{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 10000;

  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
}

/* open state */
.mnav.is-open{
  opacity: 1;
  pointer-events: auto;
}
.mnav-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* the popup panel */
.mnav__panel{
  width: min(420px, 94vw);
  max-height: min(78vh, 680px);
  overflow: auto;

  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.28);

  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;

  transform: translateY(10px) scale(.98);
  transition: .25s ease;
}

/* animate panel when open */
.mnav.is-open .mnav__panel{
  transform: translateY(0) scale(1);
}

/* Head */
.mnav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mnav__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.mnav__logo{
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.mnav__brandtext{
  min-width:0;
  line-height:1.2;
}
.mnav__brandtext strong{
  display:block;
  font-weight: 900;
}
.mnav__brandtext span{
  display:block;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  font-weight: 700;
}

.mnav__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.mnav__close i{ color: var(--primary); font-size: 18px; }

/* Contact mini */
.mnav__contact{
  display:grid;
  gap: 10px;
}
.mnav__citem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(6,38,66,.04);
  border: 1px solid rgba(2,6,23,.08);
  font-weight: 800;
}
.mnav__citem i{ color: var(--primary); }

/* Links */
.mnav__links{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}
.mnav__links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  font-weight: 900;
  color: rgba(0,0,0,.78);
  transition: .2s;
}
.mnav__links a:hover{
  background: rgba(201,163,74,.10);
  border-color: rgba(201,163,74,.22);
  color: var(--primary);
}

/* Language button inside popup */
.lang-switch--nav{
  width: 100%;
  justify-content: center;
  border-radius: 16px;
}

/* =========================================================
   ✅ Mobile behavior rules:
   - show hamburger
   - hide desktop nav list
========================================================= */
@media (max-width: 768px){
  .nav__toggle{ display:block; }
  .nav__list{ display:none !important; }
}

/* desktop: hide hamburger */
@media (min-width: 769px){
  .nav__toggle{ display:none !important; }
}

/* Fix hash jump with fixed header */
section[id]{
  scroll-margin-top: 110px; /* عدّل الرقم حسب ارتفاع الهيدر عندك */
}

/* ===== HARD FIX: Center everything + kill left empty space ===== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* force centering (in case components/responsive override it) */
.container{
  width: min(1150px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* make sure sections don't align content to one side */
header, section, footer{
  width:100%;
}

/* if any section became flex and pushes content to the right */
.section{
  display:block;
}