@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
.dga-btn {
  min-width: max-content;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*@if $dir == ltr {
}
@else if $dir == rtl {
}*/
/* 

SINGLE BREAKBPOINT


max-width: 0px
	@include media-breakpoint-only(xs) { ... }
max-width: 575.98px
	@include media-breakpoint-only(sm) { ... }
max-width: 767.98px	
	@include media-breakpoint-only(md) { ... }
max-width: 991.98px		
	@include media-breakpoint-only(lg) { ... }
max-width: 1199.98px	
	@include media-breakpoint-only(xl) { ... }
max-width: 1399.98px	
	@include media-breakpoint-only(xxl) { ... }


MLUTI BREAKPOINT

	@include media-breakpoint-between(xs, sm) { ... }
	@include media-breakpoint-between(sm, md) { ... }
	@include media-breakpoint-between(md, lg) { ... }
	@include media-breakpoint-between(lg, xl) { ... }
	@include media-breakpoint-between(xl, xxl) { ... }

*/
/*=================== PRIMITIVES ===================*/
:root {
  /*========== COLORS ==========*/
  /*---- Base ----*/
  --white: #FFFFFF;
  --black: #000000;
  --icon-default: #161616;
  /*---- Primary SA Flag ----*/
  --SAFlag-25: #F7FDF9;
  --SAFlag-50: #F3FCF6;
  --SAFlag-100: #DFF6E7;
  --SAFlag-200: #B8EACB;
  --SAFlag-300: #88D8AD;
  --SAFlag-400: #54C08A;
  --SAFlag-500: #25935F;
  --SAFlag-600: #1B8354;
  --SAFlag-700: #166A45;
  --SAFlag-800: #14573A;
  --SAFlag-900: #104631;
  --SAFlag-950: #092A1E;
  --SAFlag-primary: var(--SAFlag-600);
  /*---- Secondary Gold ----*/
  --secondary-gold-25: #FFFEF7;
  --secondary-gold-50: #FFFEF2;
  --secondary-gold-100: #FFFCE6;
  --secondary-gold-200: #FCF3BD;
  --secondary-gold-300: #FAE996;
  --secondary-gold-400: #F7D54D;
  --secondary-gold-500: #F5BD02;
  --secondary-gold-600: #DBA102;
  --secondary-gold-700: #B87B02;
  --secondary-gold-800: #945C01;
  --secondary-gold-900: #6E3C00;
  --secondary-gold-950: #472400;
  --secondary-gold-primary: var(--secondary-gold-600);
  /*---- Tertiary Lavendar ----*/
  --tertiary-lavendar-25: #FEFCFF;
  --tertiary-lavendar-50: #F9F5FA;
  --tertiary-lavendar-100: #F2E9F5;
  --tertiary-lavendar-200: #E1CCE8;
  --tertiary-lavendar-300: #CCADD9;
  --tertiary-lavendar-400: #A57BBA;
  --tertiary-lavendar-500: #80519F;
  --tertiary-lavendar-600: #6D428F;
  --tertiary-lavendar-700: #532D75;
  --tertiary-lavendar-800: #3D1D5E;
  --tertiary-lavendar-900: #281047;
  --tertiary-lavendar-950: #16072E;
  --tertiary-lavendar-primary: var(--tertiary-lavendar-500);
  /*---- Backgrounds ----*/
  --background-white: #FFFFFF;
  --background-body: #F9FAFB;
  --background-topbar: var(--background-primary);
  --background-menu: #FFFFFF;
  --background-card: #FFFFFF;
  --background-oncolor: #FFFFFF;
  --background-black: #161616;
  --background-neutral-800: #1F2A37;
  --background-neutral-400: #9DA4AE;
  --background-neutral-300: #D2D6DB;
  --background-neutral-200: #E5E7EB;
  --background-neutral-100: #F3F4F6;
  --background-neutral-50: #F9FAFB;
  --background-neutral-25: #FCFCFD;
  --background-primary: var(--SAFlag-600);
  --background-primary-400: var(--SAFlag-400);
  --background-primary-200: var(--SAFlag-200);
  --background-primary-50: var(--SAFlag-50);
  --background-primary-25: var(--SAFlag-25);
  --background-secondary: var(--secondary-gold-primary);
  --background-secondary-50: var(--secondary-gold-50);
  --background-secondary-25: var(--secondary-gold-25);
  --background-tertiary: var(--tertiary-lavendar-600);
  --background-tertiary-50: var(--tertiary-lavendar-50);
  --background-tertiary-25: var(--tertiary-lavendar-25);
  --background-success: var(--green-600);
  --background-success-50: var(--green-50);
  --background-success-25: var(--green-25);
  --background-info: var(--blue-600);
  --background-info-50: var(--blue-50);
  --background-info-25: var(--blue-25);
  --background-warning: var(--yellow-600);
  --background-warning-50: var(--yellow-50);
  --background-warning-25: var(--yellow-25);
  --background-error: var(--red-600);
  --background-error-50: var(--red-50);
  --background-error-25: var(--red-25);
  --background-SA-Flag: var(--green-900);
  --background-SA-Flag-50: var(--green-50);
  --background-SA-Flag-25: var(--green-25);
  --background-notification-white: var(--white);
  --background-nav-header: var(---SAFlag-800);
  /*---- Neutral ----*/
  --neutral-25: #FCFCFD;
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D2D6DB;
  --neutral-400: #9DA4AE;
  --neutral-500: #6C737F;
  --neutral-600: #4D5761;
  --neutral-700: #384250;
  --neutral-800: #1F2A37;
  --neutral-900: #111927;
  --neutral-950: #0D121C;
  /*---- Green ----*/
  --green-25: #F6FEF9;
  --green-50: #ECFDF3;
  --green-100: #DCFAE6;
  --green-200: #ABEFC6;
  --green-300: #75E0A7;
  --green-400: #47CD89;
  --green-500: #17B26A;
  --green-600: #079455;
  --green-700: #067647;
  --green-800: #085D3A;
  --green-900: #074D31;
  --green-950: #053321;
  /*---- blue ----*/
  --blue-25: #F5FAFF;
  --blue-50: #EFF8FF;
  --blue-100: #D1E9FF;
  --blue-200: #B2DDFF;
  --blue-300: #84CAFF;
  --blue-400: #53B1FD;
  --blue-500: #2E90FA;
  --blue-600: #1570EF;
  --blue-700: #175CD3;
  --blue-800: #1849A9;
  --blue-900: #194185;
  --blue-950: #102A56;
  /*---- yellow ----*/
  --yellow-25: #FFFCF5;
  --yellow-50: #FFFAEB;
  --yellow-100: #FEF0C7;
  --yellow-200: #FEDF89;
  --yellow-300: #FEC84B;
  --yellow-400: #FDB022;
  --yellow-500: #F79009;
  --yellow-600: #DC6803;
  --yellow-700: #B54708;
  --yellow-800: #93370D;
  --yellow-900: #7A2E0E;
  --yellow-950: #4E1D09;
  /*---- red ----*/
  --red-25: #FFFBFA;
  --red-50: #FEF3F2;
  --red-100: #FEE4E2;
  --red-200: #FECDCA;
  --red-300: #FDA29B;
  --red-400: #F97066;
  --red-500: #F04438;
  --red-600: #D92D20;
  --red-700: #B42318;
  --red-800: #912018;
  --red-900: #7A271A;
  --red-950: #55160C;
  /*---- Alpha-white ----*/
  --alpha-white-0: rgba(255,255,255, 0.0);
  --alpha-white-10: rgba(255,255,255, 0.1);
  --alpha-white-20: rgba(255,255,255, 0.2);
  --alpha-white-30: rgba(255,255,255, 0.3);
  --alpha-white-40: rgba(255,255,255, 0.4);
  --alpha-white-50: rgba(255,255,255, 0.5);
  --alpha-white-60: rgba(255,255,255, 0.6);
  --alpha-white-70: rgba(255,255,255, 0.7);
  --alpha-white-80: rgba(255,255,255, 0.8);
  --alpha-white-90: rgba(255,255,255, 0.9);
  --alpha-white-100: rgba(255,255,255, 1.0);
  --alpha-white-900: rgba(255,255,255, 0);
  /*---- alpha-black ----*/
  --alpha-black-0: rgba(0,0,0, 0.0);
  --alpha-black-10: rgba(0,0,0, 0.1);
  --alpha-black-20: rgba(0,0,0, 0.2);
  --alpha-black-30: rgba(0,0,0, 0.3);
  --alpha-black-40: rgba(0,0,0, 0.4);
  --alpha-black-50: rgba(0,0,0, 0.5);
  --alpha-black-60: rgba(0,0,0, 0.6);
  --alpha-black-70: rgba(0,0,0, 0.7);
  --alpha-black-80: rgba(0,0,0, 0.8);
  --alpha-black-90: rgba(0,0,0, 0.9);
  --alpha-black-100: rgba(0,0,0, 1.0);
  /*---- alpha-primary ----*/
  --alpha-primary-10: rgba(27,131,84, 0.1);
  --alpha-primary-20: rgba(27,131,84, 0.2);
  --alpha-primary-30: rgba(27,131,84, 0.3);
  --alpha-primary-40: rgba(27,131,84, 0.4);
  --alpha-primary-50: rgba(27,131,84, 0.5);
  --alpha-primary-60: rgba(27,131,84, 0.6);
  --alpha-primary-70: rgba(27,131,84, 0.7);
  --alpha-primary-80: rgba(27,131,84, 0.8);
  --alpha-primary-90: rgba(27,131,84, 0.9);
  --alpha-primary-100: var(--SAFlag-primary);
  /*---- alpha-yellow ----*/
  --alpha-yellow-10: rgba(220,104,3, 0.1);
  --alpha-yellow-20: rgba(220,104,3, 0.2);
  --alpha-yellow-30: rgba(220,104,3, 0.3);
  --alpha-yellow-40: rgba(220,104,3, 0.4);
  --alpha-yellow-50: rgba(220,104,3, 0.5);
  --alpha-yellow-60: rgba(220,104,3, 0.6);
  --alpha-yellow-70: rgba(220,104,3, 0.7);
  --alpha-yellow-80: rgba(220,104,3, 0.8);
  --alpha-yellow-90: rgba(220,104,3, 0.9);
  --alpha-yellow-100: rgba(220,104,3, 1.0);
  /*---- alpha-red ----*/
  --alpha-red-10: rgba(217,45,10, 0.1);
  --alpha-red-20: rgba(217,45,10, 0.2);
  /*---- alpha-blue ----*/
  --alpha-blue-10: rgba(21,112,239, 0.1);
  --alpha-blue-20: rgba(21,112,239, 0.2);
  /*---- alpha-green ----*/
  --alpha-green-10: rgba(7,148,85, 0.1);
  --alpha-green-20: rgba(7,148,85, 0.2);
  /*========== SPACING ==========*/
  --spacing-0: 0px;
  --spacing-0_5: 2px;
  --spacing-1: 4px;
  --spacing-1_5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-40: 160px;
  --spacing-48: 192px;
  --spacing-56: 224px;
  --spacing-64: 256px;
  --spacing-96: 284px;
  --spacing-80: 320px;
  --spacing-120: 480px;
  --spacing-140: 560px;
  --spacing-160: 640px;
  --spacing-180: 720px;
  --spacing-192: 768px;
  --spacing-256: 1024px;
  --spacing-320: 1280px;
  --spacing-360: 1440px;
  --spacing-400: 1600px;
  --spacing-480: 1920px;
  /*========== RADIUS ==========*/
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-9999: 99999px;
  --card-radius: var(--spacing-4);
  --radius-none: var(--radius-0);
  --radius-xs: var(--radius-2);
  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-8);
  --radius-lg: var(--radius-16);
  --radius-xl: var(--radius-24);
  --radius-full: var(--radius-9999);
  /*========== TEXT ==========*/
  --text-default: var(--black);
  --text-primary: var(--SAFlag-primary);
  --text-secondary: var(--secondary-gold-primary);
  --text-tertiary: var(--tertiary-lavendar-primary);
  --text-primary-sa-flag: var(--SAFlag-800);
  --text-display: var(--neutral-800);
  --text-primary-paragraph: var(--neutral-700);
  --text-secondary-paragraph: var(--neutral-500);
  --text-oncolor-primary: var(--white);
  --text-oncolor-secondary: var(--alpha-white-80);
  --text-oncolor-tertiary: var(--alpha-white-70);
  --text-success: var(--green-700);
  --text-info: var(--blue-700);
  --text-warning: var(--yellow-700);
  --text-error: var(--red-700);
  --text-primary-light: var(--SAFlag-300);
  --text-secondary-light: var(--secondary-gold-300);
  --text-tertiary-light: var(--tertiary-lavendar-300);
}

