/* 
  RUPTURE BUSINESS SOLUTIONS (رابتشر لحلول الأعمال)
  Core Design System & Stylesheet
  Theme: Luxury Corporate Gold & Navy
*/

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Custom Properties & Design System --- */
:root {
  /* Brand Core Colors */
  --gold-primary: #D4AF6D;
  --gold-hover: #E5C384;
  --gold-glow: rgba(212, 175, 109, 0.25);
  --navy-primary: #1C2653;
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.2s ease;
  
  /* Fonts */
  --font-arabic: 'El Messiri', sans-serif;
  --font-english: 'Inter', sans-serif;
}

/* Brand Theme — single fixed palette (navy + gold on white) */
:root {
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F4F6FB;
  --bg-tertiary:   #E8EDF6;
  --bg-glass:      rgba(255, 255, 255, 0.93);

  --text-primary:   #1C2653;
  --text-secondary: #374151;
  --text-muted:     #6B7280;

  --border-color: rgba(28, 38, 83, 0.12);
  --border-light: rgba(28, 38, 83, 0.07);

  --shadow-card:  0 8px 30px rgba(28, 38, 83, 0.08);
  --shadow-hover: 0 14px 40px rgba(212, 175, 109, 0.18);
  --glow-btn:     0 0 15px rgba(212, 175, 109, 0.25);

  --hero-overlay:         rgba(28, 38, 83, 0.52);
  --hero-pattern-opacity: 0.045;
}

/* --- Base & Reset Styles --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/* Language-specific Font Family & Direction */
html[lang="ar"] {
  font-family: var(--font-arabic);
  direction: rtl;
}

html[lang="en"] {
  font-family: var(--font-english);
  direction: ltr;
  font-size: 15px; /* Globals scale English text to visually match El Messiri */
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Global Typography Adjustments */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button, input, textarea, select {
  font-family: inherit;
  background: none;
  border: none;
  outline: none;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Accessibility settings */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Layout Utilities & Core Classes --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-padding {
  padding: 3rem 0 5rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding: 4rem 0 7rem;
  }
}

.text-start { text-align: start; }
.text-center { text-align: center; }
.text-end { text-align: end; }

/* Grid / Flex Alignments using CSS Logical Properties */
.flex-row-align {
  display: flex;
  align-items: center;
}

/* Heading Highlights & Accent Dividers */
.section-header {
  margin-bottom: 3.5rem;
  text-align: center;
}

.section-title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gold-primary);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 650px;
  margin: 0 auto;
}

/* --- Premium Logo --- */
.logo {
  display: flex;
  align-items: center;
}

/* Two-logo system: white for dark heroes, navy for scrolled/white bg */
.logo-white {
  display: block;
  height: 48px;
  width: auto;
}
.logo-navy {
  display: none;
  height: 48px;
  width: auto;
}
.header.scrolled .logo-white { display: none; }
.header.scrolled .logo-navy  { display: block; }

/* --- Sticky Header / Navbar --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: var(--transition-smooth);
}

.header.scrolled {
  background-color: var(--bg-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* slightly stronger shadow */
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px; /* added breathing room padding */
  transition: var(--transition-smooth);
}

.header.scrolled .nav-container {
  height: 80px; /* shrinks slightly on scroll */
}

.nav-menu {
  display: none; /* Desktop only */
}

@media (min-width: 1024px) {
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

.nav-link {
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  padding: 0.5rem 0;
}
.header.scrolled .nav-link { color: var(--text-secondary); }

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-primary);
  transition: var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Controls Buttons - Luxury Glassmorphic Design with High Contrast */
.ctrl-btn {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

/* Transparent nav over dark hero */
.ctrl-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Scrolled nav over white bg */
.header.scrolled .ctrl-btn {
  background: #FFFFFF;
  border: 1px solid rgba(28, 38, 83, 0.2);
  color: var(--navy-primary);
  box-shadow: 0 2px 10px rgba(28, 38, 83, 0.08);
}

.ctrl-btn:hover {
  border-color: var(--gold-primary) !important;
  background: var(--gold-primary) !important;
  color: var(--navy-primary) !important;
  box-shadow: 0 4px 15px rgba(212, 175, 109, 0.35) !important;
  transform: translateY(-3px);
}

.lang-btn,
.header.scrolled .lang-btn {
  width: auto !important;
  padding: 0.2rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.lang-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.12);
}

/* Flag images inside language toggle button */
.lang-flag {
  display: none;
  width: 28px;
  height: auto;
  border-radius: 4px;
  pointer-events: none;
}

/* Arabic mode → show UK flag (click = go to English) */
html[lang="ar"] .flag-gb { display: block; }
html[lang="ar"] .flag-sa { display: none;  }

/* English mode → show Saudi flag (click = go to Arabic) */
html[lang="en"] .flag-gb { display: none;  }
html[lang="en"] .flag-sa { display: block; }

/* Mobile Menu Toggle Button */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  z-index: 1001;
}

