/* ===== ABSOLUTE LAST OVERRIDES: opened mobile menu must be solid ===== */
@media (max-width: 991px) {
  /* When menu is open, script.js adds .detached. Force solid colors with no transparency */
  .nav-menu.detached.menu-dark {
    background: #000 !important;
    background-color: #000 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .nav-menu.detached.menu-light {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}
/* ===== FINAL FIX: kill transparency of mobile menu at top (strongest selector) ===== */
@media (max-width: 991px) {
  .navbar.fixed-top.navbar-light.at-top .nav-menu.menu-dark {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* ===== Mobile menu explicit themes (driven by script.js: menu-dark/menu-light) ===== */
@media (max-width: 991px) {
  /* At top: solid black panel */
  .nav-menu.menu-dark {
    background: #000000 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .nav-menu.menu-dark a,
  .nav-menu.menu-dark .lang-toggle-text { color: #ffffff !important; }

  /* Scrolled: solid white panel */
  .nav-menu.menu-light {
    background: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .nav-menu.menu-light a,
  .nav-menu.menu-light .lang-toggle-text { color: var(--text-dark) !important; }
}
/* ===== ABSOLUTE LAST OVERRIDE: mobile menu must be solid black ===== */
@media (max-width: 991px) {
  .navbar.fixed-top.navbar-light.at-top .nav-menu,
  .navbar.fixed-top.navbar-light:not(.at-top) .nav-menu {
    background-color: #000000 !important;
    opacity: 1 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

/* Remove black underlay so the rest of the page does not turn black */
@media (max-width: 991px) {
  body.menu-open::after { display: none !important; content: none !important; }
}
}
/* ===== FINAL MOBILE MENU OVERRIDES (force solid black panel) ===== */
@media (max-width: 991px) {
  nav .collapse.navbar-collapse > ul.nav-menu,
  .navbar .nav-menu,
  ul.nav-menu,
  .nav-menu.active {
    background-color: #000000 !important;
    opacity: 1 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Make the collapse wrapper transparent; only the UL panel is black */
  nav .collapse.navbar-collapse { background-color: transparent !important; }
  /* Ensure the page overlay does not introduce perceived transparency above menu */
  body.menu-open::before { background: transparent !important; }
  /* Make sure items don't introduce their own backgrounds */
  .nav-menu li { background: transparent !important; }
  /* Do not stretch the panel to the full viewport; size to content with safe max */
  .nav-menu {
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - var(--nav-top, 68px) - 16px) !important;
    overflow-y: auto !important;
    padding-block: 8px !important;
  }
}
/* Reset and Base Styles - Updated Colors */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== Final overrides: ensure solid black and generous spacing on mobile ===== */
@media (max-width: 991px) {
  /* Stronger specificity to defeat earlier mobile rules */
  .navbar.fixed-top.navbar-light .nav-menu,
  .nav-menu {
    background: #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Increase spacing further */
  .nav-menu a { padding-top: 28px !important; padding-bottom: 28px !important; }
  .nav-menu .lang-toggle-text { padding: 28px 8px !important; color: #ffffff !important; }
  .nav-menu .lang-toggle-text .lang-label { color: inherit !important; display: inline; }
}

:root {
    /* SAF Palette from Coolors */
    --sand-50: #F2EAE0;   /* background light */
    --sand-100: #CFC0AB;  /* surface */
    --brand-300: #AC9576; /* primary brand */
    --taupe-400: #958167;
    --taupe-500: #7E6C57;
    --brown-600: #6D5245;
    --brown-700: #5B3833;
    --wine-800: #68081a;  /* strong accent */
    --gray-500: #61615F;  /* neutral text */
    --charcoal: #2C2C2B;  /* deep text */

    /* Semantic tokens */
    --primary: var(--brand-300);
    --primary-strong: var(--wine-800);
    --background: var(--sand-50);
    --surface: var(--sand-100);
    --text-dark: var(--charcoal);
    --text-light: var(--gray-500);
    --border: #D9CEC0; /* soft border derived from palette */
    --overlay-dark: rgba(44, 44, 43, 0.88); /* darker slider overlay */

    /* Backwards compatibility with existing var names */
    --primary-blue: var(--brand-300);
    --accent-red: var(--wine-800);
    --beige: var(--sand-50);
    --black: var(--charcoal);

    --primary-dark: var(--charcoal);
    --secondary-dark: var(--charcoal);
    --accent: var(--primary);             /* used widely across UI */
    --gold: var(--primary-strong);        /* use wine as strong accent */
    --cream: var(--background);
    --accent-gold: var(--primary);        /* loader usage */
    --light-beige: var(--surface);
    --very-dark-brown: var(--charcoal);
    --feature-border: var(--primary);
    --experience-bg: url('img/hero.jpg');
}

html {
    scroll-behavior: smooth;
    width: 100%; 
    max-width: 100%; 
    overflow-x: hidden;
}

body {
    font-family: 'Cairo', 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
    background: var(--beige); /* full-page beige background */
    position: relative;
}

body[dir="rtl"] {
    font-family: 'Cairo', sans-serif;
}

body[dir="ltr"] {
    font-family: 'Inter', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Loading Screen (logo only, larger, less transparent) */
#loading-screen {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85); /* أقل شفافية لتمييز الشعار */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader { text-align: center; color: #fff; }

.logo-loader {
  display: block;
  width: 280px; /* أكبر بشكل ملحوظ */
  max-width: 70vw; /* لا تتجاوز عرض الشاشة */
  height: auto;
  margin: 0 auto;
  animation: waveFloat 2.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.48));
}

@media (min-width: 1200px) {
  .logo-loader { width: 340px; }
}

@media (max-width: 575px) {
  .logo-loader { width: 220px; }
}

.loading-bar { display: none; }
.loading-progress { display: none; }

/* حركة موجية للشعار نفسه (طفو + ميلان خفيف) */
@keyframes waveFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-8px) rotate(-2deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  75%  { transform: translateY(8px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Hard fallback: once JS adds .loaded to body, hide preloader forcibly */
body.loaded #loading-screen { opacity: 0 !important; pointer-events: none !important; }
body.loaded #loading-screen { display: none !important; }

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent; /* base: no color; handled by .at-top / .scrolled */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1000;
    padding: 0;
    height: 88px; /* larger header height */
    transition: background-color 0.25s ease, border-color 0.25s ease, padding 0.25s ease;
    border-bottom: none;
    max-width: 100%; 
    overflow-x: hidden;
}

.navbar.fixed-top.navbar-light.at-top {
    background-color: rgba(0, 0, 0, 0.45) !important;
    border: none !important; /* no bottom border when transparent */
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.navbar.fixed-top.navbar-light.scrolled {
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important; /* only bottom divider when white */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.navbar.scrolled { height: 84px; padding: 0; }

.navbar.fixed-top.navbar-light:not(.at-top) {
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nav-container { 
    position: relative; 
    z-index: 1500; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    max-width: 100%; 
    overflow: visible; /* allow dropdowns to escape */
}

.nav-menu {
    position: relative; /* stacking context for dropdown */
    z-index: 1501;
    display: flex !important;
    align-items: center;
    gap: 16px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    max-width: 100%; 
    overflow: visible; /* ensure dropdown visible */
}

.nav-menu li { list-style: none; margin: 0; padding: 0; }
.nav-menu a { 
    text-decoration: none; 
    line-height: 1; 
    padding: 0; 
    font-weight: 600; 
    font-size: 0.95rem;
    color: black !important; /* الافتراضي: أسود */
}

.navbar.fixed-top.navbar-light.at-top .nav-menu a,
.navbar.fixed-top.navbar-light.at-top .lang-link { color: rgba(255,255,255,0.95) !important; }

.navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a:link,
.navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a:visited { color: var(--text-dark) !important; }
.navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a.active,
.navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a:focus { color: var(--accent) !important; }
.navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a:hover { color: var(--accent) !important; }

.navbar.fixed-top.navbar-light:not(.at-top) .lang-link:link,
.navbar.fixed-top.navbar-light:not(.at-top) .lang-link:visited { color: var(--text-dark) !important; }
.navbar.fixed-top.navbar-light:not(.at-top) .lang-link.active,
.navbar.fixed-top.navbar-light:not(.at-top) .lang-link:focus { color: var(--accent) !important; }
.navbar.fixed-top.navbar-light:not(.at-top) .lang-link:hover { color: var(--accent) !important; }

.navbar .nav-menu a:hover,
.navbar .lang-link:hover { color: var(--accent) !important; }

/* When scrolled: enforce link colors via body class to beat UA defaults */
body.nav-scrolled .nav-menu a:link,
body.nav-scrolled .nav-menu a:visited { color: var(--text-dark) !important; }
body.nav-scrolled .nav-menu a.active,
body.nav-scrolled .nav-menu a:focus { color: var(--accent) !important; }
body.nav-scrolled .nav-menu a:hover { color: var(--accent) !important; }

body.nav-scrolled .lang-link:link,
body.nav-scrolled .lang-link:visited { color: var(--text-dark) !important; }
body.nav-scrolled .lang-link.active,
body.nav-scrolled .lang-link:focus { color: var(--accent) !important; }
body.nav-scrolled .lang-link:hover { color: var(--accent) !important; }

.nav-logo .logo-img { height: 68px; width: auto; }
.navbar.scrolled .nav-logo .logo-img { height: 64px; }

.navbar::before { content: none !important; }

/* Force white navbar whenever page is scrolled (robust fallback) */
body.nav-scrolled .navbar,
body.nav-scrolled .navbar.fixed-top.navbar-light {
  background-color: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* SVG hamburger/close visibility */
.hamburger { background: transparent; border: 0; padding: 8px; display: none; color: var(--text-dark); }
.hamburger .icon-close { display: none; }
.hamburger.active .icon-burger { display: none; }
.hamburger.active .icon-close { display: block; }

/* Colors at top vs scrolled */
.navbar.fixed-top.navbar-light.at-top .hamburger { color: #ffffff; }
.navbar.fixed-top.navbar-light:not(.at-top) .hamburger { color: var(--text-dark); }

/* Header transparency at top: slightly lighter for better clarity */
.navbar.fixed-top.navbar-light.at-top { 
  background-color: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
}

/* Make the translucent header a bit darker to improve logo contrast at top */
.navbar.fixed-top.navbar-light.at-top { 
  background: rgba(0,0,0,0.45) !important; 
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
}

/* Switch header logo source depending on state */
.navbar.fixed-top.navbar-light:not(.at-top) .logo-img { filter: none; }
.navbar.fixed-top.navbar-light.at-top .logo-img { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }

/* Ensure header logo stays visible on white header */
.navbar.fixed-top.navbar-light:not(.at-top) .logo-img { opacity: 1; }

/* 3-bar hamburger per template */
.hamburger.navbar-toggler { 
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; 
  background: transparent; border: 0; padding: 6px; cursor: pointer; border-radius: 8px;
}
.hamburger.navbar-toggler .icon-bar {
  display: block;
  height: 2px;
  width: 25px;
  background: var(--accent); /* استخدم الأزرق الخاص بالموقع */
  margin: 7px 0;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, background-color .3s ease-in-out;
}
/* Animate to X when active */
.hamburger.navbar-toggler.active .icon-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.navbar-toggler.active .icon-bar:nth-child(2) { opacity: 0; }
.hamburger.navbar-toggler.active .icon-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Show hamburger on mobile */
@media (max-width: 991px) {
  .hamburger.navbar-toggler { display: inline-flex; }
    .hamburger {
      display: flex !important;
    }
}

/* Mobile menu as dropdown panel below header (like template) */
@media (max-width: 991px) {
  /* Base panel */
  .nav-menu {
    position: fixed; left: 0; right: 0; top: var(--nav-top, 88px);
    display: flex !important; flex-direction: column; align-items: flex-start;
    margin: 0 !important; list-style: none; padding: 12px 20px; gap: 6px;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    z-index: 1000;
    width: 100%; 
    box-sizing: border-box;
  }
  /* Panel colors depend on header state */
  .navbar.fixed-top.navbar-light.at-top .nav-menu { background: rgba(0,0,0,0.35) !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) .nav-menu { background: #ffffff; }

  .nav-menu.active { max-height: 70vh; opacity: 1; pointer-events: auto; }
  .nav-menu li { width: 100%; }
  .nav-menu a { width: 100%; display: block; padding: 12px 2px; font-size: 1rem; font-weight: 600; text-decoration: none; }
  /* Link colors for both modes */
  .navbar.fixed-top.navbar-light.at-top .nav-menu a { color: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a { color: var(--text-dark) !important; }
  .nav-menu a { border: 0; }
}

/* Remove heavy dividers from previous overlay menu */
@media (max-width: 991px) {
  .nav-menu a { border: 0; }
}

/* Mobile Navigation */
.hamburger { 
  width: 44px; height: 44px; display: none; align-items: center; justify-content: center; 
  cursor: pointer; border-radius: 10px; transition: background 0.2s ease; user-select: none;
}
.hamburger:hover { background: rgba(0,0,0,0.06); }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text-dark); margin: 3px 0; transition: transform .25s ease, opacity .25s ease, background .25s ease; }

/* Dark lines on white header; white lines when at top */
.navbar.fixed-top.navbar-light.at-top .hamburger span { background: #fff; }

.hamburger.active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Panel menu for mobile */
@media (max-width: 991px) {
  .hamburger { display: flex; position: relative; z-index: 1001; }
}

/* Prevent body scroll when mobile menu open */
body.menu-open { overflow: hidden; }

/* Template-like tweaks */
/* On mobile, keep header transparent at top (like template) */
@media (max-width: 991px) {
  .navbar.fixed-top.navbar-light.at-top {
    background-color: transparent !important;
    border: none !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }
  .navbar.fixed-top.navbar-light.at-top .nav-menu a,
  .navbar.fixed-top.navbar-light.at-top .lang-link { color: rgba(255,255,255,0.95) !important; }
  .navbar.fixed-top.navbar-light.at-top .hamburger span { background: #fff; }
}

/* Body backdrop when mobile menu is open */
body.menu-open::before {
  content: "";
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,0.4);
  pointer-events: none !important;
}

/* Mobile panel refinements to match template look */
@media (max-width: 991px) {
  .nav-menu {
    border-top: 1px solid #eee;
    background: #fff;
  }
  .nav-menu li { width: 100%; }
  .nav-menu a {
    display: block;
    width: 100%;
    padding: 14px 2px; /* taller tap targets */
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    font-weight: 600;
  }
  /* Link colors for both modes */
  .navbar.fixed-top.navbar-light.at-top .nav-menu a { color: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a { color: var(--text-dark) !important; }
  .nav-menu a { border: 0; }
}

/* Desktop hover underline similar to template */
@media (min-width: 992px) {
  .nav-menu a { position: relative; }
  .nav-menu a::after {
    content: "";
    position: absolute; left: 0; bottom: -10px; height: 2px; width: 0;
    background: var(--accent);
    transition: width .2s ease;
  }
  .nav-menu a:hover::after,
  .nav-menu a.active::after { width: 100%; }
}

/* Force 3 blue bars on the hamburger at all times */
.hamburger.navbar-toggler { 
  display: none; 
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  gap: 6px; 
  width: 44px; height: 44px; padding: 6px;
}
.hamburger.navbar-toggler .icon-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0; 
  background: var(--accent) !important; 
  transition: transform .25s ease-in-out, opacity .25s ease-in-out;
  transform-origin: center; 
}
/* Active -> X (adjusted for gap spacing) */
.hamburger.navbar-toggler.active .icon-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.navbar-toggler.active .icon-bar:nth-child(2) { opacity: 0; }
.hamburger.navbar-toggler.active .icon-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile dropdown panel: match header transparency at top and remove lines */
@media (max-width: 991px) {
  /* Base dropdown under header */
  .nav-menu {
    position: fixed; left: 0; right: 0; top: var(--nav-top, 88px);
    display: flex !important; flex-direction: column; align-items: flex-start;
    padding: 12px 20px; margin: 0 !important; list-style: none; gap: 6px;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
    box-shadow: none; border: 0;
    z-index: 1000;
    width: 100%; 
    box-sizing: border-box;
  }
  /* Panel background equals header transparency at top; solid white when scrolled */
  .navbar.fixed-top.navbar-light.at-top .nav-menu { 
    background: rgba(0,0,0,0.35) !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
  }
  .navbar.fixed-top.navbar-light:not(.at-top) .nav-menu { background: #ffffff; }

  /* Readable link colors + no dividers */
  .navbar.fixed-top.navbar-light.at-top .nav-menu a { color: #ffffff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) .nav-menu a { color: var(--text-dark) !important; }
  .nav-menu a { border: none !important; width: 100%; padding: 12px 2px; font-size: 1rem; font-weight: 600; }
}

/* Ensure collapse wrapper never hides mobile menu (we control show via .nav-menu.active) */
@media (max-width: 991px) {
  .collapse.navbar-collapse { 
    display: block !important; 
    height: auto !important; 
    overflow: visible !important; 
    visibility: visible !important;
  }
  /* Make sure dropdown sits above overlays and header */
  .nav-menu { z-index: 1200; }
  .nav-menu.active { max-height: 72vh; opacity: 1; pointer-events: auto; }
}

/* Final stacking fix: make mobile menu always above hero/header at top */
@media (max-width: 991px) {
  .navbar { z-index: 2002; }
  .nav-menu { position: fixed !important; z-index: 2001 !important; }
  body.menu-open::before { z-index: 1999 !important; }
}

/* HARD OVERRIDES: mobile menu must appear when active (especially at top) */
@media (max-width: 991px) {
  .nav-menu { position: fixed; left: 0; right: 0; top: var(--nav-top, 88px); width: 100%; box-sizing: border-box; }
  .nav-menu.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 80vh !important;
    height: auto !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .navbar.fixed-top.navbar-light.at-top .nav-menu { 
    background: rgba(0,0,0,0.35) !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
  }
  .navbar.fixed-top.navbar-light.at-top .nav-menu a { color: #fff !important; }
  .nav-menu li { display: block; width: 100%; }
  .nav-menu a { display: block; width: 100%; padding: 12px 4px; font-size: 1rem; font-weight: 600; text-decoration: none; }
}

/* ===== Bulletproof mobile dropdown visibility (<=991px) ===== */
@media (max-width: 991px) {
  /* 1) Collapse wrapper must not hide children */
  nav .collapse.navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    position: relative !important;
    isolation: auto !important; /* avoid creating stacking context that hides menu */
    z-index: 9997 !important;
  }

  /* 2) Base menu panel (override any earlier 'inset:0' or top:0 rules) */
  nav .collapse.navbar-collapse > ul.nav-menu,
  ul.nav-menu {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: var(--nav-top, 68px) !important;
    width: 100% !important; box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important; align-items: flex-start !important;
    padding: 12px 20px !important; margin: 0 !important; list-style: none !important; gap: 6px !important;
    opacity: 0 !important; max-height: 0 !important; pointer-events: none !important;
    transition: max-height .25s ease, opacity .2s ease !important;
    z-index: 10000 !important; /* above header and overlay */
  }

  /* 3) Active state: show panel and enable clicks */
  nav .collapse.navbar-collapse > ul.nav-menu.active,
  ul.nav-menu.active {
    opacity: 1 !important; max-height: 80vh !important; pointer-events: auto !important;
  }

  /* 4) Colors by header state */
  .navbar.fixed-top.navbar-light.at-top ul.nav-menu { 
    background: rgba(0,0,0,0.35) !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
  }
  .navbar.fixed-top.navbar-light.at-top ul.nav-menu a { color: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) ul.nav-menu { background: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) ul.nav-menu a { color: var(--text-dark) !important; }

  /* 5) Keep hamburger above and clickable */
  nav #hamburger.hamburger.navbar-toggler {
    position: fixed !important; inset-inline-end: 12px; top: 8px;
    z-index: 10002 !important; pointer-events: auto !important;
  }

  /* 6) Overlay sits below menu */
  body.menu-open::before { z-index: 9998 !important; pointer-events: none !important; }
  .navbar { z-index: 9997 !important; }
}

/* HYPER-SPECIFIC: beat any legacy z-index (e.g., 3002) and enable clicks */
@media (max-width: 991px) {
  html.menu-open body.menu-open nav.navbar.fixed-top.navbar-light.at-top div#navbarSupportedContent.collapse.navbar-collapse > ul.nav-menu.active,
  html.menu-open body.menu-open nav.navbar.fixed-top.navbar-light div#navbarSupportedContent.collapse.navbar-collapse > ul.nav-menu.active {
    z-index: 2147483645 !important;
    position: fixed !important;
    pointer-events: auto !important;
  }
  html.menu-open body.menu-open ul.nav-menu.active a { position: relative; z-index: 1; pointer-events: auto; }
}

/* Keep the hamburger/close button clickable above the dropdown on mobile */
@media (max-width: 991px) {
  #hamburger.hamburger.navbar-toggler { position: fixed !important; z-index: 10002 !important; }
}

/* Force the dropdown menu to the very top layer when active (both selectors) */
@media (max-width: 991px) {
  .nav-menu.active { z-index: 10000 !important; }
  ul.nav-menu.active { z-index: 10000 !important; }
}

/* ================= AUTHORITATIVE MOBILE MENU RULES (<=991px) ================= */
@media (max-width: 991px) {
  /* 1) Collapse wrapper must not hide children or create clipping/stacking issues */
  nav .collapse.navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    position: relative !important;
    isolation: auto !important; /* avoid creating stacking context that hides menu */
    z-index: 9997 !important;
  }

  /* 2) Base menu panel (override any earlier 'inset:0' or top:0 rules) */
  nav .collapse.navbar-collapse > ul.nav-menu,
  ul.nav-menu {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: var(--nav-top, 68px) !important;
    width: 100% !important; box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important; align-items: flex-start !important;
    padding: 12px 20px !important; margin: 0 !important; list-style: none !important; gap: 6px !important;
    opacity: 0 !important; max-height: 0 !important; pointer-events: none !important;
    transition: max-height .25s ease, opacity .2s ease !important;
    z-index: 10000 !important; /* above header and overlay */
  }

  /* 3) Active state: show panel and enable clicks */
  nav .collapse.navbar-collapse > ul.nav-menu.active,
  ul.nav-menu.active {
    opacity: 1 !important; max-height: 80vh !important; pointer-events: auto !important;
  }

  /* 4) Colors by header state */
  .navbar.fixed-top.navbar-light.at-top ul.nav-menu { 
    background: rgba(0,0,0,0.35) !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
  }
  .navbar.fixed-top.navbar-light.at-top ul.nav-menu a { color: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) ul.nav-menu { background: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) ul.nav-menu a { color: var(--text-dark) !important; }

  /* 5) Keep hamburger above and clickable */
  nav #hamburger.hamburger.navbar-toggler {
    position: fixed !important; inset-inline-end: 12px; top: 8px;
    z-index: 10002 !important; pointer-events: auto !important;
  }

  /* 6) Overlay sits below menu */
  body.menu-open::before { z-index: 9998 !important; pointer-events: none !important; }
  .navbar { z-index: 9997 !important; }
}

/* Do NOT let the dark overlay block clicks */
body.menu-open::before { pointer-events: none !important; }

/* Mobile: keep the close (X) button above everything and menu clickable */
@media (max-width: 991px) {
  #hamburger.hamburger.navbar-toggler { position: fixed !important; z-index: 10002 !important; }
  ul.nav-menu, .nav-menu { pointer-events: auto !important; }
  ul.nav-menu.active, .nav-menu.active { z-index: 10000 !important; }
}

/* Ensure mobile menu background matches header state even when menu is detached */
@media (max-width: 991px) {
  /* At top (body does NOT have .nav-scrolled): dark menu with white text */
  body.menu-open:not(.nav-scrolled) ul.nav-menu,
  body.menu-open:not(.nav-scrolled) .nav-menu {
   /* background: rgba(0,0,0,0.35) !important;*/
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.menu-open:not(.nav-scrolled) ul.nav-menu a,
  body.menu-open:not(.nav-scrolled) .nav-menu a {
    color: #fff !important;
  }
  /* Scrolled: white menu with dark text */
  body.menu-open.nav-scrolled ul.nav-menu,
  body.menu-open.nav-scrolled .nav-menu {
    background: #ffffff !important;
  }
  body.menu-open.nav-scrolled ul.nav-menu a,
  body.menu-open.nav-scrolled .nav-menu a {
    color: var(--text-dark) !important;
  }
}

/* Hero Section */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 100%; 
    overflow-x: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark);
    pointer-events: none; /* overlay visual only, do not block interactions */
    z-index: 1;
}

.hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    padding: 0 20px;
    animation: fadeInUp 1s ease-out;
    position: relative;
    z-index: 2;
}

.hero-logo {
    margin-bottom: 30px;
    animation: fadeInDown 1s ease-out 0.5s both;
}

.hero-logo-img { height: 180px; max-height: 180px; width: auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4)); }

@media (min-width: 1200px) {
  .hero-logo-img { height: 200px; max-height: 200px; }
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: -1px;
}

.hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 50px;
    opacity: 0.95;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: 18px 40px;
    border: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(104, 8, 26, 0.25); /* wine accent glow */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary:hover {
    background: var(--primary-strong); /* deep wine on hover */
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(104, 8, 26, 0.35);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-dark);
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

.scroll-indicator {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    z-index: 2;
}

/* Hero Triangle Shape */
.hero-triangle {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 100px;
    background: white;
    clip-path: polygon(0 40%, 50% 100%, 100% 40%, 100% 100%, 0 100%);
    z-index: 1;
}

.hero {
    position: relative;
    margin-bottom: -1px;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* === Slider (Hero) compact heights on small screens — template-like === */
/* Generic fallback for older browsers */
@media (max-width: 575px) {
  .hero { min-height: 82vh; }
}

/* iPhone 14 Pro Max width ~430px */
@media (max-width: 430px) {
  /* Prefer small viewport height to avoid browser UI affecting vh */
  .hero { min-height: clamp(500px, 72svh, 78svh); }
  @supports not (height: 1svh) {
    .hero { min-height: clamp(500px, 80vh, 86vh); }
  }
  .hero-content { padding-top: 9vh; padding-bottom: 5vh; }
  .hero-triangle { height: 34px; }
  .scroll-indicator { bottom: 10px; }
  .hero-background video { width: 100%; height: 100%; object-fit: cover; }
}

/* Very small phones */
@media (max-width: 360px) {
  .hero { min-height: clamp(460px, 68svh, 72svh); }
  @supports not (height: 1svh) {
    .hero { min-height: clamp(460px, 76vh, 80vh); }
  }
  .hero-content { padding-top: 8vh; padding-bottom: 5vh; }
  .hero-triangle { height: 30px; }
}

/* === Force hero height to match template on small screens (override 100vh) === */
@media (max-width: 575px) {
  .hero { height: 82vh !important; min-height: 0 !important; }
}
@media (max-width: 430px) {
  .hero { height: 72svh !important; min-height: 0 !important; }
  @supports not (height: 1svh) { .hero { height: 80vh !important; } }
  .hero-background, .hero-background video { height: 100% !important; }
}
@media (max-width: 360px) {
  .hero { height: 68svh !important; min-height: 0 !important; }
  @supports not (height: 1svh) { .hero { height: 76vh !important; } }
}

/* === Strong overrides to match template hero height on small screens === */
@media (max-width: 768px) {
  .hero { height: 70svh !important; min-height: 0 !important; }
  @supports not (height: 1svh) { .hero { height: 78vh !important; } }
  .hero-content { padding-top: 9vh; padding-bottom: 5vh; }
  .hero-logo-img { height: 100px; }
  .hero-title { font-size: 1.8rem; line-height: 1.25; }
  .hero-subtitle { font-size: 0.95rem; }
  .hero-triangle { height: 34px; }

  .text-wrapper {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    background: #f8f3ee; /* requested beige */
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
  }

  .text-wrapper.flipped {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background: #f8f3ee; /* keep consistent with main text-wrapper */
    box-sizing: border-box;
  }
}

@media (max-width: 430px) {
  .hero { height: 66svh !important; }
  @supports not (height: 1svh) { .hero { height: 74vh !important; } }
  .hero-content { padding-top: 8vh; padding-bottom: 4vh; }
  .hero-logo-img { height: 72px; }
  .hero-title { font-size: 14px; }
  .hero-triangle { height: 30px; }
}

@media (max-width: 360px) {
  .hero { height: 62svh !important; }
  @supports not (height: 1svh) { .hero { height: 70vh !important; } }
  .hero-content { padding-top: 7vh; padding-bottom: 4vh; }
  .hero-logo-img { height: 64px; }
  .hero-title { font-size: 14px; }
  .hero-triangle { height: 28px; }
}

/* Section Styles */
section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.section-header p {
    font-size: 1.3rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 500;
    line-height: 1.6;
}

/* About Section */
#about {
    background: #ffffff; /* مثل خلفية الخدمات */
    padding: 100px 0;
}

#about .section-header h2 {
    font-size: 2.2rem;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    display: inline-block;
    position: relative;
    padding-inline-start: 18px; /* مساحة للمربع الزخرفي */
}

#about .section-header h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    border: 3px solid var(--feature-border); /* أصفر مثل القالب */
    box-sizing: border-box;
}

.why-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

.why-item {
    background: #ffffff;
    border: 1px solid var(--feature-border);
    border-top: 0; /* افتح الإطار من الأعلى مثل القالب */
    border-radius: 6px;
    padding: 30px;
    margin-top: 1.5em;
    text-align: center;
    position: relative;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.why-item::before,
.why-item::after {
    content: "";
    position: absolute;
    top: 10px; /* محاذاة تامة مع أعلى البطاقة */
    height: 2px;
    width: 70px;
    background: var(--feature-border);
}

.why-item::before { inset-inline-start: 28px; }
.why-item::after { inset-inline-end: 28px; }

.why-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.why-icon {
    position: relative;
    z-index: 1; /* لضمان ظهور الأيقونة فوق الخطين */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #68081a !important; /* خمري للقسم */
    font-size: 4rem; /* أيقونة أكبر مثل القالب */
    margin: -88px auto 16px; /* رفع أكثر لمحاذاة الحد العلوي */
    /* رفع الأيقونة للأعلى أكثر */
}

.why-icon i,
.why-icon .fa,
.why-icon .fas,
.why-icon .far,
.why-icon .fal,
.why-icon .bi,
.why-icon svg {
    color: #68081a !important;
    fill: #68081a !important;
    stroke: #68081a !important;
}

.why-item h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.why-item p {
    color: #61615F;
    font-size: .95rem;
    line-height: 1.8;
}

@media (max-width: 480px) {
  .why-icon {
    margin: -72px auto 14px; /* تخفيف الرفع على الشاشات الصغيرة */
  }
}

/* Catch-all: force wine color for any content inside why-icon (About section) */
#about .why-icon,
#about .why-icon *,
#about .why-icon::before,
#about .why-icon *::before {
  color: #68081a !important;
}

/* Ultra-specific overrides for Linearicons inside About section */
#about .why-item .why-icon .lnr-apartment:before,
#about .why-item .why-icon .lnr-apartment::before,
#about .why-item .why-icon .lnr-eye:before,
#about .why-item .why-icon .lnr-eye::before,
#about .why-item .why-icon [class^="lnr-"]:before,
#about .why-item .why-icon [class^="lnr-"]::before,
#about .why-item .why-icon [class*=" lnr-"]:before,
#about .why-item .why-icon [class*=" lnr-"]::before {
  color: #68081a !important;
}

#about .why-item .why-icon .lnr-apartment,
#about .why-item .why-icon .lnr-eye,
#about .why-item .why-icon [class^="lnr-"],
#about .why-item .why-icon [class*=" lnr-"] {
    color: #68081a !important;
}

/* About section: hard-force wine color on the Linearicons apartment icon */
#about .lnr-apartment,
#about .lnr-apartment:before,
#about .lnr-apartment::before,
#about .lnr.lnr-apartment,
#about .lnr.lnr-apartment:before,
#about .lnr.lnr-apartment::before {
  color: #68081a !important;
}

/* Services Section */
.services {
    padding: 100px 0;
    background: white;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.05) 0%, transparent 100%);
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 60px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    align-items: stretch;
    min-height: 400px;
    position: relative;
}

.small-margin {
    margin-bottom: 40px;
}

.col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 58.3333%;
    max-width: 58.333333%;
    padding-right: 0;
    padding-left: 0;
    display: flex;
    align-items: stretch;
}

.col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 41.6667%;
    max-width: 41.666667%;
    padding-right: 0;
    padding-left: 0;
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.text-center {
    text-align: center !important;
}

.text-wrapper {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    background: #f8f3ee; /* requested beige */
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

.text-wrapper.flipped {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background: #f8f3ee; /* keep consistent with main text-wrapper */
    box-sizing: border-box;
}

.img-fluid {
    width: 85%; /* تقليل عرض الصور في الخدمات */
    margin: 0 auto; /* توسيط الصورة داخل العمود */
    height: 400px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.border-box {
    position: absolute;
    background: none;
    border: 1px solid var(--primary-blue); /* تغيير لون الحدود إلى الأزرق */
    top: -2.5%;
    bottom: 0;
    left: -40px;
    pointer-events: none;
    width: 90%;
    height: 105%;
    z-index: 0;
}

.border-box.flipped {
    top: -2.5%;
    right: -30px;
}

@media (max-width: 768px) {
  /* على الشاشات الصغيرة تبقى الصور بعرض كامل */
  .img-fluid { width: 100%; }
}

/* === Services: responsive fixes for small screens === */
@media (max-width: 768px) {
  /* Stack columns instead of fixed 58%/42% */
  .services .row { min-height: auto; }
  .services .col-md-7,
  .services .col-md-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 0;
    padding-left: 0;
  }
  /* Lighter paddings for text container */
  .services .text-wrapper,
  .services .text-wrapper.flipped {
    padding: 24px 18px;
  }
  /* Make images adapt height to avoid overflow on phones */
  .services .img-fluid {
    width: 100% !important;
    height: auto !important;
    max-height: 260px;
  }
  /* Remove decorative border box on small screens to prevent layout issues */
  .services .border-box { display: none; }
  /* Tighter vertical rhythm */
  .services .services-list { gap: 36px; }
}

@media (max-width: 430px) {
  .services .img-fluid { max-height: 220px; }
}

/* Experience Section */
.experience {
    position: relative;
    padding: 70px 0; /* تقليل الارتفاع العمودي */
    background-image: var(--experience-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* تأثير بارالاكس بسيط مثل testimonial */
}

.experience::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55); /* تراكب لتوضيح النص */
}

#experience .container { position: relative; z-index: 1; }
#experience .section-header { margin-bottom: 30px; } /* تقليل المسافة تحت العنوان */
#experience .section-header h2 {
  color: #fff;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--primary-blue); /* خط سفلي أزرق أسفل العنوان */
}
#experience .section-header p { color: rgba(255,255,255,0.9); }
#experience, #experience p, #experience h3, #experience h4 { color: #fff; }

.experience-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px; /* تقليل المسافات بين العناصر */
}

