/* ============================================================
   PROJECT: Masar Power Website
   FILE: style.css
   PURPOSE: Core layout, theming, and section styling
   VERSION: 3.3 (Refactor Build)
   LAST UPDATED: 2025-11-04
   AUTHOR: Raafat + AI Assistant
   ------------------------------------------------------------
   TABLE OF CONTENTS
   1. Root Variables
   2. Global Reset & Typography
   3. Header & Navigation
   4. Hero Section (Particles + Text)
   5. About Section
   6. Why Choose Us Section
   7. Featured Projects Section
   8. Services Section
   9. Partners Section
   10. Statistics Section
   11. Contact Section
   12. Footer
   13. Animations & Utility Effects
   14. Responsive Media Queries
   ============================================================ */

/* ============================================================
   1. ROOT VARIABLES
============================================================ */
:root {
    --primary-color: #007bff;
    --secondary-color: #28a745;
    --dark-bg: #121212;
    --light-bg: #f4f4f4;
    --text-color-dark: #e0e0e0;
    --text-color-light: #333;
    --card-bg-dark: #1e1e1e;
    --card-bg-light: #fff;
    --curtain-color: rgba(0, 95, 115, 0.98);
    --header-height: 80px;
    --accent-blue: #00bfff;
    --gradient-primary: linear-gradient(135deg, rgba(11, 15, 26, 0.85), rgba(26, 47, 79, 0.75), rgba(0, 191, 166, 0.65));
    --dark-bg-primary: #0b0f1a;
    --investment-bg: 25% 0.0075 70;
    --investment-pink: 77.75% 0.1003 350.51;
    --investment-gold: 84.16% 0.1169 71.19;
    --investment-mint: 84.12% 0.1334 165.28;
    --investment-card-width: 250px;
    --investment-card-height: 380px;
    --investment-outline: 9px;
    --investment-preview-bg: #ffffff;
}

/* ------------------------------------------------------------
   Unicode Font Support (Cuneiform)
   Ensures ancient script glyphs render correctly when language
   code is set to cuneiform_old_babylonian
------------------------------------------------------------ */
@font-face {
    font-family: 'Cuneiform';
    src: url('https://fonts.gstatic.com/s/notosanscuneiform/v18/bMrrmTWK7YY-MF22aHGGd7H8PhJtvBDWgb8.ttf') format('truetype');
    font-display: swap;
    unicode-range: U+12000-123FF, U+12400-1247F, U+12480-1254F;
}

html[lang="cuneiform_old_babylonian"],
body[lang="cuneiform_old_babylonian"],
html[lang="cuneiform"],
body[lang="cuneiform"] {
    font-family: 'Cairo', 'Cuneiform', sans-serif !important;
    letter-spacing: 0.05em;
}

html[lang="cuneiform_old_babylonian"] h1,
html[lang="cuneiform_old_babylonian"] h2,
html[lang="cuneiform_old_babylonian"] h3,
html[lang="cuneiform_old_babylonian"] h4,
html[lang="cuneiform_old_babylonian"] h5,
html[lang="cuneiform_old_babylonian"] h6,
html[lang="cuneiform"] h1,
html[lang="cuneiform"] h2,
html[lang="cuneiform"] h3,
html[lang="cuneiform"] h4,
html[lang="cuneiform"] h5,
html[lang="cuneiform"] h6 {
    font-family: 'Cairo', 'Cuneiform', sans-serif !important;
}

.language-selector li[data-lang="cuneiform_old_babylonian"] {
    font-family: 'Cairo', 'Cuneiform', sans-serif;
    letter-spacing: 0.03em;
}

html[lang="cuneiform_old_babylonian"] #languageLabel,
html[lang="cuneiform"] #languageLabel,
html[lang="cuneiform_old_babylonian"] .language-selector .lang-button span,
html[lang="cuneiform"] .language-selector .lang-button span {
    font-family: 'Cairo', 'Cuneiform', sans-serif !important;
}

html[lang="cuneiform_old_babylonian"] .language-selector,
html[lang="cuneiform_old_babylonian"] .language-selector *,
html[lang="cuneiform"] .language-selector,
html[lang="cuneiform"] .language-selector * {
    font-family: 'Cairo', 'Cuneiform', sans-serif !important;
}

site-footer[lang="cuneiform_old_babylonian"],
site-footer[lang="cuneiform"],
site-footer[lang="cuneiform_old_babylonian"] *,
site-footer[lang="cuneiform"] * {
    font-family: 'Cairo', 'Cuneiform', sans-serif !important;
}

/* ============================================================
   2. GLOBAL RESET + TYPOGRAPHY
============================================================ */

/* ------------------------------------------------------------
   Z-INDEX LAYERING POLICY
   hero gradient/background = 0, hero particles = 0, statistics particles = 1,
   hero content & section cards = 1–5, header = 10, language selector = 15,
   overlays/lightbox = 9999, language dropdown = 99999
------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

/* Utility: disable transitions when necessary (non-visual change) */
.no-transition *,
.no-transition {
    transition: none !important;
}

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

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-color-light);
    margin: 0;
    padding: 0;
    padding-top: 0; /* No padding - hero starts from top, header floats over it */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    max-width: 100%;
    transition: background-color 2s ease, color 2s ease, border-color 2s ease, box-shadow 2s ease;
}

/* تأثير انتقال ناعم عند التبديل بين الوضعين - يطبق على جميع العناصر */
body *,
body *::before,
body *::after {
    transition: background-color 2s ease, color 2s ease, border-color 2s ease, box-shadow 2s ease;
}

/* Dynamic direction based on dir attribute */
html[dir="rtl"] body,
body[dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"] body,
body[dir="ltr"] {
    direction: ltr;
}

/* Make all images responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Make all iframes responsive */
iframe {
    max-width: 100%;
    width: 100%;
}

/* Light Mode (Default) */
body.light-mode {
    background-color: var(--light-bg);
    color: var(--text-color-light);
}

/* Legacy Notes: Header scrolled state previously disabled – merged into unified header rules */

/* Dark Mode */
body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--text-color-dark);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 20px;
    box-sizing: border-box;
}

/* Ensure main content has same max-width */
main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

/* ============================================================
   2. HEADER & NAVIGATION
   Description: Fixed header, navigation controls, language selector
============================================================ */
/* Header - Completely transparent, no background, no movement */
/* z-index: 10 - Above hero content but not too high */
/* ============================================================
   3. HEADER & NAVIGATION
============================================================ */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10; /* Above hero-content (1) but below dropdown (9999) */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    overflow: visible; /* Allow dropdown to show */
    transform: translateY(0);
    will-change: opacity, transform;
    --header-text-color: #f5f6fb;
    --header-control-bg: rgba(255, 255, 255, 0.12);
    --header-control-border: rgba(255, 255, 255, 0.24);
    --header-control-hover-bg: rgba(255, 255, 255, 0.18);
    color: var(--header-text-color);
    transition: transform 0.4s ease-in-out, color 0.9s ease;
}

header.header-on-light {
    --header-text-color: #101623;
    --header-control-bg: rgba(0, 0, 0, 0.05);
    --header-control-border: rgba(0, 0, 0, 0.12);
    --header-control-hover-bg: rgba(0, 0, 0, 0.1);
}

header.header-on-dark {
    --header-text-color: #FFFFFF;
    --header-control-bg: rgba(255, 255, 255, 0.12);
    --header-control-border: rgba(255, 255, 255, 0.24);
    --header-control-hover-bg: rgba(255, 255, 255, 0.18);
}

/* Page-specific header adjustments */
body.index-page header#main-header,
body.products-page header#main-header,
body.projects-page header#main-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Header visibility states used by scroll logic */
#main-header {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

header.hidden,
header.visible {
    opacity: 1;
    transform: translateY(0);
}

header a,
header button,
header .control-btn,
header .lang-button,
header .language-selector,
header .header-controls {
    cursor: pointer;
}

/* ============================================
   Header Layout System - Responsive Flex with Dynamic Ordering
   Shared between index.html and products.html
   ============================================ */
.sticky-nav {
    display: flex;
  align-items: center;
    justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 20px;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  background: transparent !important; /* Ensure no background from nav */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important; /* CRITICAL: Don't clip dropdown */
}

/* Base flex properties for all children */
.sticky-nav > .logo,
.sticky-nav > .nav-links,
.sticky-nav > .header-controls {
  flex: 0 0 auto;
  display: flex;
    align-items: center;
}

/* Center the navigation links */
.sticky-nav > .nav-links {
  flex: 1 1 auto;
  justify-content: center;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.2rem; /* Better spacing */
  align-items: center;
}

/* Header Controls */
.header-controls {
    display: flex;
  gap: 0.625rem;
    align-items: center;
  z-index: 15; /* Above header (10), below dropdown (9999) */
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  position: relative; /* Create stacking context */
  pointer-events: auto; /* Ensure clicks work */
  overflow: visible !important; /* Don't clip dropdown */
}

/* RTL Layout (Arabic/Kurdish): logo right, nav centered, controls left */
html[dir="rtl"] .sticky-nav {
  flex-direction: row;
}

/* In RTL: logo on RIGHT (order 1 visually from right), controls on LEFT */
html[dir="rtl"] .sticky-nav > .logo {
  order: 1;
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .sticky-nav > .nav-links {
  order: 2;
  margin-left: auto;
  margin-right: auto;
  flex: 1 1 auto;
  justify-content: center;
}

html[dir="rtl"] .sticky-nav > .header-controls {
  order: 3;
  margin-left: 0;
  margin-right: auto;
}

/* LTR Layout (English/French/German/Italian): logo left, nav centered, controls right */
html[dir="ltr"] .sticky-nav {
  flex-direction: row;
}

/* In LTR: logo on LEFT, controls on RIGHT */
html[dir="ltr"] .sticky-nav > .logo {
  order: 1;
  margin-left: 0;
  margin-right: auto;
}

html[dir="ltr"] .sticky-nav > .nav-links {
  order: 2;
  margin-left: auto;
  margin-right: auto;
  flex: 1 1 auto;
  justify-content: center;
}

html[dir="ltr"] .sticky-nav > .header-controls {
  order: 3;
  margin-left: auto;
  margin-right: 0;
}

/* Logo - Larger size with entrance animation (Desktop only) */
header .logo img,
.sticky-nav > .logo img { 
  display: block; 
  height: auto; /* Use max-height instead of fixed height */
  width: auto; 
  max-height: 120px;
  transition: none; /* No size change on scroll */
}

/* Logo growth animation on page load - Desktop only (min-width: 769px) */
/* ============================================================
   12. RESPONSIVE MEDIA QUERIES
   Description: Device-specific adjustments for layout and typography
============================================================ */
@media (min-width: 769px) {
  header .logo img,
  .sticky-nav > .logo img {
    animation: logoGrow 0.8s ease-out forwards;
  }
}

@keyframes logoGrow {
  0% {
    max-height: 40px;
    opacity: 0.8;
  }
  100% {
    max-height: 120px;
    opacity: 1;
  }
}

/* Control Buttons - 20% smaller, no animations */
.header-controls .control-btn {
  width: 32px; /* 20% smaller: 40px * 0.8 */
  height: 32px; /* 20% smaller: 40px * 0.8 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--header-control-bg);
  border: 1px solid var(--header-control-border);
  color: var(--header-text-color);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.9s ease;
  font-size: 14.4px; /* 20% smaller: 18px * 0.8 */
  line-height: 1;
  box-shadow: none;
}

.header-controls .control-btn:hover {
  background: var(--header-control-hover-bg);
  transform: none; /* No transform */
}

.header-controls .control-btn:active { 
  transform: none; /* No transform */
}

.header-controls .control-btn i,
.header-controls .control-btn svg {
  color: inherit;
  transition: color 0.9s ease;
}

/* Language Selector */
.language-selector {
  position: relative;
  z-index: 15; /* Above header (10), below dropdown (9999) */
  overflow: visible !important; /* Ensure dropdown is not clipped */
  pointer-events: auto !important; /* Ensure clicks work */
}

.language-selector .lang-button,
#languageButton {
  display: inline-flex;
  align-items: center;
  gap: 6.4px; /* 20% smaller: 8px * 0.8 */
  padding: 6.4px 9.6px; /* 20% smaller: 8px/12px * 0.8 */
  border-radius: 20px;
  background: var(--header-control-bg);
  border: 1px solid var(--header-control-border);
  color: var(--header-text-color);
  cursor: pointer;
  font-size: 11.2px; /* 20% smaller: 14px * 0.8 */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.9s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-weight: 500;
  min-width: fit-content;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
  touch-action: manipulation;
  position: relative !important; /* Ensure positioning context */
  pointer-events: auto !important; /* Ensure clicks work */
  z-index: 15 !important; /* Same as language-selector - above header (10) */
}

.language-selector .lang-button:hover {
  background: var(--header-control-hover-bg);
  transform: none; /* No transform */
}

.language-selector .lang-button .globe { 
  font-size: 16px; 
}

.language-selector .lang-button .globe,
.language-selector .lang-button span {
  color: inherit;
  transition: color 0.9s ease;
}

.language-selector .dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: fit-content;
  min-width: max-content;
  padding: 0.4rem 0.8rem;
  border-radius: 16px;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(11, 15, 26, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden; /* Only for dropdown content, not clipping */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
  box-sizing: border-box;
}

/* Ensure dropdown and selector are above everything when open */
.language-selector.open {
  z-index: 9999;
  position: relative;
  overflow: visible; /* Don't clip dropdown */
}

/* ===== End of Section: Language Selector (Header) ===== */

.language-selector.open .dropdown {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* LTR: dropdown from left */
html[dir="ltr"] .language-selector .dropdown {
  right: auto;
  left: 0;
}

/* Light mode dropdown - True Glass Effect */
body.light-mode .language-selector .dropdown {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Dark mode dropdown - True Glass Effect */
body.dark-mode .language-selector .dropdown {
  background: rgba(11, 15, 26, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 2px 8px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Open state */
/* Conflict resolved: kept consolidated open-state above; duplicate removed */

.language-selector .dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0; /* Removed padding from ul since dropdown now has padding */
}

.language-selector .dropdown li {
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
  transition: none; /* No transitions */
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.language-selector .dropdown li:last-child {
  margin-bottom: 0;
}

/* Light mode text */
body.light-mode .language-selector .dropdown li {
  color: #1a1a1a;
}

/* Dark mode text */
body.dark-mode .language-selector .dropdown li {
  color: #FFFFFF;
}

/* Hover effect - no animation */
.language-selector .dropdown li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 123, 255, 0.12));
  opacity: 0;
  transition: none; /* No transitions */
  border-radius: 10px;
}

.language-selector .dropdown li:hover::before {
  opacity: 1;
}

body.dark-mode .language-selector .dropdown li::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
}