@media (min-width: 1024px) {
  .hamburger {
    display: none;
  }
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  transition: var(--transition-smooth);
}
.header.scrolled .hamburger span { background-color: var(--text-primary); }

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Dropdown Menu */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%; /* Offscreen, toggled by JS */
  width: 80%;
  max-width: 380px;
  height: 100vh;
  background: var(--bg-secondary);
  z-index: 999;
  padding: 6rem 2rem 2rem 2rem;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Adjust slide-in direction based on direction */
html[lang="ar"] .mobile-nav {
  right: auto;
  left: -100%;
  transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html[lang="ar"] .mobile-nav.active {
  left: 0;
}

.mobile-nav.active {
  right: 0;
}

.mobile-nav-link {
  font-size: 1.15rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  display: block;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--gold-primary);
  padding-inline-start: 10px;
}

/* Mobile Menu Backdrop Overlay */
.mobile-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.mobile-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* --- Buttons System --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
  gap: 0.5rem;
}

.btn-primary {
  background: var(--gold-primary);
  color: var(--navy-primary) !important;
  border: 1px solid var(--gold-primary);
}

.btn-primary:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  box-shadow: 0 10px 20px rgba(212, 175, 109, 0.3); /* gold shadow glow */
  transform: translateY(-3px) scale(1.02);
}

.btn-secondary {
  border: 1px solid var(--gold-primary);
  color: var(--text-primary) !important;
}

.hero .btn-secondary { color: #FFFFFF !important; }

.btn-secondary:hover {
  background: var(--gold-primary);
  color: var(--navy-primary) !important;
  border-color: var(--gold-primary);
  box-shadow: 0 10px 20px rgba(212, 175, 109, 0.2);
  transform: translateY(-3px) scale(1.02);
}

/* Icon rotation based on LTR/RTL */
html[lang="ar"] .btn i {
  transform: scaleX(-1);
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 18% 65%, rgba(212, 175, 109, 0.07) 0%, transparent 48%),
    radial-gradient(ellipse at 82% 20%, rgba(28, 38, 83, 0.55) 0%, transparent 52%),
    linear-gradient(170deg, #060b1a 0%, #0A0F26 40%, #0e1535 80%, #070d22 100%);
  padding-top: 110px;
  overflow: hidden;
}

/* Ken Burns background zoom animation */
@keyframes kenBurns {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: 1;
  animation: kenBurns 28s ease-in-out infinite;
  pointer-events: none;
  transition: transform 0.8s ease;
}

/* Theme-aware overlay to keep text readable */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hero-overlay);
  z-index: 2;
  pointer-events: none;
  transition: var(--transition-smooth);
}

/* Islamic Geometric Backdrop Overlay - sits above video */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z M30 10 L50 30 L30 50 L10 30 Z M30 20 L40 30 L30 40 L20 30 Z' stroke='%23D4AF6D' stroke-width='1' stroke-opacity='0.035' fill='none'/%3E%3C/svg%3E");
  z-index: 3;
  pointer-events: none;
  opacity: var(--hero-pattern-opacity);
  transition: opacity 0.4s ease;
}

/* Refined Gradient Backdrop shimmer effect */
.hero-glow {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(212, 175, 109, 0.06) 0%, transparent 70%);
  z-index: 3;
  pointer-events: none;
}

.hero-glow-left {
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(28, 38, 83, 0.15) 0%, transparent 70%);
  z-index: 3;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 850px;
  margin-top: -50px; /* Pushes content up slightly as requested */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 175, 109, 0.1);
  border: 1px solid var(--gold-primary);
  color: var(--gold-primary);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.75rem; /* reduced gap */
  animation: float 3s ease-in-out infinite;
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.25;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.75rem;
  }
}

.hero-title span.gold {
  color: var(--gold-primary);
  background: linear-gradient(90deg, var(--gold-primary), #ffd27d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 2rem;
  max-width: 680px;
  margin-inline: auto;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

/* WA CTA — absolute so it never affects hero-content vertical centering */
.hero-wa-wrap {
  position: absolute;
  bottom: 7.5rem;
  inset-inline-start: max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem));
}

.btn-wa {
  display: inline-flex;
  align-items: center;
  background: var(--gold-primary);
  color: var(--navy-primary);
  border: 2px solid var(--gold-primary);
  padding: 0.75rem 2.5rem;
  border-radius: 50px;
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  box-shadow: 0 4px 18px rgba(212, 175, 109, 0.35);
}
.btn-wa:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--navy-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 109, 0.5);
}

/* Animated Bouncing Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--gold-primary);
  font-size: 1.35rem;
  cursor: pointer;
  animation: bounce 2s infinite;
  opacity: 0.75;
  transition: var(--transition-fast);
}

.scroll-indicator:hover {
  opacity: 1;
  color: var(--gold-hover);
}

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

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

/* --- About Us & Stats Section --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.about-img-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-img-frame {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--bg-secondary);
  aspect-ratio: 4/3;
  width: 100%;
}

.about-img-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--navy-primary) 0%, #0d122b 100%);
  position: relative;
  overflow: hidden;
}

.about-real-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.about-img-frame:hover .about-real-img {
  transform: scale(1.04);
}

/* Saudi Arabia map SVG inside the about dark frame */
.corporate-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  height: 88%;
  opacity: 1;
}