.feature-item {
    text-align: center;
    padding: 24px 16px; /* تقليل الحشوات داخل العنصر */
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-icon i {
    font-size: 3rem; /* حجم مناسب فوق الخلفية */
    color: #fff;
}

.feature-item h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.feature-item p {
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
}

@media (max-width: 768px) {
  .experience { background-attachment: scroll; padding: 50px 0; } /* تقليل إضافي على الجوال */
}

/* Contact Section - simplified like About/Services */
.contact {
    background: #ffffff;
    padding: 80px 0; /* أقرب لتباعد الأقسام البيضاء */
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-dark), var(--accent-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon i {
    font-size: 1.5rem;
    color: white;
}

.contact-details h3 {
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.contact-details p {
    color: var(--text-light);
}

/* Contact Form */
.contact-form {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.input-icon { position: relative; }
.input-icon i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3a7;
    pointer-events: none;
    font-size: 18px;
}

/* Icon placement for RTL/LTR */
[dir="rtl"] .input-icon i { right: 14px; }
[dir="ltr"] .input-icon i { left: 14px; }

/* Add padding to inputs to make space for icons */
.input-icon input,
.input-icon textarea,
.input-icon select {
    padding-inline-start: 42px;
}
[dir="ltr"] .input-icon input,
[dir="ltr"] .input-icon textarea,
[dir="ltr"] .input-icon select {
    padding-left: 42px;
    padding-right: 15px;
}
[dir="rtl"] .input-icon input,
[dir="rtl"] .input-icon textarea,
[dir="rtl"] .input-icon select {
    padding-right: 42px;
    padding-left: 15px;
}

/* Focus state improvements */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(84, 151, 167, 0.15);
}

/* Full-width button */
.btn-block {
    width: 100%;
    margin-top: 10px;
    padding: 14px 18px;
}

/* Responsive form grid */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 15px;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-dark);
}

