/* ============================================
   Arabic Typography & Font Definitions
   High-quality Arabic fonts with optimal rendering
   ============================================ */

/* ============================================
   FONT-FACE DECLARATIONS
   Using Noto Sans Arabic (Google Fonts)
   Optimized WOFF2 subsets for Arabic glyphs
   ============================================ */

/* Noto Sans Arabic - Regular (400) */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Arabic');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0870-089F, U+10E60-10E7E, U+1EE00-1EEFF;
}

/* Noto Sans Arabic - Medium (500) */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Noto Sans Arabic');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0870-089F, U+10E60-10E7E, U+1EE00-1EEFF;
}

/* Noto Sans Arabic - SemiBold (600) */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Noto Sans Arabic');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0870-089F, U+10E60-10E7E, U+1EE00-1EEFF;
}

/* Noto Sans Arabic - Bold (700) */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans Arabic');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0870-089F, U+10E60-10E7E, U+1EE00-1EEFF;
}

/* Alternative: Cairo Font (Fallback) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cairo');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0870-089F, U+10E60-10E7E, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Cairo');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0870-089F, U+10E60-10E7E, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Cairo');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0870-089F, U+10E60-10E7E, U+1EE00-1EEFF;
}

/* ============================================
   ARABIC TYPOGRAPHY BASE STYLES
   ============================================ */

/* Font Stack for Arabic */
html[lang="ar"],
html[dir="rtl"] {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI Arabic', 'Arabic Typesetting', 'Tahoma', 'Arial', sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body Typography */
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI Arabic', 'Arabic Typesetting', 'Tahoma', 'Arial', sans-serif;
  font-size: 22px; /* Significantly increased to match English visual size */
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
}

/* ============================================
   HEADINGS - ARABIC OPTIMIZED
   ============================================ */

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI Arabic', 'Arabic Typesetting', 'Tahoma', 'Arial', sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

html[lang="ar"] h1,
html[dir="rtl"] h1 {
  font-size: 3.5rem; /* Significantly increased to match English */
  line-height: 1.25;
  font-weight: 700;
}

html[lang="ar"] h2,
html[dir="rtl"] h2 {
  font-size: 2.75rem; /* Significantly increased to match English */
  line-height: 1.3;
  font-weight: 700;
}

html[lang="ar"] h3,
html[dir="rtl"] h3 {
  font-size: 2.35rem; /* Significantly increased to match English */
  line-height: 1.35;
  font-weight: 600;
}

html[lang="ar"] h4,
html[dir="rtl"] h4 {
  font-size: 2rem; /* Significantly increased to match English */
  line-height: 1.4;
  font-weight: 600;
}

html[lang="ar"] h5,
html[dir="rtl"] h5 {
  font-size: 1.7rem; /* Significantly increased to match English */
  line-height: 1.45;
  font-weight: 600;
}

html[lang="ar"] h6,
html[dir="rtl"] h6 {
  font-size: 1.4rem; /* Significantly increased to match English */
  line-height: 1.5;
  font-weight: 600;
}

/* ============================================
   PARAGRAPH & TEXT STYLES
   ============================================ */

html[lang="ar"] p,
html[dir="rtl"] p {
  font-size: 1.375rem; /* Significantly increased - 22px base */
  line-height: 1.75;
  margin-bottom: 1rem;
  font-weight: 400;
}

html[lang="ar"] .lead,
html[dir="rtl"] .lead {
  font-size: 1.75rem; /* Significantly increased */
  line-height: 1.75;
  font-weight: 400;
}

html[lang="ar"] small,
html[lang="ar"] .small,
html[dir="rtl"] small,
html[dir="rtl"] .small {
  font-size: 1.2rem; /* Significantly increased */
  line-height: 1.65;
}

/* ============================================
   EMPHASIS & STRONG
   ============================================ */

html[lang="ar"] strong,
html[lang="ar"] b,
html[dir="rtl"] strong,
html[dir="rtl"] b {
  font-weight: 700;
}

html[lang="ar"] em,
html[lang="ar"] i,
html[dir="rtl"] em,
html[dir="rtl"] i {
  font-style: normal;
  font-weight: 600;
}

/* ============================================
   LINKS
   ============================================ */

html[lang="ar"] a,
html[dir="rtl"] a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ============================================
   LISTS
   ============================================ */

html[lang="ar"] ul,
html[lang="ar"] ol,
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  line-height: 1.8;
}

