/*************************
*
*
*
*
*************************/
/* import font family */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root {
  /*font family variables*/
  --font-family-display :'Cairo', sans-serif;
  --font-family-body :'Cairo', sans-serif;
}
:root {
    /* Primary Colors */
    --primitive-primary-0: #F7F5FF;
    --primitive-primary-100: #CDC4FB;
    --primitive-primary-200: #A494F3;
    --primitive-primary-300: #806BE7;
    --primitive-primary-400: #614AD6;
    --primitive-primary-500: #4931BF;
    --primitive-primary-600: #341FA1;
    --primitive-primary-700: #23127A;
    --primitive-primary-800: #14094D;
    --primitive-primary-900: #08031F;
  
    /* Secondary Colors */
    --primitive-secondary-0: #FBFFF3;
    --primitive-secondary-100: #EDFDC5;
    --primitive-secondary-200: #DDF998;
    --primitive-secondary-300: #CDF270;
    --primitive-secondary-400: #BEE950;
    --primitive-secondary-500: #AEDD38;
    --primitive-secondary-600: #94C11F;
    --primitive-secondary-700: #8BB81B;
    --primitive-secondary-800: #78A013;
    --primitive-secondary-900: #65870E;
  
    /* Red Colors */
    --primitive-red-0: #FFF5F5;
    --primitive-red-100: #FBC4C8;
    --primitive-red-200: #F5959C;
    --primitive-red-300: #EA6C75;
    --primitive-red-400: #DC4C55;
    --primitive-red-500: #C7333D;
    --primitive-red-600: #AC212A;
    --primitive-red-700: #8B141C;
    --primitive-red-800: #640C11;
    --primitive-red-900: #3B0609;
  
    /* Yellow Colors */
    --primitive-yellow-0: #FFFCEE;
    --primitive-yellow-100: #FEF3C6;
    --primitive-yellow-200: #FCE89A;
    --primitive-yellow-300: #F9DE73;
    --primitive-yellow-400: #F4D454;
    --primitive-yellow-500: #EECB3D;
    --primitive-yellow-600: #E6C12C;
    --primitive-yellow-700: #DCB720;
    --primitive-yellow-800: #D1AC18;
    --primitive-yellow-900: #C4A114;
  
    /* Global Colors */
    --global-primary: #BC0202;
    --global-secondary: #95C11F;
    --global-red: #E30613;
    --global-yellow: #FECC00;
    --global-blue: #46BCCD;
  
    /* Neutral Colors */
    --neutral-0: #FFFFFF;
    --neutral-25: #F8F8F8;
    --neutral-50: #F5F5F5;
    --neutral-100: #EBEBEB;
    --neutral-200: #DEDEDE;
    --neutral-300: #BFBFBF;
    --neutral-400: #A6A6A6;
    --neutral-500: #808080;
    --neutral-600: #666666;
    --neutral-700: #4C4C4C;
    --neutral-900: #1F1F1F;
    --neutral-950: #121212;
  

  }
  :root {

  --font-display-xxl: clamp(36px, 5vw, 48px);
  --font-display-xl: clamp(34px, 4.5vw, 44px);
  --font-display-l: clamp(32px, 4vw, 40px);
  --font-display-m: clamp(30px, 3.5vw, 38px);

  --font-headline-xl: clamp(28px, 3vw, 38px);
  --font-headline-l: clamp(26px, 2.8vw, 36px);
  --font-headline-m: clamp(24px, 2.5vw, 32px);


  --font-subtitle-xl: clamp(24px, 2.2vw, 28px);
  --font-subtitle-l: clamp(22px, 2vw, 26px);
  --font-subtitle-m: clamp(18px, 1.8vw, 24px);

  --font-label-xxl: clamp(20px, 1.5vw, 22px);
  --font-label-xl: clamp(18px, 1.2vw, 20px);
  --font-label-l: clamp(16px, 1vw, 18px);
  --font-label-m: clamp(14px, 0.9vw, 16px);

  --font-body-xl: clamp(16px, 1.2vw, 18px);
  --font-body-l: clamp(14px, 1vw, 16px);
  --font-body-m: clamp(12px, 0.9vw, 14px);
}


/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #556270; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #d9232d; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --dark:#000000;
  --srtgn-red: #BC0202;
  --bg-gray-srtgn:#F5F5F5;
  --blue-tab:#5FA9FD;
  --gray-tab:#95A7B5;
  --blue-fcb: #0077FF;
  --blue-in:#4F78C5;

}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #556270;  /* The default color of the main navmenu links */
  --nav-hover-color: #d9232d; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #556270; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #d9232d; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* :root {
  --font-display-xxl: 48px;
  --font-display-xl: 44px;
  --font-display-l: 40px;
  --font-display-m: 38px;

  --font-headline-xl: 38px;
  --font-headline-l: 36px;
  --font-headline-m: 32px;

  --font-subtitle-xl: 28px;
  --font-subtitle-l: 26px;
  --font-subtitle-m: 24px;

  --font-label-xxl: 24px;
  --font-label-xl: 16px;
  --font-label-l: 16px;
  --font-label-m: 14px;

  --font-body-xl: 18px;
  --font-body-l: 16px;
  --font-body-m: 14px;
} */