@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Almarai';
    src: url('fonts/Almarai-Regular.ttf') format('truetype');
}

:root { 
  --alabaster: #fbfbfb;
  --black: #000000;
  --boston-blue: #3293c2;
  --cape-cod: #414141;
  --congress-blue: #0a4783;
  --curious-blue: #249cd2;
  --dove-gray: #6d6d6d;
  --green-vogue: #012955;
  --hunter-green: #161616;
  --log-cabin: #231f20;
  --red-berry: #8e0d03;
  --star-dust: #a0a0a0;
  --storm-dust: #696464;
  --thunderbird: #b42318;
  --whisper: #f7f8fa;
  --white: #ffffff;
  --white-lilac: #f6f8fb;
 
  --font-size-l: 20px;
  --font-size-m: 16px;
  --font-size-s: 14px;
  --font-size-xl: 24px;
  --font-size-xs: 12px;
 
  --font-family-almarai: "Almarai", Helvetica;
  --font-family-cairo: "Cairo", Helvetica;
  --font-family-ibm_plex_sans_arabic: "IBM Plex Sans Arabic", Helvetica;
}
.cairo-semi-bold-cape-cod-16px {
  color: var(--cape-cod);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.cairo-semi-bold-boston-blue-16px {
  color: var(--boston-blue);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.cairo-bold-white-24px {
  color: var(--white);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.cairo-semi-bold-dove-gray-16px {
  color: var(--dove-gray);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.cairo-bold-boston-blue-24px {
  color: var(--boston-blue);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.cairo-normal-hunter-green-14px {
  color: var(--hunter-green);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.ibmplexsansarabic-normal-thunderbird-14px {
  color: var(--thunderbird);
  font-family: var(--font-family-ibm_plex_sans_arabic);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.almarai-bold-cape-cod-16px {
  color: var(--cape-cod);
  font-family: var(--font-family-almarai);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.cairo-bold-green-vogue-20px {
  color: var(--green-vogue);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.almarai-extra-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-almarai);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 800;
}

.cairo-medium-storm-dust-16px {
  color: var(--storm-dust);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.cairo-medium-white-16px {
  color: var(--white);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.cairo-bold-congress-blue-20px {
  color: var(--congress-blue);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.cairo-normal-star-dust-14px {
  color: var(--star-dust);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.cairo-bold-congress-blue-16px {
  color: var(--congress-blue);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.cairo-normal-log-cabin-14px {
  color: var(--log-cabin);
  font-family: var(--font-family-cairo);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

:root {
}