.language-selector .dropdown li:hover {
  transform: none; /* No transform */
  background: rgba(0, 123, 255, 0.06);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

html[dir="ltr"] .language-selector .dropdown li:hover {
  transform: none; /* No transform */
}

body.dark-mode .language-selector .dropdown li:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Active/selected language indicator */
.language-selector .dropdown li[data-lang] {
  position: relative;
}


/* Tablet medium screens: shrink logo ~40% (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .sticky-nav > .logo img {
    max-height: 96px !important; /* ~40% smaller than 160px */
    max-width: 120px !important;
  }
}


/* Ultra small phones: fine-tune nav text (≤382px) */
@media (max-width: 382px) {
  .sticky-nav > .nav-links {
    font-size: clamp(0.68rem, 2.1vw, 0.82rem) !important;
  }
  .sticky-nav > .nav-links li a {
    font-size: clamp(0.68rem, 2.1vw, 0.82rem) !important;
    padding: 0.18rem 0.35rem !important;
  }
}

/* Extra small width: shrink language button and theme toggle by ~30% (≤400px) */
@media (max-width: 400px) {
  .header-controls .control-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
  }
  .language-selector .lang-button {
    padding: 2px 4px !important;
    font-size: 7px !important;
    gap: 2px !important;
  }
  .language-selector .lang-button .globe,
  .language-selector .lang-button span {
    font-size: 7px !important;
  }
}

.logo {
    flex-shrink: 0;
}

.logo img {
    height: auto;
    width: auto;
    max-height: 160px;
    max-width: min(200px, 30vw);
    object-fit: contain;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.nav-links li {
    margin-left: 0;
}

/* Nav links - inherit color from header tone */
.nav-links a {
    color: inherit;
    font-weight: 700;
    font-size: 0.8em; /* 20% smaller */
    padding: 0.3em 0.9em; /* Reduced spacing */
    white-space: nowrap;
    transition: color 0.9s ease;
    display: block;
    border-radius: 4px;
    background: transparent;
}


.nav-links a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.nav-toggles button {
    background: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

/* ============================================================
   3. HERO & PARTICLES
   Description: Hero layout, overlay gradient, feature cards, shared particles layer
============================================================ */
/* Hero Gradient - Shared between index.html and products.html */
.hero-gradient {
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  z-index: 0; /* Same layer as particles - behind content */
}

/* ============================================================
   4. HERO SECTION (PARTICLES + TEXT)
   Description: Hero layout, overlay gradient, feature cards, shared particles layer
============================================================ */
#hero {
    position: relative;
    min-height: 100vh;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: 0 !important; /* Start from top, header floats over */
    padding-top: 0 !important;
    top: 0;
    left: 0;
    width: 100%;
}

/* ------------------------------------------------------------
   Particles Layer (Hero + Statistics)
------------------------------------------------------------ */
#particles-js,
#stats-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Default: behind hero content */
    pointer-events: none; /* Don't block clicks */
    background: linear-gradient(-45deg, #020c1b, #011f3a, #003e52, #006a71, #008272, #020c1b);
    background-size: 1200% 1200%;
    animation: backgroundPan 120s ease-in-out infinite;
}

#stats-particles {
    z-index: 1; /* Statistics section needs particles just under counters */
}

#hero #particles-js,
#hero .hero-gradient {
    z-index: 0; /* Same layer as hero */
    pointer-events: none; /* Particles don't block clicks - allow clicks to pass through */
}

#particles-js canvas,
#stats-particles canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1; /* Above particles (z:0) and gradient (z:0), but below header (z:10) */
    color: #fff;
    padding: clamp(8rem, 15vh, 12vh) clamp(1rem, 4vw, 2rem) 2rem;
    margin-top: clamp(4rem, 8vh, 6rem); /* Space for header at top */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    will-change: transform, opacity;
}

.hero-text {
    margin-bottom: clamp(2rem, 5vw, 2.5rem);
    width: 100%;
    max-width: 100%;
    text-align: center !important; /* Always center */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Force center alignment for all hero text elements regardless of dir */
html[dir="rtl"] .hero-text,
body[dir="rtl"] .hero-text,
html[dir="ltr"] .hero-text,
body[dir="ltr"] .hero-text {
    text-align: center !important;
}

.hero-text #typed-text {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    margin: 0 auto;
    line-height: 1.3;
    min-height: 120px;
    text-align: center !important;
    width: 100%;
}

.hero-text .typed-cursor {
    font-size: clamp(2.2rem, 5vw, 4rem);
    color: var(--accent-blue);
}

.hero-text h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin: 12px auto;
    text-align: center !important;
    width: 100%;
}

.hero-text p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 600px;
    margin: 0 auto 0;
    line-height: 1.8;
    color: #cce7ff;
    text-align: center !important;
}

.hero-feature-cards {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: clamp(1rem, 2.5vw, 1.75rem) !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: clamp(1.5rem, 3vw, 2rem) auto !important;
  text-align: center !important;
  --feature-card-height: 64px;
  --feature-card-hover-height: clamp(98px, 18vh, 125px);
  min-height: calc(var(--feature-card-hover-height) + 6px);
}

.feature-card {
  flex: 1 0 clamp(180px, 28vw, 260px);
  max-width: clamp(200px, 32vw, 300px);
  height: var(--feature-card-height);
  padding: 0;
  position: relative !important;
  overflow: hidden !important;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

body.dark-mode .feature-card {
  background-color: rgba(10, 16, 28, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

.feature-card:hover {
  height: var(--feature-card-hover-height);
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.feature-card h3,
.feature-card p {
  position: absolute;
  left: 50%;
  width: calc(100% - clamp(1.5rem, 3vw, 2.5rem));
  padding: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  margin: 0;
  color: #fff;
}

.feature-card h3 {
  top: 50%;
  font-size: 1.05rem;
  font-weight: 600;
}

.feature-card p {
  top: 118%;
  opacity: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #e7f7ff;
}

.feature-card:hover h3 {
  opacity: 0;
}

.feature-card:hover p {
  top: 50%;
  opacity: 1;
}

@media (max-width: 992px) {
  .hero-feature-cards {
    flex-wrap: wrap;
    gap: 1.5rem;
    --feature-card-height: 60px;
    --feature-card-hover-height: clamp(95px, 24vh, 130px);
  }
  .feature-card {
    flex: 1 1 260px;
    max-width: 420px;
  }
}

@media (max-width: 600px) {
  .hero-feature-cards {
    --feature-card-height: 58px;
    --feature-card-hover-height: clamp(90px, 50vw, 125px);
  }
  .feature-card {
    width: 100%;
    max-width: 100%;
  }
}



section {
    padding: clamp(2.5rem, 6vw, 3.125rem) 0;
    position: relative;
    z-index: 1;
    background-color: var(--light-bg);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

section:nth-of-type(odd) {
    background-color: var(--card-bg-light);
}

body.dark-mode section {
    background-color: var(--dark-bg);
}

body.dark-mode section:nth-of-type(odd) {
    background-color: var(--card-bg-dark);
}

/* ============================================================
   5. ABOUT SECTION
   Description: Company overview narrative and sidebar cards
============================================================ */
#about.container {
    padding-top: clamp(2.5rem, 6vw, 3.75rem);
    padding-bottom: clamp(2.5rem, 6vw, 3.75rem);
    overflow: hidden;
}

.about-container {
    display: grid;
    grid-template-columns: 2fr 1.44fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
    padding-top: 1.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Note: Card sections max-width is defined in the Large Devices media query below */

#about.container .about-container {
    max-width: 100%;
}

.about-main {
    /* Initial state set by GSAP */
    position: relative;
}

/* RTL text alignment */
html[dir="rtl"] .about-main,
body[dir="rtl"] .about-main {
    text-align: right;
}

/* LTR text alignment */
html[dir="ltr"] .about-main,
body[dir="ltr"] .about-main {
    text-align: left;
}

.about-header {
    margin-bottom: clamp(1.5rem, 4vw, 1.875rem);
}

/* RTL text alignment */
html[dir="rtl"] .about-header,
body[dir="rtl"] .about-header {
    text-align: right;
}

/* LTR text alignment */
html[dir="ltr"] .about-header,
body[dir="ltr"] .about-header {
    text-align: left;
}

.about-header h2 {
    font-size: clamp(1.75rem, 5vw, 2.8rem);
    font-weight: 700;
}

body.gsap-enabled .about-part {
     visibility: hidden; /* Hide until animated by GSAP */
}


.about-main h3 {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 700;
    margin-top: clamp(1.5rem, 4vw, 1.875rem);
    margin-bottom: 0.9375rem;
    color: var(--primary-color);
}

.about-main p {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.8;
    color: #555;
}

body.dark-mode .about-main p {
    color: var(--text-color-dark);
}

.about-main ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.about-main ul li {
    display: flex;
    align-items: center;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

/* RTL: icon on left */
html[dir="rtl"] .about-main ul li img,
body[dir="rtl"] .about-main ul li img {
    margin-left: clamp(0.5rem, 1.5vw, 0.625rem);
    margin-right: 0;
}

/* LTR: icon on right */
html[dir="ltr"] .about-main ul li img,
body[dir="ltr"] .about-main ul li img {
    margin-right: clamp(0.5rem, 1.5vw, 0.625rem);
    margin-left: 0;
}

.about-main ul li img {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
    flex-shrink: 0;
}

.about-main .tagline {
    margin-top: clamp(1.5rem, 4vw, 1.875rem);
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    font-weight: bold;
    color: var(--secondary-color);
    text-align: center;
}

.about-sidebar {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5625rem);
    width: 100%;
    max-width: 100%;
}

body.gsap-enabled .sidebar-card {
    position: relative;
    border-radius: 12px;
    visibility: hidden; /* Hide until animated by GSAP */
    background-color: var(--card-bg-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

body.dark-mode .sidebar-card {
    background-color: var(--card-bg-dark);
}

.card-content {
    padding: clamp(1rem, 3vw, 1.5625rem);
    border-right: clamp(3px, 0.8vw, 5px) solid var(--primary-color);
    box-sizing: border-box;
}

.sidebar-card .curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('fabric/fabric-of-squares.png');
    background-color: var(--curtain-color);
    z-index: 2;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

body.dark-mode .card-content {
    border-right-color: var(--secondary-color);
}

.sidebar-card h4 {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    margin-bottom: 0.9375rem;
    color: var(--primary-color);
}

body.dark-mode .sidebar-card h4 {
    color: var(--secondary-color);
}

.sidebar-card p,
.sidebar-card .systems-list {
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.7;
    color: #666;
}

body.dark-mode .sidebar-card p,
body.dark-mode .sidebar-card .systems-list {
    color: #ccc;
}

.systems-list {
    list-style: none;
    padding: 0;
}

.systems-list li {
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
}

.systems-list .item-content {
    position: relative;
    min-height: 48px;
    height: auto;
    display: flex;
    align-items: center;
}

.systems-list .title,
.systems-list .description {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: none; /* GSAP will handle animations */
}

.systems-list .title {
    opacity: 1;
    transform: translateX(0);
}

/* RTL: icon on left */
html[dir="rtl"] .systems-list .title img,
body[dir="rtl"] .systems-list .title img {
    margin-left: clamp(0.5rem, 1.5vw, 0.75rem);
    margin-right: 0;
}

/* LTR: icon on right */
html[dir="ltr"] .systems-list .title img,
body[dir="ltr"] .systems-list .title img {
    margin-right: clamp(0.5rem, 1.5vw, 0.75rem);
    margin-left: 0;
}

.systems-list .title img {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
    flex-shrink: 0;
}

/* RTL: slide from right */
html[dir="rtl"] .systems-list .description,
body[dir="rtl"] .systems-list .description {
    transform: translateX(-100%);
}

/* LTR: slide from left */
html[dir="ltr"] .systems-list .description,
body[dir="ltr"] .systems-list .description {
    transform: translateX(100%);
}

.systems-list .description {
    opacity: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================================
   6. WHY CHOOSE US
   Description: Trust signals, differentiators, and infographic cards
============================================================ */
#why-choose-us {
    text-align: center;
}

/* General text direction support */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3,
body[dir="rtl"] h4, body[dir="rtl"] h5, body[dir="rtl"] h6 {
    text-align: right;
    direction: rtl;
}

html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3,
html[dir="ltr"] h4, html[dir="ltr"] h5, html[dir="ltr"] h6,
body[dir="ltr"] h1, body[dir="ltr"] h2, body[dir="ltr"] h3,
body[dir="ltr"] h4, body[dir="ltr"] h5, body[dir="ltr"] h6 {
    text-align: left;
    direction: ltr;
}

/* Paragraphs and text elements - respect parent direction and center-aligned */
/* Keep center-aligned sections centered */
html[dir="rtl"] .text-center, html[dir="rtl"] #why-choose-us,
body[dir="rtl"] .text-center, body[dir="rtl"] #why-choose-us {
    text-align: center;
}

html[dir="ltr"] .text-center, html[dir="ltr"] #why-choose-us,
body[dir="ltr"] .text-center, body[dir="ltr"] #why-choose-us {
    text-align: center;
}

#why-choose-us h2 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin-bottom: clamp(2rem, 5vw, 2.5rem);
}

.why-grid {
    display: grid;
    gap: clamp(0.625rem, 2vw, 1.25rem); /* Responsive gap */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Desktop: 4 columns (≥1200px) */
@media (min-width: 1200px) {
    .why-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 cards in one row */
    }
}

/* Tablet: 2 columns (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 grid */
    }
}

/* Mobile: 1 column (≤767px) */
@media (max-width: 767px) {
    .why-grid {
        grid-template-columns: 1fr; /* Single column */
    }
}

.why-card {
    position: relative;
    height: clamp(260px, 26vh, 300px); /* Fixed responsive height - unified for both modes */
    min-height: clamp(260px, 26vh, 300px); /* Same as height */
    max-height: clamp(260px, 26vh, 300px); /* Prevent expansion beyond height */
    border-radius: 15px;
    background-color: var(--card-bg-light);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: background-color 2s ease, box-shadow 2s ease, transform 2s ease;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Ensure no filter on main element that causes layout reflow */
    filter: none;
    backdrop-filter: none;
    /* Prevent any automatic height calculation */
    align-items: stretch;
}

/* Dark mode styles for why-card - Same height as light mode to prevent vertical expansion */
body.dark-mode .why-card {
    background-color: var(--card-bg-dark);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    /* Use exact same height calculation as light mode - prevent any expansion */
    height: clamp(260px, 26vh, 300px) !important; /* Fixed height - prevents any expansion */
    min-height: clamp(260px, 26vh, 300px) !important; /* Unified with light mode */
    max-height: clamp(260px, 26vh, 300px) !important; /* Prevent expansion beyond this */
    /* Force height calculation - override any inherited or computed values */
    overflow: hidden !important; /* Ensure content doesn't push height */
    transition: background-color 2s ease, box-shadow 2s ease, transform 2s ease;
    /* Remove any filter or backdrop-filter that might cause reflow */
    filter: none !important;
    backdrop-filter: none !important;
    /* Prevent any transform or scale that might affect layout */
    transform: none !important;
    will-change: auto !important;
}

body.dark-mode .why-card .why-card-content {
    color: var(--text-color-dark);
    flex: 1 1 auto !important; /* Prevent expansion in dark mode */
    min-height: 0 !important; /* Critical: allows flex item to shrink */
    max-height: 100% !important; /* Never exceed parent height */
}

.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    opacity: 0;
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    z-index: 0;
    transform: scale(0.9);
}