.about-img-deco {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100px;
  height: 100px;
  border-top: 3px solid var(--gold-primary);
  border-left: 3px solid var(--gold-primary);
  z-index: 1;
  pointer-events: none;
}

html[lang="ar"] .about-img-deco {
  left: auto;
  right: -15px;
  border-left: none;
  border-right: 3px solid var(--gold-primary);
}

.about-content-text {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.about-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 576px) {
  .about-highlights {
    grid-template-columns: 1fr 1fr;
  }
}

.highlight-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 1.5rem;
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.highlight-card:hover {
  border-color: var(--gold-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.highlight-card i {
  font-size: 1.5rem;
  color: var(--gold-primary);
  margin-bottom: 1rem;
}

.highlight-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.highlight-card .highlight-title-wrap i {
  margin-bottom: 0;
}

.highlight-card .highlight-title-wrap h4 {
  margin-bottom: 0;
}

.highlight-card h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.highlight-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* --- Stats Strip (directly below Hero) --- */
.stats-strip {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 2.5rem 0;
  position: relative;
  z-index: 15;
}

.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .stats-strip-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats-strip-item {
  position: relative;
}

.stats-strip-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  background: var(--border-light);
}

html[lang="ar"] .stats-strip-item:not(:last-child)::after {
  right: auto;
  left: 0;
}

@media (max-width: 767px) {
  .stats-strip-item:not(:last-child)::after {
    display: none;
  }
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* --- Services Section --- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 2.5rem 2rem;
  border-radius: 12px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gold-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-smooth);
}

html[lang="ar"] .service-card::before {
  transform-origin: right;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-hover);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-icon-box {
  width: 60px;
  height: 60px;
  background: rgba(212, 175, 109, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: var(--transition-fast);
}

.service-card:hover .service-icon-box {
  background: var(--gold-primary);
}

.service-card:hover .service-icon-box i {
  color: var(--navy-primary);
}

.service-icon-box i {
  font-size: 1.75rem;
  color: var(--gold-primary);
  transition: var(--transition-fast);
}

.service-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.service-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Reduce top whitespace on services section */
#services { padding-top: 2rem; }

/* --- Partners Section — Single-Row Animated Marquee --- */

.partners-section {
  padding-bottom: 2rem;
  background-color: var(--bg-secondary);
}

/* Full-bleed strip — edge fade so logos dissolve cleanly at both sides */
.partners-strip {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
  padding: 1rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  /* Force LTR so overflow-clipping always starts from the physical left edge,
     regardless of the page's Arabic (RTL) direction. Without this the browser
     clips from the right side, revealing the wrong half of the duplicate set
     and making the loop snap visibly. */
  direction: ltr;
}

/* Clipping row — also needs LTR so its overflow matches the track direction */
.partners-row {
  overflow: hidden;
  direction: ltr;
}

/* Scrolling belt — holds 14 logos × 2 (duplicate set for seamless loop) */
.partners-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
  /* Force physical LTR layout so the duplicate-set trick works the same
     way in both Arabic (RTL) and English (LTR) page modes.
     Without this, RTL flex reverses item order and the snap-back jumps. */
  direction: ltr;
  /* Scroll RIGHT → LEFT: new logos enter from the right, matching
     Arabic reading direction and the user-requested reverse motion. */
  animation: partners-scroll-left 36s linear infinite;
}

/* Pause whole row on hover */
.partners-row:hover .partners-track {
  animation-play-state: paused;
}

/* Keyframe — translate exactly -50% (one full set width) for seamless loop */
@keyframes partners-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* White pill card — always white so colored logos stay legible in dark mode */
.partner-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 84px;
  padding: 12px 20px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: default;
}

.partner-pill:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow:
    0 8px 28px rgba(212, 175, 109, 0.4),
    0 0 0 2px rgba(212, 175, 109, 0.35);
}

.partner-pill img {
  display: block;
  width: auto;
  height: auto;
  max-width: 124px;
  max-height: 54px;
  object-fit: contain;
}

/* Mobile */
@media (max-width: 767px) {
  .partner-pill { width: 128px; height: 68px; padding: 8px 14px; border-radius: 10px; }
  .partner-pill img { max-width: 96px; max-height: 42px; }
  .partners-track { gap: 1rem; }
}

/* --- Blog Listing Page Hero --- */
.blog-listing-hero {
  position: relative;
  background: linear-gradient(135deg, #fdfaf2 0%, #f3e8d0 100%);
  border-bottom: 1px solid rgba(212, 175, 109, 0.45);
  padding: 5.5rem 0 2rem;
  overflow: hidden;
}

.blog-listing-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z M30 10 L50 30 L30 50 L10 30 Z M30 20 L40 30 L30 40 L20 30 Z' stroke='%23D4AF6D' stroke-width='1' stroke-opacity='0.13' fill='none'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.blog-listing-hero .container {
  position: relative;
  z-index: 2;
}

