/* =========================================================
   قالب "الصرح" — إعادة تصميم كاملة (الجيل الرابع)
   هوية جديدة كليّاً: "دافئ عضوي غروبي" Warm Organic Dusk
   خلفية القسم الرئيسي داكنة دافئة بلمسات ضبابية ملوّنة (بلوبات)،
   بقية الصفحة فاتحة كريمية مريحة. زوايا مستديرة كبيرة في كل مكان
   بدل القصّ القطري، ظلال ناعمة عائمة بدل الظلال الصلبة الحادة،
   أزرار كبسولية (pill) بدل الأزرار المقصوصة، بطاقات زجاجية شفافة
   (glassmorphism) في الهيدر والبطاقات العائمة، أنماط بدون كتابة
   بأحرف كبيرة (لا uppercase) لطابع أكثر أناقة وهدوءاً.
   نفس أسماء الأصناف (classes) الأصلية ونفس أسماء متغيرات :root —
   استبدال مباشر دون أي تعديل على HTML/PHP.
   ========================================================= */
:root{
  --navy:#241f1a;             /* بني-أسود دافئ عميق: نص العناوين الرئيسية وخلفية الهيرو الداكنة */
  --navy-dark:#140f0c;        /* أغمق: تدرجات الخلفية الداكنة والظلال العميقة */
  --blue:#d97a4d;             /* تراكوتا دافئ: اللون الأساسي للأكشن والتمييز */
  --blue-dark:#b85f36;
  --teal:#8a9b74;             /* أخضر زيتوني هادئ: لمسة ثانوية عضوية */
  --teal-dark:#63724f;
  --teal-soft:#eef1e6;
  --whatsapp:#25d366;
  --bg-soft:#faf6ef;          /* كريمي دافئ فاتح جداً: خلفية الصفحة الأساسية */
  --panel:#f1e9db;            /* رملي دافئ: خلفيات الأقسام البديلة */
  --accent-soft:#fbe4d3;      /* تراكوتا فاتح جداً: خلفيات ناعمة للتمييز */
  --sage-soft:#eef1e6;        /* أخضر زيتوني فاتح جداً: خلفيات ناعمة بديلة */
  --surface:#ffffff;
  --ink:#2c2620;
  --ink-dim:#8a8172;
  --line:#eadfc9;
  --card-radius:26px;         /* استدارة كبيرة معتمدة في كل مكان — عكس الحدّة الهندسية السابقة */
  --cut:44px;                 /* نصف قطر مستخدم لأشكال البلوب/الإطارات العضوية */
  --font: "Tajawal", "Tahoma", sans-serif;
  --font-display: "Almarai", "Tajawal", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0; font-family:var(--font); background:var(--bg-soft); color:var(--ink); line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }

.container{ max-width:1240px; margin-inline:auto; padding-inline:24px; }

/* ---------- خط العناوين المميز — أنيق بدون أحرف كبيرة، بتباعد لطيف ---------- */
.hero-text h1, .section-title, .why-title, .service-title, .article-title,
.brand-logo-box .brand-name, .footer-contact-title, .ng-page-hero h1,
.share-title, .sub-title, .hero-logo-card .logo-word{
  font-family:var(--font-display);
  letter-spacing:0;
}

/* ---------- Grid helpers ---------- */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:960px){ .grid-3, .grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

/* خلفية منقطة ناعمة — بديل عضوي لشبكة الخطوط الهندسية السابقة */
.diamond-bg{
  background-color:var(--panel);
  background-image: radial-gradient(rgba(36,31,26,.14) 1.6px, transparent 1.6px);
  background-size:26px 26px;
  border-radius:var(--card-radius);
}

/* شريط زخرفي رفيع متدرّج — بديل شريط "التحذير" المقصوص سابقاً */
.ng-hazard-strip{
  height:6px; width:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--blue), var(--teal));
}

/* ---------- Top bar — زجاجية عائمة عريضة، بدون حد سفلي صلب ---------- */
.ng-topbar{
  background:rgba(255,255,255,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:14px 0; position:sticky; top:0; z-index:500;
  box-shadow:0 10px 30px rgba(36,31,26,.07);
  border-bottom:1px solid rgba(36,31,26,.06);
}
.ng-topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; }