.why-card-content {
    position: relative;
    flex: 1 1 auto; /* Use flex shorthand - allows shrinking but not forced expansion */
    min-height: 0; /* Critical: allows flex item to shrink below content size */
    max-height: 100%; /* Never exceed parent height */
    padding: clamp(1rem, 2.5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-color-light);
    transition: color 2s ease-in-out;
    z-index: 1;
    box-sizing: border-box;
    overflow: hidden; /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 1.15rem; /* Increased by 15% - was 1rem */
    line-height: 1.55; /* Increased by ~15% - was 1.5 */
    text-overflow: ellipsis;
    /* Ensure no filter or backdrop-filter that might cause reflow */
    filter: none;
    backdrop-filter: none;
}

.why-icon {
    margin-bottom: 20px;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.why-icon img {
    width: clamp(40px, 8vw, 60px);
    height: clamp(40px, 8vw, 60px);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.why-card h3 {
    font-size: 1.15rem; /* Increased by 15% - was 1rem */
    margin-bottom: clamp(0.5rem, 1.5vw, 0.9375rem);
    color: var(--primary-color);
    transition: transform 0.5s ease, opacity 0.5s ease, color 2s ease-in-out;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    line-height: 1.55; /* Increased by ~15% - was 1.5 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.why-card-description {
    position: absolute;
    bottom: -100%; 
    left: 0;
    width: 100%;
    padding: clamp(0.875rem, 2.5vw, 1.125rem); /* Responsive padding */
    box-sizing: border-box;
    opacity: 0;
    transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
    max-width: 100%;
    overflow: hidden;
}

.why-card-description p {
    font-size: 1.15rem; /* Increased by 15% - was 1rem */
    line-height: 1.55; /* Increased by ~15% - was 1.5 */
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Smart text fit using line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Maximum 6 lines */
    -webkit-box-orient: vertical;
    line-clamp: 6; /* Standard property for compatibility */
}

.why-card:hover {
    background-color: var(--hover-color, #007bff); /* Default hover color */
}

/* Dark mode hover - 50% darker background using pseudo-element */
/* Override hover background in dark mode to use darker overlay */
body.dark-mode .why-card:hover {
    background-color: var(--card-bg-dark); /* Keep base dark background */
    /* Ensure no filter on main element that causes reflow */
    filter: none;
    backdrop-filter: none;
}

/* Use ::after for dark mode hover overlay - prevents layout reflow */
body.dark-mode .why-card::after {
    content: '';
    position: absolute;
    inset: 0; /* top: 0; left: 0; width: 100%; height: 100%; */
    background-color: var(--hover-color, #007bff);
    opacity: 0;
    transition: opacity 2s ease, filter 2s ease;
    z-index: 0;
    pointer-events: none;
    filter: brightness(0.5); /* Makes hover background 50% darker */
    border-radius: 15px;
    /* Prevent this pseudo-element from affecting layout */
    box-sizing: border-box;
}

body.dark-mode .why-card:hover::after {
    opacity: 1;
}

/* Ensure content stays above the darker overlay */
body.dark-mode .why-card-content {
    position: relative;
    z-index: 1;
}

/* Keep description absolutely positioned in dark mode to prevent layout expansion */
body.dark-mode .why-card-description {
    position: absolute !important; /* Must stay absolute to prevent layout expansion */
    z-index: 1;
}

.why-card:hover::before {
    opacity: 0.1;
    transform: scale(1);
}


.why-card:hover .why-card-content {
    color: rgb(0, 0, 0);
}

/* Dark mode: Keep hover text visible but slightly darker */
body.dark-mode .why-card:hover .why-card-content {
    color: rgba(255, 255, 255, 0.85); /* Slightly transparent for readability */
}

.why-card:hover h3 {
    color: white;
}

/* Dark mode: Keep title visible on hover */
body.dark-mode .why-card:hover h3 {
    color: rgba(255, 255, 255, 0.9);
}


.why-card:hover .why-icon,
.why-card:hover h3 {
    transform: translateY(-120px);
    opacity: 0;
}

.why-card:hover .why-card-description {
    bottom: 50%;
    transform: translateY(45%);
    opacity: 1;
}


/* ============================================================
   FEATURED PROJECTS SECTION (SWIPER SLIDER)
   ============================================================ */
#projects-preview {
  margin-top: clamp(3rem, 7vw, 5rem);
}

#projects-preview .container {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.projects-preview-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.projects-preview-subtitle {
  color: rgba(12, 20, 35, 0.75);
  margin: 0 0 0.4rem 0;
  font-size: 1rem;
}

body.dark-mode .projects-preview-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

#projects-preview #projects-preview-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0;
  color: var(--primary-color);
}

.masar-projects-slider-container {
  position: relative;
  width: 100%;
}

.swiper {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.masar-projects-slider {
  --slider-card-bg: var(--card-bg-light);
  --slider-card-text: var(--text-color-light);
  padding-inline: clamp(0rem, 5vw, 98px);
  position: relative;
}

body.dark-mode .masar-projects-slider {
  --slider-card-bg: var(--card-bg-dark);
  --slider-card-text: var(--text-color-dark);
}

/* Mobile fix: center card in slide */
#projects-preview .masar-projects-slider__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(360px, 60vh, 560px);
}

/* Safety: center slider item */
#projects-preview .masar-projects-slider-item {
  margin-inline: auto;
  max-width: 100%;
}

.masar-projects-slider__slider .swiper-slide {
  width: auto;
  height: auto;
}

.slider-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  z-index: 2;
  pointer-events: none;
}

.slider-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.slider-nav__item svg {
  display: block;
}

/* عكس اتجاه الأسهم في RTL */
[dir="rtl"] .slider-nav__item_prev svg,
[dir="rtl"] .slider-nav__item_next svg {
  transform: scaleX(-1);
}

.slider-nav__item.disabled {
  cursor: default;
  opacity: 0.4;
}

body.dark-mode .slider-nav__item {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.slider-nav__item:not(.disabled):hover {
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .slider-nav {
    display: none;
  }
}

.slider-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 30px;
  flex-wrap: wrap;
}

.slider-pagination__item {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(12, 20, 35, 0.2);
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0.4;
}

.slider-pagination__item.active {
  width: 32px;
  opacity: 1;
  background: var(--primary-color);
}

body.dark-mode .slider-pagination__item {
  background: rgba(255, 255, 255, 0.3);
}

body.dark-mode .slider-pagination__item.active {
  background: var(--accent-blue);
}

.masar-projects-slider-item {
  --border-radius: 18px;
  width: min(400px, calc(100vw - 60px));
  background: var(--slider-card-bg);
  color: var(--slider-card-text);
  border-radius: var(--border-radius);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid rgba(12, 20, 35, 0.08);
  display: flex;
  flex-direction: column;
}

body.dark-mode .masar-projects-slider-item {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.08);
}

.masar-projects-slider-item__image {
  aspect-ratio: 400 / 270;
  overflow: hidden;
}

.masar-projects-slider-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.masar-projects-slider-item__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 20px 28px;
  min-height: 220px;
}

.masar-projects-slider-item__info {
  flex: 1;
}

.masar-projects-slider-item__title {
  font-size: 1.2rem;
  margin: 0 0 0.6rem 0;
  font-weight: 600;
  color: inherit;
}

.masar-projects-slider-item__text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: inherit;
  opacity: 0.95;
  max-height: 11rem;
  overflow: hidden;
}

.masar-projects-slider-item__text p,
.masar-projects-slider-item__text h1,
.masar-projects-slider-item__text h2,
.masar-projects-slider-item__text h3,
.masar-projects-slider-item__text h4,
.masar-projects-slider-item__text h5,
.masar-projects-slider-item__text h6 {
  margin: 0 0 0.35rem 0;
  color: inherit;
}

.masar-projects-slider-item__text ul,
.masar-projects-slider-item__text ol {
  margin: 0 0 0.5rem 1rem;
  padding-left: 1rem;
}

.masar-projects-slider-item__text strong {
  font-weight: 700;
}

.masar-projects-slider-item__text a {
  color: var(--primary-color);
  text-decoration: underline;
}

body.dark-mode .masar-projects-slider-item__text a {
  color: var(--accent-blue);
}

.masar-projects-slider-item__footer {
  display: flex;
  justify-content: flex-start;
}

.masar-projects-slider-item__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

body.dark-mode .masar-projects-slider-item__btn {
  color: var(--accent-blue);
}

.masar-projects-slider-item__btn-icon {
  width: 24px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.masar-projects-slider-item__btn-icon::before,
.masar-projects-slider-item__btn-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.masar-projects-slider-item__btn-icon::after {
  transform: translate(-100%, 100%);
}

@keyframes slider-btn-arrow {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(110%, -110%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .masar-projects-slider-item__btn:hover {
    color: var(--accent-blue);
  }

  .masar-projects-slider-item__btn:hover .masar-projects-slider-item__btn-icon::before,
  .masar-projects-slider-item__btn:hover .masar-projects-slider-item__btn-icon::after {
    animation: slider-btn-arrow 0.4s ease forwards;
  }
}

@media (hover: none) {
  .masar-projects-slider-item__btn:active .masar-projects-slider-item__btn-icon::before,
  .masar-projects-slider-item__btn:active .masar-projects-slider-item__btn-icon::after {
    animation: slider-btn-arrow 0.4s ease forwards;
  }
}

.projects-loader,
.projects-empty {
  text-align: center;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(12, 20, 35, 0.05);
  color: var(--text-color-light);
  font-weight: 600;
  font-size: 1rem;
}

.projects-empty {
  background: rgba(12, 20, 35, 0.08);
}

body.dark-mode .projects-loader,
body.dark-mode .projects-empty {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color-dark);
}

.projects-preview-footer {
  display: flex;
  justify-content: center;
}

.projects-preview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #0c5adb, #2ca6ff);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(12, 90, 219, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.projects-preview-link:hover,
.projects-preview-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(12, 90, 219, 0.35);
}