.form-group label {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #999;
    transition: all 0.3s ease;
    pointer-events: none;
}

[dir="ltr"] .form-group label {
    right: auto;
    left: 15px;
}

.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -10px;
    right: 10px;
    font-size: 0.8rem;
    color: var(--primary-dark);
    background: white;
    padding: 0 5px;
}

[dir="ltr"] .form-group input:focus + label,
[dir="ltr"] .form-group textarea:focus + label,
[dir="ltr"] .form-group input:not(:placeholder-shown) + label,
[dir="ltr"] .form-group textarea:not(:placeholder-shown) + label {
    right: auto;
    left: 10px;
}

/* Footer */
.footer {
    background: var(--primary-dark);
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 20px;
    color: var(--accent-gold);
}

.footer-section p {
    color: #ccc;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--accent-gold);
}

.footer-contact p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Force phone/email links in footer to inherit footer color (prevent blue auto-color) */
.footer-contact a,
.footer-contact a:link,
.footer-contact a:visited {
  color: #ccc !important; /* match footer text color */
  text-decoration: none;
}
.footer-contact a:hover,
.footer-contact a:focus {
  color: var(--accent-gold) !important;
  text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    text-align: center;
    color: #ccc;
}

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  inset-inline-end: 16px; /* right in LTR, left in RTL */
  bottom: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  z-index: 1500;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.26); }