html[lang="ar"] li,
html[dir="rtl"] li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

/* ============================================
   BLOCKQUOTE
   ============================================ */

html[lang="ar"] blockquote,
html[dir="rtl"] blockquote {
  font-size: 1.5rem; /* Significantly increased */
  line-height: 1.75;
  font-weight: 500;
  border-inline-start: 4px solid #2e8bc0;
  padding-inline-start: 1.5rem;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* ============================================
   BUTTONS & FORM ELEMENTS
   ============================================ */

html[lang="ar"] button,
html[lang="ar"] .btn,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] .btn,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI Arabic', 'Arabic Typesetting', 'Tahoma', 'Arial', sans-serif;
  line-height: 1.6;
}

html[lang="ar"] button,
html[lang="ar"] .btn,
html[dir="rtl"] button,
html[dir="rtl"] .btn {
  font-weight: 600;
  letter-spacing: 0;
}

/* ============================================
   NAVIGATION & MENU
   ============================================ */

html[lang="ar"] .nav-link,
html[lang="ar"] .menu-item,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .menu-item {
  font-size: 1.5rem !important; /* Much larger for header navigation */
  font-weight: 600;
  line-height: 1.5;
}

/* Header specific navigation */
html[lang="ar"] .header-nav .nav-link,
html[dir="rtl"] .header-nav .nav-link {
  font-size: 1.6rem !important; /* Much larger for main header nav */
  font-weight: 600;
}

/* Brand/Logo text */
html[lang="ar"] .brand-name,
html[lang="ar"] .header-brand h1,
html[dir="rtl"] .brand-name,
html[dir="rtl"] .header-brand h1 {
  font-size: 2.2rem !important; /* Much larger brand name */
}

html[lang="ar"] .brand-tagline,
html[dir="rtl"] .brand-tagline {
  font-size: 1.3rem !important; /* Much larger tagline */
}

/* Dropdown menu items */
html[lang="ar"] .dropdown-item,
html[dir="rtl"] .dropdown-item {
  font-size: 1.4rem !important; /* Much larger dropdown items */
}

/* Header action buttons */
html[lang="ar"] .header-actions .btn,
html[lang="ar"] .header-actions button,
html[dir="rtl"] .header-actions .btn,
html[dir="rtl"] .header-actions button {
  font-size: 1.4rem !important; /* Much larger header buttons */
  padding: 0.7rem 1.8rem !important;
}

/* Language switcher - CRITICAL - Larger for better Arabic readability */
html[lang="ar"] .language-switcher,
html[dir="rtl"] .language-switcher {
  font-size: 20px !important; /* Larger for Arabic */
  font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI Arabic', 'Tahoma', 'Arial', sans-serif !important;
}

html[lang="ar"] .language-switcher-links,
html[dir="rtl"] .language-switcher-links {
  font-size: 20px !important; /* Larger for Arabic */
}

html[lang="ar"] .language-link,
html[dir="rtl"] .language-link {
  font-size: 20px !important; /* Larger for Arabic */
  font-weight: 500 !important;
  padding: 6px 12px !important; /* More padding for larger text */
  font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI Arabic', 'Tahoma', 'Arial', sans-serif !important;
  letter-spacing: 0 !important;
  font-kerning: normal;
  font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1;
}

html[lang="ar"] .language-label-full,
html[dir="rtl"] .language-label-full {
  font-size: 20px !important;
}

html[lang="ar"] .language-label-short,
html[dir="rtl"] .language-label-short {
  font-size: 20px !important;
}

/* Ensure active link has same size */
html[lang="ar"] .language-link-active,
html[dir="rtl"] .language-link-active {
  font-size: 20px !important;
  font-weight: 600 !important;
}

html[lang="ar"] .language-separator,
html[dir="rtl"] .language-separator {
  font-size: 20px !important;
}

/* Override media query for larger screens - Larger */
@media (min-width: 768px) {
  html[lang="ar"] .language-switcher,
  html[dir="rtl"] .language-switcher {
    font-size: 21px !important;
  }
  
  html[lang="ar"] .language-switcher-links,
  html[dir="rtl"] .language-switcher-links {
    font-size: 21px !important;
  }
  
  html[lang="ar"] .language-link,
  html[dir="rtl"] .language-link {
    font-size: 21px !important;
    padding: 7px 13px !important;
  }
  
  html[lang="ar"] .language-label-full,
  html[lang="ar"] .language-label-short,
  html[dir="rtl"] .language-label-full,
  html[dir="rtl"] .language-label-short {
    font-size: 21px !important;
  }
  
  html[lang="ar"] .language-separator,
  html[dir="rtl"] .language-separator {
    font-size: 21px !important;
  }
}

