/* <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Alkalami&family=Amiri+Quran&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Aref+Ruqaa+Ink:wght@400;700&family=Aref+Ruqaa:wght@400;700&family=Cairo+Play:wght@200..1000&family=Cairo:wght@200..1000&family=El+Messiri:wght@400..700&family=Gulzar&family=Handjet:wght@100..900&family=Katibeh&family=Kufam:ital,wght@0,400..900;1,400..900&family=Lemonada:wght@300..700&family=Mada:wght@200..900&family=Marhey:wght@300..700&family=Markazi+Text:wght@400..700&family=Mirza:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400..700&family=Noto+Sans+Arabic:wght@100..900&family=Rakkas&family=Readex+Pro:wght@160..700&family=Reem+Kufi+Fun:wght@400..700&family=Reem+Kufi+Ink&family=Reem+Kufi:wght@400..700&family=Ruwudu:wght@400;500;600;700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet"> */

/* <style>
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Alkalami&family=Amiri+Quran&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Aref+Ruqaa+Ink:wght@400;700&family=Aref+Ruqaa:wght@400;700&family=Cairo+Play:wght@200..1000&family=Cairo:wght@200..1000&family=El+Messiri:wght@400..700&family=Gulzar&family=Handjet:wght@100..900&family=Katibeh&family=Kufam:ital,wght@0,400..900;1,400..900&family=Lemonada:wght@300..700&family=Mada:wght@200..900&family=Marhey:wght@300..700&family=Markazi+Text:wght@400..700&family=Mirza:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400..700&family=Noto+Sans+Arabic:wght@100..900&family=Rakkas&family=Readex+Pro:wght@160..700&family=Reem+Kufi+Fun:wght@400..700&family=Reem+Kufi+Ink&family=Reem+Kufi:wght@400..700&family=Ruwudu:wght@400;500;600;700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
</style> */

