/* Font Family - Noto Kufi Arabic */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap');

:root {

  /* light mode defaults */
    --color-primary: #16191d;
    --color-on-primary: #FFFFFF;
    --color-inverse-primary: #C4C6CB;
    --color-inverse-on-primary: #2E3135;
    --color-primary-hovered: #292B2F;
    --color-primary-pressed: #3B3E41;
    --color-primary-08: #16191d14;
    --color-primary-12: #16191d1f;
    --color-primary-16: #16191d29;

    --color-accent: #2C00BE;
    --color-on-accent: #FFFFFF;
    --color-inverse-accent: #C5C0FF;
    --color-inverse-on-accent: #2400a2;
    --color-accent-08: #2C00BE14;
    --color-accent-08: #2C00BE1f;
    --color-accent-08: #2C00BE29;
    
    --color-background: #F9F9FF;
    --color-on-background: #191C20;
    --color-background-20: #F9F9FF33;
    --color-background-50: #F9F9FF80;
    --color-background-80: #F9F9FFBF;

    --color-surface: #FFFFFF;
    --color-on-surface: #1C1B1B;
    --color-surface-variant: #DFE2EE;
    --color-on-surface-variant: #424750;

    --color-surface-container: #F5F5F5;

    --color-on-surface-08: #1C1B1B14;
    --color-on-surface-12: #1C1B1B1f;
    --color-on-surface-16: #1C1B1B29;


    --color-inverse-surface: #313030;
    --color-inverse-on-surface: #F4F0EF;

    --color-error: #B00027;
    --color-on-error: #FFFFFF;
    --color-error-08: #B0002714;
    --color-error-12: #B000271f;
    --color-error-16: #B0002729;

    --color-success: #005A0D;
    --color-success-on: #090909;
    --color-success-08: #005A0D14;
    --color-success-12: #005A0D1f;
    --color-success-16: #005A0D29;

    --color-information: #003689;
    --color-information-on: #FFFFFF;
    --color-information-08: #00368914;
    --color-information-12: #0036891f;
    --color-information-16: #00368929;

    --color-warning: #C24C00;
    --color-warning-on: #FFF6F3;
    --color-warning-08: #C24C0014;
    --color-warning-12: #C24C001f;
    --color-warning-16: #C24C0029;

    --color-outline: #747878;
    --color-outline-variant: #C4C7C7;

    --color-outline-08: #74787814;
    --color-outline-12: #7478781f;
    --color-outline-16: #74787829;




  /* Heading/Hero */
    --font-heading-hero-size: 56px;
    --font-heading-hero-weight-regular: 400;
    --font-heading-hero-weight-medium: 500;
    --font-heading-hero-weight-bold: 700;
    --font-heading-hero-line-height: 64px;
    --font-heading-hero-tracking: -0.28px;
    
  /* Heading/2X Large */
    --font-heading-2xl-size: 48px;
    --font-heading-2xl-weight-regular: 400;
    --font-heading-2xl-weight-medium: 500;
    --font-heading-2xl-weight-bold: 700;
    --font-heading-2xl-line-height: 56px;
    --font-heading-2xl-tracking: 0px;

  /* Heading/Extra Large */
    --font-heading-xl-size: 44px;
    --font-heading-xl-weight-regular: 400;
    --font-heading-xl-weight-medium: 500;
    --font-heading-xl-weight-bold: 700;
    --font-heading-xl-line-height: 52px;
    --font-heading-xl-tracking: 0px;

/* Heading/Large */
    --font-heading-lg-size: 40px;
    --font-heading-lg-weight-regular: 400;
    --font-heading-lg-weight-medium: 500;
    --font-heading-lg-weight-bold: 700;
    --font-heading-lg-line-height: 48px;
    --font-heading-lg-tracking: 0px;

/* Heading/Medium */
    --font-heading-md-size: 36px;
    --font-heading-md-weight-regular: 400;
    --font-heading-md-weight-medium: 500;
    --font-heading-md-weight-bold: 700;
    --font-heading-md-line-height: 44px;
    --font-heading-md-tracking: 0px;

/* Heading/Small */
    --font-heading-sm-size: 28px;
    --font-heading-sm-weight-regular: 400;
    --font-heading-sm-weight-medium: 500;
    --font-heading-sm-weight-bold: 700;
    --font-heading-sm-line-height: 36px;
    --font-heading-sm-tracking: 0px;

  /* Heading/Extra Small */
    --font-heading-xs-size: 24px;
    --font-heading-xs-weight-regular: 400;
    --font-heading-xs-weight-medium: 500;
    --font-heading-xs-weight-bold: 700;
    --font-heading-xs-line-height: 32px;
    --font-heading-xs-tracking: 0px;

  /* Body/2X Large */
    --font-body-2xl-size: 20px;
    --font-body-2xl-weight-regular: 400;
    --font-body-2xl-weight-medium: 500;
    --font-body-2xl-weight-bold: 700;
    --font-body-2xl-line-height: 28px;
    --font-body-2xl-tracking: 0%;

  /* Body/Extra Large */
    --font-body-xl-size: 16px;
    --font-body-xl-weight-regular: 400;
    --font-body-xl-weight-medium: 500;
    --font-body-xl-weight-bold: 700;
    --font-body-xl-line-height: 24px;
    --font-body-xl-tracking: 0.16px;
    
  /* Body/Large */
    --font-body-lg-size: 14px;
    --font-body-lg-weight-regular: 400;
    --font-body-lg-weight-medium: 500;
    --font-body-lg-weight-bold: 700;
    --font-body-lg-line-height: 22px;
    --font-body-lg-tracking: 0.14px;

  /* Body/Medium */
    --font-body-md-size: 12px;
    --font-body-md-weight-regular: 400;
    --font-body-md-weight-medium: 500;
    --font-body-md-weight-bold: 700;
    --font-body-md-line-height: 16px;
    --font-body-md-tracking: 0.24px;

  /* Body/Small */
    --font-body-sm-size: 10px;
    --font-body-sm-weight-regular: 400;
    --font-body-sm-weight-medium: 500;
    --font-body-sm-weight-bold: 700;
    --font-body-sm-line-height: 14px;
    --font-body-sm-tracking: 0.2px;



/* ------------Border Radius------------ */

    --border-radius-08: 8px;
    --border-radius-10: 10px;
    --border-radius-12: 12px;
    --border-radius-16: 16px;
    --border-radius-24: 24px;



/* ------------Padding------------ */

    --padding-08: 8px;
    --padding-10: 10px;
    --padding-12: 12px;
    --padding-16: 16px;
    --padding-20: 20px;
    --padding-24: 24px;
    --padding-40: 40px;


/* ------------Border Weight------------ */

    --border-weight-1: 1px;


}