:root {
  /* Typography - Size */
  --font-size-display: var*--;
  --font-size-h1: 32px;
  --font-size-h2: 28px;
  --font-size-h3: 26px;
  --font-size-h4: 22px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;
  --font-size-base: 16px;
  --font-size-s: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;
  /* Typography - Weight */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  /* Color - Primary */
  --color-primary: #1B8354;
  --color-primary-25: #F7FDF9;
  --color-primary-50: #F3FCF6;
  --color-primary-100: #DFF6E7;
  --color-primary-200: #B8EACB;
  --color-primary-300: #88D8AD;
  --color-primary-400: #54C08A;
  --color-primary-500: #25935F;
  --color-primary-600: #1B8354;
  --color-primary-700: #166A45;
  --color-primary-800: #14573A;
  --color-primary-900: #104631;
  --color-primary-950: #092A1E;
  --color-primary-hover: #1B8354;
  --color-primary-selected: rgba(20, 110, 245, .12);
  --color-primary-lightest: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
  /* Color - Secondary (GOLD) */
  --color-secondary: #F5BD02;
  --color-secondary-25: #FFFEF7;
  --color-secondary-50: #FFFEF2;
  --color-secondary-100: #FFFCE6;
  --color-secondary-200: #FCF3BD;
  --color-secondary-300: #FAE996;
  --color-secondary-400: #F7D54D;
  --color-secondary-500: #F5BD02;
  --color-secondary-600: #DBA102;
  --color-secondary-700: #B87B02;
  --color-secondary-800: #945C01;
  --color-secondary-000: #6E3C00;
  --color-secondary-950: #472400;
  /* Color - Secondary Lavender) */
  --color-secondary-lavender: #80519F;
  --color-secondary-lavender-25: #FEFCFF;
  --color-secondary-lavender-50: #F9F5FA;
  --color-secondary-lavender-100: #F2E9F5;
  --color-secondary-lavender-200: #E1CCE8;
  --color-secondary-lavender-300: #CCADD9;
  --color-secondary-lavender-400: #A57BBA;
  --color-secondary-lavender-500: #80519F;
  --color-secondary-lavender-600: #6D428F;
  --color-secondary-lavender-700: #532D75;
  --color-secondary-lavender-800: #3D1D5E;
  --color-secondary-lavender-000: #281047;
  --color-secondary-lavender-950: #472400;
  /* Color - Extended */
  --color-red-lightest: #faeaea;
  --color-red-lighter: #e9aaaa;
  --color-red-light: #d96a6a;
  --color-red: #c92a2a;
  --color-red-dark: #ab2424;
  --color-red-darker: #8d1d1d;
  --color-red-darkest: #6f1717;
  --color-pink-lightest: #fbebf0;
  --color-pink-lighter: #efadc4;
  --color-pink-light: #e27098;
  --color-pink: #d6336c;
  --color-pink-dark: #b62b5c;
  --color-pink-darker: #96244c;
  --color-pink-darkest: #761c3b;
  --color-grape-lightest: #f7ecfa;
  --color-grape-lighter: #dfb2e9;
  --color-grape-light: #c678d9;
  --color-grape: #ae3ec9;
  --color-grape-dark: #9435ab;
  --color-grape-darker: #7a2b8d;
  --color-grape-darkest: #60226f;
  --color-violet-lightest: #f1edfd;
  --color-violet-lighter: #c6b6f6;
  --color-violet-light: #9b7fef;
  --color-violet: #7048e8;
  --color-violet-dark: #5f3dc5;
  --color-violet-darker: #4e32a2;
  --color-violet-darkest: #3e2880;
  --color-indigo-lightest: #eceffd;
  --color-indigo-lighter: #b3c1f7;
  --color-indigo-light: #7b92f1;
  --color-indigo: #4263eb;
  --color-indigo-dark: #3854c8;
  --color-indigo-darker: #2e45a5;
  --color-indigo-darkest: #243681;
  --color-blue-lightest: #e8f2fa;
  --color-blue-lighter: #a3c9ea;
  --color-blue-light: #5fa1db;
  --color-blue: #1a79cb;
  --color-blue-dark: #1667ad;
  --color-blue-darker: #12558e;
  --color-blue-darkest: #0e4370;
  --color-cyan-lightest: #e7f2f4;
  --color-cyan-lighter: #9eccd3;
  --color-cyan-light: #56a6b2;
  --color-cyan: #0d8091;
  --color-cyan-dark: #0b6d7b;
  --color-cyan-darker: #095a66;
  --color-cyan-darkest: #074650;
  --color-teal-lightest: #e6f2ef;
  --color-teal-lighter: #9cccbd;
  --color-teal-light: #52a58c;
  --color-teal: #087f5b;
  --color-teal-dark: #076c4d;
  --color-teal-darker: #065940;
  --color-teal-darkest: #044632;
  --color-green-lightest: #ebf7ed;
  --color-green-lighter: #afe0b8;
  --color-green-light: #73c982;
  --color-green: #37b24d;
  --color-green-dark: #2f9741;
  --color-green-darker: #267d36;
  --color-green-darkest: #1e622a;
  --color-lime-lightest: #f1f8e8;
  --color-lime-lighter: #c7e3a2;
  --color-lime-light: #9ecd5c;
  --color-lime: #74b816;
  --color-lime-dark: #639c13;
  --color-lime-darker: #51810f;
  --color-lime-darkest: #40650c;
  --color-orange-lightest: #fef0e6;
  --color-orange-lighter: #fcc29c;
  --color-orange-light: #f99551;
  --color-orange: #f76707;
  --color-orange-dark: #d25806;
  --color-orange-darker: #ad4805;
  --color-orange-darkest: #883904;
  --color-yellow-lightest: #fef5e5;
  --color-yellow-lighter: #fbd999;
  --color-yellow-light: #f8bc4c;
  --color-yellow: #f59f00;
  --color-yellow-dark: #d08700;
  --color-yellow-darker: #ac6f00;
  --color-yellow-darkest: #875700;
  /* Color - Neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-1: #f8f9fa;
  --color-neutral-2: #f1f3f5;
  --color-neutral-3: #e9ecef;
  --color-neutral-4: #dee2e6;
  --color-neutral-5: #ced4da;
  --color-neutral-6: #adb5bd;
  --color-neutral-7: #6a7178;
  --color-neutral-8: #4f575e;
  --color-neutral-9: #272b30;
  --color-neutral-10: #101213;
  --color-neutral-25: #FCFCFD;
  /* Color - Semantic */
  --color-error-light: #FFFBFA;
  --color-error: #F04438;
  --color-error-25: #FFFBFA;
  --color-error-50: #FEF3F2;
  --color-error-100: #FEE4E2;
  --color-error-200: #FECDCA;
  --color-error-300: #FDA29B;
  --color-error-400: #F97066;
  --color-error-500: #F04438;
  --color-error-600: #D92D20;
  --color-error-700: #B42318;
  --color-error-800: #912018;
  --color-error-900: #7A271A;
  --color-error-950: #55160C;
  --color-warning-light: #FFFCF5;
  --color-warning: #F79009;
  --color-warning-25: #FFFCF5;
  --color-warning-50: #FFFAEB;
  --color-warning-100: #FEF0C7;
  --color-warning-200: #FEDF89;
  --color-warning-300: #FEC84B;
  --color-warning-400: #FDB022;
  --color-warning-500: #F79009;
  --color-warning-600: #DC6803;
  --color-warning-700: #B54708;
  --color-warning-800: #93370D;
  --color-warning-900: #7A2E0E;
  --color-warning-950: #4E1D09;
  --color-success-light: #F6FEF9;
  --color-success: #17B26A;
  --color-success-25: #F6FEF9;
  --color-success-50: #ECFDF3;
  --color-success-100: #DCFAE6;
  --color-success-200: #ABEFC6;
  --color-success-300: #75E0A7;
  --color-success-400: #47CD89;
  --color-success-500: #17B26A;
  --color-success-600: #079455;
  --color-success-700: #151817;
  --color-success-800: #085D3A;
  --color-success-900: #074D31;
  --color-success-950: #053321;
  --color-info-light: #F5FAFF;
  --color-info: #2E90FA;
  --color-info-25: #F5FAFF;
  --color-info-50: #ECFDF3;
  --color-info-100: #D1E9FF;
  --color-info-200: #B2DDFF;
  --color-info-300: #84CAFF;
  --color-info-400: #53B1FD;
  --color-info-500: #2E90FA;
  --color-info-600: #1570EF;
  --color-info-700: #175CD3;
  --color-info-800: #1849A9;
  --color-info-900: #194185;
  --color-info-950: #102A56;
  /* Gradient Style */
  --color-gradient-600-500: linear-gradient(90deg, rgba(27,131,84,1) 0%, rgba(37,147,95,1) 100%);
  --color-gradient-700-600: linear-gradient(45deg, rgba(22,106,69,1) 0%, rgba(27,131,84,1) 100%);
  --color-gradient-950-600: linear-gradient(45deg, rgba(20,87,58,1) 0%, rgba(27,131,84,1) 100%);
  --color-gradient-800-600: linear-gradient(90deg, rgba(20,87,58,1) 0%, rgba(27,131,84,1) 100%);
  --color-gradient-800-700: linear-gradient(26.5deg, rgba(20,87,58,1) 0%, rgba(22,106,69,1) 100%);
  --color-gradient-900-600: linear-gradient(45deg, rgba(16,70,49,1) 0%, rgba(27,131,84,1) 100%);
  /* Text Color */
  /*Dark Text colors on Light backgrounds*/
  --color-text-gray-600: #4D5761;
  --color-text-gray-700: #384250;
  --color-text-gray-950: #0D121C;
  /*Light Text colors on dark backgrounds*/
  --color-text-white-60: rgba(255,255,255,0.6);
  --color-text-white-70: rgba(255,255,255,0.7);
  --color-text-white: rgba(255,255,255,1);
  /*Platforms Code Text Colors on Light Backgrounds*/
  --color-text-sa-500: #4D5761;
  --color-text-sa-600: #384250;
  --color-text-sa-800: #0D121C;
  /*Semantic Text Colors on Light Backgrounds*/
  --color-text-error-600: #D92D20;
  --color-text-warning-600: #DC6803;
  --color-text-success-600: #1B8354;
  --color-text-info-600: #1570EF;
  /*Border Colors*/
  --border-white: var(--white);
  --border-white-40: var(--alpha-white-40);
  --border-black: var(--black);
  --border-primary: var(--SAFlag-primary);
  --border-primary-light: var(--SAFlag-200);
  --border-secondary: var(--secondary-gold-primary);
  --border-secondary-light: var(--secondary-gold-200);
  --border-tertiary: var(--tertiary-lavendar-primary);
  --border-tertiary-light: var(--tertiary-lavendar-200);
  --border-neutral-primary: var(--neutral-300);
  --border-neutral-secondary: var(--neutral-200);
  --border-neutral-tertiary: var(--neutral-100);
  --border-background-white: var(--neutral-100);
  --border-background-neutral: var(--neutral-300);
  --border-transparent-10: var(--alpha-white-10);
  --border-oncolor-transparent-30: var(--alpha-white-30);
  --border-success: var(--green-700);
  --border-success-light: var(--green-200);
  --border-info: var(--blue-700);
  --border-info-light: var(--blue-200);
  --border-warning: var(--yellow-700);
  --border-warning-light: var(--yellow-200);
  --border-error: var(--red-700);
  --border-error-light: var(--red-200);
  --border-disabled: var(--neutral-300);
  /* Typography */
  --font-family: "IBM Plex Sans Arabic", sans-serif;
  --text-display-xxl: 72px;
  --text-display-xl: 60px;
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-display-sm: 30px;
  --text-display-xS: 24px;
  --text-text-xl: 20px;
  --text-text-lg: 18px;
  --text-text-md: 16px;
  --text-text-sm: 14px;
  --text-text-xS: 12px;
  --text-text-xxS: 10px;
  --font-display-xxl: var(--text-display-xxl)/90px var(--font-family);
  --font-display-xl: var(--text-display-xl)/72px var(--font-family);
  --font-display-lg: var(--text-display-lg)/60px var(--font-family);
  --font-display-md: var(--text-display-md)/44px var(--font-family);
  --font-display-sm: var(--text-display-sm)/38px var(--font-family);
  --font-display-xS: var(--text-display-xs)/32px var(--font-family);
  --font-text-xl: var(--text-text-xl)/30px var(--font-family);
  --font-text-lg: var(--text-text-lg)/28px var(--font-family);
  --font-text-md: var(--text-text-md)/24px var(--font-family);
  --font-text-sm: var(--text-text-sm)/20px var(--font-family);
  --font-text-xS: var(--text-text-xs)/18px var(--font-family);
  --font-text-xxS: var(--text-text-xxs)/18px var(--font-family);
  /* Space - Sizes */
  --space-none: 0;
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxl: 20px;
  --space-3xl: 24px;
  --space-4xl: 32px;
  --space-5xl: 40px;
  --space-6xl: 48px;
  --space-7xl: 64px;
  --space-8xl: 80px;
  --space-9xl: 96px;
  --space-10xl: 128px;
  --space-11xl: 160px;
  /* Width - Sizes */
  --width-xxs: 320px;
  --width-xs: 384px;
  --width-sm: 480px;
  --width-md: 560px;
  --width-lg: 640px;
  --width-xl: 768px;
  --width-xxl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --width-5xl: 1600px;
  --width-6xl: 1920px;
  --paragraph-max-width: 720px;
  /* Border Radius */
  --border-radius-none: 0px;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 100%;
  /* Border Size */
  --border-size-none: 0;
  --border-size-s: 1px;
  --border-size-m: 2px;
  --border-size-l: 3px;
  /* Elevation / Shadow */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px 0px rgba(16, 24, 40, 0.10), 0 1px 2px 0px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -6px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-xxl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-xxxl: 0 32px 64px -14px rgba(16, 24, 40, 0.14);
  /* Blur Effect */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(40px);
  /* App Settings */
  --color-background-body: #F9FAFB;
  --header-size: 72px;
  --side-menu-size: 256px;
  /* BOOTSTRAP CUSTOMISE */
  --bs-table-bg: --neutral-300;
}