.whatsapp-float:active { transform: translateY(0); }

/* Better spacing on very small phones */
@media (max-width: 430px) {
  .whatsapp-float { width: 52px; height: 52px; bottom: 12px; inset-inline-end: 12px; }
}

/* WhatsApp mini chat widget */
.wa-widget {
  position: fixed;
  bottom: 84px; /* above the floating button */
  inset-inline-end: 16px;
  z-index: 1500;
}
.wa-panel {
  width: min(320px, 90vw);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
.wa-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #075E54; /* WhatsApp dark */
  color: #fff;
  padding: 10px 12px;
}
.wa-title { font-weight: 600; font-size: 14px; }
.wa-close { background: transparent; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.wa-body { display: grid; gap: 10px; padding: 12px; }
.wa-body textarea {
  width: 100%;
  resize: vertical;
  max-height: 160px;
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  outline: none;
  font-family: inherit;
  font-size: 14px;
}
.wa-body textarea:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(192,163,131,0.18); }
.wa-send {
  background: #25D366;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.wa-send:hover { filter: brightness(0.95); }

@media (max-width: 430px) {
  .wa-widget { bottom: 72px; inset-inline-end: 12px; }
}

/* Screen-reader only text */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        display: none;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-logo-img {
        height: 80px;
    }
    
    .hero-triangle {
        height: 60px;
    }
    
    .about {
        padding-top: 80px;
    }
    
    .scroll-indicator {
        bottom: 50px;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .services-list {
        gap: 40px;
    }
    
    .service-item {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 30px 20px;
    }
    
    .service-image {
        flex: none;
        width: 100%;
        max-width: 300px;
    }
    
    .service-content {
        text-align: center;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .service-card,
    .contact-form {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 14px;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .btn-primary,
    .btn-secondary {
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    .hero-logo-img {
        height: 60px;
    }
    
    .hero-triangle {
        height: 40px;
    }
    
    .about {
        padding-top: 60px;
    }
    
    .nav-logo .logo-img {
        height: 45px;
    }
    
    .scroll-indicator {
        bottom: 30px;
    }
    
    section {
        padding: 60px 0;
    }
    
    .stats-grid {
        gap: 20px;
    }
    
    .stat-item {
        padding: 20px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* RTL Specific Styles */
[dir="rtl"] .nav-menu a::after {
    right: 0;
}

[dir="ltr"] .nav-menu a::after {
    left: 0;
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.text-wrapper h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-wrapper p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 0;
}

.service-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.service-card ul {
    list-style: none;
    text-align: right;
    background: rgba(245, 241, 232, 0.5);
    padding: 25px;
    border-radius: 15px;
    margin-top: 25px;
}

[dir="ltr"] .service-card ul {
    text-align: left;
}

.service-card li {
    color: var(--text-light);
    margin-bottom: 12px;
    position: relative;
    padding-right: 25px;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.service-card li:hover {
    color: var(--primary-dark);
}

[dir="ltr"] .service-card li {
    padding-right: 0;
    padding-left: 20px;
}

.service-card li::before {
    content: '✓';
    position: absolute;
    right: 0;
    color: var(--accent-gold);
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.service-card li:hover::before {
    transform: scale(1.2);
    color: var(--primary-dark);
}

[dir="ltr"] .service-card li::before {
    right: auto;
    left: 0;
}

/* On smaller screens, prevent oversized header/logo */
@media (max-width: 991px) {
  .navbar { height: 76px; }
  .navbar.scrolled { height: 72px; }
  .nav-logo .logo-img { height: 56px; }
  .navbar.scrolled .nav-logo .logo-img { height: 52px; }
  .hero-logo-img { height: 140px; max-height: 140px; }
}

@media (max-width: 575px) {
  .navbar { height: 68px; }
  .navbar.scrolled { height: 64px; }
  .nav-logo .logo-img { height: 48px; }
  .navbar.scrolled .nav-logo .logo-img { height: 44px; }
  .hero-logo-img { height: 96px; max-height: 96px; }
}

/* ================= Small-screen refinements ================= */
/* iPhone widths ~430px and below */
@media (max-width: 430px) {
  /* Header */
  .navbar { height: 60px; padding: 0 12px; }
  .navbar.scrolled { height: 56px; }
  .nav-logo .logo-img { height: 40px; }
  .navbar.scrolled .nav-logo .logo-img { height: 38px; }
  .hamburger.navbar-toggler { width: 40px; height: 40px; padding: 6px; gap: 5px; }
  .hamburger.navbar-toggler .icon-bar { width: 22px; }

  /* Ensure dropdown panel uses current header height */
  .nav-menu { top: var(--nav-top, 60px); }

  /* Hero */
  .hero { min-height: 92vh; }
  .hero-logo-img { height: 72px; max-height: 72px; }
  .hero-title { font-size: 16px; line-height: 1.25; }
  .hero-subtitle { font-size: 0.95rem; }
  .hero-buttons .btn-primary { padding: 10px 22px; font-size: 0.95rem; }
  .hero-triangle { height: 38px; }

  /* Sections */
  section { padding: 48px 0; }
  .container { padding: 0 14px; }
}

/* Very small screens (old devices) */
@media (max-width: 360px) {
  .navbar { height: 56px; }
  .navbar.scrolled { height: 52px; }
  .nav-logo .logo-img { height: 36px; }
  .hamburger.navbar-toggler { width: 36px; height: 36px; gap: 4px; }
  .hamburger.navbar-toggler .icon-bar { width: 20px; }

  .nav-menu { top: var(--nav-top, 56px); }

  .hero-logo-img { height: 64px; max-height: 64px; }
  .hero-title { font-size: 1.7rem; }
  .hero-subtitle { font-size: 0.9rem; }
  .hero-triangle { height: 34px; }

  section { padding: 42px 0; }
  .container { padding: 0 12px; }
}

*[style*="100vw"], .full-viewport { box-sizing: border-box; max-width: 100vw; }

/* FINAL OVERRIDES: mobile dropdown + close button (<=991px) */
@media (max-width: 991px) {
  /* لا تجعل collapse يخلق stacking context */
  nav .collapse.navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    position: relative !important;
    isolation: auto !important; /* avoid creating stacking context that hides menu */
    z-index: 9997 !important;
  }

  /* زر الإغلاق/الهامبرغر فوق المنيو دائماً */
  nav #hamburger.hamburger.navbar-toggler {
    position: fixed !important; top: 0.5rem; /* عدّل حسب موضع الهيدر لديك */
    inset-inline-end: 0.75rem; /* لليمين في RTL */
    z-index: 10002 !important;
  }

  /* اجعل المنيو نفسها أعلى من كل شيء عند التفعيل */
  nav .collapse.navbar-collapse > ul.nav-menu,
  nav .collapse.navbar-collapse > ul.nav-menu.active,
  ul.nav-menu,
  ul.nav-menu.active {
    position: fixed !important;
    left: 0; right: 0;
    top: var(--nav-top, 68px) !important;
    width: 100%; box-sizing: border-box;
    z-index: 10000 !important; /* يغلب 3002 */
    transform: none !important;
  }

  /* حالة التفعيل: ظهور مضمون */
  ul.nav-menu.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 80vh !important;
    height: auto !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* ألوان المنيو */
  .navbar.fixed-top.navbar-light.at-top ul.nav-menu { 
    background: rgba(0,0,0,0.35) !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
  }
  .navbar.fixed-top.navbar-light.at-top ul.nav-menu a { color: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) ul.nav-menu { background: #fff !important; }
  .navbar.fixed-top.navbar-light:not(.at-top) ul.nav-menu a { color: var(--text-dark) !important; }

  /* طبقة التعتيم والهيدر أسفل المنيو */
  body.menu-open::before { z-index: 9998 !important; }
  .navbar { z-index: 9997 !important; }
}

/* Do NOT let the dark overlay block clicks */
body.menu-open::before { pointer-events: none !important; }

/* Mobile: keep the close (X) button above everything and menu clickable */
@media (max-width: 991px) {
  #hamburger.hamburger.navbar-toggler { position: fixed !important; z-index: 10002 !important; }
  ul.nav-menu, .nav-menu { pointer-events: auto !important; }
  ul.nav-menu.active, .nav-menu.active { z-index: 10000 !important; }
}

/* Linearicons overrides: ensure icon pseudo-elements can be colored */
/* Global fallback in case library enforces styles */
.lnr-eye::before,
.lnr-eye:before,
.lnr-apartment::before,
.lnr-apartment:before {
    color: #68081a !important;
}
.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
}
.lnr-eye,
.lnr-apartment {
    color: #68081a !important;
}

/* In About section icons, force wine color for the eye icon specifically */
.why-icon [class^="lnr-"],
.why-icon [class*=" lnr-"] {
    color: #68081a !important;
}
.why-icon [class^="lnr-"]::before,
.why-icon [class^="lnr-"]:before,
.why-icon [class*=" lnr-"]::before,
.why-icon [class*=" lnr-"]:before {
    color: #68081a !important;
}

/* Desktop: never show hamburger (visible only on small screens via existing @media max-width:991px rules) */
@media (min-width: 992px) {
  .hamburger,
  .hamburger.navbar-toggler { display: none !important; }
}

/* ================== SAF Theme Overrides (client palette) ================== */
:root {
  --gold: #C0A383;
  --accent: var(--gold);
  --accent-gold: var(--gold);

  --text-dark: #1E1E1E;
  --charcoal: #1E1E1E;
  --primary-dark: #111111;
  --secondary-dark: #222222;

  --background: #FFFFFF;
  --surface: #F6F5F2;
  --beige: #FFFFFF;
  --light-beige: #F6F5F2;

  --feature-border: #E6DDC7;
  --overlay-dark: rgba(0,0,0,0.72);
}

/* Use Tajawal site-wide */
body,
body[dir="rtl"],
body[dir="ltr"] { font-family: 'Tajawal', system-ui, -apple-system, sans-serif !important; }

/* Navbar colors */
.navbar.fixed-top.navbar-light.at-top {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.navbar.fixed-top.navbar-light:not(.at-top),
body.nav-scrolled .navbar { background: #FFFFFF !important; border-bottom: 1px solid #eee !important; }

/* Mobile menu: solid background (no hero bleed) */
@media (max-width: 991px) {
  .nav-menu { background: #FFFFFF !important; border-top: 1px solid #eee !important; }
}

/* Primary button per palette */
.btn-primary { background: var(--gold) !important; color: #1E1E1E !important; box-shadow: 0 8px 22px rgba(0,0,0,0.14) !important; }
.btn-primary:hover { background: #CBB98F !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important; }

/* Services images: black & white */
.services .img-fluid { filter: grayscale(100%); }

/* Experience cards styling (subtle borders like mock) */
/* Experience as parallax banner (no icons) */
.experience.banner { 
  position: relative; 
  min-height: 320px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: #fff; 
  overflow: hidden; 
  isolation: isolate;
}
/* Background layer as pseudo-element for wider browser support */
.experience.banner::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('img/coverpage.png') center/cover no-repeat; 
  transform: translateY(0);
  will-change: transform;
  animation: bannerDrift 26s ease-in-out infinite alternate;
}
.experience.banner .experience-overlay { 
  position: absolute; inset: 0; 
  background: rgba(0,0,0,0.38); 
  z-index: 1; 
}
.experience-banner-content { 
  position: relative; z-index: 2; text-align: center; padding: 40px 20px; max-width: 900px; margin: 0 auto;
}
.experience-banner-content h2 { font-weight: 800; letter-spacing: 0.5px; margin-bottom: 10px; position: relative; display: inline-block; padding: 0 6px; }
.experience-banner-content h2::before,
.experience-banner-content h2::after { content: '"'; color: var(--gold); font-weight: 900; font-size: 1.2em; position: relative; top: -2px; }
.experience-banner-content h2::before { margin-inline-end: 6px; }
.experience-banner-content h2::after { margin-inline-start: 6px; }
.experience-banner-content p { color: #eee; line-height: 1.8; }
/* Rotating content styles */
.experience-banner-content .exp-rotator { position: relative; min-height: 34px; margin-top: 8px; }
.experience-banner-content .rotate-item { 
  position: absolute; inset: 0 auto auto 0; width: 100%; text-align: center;
  opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; color: #eee;
}
.experience-banner-content .rotate-item.active { opacity: 1; transform: translateY(0); }
/* gold line and dot under rotator */
.experience-banner-content .exp-rotator::after { content: ""; display: block; width: 64px; height: 2px; background: var(--gold); margin: 18px auto 0; border-radius: 2px; }
.experience-banner-content .exp-rotator::before { content: ""; display: block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin: 12px auto 0; }

/* Carousel version */
.experience-banner-content .exp-carousel { position: relative; text-align: center; margin-top: 8px; }
.experience-banner-content .exp-slide { display: none; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.experience-banner-content .exp-slide.active { display: block; opacity: 1; transform: translateY(0); }
.experience-banner-content .exp-slide h3 { margin: 0 0 6px; font-weight: 800; color: #fff; font-size: 2.5rem; line-height: 1.2; }
.experience-banner-content .exp-slide p { margin: 0; color: #eee; font-size: 14px; line-height: 1.5; }
.experience-banner-content .exp-dots { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }
.experience-banner-content .exp-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.45); border: 0; cursor: pointer; padding: 0; }
.experience-banner-content .exp-dot.active { background: var(--gold); }
.experience-banner-content .exp-carousel::after { content: ""; display: block; width: 64px; height: 2px; background: var(--gold); margin: 18px auto 0; border-radius: 2px; }
.experience-banner-content .exp-carousel::before { content: ""; display: block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin: 12px auto 0; }

/* Responsive: smaller slide title on phones */
@media (max-width: 575.98px) {
  .experience-banner-content .exp-slide h3 { font-size: 16px; line-height: 1.3; }
}

/* Carousel arrows */
.experience-banner-content .exp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.experience-banner-content .exp-arrow:hover { background: rgba(0,0,0,0.4); border-color: var(--gold); }
.experience-banner-content .exp-arrow.prev { left: 12px; }
.experience-banner-content .exp-arrow.next { right: 12px; }

/* Parallax tweak for mobile: disable fixed for performance */
@keyframes bannerDrift { 0% { transform: translateY(0); } 100% { transform: translateY(-28px); } }

@media (max-width: 991px) { 
  .experience.banner { min-height: 260px; }
  .experience.banner::before { animation: none; }
}

/* Footer phone LTR helper */
.ltr { direction: ltr; unicode-bidi: bidi-override; }

/* ===== About section redesign (gray bg, black icons, card style, gold accent) ===== */
section.about#about { background: #FFFFFF !important; background-image: none !important; padding-top: 96px; padding-bottom: 96px; }

/* Section header with gold accent bracket */
#about .section-header { position: relative; margin-bottom: 36px; text-align: center; }
#about .section-header h2 { color: var(--text-dark); letter-spacing: 0.5px; font-weight: 800; display: inline-block; position: relative; padding: 6px 14px; }
/* Remove decorative gold bracket next to section title */
#about .section-header h2::before { content: none !important; border: 0 !important; }
[dir="ltr"] #about .section-header h2::before { content: none !important; border: 0 !important; }

/* Cards grid */
section.about#about .why-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; }
@media (max-width: 991px) { section.about#about .why-grid { grid-template-columns: 1fr; gap: 18px; } }

section.about#about .why-item { background: #f5f5f5 !important; border: 1px solid #eaeaea !important; border-radius: 6px !important; padding: 28px 24px !important; text-align: center !important; box-shadow: none !important; overflow: hidden !important; }
/* remove any decorative gold lines near icons or card tops */
section.about#about .why-item::before,
section.about#about .why-item::after,
section.about#about .why-item .why-icon::before,
section.about#about .why-item .why-icon::after { content: none !important; border: 0 !important; background: none !important; }

/* Black icons */
section.about#about .why-icon { position: static !important; display: block !important; margin: 0 auto 12px !important; text-align: center !important; }
section.about#about .why-icon [class^="lnr-"],
section.about#about .why-icon [class*=" lnr-"] { color: #000000 !important; display: block !important; line-height: 1 !important; font-size: 36px !important; margin: 0 auto !important; }
section.about#about .why-icon [class^="lnr-"]::before,
section.about#about .why-icon [class*=" lnr-"]::before { color: #000000 !important; }

/* Titles and paragraphs inside cards */
section.about#about .why-item h4 { color: var(--text-dark) !important; font-weight: 700 !important; margin-top: 8px !important; margin-bottom: 10px !important; position: relative !important; display: inline-block; }
/* Gold underline under About card titles */
section.about#about .why-item h4::after { content: "" !important; display: block !important; height: 3px; width: 44px; background: var(--gold); margin: 10px auto 0; border-radius: 2px; }
section.about#about .why-item p { color: #4B4B4B !important; font-size: 0.98rem !important; line-height: 1.7 !important; }

/* ===== Services section theme match ===== */
section.services#services { background: #FFFFFF !important; padding-top: 144px; padding-bottom: 144px; }
/* Narrower container and generous side padding like theme */
#services .container { max-width: 1040px; padding-inline: 40px; margin-inline: auto; }
#services .services-list .row { align-items: stretch; margin-bottom: 72px; }
#services .services-list .text-wrapper { 
  background: #f5f5f5 !important; border: none !important; box-shadow: none !important; 
  padding: 36px 28px !important; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center;
}
#services .services-list .text-wrapper.flipped { background: #f5f5f5 !important; }
#services .services-list img.img-fluid { display: block; width: 100%; height: auto; border: none !important; box-shadow: none !important; }
#services .services-list .border-box { display: none !important; }
#services .services-list h3 { font-weight: 800; margin-bottom: 10px; color: var(--text-dark); }
#services .services-list p { color: #4B4B4B; line-height: 1.7; }
/* Gold underline under Services titles */
#services .services-list h3::after { content: ""; display: block; height: 3px; width: 44px; background: var(--gold); margin: 10px auto 0; border-radius: 2px; }

/* Apply inner padding to headings and paragraphs instead of wrapper */
#services .services-list h3 { padding: 14px 32px 6px !important; }
#services .services-list p { padding: 0 32px 24px !important; }

@media (max-width: 1023px) {
  #services .services-list h3 { padding: 12px 22px 6px !important; }
  #services .services-list p { padding: 0 22px 20px !important; }
}

@media (max-width: 767px) {
  #services .services-list h3 { padding: 30px !important; }
  #services .services-list p { padding: 10px !important; }
}
@media (max-width: 991px) {
  #services .services-list .row { margin-bottom: 40px; }
  section.services#services { padding-top: 104px; padding-bottom: 104px; }
  #services .container { padding-inline: 24px; }
}

/* Keep icon above title in normal flow and underline titles */
section.about#about .why-item h4 { position: relative; }
/* Mobile/tablet stacking like theme */
@media (max-width: 991px) {
  #services .services-list .row { display: flex; flex-direction: column; gap: 0; }
  #services .services-list .col-md-7, 
  #services .services-list .col-md-5 { width: 100%; max-width: 100%; }
/* ===== Services: ensure no gap between image and gray panel ===== */
/* Remove inner column padding to make image and panel touch */
#services .services-list .col-md-7,
#services .services-list .col-md-5 { padding: 0 !important; }

/* Remove all outer margins on the gray panel */
#services .services-list .text-wrapper,
#services .services-list .text-wrapper.flipped { margin: 0 !important; padding: 0 !important; }
}

@media (max-width: 991px) {
  /* Mobile/tablet:  #services .services-list .text-wrapper { margin-top: 12px; } */
  #services .services-list .border-box, 
  #services .services-list .border-box.flipped { display: none !important; }
}

@media (max-width: 1023px) {
  #services .services-list .text-wrapper,
  #services .services-list .text-wrapper.flipped { margin: 0 !important; padding: 0 !important; }
}

/* ===== Language dropdown in navbar ===== */
.nav-controls { display: flex; align-items: center; gap: 12px; }
.lang-box { position: relative; margin-inline-start: 20px; }
.lang-toggle { 
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.25); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.navbar.fixed-top.navbar-light:not(.at-top) .lang-toggle { background: rgba(0,0,0,0.05); color: #1E1E1E; border-color: rgba(0,0,0,0.2); }
.lang-menu { 
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
  padding: 6px; min-width: 160px; display: none; z-index: 2105;
}
.lang-menu.open { display: block; }
.lang-item { 
  display: block; width: 100%; text-align: start;
  background: transparent; border: 0; padding: 10px 12px; cursor: pointer;
  border-radius: 6px; font-family: inherit; font-size: 15px; color: #1E1E1E;
}
.lang-item:hover { background: #f5f5f5; }

@media (max-width: 991px) {
  .lang-box { margin-inline-start: 14px; }
}

/* ===== Language text toggle (no dropdown) ===== */
.lang-toggle-text {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 600; cursor: pointer;
  color: inherit;
}
.lang-toggle-text .lang-ico { font-size: 1.25em; line-height: 1; opacity: 0.95; color: var(--gold); }
.navbar.fixed-top.navbar-light.at-top .lang-toggle-text { color: rgba(255,255,255,0.95); }
.navbar.fixed-top.navbar-light:not(.at-top) .lang-toggle-text { color: var(--text-dark); }
.lang-toggle-text:hover { color: var(--accent); }

@media (max-width: 991px) {
  .nav-menu .lang-toggle-text { display: block; width: 100%; text-align: start; padding: 24px 6px; }
}

/* ===== Mobile menu dark theme with gold separators ===== */
@media (max-width: 991px) {
  /* Darker translucent background leaning to black */
  .nav-menu {
    background: #000000 !important; /* solid black */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* White links for readability */
  .nav-menu a { color: #ffffff !important; }
  /* Thin beige-gold separators between items */
  .nav-menu li + li { border-top: 1px solid #D3B06B; }
  /* Increased spacing for clearer separation */
  .nav-menu a { padding-top: 24px; padding-bottom: 24px; }
}

/* ===== Mobile menu white theme when header is scrolled (body.nav-scrolled) ===== */
@media (max-width: 991px) {
  body.nav-scrolled .nav-menu {
    background: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.nav-scrolled .nav-menu a { color: var(--text-dark) !important; }
  body.nav-scrolled .nav-menu .lang-toggle-text { color: var(--text-dark) !important; }
  body.nav-scrolled .nav-menu li + li { border-top: 1px solid #D3B06B; }
}