/* Override mobile styles - Larger */
@media (max-width: 767px) {
  html[lang="ar"] .language-switcher,
  html[dir="rtl"] .language-switcher {
    font-size: 18px !important;
  }
  
  html[lang="ar"] .language-switcher-links,
  html[dir="rtl"] .language-switcher-links {
    font-size: 18px !important;
  }
  
  html[lang="ar"] .language-link,
  html[dir="rtl"] .language-link {
    font-size: 18px !important;
    padding: 5px 8px !important;
  }
  
  html[lang="ar"] .language-label-full,
  html[lang="ar"] .language-label-short,
  html[dir="rtl"] .language-label-full,
  html[dir="rtl"] .language-label-short {
    font-size: 18px !important;
  }
  
  html[lang="ar"] .language-separator,
  html[dir="rtl"] .language-separator {
    font-size: 18px !important;
  }
}

/* Mobile navigation */
html[lang="ar"] .mobile-nav .nav-link,
html[dir="rtl"] .mobile-nav .nav-link {
  font-size: 1.6rem !important; /* Much larger mobile nav */
}

/* ============================================
   CARDS & COMPONENTS
   ============================================ */

html[lang="ar"] .card-title,
html[dir="rtl"] .card-title {
  font-weight: 700;
  line-height: 1.4;
}

html[lang="ar"] .card-text,
html[dir="rtl"] .card-text {
  line-height: 1.8;
}

/* ============================================
   TABLES
   ============================================ */

html[lang="ar"] table,
html[dir="rtl"] table {
  font-variant-numeric: tabular-nums;
}

html[lang="ar"] th,
html[dir="rtl"] th {
  font-weight: 700;
  line-height: 1.6;
}

html[lang="ar"] td,
html[dir="rtl"] td {
  line-height: 1.7;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
  html[lang="ar"] h1,
  html[dir="rtl"] h1 {
    font-size: 2.75rem; /* Significantly increased */
  }

  html[lang="ar"] h2,
  html[dir="rtl"] h2 {
    font-size: 2.25rem; /* Significantly increased */
  }

  html[lang="ar"] h3,
  html[dir="rtl"] h3 {
    font-size: 2rem; /* Significantly increased */
  }

  html[lang="ar"] h4,
  html[dir="rtl"] h4 {
    font-size: 1.7rem; /* Significantly increased */
  }

  html[lang="ar"] h5,
  html[dir="rtl"] h5 {
    font-size: 1.5rem; /* Significantly increased */
  }

  html[lang="ar"] body,
  html[dir="rtl"] body {
    font-size: 20px; /* Significantly increased */
  }
}

