/* =================== 🔹 Root Variables Start =================== */
:root {

  /* Spacing & Fonts */
  --gap-header-menu: 20px;
  --gap-page: 10px;
  --footer-gap: 2px;

  --font-urdu: "MehrNastaliqWeb", "MyArabicFont", "Jameel Noori Nastaleeq", Tahoma, Arial, sans-serif;
  --font-arabic: "MyArabicFont", "MehrNastaliqWeb", Tahoma, Arial, sans-serif;
  --font-Bombay: "MyBombayBlackFont", "MyArabicFont", Tahoma, Arial, sans-serif;
  /* Spacing & Fonts */
  --gap-header-menu: 20px;
  --gap-page: 10px;
  --footer-gap: 2px;


  /* --- Responsive Font Sizes --- */
  --font-heading: clamp(20px, 3vw, 40px);
  --font-subheading: clamp(11px, 2vw, 22px);
  --font-normal: clamp(14px, 2vw, 18px);



  /* Primary Colors */
  --color-green: #117B45;
  --color-red: #C52F33;
  --color-blue: #383780;
  --color-cyan: #007BA5;
  --color-black: #201E1E;

  /* Helper colors */
  --color-white: #ffffff;
  --color-dark: #282829;
  --color-gray: #333333;
  --color-light-gray: #f0f0f0;
  --color-border: #c2c2c2;
  --color-border-light: #e6e6e6;
  --color-shadow: rgba(0, 0, 0, 0.10);
  --color-shadow-2: rgba(0, 0, 0, 0.08);
  --color-banner: #beffde;
  --color-banner-light: #e6fff2;
}

/* =================== 🔹 Root Variables End =================== */