@font-face {
	font-family: 'Fedra Sans Std BOLD';
src: url('./FEDRASANSSTD-BOLD.OTF') format('opentype');
}

@font-face {
	font-family: 'Fedra Sans Std Medium';
src: url('./FEDRASANSSTD-MEDIUM.OTF') format('opentype');
}

@font-face {
	font-family: 'Fedra Sans Std Book';
 src: url('./FEDRASANSSTD-BOOK.OTF') format('opentype');
}

@font-face {
	font-family: 'Fedra Sans Std Light';
 src: url('./FEDRASANSSTD-LIGHT.OTF') format('opentype');
}

@font-face {
	font-family: 'Fedra Sans Arabic AR Book';
 src: url('./FedraSansArabicAR-Bk.otf') format('opentype');
}
@font-face {
	font-family: 'Fedra Sans Arabic AR Bold';
 src: url('./FedraSansArabicAR-Bld.otf') format('opentype');
}

@font-face {
	font-family: 'Fedra Sans Arabic AR Demi';
    src: url('./FedraSansArabicAR-Demi.otf') format('opentype');
}

@font-face {
	font-family: 'Fedra Sans Arabic AR Light';
    src: url('./FedraSansArabicAR-Lt.otf') format('opentype');
}
@font-face {
	font-family: 'Fedra Sans Arabic AR Medium';
    src: url('./FedraSansArabicAR-Med.otf') format('opentype');
}