/* BUTTONS */
header, main, footer {
  display: none;
  font-family: "IBM Plex Sans Arabic" !important;
}

.h1, h1 {
  font-size: 180%;
  font-weight: 600;
}

.h2, h2 {
  font-size: 170%;
  font-weight: 600;
}

.h3, h3 {
  font-size: 160%;
  font-weight: 600;
}

.h5, h5 {
  font-size: 120%;
  font-weight: 600;
}

small {
  color: var(--neutral-500);
  font-weight: normal;
}

body {
  background-color: var(--background-body);
  font-size: 16px;
  padding: 0 !important;
  font-family: "IBM Plex Sans Arabic" !important;
}

body.grayscale {
  filter: grayscale(100%);
}

.inline-items {
  position: relative;
  display: flex;
  gap: var(--space-xxl);
}

img {
  max-width: 100% !important;
}

.topbar {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 90%;
}

.topbar.primary {
  background-color: var(--background-primary);
  color: var(--text-oncolor-primary);
}

.topbar.gray {
  background-color: var(--background-neutral-100);
  color: var(---text-primary-paragraph);
}

.topbar .container {
  display: flex;
}

.topbar .topbar-item {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

.topbar .topbar-item a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: all 0.35s ease-in-out;
}

.topbar .topbar-item a:hover {
  background-color: var(--alpha-white-20);
}