.blog-listing-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(212, 175, 109, 0.12);
  border: 1px solid rgba(212, 175, 109, 0.35);
  padding: 0.28rem 0.85rem;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy-primary);
  margin-bottom: 1rem;
}

.blog-listing-title {
  font-size: 1.75rem;
  color: var(--navy-primary);
  margin-bottom: 0.7rem;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .blog-listing-title { font-size: 2rem; }
}

.blog-listing-sub {
  font-size: 0.93rem;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.75;
}

/* --- About Page CTA Box --- */
.about-page-cta {
  position: relative;
  background: linear-gradient(135deg, #fdfaf2 0%, #f3e8d0 100%);
  color: var(--navy-primary);
  padding: 3.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(212, 175, 109, 0.12);
  border: 1px solid rgba(212, 175, 109, 0.4);
  overflow: hidden;
}

.about-page-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z M30 10 L50 30 L30 50 L10 30 Z M30 20 L40 30 L30 40 L20 30 Z' stroke='%23D4AF6D' stroke-width='1' stroke-opacity='0.12' fill='none'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.about-page-cta-content {
  position: relative;
  z-index: 2;
}

/* --- Article Page Band (back-button strip) --- */
.article-page-band {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  padding: 0.9rem 0;
}

.article-page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
html[dir="rtl"] .article-page-back i { transform: scaleX(-1); }
.article-page-back:hover { color: var(--gold-primary); }

/* --- Blog Section --- */
.blog-view-container {
  position: relative;
  min-height: 400px;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  transition: var(--transition-smooth);
}

@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-view-all-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.blog-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.blog-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-hover);
}

.blog-card-img-box {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--navy-primary) 0%, #171d3d 100%);
  position: relative;
  overflow: hidden;
}

.blog-card-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-featured-img {
  transform: scale(1.04);
}

.blog-card-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  opacity: 0.8;
  transition: var(--transition-smooth);
}

.blog-card:hover .blog-card-svg {
  transform: translate(-50%, -50%) scale(1.08);
}

.blog-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.blog-card-title {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: var(--transition-fast);
}

.blog-card:hover .blog-card-title {
  color: var(--gold-primary);
}

.blog-card-excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.blog-card-more {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Single Article Layout (Hidden by default, triggered by JS) */
.single-article-view {
  display: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
}

.single-article-view.active {
  display: block;
}

.back-to-blog-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-primary);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.back-to-blog-btn:hover {
  color: var(--gold-hover);
  transform: translateX(-5px);
}

html[lang="ar"] .back-to-blog-btn:hover {
  transform: translateX(5px);
}

.article-header {
  margin-bottom: 2rem;
}

