* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* إزالة كل tap highlights والتأثيرات الحمراء */
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
  }

  /* إزالة selection colors الحمراء */
  ::selection {
      background: rgba(31, 66, 131, 0.3);
      /* Primary Navy */
      color: inherit;
  }

  ::-moz-selection {
      background: rgba(31, 66, 131, 0.3);
      /* Primary Navy */
      color: inherit;
  }

  :root {
      --primary-navy: #243964;
      --secondary-teal: #3bb4eb;
      --accent-green: #26a65b;
      --accent-gold: #3bb4eb;
      /* Consolidating accent to secondary blue */
      --soft-blue: #3bb4eb;
      /* Consolidating soft blue to secondary blue */
      --light-gray: #545454;
      --white: #ffffff;
      --glass-bg: rgba(31, 66, 131, 0.05);
      /* Adjusted to match new primary */
      --glass-border: rgba(59, 180, 235, 0.2);
      /* Adjusted to match new secondary */

      /* Light mode colors */
      --light-bg: #f8f9fa;
      --light-text: #545454;
      --light-card-bg: rgba(255, 255, 255, 0.9);
      --light-border: rgba(31, 66, 131, 0.1);
  }

  body {
      font-family: 'Tajawal', 'Cairo', sans-serif;
      background: #f8f9fa;
      color: #1a1a1a;
      overflow-x: hidden;
      width: 100%;
      position: relative;
      transition: background 0.5s ease, color 0.5s ease;
      /* Allow normal scroll/overscroll behavior so mobile scroll works */
      overscroll-behavior: auto;
      overscroll-behavior-x: auto;
      overscroll-behavior-y: auto;
      /* Allow touch-driven scrolling on mobile */
      touch-action: pan-y;
      /* Enable native momentum scrolling on iOS */
      -webkit-overflow-scrolling: touch;
  }

  /* إزالة كل Chrome/Edge overscroll effects */
  html {
      overscroll-behavior: auto;
      overscroll-behavior-x: auto;
      overscroll-behavior-y: auto;
      touch-action: auto;
  }

  body.light-mode {
      background: var(--light-bg);
      color: var(--light-text);
  }

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

  /* Custom Cursor */
  .cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      border: 2px solid var(--secondary-teal);
      border-radius: 50%;
      pointer-events: none;
      z-index: 10000;
      transition: transform 0.2s ease, background 0.2s ease;
      mix-blend-mode: difference;
  }

  .cursor-follower {
      position: fixed;
      width: 40px;
      height: 40px;
      border: 1px solid var(--accent-gold);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transition: transform 0.3s ease;
      opacity: 0.5;
  }

  /* Mobile - Hide custom cursor */
  @media (max-width: 768px) {

      .cursor,
      .cursor-follower {
          display: none;
      }

      body {
          cursor: auto;
      }
  }

  /* Animated Background */
  .animated-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
  }

  .bg-gradient {
      position: absolute;
      width: 100%;
      height: 100%;
      background: transparent;
      animation: none;
      pointer-events: none;
  }

  body.light-mode .bg-gradient {
      background: transparent;
  }

  @keyframes gradientShift {

      0%,
      100% {
          transform: translate(0, 0) rotate(0deg);
      }

      50% {
          transform: translate(0, 0) rotate(180deg);
      }
  }

  .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
  }

  .shape {
      position: absolute;
      opacity: 0.1;
      animation: float 20s infinite;
  }

  .shape:nth-child(1) {
      width: 80px;
      height: 80px;
      background: var(--secondary-teal);
      border-radius: 50%;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
  }

  .shape:nth-child(2) {
      width: 60px;
      height: 60px;
      background: var(--accent-gold);
      border-radius: 20%;
      top: 60%;
      left: 80%;
      animation-delay: 5s;
  }

  .shape:nth-child(3) {
      width: 100px;
      height: 100px;
      background: var(--soft-blue);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      top: 80%;
      left: 20%;
      animation-delay: 10s;
  }

  @keyframes float {

      0%,
      100% {
          transform: translate(0, 0) rotate(0deg);
      }

      25% {
          transform: translate(100px, -100px) rotate(90deg);
      }

      50% {
          transform: translate(200px, 50px) rotate(180deg);
      }

      75% {
          transform: translate(50px, 150px) rotate(270deg);
      }
  }

  /* Container */
  .container {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      /* padding: 0 40px; */
      overflow: visible;
  }

  @media (max-width: 768px) {
      .container {
          padding: 0 20px;
      }
  }

  #elpop {
      font-size: 1.35em;
  }


  /* Responsive adjustments to prevent logo/nav overlap */
  @media (max-width: 1100px) {
      .logo-svg {
          width: 130px;
      }

      .nav-links a {
          font-size: 16px;
      }

      .nav-links {
          gap: 10px;
      }

      #elpop {
          font-size: 1.1em;
      }
  }

  @media (max-width: 820px) {
      .logo-svg {
          width: 110px;
      }

      .logo-container {
          padding-right: 8px;
      }

      .nav-links a {
          max-width: 8rem;
      }

      #elpop {
          font-size: 1.1em;
      }
  }

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

      .hamburger {
          display: flex;
      }

      .logo-svg {
          width: 200px;
          height: auto;
      }

      .lang-toggle {
          padding-left: 10px;
          padding-right: 10px;
      }

      /* Mobile menu behavior when hamburger toggles .nav-center.active */
      .nav-center {
          position: absolute;
          top: 64px;
          left: 0;
          right: 0;
          background: var(--primary-navy);
          display: none;
          flex-direction: column;
          gap: 8px;
          padding: 12px 16px;
          z-index: 1000;
      }

      .nav-center.active {
          display: flex;
      }

      .nav-center .nav-links {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .nav-center .nav-links a {
          color: var(--white);
          font-size: 16px;
      }

      #elpop {
          font-size: 1.1em;
      }
  }



  @media (max-width: 480px) {
      .container {
          padding: 0 15px;
      }

      #elpop {
          font-size: 1em;
      }
  }

  /* Navigation */
  nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 16px 0;
      /* Use primary navy color for navbar to match primary text */
      background: var(--primary-navy);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--glass-border);
      animation: slideDown 0.8s ease;
      transition: all 0.3s ease;
  }

  nav .container {
      max-width: 1600px;
      width: 95%;
  }

  /* On small screens disable heavy animated background and reduce nav blur */
  @media (max-width: 768px) {

      .animated-bg,
      .floating-shapes,
      .shape,
      .bg-gradient {
          display: none !important;
          animation: none !important;
      }

      nav {
          backdrop-filter: none !important;
          background: var(--primary-navy);
      }
  }

  /* Keep navbar same primary navy color even in light mode for visual consistency */
  body.light-mode nav {
      background: var(--primary-navy);
      border-bottom: 1px solid var(--glass-border);
  }

  /* Ensure links and controls stay readable when nav is navy */
  body.light-mode nav .nav-links a {
      color: var(--white);
  }

  body.light-mode nav .lang-toggle {
      color: var(--white);
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
  }

  @keyframes slideDown {
      from {
          transform: translateY(-100%);
          opacity: 0;
      }

      to {
          transform: translateY(0);
          opacity: 1;
      }
  }

  .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
  }

  .logo-container {
      display: flex;
      align-items: center;
      gap: 15px;
      flex: 0 0 auto;
      min-width: 90px;
      padding-right: 12px;
  }

  .logo-svg {
      width: 150px;
      height: auto;
      /* margin-right: 10px; */
  }

  /* الوضع الداكن (الافتراضي) */
  body:not(.light-mode) .logo-svg {
      filter: invert(.1) brightness(1.5);
  }

  /* الوضع الفاتح: رجّع اللوجو لطبيعته */
  body.light-mode .logo-svg {
      filter: none;
  }




  @keyframes logoFloat {

      0%,
      100% {
          transform: translateY(0) rotate(0deg);
      }

      50% {
          transform: translateY(-5px) rotate(5deg);
      }
  }

  .logo {
      font-size: 32px;
      font-weight: 900;
      color: var(--primary-navy);
      letter-spacing: 2px;
      animation: glow 3s ease-in-out infinite;
  }

  /* Ensure logo is visible when nav uses primary navy */
  nav .logo {
      color: var(--white);
  }

  @keyframes glow {

      0%,
      100% {
          filter: drop-shadow(0 0 10px rgba(77, 212, 212, 0.5));
      }

      50% {
          filter: drop-shadow(0 0 20px rgba(230, 201, 104, 0.8));
      }
  }

  .nav-center {
      display: flex;
      gap: 40px;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
  }

  .nav-links {
      display: flex;
      gap: 30px;
      flex: 1 1 auto;
      justify-content: center;
      overflow: hidden;
      min-width: 0;
  }

  .nav-links a {
      color: var(--white);
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      transition: all 0.15s ease;
      position: relative;
      padding: 5px 0;
      max-width: 12rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  body.light-mode .nav-links a {
      color: var(--light-text);
  }

  .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--secondary-teal);
      transition: width 0.15s ease;
  }

  .nav-links a:hover::after {
      width: 100%;
  }

  .nav-links a:hover {
      color: var(--secondary-teal);
  }

  .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
  }

  /* Language Toggle */
  .lang-toggle {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 25px;
      padding: 8px 14px;
      color: var(--white);
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      font-size: 14px;
      /* margin-left: 14px; */
      white-space: nowrap;
      min-width: 44px;
  }

  body.light-mode .lang-toggle {
      background: rgba(45, 62, 95, 0.1);
      border-color: rgba(45, 62, 95, 0.2);
      color: var(--light-text);
  }

  /* Hero Section: background image with gradient + subtle blur overlay and loading animation */
  .hero-section {
      position: relative;
      min-height: 72vh;
      display: flex;
      align-items: center;
      z-index: 1;
      color: var(--white);
      background-image: linear-gradient(180deg, rgba(31, 66, 131, 0.45) 0%, rgba(31, 66, 131, 0.12) 60%, rgba(0, 0, 0, 0.05) 80%),
          url('assets/bg.jpeg');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      transition: opacity 0.8s cubic-bezier(.2, .8, .2, 1), transform 0.8s cubic-bezier(.2, .8, .2, 1);
  }

  .hero-section::before {
      content: '';
      position: absolute;
      inset: 0;
      /* gentler dark overlay for reliable contrast; reduced blur for clarity */
      background: linear-gradient(180deg, rgba(6, 18, 34, 0.52) 0%, rgba(6, 18, 34, 0.36) 35%, rgba(6, 18, 34, 0.18) 100%);
      pointer-events: none;
      z-index: 1;
      backdrop-filter: blur(2px);
  }

  .hero-content {
      position: relative;
      z-index: 2;
  }

  /* Initial pre-load state: slightly blurred/shifted and show shimmer */
  body:not(.loaded) .hero-section {
      opacity: 0;
      transform: translateY(10px) scale(0.995);
  }

  /* When loaded, hero fades in */
  body.loaded .hero-section {
      opacity: 1;
      transform: none;
  }

  /* subtle shimmer highlight */
  .hero-section::after {
      content: '';
      position: absolute;
      left: -40%;
      top: 0;
      height: 100%;
      width: 60%;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 100%);
      transform: skewX(-20deg);
      z-index: 3;
      pointer-events: none;
      opacity: 0.0;
  }

  body:not(.loaded) .hero-section::after {
      animation: heroShimmer 1.6s ease-in-out infinite;
      opacity: 1;
  }

  @keyframes heroShimmer {
      0% {
          left: -60%;
      }

      100% {
          left: 160%;
      }
  }

  /* Adjust text sizing on hero */
  .hero-title {
      font-size: clamp(28px, 5vw, 56px);
      margin-top: 12px;
  }

  .hero-subtitle {
      font-size: clamp(14px, 2.2vw, 18px);
      opacity: 0.95;
  }

  .hero-description {
      max-width: 720px;
      margin-top: 18px;
      color: rgba(255, 255, 255, 0.92);
  }

  @media (max-width: 768px) {
      .hero-section {
          min-height: 55vh;
          background-position: center 30%;
      }

      .nav-links {
          gap: 18px;
      }

      /* Mobile: keep fixed background as requested */
      /* Many mobile browsers (iOS Safari) don't support background-attachment: fixed
       and can fail to render the image. Use scroll on touch devices to ensure
       the background loads and displays correctly. */
      .hero-section {
          background-attachment: scroll;
      }
  }

  /* Target touch devices / mobile Safari specifically and ensure background renders */
  @media (hover: none) and (pointer: coarse),
  (max-width: 820px) {
      .hero-section {
          background-attachment: scroll !important;
          background-position: center top !important;
          -webkit-background-size: cover;
          /* legacy webkit */
          background-size: cover !important;
      }
  }


  .lang-toggle:hover {
      background: var(--secondary-teal);
      border-color: var(--secondary-teal);
      color: var(--white);
      transform: translateY(-2px);
      box-shadow: 0 5px 20px rgba(59, 180, 235, 0.3);
      /* Secondary Blue */
  }

  /* Hamburger Menu */
  .hamburger {
      display: none;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      z-index: 1001;
  }

  .hamburger span {
      width: 30px;
      height: 3px;
      background: var(--white);
      border-radius: 3px;
      transition: all 0.3s ease;
  }

  body.light-mode .hamburger span {
      background: var(--light-text);
  }

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

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

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

  /* Hero Section */
  .hero-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 120px 0 0px;
      position: relative;
  }

  .hero-content {
      display: flex;
      flex-direction: column;
      gap: 50px;
      align-items: center;
      text-align: center;
  }

  .hero-text {
      animation: fadeInUp 1.2s ease-out forwards;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 900px;
      padding-bottom: 25px;
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(60px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .hero-subtitle {
      font-size: clamp(18px, 2.6vw, 28px);
      color: var(--white);
      font-weight: 900;
      margin-bottom: 14px;
      letter-spacing: 3px;
      text-transform: uppercase;
  }

  .hero-title {
      font-size: clamp(20px, 4vw, 70px);
      font-weight: 900;
      line-height: 1.02;
      margin-bottom: 18px;
      color: #ffffff;
      text-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
      letter-spacing: -1px;
  }



  .hero-description {
      font-size: clamp(10px, 1.6vw, 18px);
      line-height: 1.8;
      margin-bottom: 28px;
      color: rgba(255, 255, 255, 0.97);
      font-weight: 600;
      opacity: 1;
      max-width: 920px;
      text-shadow: 0 10px 28px rgba(2, 8, 20, 0.55);
      background: rgba(0, 6, 20, 0.22);
      display: inline-block;
      padding: 14px 20px;
      border-radius: 12px;
      backdrop-filter: blur(3px) saturate(120%);
  }

  body.light-mode .hero-description {
      opacity: 0.8;
  }

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

  .cta-button {
      padding: 18px 44px;
      font-size: 19px;
      font-weight: 800;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
      font-family: inherit;
  }

  .cta-primary {
      background: var(--primary-navy);
      color: var(--white);
      /* box-shadow: 0 10px 30px rgba(31, 66, 131, 0.3); */
  }

  .cta-primary:hover {
      background: #153266;
      /* Slightly darker shade of primary-navy */
      transform: none;
      box-shadow: none;
  }

  .cta-secondary {
      /* background: var(--primary-navy); */
      color: var(--white);
      border: 2px solid var(--primary-navy);
  }

  body.light-mode .cta-secondary {
      color: var(--white);
      border-color: rgba(255, 255, 255, 0.9);
  }

  .cta-secondary:hover {
      background: var(--accent-gold);
      color: var(--primary-navy);
      transform: none;
      box-shadow: none;
  }

  /* Hero-scoped CTA: green primary for better contrast in hero */
  .hero-section .cta-primary {
      background: var(--primary-navy);
      color: var(--white);
      border: 2px solid var(--primary-navy);
      box-shadow: 0 8px 24px rgba(31, 66, 131, 0.12);
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  }

  .hero-section .cta-primary:hover {
      transform: scale(1.06);
      box-shadow: 0 20px 40px rgba(31, 66, 131, 0.18);
      border-color: var(--primary-navy);
  }

  /* Hero-scoped secondary CTA: primary navy background with white text */
  .hero-section .cta-secondary {
      background: transparent;
      color: var(--white);
      border: 2px solid rgba(255, 255, 255, 0.9);
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
  }

  .hero-section .cta-secondary:hover {
      transform: scale(1.04);
      box-shadow: 0 18px 36px rgba(31, 66, 131, 0.12);
      background: var(--white);
      color: var(--primary-navy);
      /* border-color: var(--primary-navy); */
  }

  .hero-visual {
      animation: fadeInUp 1.2s ease-out 0.3s forwards;
      opacity: 0;
      display: block;
      /* Ensure it's visible if it was hidden/none before, though grid handled it */
      width: 100%;
      max-width: 500px;
      /* Restrict width in centered layout */
  }

  @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translateX(50px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  /* ================= HERO DEFAULT (Desktop) ================= */

  .hero-title {
      font-size: 56px;
      font-weight: 800;
      line-height: 1.2;
  }

  .hero-subtitle {
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 10px;
  }

  .hero-description {
      font-size: 18px;
      line-height: 1.8;
      margin: 20px 0;
      max-width: 650px;
  }

  .hero-buttons {
      margin-top: 25px;
  }


  /* ================= TABLET ================= */

  /* ========== Tablet & Small Screens ========== */
  @media (max-width: 768px) {

      .hero-visual {
          display: none;
      }

      section {
          padding: 60px 20px;
      }

      .section-title {
          font-size: 28px;
          line-height: 1.3;
          text-align: center;
      }

      .section-subtitle {
          font-size: 18px;
          font-weight: 600;
          line-height: 1.6;
          text-align: center;
      }

      .hero-title {
          font-size: 30px !important;
          line-height: 1.2;
          text-align: center;
      }

      .hero-subtitle {
          font-size: 22px;
          /* line-height: 1.1; */
          text-align: center;
      }
  }


  /* ========== Small Phones ========== */
  @media (max-width: 480px) {

      section {
          padding: 40px 15px;
      }

      .section-title {
          font-size: 22px;
      }

      .section-subtitle {
          font-size: 15px;
          font-weight: 600;
      }

      .hero-title {
          font-size: 40px !important;
      }

      .hero-subtitle {
          font-size: 12px;
          font-weight: 700;
      }

      .floating-shapes .shape {
          opacity: 0.05;
          animation: none;
      }
  }

  /* Section Styles */
  section {
      padding: 60px 0;
      position: relative;
  }

  .section-title {
      font-size: 56px;
      font-weight: 900;
      text-align: center;
      margin-bottom: 20px;
      color: var(--primary-navy);
  }

  .section-subtitle {
      text-align: center;
      font-size: 20px;
      margin-bottom: 40px;
      opacity: 0.9;
      font-weight: 500;
      color: var(--primary-navy);
  }

  /* Glass Card Effect */
  .glass-card {
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 30px;
      padding: 40px;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
  }

  body.light-mode .glass-card {
      background: var(--light-card-bg);
      backdrop-filter: blur(20px);
      border-color: var(--light-border);
  }

  .glass-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(59, 180, 235, 0.1), transparent);
      /* Secondary Blue */
      transition: left 0.5s ease;
  }

  .glass-card:hover::before {
      left: 100%;
  }

  .glass-card:hover {
      /* transform: translateY(-15px); */
      box-shadow: 0 30px 60px rgba(31, 66, 131, 0.2);
      border-color: var(--secondary-teal);
  }

  .glass-card:hover {
      /* transform: translateY(-15px); */
      box-shadow: 0 30px 60px rgba(31, 66, 131, 0.2);
      /* Primary Navy */
      border-color: var(--secondary-teal);
  }

  /* Disable card hover lift on touch devices to prevent accidental layout shifts */
  @media (hover: none) {
      .glass-card:hover {
          transform: none;
          box-shadow: none;
      }
  }

  /* Scroll Reveal */
  .scroll-reveal {
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .scroll-reveal.active {
      opacity: 1;
  }

  /* About Section - Fade in from bottom */
  #about .scroll-reveal {
      transform: translateY(50px);
  }

  #about .scroll-reveal.active {
      transform: translateY(0);
  }

  /* Vision Section - Slide from left */
  #vision .scroll-reveal {
      transform: translateX(-60px);
  }

  #vision .scroll-reveal.active {
      transform: translateX(0);
  }

  /* Values Section - Scale up + fade */
  #values .scroll-reveal {
      transform: scale(0.7);
  }

  #values .scroll-reveal.active {
      transform: scale(1);
  }

  /* Why Section - Slide from right */
  #why .scroll-reveal {
      transform: translateX(60px);
  }

  #why .scroll-reveal.active {
      transform: translateX(0);
  }

  /* Objectives Section - Rotate + slide */
  #objectives .scroll-reveal {
      transform: rotate(-8deg) translateY(40px);
  }

  #objectives .scroll-reveal.active {
      transform: rotate(0deg) translateY(0);
  }

  /* Products Section - Flip from Y axis */
  #products .scroll-reveal {
      transform: perspective(1000px) rotateY(-25deg);
  }

  #products .scroll-reveal.active {
      transform: perspective(1000px) rotateY(0deg);
  }

  /* Clients Section - Pop/Bounce in */
  #clients .scroll-reveal {
      transform: scale(0.5) translateY(50px);
  }

  #clients .scroll-reveal.active {
      transform: scale(1) translateY(0);
  }

  /* Team Section - Slide from bottom with slight rotation */
  #team .scroll-reveal {
      transform: translateY(60px) rotate(5deg);
  }

  #team .scroll-reveal.active {
      transform: translateY(0) rotate(0deg);
  }

  /* Contact Section - Expand from center */
  #contact .scroll-reveal {
      transform: scale(0.6);
  }

  #contact .scroll-reveal.active {
      transform: scale(1);
  }

  /* Stagger animations - each card animates slightly after the previous */
  .scroll-reveal:nth-child(1) {
      transition-delay: 0.05s;
  }

  .scroll-reveal:nth-child(2) {
      transition-delay: 0.15s;
  }

  .scroll-reveal:nth-child(3) {
      transition-delay: 0.25s;
  }

  .scroll-reveal:nth-child(4) {
      transition-delay: 0.35s;
  }

  .scroll-reveal:nth-child(5) {
      transition-delay: 0.45s;
  }

  .scroll-reveal:nth-child(6) {
      transition-delay: 0.55s;
  }

  .scroll-reveal:nth-child(7) {
      transition-delay: 0.65s;
  }

  .scroll-reveal:nth-child(8) {
      transition-delay: 0.75s;
  }

  .scroll-reveal:nth-child(9) {
      transition-delay: 0.85s;
  }

  .scroll-reveal:nth-child(10) {
      transition-delay: 0.95s;
  }

  /* About Section */
  .about-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      margin-top: 30px;
  }

  .about-text {
      font-size: 23px;
      font-weight: 500;
      line-height: 1.8;
      opacity: 0.9;
  }

  /* Vision Section */
  .vision-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
      margin-top: 30px;
  }

  .vision-images {
      display: flex;
      flex-direction: column;
      gap: 30px;
  }

  .vision-image-card {
      width: 100%;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
  }

  .vision-image-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 25px;
      transition: transform 0.5s ease;
  }

  .vision-image-card:hover img {
      transform: scale(1.1);
  }

  .vision-icon {
      font-size: 80px;
      animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {

      0%,
      100% {
          transform: scale(1);
          opacity: 0.8;
      }

      50% {
          transform: scale(1.1);
          opacity: 1;
      }
  }

  .vision-card {
      max-width: 100%;
      padding: 60px;
      text-align: center;
  }

  .vision-text {
      font-size: 28px;
      line-height: 1.8;
      font-weight: 500;
  }

  /* Values Section */
  .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 30px;
  }

  .value-card {
      text-align: center;
      padding: 50px 30px;
  }

  .value-icon {
      width: 100px;
      height: 100px;
      margin: 0 auto 30px;
      background: var(--secondary-teal);
      color: var(--primary-navy);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      box-shadow: 0 20px 40px rgba(59, 180, 235, 0.3);

  }

  .value-title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 15px;
      color :var(--primary-navy)
  }

  .value-subtitle {
      font-weight: 600;
      font-size: 23px;
      opacity: 0.8;
      color :var(--primary-navy)
  }

  /* Why Section */
  .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 30px;
  }

  .why-card {
      padding: 12px 8px;
      position: relative;
      margin-bottom: 20px;
  }

  .why-image-placeholder {
      width: 100%;
      height: 120px;
      /* background: rgba(77, 212, 212, 0.1); */
      border-radius: 20px;
      margin-top: 30px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
  }

  .why-image-placeholder img {
      /* width: 100%;
      height: 100%; */
      object-fit: cover;
      border-radius: 20px;
      transition: transform 0.5s ease;
  }

  .why-card:hover .why-image-placeholder img {
      transform: scale(1.1);
  }

  .why-default-icon {
      font-size: 96px;
      animation: bounce 2s ease-in-out infinite;
  }

  .why-number {
      font-size: 72px;
      font-weight: 900;
      color: var(--secondary-teal);
      margin-bottom: 20px;
  }

  .why-title {
     text-align: center;
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 15px;
      color: var(--primary-navy);
  }

  .why-description {
      font-size: 23px;
      line-height: 1.6;
      font-weight: 500;
      opacity: 1;
      color: var(--primary-navy);
      text-align: center;
  }

  /* Objectives Section */
  .objectives-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      margin-top: 30px;
  }

  .objective-card {
      padding: 40px;
      position: relative;
  }

  .objective-image-placeholder {
      width: 100%;
      height: 180px;
      /* background: rgba(230, 201, 104, 0.1); */
      border-radius: 20px;
      margin-bottom: 25px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .objective-image-placeholder::before {
      /* content: '📷'; */
      font-size: 48px;
      opacity: 0.3;
      position: absolute;
  }

  .objective-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 20px;
      transition: transform 0.5s ease;
      opacity: 0;
  }

  .objective-image[src]:not([src=""]) {
      opacity: 1;
  }

  .objective-card:hover .objective-image {
      transform: scale(1.05);
  }

  .objective-number {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 72px;
      font-weight: 900;
      opacity: 0.1;
  }

  body[dir="ltr"] .objective-number {
      right: auto;
      left: 20px;
  }

  .objective-text {
      font-size: 30px;
      line-height: 1.6;
      font-weight: 500;
  }

  /* Products Section */
  .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-top: 30px;
  }

  .product-card {
      padding: 40px 30px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .product-icon {
      font-size: 64px;
      margin-bottom: 25px;
      animation: bounce 2s ease-in-out infinite;
  }

  @keyframes bounce {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-10px);
      }
  }

  .product-card:hover .product-icon {
      transform: scale(1.2);
  }

  .product-title {
      font-size: 20px;
      font-weight: 700;
  }

  /* Clients Section */
  .clients-carousel-wrapper {
      margin-top: 30px;
      position: relative;
      padding: 40px 0;
      width: 100%;
  }

  .clientsSwiper {
      width: 100%;
      overflow: visible;
      -webkit-tap-highlight-color: transparent !important;
      -webkit-touch-callout: none !important;
      /* إزالة كل overscroll effects بالكامل */
      overscroll-behavior: none !important;
      overscroll-behavior-x: none !important;
      overscroll-behavior-y: none !important;
      /* تعطيل Chrome bounce/glow */
      -webkit-overflow-scrolling: auto !important;
      /* Kill iOS/Chrome stretch highlight */
      touch-action: pan-y pan-x;
  }

  /* إخفاء scrollbar */
  .clientsSwiper::-webkit-scrollbar {
      display: none;
  }

  .clientsSwiper {
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
  }

  /* إزالة outline و focus الأحمر */
  .clientsSwiper *:focus,
  .clientsSwiper *:focus-visible,
  .swiper-slide:focus,
  .swiper-slide:focus-visible,
  .client-card:focus,
  .client-card:focus-visible {
      outline: none !important;
      box-shadow: none !important;
  }

  /* إزالة أي borders حمراء في light mode */
  body.light-mode .clientsSwiper,
  body.light-mode .swiper-wrapper,
  body.light-mode .swiper-slide,
  body.light-mode .client-card {
      outline: none !important;
      border: none !important;
  }

  /* إزالة tap highlight من كل عناصر الـ swiper */
  .swiper-slide,
  .swiper-wrapper,
  .client-card,
  .client-card * {
      -webkit-tap-highlight-color: transparent !important;
      -webkit-touch-callout: none !important;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
      /* إزالة overscroll بالكامل */
      overscroll-behavior: none !important;
  }

  /* إزالة أي active/hover states حمراء */
  .client-card:active,
  .swiper-slide:active {
      background: transparent !important;
      outline: none !important;
  }

  /* إزالة overscroll glow من wrapper بالكامل */
  .swiper-wrapper {
      transition-timing-function: linear !important;
      overscroll-behavior: none !important;
      overscroll-behavior-x: none !important;
      -webkit-overflow-scrolling: auto !important;
  }

  /* إزالة كل chrome overscroll effects */
  .clients-carousel-wrapper {
      overscroll-behavior: none !important;
      overscroll-behavior-x: none !important;
      overscroll-behavior-y: none !important;
      -webkit-overflow-scrolling: auto !important;
  }

  /* Force remove any overscroll pseudo elements */
  .clientsSwiper::before,
  .clientsSwiper::after,
  .swiper-wrapper::before,
  .swiper-wrapper::after,
  .clients-carousel-wrapper::before,
  .clients-carousel-wrapper::after {
      content: none !important;
      display: none !important;
  }

  body.light-mode .clientsSwiper::before,
  body.light-mode .clientsSwiper::after,
  body.light-mode .swiper-wrapper::before,
  body.light-mode .swiper-wrapper::after {
      content: none !important;
      display: none !important;
  }

  .client-card {
      padding: 30px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
  }

  body[dir="ltr"] .client-card {
      margin-right: 0;
      margin-left: 60px;
  }

  .client-logo-placeholder {
      width: 200px;
      height: 200px;
      /* background: rgba(77, 212, 212, 0.05); */
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      transition: all 0.3s ease;
  }

  body.light-mode .client-logo-placeholder {
      background: rgba(45, 62, 95, 0.05);
  }

  .client-logo-placeholder::before {
      /* content: '🏢'; */
      font-size: 48px;
      opacity: 0.3;
      position: absolute;
  }

  .client-logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 15px;
      transition: transform 0.4s ease;
      opacity: 0;
  }

  .client-logo[src]:not([src=""]) {
      opacity: 1;
  }

  .client-card:hover .client-logo-placeholder {
      background: rgba(77, 212, 212, 0.15);
      transform: scale(1.05);
  }

  body.light-mode .client-card:hover .client-logo-placeholder {
      background: rgba(45, 62, 95, 0.15);
  }

  .client-card:hover .client-logo {
      transform: scale(1.1);
  }

  /* .client-card:hover {
      transform: scale(1.05) translateY(-5px);
  } */

  .client-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--secondary-teal);
      white-space: nowrap;
  }

  body.light-mode .client-name {
      color: var(--primary-navy);
  }

  /* Swiper Navigation Arrows */
  .swiper-navigation {
      position: relative;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
      opacity: 0;
      transition: opacity 0.3s ease;
  }

  .swiper-navigation.show {
      display: flex;
      opacity: 1;
  }

  .swiper-button-custom {
      width: 50px;
      height: 50px;
      background: var(--glass-bg);
      border: 2px solid var(--glass-border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
  }

  body.light-mode .swiper-button-custom {
      background: var(--light-card-bg);
      border-color: var(--light-border);
  }

  .swiper-button-custom:hover {
      background: rgba(31, 66, 131, 0.2);
      /* Primary Navy */
      border-color: var(--secondary-teal);
      transform: scale(1.1);
  }

  .swiper-button-custom svg {
      width: 24px;
      height: 24px;
      fill: var(--secondary-teal);
  }

  body.light-mode .swiper-button-custom svg {
      fill: var(--primary-navy);
  }

  /* Team Section */
  .team-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      margin-top: 30px;
  }

  .team-card {
      text-align: center;
      padding: 40px 30px;
      margin-bottom: 20px;
  }

  .team-avatar {
      width: 200px;
      height: 200px;
      margin: 0 auto 30px;
      /* background: linear-gradient(135deg, var(--secondary-teal), var(--accent-gold)); */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      font-weight: 900;
      color: var(--white);
      border: white solid 4px;
      box-shadow: 0 20px 40px rgba(31, 66, 131, 0.3);
      /* Primary Navy */
  }

  .team-name {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--primary-navy);
  }

  .team-position {
      font-size: 20px;
      font-weight: 500;
      opacity: 0.8;
      color: var(--primary-navy);
  }

  /* Contact Section */
  .contact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-top: 30px;
  }

  .contact-card {
      padding: 40px 30px;
      text-align: center;
      margin-bottom: 20px;
  }

  .contact-icon {
      font-size: 48px;
      margin-bottom: 20px;
  }

  .contact-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 15px;
  }

  .contact-info {
      font-size: 16px;
      opacity: 0.9;
  }

  .contact-info a {
      color: inherit;
      text-decoration: none;
  }

  .contact-info a:hover {
      text-decoration: none;
      opacity: 0.8;
  }

  /* Footer */
  footer {
      padding: 80px 0 30px;
      border-top: 1px solid var(--glass-border);
      background: var(--primary-navy);
      color: var(--white);
  }

  body.light-mode footer {
      border-top-color: var(--light-border);
  }

  .footer-content {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      margin-bottom: 50px;
      text-align: right;
  }

  footer a,
  footer p,
  footer li {
      color: rgba(255, 255, 255, 0.95);
  }

  body.light-mode footer {
      background: var(--primary-navy);
      color: var(--white);
  }

  /* Force specific footer headings and links to white for clarity */
  footer .footer-column h3,
  footer .footer-column ul li a,
  footer .footer-column ul li,
  footer .social-link,
  footer .phone-link,
  .elevoria-link {
      color: var(--white) !important;
  }

  /* Footer link hover: slight accent underline for visibility */
  footer .footer-column ul li a:hover {
      color: #e6f4ff !important;
      text-decoration: underline;
  }

  /* Ensure contact info icons/text are visible */
  footer .footer-column ul li a.phone-link {
      font-weight: 700;
  }

  body[dir="ltr"] .footer-content {
      text-align: left;
  }

  .footer-column h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--secondary-teal);
  }

  body.light-mode .footer-column h3 {
      color: var(--primary-navy);
  }

  .footer-column ul {
      list-style: none;
      padding: 0;
  }

  .footer-column ul li {
      margin-bottom: 12px;
  }

  .footer-column ul li a {
      color: var(--white);
      text-decoration: none;
      opacity: 0.8;
      transition: all 0.3s ease;
      font-size: 16px;
  }

  body.light-mode .footer-column ul li a {
      color: var(--light-text);
  }

  .footer-column ul li a:hover {
      opacity: 1;
      color: var(--secondary-teal);
      /* transform: translateX(-5px); */
      display: inline-block;
  }

  body[dir="ltr"] .footer-column ul li a:hover {
      transform: translateX(5px);
  }

  .footer-logo {
      font-size: 40px;
      font-weight: 900;
      color: var(--primary-navy);
      margin-bottom: 20px;
  }

  .footer-text {
      font-size: 16px;
      opacity: 0.8;
      margin-bottom: 20px;
      line-height: 1.6;
  }

  .social-links {
      display: flex;
      gap: 15px;
      margin-top: 20px;
  }

  body[dir="ltr"] .social-links {
      justify-content: flex-start;
  }

  .social-link {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      /* background: var(--glass-bg); */
      border: 1px solid var(--glass-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  /* body.light-mode .social-link {
      background: var(--light-card-bg);
      border-color: var(--light-border);
  } */

  .social-link:hover {
      background: var(--secondary-teal);
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(59, 180, 235, 0.3);
      /* Secondary Blue */
  }

  .footer-bottom {
      text-align: center;
      padding-top: 30px;
      border-top: 1px solid var(--glass-border);
  }

  body.light-mode .footer-bottom {
      border-top-color: var(--light-border);
  }

  .footer-bottom p {
      font-size: 14px;
      opacity: 0.6;
  }

  /* ELEVORIA footer link: appear as normal text (no underline, inherit color) */
  .elevoria-link {
      color: inherit;
      text-decoration: none;
      opacity: 0.9;
      cursor: pointer;
  }

  .elevoria-link:hover,
  .elevoria-link:focus {
      text-decoration: none;
      opacity: 1;
  }

  /* Responsive Design */
  @media (max-width: 1200px) {
      .hero-title {
          font-size: 48px;
      }

      .section-title {
          font-size: 42px;
      }

      .products-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 968px) {
      .nav-center {
          position: fixed;
          top: 0;
          right: -100%;
          width: 350px;
          height: 100vh;
          background: rgba(45, 62, 95, 0.98);
          backdrop-filter: blur(20px);
          flex-direction: column;
          padding: 100px 40px;
          transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          border-left: 1px solid var(--glass-border);
          overflow-y: auto;
          overscroll-behavior: contain;
      }

      body[dir="rtl"] .nav-center {
          right: auto;
          left: -100%;
          border-left: none;
          border-right: 1px solid var(--glass-border);
      }

      body.light-mode .nav-center {
          background: rgba(255, 255, 255, 0.98);
          border-color: var(--light-border);
      }

      /* Ensure mobile slide-out links are visible when light mode is enabled */
      body.light-mode .nav-center .nav-links a {
          color: var(--primary-navy);
      }

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

      body[dir="rtl"] .nav-center.active {
          right: auto;
          left: 0;
      }

      .nav-links {
          flex-direction: column;
          gap: 30px;
      }

      .nav-links a {
          font-size: 24px;
      }

      .hamburger {
          display: flex;
      }

      /* Make each hamburger menu item fill the slide-out panel */
      .nav-center .nav-links a {
          display: block;
          width: 100%;
          padding: 16px 20px;
          box-sizing: border-box;
          font-size: 20px;
          text-align: left;
          color: var(--white);
          background: transparent;
          border-radius: 8px;
      }

      /* optional subtle separators between items */
      .nav-center .nav-links a+a {
          margin-top: 6px;
      }

      /* Make the active slide-out visible and ensure items are easy to tap */
      .nav-center.active {
          right: 0;
          padding-top: 120px;
      }

      .hero-content {
          grid-template-columns: 1fr;
          gap: 50px;
      }

      .hero-title {
          font-size: 36px;
      }

      .hero-buttons {
          flex-direction: column;
      }

      .about-grid,
      .objectives-grid {
          grid-template-columns: 1fr;
      }

      .vision-content {
          grid-template-columns: 1fr;
      }

      .vision-images {
          flex-direction: row;
      }

      .values-grid,
      .why-grid {
          grid-template-columns: 1fr;
      }

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

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

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

      .footer-content {
          grid-template-columns: 1fr 1fr;
          gap: 40px;
      }
  }

  @media (max-width: 580px) {
      .container {
          padding: 0 20px;
      }

      .nav-actions {
          gap: 8px;
          flex-shrink: 0;
      }

      .theme-toggle {
          width: 40px;
          height: 40px;
          font-size: 18px;
      }

      .hamburger {
          display: flex;
      }

      .hero-title {
          font-size: 28px;
      }

      .section-title {
          font-size: 32px;
      }

      .products-grid,
      .team-grid,
      .contact-grid {
          grid-template-columns: 1fr;
      }

      .footer-content {
          grid-template-columns: 1fr;
          gap: 30px;
          text-align: center;
      }

      .footer-column ul li a:hover {
          /* transform: translateX(0); */
      }

      .social-links {
          justify-content: center;
      }

      .vision-card {
          padding: 40px 30px;
      }

      .vision-text {
          font-size: 20px;
      }

      .vision-images {
          flex-direction: column;
      }

      .why-image-placeholder {
          height: 150px;
      }

      .objective-image-placeholder {
          height: 140px;
      }

      .client-logo-placeholder {
          width: 180px;
          height: 180px;
      }
  }

  @media (max-width: 480px) {
      .client-logo-placeholder {
          width: 200px;
          height: 200px;
      }

      .nav-actions {
          gap: 6px;
      }

      .hamburger span {
          width: 25px;
          height: 2px;
      }

      /* Make logo larger and vertically centered inside the navbar on small phones */
      .logo-container {
          gap: 10px;
          padding-right: 6px;
          /* keep it near the right edge */
          height: 48px;
          /* reduced navbar height for small phones */
          align-items: center;
          display: flex;
      }

      .logo-svg {
          width: auto;
          height: 55px;
          max-height: 45px;

      }


      /* Reduce navbar padding to shrink overall nav height and align slide-out */
      nav {
          padding: 8px 0;
      }

      /* Ensure mobile slide-out aligns below the shorter navbar */
      .nav-center {
          top: 48px;
      }
  }

  /* Particle Animation */
  @keyframes particleFade {
      0% {
          opacity: 1;
          transform: scale(1) translateY(0);
      }

      100% {
          opacity: 0;
          transform: scale(0) translateY(-50px);
      }
  }


  /* =========================================
   MOBILE RESPONSIVE FIXES
   ========================================= */
  @media (max-width: 768px) {

      html,
      body {
          height: auto;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          touch-action: pan-y;
      }

      /* Hero: full viewport height on phones (account for fixed nav with padding) */
      .hero-section {
          min-height: 100vh;
          height: 100vh;
          padding: 80px 16px 20px;
          background-attachment: fixed;
          align-items: center;
          box-sizing: border-box;
      }

      .hero-content {
          width: 100%;
          padding: 10px 0;
          box-sizing: border-box;
      }

      /* Increase hero font sizes on mobile for readability */
      .hero-title {
          font-size: clamp(28px, 8.5vw, 10px);
          line-height: 1.12;
      }

      /* .hero-subtitle {
        font-size: clamp(16px, 5.5vw, 24px);
        font-weight: 900;
    } */

      .hero-description {
          font-size: clamp(14px, 4.5vw, 15px);
          line-height: 1.7;
      }

      .hero-buttons .cta-button {
          font-size: 16px;
          padding: 14px 28px;
      }

      /* animated bg: keep fixed but ensure no touch capture */
      .animated-bg {
          pointer-events: none;
      }

      /* Nav slide-out panel */
      .nav-center {
          position: fixed;
          top: 0;
          right: -100%;
          left: auto;
          height: 100vh;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
      }

      body[dir="rtl"] .nav-center {
          right: auto;
          left: -100%;
      }

      /* Swiper: allow horizontal swipe and vertical page scroll */
      .clientsSwiper {
          touch-action: pan-y;
          overscroll-behavior-x: none;
      }
  }

  @media (max-width: 580px) {
      body {
          padding-top: 0;
      }

      .hero-section {
          padding: 80px 12px 30px;
          min-height: 50vh;
      }

      /* .hero-title {
        font-size: clamp(22px, 6vw, 34px) !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .hero-subtitle {
        font-size: clamp(10px, 2.5vw, 14px) !important;
        letter-spacing: 1px !important;
    }

    .hero-description {
        font-size: clamp(12px, 3.2vw, 15px) !important;
        padding: 10px 12px !important;
        margin-bottom: 16px !important;
    } */

      .hero-buttons {
          flex-direction: column !important;
          gap: 10px !important;
      }

      .cta-button {
          padding: 12px 24px !important;
          font-size: 15px !important;
          width: 100%;
      }
  }

  /* Contact section: use primary navy background and white text for all content */
  #contact {
      background: var(--primary-navy) !important;
      color: var(--white) !important;
  }

  #contact .container,
  #contact h2,
  #contact h3,
  #contact p,
  #contact label,
  #contact a {
      color: var(--white) !important;
  }

  #contact .contact-form input,
  #contact .contact-form textarea {
      background: rgba(255, 255, 255, 0.06) !important;
      color: var(--white) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  #contact .contact-form input::placeholder,
  #contact .contact-form textarea::placeholder {
      color: rgba(255, 255, 255, 0.75) !important;
  }

  #contact .glass-card {
      background: rgba(255, 255, 255, 0.04) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* Ensure buttons inside contact remain visible: white border and white text */
  #contact .cta-button,
  #contact button {
      color: var(--white) !important;
      border-color: rgba(255, 255, 255, 0.9) !important;
  }

  /* If there's a submit with white background, invert it for contrast */
  #contact .btn-primary,
  #contact .submit-btn {
      background: var(--white) !important;
      color: var(--primary-navy) !important;
  }

.glass-card:hover,
.product-card:hover,
.vision-card:hover,
.value-card:hover,
.why-card:hover,
.objective-card:hover {
    transform: none !important;
}

/* Make sub text blue in specific sections */

#about p,
#vision p,
#values p,
#why p,
#objectives p,
#products p,
#clients p,
#team p {
    color: var(--primary-navy);
}

/* also target common text classes used in those sections */

#about .about-text,
#vision .vision-text,
#values .value-subtitle,
#why .why-description,
#objectives .objective-text,
#products .product-title,
#clients .client-name,
#team .team-position {
    color: var(--primary-navy);
}

.phone-link {
    text-decoration: none;
    color: inherit;
}

.phone-content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;   /* hover won't break layout */
}

/* Keep numbers LTR */
.phone-number {
    direction: ltr;
    unicode-bidi: embed;
}

/* Emoji placement depending on page direction */
:dir(ltr) .phone-content {
    flex-direction: row;        /* emoji left in English */
}

:dir(rtl) .phone-content {
    flex-direction: row-reverse; /* emoji right in Arabic */
}

/* Hover example */
.phone-link:hover .phone-content {
    color: #00aaff; /* just color change, layout stays correct */
}

.ryal{
      animation: bounce 2s ease-in-out infinite;
}