.topbar .topbar-item img {
  width: 20px;
}

/*.dropdown:hover > .dropdown-menu {
    position:absolute;
}
*/
.dropdown > .dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
  /*pointer-events: none;*/
}

.dir-content {
  display: inline-flex;
  align-items: center;
  width: 100%;
  gap: var(--space-xl);
}

.non-dir-content {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.navbar {
  background-color: var(--background-white);
  font-size: unset;
  --bs-navbar-brand-font-size: unset;
}

.navbar .container {
  align-items: stretch;
}

@media (min-width: 992px) {
  .navbar-nav {
    height: 100%;
  }
  .navbar-nav .nav-item {
    height: 100%;
    display: inline-flex;
    align-items: center;
    min-width: max-content;
  }
  .navbar-nav .nav-item .nav-link {
    position: relative;
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-sm);
    font-weight: 500;
    transition: all 0.35s ease-in-out;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
  }
  .navbar-nav .nav-item .nav-link.active::before {
    content: "";
    position: absolute;
    bottom: 6px;
    height: 6px;
    background-color: var(--background-primary-400);
    width: 80%;
    border-radius: 6px;
    opacity: 1;
    right: 10%;
  }
  .navbar-nav .nav-item .nav-link::before {
    content: "";
    position: absolute;
    bottom: 6px;
    height: 6px;
    background-color: var(--background-neutral-400);
    width: 0;
    opacity: 0;
    transition: all 0.35s ease-in-out;
    right: 50%;
  }
  .navbar-nav .nav-item .nav-link:hover::before {
    width: 80%;
    border-radius: 6px;
    opacity: 1;
    right: 10%;
  }
  .navbar-nav .nav-item .nav-link.active, .navbar-nav .nav-item .nav-link.show {
    background-color: var(--background-primary);
    color: var(--text-oncolor-primary);
  }
  .navbar-nav .nav-item .nav-link.active:hover, .navbar-nav .nav-item .nav-link.show:hover {
    background-color: var(--color-primary-700);
  }
  .navbar-nav .nav-item .nav-link:hover {
    background-color: var(--background-neutral-100);
  }
  .navbar-brand {
    margin-left: var(--space-md);
  }
  .dropdown-menu {
    min-width: 300px;
    font-size: unset;
  }
  .dropend .dropdown-toggle::after {
    position: absolute;
    top: 16px;
    left: 1.25rem;
  }
  .dropdown-item {
    height: 40px;
  }
  .dropdown-toggle::after {
    background-image: url(../images/arrow-down.svg);
    border-top: 0;
    width: 29px;
    height: 29px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.35s ease;
  }
  .navbar-nav .nav-item .nav-link.active::after, .navbar-nav .nav-item .nav-link.show::after {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }
  .list-group-item {
    border: 0px !important;
  }
  .mega-dropdown-menu {
    background-color: var(--alpha-white-0);
    box-shadow: none !important;
    border: 0px;
    width: 100%;
    padding-top: 0;
    margin-top: 0;
  }
  .mega-dropdown-menu .container {
    background-color: var(--alpha-white-100);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0 var(--space-4xl);
  }
}
.navbar-toggler {
  border: 0px;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition: all 0.35s ease-in-out;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--background-neutral-200);
  color: var(--text-default);
}