.article-meta {
  display: flex;
  gap: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.article-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.article-banner {
  height: 200px;
  background: linear-gradient(135deg, var(--navy-primary) 0%, #151a37 100%);
  border-radius: 12px;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.article-banner-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
}

.article-body {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.article-body p {
  margin-bottom: 1.5rem;
}

.article-body h3 {
  color: var(--text-primary);
  margin: 2.5rem 0 1rem;
  font-size: 1.45rem;
}

/* ---- Article Body: Lists ---- */
.article-body ul,
.article-body ol {
  margin: 0 0 1.5rem;
  padding-inline-start: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

.article-body li {
  font-size: 0.97rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

.article-body li ul {
  margin-top: 0.45rem;
  margin-bottom: 0;
  padding-inline-start: 1.4rem;
  list-style: circle;
}

/* ---- Article Body: CTA Box ---- */
.article-cta {
  background: rgba(212, 175, 109, 0.07);
  border-inline-start: 3px solid var(--gold-primary);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}

html[dir="rtl"] .article-cta { border-radius: 8px 0 0 8px; }

.article-cta p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.article-cta a {
  color: var(--gold-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-cta a:hover { color: var(--gold-hover); }

/* ---- Article Body: Table ---- */
.article-table-wrap {
  overflow-x: auto;
  margin: 0 0 2rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.article-table thead tr {
  background: rgba(212, 175, 109, 0.08);
}

.article-table th {
  padding: 0.85rem 1.1rem;
  text-align: start;
  font-weight: 700;
  color: var(--gold-primary);
  border-bottom: 2px solid rgba(212, 175, 109, 0.2);
  white-space: nowrap;
}

.article-table td {
  padding: 0.75rem 1.1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  line-height: 1.6;
}

.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:hover td { background: var(--bg-secondary); }

/* ---- Article Body: FAQ ---- */
.article-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
  margin-top: 0.5rem;
}

.article-faq-item {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border-light);
}

.article-faq-item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.article-faq-item p { margin: 0; font-size: 0.92rem; line-height: 1.75; }

/* --- FAQ Section — Two-Column Grid --- */
.faq-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  border-top: 1px solid rgba(212, 175, 109, 0.35);
}

/* Each column gets a vertical gold separator except the first */
.faq-item:nth-child(odd)  { border-right: 1px solid rgba(212, 175, 109, 0.15); padding-right: 2.5rem; }
.faq-item:nth-child(even) { padding-left: 0; }

html[dir="rtl"] .faq-item:nth-child(odd)  { border-right: none; border-left: 1px solid rgba(212, 175, 109, 0.15); padding-right: 0; padding-left: 2.5rem; }
html[dir="rtl"] .faq-item:nth-child(even) { padding-left: 0; }

/* Mobile: collapse back to single column */
@media (max-width: 767px) {
  .faq-container {
    grid-template-columns: 1fr;
  }
  .faq-item:nth-child(odd),
  html[dir="rtl"] .faq-item:nth-child(odd) {
    border: none;
    padding-right: 0;
    padding-left: 0;
  }
}

.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(212, 175, 109, 0.35); /* thin gold divider between items */
  overflow: hidden;
  transition: var(--transition-smooth);
}

.faq-item.active {
  background: rgba(212, 175, 109, 0.03); /* subtle active background highlight */
}

.faq-trigger {
  width: 100%;
  padding: 1.1rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: start;
  font-size: 0.97rem;
  font-weight: 600;
  gap: 1rem;
  transition: var(--transition-fast);
  color: var(--text-primary);
}

/* Hover highlights the row subtly with the gold accent */
.faq-trigger:hover {
  color: var(--gold-primary);
}

.faq-icon-holder {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.faq-icon-holder::before,
.faq-icon-holder::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: var(--text-primary);
  transform: translate(-50%, -50%);
  transition: var(--transition-smooth);
}

.faq-icon-holder::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* On expand, rotate the whole icon holder 45 degrees so + becomes x */
.faq-item.active .faq-icon-holder {
  transform: rotate(45deg);
}

.faq-item.active .faq-icon-holder::before,
.faq-item.active .faq-icon-holder::after {
  background-color: var(--gold-primary);
}

.faq-trigger:hover .faq-icon-holder::before,
.faq-trigger:hover .faq-icon-holder::after {
  background-color: var(--gold-primary);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-content-inner {
  padding: 0 0.75rem 1.1rem 0.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- Contact Section --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1.2fr 1.8fr;
  }
}

.contact-info-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-card {
  display: flex;
  gap: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 1.75rem;
  border-radius: 10px;
  transition: var(--transition-smooth);
}

.info-card:hover {
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.info-icon {
  width: 50px;
  height: 50px;
  background: rgba(212, 175, 109, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-icon i {
  font-size: 1.35rem;
  color: var(--gold-primary);
}

.info-details h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.info-details p, .info-details a {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* Social icon buttons in contact info column (light bg) */
.social-links .ctrl-btn {
  background: var(--bg-primary);
  border: 1.5px solid rgba(28, 38, 83, 0.18);
  color: var(--text-secondary);
}
.social-links .ctrl-btn:hover {
  background: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: var(--navy-primary) !important;
}

/* Social icon buttons inside the dark footer */
.footer .ctrl-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
}
.footer .ctrl-btn:hover {
  background: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: var(--navy-primary) !important;
  box-shadow: 0 4px 15px rgba(212, 175, 109, 0.35) !important;
}

/* --- Live Map --- */
.map-container {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}

.map-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* invert colors in dark mode for consistent look */
  filter: none;
  transition: filter 0.3s ease;
}


.map-open-link {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-primary);
  color: var(--gold-primary);
  border: 1px solid var(--gold-primary);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: var(--transition-fast);
}

.map-open-link:hover {
  background: var(--gold-primary);
  color: #fff;
}

html[dir="rtl"] .map-open-link { right: auto; left: 12px; }

/* --- WhatsApp Floating Button --- */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* Subtle pulse to draw attention */
  animation: wa-pulse 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
  animation: none;
}

/* Tooltip shown on hover */
.whatsapp-float__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #075E54;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #075E54;
}

.whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; }

/* RTL: flip button and tooltip to left side */
html[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 28px;
}

html[dir="rtl"] .whatsapp-float__tooltip {
  right: auto;
  left: calc(100% + 10px);
}

html[dir="rtl"] .whatsapp-float__tooltip::after {
  left: auto;
  right: 100%;
  border-left-color: transparent;
  border-right-color: #075E54;
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45); }
  50%       { box-shadow: 0 4px 28px rgba(37, 211, 102, 0.7), 0 0 0 8px rgba(37, 211, 102, 0.12); }
}

@media (max-width: 767px) {
  .whatsapp-float { width: 52px; height: 52px; font-size: 1.55rem; bottom: 20px; right: 20px; }
  html[dir="rtl"] .whatsapp-float { right: auto; left: 20px; }
  .whatsapp-float__tooltip { display: none; }
}

html[lang="ar"] .map-overlay-card {
  left: auto;
  right: 15px;
}