/* body[data-theme="dark-theme"] { */
body.dark-theme {

  /* dark mode defaults */
    --color-primary: #C4C6CB;
    --color-on-primary: #2E3135;
    --color-inverse-primary: #16191D;
    --color-inverse-on-primary: #FFFFFF;
    --color-primary-hovered: #B8BABF;
    --color-primary-pressed: #ACAEB3;
    --color-primary-08: #C4C6CB14;
    --color-primary-12: #C4C6CB1f;
    --color-primary-16: #C4C6CB29;

    --color-accent: #C5C0FF;
    --color-on-accent: #2400a2;
    --color-inverse-accent: #2400a2;
    --color-inverse-on-accent: #C5C0FF;
    --color-accent-08: #C5C0FF14;
    --color-accent-08: #C5C0FF1f;
    --color-accent-08: #C5C0FF29;

    --color-background: #1A1C21;
    --color-on-background: #E5E5EB;
    --color-background-20: #1A1C2133;
    --color-background-50: #1A1C2180;
    --color-background-80: #1A1C21BF;

    --color-surface: #101216;
    --color-on-surface: #E2E2E8;
    --color-surface-variant: #424750;
    --color-on-surface-variant: #C2C6D2;

    --color-surface-container: #282C32;

    --color-on-surface-08: #E2E2E814;
    --color-on-surface-12: #E2E2E81f;
    --color-on-surface-16: #E2E2E829;

    --color-inverse-surface: #E5E2E1;
    --color-inverse-on-surface: #313030;

    --color-error: #FFB3B2;
    --color-on-error: #680013;
    --color-error-08: #FFB3B214;
    --color-error-12: #FFB3B21f;
    --color-error-16: #FFB3B229;

    --color-success: #88DA7D;
    --color-success-on: #FFFFFF;
    --color-success-08: #88DA7D14;
    --color-success-12: #88DA7D1f;
    --color-success-16: #88DA7D29;

    --color-information: #B2C5FF;
    --color-information-on: #002B73;
    --color-information-08: #B2C5FF14;
    --color-information-12: #B2C5FF1f;
    --color-information-16: #B2C5FF29;

    --color-warning: #FFB596;
    --color-warning-on: #581E00;
    --color-warning-08: #FFB59614;
    --color-warning-12: #FFB5961f;
    --color-warning-16: #FFB59629;

    --color-outline: #8E9192;
    --color-outline-variant: #444748;
}

/* ------------Fonts------------ */

/* Heading/Hero */