.dropdown-item:hover {
  background-color: var(--background-neutral-100);
  text-decoration: underline;
}

.dropdown-item::before {
  position: relative;
  display: none;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../icons/menu-item-before.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.dropend .dropdown-toggle::after {
  border: 0px !important;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: cover;
  top: 8px;
  background-image: url(../icons/menu-arrow-left.svg);
  left: 0.6rem;
}

.only-image {
  padding: 8px;
  height: 80px;
  padding-left: var(--space-3xl);
  padding-right: var(--space-none);
}

.only-image > img {
  height: 56px !important;
}

.logo a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
}

.logo a img {
  height: 64px;
}

.logo a h1 {
  font-size: 140%;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--space-none);
}

.logo a label {
  position: relative;
  display: block;
  color: var(--text-default);
  font-size: 75%;
}

.navbar-item {
  position: relative;
  display: inline-flex;
  height: 100%;
}

.navbar-item a {
  position: relative;
  display: inline-flex;
  gap: var(--space-md);
  width: max-content;
  align-items: center;
  text-decoration: none;
  color: var(--text-default);
  padding: 0 var(--space-md);
}

.navbar-item a img {
  height: 24px;
}

.navbar-item a:hover, .navbar-item a.active {
  background-color: var(--background-neutral-100);
}

.navbar-item a::before {
  content: "";
  position: absolute;
  transition: all 0.35s ease-in-out;
  bottom: 6px;
  height: 6px;
  background-color: var(--background-neutral-400);
  width: 0%;
  border-radius: 6px;
  opacity: 1;
  right: 50%;
}

.navbar-item a:hover::before, .navbar-item a.active::before {
  width: 80%;
  border-radius: 6px;
  opacity: 1;
  right: 10%;
}

.lngbtn-AR {
  display: none !important;
}

.mega-content h5 {
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.mega-menu-content {
  position: relative;
  display: block;
  width: 100%;
  padding-top: var(--space-md);
  padding-left: var(--space-md);
}

.mega-menu-content > img {
  position: relative;
  display: block;
  margin: var(--space-xl) var(--space-none) var(--space-xl);
  width: 100%;
  max-height: 300px;
  border-radius: var(--radius-md);
}

.mega-menu-content span {
  font-size: 90%;
  line-height: 1.6;
}

.list-group-item {
  padding: 0 var(--space-md);
  display: flex;
  height: 40px;
  align-items: center;
  gap: var(--space-md);
  transition: all 0.35s ease-in-out;
  background-color: var(--alpha-white-0);
  border-radius: var(--radius-none) !important;
}

.list-group-item:hover {
  background-color: var(--background-neutral-100);
  text-decoration: underline;
}

.list-group-item::before {
  position: relative;
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(../icons/menu-item-before.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.menu-divider {
  position: relative;
  display: block;
  width: 99%;
  margin: 0 auto;
  clear: both;
  height: 1px;
  background-color: var(--background-neutral-300);
}

.carousel-inner {
  max-height: 550px;
}

.carousel-item > video {
  width: 100%;
  height: 100%;
}

.carousel-item::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(9, 42, 30, 0.4);
  z-index: 2;
}

.carousel-item .carousel-caption {
  bottom: unset;
  top: 20%;
  opacity: 0;
  z-index: 3;
  right: 0;
  left: 0;
  width: 100%;
  transition: all 0.6s ease-in-out;
}

.carousel-item.active .carousel-caption {
  top: 4em;
  opacity: 1;
}

.carousel-caption .hero-content {
  position: relative;
  display: block;
  padding: var(--space-6xl);
  max-width: 600px;
  text-align: right;
}

.carousel-caption .hero-content span {
  position: relative;
  display: block;
  width: 100%;
  font-size: 120%;
  line-height: 1.8;
  padding-bottom: var(--space-4xl);
}

.carousel-caption .hero-content h3 {
  font-size: 240%;
  margin-bottom: var(--space-3xl);
}

.carousel-indicators button {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  background-color: var(--background-neutral-200) !important;
  transition: all 0.35s ease;
}

.carousel-indicators button.active {
  background-color: var(--SAFlag-600) !important;
}

.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--background-body);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  top: 0;
}

.spinner {
  height: 60px;
  width: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  -webkit-animation: rotation 1s infinite linear;
  -moz-animation: rotation 1s infinite linear;
  -o-animation: rotation 1s infinite linear;
  animation: rotation 1s infinite linear;
  border: 6px solid #F3F4F6;
  border-radius: 100%;
}

.spinner:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -6px;
  height: 100%;
  width: 100%;
  border-top: 6px solid #1B8354;
  border-left: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid transparent;
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
footer {
  background-color: var(--background-SA-Flag);
  color: var(--text-oncolor-primary);
  padding: var(--space-5xl) 0 var(--space-3xl);
}

footer h5 {
  color: var(--text-oncolor-primary);
  padding-bottom: var(--space-xl);
  border-bottom: 1px var(--border-oncolor-transparent-30) solid;
}

.links-list {
  position: relative;
  display: block;
  width: 100%;
  margin: var(--space-none);
  padding: var(--space-sm) var(--space-none) var(--space-none);
  list-style: none;
  color: var(--text-oncolor-primary);
}

.links-list li {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-xs) var(--space-none);
}

.links-list li a {
  color: var(--text-oncolor-primary);
  text-decoration: none;
  transition: all 0.35s ease;
}

.links-list li a:hover {
  text-decoration: underline;
}

.icons-list {
  position: relative;
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: var(--space-none);
  padding: var(--space-sm) var(--space-none) var(--space-4xl);
  flex-wrap: wrap;
}

.icons-list li {
  position: relative;
  display: inline-flex;
  padding: var(--space-none);
}

.icons-list li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 32px;
  border: 1px var(--border-white-40) solid;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all 0.35s ease;
}

.icons-list li a:hover {
  background-color: var(--alpha-white-40);
}

.icons-list li a img {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
}

.sub-footer-content {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  padding-top: var(--space-6xl);
  width: 100%;
}

.sub-footer > div {
  display: flex;
  align-items: center;
}

.sub-footer-content a {
  color: var(--text-oncolor-primary);
  text-decoration: none;
}