/* تحسين تحميل الخطوط العربية مع الأداء المحسن */
@font-face {
    font-family: 'Alexandria';
    src: url(Alexandria/Alexandria-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 100 900;
}

@font-face {
    font-family: 'Alkalami';
    src: url(Alkalami/Alkalami-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Amiri';
    src: url(Amiri/Amiri-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Amiri Quran';
    src: url(Amiri_Quran/AmiriQuran-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'ArefRuqaa';
    src: url(Aref_Ruqaa/ArefRuqaa-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'ArefRuqaaInk';
    src: url(Aref_Ruqaa_Ink/ArefRuqaaInk-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Cairo';
    src: url(Cairo/Cairo-VariableFont_slnt\,wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 200 1000;
}

@font-face {
    font-family: 'CairoPlay';
    src: url(Cairo_Play/CairoPlay-VariableFont_slnt\,wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 200 1000;
}

@font-face {
    font-family: 'ElMessiri';
    src: url(El_Messiri/ElMessiri-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 700;
}

@font-face {
    font-family: 'Gulzar';
    src: url(Gulzar/Gulzar-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}
@font-face {
    font-family: 'Handjet';
    src: url(Handjet/Handjet-VariableFont_ELGR,ELSH,wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 100 900;
}

@font-face {
    font-family: 'Katibeh';
    src: url(Katibeh/Katibeh-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Lemonada';
    src: url(Lemonada/Lemonada-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 300 700;
}

@font-face {
    font-family: 'Mada';
    src: url(Mada/Mada-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 200 900;
}

@font-face {
    font-family: 'Marhey';
    src: url(Marhey/Marhey-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 300 700;
}

@font-face {
    font-family: 'MarkaziText';
    src: url(Markazi_Text/MarkaziText-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 700;
}

@font-face {
    font-family: 'Mirza';
    src: url(Mirza/Mirza-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 700;
}

@font-face {
    font-family: 'Kufam';
    src: url(Kufam/Kufam-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 900;
}

@font-face {
    font-family: 'NotoSansArabic';
    src: url(Noto_Sans_Arabic/NotoSansArabic-VariableFont_wdth\,wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 100 900;
}

@font-face {
    font-family: 'NotoNaskhArabic';
    src: url(Noto_Naskh_Arabic/NotoNaskhArabic-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 700;
}

@font-face {
    font-family: 'Rakkas';
    src: url(Rakkas/Rakkas-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'ReadexPro';
    src: url(Readex_Pro/ReadexPro-VariableFont_HEXP,wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 160 700;
}

@font-face {
    font-family: 'ReemKufi';
    src: url(Reem_Kufi/ReemKufi-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 700;
}

@font-face {
    font-family: 'ReemKufiInk';
    src: url(Reem_Kufi_Ink/ReemKufiInk-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'ReemKufiFun';
    src: url(Reem_Kufi_Fun/ReemKufiFun-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 700;
}

@font-face {
    font-family: 'Ruwudu';
    src: url(Ruwudu/Ruwudu-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 400 700;
}

@font-face {
    font-family: 'Tajawal';
    src: url(Tajawal/Tajawal-Regular.ttf) format('truetype');
    font-display: swap;
    font-weight: 200 900;
}
.tajawal-extralight {
    font-family: "Tajawal", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .tajawal-light {
    font-family: "Tajawal", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .tajawal-regular {
    font-family: "Tajawal", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .tajawal-medium {
    font-family: "Tajawal", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .tajawal-bold {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .tajawal-extrabold {
    font-family: "Tajawal", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .tajawal-black {
    font-family: "Tajawal", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  .ruwudu-regular {
    font-family: "Ruwudu", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .ruwudu-medium {
    font-family: "Ruwudu", serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .ruwudu-semibold {
    font-family: "Ruwudu", serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .ruwudu-bold {
    font-family: "Ruwudu", serif;
    font-weight: 700;
    font-style: normal;
  }
/* Reem Kufi font classes */
.reem-kufi-regular {
    font-family: "Reem Kufi", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.reem-kufi-bold {
    font-family: "Reem Kufi", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.reem-kufi-ink-regular {
    font-family: "Reem Kufi Ink", sans-serif;
    font-weight: 400;
    font-style: normal;
}
/* Reem Kufi Fun font classes */
.reem-kufi-fun-regular {
    font-family: "Reem Kufi Fun", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.reem-kufi-fun-bold {
    font-family: "Reem Kufi Fun", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* Readex Pro font classes */
.readex-pro-light {
    font-family: "Readex Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 160;
    font-style: normal;
    font-variation-settings: "HEXP" 0;
}

.readex-pro-regular {
    font-family: "Readex Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "HEXP" 0;
}

.readex-pro-bold {
    font-family: "Readex Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "HEXP" 0;
}
.rakkas-regular {
    font-family: "Rakkas", serif;
    font-weight: 400;
    font-style: normal;
  }
/* Noto Sans Arabic font classes */
.noto-sans-arabic-thin {
    font-family: "Noto Sans Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.noto-sans-arabic-regular {
    font-family: "Noto Sans Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.noto-sans-arabic-bold {
    font-family: "Noto Sans Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.noto-sans-arabic-black {
    font-family: "Noto Sans Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* Noto Naskh Arabic font classes */
.noto-naskh-arabic-regular {
    font-family: "Noto Naskh Arabic", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.noto-naskh-arabic-bold {
    font-family: "Noto Naskh Arabic", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.mirza-regular {
    font-family: "Mirza", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .mirza-medium {
    font-family: "Mirza", serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .mirza-semibold {
    font-family: "Mirza", serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .mirza-bold {
    font-family: "Mirza", serif;
    font-weight: 700;
    font-style: normal;
  }
  // <uniquifier>: Use a unique and descriptive class name
  // <weight>: Use a value from 400 to 700
  
  .markazi-text-<uniquifier> {
    font-family: "Markazi Text", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
  // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 700

.marhey-<uniquifier> {
  font-family: "Marhey", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 900

.mada-<uniquifier> {
  font-family: "Mada", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 700

.lemonada-<uniquifier> {
  font-family: "Lemonada", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 900

.kufam-<uniquifier> {
  font-family: "Kufam", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.katibeh-regular {
    font-family: "Katibeh", serif;
    font-weight: 400;
    font-style: normal;
  }
  // <uniquifier>: Use a unique and descriptive class name
  // <weight>: Use a value from 100 to 900
  
  .handjet-<uniquifier> {
    font-family: "Handjet", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
      "ELGR" 1,
      "ELSH" 2;
  }
  .gulzar-regular {
    font-family: "Gulzar", serif;
    font-weight: 400;
    font-style: normal;
  }
  // <uniquifier>: Use a unique and descriptive class name
  // <weight>: Use a value from 400 to 700
  
  .el-messiri-<uniquifier> {
    font-family: "El Messiri", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
  // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 1000

.cairo-<uniquifier> {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 1000

.cairo-play-<uniquifier> {
  font-family: "Cairo Play", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
.aref-ruqaa-regular {
    font-family: "Aref Ruqaa", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .aref-ruqaa-bold {
    font-family: "Aref Ruqaa", serif;
    font-weight: 700;
    font-style: normal;
  }
  .aref-ruqaa-ink-regular {
    font-family: "Aref Ruqaa Ink", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .aref-ruqaa-ink-bold {
    font-family: "Aref Ruqaa Ink", serif;
    font-weight: 700;
    font-style: normal;
  }
  .amiri-regular {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .amiri-bold {
    font-family: "Amiri", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .amiri-regular-italic {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .amiri-bold-italic {
    font-family: "Amiri", serif;
    font-weight: 700;
    font-style: italic;
  }
  .amiri-quran-regular {
    font-family: "Amiri Quran", serif;
    font-weight: 400;
    font-style: normal;
  }
  .alkalami-regular {
    font-family: "Alkalami", serif;
    font-weight: 400;
    font-style: normal;
  }
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.alexandria-<uniquifier> {
  font-family: "Alexandria", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}