@font-face {
  /* light font */
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-Light.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-Light.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  /* light font italic*/
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-LightItalic.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-LightItalic.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  /* regular font */
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-Regular.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-Regular.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  /* regular font */
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-Italic.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-Italic.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  /* medium font */
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-Medium.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-Medium.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  /* medium font */
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-MediumItalic.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-MediumItalic.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

/* Semibold face is actually used as bold */
@font-face {
  /* semibold font */
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-SemiBold.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  /* semibold font */
  font-family: "montserrat";
  src: url("./fonts/montserrat/Montserrat-SemiBoldItalic.woff") format("woff"),
    url("./fonts/montserrat/Montserrat-SemiBoldItalic.woff2") format("woff2"),
    url("./fonts/montserrat/Montserrat-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}

/* Color Palletes */
/* the highert the number, darker the color */
:root {
  --cox2m-clr-brand-100: #f7fbff;
  --cox2m-clr-brand-200: #eef4fe;
  --cox2m-clr-brand-300: #cddefc;
  --cox2m-clr-brand-400: #709cf0;
  --cox2m-clr-brand-500: #2e6ce4;
  --cox2m-clr-brand-600: #0042b1;
  --cox2m-clr-brand-700: #001d80;
  --cox2m-clr-brand-800: #1d2d5e;
  --cox2m-clr-brand-900: #061546;
}

:root {
  --cox2m-clr-neutral-white: #ffffff;
  --cox2m-clr-neutral-black: #141414;

  --cox2m-clr-neutral-100: #fafafa;
  --cox2m-clr-neutral-200: #f5f6fb;
  --cox2m-clr-neutral-300: #e7eaf4;
  --cox2m-clr-neutral-400: #c4c9d9;
  --cox2m-clr-neutral-500: #afb4c5;
  --cox2m-clr-neutral-600: #6f7480;
  --cox2m-clr-neutral-700: #52555e;
  --cox2m-clr-neutral-800: #3d3e45;
  --cox2m-clr-neutral-900: #26272b;
}

:root {
  --cox2m-clr-success-100: #edfff1;
  --cox2m-clr-success-200: #abedba;
  --cox2m-clr-success-300: #59d478;
  --cox2m-clr-success-400: #3cba5d;
  --cox2m-clr-success-500: #24a148;
  --cox2m-clr-success-600: #0d852d;
  --cox2m-clr-success-700: #026e1d;
  --cox2m-clr-success-800: #005414;
  --cox2m-clr-success-900: #003b0d;
}

:root {
  --cox2m-clr-warning-100: #fff8ed;
  --cox2m-clr-warning-200: #ffe5bf;
  --cox2m-clr-warning-300: #ffca80;
  --cox2m-clr-warning-400: #ffb24c;
  --cox2m-clr-warning-500: #fa9519;
  --cox2m-clr-warning-600: #d47100;
  --cox2m-clr-warning-700: #ad5a00;
  --cox2m-clr-warning-800: #874400;
  --cox2m-clr-warning-900: #612f00;
}

:root {
  --cox2m-clr-critical-100: #fff3f2;
  --cox2m-clr-critical-200: #ffc2bf;
  --cox2m-clr-critical-300: #ff8480;
  --cox2m-clr-critical-400: #ff4f4c;
  --cox2m-clr-critical-500: #e01616;
  --cox2m-clr-critical-600: #ba0003;
  --cox2m-clr-critical-700: #940005;
  --cox2m-clr-critical-800: #6e0005;
  --cox2m-clr-critical-900: #470005;
}

:root {
  --cox2m-clr-info-100: #e8f8ff;
  --cox2m-clr-info-200: #cff1ff;
  --cox2m-clr-info-300: #9ce1ff;
  --cox2m-clr-info-400: #178fe5;
  --cox2m-clr-info-500: #009ae0;
  --cox2m-clr-info-600: #005aad;
  --cox2m-clr-info-700: #003dad;
  --cox2m-clr-info-800: #003494;
  --cox2m-clr-info-900: #002f87;
}

:root {
  --cox2m-clr-graph-a: #eb3e79;
  --cox2m-clr-graph-b: #5259ff;
  --cox2m-clr-graph-c: #25bba2;
  --cox2m-clr-graph-d: #00c8e1;
  --cox2m-clr-graph-e: #775dd0;
  --cox2m-clr-graph-f: #ea7d6e;
}

:root {
  --cox2m-clr-primary-identity-light: #00aaf4;
  --cox2m-clr-primary-identity-dark: #002f87;

  --cox2m-clr-secondary-identity-light: #93d3f5;
  --cox2m-clr-secondary-identity-medium: #4199da;
  --cox2m-clr-secondary-identity-dark: #0c3182;
}

:root {
  --cox2m-spacing-xs: 0.5rem;/* 0.5rem */
  --cox2m-spacing-s: 1rem;   /* 1rem */
  --cox2m-spacing-m: 1.5rem; /* 1.5rem */
  --cox2m-spacing-lg: 2rem;  /* 2rem */
  --cox2m-spacing-xl: 3rem;  /* 3rem */

  --cox2m-visual-corrector: 0.125rem;

  --cox2m-spacing-1-unit: 0.25rem;   /* 4px */
  --cox2m-spacing-1-units: 0.25rem;  /* 4px */
  --cox2m-spacing-2-units: 0.5rem;   /* 8px */
  --cox2m-spacing-3-units: 0.75rem;  /* 12px */
  --cox2m-spacing-4-units: 1rem;     /* 16px */
  --cox2m-spacing-5-units: 1.25rem;  /* 20px */
  --cox2m-spacing-6-units: 1.5rem;   /* 24px */
  --cox2m-spacing-7-units: 1.75rem;  /* 28px */
  --cox2m-spacing-8-units: 2rem;     /* 32px */
  --cox2m-spacing-9-units: 2.25rem;  /* 36px */
  --cox2m-spacing-10-units: 2.5rem;  /* 40px */
  --cox2m-spacing-11-units: 2.75rem; /* 44px */
  --cox2m-spacing-12-units: 3rem;    /* 48px */
  --cox2m-spacing-13-units: 3.25rem; /* 52px */
  --cox2m-spacing-14-units: 3.5rem;  /* 56px */
  --cox2m-spacing-15-units: 3.75rem; /* 60px */
  --cox2m-spacing-16-units: 4rem;    /* 64px */
  --cox2m-spacing-17-units: 4.25rem; /* 68px */
  --cox2m-spacing-18-units: 4.5rem;  /* 72px */
  --cox2m-spacing-19-units: 4.75rem; /* 76px */
  --cox2m-spacing-20-units: 5rem;    /* 80px */
  --cox2m-spacing-21-units: 5.25rem; /* 84px */
  --cox2m-spacing-22-units: 5.5rem;  /* 88px */
  --cox2m-spacing-23-units: 5.75rem; /* 92px */
  --cox2m-spacing-24-units: 6rem;    /* 96px */
  --cox2m-spacing-25-units: 6.25rem; /* 100px */
  --cox2m-spacing-26-units: 6.5rem;  /* 104px */
  --cox2m-spacing-27-units: 6.75rem; /* 108px */
  --cox2m-spacing-28-units: 7rem;    /* 112px */
  --cox2m-spacing-29-units: 7.25rem; /* 116px */
  --cox2m-spacing-30-units: 7.5rem; /* 120px */
}

:root{
  --cox2m-main-ff: "montserrat", "DejaVu Sans", "Verdana", "sans‑serif";
  --cox2m-fs-italic: "italic";
}

:root {
  --cox2m-fs-100: 4.75rem;   /* 76px */
  --cox2m-fs-200: 3.75rem;   /* 60px */
  --cox2m-fs-300: 3rem;      /* 48px */
  --cox2m-fs-400: 2.25rem;   /* 36px */
  --cox2m-fs-500: 2.125rem;  /* 34px */
  --cox2m-fs-600: 1.5rem;    /* 24px */
  --cox2m-fs-700: 1.25rem;   /* 20px */
  --cox2m-fs-800: 1.125rem;  /* 18px */
  --cox2m-fs-900: 1rem;      /* 16px */
  --cox2m-fs-1000: 0.875rem; /* 14px */
  --cox2m-fs-1100: 0.8125rem;/* 13px */
  --cox2m-fs-1200: 0.75rem;  /* 12px */
  --cox2m-fs-1300: 0.625rem; /* 10px */
}

:root {
  --cox2m-fw-light: 300;
  --cox2m-fw-regular: 400;
  --cox2m-fw-medium: 500;
  --cox2m-fw-bold: 600;
}

:root {
  /*
   * we should use lower units but bootstrap already uses very high z-indexes
   * therefore we need to assure a smooth transition that avoid us to fight with bootstrap
   * if bootstrap gets removed we can lower the z-index values
   */
  --cox2m-z-index-n1: -10000;
  --cox2m-z-index-1: 10000;
  --cox2m-z-index-2: 20000;
  --cox2m-z-index-3: 30000;
  --cox2m-z-index-4: 40000;
  --cox2m-z-index-5: 50000;
  --cox2m-z-index-6: 60000;
  --cox2m-z-index-7: 70000;
  --cox2m-z-index-8: 80000;
  --cox2m-z-index-9: 90000;
  --cox2m-z-index-10: 100000;
}

:root {
  /* this variable are separate in case we need a different direction for the box shadow */
  --cox2m-shadow-1-dp-dir: 0px 1px 1px;
  --cox2m-shadow-1-dp-clr: rgba(0, 28, 61, 0.14),
    0px 3px 1px rgba(0, 28, 61, 0.12), 0px 1px 5px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-2-dp-dir: 0px 2px 2px;
  --cox2m-shadow-2-dp-clr: rgba(0, 28, 61, 0.14),
    0px 3px 1px rgba(0, 28, 61, 0.12), 0px 1px 5px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-3-dp-dir: 0px 3px 4px;
  --cox2m-shadow-3-dp-clr: rgba(0, 28, 61, 0.14),
    0px 3px 3px rgba(0, 28, 61, 0.12), 0px 1px 8px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-4-dp-dir: 0px 4px 5px;
  --cox2m-shadow-4-dp-clr: rgba(0, 28, 61, 0.14),
    0px 1px 10px rgba(0, 28, 61, 0.12), 0px 2px 4px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-6-dp-dir: 0px 6px 10px;
  --cox2m-shadow-6-dp-clr: rgba(0, 28, 61, 0.14),
    0px 1px 18px rgba(0, 28, 61, 0.12), 0px 3px 5px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-8-dp-dir: 0px 8px 10px;
  --cox2m-shadow-8-dp-clr: rgba(0, 28, 61, 0.14),
    0px 3px 14px rgba(0, 28, 61, 0.12), 0px 5px 5px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-12-dp-dir: 0px 12px 17px;
  --cox2m-shadow-12-dp-clr: rgba(0, 28, 61, 0.14),
    0px 5px 22px rgba(0, 28, 61, 0.12), 0px 7px 8px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-16-dp-dir: 0px 16px 24px;
  --cox2m-shadow-16-dp-clr: rgba(0, 28, 61, 0.14),
    0px 6px 30px rgba(0, 28, 61, 0.12), 0px 8px 10px rgba(0, 28, 61, 0.2);

  --cox2m-shadow-24-dp-dir: 0px 24px 38px;
  --cox2m-shadow-24-dp-clr: rgba(0, 28, 61, 0.14),
    0px 9px 46px rgba(0, 28, 61, 0.12), 0px 11px 15px rgba(0, 28, 61, 0.2);
}

:root{
  --cox2m-brd-w-1: 1px;
  --cox2m-brd-w-2: 2px;
  --cox2m-brd-w-3: 4px;
}

/* utility classes to handle default direction box shadow */
.cox2m-shadow-0-dp {
  box-shadow: none;
}

.cox2m-shadow-1-dp {
  box-shadow: var(--cox2m-shadow-1-dp-dir) var(--cox2m-shadow-1-dp-clr);
}
.cox2m-shadow-2-dp {
  box-shadow: var(--cox2m-shadow-2-dp-dir) var(--cox2m-shadow-2-dp-clr);
}
.cox2m-shadow-3-dp {
  box-shadow: var(--cox2m-shadow-3-dp-dir) var(--cox2m-shadow-3-dp-clr);
}
.cox2m-shadow-4-dp {
  box-shadow: var(--cox2m-shadow-4-dp-dir) var(--cox2m-shadow-4-dp-clr);
}
.cox2m-shadow-6-dp {
  box-shadow: var(--cox2m-shadow-6-dp-dir) var(--cox2m-shadow-6-dp-clr);
}
.cox2m-shadow-8-dp {
  box-shadow: var(--cox2m-shadow-8-dp-dir) var(--cox2m-shadow-8-dp-clr);
}
.cox2m-shadow-12-dp {
  box-shadow: var(--cox2m-shadow-12-dp-dir) var(--cox2m-shadow-12-dp-clr);
}
.cox2m-shadow-16-dp {
  box-shadow: var(--cox2m-shadow-16-dp-dir) var(--cox2m-shadow-16-dp-clr);
}
.cox2m-shadow-24-dp {
  box-shadow: var(--cox2m-shadow-24-dp-dir) var(--cox2m-shadow-24-dp-clr);
}

/*
 * utility classes to handle text
 * font sizes that scale to bigger sizes in mobile will be handled with media query
 * if the remain the same size always we won't to anythhing
 * and cases that scale to lower fonts will be handled with fluid typography -> https://royalfig.github.io/fluid-typography-calculator/
 */

.cox2m-ft-display-1 {
  /* desktop/display-1-600 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-200);
  font-size: clamp(var(--cox2m-fs-200), 4.95rem + -1vw, var(--cox2m-fs-100));
  line-height: 1.5;
}
.cox2m-ft-display-2 {
  /* desktop/display-2-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-300);
  font-size: clamp(var(--cox2m-fs-300), 3.9rem + -0.75vw, var(--cox2m-fs-200));
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.cox2m-ft-display-3 {
  /* desktop/display-3-600 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-400);
  font-size: clamp(var(--cox2m-fs-400), 3.15rem + -0.75vw, var(--cox2m-fs-300));
  line-height: 1.5;
  letter-spacing: 0.4px;
}
.cox2m-ft-h1-large {
  /* desktop/h1-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-600);
  font-size: clamp(
    var(--cox2m-fs-600),
    2.25rem + -0.625vw,
    var(--cox2m-fs-500)
  );
  line-height: 1.53;
  letter-spacing: 0.25px;
}
.cox2m-ft-h1-large-bold {
  /* desktop/h1-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-600);
  font-size: clamp(
    var(--cox2m-fs-600),
    2.25rem + -0.625vw,
    var(--cox2m-fs-500)
  );
  line-height: 1.53;
  letter-spacing: 0.25px;
}

.cox2m-ft-h2-medium {
  /* desktop/h2-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-600);
  font-size: clamp(
    var(--cox2m-fs-600),
    2.25rem + -0.625vw,
    var(--cox2m-fs-500)
  );
  line-height: 1.75;
}
.cox2m-ft-h3-small {
  /* desktop/h3-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-900);
  font-size: clamp(var(--cox2m-fs-900), 1.3rem + -0.25vw, var(--cox2m-fs-700));
  line-height: 1.5;
  letter-spacing: 0.15px;
}
.cox2m-ft-subtitle-1 {
  /* desktop/subtitle-1-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-900);
  line-height: 1.5;
  letter-spacing: 0.15px;
}
.cox2m-ft-subtitle-2 {
  /* desktop/subtitle-2-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-100);
  line-height: 1.71;
  letter-spacing: 0.1px;
}
.cox2m-ft-body-1 {
  /* desktop/body-1-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-900);
  line-height: 1.5;
  letter-spacing: 0.5px;
}
.cox2m-ft-body-1-p {
  /* desktop/body-1-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-900);
  line-height: 1.5;
  letter-spacing: 0.5px;
}
.cox2m-ft-body-2 {
  /* desktop/body-2-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-100);
  line-height: 1.57;
  letter-spacing: 0.25px;
}
.cox2m-ft-body-2-bold {
  /* desktop/body-2-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-100);
  line-height: 1.57;
  letter-spacing: 0.25px;
}
.cox2m-ft-button {
  /* desktop/button-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-900);
  line-height: 1.5;
  letter-spacing: 0.75px;
}
.cox2m-ft-button-c2a {
  /* desktop/button-cta-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-100);
  line-height: 1.57;
  letter-spacing: 0.75px;
}
.cox2m-ft-caption {
  /* desktop/caption-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-1200);
  line-height: 1.5;
  letter-spacing: 0.4px;
}
.cox2m-ft-overline-1 {
  /* desktop/overline-300 */
  font-weight: var(--cox2m-fw-light);
  font-size: var(--cox2m-fs-1300);
  line-height: 1.4;
  letter-spacing: 1.5px;
}
.cox2m-ft-overline-2 {
  /* desktop/overline-600 */
  font-weight: var(--cox2m-fw-bold);
  font-size: var(--cox2m-fs-1300);
  line-height: 1.4;
  letter-spacing: 1.5px;
}
.cox2m-ft-link-1 {
  /* desktop/link-body-1-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-900);
  line-height: 1.5;
  text-decoration-line: underline;
}
.cox2m-ft-link-2 {
  /* desktop/link-body-2-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-100);
  line-height: 1.57;
  letter-spacing: 0.25px;
  text-decoration-line: underline;
}
.cox2m-ft-helper-link {
  /* desktop/link-helper-text-400 */
  font-weight: var(--cox2m-fw-regular);
  font-size: var(--cox2m-fs-1200);
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-decoration-line: underline;
}

@media only screen and (max-width: 1199px) {
  .cox2m-ft-display-1,
  .cox2m-ft-display-2,
  .cox2m-ft-display-3,
  .cox2m-ft-h1-large,
  .cox2m-ft-h1-large-bold,
  .cox2m-ft-h2-medium,
  .cox2m-ft-h3-small,
  .cox2m-ft-subtitle-1,
  .cox2m-ft-subtitle-2,
  .cox2m-ft-body-1,
  .cox2m-ft-body-1-p,
  .cox2m-ft-body-2,
  .cox2m-ft-body-2-bold,
  .cox2m-ft-button,
  .cox2m-ft-button-c2a,
  .cox2m-ft-caption,
  .cox2m-ft-overline-1,
  .cox2m-ft-overline-2,
  .cox2m-ft-link-1,
  .cox2m-ft-link-2,
  .cox2m-ft-helper-link {
    line-height: unset;
  }

  .cox2m-ft-link-1,
  .cox2m-ft-link-2,
  .cox2m-ft-helper-link {
    text-decoration: none;
  }

  .cox2m-ft-caption,
  .cox2m-ft-overline-1,
  .cox2m-ft-overline-2,
  .cox2m-ft-helper-link {
    font-size: var(--cox2m-fs-1100); /* 0.8125rem or 13px */
  }
}

.cursor-pointer {
  cursor: pointer;
}

*,
* + *,
*::after,
*::before {
  outline: none;
}