/* Contact Form Column */
.contact-form-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.form-control {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.85rem 1.25rem;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.form-control:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 109, 0.15);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-status {
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  display: none;
  font-weight: 500;
}

.form-status.success {
  display: block;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10B981;
  color: #10B981;
}

.form-status.error {
  display: block;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #EF4444;
  color: #EF4444;
}

/* --- Footer --- */
.footer {
  background: linear-gradient(160deg, #1C2653 0%, #101633 60%, #0a0d1f 100%);
  color: #FFFFFF;
  border-top: 2px solid var(--gold-primary);
}


.footer-top {
  padding: 3.5rem 0 2.5rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-top {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

.footer-column h3.logo {
  color: #FFFFFF;
  margin-bottom: 1.25rem;
}

.footer-logo-img {
  height: 48px;
  width: auto;
  margin-bottom: 1.25rem;
  display: block;
}

.footer-about-text {
  color: #9CA3AF;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  max-width: 320px;
}

.footer-title {
  font-size: 1.15rem;
  color: #FFFFFF;
  position: relative;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--gold-primary);
}

html[lang="ar"] .footer-title::after {
  left: auto;
  right: 0;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  color: #9CA3AF;
  font-size: 0.95rem;
}

.footer-link:hover {
  color: var(--gold-primary);
  padding-inline-start: 6px;
}

.footer-info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-info-item {
  display: flex;
  gap: 0.75rem;
  color: #9CA3AF;
  font-size: 0.95rem;
}

.footer-info-item i {
  color: var(--gold-primary);
  margin-top: 0.2rem;
}

/* Compact phone/whatsapp badge regions in footer */
.footer-contact-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.footer-contact-badge:hover {
  background: rgba(212, 175, 109, 0.1);
  border-color: rgba(212, 175, 109, 0.25);
  color: #fff;
}
.footer-badge-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-badge-icon i { font-size: 0.9rem; color: var(--gold-primary); }
.footer-badge-info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.2;
}
.footer-badge-label {
  font-size: 0.66rem;
  color: var(--gold-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.footer-badge-number {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  direction: ltr;
  unicode-bidi: embed;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
  }
}

.copyright {
  font-size: 0.85rem;
  color: #9CA3AF;
}

/* --- GSAP Animation Helper Classes --- */
.gsap-reveal {
  opacity: 0;
  transform: translateY(30px);
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

/* ============================================================
   HERO ENHANCEMENT — Brand CSS Background
   ============================================================ */

/* ---- Islamic geometric pattern z-index ---- */
.hero::before { z-index: 3; }

/* ---- Brand hero ::after — depth vignette + gold horizon glow ---- */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 55%, rgba(212, 175, 109, 0.06) 0%, transparent 42%),
    radial-gradient(ellipse at 82% 55%, rgba(28, 38, 83, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(212, 175, 109, 0.1) 0%, transparent 55%);
}

/* Ambient glow orbs above overlay */
.hero-glow      { z-index: 3; }
.hero-glow-left { z-index: 3; }

/* ---- Optional photo background (z-index 1) — hero is complete without it ----
   To activate: drop photo files into assets/hero/, then uncomment below.          */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-image: url('../assets/hero-bg.png');
  animation: hero-ken-burns 26s ease-in-out infinite alternate;
}
@media (max-width: 767px) {
  .hero-bg { background-position: center center; }
}
@keyframes hero-ken-burns {
  from { transform: scale(1)    translate(0,     0); }
  to   { transform: scale(1.07) translate(-1.5%, 0.7%); }
}

/* ---- Drifting Gold Particles (z-index 4) ---- */
.hero-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-primary);
  animation: particleDrift linear infinite;
  will-change: transform, opacity;
}


@keyframes particleDrift {
  0%   { transform: translateY(0)     translateX(0)               scale(1);   opacity: 0; }
  12%  { opacity: 0.7; }
  88%  { opacity: 0.7; }
  100% { transform: translateY(-110px) translateX(var(--px, 20px)) scale(0.5); opacity: 0; }
}

/* ---- Hero content: above everything (z-index 5) ---- */
.hero .container {
  position: relative;
  z-index: 5;
}