.heading-hero-regular {
  font-size: var(--font-heading-hero-size);
  font-weight: var(--font-heading-hero-weight-regular);
  line-height: var(--font-heading-hero-line-height);
  letter-spacing: var(--font-heading-hero-tracking);
}
.heading-hero-medium {
  font-size: var(--font-heading-hero-size);
  font-weight: var(--font-heading-hero-weight-medium);
  line-height: var(--font-heading-hero-line-height);
  letter-spacing: var(--font-heading-hero-tracking);
}
.heading-hero-bold {
  font-size: var(--font-heading-hero-size);
  font-weight: var(--font-heading-hero-weight-bold);
  line-height: var(--font-heading-hero-line-height);
  letter-spacing: var(--font-heading-hero-tracking);
}


/* Heading/2X Large */

.heading-2xl-regular {
  font-size: var(--font-heading-2xl-size);
  font-weight: var(--font-heading-2xl-weight-regular);
  line-height: var(--font-heading-2xl-line-height);
  letter-spacing: var(--font-heading-2xl-tracking);
}
.heading-2xl-medium {
  font-size: var(--font-heading-2xl-size);
  font-weight: var(--font-heading-2xl-weight-medium);
  line-height: var(--font-heading-2xl-line-height);
  letter-spacing: var(--font-heading-2xl-tracking);
}
.heading-2xl-bold {
  font-size: var(--font-heading-2xl-size);
  font-weight: var(--font-heading-2xl-weight-bold);
  line-height: var(--font-heading-2xl-line-height);
  letter-spacing: var(--font-heading-2xl-tracking);
}


/* Heading/Extra Large */

.heading-xl-regular {
  font-size: var(--font-heading-xl-size);
  font-weight: var(--font-heading-xl-weight-regular);
  line-height: var(--font-heading-xl-line-height);
  letter-spacing: var(--font-heading-xl-tracking);
}
.heading-xl-medium {
  font-size: var(--font-heading-xl-size);
  font-weight: var(--font-heading-xl-weight-medium);
  line-height: var(--font-heading-xl-line-height);
  letter-spacing: var(--font-heading-xl-tracking);
}
.heading-xl-bold {
  font-size: var(--font-heading-xl-size);
  font-weight: var(--font-heading-xl-weight-bold);
  line-height: var(--font-heading-xl-line-height);
  letter-spacing: var(--font-heading-xl-tracking);
}


/* Heading/Large */

.heading-lg-regular {
  font-size: var(--font-heading-lg-size);
  font-weight: var(--font-heading-lg-weight-regular);
  line-height: var(--font-heading-lg-line-height);
  letter-spacing: var(--font-heading-lg-tracking);
}
.heading-lg-medium {
  font-size: var(--font-heading-lg-size);
  font-weight: var(--font-heading-lg-weight-medium);
  line-height: var(--font-heading-lg-line-height);
  letter-spacing: var(--font-heading-lg-tracking);
}
.heading-lg-bold {
  font-size: var(--font-heading-lg-size);
  font-weight: var(--font-heading-lg-weight-bold);
  line-height: var(--font-heading-lg-line-height);
  letter-spacing: var(--font-heading-lg-tracking);
}


/* Heading/Medium */

.heading-md-regular {
  font-size: var(--font-heading-md-size);
  font-weight: var(--font-heading-md-weight-regular);
  line-height: var(--font-heading-md-line-height);
  letter-spacing: var(--font-heading-md-tracking);
}
.heading-md-medium {
  font-size: var(--font-heading-md-size);
  font-weight: var(--font-heading-md-weight-medium);
  line-height: var(--font-heading-md-line-height);
  letter-spacing: var(--font-heading-md-tracking);
}
.heading-md-bold {
  font-size: var(--font-heading-md-size);
  font-weight: var(--font-heading-md-weight-bold);
  line-height: var(--font-heading-md-line-height);
  letter-spacing: var(--font-heading-md-tracking);
}


/* Heading/Small */

.heading-sm-regular {
  font-size: var(--font-heading-sm-size);
  font-weight: var(--font-heading-sm-weight-regular);
  line-height: var(--font-heading-sm-line-height);
  letter-spacing: var(--font-heading-sm-tracking);
}
.heading-sm-medium {
  font-size: var(--font-heading-sm-size);
  font-weight: var(--font-heading-sm-weight-medium);
  line-height: var(--font-heading-sm-line-height);
  letter-spacing: var(--font-heading-sm-tracking);
}
.heading-sm-bold {
  font-size: var(--font-heading-sm-size);
  font-weight: var(--font-heading-sm-weight-bold);
  line-height: var(--font-heading-sm-line-height);
  letter-spacing: var(--font-heading-sm-tracking);
}


/* Heading/Extra Small */

