:root {
  --theme-color: hsl(228, 45%, 26%);
  --base-color: #5e97ed;
  --accent-color-1: #243060;
  --accent-color-2: #ededed;
  --highlight-color: #ffd970;
  --light-color: #fbfbfb;
  --dark-color: #000000;
  --trans-color: transparent;
  --trans-25-color: rgba(0, 0, 0, 0.25);

  /* Global theme settings start*/
  /* Font Family */
  --ff-t: var(--ff-p); /* For Global font family for title*/
  --ff-d: var(--ff-p); /* For Global font family for description*/
  --ff-pb: var(--ff-p); /* For Global font family for primary button*/
  --ff-sb: var(--ff-p); /* For Global font family for secondary button*/
  --ff-lt: var(--ff-p); /* Fo  r Global font family for link text*/
  --ff-pbh: var(
    --ff-p
  ); /* For Global font family for primary button in hover state*/
  --ff-sbh: var(
    --ff-p
  ); /* For Global font family for secondary button in hover state*/
  --ff-lth: var(
    --ff-p
  ); /* For Global font family for link text in hover state*/

  /* Font Size */
  --b-fs-pb: var(--b-fs-sm); /* For Global font size for primary button*/
  --b-fs-sb: var(--b-fs-sm); /* For Global font size for secondary button*/
  --b-fs-lt: var(--b-fs-sm); /* For Global font size for link text*/
  --b-fs-pbh: var(
    --b-fs-sm
  ); /* For Global font size for primary button in hover state*/
  --b-fs-sbh: var(
    --b-fs-sm
  ); /* For Global font size for secondary button in hover state*/
  --b-fs-lth: var(
    --b-fst-md
  ); /* For Global font size for link text in hover state*/

  /* Font Weight */
  --fw-pb: var(--fw-nrm); /* For Global font weight for primary button*/
  --fw-sb: var(--fw-nrm); /* For Global font weight for secondary button*/
  --fw-lt: var(--fw-nrm); /* For Global font weight for link text*/
  --fw-pbh: var(
    --fw-nrm
  ); /* For Global font weight for primary button in hover state*/
  --fw-sbh: var(
    --fw-nrm
  ); /* For Global font weight for secondary button in hover state*/
  --fw-lth: var(
    --fw-nrm
  ); /* For Global font weight for link text in hover state*/

  /* Font Color */
  --fc-pb: var(--dark-color); /* For Global font color for primary button*/
  --fc-sb: var(
    --accent-color-1
  ); /* For Global font color for secondary button*/
  --fc-lt: var(--accent-color-1); /* For Global font color for link text*/
  --fc-pbh: var(
    --dark-color
  ); /* For Global font color for primary button in hover state*/
  --fc-sbh: var(
    --accent-color-1
  ); /* For Global font color for secondary button in hover state*/
  --fc-lth: var(
    --accent-color-1
  ); /* For Global font color for link text in hover state*/

  /* Background Color*/
  --bgc-pb: var(
    --base-color
  ); /* For Global background color for primary button*/
  --bgc-sb: var(
    --light-color
  ); /* For Global background color for secondary button*/
  --bgc-lt: var(--trans-color); /* For Global background color for link text*/
  --bgc-pbh: var(
    --base-color
  ); /* For Global background color for primary button in hover state*/
  --bgc-sbh: var(
    --light-color
  ); /* For Global background color for secondary button in hover state*/
  --bgc-lth: var(
    --trans-color
  ); /* For Global background color for link text in hover state*/

  /* Border Width/Size */
  --b-bw-pb: var(--b-bw-t); /* For Global border width for primary button*/
  --b-bw-sb: var(--b-bw-t); /* For Global border width for secondary button*/
  --b-bw-lt: var(--b-bw-n); /* For Global border width for link text*/
  --b-bw-pbh: var(
    --b-bw-t
  ); /* For Global border width for primary button in hover state*/
  --b-bw-sbh: var(
    --b-bw-m
  ); /* For Global border width for secondary button in hover state*/
  --b-bw-lth: var(
    --b-bw-n
  ); /* For Global border width for link text in hover state*/

  /* Border/Corder radius */
  --b-br-pb: var(--b-br-arc); /* For Global border width for primary button*/
  --b-br-sb: var(--b-br-arc); /* For Global border width for secondary button*/
  --b-br-pbh: var(
    --b-br-shp
  ); /* For Global border width for primary button in hover state*/
  --b-br-sbh: var(
    --b-br-shp
  ); /* For Global border width for secondary button in hover state*/

  /* Border/Corder color */
  --b-bc-pb: var(--dark-color); /* For Global border color for primary button*/
  --b-bc-sb: var(
    --accent-color-1
  ); /* For Global border color for secondary button*/
  --b-bc-pbh: var(
    --dark-color
  ); /* For Global border color for primary button in hover state*/
  --b-bc-sbh: var(
    --accent-color-1
  ); /* For Global border color for secondary button in hover state*/

  /* Global theme settings end*/

  /* Font Family */
  --ff-p: Poppins;
  --ff-am: Arima Madurai;
  --ff-m: Mulish;
  --ff-ssp: Source Serif Pro;
  --ff-zs: Zilla Slab;
  --ff-i: Inter;
  --ff-ebg: EB Garamond;
  --ff-ss: Spline Sans;
  --ff-n: Nunito;
  --ff-ns: Nunito Sans;
  --ff-fo: Fugaz One;
  --ff-ws: Work Sans;
  --ff-af: Abril Fatface;
  --ff-sm: Space Mono;
  --ff-b: Bitter;
  --ff-gh: Grand Hotel;
  --ff-l: Lato;
  --ff-ro: Roboto;
  --ff-os: Open Sans;
  --ff-osw: Oswald;
  --ff-mo: Montserrat;
  --ff-ra: Raleway;
  --ff-me: Merriweather;
  --ff-nos: Noto Sans;
  --ff-ssap: Source Sans Pro;
  --ff-ub: Ubuntu;
  --ff-pd: Playfair Display;
  --ff-qui: Quicksand;
  --ff-ben: Bebas Neue;
  --ff-pts: PT Sans;
  --ff-ps: PT Serif;
  --ff-lo: Lobster;
  --ff-in: Inconsolata;
  --ff-ds: Dancing Script;
  --ff-pa: Pacifico;
  --ff-fs: Fira Sans;
  --ff-an: Anton;
  --ff-js: Josefin Sans;
  --ff-ru: Rubik;
  --ff-co: Comfortaa;
  --ff-ar: Arimo;
  --ff-cb: Cabin;
  --ff-yk: Yanone Kaffeesatz;
  --ff-lb: Libre Baskerville;
  --ff-mk: Mukta;
  --ff-cg: Cormorant Garamond;
  --ff-vr: Varela Round;
  --ff-hi: Hind;
  --ff-ma: Manrope;
  --ff-tw: Titillium Web;
  --ff-te: Teko;
  --ff-si: Signika;
  --ff-ct: Crimson Text;
  --ff-as: Asap;
  --ff-ba: Barlow;
  --ff-ibm: IBM Plex Sans;
  --ff-ale: Alegreya;
  --ff-ri: Righteous;
  --ff-he: Heebo;
  --ff-bc: Barlow Condensed;
  --ff-nse: Noto Serif;
  --ff-ov: Overpass;
  --ff-ka: Karla;
  --ff-ml: Muli;
  --ff-ca: Cardo;
  --ff-ch: Chivo;
  --ff-ac: Acme;
  --ff-cat: Catamaran;
  --ff-ams: Amatic SC;
  --ff-fro: Fredoka One;
  --ff-arc: Archivo;
  --ff-pgo: Pathway Gothic One;
  --ff-ci: Cinzel;
  --ff-if: Indie Flower;
  --ff-ass: Assistant;
  --ff-jo: Jost;
  --ff-va: Varela;
  --ff-do: Domine;
  --ff-mp: Maven Pro;
  --ff-qu: Questrial;
  --ff-ld: Lexend Deca;
  --ff-le: Lexend Exa;
  --ff-em: El Messiri;
  --ff-taj: Tajawal;
  --ff-ti: Tinos;
  --ff-fm: Fira Mono;
  --ff-ph: Philosopher;
  --ff-s: Sacramento;
  --ff-sil: Shadows Into Light;
  --ff-kt: Kanit;
  --ff-pr: Prata;
  --ff-a: Alata;
  --ff-bn: BenchNine;
  --ff-it: Italiana;
  --ff-glh: Gloria Hallelujah;
  --ff-ng: Nanum Gothic;
  --ff-gv: Great Vibes;
  --ff-al: Alice;
  --ff-cn: Courier New;
  --ff-ve: Verdana;
  --ff-ge: Georgia;
  --ff-ga: Garamond;
  --ff-arl: Arial;
  --ff-tnr: Times New Roman;
  --ff-ta: Tahoma;

  /* Font Size for button*/
  --b-fs-lg: 1.125rem; /* Text 18px - Font size  */
  --b-fs-md: 1rem; /* Text 16px - Font size for */
  --b-fs-sm: 0.875rem; /* Text 14px - Font size  */

  /* Font Size for button for transform scale*/
  --b-fst-lg: 1.075; /* Increase font size by 107.5% */
  --b-fst-md: 1; /* Maintaint 100% of font size */
  --b-fst-sm: 0.925; /* Reduce font size by 92.5% */

  /* Font Size for tab*/
  --t-fs-lg: 1.5rem; /* Text 24px - Font size  */
  --t-fs-md: 1.25rem; /* Text 20px - Font size for */
  --t-fs-sm: 1rem; /* Text 16px - Font size  */
  --t-fs-xs: 0.875rem; /* Text 14px - Font size  */
  --t-fs-xl: 2rem; /* Text 32px - Font size  */

  /* Spacing */
  --s-v-lg: 5rem; /* verticle spacing 80px*/
  --s-v-md: 3.125rem; /* verticle spacing 50px*/
  --s-v-sm: 1.563rem; /* verticle spacing 25px*/
  --s-v-n: 0rem; /* verticle spacing 0px*/
  --s-h-lg: 3.75rem; /* horizontal spacing 60px*/
  --s-h-md: 3.125rem; /* horizontal spacing 50px*/
  --s-h-sm: 2.5rem; /* horizontal spacing 40px*/
  --s-h-n: 0rem; /* horizontal spacing 0px*/

  /* Vertical Spacing for header and header banner*/
  --hs-v-lg: 1rem; /* verticle spacing 16px*/
  --hs-v-md: 0.75rem; /* verticle spacing 12px*/
  --hs-v-sm: 0.5rem; /* verticle spacing 8px*/

  /* Vertical Spacing for header and header banner*/
  --sp-lg: 12.5rem; /* verticle height 200px*/
  --sp-md: 9.375rem; /* verticle height 150px*/
  --sp-sm: 6.25rem; /* verticle height 100px*/
  --sp-xs: 5rem; /* verticle height 80px*/

  /* Spacing between sub-contents */
  --s-sub-content: 2.5rem; /* 40px */

  /* Spacing between sub-contents */
  --s-content: 4rem; /* 64px */

  /* Section background and Image border width*/
  --bw-th: 0.5rem; /* 8px */
  --bw-m: 0.25rem; /* 4px */
  --bw-t: 0.125rem; /* 2px */
  --bw-n: 0rem; /* 0px */

  /* Logo Image Size */
  --li-sm: 2rem; /*32px */
  --li-md: 2.5rem; /*40px */
  --li-lg: 3rem; /*48px */

  /* Button border width*/
  --b-bw-th: 0.25rem; /* 4px */
  --b-bw-m: 0.125rem; /* 2px */
  --b-bw-t: 0.063rem; /* 1px */
  --b-bw-n: 0rem; /* 0px */

  /* Border/Corner Radius of Image*/
  --i-br-shp: 0%; /* 0px - Sharp border radius */
  --i-br-arc: 6%; /* 12px - Arc border radius */
  --i-br-mdrnd: 18%; /* 64px - Medium Round border radius */
  --i-br-rnd: 50%; /* 256px - Round border radius */

  /* Border/Corner Radius of Background Image*/
  --bgi-br-shp: 0%; /* 0px - Sharp border radius */
  --bgi-br-arc: 6%; /* 24px - Arc border radius */
  --bgi-br-mdrnd: 18%; /* 80px - Medium Round border radius */
  --bgi-br-rnd: 50%; /* 180px - Round border radius */

  /* Border/Corner Radius of Button*/
  --b-br-shp: 0rem; /* 0px - Sharp border radius */
  --b-br-arc: 0.375rem; /* 6px - Arc border radius */
  --b-br-mdrnd: 0.75rem; /* 12px - Medium Round border radius */
  --b-br-rnd: 3.25rem; /* 50px - Round border radius */

  /*Border Width*/
  --border-width-t: 0.0625rem;
  --border-width-m: 0.125rem;
  --border-width-th: 0.25rem;

  /*Font Weight*/
  --fw-nrm: normal;
  --fw-b: bold;
  /* --fw-l: lighter; */
}