.sub-footer-content a:hover {
  text-decoration: underline;
}

.sub-footer-content ul {
  position: relative;
  display: block;
  list-style: none;
  margin: var(--space-none);
  padding: var(--space-none) var(--space-none) var(--space-3xl);
}

.sub-footer-content ul li {
  position: relative;
  display: inline-block;
  margin-left: var(--space-xl);
}

.sub-footer-content span {
  font-size: 90%;
  padding: var(--space-xxs) var(--space-none);
}

.sub-footer-content .bottom-links a {
  position: relative;
  display: inline-block;
  font-size: 90%;
  margin-left: var(--space-xl);
}

.sub-footer-logos {
  position: relative;
  display: inline-flex;
  gap: var(--space-xl);
  align-items: center;
  height: 100%;
  padding-top: var(--space-4xl);
}

.sub-footer-logos a {
  position: relative;
  display: block;
}

.on-color {
  color: var(--white);
}

.sub-footer-logos a img {
  height: 45px;
}

.qsearch-block {
  position: relative;
  display: flex;
  gap: var(--space-md);
  padding-top: var(--space-lg);
}

section {
  display: flex;
  padding: var(--space-8xl) var(--space-none);
  position: relative;
}

section .container {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

.section-head {
  position: relative;
  display: flex;
  gap: var(--space-xxl);
  flex-direction: column;
}

.section-head-actions {
  display: inline-flex;
  min-width: max-content;
  gap: var(--space-lg);
}

.section-head-content {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-xxl);
  width: 100%;
}

.section-head h2 {
  width: 100%;
}

.section-head span {
  width: 85%;
}

.bg-primary {
  background-color: var(--background-primary) !important;
}

.bg-primary-light {
  background-color: var(--background-primary-50);
}

.statisics-items {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: var(--space-4xl);
}

.statisics-items .statisics-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: var(--space-xl);
  min-width: 220px;
  background-color: var(--background-card);
}

.statisics-items .statisics-item img {
  position: relative;
  display: block;
  background-color: var(--color-primary-50);
  border-radius: var(--radius-full);
  padding: 14px;
  margin-bottom: var(--space-3xl);
}

.statisics-items .statisics-item h3 {
  position: relative;
  display: block;
  font-weight: var(--font-regular);
  font-size: 300%;
  color: var(--SAFlag-primary);
}

.statisics-items .statisics-item h3 i {
  font-style: normal;
}

.owl-item {
  padding: var(--space-none) var(--space-xl);
  height: 100%;
}

.owl-nav {
  position: relative;
  display: flex;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
  padding: var(--space-none) var(--space-xl);
}

.owl-nav button {
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary) !important;
  transition: all 0.35s ease;
}

.owl-nav button.disabled {
  background-color: var(--background-body) !important;
}

.owl-nav button.disabled span {
  color: var(---icon-default);
}

.owl-nav button span {
  color: var(--text-oncolor-primary);
  font-size: 250%;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 44px;
  font-weight: 200;
}

.owl-dots {
  position: relative;
  display: inline-flex;
  margin-top: -30px;
  gap: var(--space-md);
  padding: var(--space-none) var(--space-xl);
  float: left;
}

.owl-dots button {
  transition: all 0.35s ease;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--background-neutral-200) !important;
}

.owl-dots button.active {
  background-color: var(--SAFlag-600) !important;
}

.card {
  border: 1px var(--border-neutral-primary) solid !important;
  height: 100%;
}

.card-icon {
  display: inline-flex;
  background-color: var(--color-primary-50);
  width: 48px;
  height: 48px;
  align-items: center;
  border-radius: var(--radius-full);
}

.card-icon img {
  height: 28px;
  height: 28px;
  margin: 0 auto;
}

.news-home {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--space-xl);
}

.news-home > div {
  width: 100%;
}

.card-image {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-none) var(--radius-none);
  transition: all 0.35s ease;
  background-color: var(--background-SA-Flag);
}

.card-image img {
  position: absolute;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  top: 50%;
  right: -0.5px;
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  object-fit: cover;
  opacity: 0.6;
  transition: all 0.35s ease-in-out;
}

.card-image:hover img {
  opacity: 1;
}

.news-home .card-title {
  height: 60px;
  overflow: hidden;
}

.news-home .card-text {
  height: 75px;
  overflow: hidden;
}

.card date {
  font-weight: var(--font-semi-bold);
  font-size: 90%;
  color: var(--color-primary);
  padding-bottom: var(--space-xs);
}

.accessability-tools {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  z-index: 100;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--alpha-white-60);
  backdrop-filter: var(--blur-sm);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  transition: all 0.75s linear;
  border-radius: var(--radius-none) var(--radius-md) var(--radius-md) var(--radius-none);
  left: -90px;
}

.accessability-tools.active {
  left: 0;
}

.accessability-tools a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  transition: all 0.5s ease;
}

.accessability-tools a img {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
}

.accessability-tools a:hover {
  overflow: visible;
}

.accessability-tools a label {
  position: absolute;
  background-color: var(--alpha-white-70);
  left: 40px;
}

.home-tooltip .tooltip-inner::before {
  display: none;
}

.home-tooltip[data-popper-placement^=right] .tooltip-arrow::before, .home-tooltip .tooltip-arrow::before {
  border-right-color: var(--background-primary);
}

.home-tooltip[data-popper-placement^=left] .tooltip-arrow::before, .home-tooltip .tooltip-arrow::before {
  border-left-color: var(--background-primary);
}

.home-tooltip .tooltip-inner {
  background-color: var(--background-primary);
  color: var(--text-oncolor-primary);
}

@media (max-width: 1200px) and (min-width: 992px) {
  .non-dir-content .navbar-item a span {
    display: none;
  }
  .non-dir-content .navbar-item:last-child a {
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .topbar {
    display: none !important;
  }
  .sub-footer .col-12 {
    text-align: center;
    flex-direction: column;
  }
  .list-group-item {
    border: 0px;
  }
  .carousel-item .carousel-caption {
    font-size: 80%;
  }
  .carousel-item.active .carousel-caption {
    top: 0em;
  }
  .carousel-caption .hero-content h3 {
    font-size: 160%;
  }
  .mtop-300 {
    margin-top: 0px !important;
  }
}
@media (max-width: 600px) {
  .carousel-caption .hero-content span {
    display: none;
  }
}
.quicksearch {
  position: absolute;
  width: 100%;
  background-color: var(--background-white);
  top: calc(100% + 1px);
  z-index: 100;
  border-radius: 0 0 16px 16px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.quicksearch .container {
  padding: 30px 0 40px;
}

.quicksearch.active {
  height: max-content;
  opacity: 1;
}

.close-qsearch {
  margin-bottom: 16px;
}

.close-qsearch a {
  position: relative;
  display: inline-block;
  float: left;
}

.quicksearch-input {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 30px;
}

.quicksearch-input input {
  padding-right: 42px;
  padding-left: 42px;
}

.input-group::before {
  position: absolute;
  content: "";
  z-index: 1000;
  width: 20px;
  height: 20px;
  background-image: url(/images/icons/search_dark.svg);
  background-size: cover;
  background-repeat: no-repeat;
  top: 10px;
  right: 10px;
}

.input-group::after {
  position: absolute;
  content: "";
  z-index: 1000;
  width: 24px;
  height: 24px;
  background-image: url(/images/icons/mic_dark.svg);
  background-size: cover;
  background-repeat: no-repeat;
  top: 8px;
  left: 10px;
}

.quicksearch h6 {
  position: relative;
  display: block;
  color: var(--color-primary);
  font-size: 110%;
  font-weight: var(--font-bold);
  padding-bottom: 10px;
}

.suggest-list {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

.suggest-list li {
  position: relative;
  display: inline-flex;
  background-color: var(--background-neutral-100);
  margin-left: 10px;
}

.suggest-list li a {
  position: relative;
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text-default);
  font-weight: var(--font-semi-bold);
  font-size: 90%;
}

.tablet-header .navbar-item a {
  padding: 0 var(--space-md);
}

.tablet-header .navbar-item a span {
  display: none;
}

.mobile-header .navbar-item {
  display: inline-flex;
  align-items: center;
}

.mobile-header button::after {
  display: none;
}

.mobile-header .dropdown-menu a {
  padding: var(--space-md) var(--space-xl);
  width: 100%;
  min-width: max-content;
  height: 50px;
}

.mobile-header .navbar-item a:hover::before, .mobile-header .navbar-item a.active::before {
  height: 3px;
  bottom: 4px;
}

@media screen and (max-width: 1390px) and (min-width: 991px) {
  body {
    font-size: 15px;
  }
}
@media screen and (max-width: 576px) {
  .quicksearch .container {
    padding: 15px 35px 40px;
  }
  .page-title {
    flex-direction: column !important;
  }
  .page-title h2 {
    height: max-content !important;
  }
}
.inner-header {
  background-color: var(--SAFlag-25);
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-7xl);
  min-height: 290px;
  height: 300px;
  min-height: max-content;
  background-image: url(../images/HeadBG.svg);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: -20%;
}

.inner-header.mini-header {
  height: 200px;
  min-height: 200px;
}

.inner-header.bg-transparent {
  background-color: transparent;
}

.inner-header.bg-gray {
  background-color: var(--background-neutral-100);
}

.page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
  padding-top: var(--space-none);
}