.heading-xs-regular {
  font-size: var(--font-heading-xs-size);
  font-weight: var(--font-heading-xs-weight-regular);
  line-height: var(--font-heading-xs-line-height);
  letter-spacing: var(--font-heading-xs-tracking);
}
.heading-xs-medium {
  font-size: var(--font-heading-xs-size);
  font-weight: var(--font-heading-xs-weight-medium);
  line-height: var(--font-heading-xs-line-height);
  letter-spacing: var(--font-heading-xs-tracking);
}
.heading-xs-bold {
  font-size: var(--font-heading-xs-size);
  font-weight: var(--font-heading-xs-weight-bold);
  line-height: var(--font-heading-xs-line-height);
  letter-spacing: var(--font-heading-xs-tracking);
}


/* Body/2X Large */

.body-2xl-regular {
  font-size: var(--font-body-2xl-size);
  font-weight: var(--font-body-2xl-weight-regular);
  line-height: var(--font-body-2xl-line-height);
  letter-spacing: var(--font-body-2xl-tracking);
}
.body-2xl-medium {
  font-size: var(--font-body-2xl-size);
  font-weight: var(--font-body-2xl-weight-medium);
  line-height: var(--font-body-2xl-line-height);
  letter-spacing: var(--font-body-2xl-tracking);
}
.body-2xl-bold {
  font-size: var(--font-body-2xl-size);
  font-weight: var(--font-body-2xl-weight-bold);
  line-height: var(--font-body-2xl-line-height);
  letter-spacing: var(--font-body-2xl-tracking);
}


/* Body/Extra Large */

.body-xl-regular {
  font-size: var(--font-body-xl-size);
  font-weight: var(--font-body-xl-weight-regular);
  line-height: var(--font-body-xl-line-height);
  letter-spacing: var(--font-body-xl-tracking);
}
.body-xl-medium {
  font-size: var(--font-body-xl-size);
  font-weight: var(--font-body-xl-weight-medium);
  line-height: var(--font-body-xl-line-height);
  letter-spacing: var(--font-body-xl-tracking);
}
.body-xl-bold {
  font-size: var(--font-body-xl-size);
  font-weight: var(--font-body-xl-weight-bold);
  line-height: var(--font-body-xl-line-height);
  letter-spacing: var(--font-body-xl-tracking);
}


/* Body/Large */

.body-lg-regular {
  font-size: var(--font-body-lg-size);
  font-weight: var(--font-body-lg-weight-regular);
  line-height: var(--font-body-lg-line-height);
  letter-spacing: var(--font-body-lg-tracking);
}
.body-lg-medium {
  font-size: var(--font-body-lg-size);
  font-weight: var(--font-body-lg-weight-medium);
  line-height: var(--font-body-lg-line-height);
  letter-spacing: var(--font-body-lg-tracking);
}
.body-lg-bold {
  font-size: var(--font-body-lg-size);
  font-weight: var(--font-body-lg-weight-bold);
  line-height: var(--font-body-lg-line-height);
  letter-spacing: var(--font-body-lg-tracking);
}


/* Body/Medium */

.body-md-regular {
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight-regular);
  line-height: var(--font-body-md-line-height);
  letter-spacing: var(--font-body-md-tracking);
}
.body-md-medium {
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight-medium);
  line-height: var(--font-body-md-line-height);
  letter-spacing: var(--font-body-md-tracking);
}
.body-md-bold {
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight-bold);
  line-height: var(--font-body-md-line-height);
  letter-spacing: var(--font-body-md-tracking);
}


/* Body/Small */

.body-sm-regular {
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-body-sm-weight-regular);
  line-height: var(--font-body-sm-line-height);
  letter-spacing: var(--font-body-sm-tracking);
}
.body-sm-medium {
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-body-sm-weight-medium);
  line-height: var(--font-body-sm-line-height);
  letter-spacing: var(--font-body-sm-tracking);
}
.body-sm-bold {
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-body-sm-weight-bold);
  line-height: var(--font-body-sm-line-height);
  letter-spacing: var(--font-body-sm-tracking);
}



/* ------------Glass Effect------------ */

.glass-card-25{
  background-color: rgba(var(--color-background), 0.25);
  backdrop-filter: blur(8px);
  filter: url(#glass-distortion);
  overflow: hidden;
}

.glass-card-50{
  background-color: rgba(var(--color-background), 0.5);
  backdrop-filter: blur(8px);
  filter: url(#glass-distortion);
  overflow: hidden;
}

.glass-card-75{
  background-color: rgba(var(--color-background), 0.75);
  backdrop-filter: blur(8px);
  filter: url(#glass-distortion);
  overflow: hidden;
}