/* Media query for Tab screens */
@media screen and (max-width: 1024px) {
  :root {
    /* Spacing */
    --s-v-lg: 3.75rem; /* verticle spacing 60px*/
    --s-v-md: 2.5rem; /* verticle spacing 40px*/
    --s-v-sm: 1.25rem; /* verticle spacing 20px*/
    --s-v-n: 0rem; /* verticle spacing 0px*/
    --s-h-lg: 2.5rem; /* horizontal spacing 40px*/
    --s-h-md: 2.5rem; /* horizontal spacing 40px*/
    --s-h-sm: 1.25rem; /* horizontal spacing 20px*/
    --s-h-n: 0rem; /* horizontal spacing 0px*/

    /* Vertical Spacing for header and header banner*/
    --hs-v-lg: 0.75rem; /* verticle spacing 12px*/
    --hs-v-md: 0.5rem; /* verticle spacing 8px*/
    --hs-v-sm: 0.5rem; /* verticle spacing 8px*/

    /* Spacing between sub-contents */
    --s-sub-content: 2.5rem; /* 40px */

    /* Spacing between sub-contents */
    --s-content: 3rem; /* 48px */

    /* Logo Image Size */
    --li-sm: 1.5rem; /*24px */
    --li-md: 1.5rem; /*24px */
    --li-lg: 2rem; /*32px */

    /* Border/Corner Radius of Background Image*/
    /* --bgi-br-arc: 3rem; 56px - Arc border radius */
    /* --bgi-br-rnd: 6rem; 96px - Round border radius */

    /* Vertical Spacing for header and header banner*/
    --sp-lg: 7.5rem; /* verticle height 120px*/
    --sp-md: 5.625rem; /* verticle height 90px*/
    --sp-sm: 3.75rem; /* verticle height 60px*/
    --sp-xs: 3.125rem; /* verticle height 50px*/
  }
}