/* ---- Direction-aware text alignment ---- */
html[dir="rtl"] .hero-content {
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}
html[dir="rtl"] .hero-desc    { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .hero-actions { justify-content: flex-start; }
html[dir="rtl"] .hero-title   { margin-right: 0; margin-left: auto; }

html[dir="ltr"] .hero-content {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  margin-top: 20px;
}
html[dir="ltr"] .hero-desc    { margin-left: 0; margin-right: auto; }
html[dir="ltr"] .hero-actions { justify-content: flex-start; }
html[dir="ltr"] .hero-title   { margin-left: 0; margin-right: auto; }

/* ---- Hero title layout ---- */
.hero-title {
  text-wrap: balance;
  max-width: 760px;
  margin-inline: auto; /* overridden by direction rules above */
}

.hero-title-line {
  display: inline; /* keeps <br> between spans working */
}

/* ---- Initial hidden state for entrance animations ---- */
.hero-hidden {
  opacity: 0;
  transform: translateY(32px);
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-bg  { animation: none; }
  .particle { animation: none !important; display: none; }
  .hero-hidden { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   NAV MEGA-MENU TRIGGER
   ============================================================ */
.nav-has-mega { position: relative; display: inline-flex; align-items: center; }

.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: rgba(255, 255, 255, 0.9);
  padding: 0;
  transition: color 0.2s ease;
}
.header.scrolled .nav-mega-trigger { color: var(--text-secondary); }
.nav-mega-trigger:hover,
.nav-mega-trigger[aria-expanded="true"] { color: var(--gold-primary); }

.mega-caret {
  font-size: 0.72rem;
  transition: transform 0.3s ease;
  margin-top: 1px;
}
.nav-mega-trigger[aria-expanded="true"] .mega-caret { transform: rotate(180deg); }

/* ============================================================
   MEGA-MENU BACKDROP
   ============================================================ */
.mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 889;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mega-backdrop.is-visible { opacity: 1; visibility: visible; }

/* ============================================================
   MEGA-MENU OVERLAY PANEL
   ============================================================ */
.mega-menu-overlay {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 890;
  background: var(--bg-primary);
  border-top: 1px solid rgba(212, 175, 109, 0.25);
  border-bottom: 2px solid var(--gold-primary);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.mega-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2.5rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 1.5rem;
}

@media (max-width: 1279px) {
  .mega-menu-inner { grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 100%; }
}
@media (max-width: 767px) {
  .mega-menu-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 499px) {
  .mega-menu-inner { grid-template-columns: 1fr; }
}

/* Column */
.mega-col {
  border-inline-start: 1px solid var(--border-light);
  padding-inline-start: 1.5rem;
}
.mega-col:first-child { border-inline-start: none; padding-inline-start: 0; }

@media (max-width: 1023px) {
  .mega-col { border-inline-start: none; padding-inline-start: 0; }
  .mega-col:nth-child(2),
  .mega-col:nth-child(4) { border-inline-start: 1px solid var(--border-light); padding-inline-start: 1.5rem; }
}

.mega-col-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(212, 175, 109, 0.25);
}

.mega-col-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(212, 175, 109, 0.1);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.mega-col-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin: 0;
  line-height: 1.3;
}

.mega-col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mega-service-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 0.42rem 0.65rem;
  border-radius: 5px;
  transition: background 0.18s ease, color 0.18s ease, padding-inline-start 0.18s ease;
}
.mega-service-btn::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-primary);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mega-service-btn:hover {
  background: rgba(212, 175, 109, 0.08);
  color: var(--gold-primary);
  padding-inline-start: 1rem;
}
.mega-service-btn:hover::before { opacity: 1; }

/* ============================================================
   SERVICE DETAIL DRAWER
   ============================================================ */
.service-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
.service-drawer.is-open { pointer-events: all; }

.service-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.service-drawer.is-open .service-drawer__backdrop { opacity: 1; }

.service-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}
html[dir="rtl"] .service-drawer__panel { left: 0; right: auto; transform: translateX(-110%); }
html[dir="ltr"] .service-drawer__panel { right: 0; left: auto; transform: translateX(110%); }
.service-drawer.is-open .service-drawer__panel { transform: translateX(0); }

.service-drawer__close {
  position: absolute;
  top: 1.2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: var(--transition-fast);
  z-index: 2;
}
html[dir="rtl"] .service-drawer__close { left: 1.2rem; right: auto; }
html[dir="ltr"] .service-drawer__close { right: 1.2rem; left: auto; }
.service-drawer__close:hover { background: var(--gold-primary); color: #fff; border-color: var(--gold-primary); }

.service-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 4.5rem 2rem 1.5rem;
}

.svc-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  background: rgba(212, 175, 109, 0.12);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}

.svc-category-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.svc-panel-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.35;
}

.svc-panel-desc {
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.svc-steps-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

.svc-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.svc-step {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.svc-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212, 175, 109, 0.14);
  color: var(--gold-primary);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-drawer__footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
}
.service-drawer__footer .btn { width: 100%; justify-content: center; }

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.testimonials-section { background-color: var(--bg-secondary); }

/* ---- Carousel wrapper ---- */
.testi-carousel {
  position: relative;
  overflow: hidden;
}

/* Track — forced LTR so translateX math is always left→right */
.testi-track {
  display: flex;
  direction: ltr;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Flex slot: width set by JS (carousel.offsetWidth / perView) */
.testi-card {
  flex-shrink: 0;
  padding: 0 0.75rem;
  box-sizing: border-box;
}

/* Visual card inside each slot */
.testi-card-inner {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.testi-card-inner::before {
  content: '\201C';
  position: absolute;
  top: -0.75rem;
  inset-inline-end: 1.5rem;
  font-size: 6.5rem;
  line-height: 1;
  font-family: Georgia, serif;
  color: var(--gold-primary);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
.testi-card-inner:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 109, 0.4);
  box-shadow: var(--shadow-hover);
}

.testi-stars {
  color: var(--gold-primary);
  font-size: 0.82rem;
  display: flex;
  gap: 0.2rem;
}

.testi-quote {
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--text-secondary);
  flex: 1;
  margin: 0;
}