body.dark-mode .projects-preview-link {
  background: linear-gradient(135deg, #3aa0ff, #36d1dc);
  color: #0c111c;
  box-shadow: 0 12px 30px rgba(19, 207, 255, 0.3);
}

@media (max-width: 768px) {
  .projects-preview-heading {
    text-align: center;
  }

  .masar-projects-slider {
    padding-inline: 0;
    margin-inline: -10px;
  }
}

/* ============================================================
   تحسينات عامة
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0 !important; transition-duration: 0 !important; }
}



/* ============================================================
   8. SERVICES & BENEFITS — Restored after cleanup
============================================================ */
/* [Services] Responsive grid that adapts from 1–3 columns */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30vw, 350px), 1fr));
    gap: clamp(1rem, 3vw, 1.5625rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* [Services] Gradient card tiles with hover lift */
.service-card {
    padding: clamp(1.25rem, 3vw, 1.5625rem);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.service-card-1 {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
}

.service-card-1:hover {
    background: linear-gradient(135deg, #218c3a, #1ca67c);
}

/* Dark mode: darker versions of service cards */
/* Apply brightness filter to darken by 50% while preserving original gradients */
body.dark-mode .service-card-1 {
    filter: brightness(0.5) saturate(1);
    transition: filter 0.5s ease, background-color 0.5s ease;
    background: linear-gradient(135deg, #28a745, #20c997); /* Keep original gradient */
    color: #fff;
}

body.dark-mode .service-card-1:hover {
    filter: brightness(0.6) saturate(1); /* Slightly brighter on hover */
    background: linear-gradient(135deg, #218c3a, #1ca67c); /* Keep original hover gradient */
}

.service-card-2 {
    background: linear-gradient(135deg, #007BFF, #00C6FF);
    color: #fff;
}

.service-card-2:hover {
    background: linear-gradient(135deg, #0062cc, #00a0cc);
}

/* Dark mode: darker versions of service card-2 */
/* Apply brightness filter to darken by 50% while preserving original gradients */
body.dark-mode .service-card-2 {
    filter: brightness(0.5) saturate(1);
    transition: filter 0.5s ease, background-color 0.5s ease;
    background: linear-gradient(135deg, #007BFF, #00C6FF); /* Keep original gradient */
    color: #fff;
}

body.dark-mode .service-card-2:hover {
    filter: brightness(0.6) saturate(1); /* Slightly brighter on hover */
    background: linear-gradient(135deg, #0062cc, #00a0cc); /* Keep original hover gradient */
}

.service-card-3 {
    background: linear-gradient(135deg, #17a2b8, #20c997);
    color: #fff;
}

.service-card-3:hover {
    background: linear-gradient(135deg, #138496, #1ca67c);
}

/* Dark mode: darker versions of service card-3 */
/* Apply brightness filter to darken by 50% while preserving original gradients */
body.dark-mode .service-card-3 {
    filter: brightness(0.5) saturate(1);
    transition: filter 0.5s ease, background-color 0.5s ease;
    background: linear-gradient(135deg, #17a2b8, #20c997); /* Keep original gradient */
    color: #fff;
}

body.dark-mode .service-card-3:hover {
    filter: brightness(0.6) saturate(1); /* Slightly brighter on hover */
    background: linear-gradient(135deg, #138496, #1ca67c); /* Keep original hover gradient */
}

/* Dark mode: general service card darkening */
body.dark-mode .service-card {
    filter: brightness(0.5) saturate(1);
    transition: filter 0.5s ease, background-color 0.5s ease;
}

/* Dark mode: features-card and capabilities-card (if they exist) */
body.dark-mode .features-card {
    filter: brightness(0.5) saturate(1);
    transition: filter 0.5s ease, background-color 0.5s ease;
    background: linear-gradient(135deg, #005e43 0%, #008e5a 100%);
}

body.dark-mode .capabilities-card {
    filter: brightness(0.5) saturate(1);
    transition: filter 0.5s ease, background-color 0.5s ease;
    background: linear-gradient(135deg, #003b6f 0%, #005b9a 100%);
}

/* Keep original gradient for service-card base (if no specific class) */
body.dark-mode .service-card:not(.service-card-1):not(.service-card-2):not(.service-card-3) {
    filter: brightness(0.5) saturate(1);
    transition: filter 0.5s ease, background-color 0.5s ease;
    background: linear-gradient(135deg, #005c7a 0%, #007a8a 100%);
}

.service-card h3 {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.625rem);
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
}

.service-card ul {
    list-style: none;
    padding: 0;
}

.service-card ul li {
    transform-origin: right center;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.625rem);
    font-size: clamp(0.9rem, 2vw, 1rem);
    margin-bottom: 0.5rem;
}

/* For LTR languages (English, French, German, Italian): 
   Text grows from left, left side stays fixed */
html[dir="ltr"] .service-card ul li,
body[dir="ltr"] .service-card ul li {
    transform-origin: left center;
}

/* For RTL languages (Arabic, Kurdish): 
   Text grows from right, right side stays fixed */
html[dir="rtl"] .service-card ul li,
body[dir="rtl"] .service-card ul li {
    transform-origin: right center;
}

/* ============================================
   Responsive Media Queries
   ============================================ */

/* Extra Small Devices (phones, 480px and down) */
@media (max-width: 480px) {
    .container {
        width: 95%;
        padding: 1.5rem 0;
    }

    .sticky-nav {
        padding: 0.5rem clamp(0.75rem, 3vw, 1rem);
        flex-direction: column;
        gap: 0.75rem;
    }

    .logo img {
        max-height: 100px;
        max-width: min(150px, 40vw);
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        gap: 0.25rem;
    }

    .nav-links a {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .header-controls {
        gap: 0.5rem;
    }

    .header-controls .control-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .language-selector .lang-button {
        padding: 4px 6px;
        font-size: 11px;
    }

    .hero-content {
        padding: clamp(6rem, 12vh, 8rem) 1rem 1.5rem;
        margin-top: clamp(3rem, 6vh, 4rem);
    }

    .hero-text {
        margin-bottom: 2rem;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .about-header {
        margin-bottom: 1.5rem;
    }

    .about-sidebar {
        order: 1;
    }

    .about-main {
        order: 2;
        text-align: center;
    }

    .why-grid,
    .services-grid,
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Very small mobile (< 300px) */
    @media (max-width: 300px) {
        .partner-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
        }
        
        .stats-grid {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
    }
    
    /* Small mobile (300px - 480px) */
    @media (min-width: 301px) and (max-width: 480px) {
        .partner-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }
        
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }

    /* Certificates: 2 columns on small mobile, 1 on very small */
    @media (max-width: 300px) {
        .certificates-grid {
            grid-template-columns: 1fr;
        }
    }
    
    @media (min-width: 301px) and (max-width: 480px) {
        .certificates-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-info-card {
        order: -1;
    }

    #investment-highlights {
        padding: 2rem 0;
    }

    section {
        padding: 2rem 0;
    }

    #about.container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Small Devices (phones landscape, 481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        width: 92%;
        padding: 2rem 0;
    }

    .sticky-nav {
        padding: 0.625rem clamp(1rem, 3vw, 2rem);
        flex-wrap: wrap;
    }

    .logo img {
        max-height: 120px;
        max-width: min(180px, 25vw);
    }

    .nav-links {
        gap: 0.375rem;
    }

    .nav-links a {
        font-size: clamp(0.8rem, 1.8vw, 0.9rem);
        padding: 0.45rem 0.65rem;
    }

    .hero-content {
        padding: clamp(7rem, 13vh, 10rem) clamp(1.25rem, 3vw, 1.75rem) 1.75rem;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .why-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Small to medium phones (481px - 768px): Keep 2 columns for partners */
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.5rem, 1.5vw, 0.75rem);
    }

    .highlights-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    /* Certificates: 2 columns on medium phones */
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium Devices (tablets, 769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 92%;
        padding: 2.25rem 0;
    }

    .sticky-nav {
        padding: 0.625rem clamp(1.5rem, 4vw, 4%);
    }

    .logo img {
        max-height: 140px;
        max-width: min(180px, 22vw);
    }

    .nav-links a {
        font-size: clamp(0.875rem, 1.4vw, 0.95rem);
    }

    .about-container {
        grid-template-columns: 1.5fr 1fr;
        gap: 2rem;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Medium devices (tablets/iPad 769px-1024px): 4 columns for partners (2 rows = 4+4 cards) */
    .partner-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(0.75rem, 2vw, 1rem);
    }

    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Certificates: Keep 4 on tablets and up */
    .certificates-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .contact-container {
        gap: 2rem;
    }
}

/* Large Devices (desktops, 1025px and up) */
@media (min-width: 1025px) {
    /* General container for non-card sections */
    .container {
        width: 90%;
        max-width: 1400px;
    }
    
    /* Ensure all card sections have consistent max-width on desktop (same as services) */
    /* Override general container rule with higher specificity */
    #services.container,
    #about.container,
    #why-choose-us.container,
    #partners.container,
    #certificates.container,
    #investment-highlights.container,
    #official-news.container,
    #roi-calculator.container,
    #contact .container,
    #stats .container {
        max-width: 1200px !important;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }
    
    /* Stats, Contact, and other non-card sections keep general container width */
    /* Header, Footer, Hero are excluded as requested */

    .why-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Large desktops (1025px - 1279px): 4 columns (2 rows = 4+4 cards) */
    .partner-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(0.75rem, 2vw, 1rem);
    }
    
    /* For wider large screens (1280px+): 8 columns (1 row) */
    @media (min-width: 1280px) {
        .partner-grid {
            grid-template-columns: repeat(8, 1fr);
            gap: clamp(0.5rem, 1.5vw, 0.875rem);
        }
    }
    
    /* Certificates: 4 on desktop */
    .certificates-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra Large Devices (large desktops, 1440px and up) */
@media (min-width: 1440px) {
    /* General container */
    .container {
        max-width: 1600px;
    }
    
    /* Card sections stay at 1200px max-width on all desktop sizes */
    #services.container,
    #about.container,
    #why-choose-us.container,
    #partners.container,
    #certificates.container,
    #investment-highlights.container,
    #official-news.container,
    #roi-calculator.container,
    #contact .container,
    #stats .container {
        max-width: 1200px !important;
    }
    
    /* Extra large screens (1440px+): 8 partners in one row */
    .partner-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: clamp(0.5rem, 1.5vw, 0.875rem);
    }
}

/* Fix for mobile menu and navigation issues */
/* Non-header mobile styles - kept separate */
@media (max-width: 768px) {
    /* Ensure no horizontal scroll on mobile */
    main, section, .container, .about-container, .contact-container {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Landscape orientation fixes for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    #hero {
        min-height: auto;
        height: auto;
    }

    .hero-content {
        padding-top: clamp(4rem, 8vh, 6rem);
    }

}


/* Fix for very small screens (Galaxy Fold, iPhone SE) */
@media (max-width: 375px) {
    /* Header logo - use same size as 480px for consistency */
    header .logo img,
    .sticky-nav > .logo img {
        max-height: 40px !important;
        height: auto !important;
        max-width: 65px !important;
        animation: none !important;
        animation-fill-mode: none !important;
    }

    .hero-content {
        padding: clamp(5rem, 10vh, 6rem) 0.75rem 1.25rem;
    }

    .container {
        width: 98%;
        padding: 1.25rem 0;
    }

    /* Partners: 2 columns on small mobile */
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.5rem, 1.5vw, 0.75rem);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .sticky-nav > .nav-links li a,
    .nav-links a {
        font-size: clamp(0.55rem, 1.5vw, 0.65rem) !important;
        padding: 0.15rem 0.25rem !important;
    }

    .header-controls .control-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }

    .language-selector .lang-button {
        padding: 2px 4px !important;
        font-size: 8px !important;
    }

    .language-selector .lang-button span {
        font-size: 8px !important;
    }

    /* Even smaller page title on very small screens */
    #pageTitle {
        font-size: clamp(0.55rem, 1.8vw, 0.7rem) !important;
    }
}

/* ============================================
   Mobile Header Optimization (max-width: 768px)
   Header: Logo + 3 Links (index/projects/products) + Language + Theme
   ============================================ */
@media (max-width: 768px) {
    /* Disable logo animation on mobile - MUST BE FIRST */
    header .logo img,
    .sticky-nav > .logo img,
    .logo img,
    img[data-logo-fixed="true"] {
        animation: none !important;
        animation-fill-mode: none !important;
        animation-delay: 0s !important;
        animation-duration: 0s !important;
        height: auto !important; /* Override any height from animation */
        max-height: 48px !important; /* Force size on mobile */
    }
    
    /* Fix header position and maintain transparency */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 75px !important; /* Fixed height */
        z-index: 100 !important; /* Above hero-content (1) and particles (0), below dropdown (9999) */
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        box-shadow: none;
        overflow: visible !important;
        overscroll-behavior: contain !important;
        transform: translateY(0);
        transition: transform 0.4s ease-in-out, color 0.9s ease;
        will-change: opacity, transform;
    }
    
    /* Ensure sticky-nav fits in header - single line, no wrapping */
    .sticky-nav {
        height: 100%;
        padding: 0.4rem 0.8rem !important; /* Reduced from 0.5rem 1rem */
        gap: 0.35rem !important; /* Reduced from 0.5rem - tighter spacing */
        flex-wrap: nowrap !important; /* Prevent wrapping */
        justify-content: space-between !important; /* Distribute items evenly */
        overflow: visible !important; /* Don't clip dropdown */
        position: relative !important;
        z-index: 10 !important; /* Same as header */
        pointer-events: auto !important; /* Enable clicks for nav */
        align-items: center !important; /* Center align vertically */
    }

    /* Logo - slightly larger but compact - NO ANIMATION */
    header .logo img,
    .sticky-nav > .logo img {
        max-height: 48px !important; /* Reduced from 55px */
        height: auto !important; /* Override any height from animation */
        width: auto !important;
        animation: none !important; /* Disable animation completely */
        animation-fill-mode: none !important; /* Don't apply animation end state */
        flex-shrink: 0;
    }

    /* Hide ALL nav links by default */
    header .nav-links a,
    .sticky-nav > .nav-links a,
    .nav-links a {
        display: none !important;
    }

    /* Show only 3 main links: index, projects, products - reduced font size by 15-20% */
    header .nav-links a[href*="index"],
    header .nav-links a[href*="index.html"],
    header .nav-links a[href="#"]:not([href*="#about"]):not([href*="#services"]):not([href*="#certificates"]):not([href*="#contact"]),
    .sticky-nav > .nav-links a[href*="index"],
    .sticky-nav > .nav-links a[href*="index.html"],
    .sticky-nav > .nav-links a[href="#"]:not([href*="#about"]):not([href*="#services"]):not([href*="#certificates"]):not([href*="#contact"]),
    .nav-links a[href*="index"],
    .nav-links a[href*="index.html"],
    .nav-links a[href="#"]:not([href*="#about"]):not([href*="#services"]):not([href*="#certificates"]):not([href*="#contact"]),
    header .nav-links a[href*="projects"],
    header .nav-links a[href*="projects.html"],
    .sticky-nav > .nav-links a[href*="projects"],
    .sticky-nav > .nav-links a[href*="projects.html"],
    .nav-links a[href*="projects"],
    .nav-links a[href*="projects.html"],
    header .nav-links a[href*="products"],
    header .nav-links a[href*="products.html"],
    .sticky-nav > .nav-links a[href*="products"],
    .sticky-nav > .nav-links a[href*="products.html"],
    .nav-links a[href*="products"],
    .nav-links a[href*="products.html"] {
        display: inline-flex !important;
        font-size: clamp(0.64rem, 1.7vw, 0.77rem) !important; /* Reduced by ~15% (0.75*0.85=0.6375, 0.9*0.85=0.765) */
        padding: 0.3rem 0.5rem !important; /* Reduced from 0.4rem 0.6rem */
        white-space: nowrap;
        line-height: 1.2 !important; /* Tighter line height */
    }

    /* Compact nav links spacing - reduced gaps */
    header .nav-links,
    .sticky-nav > .nav-links {
        gap: 0.3rem !important; /* Reduced from 0.4rem */
        flex-shrink: 1;
        min-width: 0;
        margin: 0 !important; /* Remove any default margins */
    }

    /* Header controls - ensure they're above everything and clickable */
    .header-controls {
        z-index: 150 !important; /* Above header (100), below dropdown (9999) */
        position: relative !important;
        pointer-events: auto !important;
        overflow: visible !important; /* Don't clip dropdown */
        gap: 0.3rem !important; /* Reduced from 0.625rem - tighter spacing between buttons */
        flex-shrink: 0 !important; /* Don't shrink controls */
        align-items: center !important;
        touch-action: manipulation !important;
    }

    /* Show language selector */
    .language-selector,
    #languageSelector {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 150 !important; /* Above header (100), below dropdown (9999) */
        position: relative !important;
        overflow: visible !important; /* Don't clip dropdown */
        touch-action: manipulation !important;
    }

    /* Language button - compact with touch-friendly size - reduced by 25-30% */
    .language-selector .lang-button,
    #languageButton {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        min-width: 36px !important; /* Touch-friendly minimum size */
        min-height: 36px !important; /* Touch-friendly minimum size */
        padding: 0.28rem 0.42rem !important; /* Reduced by ~30% (0.4*0.7=0.28, 0.6*0.7=0.42) */
        font-size: clamp(0.525rem, 1.5vw, 0.64rem) !important; /* Reduced by ~25% (0.7*0.75=0.525, 0.85*0.75=0.6375) */
        gap: 0.225rem !important; /* Reduced by ~25% (0.3*0.75=0.225) */
        white-space: nowrap;
        position: relative !important;
        z-index: 150 !important; /* Same as language-selector - above header (100) */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
        touch-action: manipulation !important;
        line-height: 1 !important; /* Tighter line height */
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Reduce globe icon size in language button */
    .language-selector .lang-button .globe,
    #languageButton .globe {
        font-size: 12px !important; /* Reduced from ~16px by ~25% */
    }

    /* Language dropdown - above everything - FIXED */
    .language-selector .dropdown {
        z-index: 9999 !important; /* Highest - above everything */
        position: absolute !important; /* Absolute, not fixed - relative to language-selector */
        top: calc(100% + 10px) !important;
        right: 0 !important;
        pointer-events: none !important; /* Disabled when closed */
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateY(10px) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    }

    /* LTR: dropdown from left */
    html[dir="ltr"] .language-selector .dropdown {
        right: auto !important;
        left: 0 !important;
    }

    .language-selector.open {
        z-index: 99999 !important; /* Highest when open */
        position: relative !important;
        overflow: visible !important; /* Don't clip dropdown */
    }

    .language-selector.open .dropdown {
        z-index: 9999 !important; /* Highest - above everything */
        position: absolute !important; /* Absolute, not fixed */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important; /* Enable clicks when open */
        transform: translateY(0) !important;
    }

    /* Ensure nav-links don't cover header-controls */
    .sticky-nav > .nav-links {
        position: relative;
        z-index: 1 !important; /* Below header-controls */
        pointer-events: auto !important;
    }

    .sticky-nav > .header-controls {
        position: relative;
        z-index: 150 !important; /* Above nav-links (1), below dropdown (9999) */
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    
    /* RTL/LTR ordering on mobile - same as desktop */
    html[dir="rtl"] .sticky-nav > .logo {
        order: 1;
    }
    
    html[dir="rtl"] .sticky-nav > .nav-links {
        order: 2;
    }
    
    html[dir="rtl"] .sticky-nav > .header-controls {
        order: 3;
    }
    
    html[dir="ltr"] .sticky-nav > .logo {
        order: 1;
    }
    
    html[dir="ltr"] .sticky-nav > .nav-links {
        order: 2;
    }
    
    html[dir="ltr"] .sticky-nav > .header-controls {
        order: 3;
    }
    
    /* Ensure all clickable elements in header are accessible */
    header a,
    header button,
    header .control-btn,
    header .lang-button,
    header .nav-links a {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* Show theme toggle */
    #themeToggle,
    .header-controls #themeToggle,
    .header-controls .control-btn[id="themeToggle"] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 36px !important; /* Touch-friendly minimum size */
        height: 36px !important; /* Touch-friendly minimum size */
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 13px !important; /* Reduced by ~28% (18*0.72=12.96) */
        padding: 0.3rem !important; /* Reduced padding */
        touch-action: manipulation !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        z-index: 150 !important;
        position: relative !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
    }

    /* Hero section starts from top (particles visible), header floats over it */
    #hero {
        margin-top: 0 !important; /* Particles start from top, header floats over */
        padding-top: 0 !important;
        z-index: 0 !important; /* Bottom layer */
    }

    /* Hero content needs padding-top to avoid being hidden under header */
    #hero .hero-content {
        padding-top: calc(clamp(8rem, 15vh, 12vh) + 75px) !important; /* Original padding + header height */
        z-index: 1 !important; /* Above particles/gradient (0), below header (10) */
    }

    /* For other sections after hero, add margin-top */
    main > section:not(:first-child) {
        margin-top: 0; /* Let sections handle their own spacing */
    }

    /* Scroll effects on header classes - maintain same appearance */
    header.scrolled,
    header.over-hero,
    header.scrolled.over-hero {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateY(0);
        transition: transform 0.4s ease-in-out;
    }
}

/* Smaller screens (max-width: 600px) - further reduce header sizes */
@media (max-width: 600px) {
        .sticky-nav {
            padding: 0.25rem clamp(0.4rem, 1.5vw, 0.6rem) !important;
            gap: 0.375rem !important;
        }
        
        header .logo img,
        .sticky-nav > .logo img {
            max-height: 45px !important;
            max-width: 75px !important;
        }
        
        .sticky-nav > .nav-links {
            font-size: clamp(0.8rem, 2.4vw, 0.95rem) !important;
            gap: 0.3rem !important;
        }
        
        .sticky-nav > .nav-links li a {
            font-size: clamp(0.8rem, 2.4vw, 0.95rem) !important;
            padding: 0.25rem 0.5rem !important;
        }
        
        .header-controls .control-btn {
            width: 24px !important;
            height: 24px !important;
            font-size: 10px !important;
        }
        
        .language-selector .lang-button {
            padding: 3px 5px !important;
            font-size: 9px !important;
            gap: 3px !important;
            min-width: 24px !important;
            min-height: 24px !important;
        }
        
        .language-selector .lang-button .globe {
            font-size: 9px !important;
        }
        
        .language-selector .lang-button span {
            font-size: 9px !important;
        }
        
        .header-controls {
            gap: 0.3rem !important;
        }
        
        /* Center dropdown on very small screens */
        .language-selector .dropdown {
            right: auto !important;
            left: 50% !important;
            transform: translate(-50%, 10px) !important;
        }
        
        .language-selector.open .dropdown {
            transform: translate(-50%, 0) !important;
        }
        
        html[dir="ltr"] .language-selector .dropdown {
            right: auto !important;
            left: 50% !important;
        }
}

/* Very small screens (max-width: 480px) - further reduce header sizes */
@media (max-width: 480px) {
    .sticky-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
        
    .sticky-nav > .nav-links {
        order: 3;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    header .logo img,
    .sticky-nav > .logo img {
        max-height: 40px !important;
        max-width: 65px !important;
    }
    
    .sticky-nav > .nav-links li a {
        font-size: clamp(0.75rem, 2.2vw, 0.9rem) !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    .header-controls .control-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }
    
    .language-selector .lang-button {
        padding: 2px 4px !important;
        font-size: 8px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }
    
    .language-selector .lang-button span {
        font-size: 8px !important;
    }
    
    /* RTL/LTR ordering on very small screens - same as desktop */
    html[dir="rtl"] .sticky-nav > .logo {
        order: 1;
    }
    
    html[dir="rtl"] .sticky-nav > .nav-links {
        order: 2;
    }
    
    html[dir="rtl"] .sticky-nav > .header-controls {
        order: 3;
    }
    
    html[dir="ltr"] .sticky-nav > .logo {
        order: 1;
    }
    
    html[dir="ltr"] .sticky-nav > .nav-links {
        order: 2;
    }
    
    html[dir="ltr"] .sticky-nav > .header-controls {
        order: 3;
    }
}

/* ============================================================
   11. FOOTER COMPONENT
   Description: Site-footer theming and page-specific backgrounds
============================================================ */
/* Footer backgrounds by page */
body.index-page site-footer#main-footer {
  background: linear-gradient(-45deg, #0b0f1a, #0d1117);
}

body.products-page site-footer#main-footer {
  background: linear-gradient(-45deg, #111111, #1a1a1a);
}

body.projects-page site-footer#main-footer {
  background: linear-gradient(-45deg, #101820, #0f1419);
}

/* Initial state for header and footer - normalized to visible */
#main-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.6s ease, backdrop-filter 0.6s ease;
  will-change: opacity, transform;
}

#main-footer {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.6s ease, backdrop-filter 0.6s ease;
  will-change: opacity, transform;
}

/* Header animation states (neutral) */
header.hidden {
  opacity: 1;
  transform: translateY(0);
}

header.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keep header transparency over hero */
header, nav.sticky-nav {
  background: rgba(11, 15, 26, 0.35);
  backdrop-filter: blur(12px) saturate(160%);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30vw, 350px), 1fr));
    gap: clamp(1rem, 3vw, 1.25rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.project-card {
    background-color: var(--card-bg-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

body.dark-mode .project-card {
    background-color: var(--card-bg-dark);
}

.project-card img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 300px;
    object-fit: cover;
}

.project-card .project-info {
    padding: 15px;
}

.view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
    border-radius: 999px;
    font-weight: 600;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-start;
}

.view-all:hover,
.view-all:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
    outline: none;
}