.page-content {
  position: relative;
  display: flex;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

.page-title {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-lg);
}

.page-title h2 {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 0;
}

.page-header span {
  position: relative;
  display: inline-flex;
  width: 80%;
}

.inside-header {
  margin-top: -150px;
}

.inside-header .tab-content {
  padding-top: var(--space-4xl) !important;
}

.services-cards > div {
  margin-bottom: var(--space-4xl);
}

.page-header .tags-list {
  margin-bottom: var(--space-none) !important;
}

.page-header .sub-links {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  margin: 0px;
  padding: 0;
}

.mtop-300 {
  margin-top: -260px;
}

.service-side-card {
  font-size: 110%;
  display: flex;
  background-color: var(--background-white);
  padding: var(--space-5xl);
  border-radius: var(--radius-lg);
  border: 1px var(--border-background-neutral) solid;
}

.side-card-list {
  position: relative;
  display: flex;
  margin: 0px;
  padding: 0;
  list-style: none;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}

.side-card-list li {
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-md);
  align-items: start;
}

.side-card-list li div.side-card-content {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.divider {
  height: 40px;
  align-items: center !important;
}

.divider::after {
  position: relative;
  display: block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: var(--border-neutral-primary);
}

.bg-gray-100 {
  background-color: var(--neutral-100);
}

.bg-white {
  background-color: var(---background-white);
}

.contacts-map {
  position: relative;
  display: block;
  width: 100%;
  height: 400px;
  min-height: 400px;
  margin: var(--sppace-none) auto var(--space-3xl);
  overflow: hidden;
  border-radius: var(--radius-md);
}

.leaflet-popup-content {
  width: fit-content;
}

.leaflet-popup-content > img {
  height: 65px !important;
}

.list-panel {
  align-content: end;
}

.text-none-direction {
  text-align: left;
}

.update-bar {
  padding-top: var(--space-lg);
  background-color: var(--white) !important;
  border-bottom: 2px var(--border-primary) solid;
}

.customer-bar {
  background-color: var(--white) !important;
  padding: var(--space-lg) var(--space-none);
}

.survey-question, .survey-submited {
  display: inline-flex;
  gap: var(--space-lg);
}

.survey-summary {
  text-align: left;
}

.survey-head > div {
  align-items: center;
  line-height: 36px;
}

.non-dir {
  text-align: left;
}

.survey-gender {
  position: relative;
  display: inline-flex;
  gap: var(--space-xxl);
}

.list .list-item {
  margin-bottom: var(--space-md);
}

.dga-neutral img {
  width: 20px;
  margin-left: var(--space-md);
}

.engstyle {
  direction: ltr;
}

.contact-info {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-xxl);
  border-radius: var(--radius-md);
  border: 1px var(--border-neutral-primary) solid;
}

.contact-info-item {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-lg);
}

.contact-info-item label {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: 110%;
  font-weight: var(--font-bold);
}

.contact-info-item label.inline-flex {
  flex-direction: row;
  gap: var(--space-lg);
  padding-bottom: var(--space-sm);
}

.contact-info-item label a {
  display: inline-flex;
  font-weight: var(--font-regular);
  gap: var(--space-md);
}

@media (max-width: 960px) {
  .navbar .navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(---space-none) !important;
  }
  .navbar .navbar-brand a {
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important;
  }
  nav .non-dir-content {
    flex-direction: column !important;
    height: unset;
    align-items: start;
  }
  nav .non-dir-content .navbar-item a {
    height: 42px;
    padding-right: var(--space-none);
  }
  nav .navbar-collapse .non-dir-content {
    display: none !important;
  }
}
@media (max-width: 450px) {
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: var(--space-xxl) !important;
    padding-right: var(--space-xxl) !important;
  }
  .navbar .navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(---space-none) !important;
  }
  .navbar .navbar-brand a {
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important;
  }
  nav .non-dir-content {
    flex-direction: column !important;
    height: unset;
    align-items: start;
  }
  nav .non-dir-content .navbar-item a {
    height: 42px;
    padding-right: var(--space-none);
  }
  .page-header span {
    width: 100%;
  }
  .px-4, .mega-content > div {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
  }
  .py-4 {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
  }
  .nav-item .shadow {
    box-shadow: none !important;
    border: 0 !important;
  }
  .mega-menu-content > img {
    margin-top: var(--space-none) !important;
  }
  .dropdown-item {
    padding-right: var(--space-none);
  }
}
.photo-gallery {
  padding-top: var(--space-md);
}

@keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.lightbox-modal .carousel-control-next, .lightbox-modal .carousel-control-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: 0 0;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.gallery-item {
  display: block;
}

.gallery-item img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
}

.gallery-item:hover img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}

.lightbox-modal .modal-content {
  background-color: var(--lightbox);
}

.lightbox-modal .btn-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.25rem;
  z-index: 10;
  filter: invert(1) grayscale(100);
}

.lightbox-modal .modal-body {
  display: flex;
  align-items: center;
  padding: 0;
}

.lightbox-modal .lightbox-content {
  width: 100%;
}

.lightbox-modal .carousel-indicators {
  margin-bottom: 0;
}

.lightbox-modal .carousel-indicators [data-bs-target] {
  background-color: var(--carousel-text) !important;
}

.lightbox-modal .carousel-inner {
  width: 75%;
}

.lightbox-modal .carousel-inner img {
  animation: zoomin 10s linear infinite;
}

.lightbox-modal .carousel-item .carousel-caption {
  top: 80%;
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: 2rem;
  background-color: var(--lightbox);
  color: var(--white) !important;
}

.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
  width: auto;
}

.lightbox-modal .carousel-control-prev {
  left: 90%;
}

.lightbox-modal .carousel-control-next {
  right: 90%;
}