/* Media query for Mobile screens */
@media screen and (max-width: 767px) {
  :root {
    /* Spacing */
    /* --s-v-lg: 1.875rem; 
    --s-v-md: 1.125rem; 
    --s-v-sm: 0.625rem; 
    --s-v-n: 0rem;  */
    --s-h-lg: 1.25rem; /* horizontal spacing 20px*/
    --s-h-md: 1.25rem; /* horizontal spacing 20px*/
    --s-h-sm: 0.625rem; /* horizontal spacing 10px*/
    --s-h-n: 0rem; /* horizontal spacing 0px*/

    /* Spacing between sub-contents */
    --s-sub-content: 2.5rem; /* 40px */

    /* Spacing between sub-contents */
    --s-content: 3rem; /* 48px */

    /* Border/Corner Radius of Background Image*/
    /* --bgi-br-arc: 2.25rem; 36px - Arc border radius */
    /* --bgi-br-rnd: 4rem; 64px - Round border radius */

    /* Vertical Spacing for header and header banner*/
    --sp-lg: 5rem; /* verticle height 80px*/
    --sp-md: 3.75rem; /* verticle height 60px*/
    --sp-sm: 2.5rem; /* verticle height 40px*/
    --sp-xs: 2rem; /* verticle height 40px*/
  }
}