body.dark-mode .view-all {
    background: var(--accent-blue);
}

/* ============================================================
   8. STATISTICS & COUNTERS
   Description: Statistics background, counters, animated metrics
============================================================ */
#stats {
    position: relative;
    color: white;
    text-align: center;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 3.75rem) 0;
    width: 100%;
    max-width: 100%;
}

#stats .container {
    position: relative;
    z-index: 2;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 25vw, 200px), 1fr));
    gap: clamp(1rem, 3vw, 1.25rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Ensure stats section content width matches why-choose-us section */
#stats .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

#stats .container .stats-grid {
    max-width: 100%;
}

/* شفافية بطاقات الإحصائيات */
.stats-section .stats-card,
.stats-section .counter-box,
.stats-card,
.counter-box,
.stat-item {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 15px;
    padding: clamp(1rem, 3vw, 1.5rem);
    transition: background-color 0.3s ease;
}

/* Dark mode styles for stat items */
body.dark-mode .stats-section .stats-card,
body.dark-mode .stats-section .counter-box,
body.dark-mode .stats-card,
body.dark-mode .counter-box,
body.dark-mode .stat-item {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* تحسين محاذاة النصوص */
.stats-section .stats-card h3,
.stats-section .stats-card p,
.stats-section .counter-box h3,
.stats-section .counter-box p,
.stats-card h3,
.stats-card p,
.counter-box h3,
.counter-box p,
.stat-item h3,
.stat-item p {
    color: #fff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.stat-item h3 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0;
    line-height: 1.2;
    font-weight: bold;
}

.stat-item p {
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    margin: clamp(0.25rem, 1vw, 0.5rem) 0 0;
    line-height: 1.4;
    text-align: center;
}

/* تأثير التوهج النجمي على النقاط */
canvas#stats-particles {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 8px rgba(255, 255, 200, 0.5))
            drop-shadow(0 0 12px rgba(180, 255, 255, 0.3));
    transition: filter 0.3s ease;
}

/* عند مرور الماوس يزيد التوهج قليلاً */
canvas#stats-particles:hover {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
            drop-shadow(0 0 12px rgba(255, 255, 200, 0.8))
            drop-shadow(0 0 18px rgba(180, 255, 255, 0.5));
}

/* Investment Highlights Section — dynamic parallax cards */
#investment-highlights {
    padding: clamp(3rem, 8vw, 5rem) 0;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 60%, #f5fbff 100%);
    transition: background 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    color: #f4f7ff;
    isolation: isolate;
}

#investment-highlights::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(0, 191, 255, 0.08), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(0, 91, 150, 0.05), transparent 60%),
        linear-gradient(120deg, rgba(0, 123, 255, 0.08), transparent 70%);
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

#investment-highlights .container {
    position: relative;
    z-index: 2;
}

#investment-highlights h2 {
    text-align: center;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin-bottom: clamp(2rem, 5vw, 3.125rem);
    color: var(--text-color-light);
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    width: min(1100px, 100%);
    margin: 0 auto;
    justify-items: stretch;
    align-items: stretch;
    perspective: 2000px;
}

.highlights-grid:has(.highlight-card:hover, .highlight-card:focus-within) .highlight-card:not(:hover, :focus-within) {
    opacity: 0.35;
    filter: saturate(60%) contrast(90%);
}

.highlight-card {
    --highlight-accent: #58a6ff;
    --highlight-rotation: -4deg;
    --highlight-bg-end: calc(var(--investment-card-height) * -1.25);
    --highlight-duration: 6s;
    --highlight-delay: 0s;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--investment-card-height);
    border-radius: 18px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid rgba(15, 23, 42, 0.08);
    outline: none;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.92) 100%);
    box-shadow: 0 18px 40px rgba(12, 22, 38, 0.08);
    overflow: hidden;
    color: var(--text-color-light);
    text-align: center;
    transform-origin: center;
    transform: rotate(var(--highlight-rotation)) scale(0.9);
    filter: grayscale(60%) saturate(80%) brightness(0.98);
    opacity: 0.9;
    transition: border 0.15s ease, box-shadow 0.15s ease,
                outline-offset 0.6s ease, opacity 0.3s ease,
                transform 0.4s ease, filter 0.4s ease, z-index 0.15s ease;
    isolation: isolate;
}

.highlight-card::before {
    content: '';
    position: absolute;
    inset: calc(var(--investment-outline) * 1.05);
    border-radius: 14px;
    background-image:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--highlight-accent) 70%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--highlight-accent) 40%, transparent) 0%, transparent 60%),
        linear-gradient(160deg, color-mix(in srgb, var(--highlight-accent) 65%, #050c1a) 0%, color-mix(in srgb, #050c1a 35%, var(--highlight-accent)) 100%);
    background-size: 130% 130%;
    background-position: 50% 0%;
    background-attachment: fixed;
    filter: grayscale(100%) sepia(8%);
    opacity: 0.9;
    mix-blend-mode: multiply;
    transition: inherit;
    animation: highlight-card-scroll var(--highlight-duration) linear infinite alternate;
    animation-delay: var(--highlight-delay);
    z-index: 0;
    pointer-events: none;
}

.highlight-card > * {
    position: relative;
    z-index: 1;
}

.highlight-card:hover,
.highlight-card:focus-within {
    border-color: color-mix(in srgb, var(--highlight-accent) 65%, rgba(255, 255, 255, 0.4));
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.12),
        0 0 120px color-mix(in srgb, var(--highlight-accent) 30%, rgba(0, 0, 0, 0));
    transform: rotate(0deg) scale(1);
    filter: none;
    opacity: 1;
    z-index: 5;
}

.highlight-card:hover::before,
.highlight-card:focus-within::before {
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    animation-duration: calc(var(--highlight-duration) * 0.6);
    animation-play-state: running;
}

.highlight-card.mobile {
    max-height: var(--investment-card-height);
    max-width: var(--investment-card-width);
}

.highlight-card:nth-of-type(2) {
    --highlight-rotation: 3deg;
    --highlight-bg-end: calc(var(--investment-card-height) * -1.65);
}

.highlight-card:nth-of-type(3) {
    --highlight-rotation: -1deg;
    --highlight-duration: 6.5s;
    --highlight-bg-end: calc(var(--investment-card-height) * -2.25);
}

.highlight-card:nth-of-type(4) {
    --highlight-rotation: -5deg;
    --highlight-duration: 6.75s;
    --highlight-bg-end: calc(var(--investment-card-height) * -3.4);
}