@media (max-width: 480px) {
  html[lang="ar"] h1,
  html[dir="rtl"] h1 {
    font-size: 2.35rem; /* Significantly increased */
  }

  html[lang="ar"] h2,
  html[dir="rtl"] h2 {
    font-size: 2rem; /* Significantly increased */
  }

  html[lang="ar"] body,
  html[dir="rtl"] body {
    font-size: 19px; /* Significantly increased */
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Prevent font flash - use system fonts while loading */
@supports (font-display: swap) {
  html[lang="ar"],
  html[dir="rtl"] {
    font-display: swap;
  }
}

/* Optimize text rendering */
html[lang="ar"] *,
html[dir="rtl"] * {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ============================================
   PREVENT CUMULATIVE LAYOUT SHIFT (CLS)
   ============================================ */

/* Set size-adjust to match Noto Sans Arabic metrics */
@font-face {
  font-family: 'Arabic Fallback';
  src: local('Tahoma'), local('Arial');
  size-adjust: 102%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 0%;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Improve readability for visually impaired */
html[lang="ar"] .text-high-contrast,
html[dir="rtl"] .text-high-contrast {
  font-weight: 600;
  line-height: 2;
}

/* Dyslexia-friendly spacing */
html[lang="ar"] .text-accessible,
html[dir="rtl"] .text-accessible {
  line-height: 2;
  letter-spacing: 0.05em;
  word-spacing: 0.16em;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Font Weight Utilities */
.fw-light-ar { font-weight: 400 !important; }
.fw-normal-ar { font-weight: 500 !important; }
.fw-medium-ar { font-weight: 600 !important; }
.fw-bold-ar { font-weight: 700 !important; }

/* Line Height Utilities */
.lh-tight-ar { line-height: 1.4 !important; }
.lh-normal-ar { line-height: 1.7 !important; }
.lh-relaxed-ar { line-height: 1.9 !important; }

/* Font Size Utilities */
.fs-sm-ar { font-size: 1.125rem !important; } /* Significantly increased */
.fs-base-ar { font-size: 1.375rem !important; } /* Significantly increased */
.fs-lg-ar { font-size: 1.5rem !important; } /* Significantly increased */
.fs-xl-ar { font-size: 1.7rem !important; } /* Significantly increased */
.fs-2xl-ar { font-size: 2rem !important; } /* Significantly increased */
.fs-3xl-ar { font-size: 2.5rem !important; } /* Significantly increased */

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  html[lang="ar"],
  html[lang="ar"] *,
  html[dir="rtl"],
  html[dir="rtl"] * {
    font-family: 'Noto Sans Arabic', 'Tahoma', 'Arial', sans-serif !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html[lang="ar"] body,
  html[dir="rtl"] body {
    line-height: 1.6;
  }
}

/* ============================================
   ABOUT US PAGE - ARABIC FONT SIZES
   ============================================ */

/* Page Header */
html[lang="ar"] .page-header .page-title,
html[dir="rtl"] .page-header .page-title {
  font-size: 3.5rem !important;
  line-height: 1.25 !important;
}

html[lang="ar"] .page-header .page-subtitle,
html[dir="rtl"] .page-header .page-subtitle {
  font-size: 1.75rem !important;
  line-height: 1.5 !important;
}

/* Navigation Tabs */
html[lang="ar"] .nav-tabs .nav-tab,
html[dir="rtl"] .nav-tabs .nav-tab {
  font-size: 1.25rem !important;
  padding: 1rem 1.5rem !important;
}

html[lang="ar"] .nav-tabs .nav-tab span,
html[dir="rtl"] .nav-tabs .nav-tab span {
  font-size: 1.25rem !important;
}

/* Section Headers */
html[lang="ar"] .section-header h1,
html[lang="ar"] .about-content-card h1,
html[dir="rtl"] .section-header h1,
html[dir="rtl"] .about-content-card h1 {
  font-size: 3rem !important;
  line-height: 1.3 !important;
}

html[lang="ar"] .section-header h2,
html[lang="ar"] .about-content-card h2,
html[dir="rtl"] .section-header h2,
html[dir="rtl"] .about-content-card h2 {
  font-size: 2.5rem !important;
  line-height: 1.35 !important;
}

html[lang="ar"] .section-header h3,
html[lang="ar"] .about-content-card h3,
html[dir="rtl"] .section-header h3,
html[dir="rtl"] .about-content-card h3 {
  font-size: 2rem !important;
  line-height: 1.4 !important;
}

/* Content Text */
html[lang="ar"] .content-text p,
html[lang="ar"] .about-content-card p,
html[dir="rtl"] .content-text p,
html[dir="rtl"] .about-content-card p {
  font-size: 1.5rem !important;
  line-height: 1.8 !important;
  margin-bottom: 1.5rem !important;
}

/* Statistics Section */
html[lang="ar"] .stats-title,
html[dir="rtl"] .stats-title {
  font-size: 3rem !important;
  line-height: 1.3 !important;
}

html[lang="ar"] .stat-card .stat-number,
html[lang="ar"] .stat-item .stat-number,
html[dir="rtl"] .stat-card .stat-number,
html[dir="rtl"] .stat-item .stat-number {
  font-size: 4rem !important;
  line-height: 1.2 !important;
}

html[lang="ar"] .stat-card .stat-label,
html[lang="ar"] .stat-item .stat-label,
html[dir="rtl"] .stat-card .stat-label,
html[dir="rtl"] .stat-item .stat-label {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}

/* Value Cards, Vision Cards, Leadership Cards, etc. */
html[lang="ar"] .value-card h3,
html[lang="ar"] .vision-card h3,
html[lang="ar"] .leader-card h3,
html[lang="ar"] .culture-card h3,
html[lang="ar"] .career-card h3,
html[lang="ar"] .contact-card h3,
html[dir="rtl"] .value-card h3,
html[dir="rtl"] .vision-card h3,
html[dir="rtl"] .leader-card h3,
html[dir="rtl"] .culture-card h3,
html[dir="rtl"] .career-card h3,
html[dir="rtl"] .contact-card h3 {
  font-size: 1.75rem !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
}

html[lang="ar"] .value-card p,
html[lang="ar"] .vision-card p,
html[lang="ar"] .leader-card p,
html[lang="ar"] .culture-card p,
html[lang="ar"] .career-card p,
html[lang="ar"] .contact-card p,
html[dir="rtl"] .value-card p,
html[dir="rtl"] .vision-card p,
html[dir="rtl"] .leader-card p,
html[dir="rtl"] .culture-card p,
html[dir="rtl"] .career-card p,
html[dir="rtl"] .contact-card p {
  font-size: 1.35rem !important;
  line-height: 1.75 !important;
}

/* CTA Sections */
html[lang="ar"] .careers-cta h2,
html[lang="ar"] .contact-cta h2,
html[dir="rtl"] .careers-cta h2,
html[dir="rtl"] .contact-cta h2 {
  font-size: 2.5rem !important;
  line-height: 1.35 !important;
}

html[lang="ar"] .careers-cta p,
html[lang="ar"] .contact-cta p,
html[dir="rtl"] .careers-cta p,
html[dir="rtl"] .contact-cta p {
  font-size: 1.5rem !important;
  line-height: 1.75 !important;
}

/* Buttons in About Us */
html[lang="ar"] .cta-buttons .btn,
html[dir="rtl"] .cta-buttons .btn {
  font-size: 1.35rem !important;
  padding: 1rem 2.5rem !important;
}

/* Values Grid and Vision Grid */
html[lang="ar"] .values-grid,
html[lang="ar"] .vision-mission-grid,
html[lang="ar"] .leadership-grid,
html[lang="ar"] .culture-grid,
html[lang="ar"] .careers-grid,
html[lang="ar"] .contact-grid,
html[dir="rtl"] .values-grid,
html[dir="rtl"] .vision-mission-grid,
html[dir="rtl"] .leadership-grid,
html[dir="rtl"] .culture-grid,
html[dir="rtl"] .careers-grid,
html[dir="rtl"] .contact-grid {
  gap: 2rem !important;
}

/* Responsive adjustments for About Us */
@media (max-width: 768px) {
  html[lang="ar"] .page-header .page-title,
  html[dir="rtl"] .page-header .page-title {
    font-size: 2.75rem !important;
  }

  html[lang="ar"] .page-header .page-subtitle,
  html[dir="rtl"] .page-header .page-subtitle {
    font-size: 1.5rem !important;
  }

  html[lang="ar"] .section-header h1,
  html[lang="ar"] .about-content-card h1,
  html[dir="rtl"] .section-header h1,
  html[dir="rtl"] .about-content-card h1 {
    font-size: 2.5rem !important;
  }

  html[lang="ar"] .content-text p,
  html[lang="ar"] .about-content-card p,
  html[dir="rtl"] .content-text p,
  html[dir="rtl"] .about-content-card p {
    font-size: 1.35rem !important;
  }

  html[lang="ar"] .stat-card .stat-number,
  html[lang="ar"] .stat-item .stat-number,
  html[dir="rtl"] .stat-card .stat-number,
  html[dir="rtl"] .stat-item .stat-number {
    font-size: 3.5rem !important;
  }

  html[lang="ar"] .nav-tabs .nav-tab,
  html[dir="rtl"] .nav-tabs .nav-tab {
    font-size: 1.125rem !important;
    padding: 0.875rem 1.25rem !important;
  }
}

@media (max-width: 480px) {
  html[lang="ar"] .page-header .page-title,
  html[dir="rtl"] .page-header .page-title {
    font-size: 2.25rem !important;
  }

  html[lang="ar"] .section-header h1,
  html[lang="ar"] .about-content-card h1,
  html[dir="rtl"] .section-header h1,
  html[dir="rtl"] .about-content-card h1 {
    font-size: 2rem !important;
  }

  html[lang="ar"] .content-text p,
  html[lang="ar"] .about-content-card p,
  html[dir="rtl"] .content-text p,
  html[dir="rtl"] .about-content-card p {
    font-size: 1.25rem !important;
  }

  html[lang="ar"] .stat-card .stat-number,
  html[lang="ar"] .stat-item .stat-number,
  html[dir="rtl"] .stat-card .stat-number,
  html[dir="rtl"] .stat-item .stat-number {
    font-size: 3rem !important;
  }
}

/* ============================================
   HOME PAGE DEMO SECTION - ARABIC FONT SIZES
   ============================================ */

/* Demo section title and description */
html[lang="ar"] .demo-section h2,
html[lang="ar"] .demo-section .section-title,
html[dir="rtl"] .demo-section h2,
html[dir="rtl"] .demo-section .section-title {
  font-size: 2.75rem !important;
  line-height: 1.3 !important;
}

html[lang="ar"] .demo-section p,
html[lang="ar"] .demo-section .section-description,
html[dir="rtl"] .demo-section p,
html[dir="rtl"] .demo-section .section-description {
  font-size: 1.5rem !important;
  line-height: 1.75 !important;
}

/* Demo buttons/pills */
html[lang="ar"] .demo-pill,
html[lang="ar"] .demo-button,
html[lang="ar"] .pill-button,
html[dir="rtl"] .demo-pill,
html[dir="rtl"] .demo-button,
html[dir="rtl"] .pill-button {
  font-size: 1.25rem !important;
  padding: 0.75rem 1.5rem !important;
}

/* Demo cards */
html[lang="ar"] .demo-card h3,
html[lang="ar"] .demo-card .card-title,
html[dir="rtl"] .demo-card h3,
html[dir="rtl"] .demo-card .card-title {
  font-size: 1.75rem !important;
  line-height: 1.4 !important;
}

html[lang="ar"] .demo-card p,
html[lang="ar"] .demo-card .card-text,
html[dir="rtl"] .demo-card p,
html[dir="rtl"] .demo-card .card-text {
  font-size: 1.35rem !important;
  line-height: 1.7 !important;
}

/* Interactive demo buttons */
html[lang="ar"] .interactive-demo button,
html[lang="ar"] .interactive-demo .btn,
html[dir="rtl"] .interactive-demo button,
html[dir="rtl"] .interactive-demo .btn {
  font-size: 1.25rem !important;
  padding: 0.75rem 1.75rem !important;
}

/* Demo labels and tags */
html[lang="ar"] .demo-label,
html[lang="ar"] .demo-tag,
html[lang="ar"] .badge,
html[dir="rtl"] .demo-label,
html[dir="rtl"] .demo-tag,
html[dir="rtl"] .badge {
  font-size: 1.25rem !important;
}

/* ============================================
   END OF ARABIC FONTS STYLESHEET
   ============================================ */

/* ============================================
   INTERACTIVE DEMOS (actual classes) - ARABIC OVERRIDES
   Force override of inline page styles in Views/Home/Index.cshtml
   ============================================ */
html[lang="ar"] .interactive-demos-section .section-header h2,
html[dir="rtl"] .interactive-demos-section .section-header h2 {
  font-size: 3rem !important;
  line-height: 1.3 !important;
}

html[lang="ar"] .interactive-demos-section .section-header p,
html[dir="rtl"] .interactive-demos-section .section-header p {
  font-size: 1.5rem !important;
  line-height: 1.75 !important;
}

/* Tabs/Pills (desktop + mobile) */
html[lang="ar"] .interactive-demos-section .demo-tab,
html[dir="rtl"] .interactive-demos-section .demo-tab,
html[lang="ar"] .interactive-demos-section .mobile-demo-tab,
html[dir="rtl"] .interactive-demos-section .mobile-demo-tab {
  font-size: 1.5rem !important;
  padding: 1rem 1.75rem !important;
}

/* When demo tabs are inside slider */
html[lang="ar"] .interactive-demos-section .slider-slides .demo-tab,
html[dir="rtl"] .interactive-demos-section .slider-slides .demo-tab {
  font-size: 1.5rem !important;
}

@media (min-width: 1024px) {
  html[lang="ar"] .interactive-demos-section .demo-tab,
  html[dir="rtl"] .interactive-demos-section .demo-tab {
    font-size: 1.55rem !important;
    padding: 1.05rem 1.9rem !important;
  }
}

/* Buttons inside the demos area */
html[lang="ar"] .interactive-demos-section .btn,
html[dir="rtl"] .interactive-demos-section .btn,
html[lang="ar"] .interactive-demo .btn,
html[dir="rtl"] .interactive-demo .btn {
  font-size: 1.4rem !important;
  padding: 0.9rem 1.75rem !important;
  color: #0b1029 !important; /* ensure readable on light buttons */
}

/* High-contrast fix for white/transparent buttons on dark backgrounds (both languages) */
.interactive-demos-section .btn,
.interactive-demo .btn,
.mobile-ecosystem-product-button {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.interactive-demos-section .btn.btn-light,
.interactive-demo .btn.btn-light,
.interactive-demos-section .btn[style*="background: rgba(255, 255, 255"],
.interactive-demo .btn[style*="background: rgba(255, 255, 255"],
.mobile-ecosystem-product-button[style*="background: rgba(255, 255, 255"] {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0b1029 !important;
}

/* Ensure text inside white chips/pills remains dark */
.demo-tab,
.mobile-demo-tab,
.mobile-ecosystem-product-button {
  color: #e6eefc;
}

.demo-tab.active,
.mobile-demo-tab.active,
.mobile-ecosystem-product-button.active {
  color: #ffffff !important;
}

/* Layout gap fixes for Arabic mode */
html[lang="ar"] #main-content,
html[dir="rtl"] #main-content {
  /* Remove top white gap by using padding instead of margin on content wrapper */
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}

/* Hero section: eliminate collapsed heading margins that create a top gap */
html[lang="ar"] .hero-section-enhanced,
html[dir="rtl"] .hero-section-enhanced {
  /* Offset for fixed header while keeping hero background under header */
  padding-top: 80px !important;
  margin-top: 0 !important;
}

html[lang="ar"] .hero-section-enhanced .hero-text > *:first-child,
html[dir="rtl"] .hero-section-enhanced .hero-text > *:first-child,
html[lang="ar"] .hero-title-dynamic,
html[dir="rtl"] .hero-title-dynamic,
html[lang="ar"] .hero-subtitle-dynamic,
html[dir="rtl"] .hero-subtitle-dynamic,
html[lang="ar"] .hero-description-dynamic,
html[dir="rtl"] .hero-description-dynamic {
  margin-top: 0 !important;
}

/* Remove unintended gaps before first and after last sections in Arabic */
html[lang="ar"] main > section:first-of-type,
html[dir="rtl"] main > section:first-of-type {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

html[lang="ar"] main > section:last-of-type,
html[dir="rtl"] main > section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Footer top gap fix */
html[lang="ar"] .enterprise-footer,
html[dir="rtl"] .enterprise-footer {
  margin-top: 0 !important; /* remove extra gap above footer */
  font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI Arabic', 'Tahoma', 'Arial', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Neutralize global utilities that might add big top margins in Arabic */
html[lang="ar"] .m40,
html[dir="rtl"] .m40 {
  margin-top: 20px !important;
}

/* Arabic footer typography boosts */
html[lang="ar"] .enterprise-footer .section-title,
html[dir="rtl"] .enterprise-footer .section-title {
  font-size: 1.8rem !important;
}

html[lang="ar"] .enterprise-footer .footer-links a,
html[dir="rtl"] .enterprise-footer .footer-links a {
  font-size: 1.35rem !important;
  line-height: 1.8 !important;
}

html[lang="ar"] .enterprise-footer .contact-item,
html[dir="rtl"] .enterprise-footer .contact-item {
  font-size: 1.35rem !important;
}

html[lang="ar"] .enterprise-footer .brand-tagline,
html[dir="rtl"] .enterprise-footer .brand-tagline,
html[lang="ar"] .enterprise-footer .company-description,
html[dir="rtl"] .enterprise-footer .company-description {
  font-size: 1.3rem !important;
  line-height: 1.8 !important;
}

html[lang="ar"] .enterprise-footer .social-link span,
html[dir="rtl"] .enterprise-footer .social-link span {
  font-size: 1.25rem !important;
}

html[lang="ar"] .enterprise-footer .newsletter-signup h5,
html[dir="rtl"] .enterprise-footer .newsletter-signup h5 {
  font-size: 1.45rem !important;
}

html[lang="ar"] .enterprise-footer .newsletter-signup p,
html[dir="rtl"] .enterprise-footer .newsletter-signup p,
html[lang="ar"] .enterprise-footer .footer-legal a,
html[dir="rtl"] .enterprise-footer .footer-legal a,
html[lang="ar"] .enterprise-footer .copyright p,
html[dir="rtl"] .enterprise-footer .copyright p {
  font-size: 1.2rem !important;
}