:root {
--font-family-latin: 'Fedra Sans Std Book', sans-serif;
  --font-family-latin-bold: 'Fedra Sans Std BOLD', sans-serif;
  --font-family-latin-medium: 'Fedra Sans Std Medium', sans-serif;
  --font-family-latin-light: 'Fedra Sans Std Light', sans-serif;

  --font-family-arabic: 'Fedra Sans Arabic AR Book', sans-serif;
  --font-family-arabic-bold: 'Fedra Sans Arabic AR Bold', sans-serif;
  --font-family-arabic-medium: 'Fedra Sans Arabic AR Medium', sans-serif;
  --font-family-arabic-light: 'Fedra Sans Arabic AR Light', sans-serif;

  /* Default (Light mode) variables */
    --body-bg: #f8f9fa;
    --body-color: #333;
    --modal-bg: #ffffff;
    --modal-title-color: #333;
    --modal-setting-label-color: #333;
    --modal-border-color: #007bff;
    --close-btn-color: #666;
    --close-btn-hover-color: #333;
    --btn-cancel-bg: #ffffff;
    --btn-cancel-border-color: #333;
    --btn-cancel-color: #333;
    --btn-cancel-hover-bg: #f8f9fa;
    --btn-apply-bg: #333;
    --btn-apply-border-color: #333;
    --btn-apply-color: #ffffff;
    --btn-apply-hover-bg: #555;
    --demo-content-bg: #ffffff;
    --demo-content-color: #333;
    --demo-content-h3-color: #333;
    --demo-content-p-color: #666;
    --theme-indicator-bg: rgba(0, 0, 0, 0.1);
    --theme-indicator-color: #333;
    --header-bg: #fff;
    --header-shadow: rgba(0, 0, 0, 0.05);
    --border-color: #EDE5F3;
    --search-bg: #FFFFFF;
    --search-text-color: #000000;
    --search-icon-color: #888;
    --middle-section-bg: #F9FAFC;
    --apply-now-bg: #333;
    --apply-now-color: #ffffff;
    --arabic-btn-color: #333;
    --top-links-color: #000;
    --mobile-button-bg: #e0d9ed;
    --mobile-button-color: #333;
    --mobile-nav-overlay-bg: #F9FAFC;
    --mobile-nav-link-bg: #ffffff;
    --mobile-nav-link-color: #000000;
    --mobile-nav-close-btn-color: #333;
    --apply-now-mobile-bg: #1C1C1C;
    --apply-now-mobile-color: #ffffff;
    --back-button-border: #ccc;
    --button-border: #000;
    --button-color: #000000;
    --button-hover-bg: #87809F;
    --button-hover-color: #FFFFFF;
    --button-hover-border: #87809F;
    --input-group-inset-color: #6b6c7e;
    --suggestions-bg: #EDE5F3;
    --dropdown-item-hover-bg: #EDE5F3;
    --dropdown-item-hover-color: #272833;
    --nav-link-color: #272833;
    --nav-link-active-border: #000;
    --breadcrumb-text-color: #666;
    --breadcrumb-anchor-color: #8B8B8B;
    --breadcrumb-separator-color: #999;
    --navbar-bg: transparent;
    --navbar-text: #000000;
    --navbar-border: #000000;
    --navbar-active-bg: transparent;
    --navbar-active-text: #000000;
    --navbar-active-border: #87809f;
    --navbar-underline: #87809f;
    --scrollbar-track: #eeeeee;
    --scrollbar-thumb: #87809f;
    --mobile-nav-bg: #ffffff;
    --mobile-nav-active-bg: #87809f;
    --mobile-nav-active-text: #ffffff;
    --nav-bar-light-bg: #ffffff; /* For .navigation-bar-light */
    --nav-bar-light-border: #f1f2f5; /* For .navigation-bar-light */

    --footer-bg: #EDE5F3;
    --language-selector-btn-text:#000000;
  }

  .accessibility-dark-mode {
    /* Dark mode variables */
    --body-bg: #1a1a1a;
    --body-color: #e0e0e0;
    --modal-bg: #2d2d2d;
    --modal-title-color: #e0e0e0;
    --modal-setting-label-color: #e0e0e0;
    --modal-border-color: #4a9eff;
    --close-btn-color: #b0b0b0;
    --close-btn-hover-color: #e0e0e0;
    --btn-cancel-bg: #2d2d2d;
    --btn-cancel-border-color: #e0e0e0;
    --btn-cancel-color: #e0e0e0;
    --btn-cancel-hover-bg: #3c3c3c;
    --btn-apply-bg: #555555;
    --btn-apply-border-color: #555555;
    --btn-apply-color: #e0e0e0;
    --btn-apply-hover-bg: #666666;
    --demo-content-bg: #2d2d2d;
    --demo-content-color: #e0e0e0;
    --demo-content-h3-color: #e0e0e0;
    --demo-content-p-color: #b0b0b0;
    --theme-indicator-bg: rgba(255, 255, 255, 0.1);
    --theme-indicator-color: #e0e0e0;
    --header-bg: #2d2d2d;
    --header-shadow: rgba(255, 255, 255, 0.1);
    --border-color: #444444;
    --search-bg: #2d2d2d;
    --search-text-color: #e0e0e0;
    --search-icon-color: #aaaaaa;
    --middle-section-bg: #3c3c3c;
    --apply-now-bg: #555555;
    --apply-now-color: #e0e0e0;
    --arabic-btn-color: #e0e0e0;
    --top-links-color: #e0e0e0;
    --mobile-button-bg: #444444;
    --mobile-button-color: #e0e0e0;
    --mobile-nav-overlay-bg: #3c3c3c;
    --mobile-nav-link-bg: #2d2d2d;
    --mobile-nav-link-color: #e0e0e0;
    --mobile-nav-close-btn-color: #e0e0e0;
    --apply-now-mobile-bg: #555555;
    --apply-now-mobile-color: #e0e0e0;
    --back-button-border: #555555;
    --button-border: #e0e0e0;
    --button-color: #e0e0e0;
    --button-hover-bg: #666666;
    --button-hover-color: #ffffff;
    --button-hover-border: #666666;
    --input-group-inset-color: #aaaaaa;
    --suggestions-bg: #444444;
    --dropdown-item-hover-bg: #444444;
    --dropdown-item-hover-color: #e0e0e0;
    --nav-link-color: #e0e0e0;
    --nav-link-active-border: #e0e0e0;
    --breadcrumb-text-color: #aaaaaa;
    --breadcrumb-anchor-color: #ffffff;
    --breadcrumb-separator-color: #cccccc;
    --navbar-bg: transparent;
    --navbar-text: #ffffff;
    --navbar-border: #ffffff;
    --navbar-active-bg: transparent;
    --navbar-active-text: fff;
    --navbar-active-border: #a8a1c3;
    --navbar-underline: #a8a1c3;
    --scrollbar-track: #333333;
    --scrollbar-thumb: #a8a1c3;
    --mobile-nav-bg: #2c2c2c;
    --mobile-nav-active-bg: #a8a1c3;
    --mobile-nav-active-text: #000000;
    --nav-bar-light-bg: #2c2c2c; /* For .navigation-bar-light */
    --nav-bar-light-border: #444444; /* For .navigation-bar-light */
    --footer-bg: var(--gray-700, #EDE5F3);
  }

  html[dir="ltr"][lang^="en"] body {
    font-family: var(--font-family-latin);
  }

  html[dir="rtl"][lang^="ar"] body {
    font-family: var(--font-family-arabic);
  }

/* English */

 html[dir="ltr"]  h1,
   html[dir="ltr"]  h2,
   html[dir="ltr"]  h3,
   html[dir="ltr"]  h4,
   html[dir="ltr"]  h5,
   html[dir="ltr"]  h6
   html[dir="ltr"] .main-heading,
   html[dir="ltr"] .page-title,
   html[dir="ltr"] .footer-heading,
   html[dir="ltr"] .top-bar-heading{
  font-family: var(--font-family-latin-bold);
}

 html[dir="ltr"] a:hover,
 html[dir="ltr"] a,
 html[dir="ltr"] .subheading,
 html[dir="ltr"] .description,
 html[dir="ltr"] .damj-content p
 html[dir="ltr"]  .middle-box{
  font-family: var(--font-family-latin);
}

 html[dir="ltr"] p,
   html[dir="ltr"] div {
     font-family: var(--font-family-latin);
   }

html[dir="ltr"] a.button,
html[dir="ltr"] .question-text,
html[dir="ltr"] .button,
html[dir="ltr"] .timeline-header h2 {
   font-family: var(--font-family-latin-medium);
}

/* Arabic */
  html[dir="rtl"]  h1,
  html[dir="rtl"]  h2,
  html[dir="rtl"]  h3,
  html[dir="rtl"]  h4,
  html[dir="rtl"]  h5,
  html[dir="rtl"]  h6,
  html[dir="rtl"] .main-heading,
  html[dir="rtl"] .page-title,
  html[dir="rtl"] .footer-heading,
  html[dir="rtl"] .top-bar-heading{
    font-family: var(--font-family-arabic-bold);
  }

  html[dir="rtl"] a:hover,
    html[dir="rtl"] a,
   html[dir="rtl"] .subheading,
   html[dir="rtl"] .description,
  html[dir="rtl"] .damj-content p,
  html[dir="rtl"] .middle-box{
    font-family: var(--font-family-arabic);
  }

   html[dir="rtl"] p,
   html[dir="rtl"] div {
    font-family: var(--font-family-arabic-light);
   }

   html[dir="rtl"] a.button,
   html[dir="rtl"] .question-text,
   html[dir="rtl"] .button,
   html[dir="rtl"] .timeline-header h2 {
      font-family: var(--font-family-arabic-medium);
   }

.navigation-bar-light {
  background-color: var(--body-bg);
  border-color: var(--body-bg);
}
[dir="rtl"] .award-content h2 {
  text-align: right
  }