.highlight-card[data-color="#f39c12"] { --highlight-accent: oklch(var(--investment-gold)); filter: saturate(0.7) brightness(1.1); }
.highlight-card[data-color="#9b59b6"] { --highlight-accent: #b794c4; filter: saturate(0.65) brightness(1.15); }
.highlight-card[data-color="#3498db"] { --highlight-accent: #6ba9db; filter: saturate(0.7) brightness(1.1); }
.highlight-card[data-color="#2ecc71"] { --highlight-accent: #5dd68d; filter: saturate(0.65) brightness(1.12); }

.highlight-icon {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.highlight-icon .fas {
    color: color-mix(in srgb, var(--highlight-accent) 65%, #0b1d33);
    filter: drop-shadow(0 5px 18px rgba(0, 0, 0, 0.12));
    opacity: 0.9;
}

.highlight-content h3 {
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 600;
    color: var(--text-color-light);
}

.highlight-content p {
    margin: 0;
    color: #5c667a;
    font-size: clamp(0.92rem, 2.2vw, 1rem);
    line-height: 1.6;
}

.highlight-value {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--highlight-accent) 85%, #0a2540);
    text-shadow: 0 0 16px color-mix(in srgb, var(--highlight-accent) 45%, transparent);
    margin-bottom: clamp(0.35rem, 1vw, 0.5rem);
}

.highlight-value span {
    display: inline-block;
}

@keyframes highlight-card-scroll {
    to {
        background-position: 50% var(--highlight-bg-end);
    }
}

@media (prefers-reduced-motion: reduce) {
    .highlight-card {
        transform: none !important;
    }

    .highlight-card::before {
        animation: none !important;
    }
}

@media (max-width: 1024px) {
    :root {
        --investment-card-width: 320px;
        --investment-card-height: 480px;
    }
}

@media (max-width: 768px) {
    :root {
        --investment-card-width: 260px;
        --investment-card-height: 420px;
    }
}

@media (max-width: 520px) {
    :root {
        --investment-card-width: 220px;
        --investment-card-height: 360px;
    }
}

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 28vw, 300px), 1fr));
  gap: clamp(1rem, 3vw, 1.25rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 4 بطاقات في صف واحد على الشاشات الكبيرة */
@media (min-width: 1024px) {
  .certificates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: start;
  }

  .certificate-card {
    max-width: 250px;
  }
}

/* 🧩 إعدادات الحركة */
.certificate-card {
  background-color: var(--card-bg-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.6s ease-out, transform 0.6s ease-out;
  text-align: center;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.9);
}

/* 🔥 عند الظهور */
.certificate-card.visible {
  opacity: 1;
  transform: scale(1);
}

.certificate-card:hover {
  transform: scale(1) translateY(-5px); /* الحفاظ على scale(1) من visible */
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.certificate-card.visible:hover {
  transform: scale(1) translateY(-5px); /* تأكيد الحفاظ على scale عند hover */
}

body.dark-mode .certificate-card {
  background-color: var(--card-bg-dark);
}

.certificate-card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 250px;
  max-height: clamp(250px, 40vw, 350px);
  object-fit: contain;
  background-color: #fff;
  cursor: pointer; /* إضافة مؤشر يد للإشارة إلى إمكانية النقر */
  transition: transform 0.2s ease;
}

.certificate-card img:hover {
  transform: scale(1.02); /* تكبير خفيف عند المرور */
}

.certificate-card p {
  padding: 15px;
  font-weight: bold;
  margin-top: auto;
}

/* 🔳 خلفية lightbox */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 9999;
  cursor: pointer; /* يمكن النقر على الخلفية للإغلاق */
}

/* 🔍 عند التفعيل */
.lightbox-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* 🖼️ الصورة المكبرة */
.lightbox-overlay img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
  animation: zoomIn 0.4s ease;
  object-fit: contain;
  cursor: default; /* الصورة نفسها لا تغلق */
  pointer-events: auto; /* السماح بالتفاعل مع الصورة */
}

@keyframes zoomIn {
  from { 
    transform: scale(0.8); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

/* ❌ زر الإغلاق */
.lightbox-close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  transition: 0.2s ease;
  z-index: 10000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  line-height: 1;
}

.lightbox-close:hover {
  color: #00bfa6;
  transform: scale(1.2);
  background: rgba(0, 191, 166, 0.3);
}

/* RTL: زر الإغلاق على اليسار */
html[dir="rtl"] .lightbox-close,
body[dir="rtl"] .lightbox-close {
  right: auto;
  left: 40px;
}

/* LTR: زر الإغلاق على اليمين */
html[dir="ltr"] .lightbox-close,
body[dir="ltr"] .lightbox-close {
  left: auto;
  right: 40px;
}

/* Contact Section - Redesigned */
/* ============================================================
   9. CONTACT & SUPPORT
   Description: Contact section, forms, support cards, CTA buttons
============================================================ */
#contact {
    padding: clamp(3rem, 8vw, 5rem) 0;
    background-color: #f4f7f9;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* توسيط عنوان تواصل معنا */
#contact .section-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 3.125rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact .section-header h2 {
    font-size: clamp(1.75rem, 5vw, 2.8rem);
    color: #333;
    margin: 0 auto clamp(0.5rem, 1.5vw, 0.625rem) auto;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

#contact .section-header p {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: #6c757d;
    max-width: min(600px, 90vw);
    margin: 0 auto;
}

/* Dark mode for contact section background and headers */
body.dark-mode #contact {
    background-color: var(--dark-bg);
}

body.dark-mode #contact .section-header h2 {
    color: var(--text-color-dark);
}

body.dark-mode #contact .section-header p {
    color: var(--text-color-dark);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 4vw, 1.875rem);
    align-items: stretch;
    width: 100%;
    max-width: 1200px; /* نفس عرض الموقع */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-card {
    background-color: #fff;
    border-radius: 15px;
    padding: clamp(1.5rem, 4vw, 2.1875rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark mode styles for contact-card */
body.dark-mode .contact-card {
    background-color: var(--card-bg-dark);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .contact-card h3 {
    color: var(--text-color-dark);
}

body.dark-mode .contact-card p,
body.dark-mode .contact-card a {
    color: var(--text-color-dark);
}

.contact-form-card {
    justify-content: space-between;
}

.contact-form-card h3, .contact-info-card h3 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    color: #343a40;
}

/* قسم تواصل معنا - تحسين الاستجابة */
.contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
}

/* على الكمبيوتر: عمودين للاسم والبريد */
@media (min-width: 1024px) {
    .contact-form {
        grid-template-columns: 1fr 1fr;
    }
    .contact-form .input-group:nth-child(1),
    .contact-form .input-group:nth-child(2) {
        grid-column: span 1;
    }
    .contact-form .input-group:nth-child(3) {
        grid-column: span 2;
    }
    .contact-form .btn-submit {
        grid-column: span 2;
        justify-self: center;
        max-width: 300px;
        width: auto;
        margin-top: 0;
    }
}

.input-group {
    position: relative;
    margin-bottom: 0;
    width: 100%;
}

/* إعادة margin-bottom فقط عندما لا يكون داخل grid */
.contact-form .input-group {
    margin-bottom: 0;
}

.input-group input,
.input-group textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid #ced4da;
    border-radius: 10px;
    font-size: 1rem;
    background-color: #f8f9fa;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    outline: none;
    resize: none;
}

.input-group textarea {
    resize: none;
    min-height: 120px;
}

/* الأجهزة اللوحية (768px - 1023px): عمود واحد */
@media (max-width: 1023px) and (min-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 90%;
    }
    .contact-form {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* الموبايل (< 768px): حقول كاملة، خطوط أكبر */
@media (max-width: 767px) {
    #contact {
        padding: clamp(2rem, 6vw, 3rem) 0;
    }
    .contact-container {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0 15px;
        max-width: 100%;
    }
    .contact-card {
        padding: 1.5rem;
    }
    .contact-form {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .input-group input,
    .input-group textarea {
        padding: 14px 16px;
        font-size: 1.1rem;
        border-radius: 10px;
    }
    .input-group textarea {
        min-height: 140px;
    }
    .contact-form .btn-submit {
        width: 100%;
        padding: 14px 24px;
        font-size: 1.15rem;
        border-radius: 8px;
        margin-top: 0;
    }
    .contact-form-card h3,
    .contact-info-card h3 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
}

.input-group label {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    background-color: #f8f9fa;
    padding: 0 5px;
}

.input-group input:focus + label,
.input-group textarea:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:not(:placeholder-shown) + label {
    top: 0;
    right: 10px;
    font-size: 0.85rem;
    color: #007bff;
}

.input-group input:focus, .input-group textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.btn-submit {
    width: 100%;
    max-width: 100%;
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-top: auto;
    box-sizing: border-box;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
}

.btn-submit i {
    margin-right: 8px;
    transition: transform 0.3s;
}

.btn-submit:hover i {
    transform: rotate(15deg);
}

.form-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    text-align: center;
    color: #6c757d;
}

.working-hours {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.working-hours i {
    font-size: 1.3rem;
    color: #007bff;
}

.working-hours h4 {
    font-size: 1.1rem;
    margin: 0;
    color: #343a40;
}

.working-hours p {
    margin: 0;
}

.footer-quote {
    font-style: italic;
    font-size: 0.95rem;
}

.contact-info-card .map-container {
    height: clamp(180px, 30vw, 250px);
    min-height: 180px;
    border-radius: 12px;
    overflow: visible;
    margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 100%;
    position: relative;
}

.contact-info-card .map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    border-radius: 12px;
}

/* زر افتح في خرائط Google */
.open-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff !important;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,123,255,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    width: fit-content;
}

.open-maps-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,123,255,0.45);
    background: linear-gradient(135deg, #0069d9, #004494);
    color: #fff !important;
}

.open-maps-btn i {
    font-size: 1rem;
    color: #fff;
}