.testi-client {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.testi-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 109, 0.6);
  flex-shrink: 0;
  overflow: hidden;
}
.testi-avatar svg,
.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-avatar img {
  transform: scale(1.6) translateY(-4px);
}

.testi-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.testi-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}
.testi-role {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: block;
}

/* ---- Carousel Navigation ---- */
.testi-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.testi-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.testi-btn:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  transform: scale(1.08);
}

.testi-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}
.testi-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--gold-primary);
}

/* Flip nav icons in RTL so arrows point in the correct direction */
html[dir="rtl"] .testi-prev i,
html[dir="rtl"] .testi-next i { transform: scaleX(-1); }

/* Arabic mode — card content flows right-to-left */
html[lang="ar"] .testi-card-inner {
  direction: rtl;
  text-align: right;
}
html[lang="ar"] .testi-stars {
  justify-content: flex-start;
}

/* ---- Floating WhatsApp Button ---- */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-3px);
  background-color: #20ba5a;
  box-shadow: 0 6px 20px rgba(32, 186, 90, 0.6);
}

/* Pulse effect */
.whatsapp-float::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: wa-pulse 2s infinite ease-out;
  box-sizing: border-box;
  pointer-events: none;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Tooltip Styling */
.whatsapp-float__tooltip {
  position: absolute;
  right: 75px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  transform: translateX(10px);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

/* Tooltip Arrow */
.whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}

.whatsapp-float:hover .whatsapp-float__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Mirror layout for Arabic (RTL) mode */
html[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 30px;
}

html[dir="rtl"] .whatsapp-float__tooltip {
  right: auto;
  left: 75px;
  transform: translateX(-10px);
}

html[dir="rtl"] .whatsapp-float__tooltip::after {
  right: auto;
  left: -6px;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid var(--border-light);
  border-left: 1px solid var(--border-light);
}

html[dir="rtl"] .whatsapp-float:hover .whatsapp-float__tooltip {
  transform: translateX(0);
}

/* Adjust position on small mobile screens */
@media (max-width: 576px) {
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 20px;
  }
  .whatsapp-float__tooltip {
    display: none; /* Hide tooltips on touch screens */
  }
}

/* --- English Language Layout Enhancements --- */
html[lang="en"] .hero-title {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  html[lang="en"] .hero-title { font-size: 3rem; }
}

html[lang="en"] .hero-desc {
  max-width: 720px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  font-size: 1rem;
}

@media (min-width: 1024px) {
  html[lang="en"] .nav-menu {
    gap: 2.5rem;
  }
}

html[lang="en"] h1, 
html[lang="en"] h2, 
html[lang="en"] h3, 
html[lang="en"] h4, 
html[lang="en"] h5, 
html[lang="en"] h6 {
  letter-spacing: -0.01em;
}

html[lang="en"] p {
  line-height: 1.7;
}

/* ---- Spacing Tweaks (Contact section shift up) ---- */
.testimonials-section {
  padding-bottom: 1.5rem !important;
}

#contact {
  padding-top: 2rem !important;
}

/* ---- Fix phone display alignment in RTL/Arabic ---- */
.phone-ltr,
[data-i18n="contact-phone-val"],
[data-i18n="contact-wa-label"],
[data-i18n="contact-call-label"] {
  direction: ltr !important;
  display: inline-block !important;
  unicode-bidi: embed;
}

/* ============================================================
   CONTACT MODAL POPUP
   ============================================================ */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 38, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.contact-modal__panel {
  position: relative;
  background: var(--bg-primary);
  border-radius: 16px;
  width: min(520px, 92vw);
  max-height: 90vh;
  box-shadow: 0 20px 50px rgba(10, 15, 38, 0.3);
  border: 1px solid rgba(212, 175, 109, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-modal.is-open .contact-modal__panel {
  transform: scale(1) translateY(0);
}

.contact-modal__close {
  position: absolute;
  top: 1.2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: var(--transition-fast);
  z-index: 10;
}

html[dir="rtl"] .contact-modal__close { left: 1.2rem; right: auto; }
html[dir="ltr"] .contact-modal__close { right: 1.2rem; left: auto; }

.contact-modal__close:hover {
  background: var(--gold-primary);
  color: #fff;
  border-color: var(--gold-primary);
  transform: rotate(90deg);
}

.contact-modal__body {
  padding: 3rem 2.2rem 2.2rem;
  overflow-y: auto;
  max-height: 90vh;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) transparent;
}

.contact-modal__body::-webkit-scrollbar {
  width: 6px;
}
.contact-modal__body::-webkit-scrollbar-track {
  background: transparent;
}
.contact-modal__body::-webkit-scrollbar-thumb {
  background-color: var(--gold-primary);
  border-radius: 10px;
}