.brand-logo-box{ display:flex; align-items:center; gap:14px; }
.brand-logo-box img{ width:52px; height:52px; object-fit:contain; background:var(--accent-soft); padding:6px; border-radius:50%; border:2px solid #fff; box-shadow:0 4px 14px rgba(216,110,60,.25); }
.brand-logo-box .brand-name{ color:var(--navy); font-weight:800; font-size:16.5px; margin-bottom:2px; }
.brand-logo-box .brand-phone{ color:var(--blue-dark); font-weight:700; font-size:14px; }

.nav-scroll{ display:flex; align-items:center; gap:2px; overflow-x:auto; white-space:nowrap; flex:1; background:var(--bg-soft); padding:6px; border-radius:999px; }
.nav-scroll a{ flex:0 0 auto; color:#5c5646; font-weight:600; padding:10px 18px; transition:.25s; font-size:14.5px; border-radius:999px; border-bottom:none; }
.nav-scroll a:hover, .nav-scroll a.is-active{ background:var(--blue); color:#fff; }
.nav-scroll a.home-link{ color:var(--navy); font-weight:800; }
.nav-scroll a.home-link:hover, .nav-scroll a.home-link.is-active{ color:#fff; }
.nav-scroll::-webkit-scrollbar{ height:0; }
@media (max-width:900px){ .nav-scroll{ display:none; } }

.menu-btn{
  display:none; background:var(--navy); color:#fff;
  border:none; width:48px; height:48px; align-items:center; justify-content:center;
  border-radius:50%; font-size:18px; flex:none; box-shadow:0 6px 16px rgba(36,31,26,.25);
}
@media (max-width:900px){ .menu-btn{ display:flex; } }

/* ---------- Sidebar — لوحة علوية منسدلة بزوايا سفلية مستديرة كبيرة ---------- */
.ng-sidebar{
  position:fixed; top:-100%; inset-inline-start:0; inset-inline-end:0; width:100%; height:auto; max-height:85vh;
  background:var(--surface); box-shadow:0 30px 60px rgba(20,15,12,.28);
  transition:top .4s cubic-bezier(.22,1,.36,1); z-index:999; padding:26px 22px 34px; overflow-y:auto;
  border-radius:0 0 32px 32px; border-inline-start:none;
}
.ng-sidebar.is-open{ top:0; }
.ng-sidebar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ng-sidebar h5{ color:var(--navy); font-weight:800; margin:0; font-size:18px; }
.ng-sidebar__close{ background:var(--accent-soft); border:none; width:38px; height:38px; border-radius:50%; color:var(--blue-dark); font-size:15px; }
.ng-sidebar a{ display:block; padding:15px 14px; color:var(--ink-dim); border-bottom:1px solid var(--line); font-weight:600; border-radius:14px; }
.ng-sidebar a:hover{ background:var(--accent-soft); color:var(--blue-dark); padding-inline-start:20px; }

.ng-overlay{
  position:fixed; inset:0; background:rgba(20,15,12,.5); backdrop-filter:blur(2px); display:none; z-index:998;
}
.ng-overlay.is-open{ display:block; }

/* ---------- Hero — قسم داكن دافئ بضبابيات ملوّنة عضوية، بطاقة صورة عائمة مستديرة ---------- */
.ng-hero{
  padding:76px 0 96px; position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 15% -10%, #3a2f24 0%, var(--navy) 45%, var(--navy-dark) 100%);
}
.ng-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 420px at 88% 12%, rgba(217,122,77,.35), transparent 70%),
    radial-gradient(380px 380px at 6% 92%, rgba(138,155,116,.30), transparent 70%);
  filter:blur(10px);
}
.ng-hero-slide{ display:none; }
.ng-hero-slide.is-active{ display:block; }

.hero-row{ display:grid; grid-template-columns:1.15fr 1fr; gap:50px; align-items:center; position:relative; z-index:2; }
@media (max-width:860px){ .hero-row{ grid-template-columns:1fr; gap:36px; } .ng-hero{ padding:56px 0 66px; } }

.hero-logo-card{
  background:var(--surface); padding:44px 30px; text-align:center;
  box-shadow:0 30px 60px rgba(20,15,12,.35); height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; border-radius:var(--card-radius); border:6px solid rgba(255,255,255,.08);
  transform:rotate(-2deg);
}
.hero-logo-card::before{
  content:""; position:absolute; inset:-6px; border-radius:calc(var(--card-radius) + 6px); z-index:-1;
  background:linear-gradient(135deg, var(--blue), var(--teal)); opacity:.55;
}
.hero-logo-card img{ max-width:190px; margin-bottom:14px; border-radius:18px; }
.hero-logo-card .logo-word{ color:var(--navy); font-weight:800; font-size:20px; margin-top:10px; }

.hero-text{ text-align:center; padding-inline-start:0; color:#f4ede2; }
@media (min-width:861px){ .hero-text{ text-align:right; padding-inline-start:0; } }
.hero-text h1{ color:#fff; font-weight:800; font-size:clamp(30px,4.6vw,46px); line-height:1.25; }

.ng-divider{ display:flex; align-items:center; margin:18px 0 22px; }
.ng-divider.centered{ justify-content:center; }
.ng-divider span{ height:3px; width:46px; background:var(--blue); border-radius:3px; }
.ng-divider i{ color:var(--teal-dark); font-size:17px; margin:0 14px; }
.ng-hero .ng-divider i{ color:var(--teal); }

.sub-title{ color:var(--blue); font-weight:800; font-size:19px; margin-bottom:14px; }
.desc{ line-height:2; color:var(--ink-dim); font-size:15.5px; }
.ng-hero .desc{ color:#d8cdbe; }

.hero-actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:14px; }
@media (min-width:861px){ .hero-actions{ justify-content:flex-end; } }
@media (max-width:860px){ .hero-actions{ justify-content:center; } }

.btn-call, .btn-whatsapp, .ng-btn{
  border:2px solid transparent; padding:15px 30px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:9px; transition:.25s;
  border-radius:999px;
}
.btn-call{ background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(217,122,77,.35); }
.btn-call:hover{ color:#fff; background:var(--blue-dark); transform:translateY(-3px); box-shadow:0 14px 30px rgba(217,122,77,.45); }
.btn-whatsapp{ background:var(--whatsapp); color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.3); }
.btn-whatsapp:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 14px 30px rgba(37,211,102,.4); }
.ng-btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.ng-btn-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-3px); }
.ng-hero .ng-btn-outline{ color:#fff; border-color:rgba(255,255,255,.5); }
.ng-hero .ng-btn-outline:hover{ background:#fff; color:var(--navy); border-color:#fff; }

.hero-dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.3); padding:0; cursor:pointer; transition:.25s; }
.hero-dots button.is-active{ background:var(--blue); width:26px; border-radius:6px; }

/* ---------- Section titles — أنيقة بدون أحرف كبيرة ---------- */
.section-title{ text-align:center; color:var(--navy); font-weight:800; font-size:clamp(26px,3.6vw,36px); margin-bottom:6px; }
.section-lead{ text-align:center; color:var(--ink-dim); font-size:15.5px; max-width:640px; margin:0 auto 10px; }

/* ---------- Services ---------- */
.ng-services{ padding:60px 0 54px; }

.service-card{
  background:var(--surface); overflow:hidden;
  box-shadow:0 16px 40px rgba(36,31,26,.08); transition:transform .35s, box-shadow .35s;
  position:relative; border-radius:var(--card-radius); border:1px solid var(--line);
}
.service-card:hover{ transform:translateY(-10px); box-shadow:0 26px 54px rgba(36,31,26,.16); }
/* شارة دائرية عائمة فوق الصورة بدل الشارة المقصوصة الزاوية */
.service-card::before{
  content:"\f6e2"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:16px;
  position:absolute; top:16px; inset-inline-start:16px; z-index:2; width:42px; height:42px;
  background:var(--blue); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(217,122,77,.4);
}
.service-img{ overflow:hidden; aspect-ratio:4/3; position:relative; border-radius:var(--card-radius) var(--card-radius) 0 0; }
.service-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.service-card:hover .service-img img{ transform:scale(1.09); }
.service-body{ padding:24px 20px 28px; text-align:center; }
.service-title{ color:var(--navy); font-weight:800; font-size:18.5px; margin-bottom:16px; }
.service-btn{
  background:var(--accent-soft); color:var(--blue-dark);
  padding:11px 24px; display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px;
  border-radius:999px; transition:.25s;
}
.service-btn:hover{ background:var(--blue); color:#fff; }

/* ---------- Offers styled as article cards ---------- */
.ng-offers{ padding:20px 0 54px; }

.article-card{
  background:var(--surface); overflow:visible;
  box-shadow:0 16px 40px rgba(36,31,26,.08); height:100%; position:relative; border-radius:var(--card-radius); border:1px solid var(--line);
  transition:transform .3s, box-shadow .3s;
}
.article-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(36,31,26,.14); }
.article-img-wrap{ position:relative; overflow:hidden; aspect-ratio:16/10; border-radius:var(--card-radius) var(--card-radius) 0 0; }
.article-img-wrap img{ width:100%; height:100%; object-fit:cover; }
.article-badge{
  position:absolute; top:14px; inset-inline-end:14px; background:rgba(36,31,26,.55); backdrop-filter:blur(6px); color:#fff;
  font-size:11.5px; font-weight:700; padding:7px 16px; border-radius:999px;
}
.article-avatar{
  position:absolute; bottom:-24px; inset-inline-start:50%; transform:translateX(50%);
  width:50px; height:50px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  border:4px solid #fff; border-radius:50%; box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.article-body{ padding:36px 22px 28px; text-align:center; }
.article-title{ color:var(--navy); font-weight:800; font-size:17px; line-height:1.55; margin-bottom:14px; }
.article-desc{ color:var(--ink-dim); font-size:14.5px; line-height:1.9; margin-bottom:16px; }
.article-more{ color:var(--blue-dark); font-weight:700; font-size:14px; }
.article-more:hover{ color:var(--blue); }

/* ---------- Why us ---------- */
.ng-why-us{ padding:64px 0 30px; text-align:center; }
.why-title{ color:var(--navy); font-size:clamp(24px,3.2vw,32px); font-weight:800; margin-bottom:10px; }

.why-card{
  background:var(--sage-soft); padding:38px 26px;
  box-shadow:none; height:100%;
  border-top:none; position:relative; border-radius:var(--card-radius); text-align:center;
  transition:transform .3s;
}
.why-card:hover{ transform:translateY(-6px); }
.why-icon-circle{
  width:64px; height:64px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 18px;
  border-radius:50%; box-shadow:0 10px 22px rgba(138,155,116,.4);
}
.why-card h4{ color:var(--navy); font-weight:700; margin-bottom:12px; font-size:17px; }
.why-card p{ color:var(--ink-dim); line-height:1.9; font-size:14.5px; }

/* ---------- Stats strip — بطاقة كبسولية عائمة فوق الخلفية الفاتحة ---------- */
.ng-stats{
  background:var(--surface);
  position:relative; margin:-40px auto 0; max-width:1100px; border-radius:var(--card-radius);
  box-shadow:0 26px 60px rgba(36,31,26,.14); z-index:5;
}
.ng-stats .container{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:100%; padding-inline:10px;
}
.stat-block{
  text-align:center; padding:30px 16px; border-inline-end:1px dashed var(--line);
}
.stat-block:last-child{ border-inline-end:none; }
.stat-block strong{
  display:block; font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px); font-weight:800; color:var(--blue); line-height:1;
}
.stat-block span{ display:block; margin-top:10px; color:var(--ink-dim); font-size:13.5px; font-weight:600; }
@media (max-width:768px){
  .ng-stats .container{ grid-template-columns:repeat(2,1fr); }
  .stat-block{ border-bottom:1px dashed var(--line); }
  .ng-stats{ margin-top:-28px; border-radius:20px; }
}

/* ---------- CTA Banner — بطاقة مستديرة كبيرة بتدرج دافئ ---------- */
.ng-cta-banner{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding:56px 44px; position:relative; overflow:hidden;
  clip-path:none; border-radius:var(--card-radius);
  margin:60px 24px;
  border:none;
}
.ng-cta-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(360px 360px at 90% 0%, rgba(217,122,77,.28), transparent 70%);
}
.ng-cta-banner .container{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; position:relative; z-index:2; padding-inline:0; max-width:100%; }
.ng-cta-banner h3{ color:#fff; font-size:clamp(20px,2.6vw,27px); font-weight:800; }
.ng-cta-banner p{ color:#d8cdbe; margin-top:8px; font-size:14.5px; }
.ng-cta-banner .hero-actions{ margin-top:0; }
.ng-cta-banner .ng-btn-outline{ color:#fff; border-color:rgba(255,255,255,.45); }
.ng-cta-banner .ng-btn-outline:hover{ background:#fff; color:var(--navy); }
@media (max-width:700px){ .ng-cta-banner .container{ justify-content:center; text-align:center; } .ng-cta-banner{ margin:44px 16px; padding:44px 26px; } }

/* ---------- زر اتصال سريع داخل الهيدر (يظهر على الشاشات الواسعة فقط) ---------- */
.topbar-cta{ display:none; }
@media (min-width:901px){ .topbar-cta{ display:inline-flex; margin-inline-start:16px; padding:11px 22px; font-size:13px; } }

/* ---------- Share ---------- */
.ng-share{ text-align:center; padding:16px 0 50px; }
.share-title{ color:var(--navy); font-weight:800; font-size:20px; margin-bottom:22px; }
.share-icons{ display:flex; justify-content:center; gap:16px; }
.share-icons a{
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px; border-radius:50%; transition:.25s;
}
.share-icons a:hover{ transform:translateY(-4px); }
.share-icons a.wa{ background:var(--whatsapp); }
.share-icons a.tw{ background:var(--teal); }
.share-icons a.fb{ background:var(--blue); }

/* ---------- Keywords tag cloud ---------- */
.ng-keywords{ padding:20px 0 16px; text-align:center; }
.ng-keywords a{
  display:inline-block; margin:6px; padding:10px 20px; background:var(--surface); border:1px solid var(--line);
  color:var(--navy); font-size:13px; font-weight:600; transition:.25s; border-radius:999px;
}
.ng-keywords a:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- Breadcrumb / page hero (inner pages) — تدرج دافئ بزوايا سفلية مستديرة عملاقة ---------- */
.ng-page-hero{
  background:radial-gradient(120% 140% at 85% -20%, #3a2f24 0%, var(--navy) 50%, var(--navy-dark) 100%);
  padding:64px 0 78px; position:relative; overflow:hidden;
  border-bottom:none; border-radius:0 0 48px 48px;
}
.ng-page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(360px 360px at 8% 100%, rgba(138,155,116,.28), transparent 70%);
}
.ng-page-hero h1{ color:#fff; font-size:clamp(26px,3.6vw,38px); font-weight:800; position:relative; z-index:2; }
.ng-page-hero p{ color:#d8cdbe; margin-top:12px; max-width:720px; font-size:15px; position:relative; z-index:2; }
.ng-breadcrumbs{ font-size:13px; color:var(--blue); margin-bottom:14px; display:flex; gap:6px; flex-wrap:wrap; font-weight:600; position:relative; z-index:2; }
.ng-breadcrumbs a{ color:#c9bda9; }
.ng-breadcrumbs a:hover{ color:#fff; }

/* ---------- Filters / pagination (works gallery) ---------- */
.ng-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.ng-filter-pill{ padding:11px 22px; border:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--navy); background:var(--surface); border-radius:999px; }
.ng-filter-pill:hover{ background:var(--sage-soft); border-color:var(--teal); }
.ng-filter-pill.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.ng-pagination{ display:flex; justify-content:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.ng-pagination a, .ng-pagination span{
  min-width:42px; height:42px; padding-inline:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); font-weight:700; font-size:14px; color:var(--navy); border-radius:50%;
}
.ng-pagination .is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.ng-pagination .is-disabled{ opacity:.35; pointer-events:none; }

/* ---------- Gallery (works) ---------- */
.ng-gallery-item{ overflow:hidden; aspect-ratio:4/3; position:relative; border-radius:20px; box-shadow:0 10px 26px rgba(36,31,26,.1); cursor:zoom-in; }
.ng-gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ng-gallery-item:hover img{ transform:scale(1.1); }
.ng-gallery-item:hover{ box-shadow:0 18px 36px rgba(36,31,26,.2); }
.ng-gallery-item__overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,15,12,.85) 0%, rgba(20,15,12,0) 62%);
  display:flex; align-items:flex-end; padding:16px; opacity:0; transition:opacity .3s ease;
}
.ng-gallery-item:hover .ng-gallery-item__overlay{ opacity:1; }
.ng-gallery-item__overlay span{ color:#fff; font-size:13px; font-weight:700; }

/* ---------- Lightbox ---------- */
.ng-lightbox{ position:fixed; inset:0; background:rgba(20,15,12,.94); z-index:1100; display:none; align-items:center; justify-content:center; padding:30px; }
.ng-lightbox.is-open{ display:flex; }
.ng-lightbox img{ max-width:min(1000px,92vw); max-height:86vh; border-radius:20px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.ng-lightbox__close, .ng-lightbox__nav{
  position:absolute; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:none; color:#fff;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:17px;
}
.ng-lightbox__close:hover, .ng-lightbox__nav:hover{ background:var(--blue); }
.ng-lightbox__close{ top:20px; inset-inline-end:20px; }
.ng-lightbox__prev{ inset-inline-start:20px; top:50%; transform:translateY(-50%); }
.ng-lightbox__next{ inset-inline-end:20px; top:50%; transform:translateY(-50%); }

/* ---------- Forms (contact) ---------- */
.ng-card{ background:var(--surface); box-shadow:0 20px 50px rgba(36,31,26,.09); padding:36px; border-radius:var(--card-radius); border:1px solid var(--line); }
.ng-field{ margin-bottom:18px; }
.ng-field label{ display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.ng-field input, .ng-field select, .ng-field textarea{
  width:100%; padding:14px 18px; border:1px solid var(--line); font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--bg-soft);
  border-radius:14px;
}
.ng-field input:focus, .ng-field select:focus, .ng-field textarea:focus{ border-color:var(--blue); background:#fff; }
.ng-field textarea{ min-height:120px; resize:vertical; }
.ng-alert{ padding:16px 20px; margin-bottom:20px; font-size:14.5px; font-weight:700; border-inline-start:none; border-radius:16px; }
.ng-alert-ok{ background:var(--teal-soft); color:var(--teal-dark); }
.ng-alert-err{ background:#fdecec; color:#b3261e; }
.ng-info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.ng-info-row i{ width:44px; height:44px; background:var(--accent-soft); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; flex:none; border-radius:50%; }
.ng-info-row h4{ font-size:14.5px; color:var(--navy); margin-bottom:3px; font-weight:700; }
.ng-info-row p, .ng-info-row a{ font-size:14.5px; color:var(--ink-dim); }

/* ---------- Footer — لوحة مستديرة عائمة من الأعلى فوق شريط داكن ---------- */
.footer-dark{
  background:var(--navy);
  color:#f4ede2; padding:0; border-top:none;
}
.footer-dark .container{
  background:var(--panel); border-radius:var(--card-radius); padding:52px 40px; margin-top:-46px; position:relative; z-index:4;
  box-shadow:0 30px 60px rgba(20,15,12,.2);
}
.footer-map iframe, .footer-map .map-placeholder{ width:100%; height:280px; border:none; border-radius:20px; }
.footer-contact-title{ color:var(--navy); font-weight:800; font-size:24px; margin-bottom:16px; }
.footer-contact-text{ color:var(--ink-dim); line-height:2; margin-bottom:20px; }
.footer-icon-row{ display:flex; gap:14px; margin-bottom:18px; }
.footer-icon-row span{ color:var(--ink-dim); font-weight:700; align-self:center; font-size:13px; }
.footer-icons{ display:flex; gap:12px; }
.footer-icons a{ width:44px; height:44px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; border-radius:50%; transition:.25s; }
.footer-icons a:hover{ background:var(--blue-dark); transform:translateY(-3px); }
.footer-links{ margin-top:20px; }
.footer-links a{ color:var(--ink-dim); font-size:13px; display:inline-block; margin-inline-end:16px; margin-bottom:10px; }
.footer-links a:hover{ color:var(--blue-dark); }

.copyright-bar{ background:var(--navy); text-align:center; padding:26px 18px 22px; font-size:13px; color:#c9bda9; border-top:none; }
.copyright-bar strong{ color:#fff; }

@media (max-width:860px){
  .footer-dark .container{ padding:40px 24px; }
  .footer-dark .grid-2{ grid-template-columns:1fr; }
  .footer-contact-title, .footer-contact-text, .footer-icon-row, .footer-icons{ text-align:center; justify-content:center; }
}

/* ---------- Floating buttons ---------- */
.fab-wrap{ position:fixed; bottom:26px; inset-inline-start:22px; z-index:900; display:flex; flex-direction:column; align-items:center; gap:12px; }
.fab-wrap.is-hidden{ display:none; }
.fab-circle{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; box-shadow:0 12px 26px rgba(20,15,12,.28); border:none; border-radius:50%; transition:.25s; }
.fab-circle:hover{ transform:scale(1.08); }
.fab-circle.call{ background:var(--blue); }
.fab-circle.wat{ background:var(--whatsapp); }
.fab-circle.close{ background:var(--teal); font-size:15px; cursor:pointer; }
@media (max-width:767px){ .fab-wrap{ bottom:18px; inset-inline-start:16px; } }

/* ---------- Reveal on scroll ---------- */
.ng-reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.ng-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- 404 ---------- */
.ng-error-page{ min-height:55vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 20px; }
.ng-error-page h1{ font-size:clamp(60px,10vw,120px); color:var(--blue); font-weight:800; }