body.dark-mode .open-maps-btn {
    background: linear-gradient(135deg, #1a8fff, #0056b3);
    box-shadow: 0 4px 14px rgba(26,143,255,0.35);
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-info-list li:last-child {
    margin-bottom: 0;
}

.contact-info-list i {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: #007bff;
    margin-left: clamp(1rem, 3vw, 1.25rem);
    margin-top: clamp(0.25rem, 1vw, 0.3125rem);
    flex-shrink: 0;
    width: clamp(24px, 4vw, 30px);
    text-align: center;
}

.contact-info-list h4 {
    margin: 0 0 clamp(0.25rem, 1vw, 0.3125rem) 0;
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    color: #343a40;
}

.contact-info-list p, .contact-info-list a {
    margin: 0;
    color: #6c757d;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
}

.contact-info-list a {
    display: block;
    margin-top: 5px;
}

.ltr {
    direction: ltr;
    unicode-bidi: bidi-override;
    display: inline-block;
}

/* ============================================================
   BRANCH SWITCHER — Smart Location Tabs
   Description: Glassmorphic tabbed branch navigation with
                animated indicator and smooth content transitions
============================================================ */
.branch-tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 5px;
    margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    border-radius: 14px;
    background: rgba(0, 123, 255, 0.06);
    border: 1px solid rgba(0, 123, 255, 0.12);
    overflow: hidden;
}

body.dark-mode .branch-tabs {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.branch-tab {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #6c757d;
    font-size: clamp(0.82rem, 1.8vw, 0.95rem);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.35s ease, text-shadow 0.35s ease;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.branch-tab i {
    font-size: 0.85em;
    opacity: 0.7;
    transition: opacity 0.35s ease, color 0.35s ease;
}

.branch-tab.active {
    color: #007bff;
}

.branch-tab.active i {
    opacity: 1;
    color: #007bff;
}

body.dark-mode .branch-tab {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .branch-tab.active {
    color: var(--accent-blue, #36d1dc);
}

body.dark-mode .branch-tab.active i {
    color: var(--accent-blue, #36d1dc);
}

.branch-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 20px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
    white-space: nowrap;
}

body.dark-mode .branch-badge {
    background: linear-gradient(135deg, var(--accent-blue, #36d1dc), #0a84ff);
}

/* Animated sliding indicator */
.branch-tab-indicator {
    position: absolute;
    bottom: 5px;
    height: calc(100% - 10px);
    border-radius: 10px;
    background: rgba(0, 123, 255, 0.1);
    border: 1px solid rgba(0, 123, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
    pointer-events: none;
}

body.dark-mode .branch-tab-indicator {
    background: rgba(54, 209, 220, 0.1);
    border-color: rgba(54, 209, 220, 0.2);
}

/* Branch content wrapper */
.branch-content {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}

/* Hover states */
@media (hover: hover) and (pointer: fine) {
    .branch-tab:not(.active):hover {
        color: #495057;
    }
    body.dark-mode .branch-tab:not(.active):hover {
        color: rgba(255, 255, 255, 0.75);
    }
}

/* ---- Responsive: Branch Tabs ---- */
@media (max-width: 767px) {
    .branch-tabs {
        padding: 4px;
        border-radius: 12px;
    }
    .branch-tab {
        padding: 8px 8px;
        font-size: clamp(0.72rem, 2.5vw, 0.85rem);
        gap: 4px;
    }
    .branch-tab i {
        font-size: 0.75em;
    }
    .branch-badge {
        font-size: 0.55rem;
        padding: 0px 5px;
    }
    .branch-tab-indicator {
        border-radius: 8px;
    }
    .branch-content {
        min-height: 280px;
    }
}

@media (max-width: 480px) {
    .branch-tab {
        padding: 7px 5px;
        font-size: clamp(0.65rem, 2.8vw, 0.78rem);
        gap: 3px;
    }
    .branch-badge {
        font-size: 0.5rem;
        padding: 0px 4px;
    }
}

@media (max-width: 375px) {
    .branch-tab i {
        display: none;
    }
    .branch-tab {
        font-size: clamp(0.6rem, 3vw, 0.72rem);
        padding: 6px 4px;
    }
}

/* RTL adjustments for branch tabs */
html[dir="ltr"] .branch-tab i {
    margin-right: 2px;
    margin-left: 0;
}

html[dir="ltr"] .contact-info-list i {
    margin-right: clamp(1rem, 3vw, 1.25rem);
    margin-left: 0;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(38px, 6vw, 45px);
    height: clamp(38px, 6vw, 45px);
    border-radius: 50%;
    background-color: #e9ecef;
    color: #495057;
    font-size: clamp(18px, 3.5vw, 22px);
    transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    color: #fff;
}

.social-icon.facebook:hover {
    background-color: #1877F2;
    box-shadow: 0 8px 15px rgba(24, 119, 242, 0.4);
}

.social-icon.instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 8px 15px rgba(214, 36, 159, 0.4);
}

.social-icon.tiktok:hover {
    background-color: #000000;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

.social-icon.youtube:hover {
    background-color: #FF0000;
    box-shadow: 0 8px 15px rgba(255, 0, 0, 0.4);
}


/* RTL: back-to-top on right, whatsapp on left */
html[dir="rtl"] #back-to-top,
body[dir="rtl"] #back-to-top {
    right: clamp(1rem, 3vw, 1.25rem);
    left: auto;
}

html[dir="rtl"] .whatsapp-button,
body[dir="rtl"] .whatsapp-button {
    left: clamp(1rem, 3vw, 1.25rem);
    right: auto;
}

/* LTR: back-to-top on left, whatsapp on right */
html[dir="ltr"] #back-to-top,
body[dir="ltr"] #back-to-top {
    left: clamp(1rem, 3vw, 1.25rem);
    right: auto;
}

html[dir="ltr"] .whatsapp-button,
body[dir="ltr"] .whatsapp-button {
    right: clamp(1rem, 3vw, 1.25rem);
    left: auto;
}

#back-to-top {
    position: fixed;
    bottom: clamp(1rem, 3vw, 1.25rem);
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: clamp(42px, 7vw, 50px);
    height: clamp(42px, 7vw, 50px);
    font-size: clamp(20px, 3.5vw, 24px);
    cursor: pointer;
    display: none;
    z-index: 1001;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.whatsapp-button {
  position: fixed;
  bottom: clamp(1rem, 3vw, 1.25rem);
  width: clamp(50px, 8vw, 60px);
  height: clamp(50px, 8vw, 60px);
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  transition: transform 0.3s;
}
.whatsapp-button:hover {
  transform: scale(1.1);
}

.whatsapp-button img {
  width: clamp(24px, 5vw, 30px);
  height: clamp(24px, 5vw, 30px);
  max-width: 100%;
  height: auto;
}

/* 📱 تابلت */
@media (max-width: 1199px) and (min-width: 768px) {
    .highlights-grid {
        grid-template-columns: repeat(2, minmax(min(260px, 100%), 1fr));
        gap: 1.2rem;
        max-width: 95%;
    }
}

/* 📞 موبايل */
@media (max-width: 767px) {
    .highlights-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 0.85rem;
        padding: 0;
    }

    .highlight-card {
        max-width: 100%;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .highlights-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* 🌙 الوضع الليلي */
body.dark-mode #investment-highlights {
    background: linear-gradient(180deg, #01060f 0%, #070f1c 50%, #040813 100%);
    color: #f7f9ff;
}

body.dark-mode #investment-highlights::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 15%, rgba(0, 191, 255, 0.12), transparent 55%),
        radial-gradient(circle at 85% 10%, rgba(0, 140, 255, 0.1), transparent 60%),
        linear-gradient(120deg, rgba(0, 123, 255, 0.08), transparent 70%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .highlight-card {
    background: linear-gradient(165deg, rgba(4, 12, 25, 0.95), rgba(7, 18, 35, 0.92));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
    filter: grayscale(35%) saturate(95%) brightness(1);
}

body.dark-mode .highlight-card::before {
    filter: grayscale(85%) sepia(10%);
}

body.dark-mode .highlight-content h3 {
    color: #fdfefe;
}

body.dark-mode .highlight-content p {
    color: rgba(230, 239, 255, 0.85);
}

body.dark-mode .highlight-value {
    color: color-mix(in srgb, var(--highlight-accent) 85%, #ffffff);
}

body.dark-mode .highlight-card:hover {
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.55),
        0 0 160px color-mix(in srgb, var(--highlight-accent) 28%, rgba(0, 0, 0, 0));
}

/* Additional responsive adjustments are in style.css media queries */

/* Animations */

/* Logo Animation */
/* ============================================================
   11. ANIMATIONS & UTILITY EFFECTS
   Description: Global keyframes, animation helpers, background motion
============================================================ */
@keyframes logoEffect {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        filter: none;
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 25px 20px rgba(0,0,0,0.4));
    }
}

.logo img {
    animation: logoEffect 16s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity, filter;
}

/* Background Animation */
@keyframes backgroundPan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* The glow animation for .hero-text h1 is now controlled entirely by main.js */

/* ✅ Verified and cleaned: No duplicates or conflicts – 2025-11-04 */

/* ============================================================
   7. PARTNERS & CLIENT LOGOS — Restored after cleanup
============================================================ */
/* [Partners] Logo wall with hover emphasis */
.partner-grid,
.partners-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* Desktop: 8 cards in one row */
    gap: 1.2rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
}

.partner-card {
    background: rgba(255, 255, 255, 0.05);
    background-color: var(--card-bg-light);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 1 / 1; /* يحافظ على التناسق بين العرض والارتفاع */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.partner-grid:hover .partner-card:not(:hover) {
    filter: brightness(0.5);
    opacity: 0.6;
}

.partner-card img {
    height: auto;
    max-height: clamp(40px, 8vw, 60px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.625rem);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.partner-card p {
    font-weight: bold;
    margin: 0;
    color: var(--text-color-light);
    text-align: center;
    width: 100%;
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
}

body.dark-mode .partner-card {
    background-color: var(--card-bg-dark);
}

body.dark-mode .partner-card p {
    color: var(--text-color-dark);
}

/* تابلت: صفين × 4 */
@media (max-width: 1199px) and (min-width: 768px) {
    .partner-grid,
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        max-width: 95%;
    }
}

/* موبايل: 4 صفوف × 2 */
@media (max-width: 767px) {
    .partner-grid,
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        padding: 1rem;
    }
}

/* ============================================================
   12. ANIMATIONS & UTILITY EFFECTS
   Description: Global keyframes, animation helpers, background motion
============================================================ */

/* ============================================================
   GLOBAL HEADER COLORS (Light & Dark Modes)
============================================================ */
header .nav-links a,
header .language-selector .lang-button,
header .language-selector .lang-button span,
header .language-selector .lang-button i,
header .header-controls .control-btn,
header .header-controls .control-btn i,
header .header-controls .control-btn svg,
header i,
header svg {
    color: inherit;
}

body.dark-mode header {
    color: #FFFFFF;
    --header-text-color: #FFFFFF;
}

body.dark-mode header .nav-links a,
body.dark-mode header .nav-links a:hover,
body.dark-mode header .nav-links a:focus,
body.dark-mode header .nav-links a:active,
body.dark-mode header .language-selector .lang-button,
body.dark-mode header .language-selector .lang-button span,
body.dark-mode header .language-selector .lang-button i,
body.dark-mode header .header-controls .control-btn,
body.dark-mode header .header-controls .control-btn i,
body.dark-mode header .header-controls .control-btn svg,
body.dark-mode header .language-selector .dropdown li {
    color: #FFFFFF;
}

/* === INDEX & TECHNICAL NOTES (Hero Patch) ===
File: style.css
Scope: Layout refinement only
Changes:
  - Forced horizontal alignment for hero-feature-cards
  - Centered all inner content vertically and horizontally
  - Adjusted pre-hover and hover scale for smoother motion
Impact:
  - Visual symmetry on all screens without structural changes
Status: ✅ Applied without altering existing HTML/JS
=== END INDEX === */




/* ============================================================
   SECTION: ROI CALCULATOR STYLES
   Description: Glassmorphism, Sliders, and Result Cards
============================================================ */
#roi-calculator {
  padding: 4rem 20px;
  position: relative;
  z-index: 2;
}

.calculator-wrapper {
  width: 100%;
  max-width: 1100px; /* Constrain slightly for better visual density */
  margin: 0 auto;
}

.calculator-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.calculator-header h2 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  text-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

.calculator-header p {
  color: #a0aec0;
  font-size: 1.1rem;
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  align-items: start;
}

/* Glass Panel Base */
.glass-panel {
  background: rgba(17, 25, 40, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 16px;
}

@media (max-width: 1024px) {
  .calculator-grid {
    grid-template-columns: 1fr; /* Stack on tablet/mobile */
  }
}

/* === CALCULATOR LAYOUT === */
.calc-side-a {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* === LEFT COLUMN: CONTROLS === */
.calc-control-panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Estimated System Price Box */
.calc-estimated-box {
  margin-top: 2rem;
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(6, 78, 59, 0.2));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.est-price-label {
  color: #a7f3d0;
  margin: 0 0 5px 0;
  font-size: 0.9rem;
}

.est-price-value {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


/* Inputs Panel */
.calc-inputs h3, .calc-control-panel h3 {
  margin-top: 0;
  margin-bottom: 2rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
}

.input-group {
  margin-bottom: 2rem; /* Increased spacing */
  position: relative;
  display: flex;
  flex-direction: column; /* Force vertical stack */
  gap: 0.8rem;
}

.input-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e2e8f0;
  font-weight: 700;
  font-size: 1rem;
  width: 100%;
}

.highlight-value {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  background: var(--primary-color);
  padding: 4px 12px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
}

/* Custom Range Slider */
.range-container {
  position: relative;
  width: 100%;
  height: 40px; /* Taller touch target */
  display: flex;
  align-items: center;
  margin-top: 5px;
}

/* Slider Track */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

.inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem; /* More space between columns */
  margin-bottom: 2rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* === RIGHT COLUMN: DASHBOARD === */
.calc-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.financial-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.result-card.financial, .result-card.roi {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

/* Gradient Borders */
.result-card.financial::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #f6ad55, #ed8936);
}

.result-card.roi::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #63b3ed, #4299e1);
}

.icon-box {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.icon-box.money { background: rgba(246, 173, 85, 0.15); color: #f6ad55; }
.icon-box.time { background: rgba(99, 179, 237, 0.15); color: #63b3ed; }

.result-content h4 {
  margin: 0;
  font-size: 0.85rem;
  color: #a0aec0;
  text-transform: uppercase;
}
.result-content .big-number {
  margin: 2px 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  transition: all 0.3s ease;
  display: inline-block;
}

@keyframes shakeFast {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-5px) rotate(-1deg); }
  40%  { transform: translateX(5px) rotate(1deg); }
  60%  { transform: translateX(-4px) rotate(-0.5deg); }
  80%  { transform: translateX(4px) rotate(0.5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes pulseSoft {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes breatheBlue {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

/* ≤ 20 months — Golden shake */
.result-content .big-number.payback-super {
  color: #fbbf24 !important;
  font-size: 2.2rem !important;
  animation: shakeFast 0.45s ease-in-out infinite;
}

/* ≤ 23 months — Light Green pulse */
.result-content .big-number.payback-excellent {
  color: #86efac !important;
  font-size: 2rem !important;
  animation: pulseSoft 1.4s ease-in-out infinite;
}

/* ≤ 26 months — Light Blue breathe */
.result-content .big-number.payback-good {
  color: #7dd3fc !important;
  font-size: 1.8rem !important;
  animation: breatheBlue 2s ease-in-out infinite;
}
.result-content .sub-text {
  margin: 0;
  font-size: 0.8rem;
  color: #718096;
}

/* === ECO CARD (THE BIG ONE) === */
.result-card.eco-full {
  background: linear-gradient(160deg, rgba(240, 255, 248, 0.95), rgba(230, 250, 240, 0.98));
  border: 1px solid rgba(72, 187, 120, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.eco-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 10px;
}

.eco-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #68d391;
}

.eco-header-title i { font-size: 1.5rem; }
.eco-header-title h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1a202c; }

.eco-header-badge {
  background: rgba(72, 187, 120, 0.15);
  color: #68d391;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(72, 187, 120, 0.3);
}

.eco-metrics-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: right;
}

.metric-icon { font-size: 2.5rem; }

.metric-data { display: flex; flex-direction: column; }
.metric-val { font-size: 1.8rem; font-weight: 800; color: #1a202c; line-height: 1; }
.metric-label { font-size: 0.85rem; color: #4a5568; margin-top: 4px; }

.metric-divider {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
}

/* QUOTE & NATIONAL BOXES */
.religious-quote-box {
  background: rgba(255, 255, 255, 0.05);
  border-right: 3px solid #48bb78;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.quote-text {
  font-style: italic;
  color: #2d3748;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.quote-source {
  display: block;
  font-size: 0.8rem;
  color: #68d391;
  margin-top: 0.5rem;
}

.national-duty-box {
  background: rgba(229, 62, 62, 0.1); /* Red tint */
  border-right: 3px solid #fc8181;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.duty-icon { font-size: 1.6rem; margin-top: 2px; }
.duty-text { margin: 0; font-size: 0.9rem; color: #2d3748; line-height: 1.5; }
.duty-text strong { color: #feb2b2; }

/* ROTATING GRID */
/* ROTATING GRID - FORCE FLEXBOX */
.rotating-benefits-grid {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap; /* Safety for small screens */
}

/* Benefit Items Layout */
.rot-benefit-item {
  flex: 1; 
  /* Stronger Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.85) !important; /* Much more opaque white */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 1rem;
  border-radius: 12px;
  text-align: start; 
  display: flex;
  flex-direction: row; 
  align-items: center; 
  gap: 1rem; 
  transition: all 0.3s ease;
  min-height: 60px;
  justify-content: flex-start;
  overflow: hidden; 
  margin: 10px; /* GLOBAL FORCE MARGIN */
  border: 1px solid rgba(255, 255, 255, 0.6) !important; /* Stronger border */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.rot-benefit-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.rot-icon { 
  font-size: 1.6rem; 
  color: #0bc5ea; /* Keeping the bright Cyan/Blue */
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rot-text { 
  font-size: 0.9rem; 
  color: #1a202c; /* Dark Grey/Black text */
  font-weight: 700; /* Bold for readiness */
  line-height: 1.4;
  min-height: 2.8em; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: all 0.5s ease;
}

/* Animations */
.anim-slide-out {
  animation: slideOutLeft 0.5s forwards;
}

.anim-slide-in {
  animation: slideInRight 0.5s forwards;
}

.anim-icon-flip {
  transform: rotateY(360deg) scale(1.1);
}

@keyframes slideOutLeft {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-30px) scale(0.9); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(30px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 1024px) {
  .financial-summary-grid { grid-template-columns: 1fr; }
  .eco-metrics-row { flex-direction: column; gap: 1.5rem; align-items: stretch; }
  .metric-divider { display: none; }
  .metric-item { justify-content: center; text-align: center; flex-direction: column; }
  
  /* Robust Mobile/Tablet Stacked Layout */
  .rotating-benefits-grid { 
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important; /* Modern Spacing */
    margin-top: 1rem;
  }
  
  /* Fallback for browsers ignoring flex-gap */
  .rot-benefit-item + .rot-benefit-item {
    margin-top: 1rem; 
  }

  .rot-benefit-item { 
    display: flex;
    flex-direction: row; 
    text-align: right; 
    justify-content: flex-start; 
    padding: 1rem !important; 
    /* Mobile Stronger Glass */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    color: #1a202c !important;
    width: 100%;
    margin-bottom: 0 !important; 
  }
  
  .rot-text { min-height: auto; font-size: 0.95rem; color: #1a202c !important; font-weight: 700 !important; }
}

/* Tooltip (Cloud Style) - Fixed Visibility */
.eco-metrics-row {
  position: relative;
  cursor: help;
}

.eco-tooltip {
  display: none; /* Hidden by default */
  position: absolute;
  bottom: 100%; /* Show above card */
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 90%;
  background: #2d3748;
  color: #fff;
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border: 1px solid rgba(72, 187, 120, 0.4);
  z-index: 999;
}

.eco-metrics-row:hover .eco-tooltip {
  display: block;
  animation: tooltipFadeIn 0.3s ease forwards;
}

.tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #2d3748;
  border-bottom: 1px solid rgba(72, 187, 120, 0.4);
  border-right: 1px solid rgba(72, 187, 120, 0.4);
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(0); }
  to { opacity: 1; transform: translateX(-50%) translateY(-10px); }
}

/* ============================================================
   ROI CALCULATOR - LIGHT MODE GLASS STYLING
   Description: Unified light glass appearance for all 4 cards
   Scope: Only applies within #roi-calculator in light-mode
   Added: 2025-12-18
============================================================ */

/* Glass Panel Small - Similar to glass-panel but smaller dimensions */
.glass-panel-sm {
  background: rgba(17, 25, 40, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 12px;
  padding: 1.2rem;
}

/* ROI Clean Input - Base Dark Mode Style */
.roi-clean-input {
  background: #1e293b;
  border: 1px solid #334155;
  color: white;
}

/* Light Mode: Unified Glass Styling for ROI Calculator Cards */
/* NOTE: Using FULL selectors (no nesting) for maximum browser compatibility */

/* Card 1: Control Panel - True glass with mint tint */
body.light-mode #roi-calculator .calc-control-panel.glass-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(230, 255, 250, 0.60)) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12) !important;
}

/* Cards 2 & 3: Financial + ROI Summary Cards - True glass */
body.light-mode #roi-calculator .result-card.financial.glass-panel-sm,
body.light-mode #roi-calculator .result-card.roi.glass-panel-sm {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(230, 255, 250, 0.60)) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12) !important;
}

/* Card 4: Eco Impact - Unified glass with subtle mint */
body.light-mode #roi-calculator .result-card.eco-full.glass-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(230, 255, 250, 0.60)) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12) !important;
}

/* Input Fields - Override inline dark backgrounds */
body.light-mode #roi-calculator .roi-clean-input {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1a202c !important;
}

/* Text Readability Overrides - Dark text on light backgrounds */

/* Headers */
body.light-mode #roi-calculator h3,
body.light-mode #roi-calculator h4,
body.light-mode #roi-calculator .calc-control-panel h3,
body.light-mode #roi-calculator .calc-inputs h3 {
  color: #1a202c !important;
}

/* Labels */
body.light-mode #roi-calculator label,
body.light-mode #roi-calculator .input-group label {
  color: #2d3748 !important;
}

/* Result card text */
body.light-mode #roi-calculator .result-content h4 {
  color: #4a5568 !important;
}

body.light-mode #roi-calculator .result-content .big-number {
  color: #1a202c !important;
}

/* Override light-mode black color for dynamic payback classes */
body.light-mode #roi-calculator .result-content .big-number.payback-super,
body #roi-calculator .result-content .big-number.payback-super {
  color: #fbbf24 !important;
}

body.light-mode #roi-calculator .result-content .big-number.payback-excellent,
body #roi-calculator .result-content .big-number.payback-excellent {
  color: #86efac !important;
}

body.light-mode #roi-calculator .result-content .big-number.payback-good,
body #roi-calculator .result-content .big-number.payback-good {
  color: #7dd3fc !important;
}

body.light-mode #roi-calculator .result-content .sub-text {
  color: #718096 !important;
}

/* Eco card metrics */
body.light-mode #roi-calculator .metric-label {
  color: #4a5568 !important;
}

body.light-mode #roi-calculator .metric-val {
  color: #1a202c !important;
}

/* Eco card title */
body.light-mode #roi-calculator .eco-header-title h4 {
  color: #1a202c !important;
}

/* Eco card badge */
body.light-mode #roi-calculator .eco-header-badge {
  background: rgba(72, 187, 120, 0.15) !important;
  color: #276749 !important;
  border: 1px solid rgba(72, 187, 120, 0.3) !important;
}