/* Media query for small screens */
/* @media screen and (max-width: 767px) {
  :root {
    --d-font-lg: 500 2.813rem/3.25rem;
    --d-font-md: 500 2.25rem/2.75rem;
    --d-font-sm: 600 2rem/2.5rem;
    --h-font-lg: 500 1.75rem/2.25rem;
    --h-font-md: 500 1.5rem/2rem;
    --h-font-sm: 600 1.375rem/1.75rem;
    --t-font-lg: 500 1rem/1.5rem;
    --t-font-md: 500 0.875rem/1.25rem;
    --t-font-sm: 600 0.875rem/1.25rem;
    --l-font-lg: 500 0.75rem/1rem;
    --l-font-md: 500 0.688rem/1rem;
    --l-font-sm: 500 0.688rem/1rem;
    --b-font-lg: 400 0.875rem/1.25rem;
    --b-font-md: 400 0.75rem/1rem;
    --b-font-sm: 400 0.75rem/1rem;

    --t-letter-spacing-sm: 0.006rem;
    --l-letter-spacing-lg: 0.031rem;
    --l-letter-spacing-md: 0.031rem;
    --l-letter-spacing-sm: 0.031rem;
    --b-letter-spacingt-lg: 0.016rem;
    --b-letter-spacing-md: 0.025rem;
    --b-letter-spacing-sm: 0.025rem;
  }
} */