@media (min-width: 1400px) {
  .lightbox-modal .carousel-inner {
    max-width: 60%;
  }
}
[data-bs-theme=dark] .lightbox-modal .carousel-control-next-icon,
[data-bs-theme=dark] .lightbox-modal .carousel-control-prev-icon {
  filter: none;
}

.btn-fullscreen-enlarge,
.btn-fullscreen-exit {
  position: absolute;
  top: 1.25rem;
  right: 3.5rem;
  z-index: 10;
  border: 0;
  background: transparent;
  opacity: 0.6;
  font-size: 1.25rem;
}

.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.035em;
  fill: currentcolor;
}

.search-header {
  position: relative;
  display: flex;
  padding: var(--space-4xl) var(--space-none);
}

.filter-btn {
  display: flex;
  align-items: center;
  padding: var(--space-none) var(--space-md);
}

.dga-neutral::after {
  background-image: url(../images/icons/arrow-down-white.svg);
}

.filter-dropdown .dropdown-menu li {
  padding: var(--space-sm) var(--space-xl);
}

.section-head-content span {
  display: block;
  padding-top: var(--space-lg);
  font-weight: var(--font-regular);
  font-size: 75%;
  color: var(--color-text-gray-600);
}

.results-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

.results-list li {
  padding-bottom: var(--space-xxl);
  border-bottom: 1px var(--border-neutral-primary) solid;
}

.results-list li:last-child {
  border-bottom: 0px var(--alpha-white-0) solid;
}

.results-list li label {
  display: block;
  padding-bottom: var(--space-md);
}

.results-list li span {
  color: var(--color-text-gray-600);
}

.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--background-white);
  padding: var(--space-4xl) var(--space-lg) var(--space-7xl);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.cookie-consent.show {
  transform: translateY(0);
}

.cookie-consent.hiding {
  transform: translateY(100%);
}

.cookie-title {
  position: relative;
  display: inline-flex;
  gap: var(--space-md);
  align-items: center;
}

.cookie-settings {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.cookie-settings.show {
  max-height: 300px;
}

.cookie-consent a {
  color: var(--color-primary) !important;
  transition: all 0.35s ease;
}

.cookie-consent a:hover {
  color: var(--color-primary-400) !important;
}

.select2 {
  display: block;
}

.select2-container {
  display: block !important;
  border: 1px var(--neutral-700) solid;
  height: 40px;
  border-radius: var(--bs-border-radius);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNTAzMSA3LjEyOTRDNS42MDQ2NyA3LjI2Mzg4IDUuOTA3OTMgNy42NjUzNCA2LjA4ODUzIDcuODk2NzZDNi40NTAyNiA4LjM2MDI3IDYuOTQ0NTIgOC45NzYxOCA3LjQ3NzY5IDkuNTkwMjZDOC4wMTM1NiAxMC4yMDc0IDguNTc2NDggMTAuODA4NSA5LjA3NjU4IDExLjI1MDRDOS4zMjczNCAxMS40NzIgOS41NDc2MiAxMS42NDAzIDkuNzI5MzkgMTEuNzQ5OUM5LjkwMDM1IDExLjg1MyAxMC4wMDEzIDExLjg3NDQgMTAuMDAxMyAxMS44NzQ0QzEwLjAwMTMgMTEuODc0NCAxMC4wOTk0IDExLjg1MyAxMC4yNzAzIDExLjc0OTlDMTAuNDUyMSAxMS42NDAzIDEwLjY3MjQgMTEuNDcyIDEwLjkyMzEgMTEuMjUwNEMxMS40MjMyIDEwLjgwODUgMTEuOTg2MSAxMC4yMDc0IDEyLjUyMiA5LjU5MDI1QzEzLjA1NTIgOC45NzYxNiAxMy41NDk0IDguMzYwMjUgMTMuOTExMiA3Ljg5NjczQzE0LjA5MTggNy42NjUzMSAxNC4zOTQ2IDcuMjY0NDIgMTQuNDk2MiA3LjEyOTk0QzE0LjcwMDkgNi44NTIgMTUuMDkyNSA2Ljc5MjA2IDE1LjM3MDUgNi45OTY3NUMxNS42NDg0IDcuMjAxNDUgMTUuNzA3OCA3LjU5MjY5IDE1LjUwMzEgNy44NzA2M0wxNS41MDE1IDcuODcyNzNDMTUuMzk1IDguMDEzNzYgMTUuMDgwOSA4LjQyOTYzIDE0Ljg5NjYgOC42NjU3N0MxNC41MjY3IDkuMTM5NzUgMTQuMDE4IDkuNzczODQgMTMuNDY1OSAxMC40MDk4QzEyLjkxNjUgMTEuMDQyNiAxMi4zMTE3IDExLjY5MTUgMTEuNzUwOCAxMi4xODcxQzExLjQ3MSAxMi40MzQzIDExLjE4NzUgMTIuNjU2NiAxMC45MTU3IDEyLjgyMDRDMTAuNjYxIDEyLjk3MzkgMTAuMzM4NiAxMy4xMjUgOS45OTk4NSAxMy4xMjVDOS42NjEwOSAxMy4xMjUgOS4zMzg2OCAxMi45NzM5IDkuMDg0MDQgMTIuODIwNEM4LjgxMjIzIDEyLjY1NjYgOC41Mjg2NiAxMi40MzQzIDguMjQ4OTEgMTIuMTg3MUM3LjY4Nzk4IDExLjY5MTUgNy4wODMyNSAxMS4wNDI2IDYuNTMzODIgMTAuNDA5OEM1Ljk4MTY5IDkuNzczODYgNS40NzMgOS4xMzk3OCA1LjEwMzEgOC42NjU4QzQuOTE4NzEgOC40Mjk1MyA0LjYwNDY0IDguMDEzNzEgNC40OTgzIDcuODcyOTJMNC40OTY5IDcuODcxMDdDNC4yOTIyIDcuNTkzMTMgNC4zNTEyOCA3LjIwMTQ5IDQuNjI5MjIgNi45OTY3OUM0LjkwNzE0IDYuNzkyMSA1LjI5ODQgNi44NTE0OSA1LjUwMzEgNy4xMjk0WiIgZmlsbD0iIzE2MTYxNiIvPgo8L3N2Zz4K");
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-size: 20px;
  background-position-x: var(--space-md);
}

.select2-container .select2-selection--single {
  line-height: 40px;
}

.card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--background-card);
  border: 1px var(--border-neutral-primary) solid;
  border-radius: 16px;
  padding: var(--space-3xl);
  margin-bottom: var(--space-2xl);
}

.card-item ul {
  padding-right: 15px;
}

.about-list {
  pointer-events: revert;
  display: block;
  width: 100%;
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.about-list label {
  position: relative;
  display: block;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.about-list span {
  position: relative;
  display: block;
  margin-bottom: 24px;
}

.text-primary {
  color: var(--color-primary) !important;
}

.page-content * {
  font-family: "IBM Plex Sans Arabic" !important;
}

.services-carousel .owl-dots .owl-dot {
  background-color: transparent !important;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  border-radius: 50%;
}

.tags-list {
  display: block;
}

.tags-list li {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.services-carousel .owl-item .card-text {
  height: 48px;
  overflow: hidden;
}

.news-carousel .card-title {
  height: 59px;
  overflow: hidden;
}

.news-carousel .card-text {
  height: 48px;
  overflow: hidden;
}

.page-content .card-text {
  height: 48px;
  overflow: hidden;
}

table.table thead tr th {
  font-weight: 700;
}

.table-parent {
  overflow-x: auto;
}

.quicksearch-input .input-group::after {
  display: none;
}