/* Duty/Quote text */
body.light-mode #roi-calculator .duty-text {
  color: #2d3748 !important;
}

body.light-mode #roi-calculator .quote-text {
  color: #2d3748 !important;
}

body.light-mode #roi-calculator .quote-source {
  color: #48bb78 !important;
}

/* Rotating benefits text */
body.light-mode #roi-calculator .rot-text {
  color: #1a202c !important;
}

/* Icon colors - keep vibrant */
body.light-mode #roi-calculator .rot-icon {
  color: #0bc5ea !important;
}

body.light-mode #roi-calculator .eco-header-title i {
  color: #48bb78 !important;
}

/* Metrics row background - lighter for visibility */
body.light-mode #roi-calculator .eco-metrics-row {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Quote and duty boxes - lighter backgrounds */
body.light-mode #roi-calculator .religious-quote-box {
  background: rgba(255, 255, 255, 0.3) !important;
  border-right: 3px solid #48bb78 !important;
}

body.light-mode #roi-calculator .national-duty-box {
  background: rgba(254, 215, 215, 0.3) !important;
  border-right: 3px solid #fc8181 !important;
}

/* ============================================================
   ROI CALCULATOR STYLES
   Description: Layout and theme controls for ROI calculator
   Replaces inline styles for proper responsive behavior
============================================================ */

/* Calculator Grid - Main Layout */
.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch; /* Equal height columns */
}

/* Side A - Inputs and Financial Summary */
.calc-side-a {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Control Panel - Glass Background */
.calc-control-panel.glass-panel {
  flex: 1; /* Grow to fill available space for equal height */
  background: linear-gradient(145deg, rgba(17, 25, 40, 0.75), rgba(6, 78, 59, 0.15));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Light Mode - Control Panel */
body.light-mode .calc-control-panel.glass-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 244, 0.8));
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Panel Header */
.calc-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
}

body.light-mode .calc-panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.calc-panel-header h3 {
  color: white;
  margin: 0;
  font-size: 1.25rem;
}

body.light-mode .calc-panel-header h3 {
  color: #1a202c;
}

.calc-panel-header i {
  color: #48bb78;
  font-size: 1.2rem;
}

/* Estimated System Price Box */
.calc-estimated-box {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.15), rgba(6, 78, 59, 0.1));
  border: 1px solid rgba(72, 187, 120, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  text-align: center;
}

body.light-mode .calc-estimated-box {
  background: linear-gradient(145deg, rgba(236, 253, 245, 1), rgba(209, 250, 229, 0.8));
  border-color: rgba(16, 185, 129, 0.4);
}

/* Estimated Price Label - High Contrast */
.calc-estimated-box .est-price-label {
  color: #a7f3d0; /* Light green for dark mode */
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

body.light-mode .calc-estimated-box .est-price-label {
  color: #065f46; /* Dark green for excellent contrast in light mode */
}

.calc-estimated-box .est-price-value {
  color: #48bb78;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
}

body.light-mode .calc-estimated-box .est-price-value {
  color: #2f855a;
}

/* Responsive Breakpoints */

/* Tablet and below - Stack to single column */
@media (max-width: 1024px) {
  .calculator-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start; /* Reset to natural height on mobile/tablet */
  }
  
  .calc-side-a {
    gap: 1.25rem;
  }
  
  .calc-control-panel.glass-panel {
    flex: none; /* Reset flex-grow on mobile/tablet for natural height */
    padding: 1.5rem;
  }
  
  .calc-panel-header h3 {
    font-size: 1.15rem;
  }
}

/* Mobile - Smaller spacing */
@media (max-width: 768px) {
  .calculator-grid {
    gap: 1.25rem;
  }
  
  .calc-side-a {
    gap: 1rem;
  }
  
  .calc-control-panel.glass-panel {
    padding: 1.25rem;
    border-radius: 12px;
  }
  
  .calc-panel-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
  }
  
  .calc-panel-header h3 {
    font-size: 1.1rem;
  }
  
  .calc-panel-header i {
    font-size: 1rem;
  }
  
  .calc-estimated-box {
    padding: 1.25rem;
    margin-top: 1.25rem;
  }
  
  .calc-estimated-box .est-price-value {
    font-size: 1.3rem;
  }
}

/* Very small mobile */
@media (max-width: 480px) {
  .calc-control-panel.glass-panel {
    padding: 1rem;
  }
  
  .calc-panel-header h3 {
    font-size: 1rem;
  }
  
  .calc-estimated-box {
    padding: 1rem;
  }
}

/* ============================================================
   ROI CALCULATOR - DARK MODE OVERRIDES
   Description: Convert green backgrounds to dark glass
   Scope: Only #roi-calculator in dark-mode
============================================================ */

/* Eco Card - Dark glass with subtle green tint */
body.dark-mode #roi-calculator .result-card.eco-full.glass-panel {
  background: linear-gradient(160deg, rgba(17, 25, 40, 0.85), rgba(6, 78, 59, 0.15)) !important;
  border: 1px solid rgba(72, 187, 120, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Eco Card - Readable text in dark mode */
body.dark-mode #roi-calculator .eco-header-title h4 {
  color: #e2e8f0 !important;
}

body.dark-mode #roi-calculator .metric-val {
  color: #ffffff !important;
}

body.dark-mode #roi-calculator .metric-label {
  color: #cbd5e0 !important;
}

body.dark-mode #roi-calculator .eco-header-badge {
  background: rgba(72, 187, 120, 0.2) !important;
  color: #68d391 !important;
  border: 1px solid rgba(72, 187, 120, 0.3) !important;
}

body.dark-mode #roi-calculator .quote-text {
  color: #e2e8f0 !important;
}

body.dark-mode #roi-calculator .quote-source {
  color: #68d391 !important;
}

body.dark-mode #roi-calculator .duty-text {
  color: #e2e8f0 !important;
}

/* Estimated System Price Box - Dark glass override */
body.dark-mode #roi-calculator .calc-control-panel > div[style*="background: linear-gradient(145deg, rgba(16, 185, 129"] {
  background: linear-gradient(145deg, rgba(17, 25, 40, 0.6), rgba(6, 78, 59, 0.2)) !important;
  border: 1px solid rgba(72, 187, 120, 0.2) !important;
}


/* Fallback for estimated price box text */
body.dark-mode #roi-calculator #calc-system-price {
  color: #ffffff !important;
}

/* ============================================================
   PROJECTS SLIDER (Swiper) - ESSENTIAL LAYOUT RULES
   Description: Minimal CSS to make Swiper slider work horizontally
   Added: 2025-12-18 - Fix for vertical stacking issue
   Scope: Only .masar-projects-slider to avoid affecting other sections
============================================================ */

/* Container */
.masar-projects-slider-container {
  width: 100%;
  max-width: 100%;
  position: relative;
  margin: 2rem 0;
}

/* Swiper Main Container */
.masar-projects-slider__slider.swiper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Swiper Wrapper - CRITICAL: Must be flex for horizontal slides */
.masar-projects-slider__slider .swiper-wrapper,
.masar-projects-slider__wrapper.swiper-wrapper {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  transition-property: transform;
  box-sizing: content-box;
}

/* Swiper Slide - IMPORTANT: width:auto allows multiple slides per view
   Previously was width:100% which forced only 1 slide visible at a time */
.masar-projects-slider__slider .swiper-slide {
  flex-shrink: 0;
  width: auto; /* Changed from 100% to allow 3 slides on desktop */
  height: auto;
  position: relative;
  transition-property: transform;
}

/* Slider Loader/Empty States */
.projects-loader,
.projects-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-color-light);
  font-size: 1.1rem;
}

body.dark-mode .projects-loader,
body.dark-mode .projects-empty {
  color: var(--text-color-dark);
}

/* Responsive */
@media (max-width: 768px) {
  .masar-projects-slider-container {
    margin: 1.5rem 0;
  }
}

/* ============================================================
   SECTION: OFFICIAL NEWS
   Description: Styles for the governor agreement section
============================================================ */
#official-news {
  padding: 4rem 20px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#official-news .section-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 3rem;
  color: var(--primary-color);
  font-weight: 800;
}

.news-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}



.news-content p {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--text-color-light);
}

body.dark-mode .news-content p {
  color: var(--text-color-dark);
}

.highlight-text {
  color: var(--secondary-color);
  font-weight: bold;
  background: rgba(40, 167, 69, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  display: inline-block;
}

.news-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px dashed rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

body.dark-mode .news-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.news-signature {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gov-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.news-date {
  font-weight: 600;
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.dark-mode .news-date {
  color: #aaa;
}

.news-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.main-img {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.sub-img-1, .sub-img-2 {
  aspect-ratio: 4 / 3;
}

@media (max-width: 992px) {
  .news-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #official-news {
    padding: 3rem 15px;
  }
  #official-news .section-title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }
  .news-content p {
    font-size: 1.05rem;
  }
  .news-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   FLOATING TRUST BADGE (Government Partnership)
============================================================ */
.floating-trust-badge {
  position: fixed;
  bottom: 95px; /* Floats above WhatsApp/ToTop buttons */
  left: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 244, 0.95));
  border: 1px solid rgba(40, 167, 69, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding: 8px; /* Perfect circle initially */
  gap: 0;
  z-index: 9998;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow: hidden;
}

body.dark-mode .floating-trust-badge {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(6, 78, 59, 0.85));
  border-color: rgba(40, 167, 69, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.floating-trust-badge:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2);
  gap: 12px;
  padding-left: 16px; /* Expand pill padding on left for text (RTL) */
}

.floating-trust-badge .badge-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: white;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.floating-trust-badge .badge-text-box {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-trust-badge:hover .badge-text-box {
  max-width: 250px;
  opacity: 1;
}

.floating-trust-badge .bt-title {
  color: var(--secondary-color);
  font-weight: 800;
  font-size: 0.95rem;
}

.floating-trust-badge .bt-sub {
  color: var(--text-color-light);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 2px;
}

body.dark-mode .floating-trust-badge .bt-sub {
  color: var(--text-color-dark);
}

/* LTR specific layout */
html[dir="ltr"] .floating-trust-badge,
body[dir="ltr"] .floating-trust-badge {
  left: auto;
  right: 20px;
  padding: 8px; /* Reset circle */
}

/* Hover padding LTR */
html[dir="ltr"] .floating-trust-badge:hover,
body[dir="ltr"] .floating-trust-badge:hover {
  padding-left: 8px;
  padding-right: 16px; /* Expand pill padding on right for text (LTR) */
}

@media (max-width: 768px) {
  .floating-trust-badge {
    bottom: 90px;
    left: 15px;
    padding: 6px 12px 6px 6px;
    gap: 8px;
  }
  .floating-trust-badge .badge-img {
    width: 36px;
    height: 36px;
  }
  .floating-trust-badge .bt-title { font-size: 0.85rem; }
  .floating-trust-badge .bt-sub { font-size: 0.7rem; }
}

/* ============================================================
   UNIFIED WIDTH FOR ALL MAJOR INTERNAL BOXES
   Forces inner cards/grids to expand exactly to About Us width
============================================================ */
@media (min-width: 1025px) {
  #official-news .news-container,
  #why-choose-us .why-grid,
  #services .services-grid,
  #partners .partner-grid,
  #roi-calculator .calculator-wrapper,
  #certificates .certificates-grid,
  #contact .contact-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   SPECIAL FIX FOR LATEST PROJECTS
   Matches card width (1160px) but throws arrows OUTSIDE!
============================================================ */
@media (min-width: 1200px) {
  #projects-preview .container {
    max-width: 1380px !important; /* Room for arrows */
  }
  .masar-projects-slider__slider {
    max-width: 1160px !important;
    margin: 0 auto !important;
  }
  .slider-nav {
    max-width: 1300px !important;
    left: 50% !important;
    translate: -50% -50% !important;
  }
}