/* ---------------- fonts ------------------- */
:root {
    --font-family: "Mazzard Soft M", sans-serif;
}
/* ---------------- colours ------------------- */
:root {
    --text-icon-primary: #000000;
    --text-icon-secondary: rgba(0, 0, 0, 0.8);
    --text-icon-disabled: rgba(0, 0, 0, 0.65);
    --text-icon-primary-white: #ffffff;
    --text-icon-secondary-white: rgba(255, 255, 255, 0.75);
    --text-icon-disabled-white: rgba(255, 255, 255, 0.6);
    --color-neutral-25: #f2f4f5;
    --color-neutral-50: #ebedef;
    --color-neutral-100: #d7dadf;
    --color-neutral-200: #afb5be;
    --color-neutral-300: #87909e;
    --color-neutral-400: #5f6b7d;
    --color-neutral-500: #37465d;
    --color-neutral-600: #2c384a;
    --color-neutral-700: #212a38;
    --color-neutral-800: #161c25;
    --color-neutral-900: #0b0e13;
    --color-neutral-1000: #050709;
    --color-primary-25: #f4f6fe;
    --color-primary-50: #eaeffe;
    --color-primary-100: #d5dffd;
    --color-primary-200: #acbffb;
    --color-primary-300: #829ef8;
    --color-primary-400: #597ef6;
    --color-primary-500: #2f5ef4;
    --color-primary-600: #264bc3;
    --color-primary-700: #1c3892;
    --color-primary-750: #292c66;
    --color-primary-800: #132662;
    --color-primary-900: #0e1c49;
    --color-primary-1000: #171a4d;
    --color-success-700: #08875d;
    --color-success-800: #04724d;
    --color-success-900: #066042;
    --color-success-100: #edfdf8;
    --color-basic-white: #ffffff;
    --color-basic-black: #000000;
    --color-danger-700: #e02d3c;
    --color-danger-800: #ba2532;
    --color-danger-900: #c4122f;
    --color-danger-100: #fef1f2;
    --color-warning-100: #fff8eb;
    --color-warning-700: #b25e09;
    --color-warning-800: #96530f;
    --color-warning-900: #80460d;
    --text-primary: var(--color-neutral-700);jmj,mmhhjhl   
    --text-secondary: var(--color-neutral-400);
    --text-brand: var(--color-primary-500);
    --text-invert: var(--color-basic-white);
    --surface-primary-grey: var(--color-neutral-25);
    --surface-secondary: var(--color-neutral-800);
    --surface-light: var(--color-neutral-50);
    --surface-brand: var(--color-primary-500);
    --border-primary: var(--color-neutral-100);
    --text-disabled: var(--color-neutral-300);
    --border-focus: var(--color-primary-500);
    --border-active: var(--color-primary-500);
    --icon-brand: var(--color-primary-500);
    --icon-primary: var(--text-primary);
    --icon-inversed: var(--text-and-icon-primary-white);
    --icon-secondary: var(--text-secondary);
    --icon-light: var(--surface-primary-grey);
    --text-and-icon-primary-white: #ffffff;
    --text-and-icon-secondary-white: rgba(255, 255, 255, 0.75);
    --text-and-icon-disabled-white: rgba(255, 255, 255, 0.6);
    --text-and-icon-primary-black: #000000;
    --text-and-icon-secondary-black: rgba(0, 0, 0, 0.75);
    --text-and-icon-disabled-black: rgba(0, 0, 0, 0.6);
    --border-dark: var(--color-neutral-500);
    --border-inversed: var(--text-and-icon-primary-white);
    --surface-white: var(--text-and-icon-primary-white);
    --accent-yellow: #fbbe22;
    --border-dark-secondary: var(--color-neutral-400);
    --success-100: #f2f8f3;
    --success-200: #e5f0e6;
    --success-300: #c7e0ca;
    --success-400: #a4cfaa;
    --success-500: #78bc82;
    --success-600: #28a745;
    --success-700: #24953e;
    --success-800: #1f8135;
    --success-900: #196a2c;
    --success-1000: #124b1f;
    --surface-primary-blue: var(--color-primary-25);
    --surface-mid-grey: var(--color-neutral-400);
}
/* ---------------- shadows ------------------- */
:root {
    --shadow-light-100: 0 1px 1px 0 rgba(48, 49, 51, 0.1), 0 0 1px 0 rgba(48, 49, 51, 0.05);
    --shadow-light-200: 0 2px 4px 0 rgba(48, 49, 51, 0.1), 0 0 1px 0 rgba(48, 49, 51, 0.05);
    --shadow-light-300: 0 4px 8px 0 rgba(48, 49, 51, 0.1), 0 0 1px 0 rgba(48, 49, 51, 0.05);
    --shadow-light-400: 0 8px 16px 0 rgba(48, 49, 51, 0.1), 0 0 1px 0 rgba(48, 49, 51, 0.05);
    --shadow-light-500: 0 16px 24px 0 rgba(48, 49, 51, 0.09), 0 0 1px 0 rgba(48, 49, 51, 0.05);
    --shadow-light-600: 0 24px 40px 0 rgba(48, 49, 51, 0.08), 0 0 1px 0 rgba(48, 49, 51, 0.05);
    --shadow-light-700: 0 0 25px 10px rgba(48, 49, 51, 0.10), 0 0 1px 0 rgba(48, 49, 51, 0.05);
    /*----------*/
    --shadow-primary-100: 0 1px 1px 0 rgba(59, 40, 204, 0.1), 0 0 1px 0 rgba(59, 40, 204, 0.05);
    --shadow-primary-200: 0 2px 4px 0 rgba(59, 40, 204, 0.1), 0 0 1px 0 rgba(59, 40, 204, 0.05);
    --shadow-primary-300: 0 4px 8px 0 rgba(59, 40, 204, 0.1), 0 0 1px 0 rgba(59, 40, 204, 0.05);
    --shadow-primary-400: 0 8px 16px 0 rgba(59, 40, 204, 0.1), 0 0 1px 0 rgba(59, 40, 204, 0.05);
    --shadow-primary-500: 0 16px 24px 0 rgba(59, 40, 204, 0.09), 0 0 1px 0 rgba(59, 40, 204, 0.05);
    --shadow-primary-600: 0 24px 40px 0 rgba(59, 40, 204, 0.08), 0 0 1px 0 rgba(59, 40, 204, 0.05);
    /*----------*/
    --shadow-secondary-100: 0 1px 1px 0 rgba(38, 103, 255, 0.1), 0 0 1px 0 rgba(38, 103, 255, 0.05);
    --shadow-secondary-200: 0 2px 4px 0 rgba(38, 103, 255, 0.1), 0 0 1px 0 rgba(38, 103, 255, 0.05);
    --shadow-secondary-300: 0 4px 8px 0 rgba(38, 103, 255, 0.1), 0 0 1px 0 rgba(38, 103, 255, 0.05);
    --shadow-secondary-400: 0 8px 16px 0 rgba(38, 103, 255, 0.1), 0 0 1px 0 rgba(38, 103, 255, 0.05);
    --shadow-secondary-500: 0 16px 24px 0 rgba(38, 103, 255, 0.09), 0 0 1px 0 rgba(38, 103, 255, 0.05);
    --shadow-secondary-600: 0 24px 40px 0 rgba(38, 103, 255, 0.08), 0 0 1px 0 rgba(38, 103, 255, 0.05);
    /*----------*/
    --shadow-dark-100: 0 1px 1px 0 #000000, 0 0 1px 0 rgba(0, 0, 0, 0.9);
    --shadow-dark-200: 0 2px 4px 0 #000000, 0 0 1px 0 rgba(0, 0, 0, 0.9);
    --shadow-dark-300: 0 4px 8px 0 #000000, 0 0 1px 0 rgba(0, 0, 0, 0.9);
    --shadow-dark-400: 0 8px 16px 0 #000000, 0 0 1px 0 rgba(0, 0, 0, 0.9);
    --shadow-dark-500: 0 16px 24px 0 rgba(0, 0, 0, 0.99), 0 0 1px 0 rgba(0, 0, 0, 0.9);
    --shadow-dark-600: 0 24px 48px 0 rgba(0, 0, 0, 0.08);
}
/* ---------------- blurs ------------------- */
:root {
    --blur-8: blur(8px);
    --blur-16: blur(16px);
    --blur-24: blur(24px);
    --blur-32: blur(32px);
    --blur-40: blur(40px);
}
/* ---------------- spacings ------------------- */
:root {
    --05px: 0.0315rem;
    --1px: 0.063rem;
    --1px-minus: -0.063rem;
    --2px: 0.125rem;
    --2px-minus: -0.125rem;
    --3px: 0.188rem;
    --4px: 0.25rem;
    --5px: 0.3125rem;
    --6px: 0.3625rem;
    --8px: 0.5rem;
    --10px: 0.625rem;
    --12px: 0.75rem;
    --16px: 1rem;
    --20px: 1.25rem;
    --22px: 1.375rem;
    --24px: 1.5rem;
    --28px: 1.75rem;
    --32px: 2rem;
    --38px: 2.375rem;
    --40px: 2.5rem;
    --44px: 2.75rem;
    --48px: 3rem;
    --52px: 3.25rem;
    --54px: 3.375rem;
    --56px: 3.5rem;
    --60px: 3.75rem;
    --64px: 4rem;
    --72px: 4.5rem;
    --80px: 5rem;
    --88px: 5.5rem;
    --96px: 6rem;
    --104px: 6.5rem;
    --112px: 7rem;
    --120px: 7.5rem;
    --128px: 8rem;
    --144px: 9rem;
    --160px: 10rem;
    /*    ----------------  */
    --width-1: 5.3125rem; /* 85px */
    --width-2: 12.0625rem; /* 193px */
    --width-3: 18.875rem; /* 302px */
    --width-4: 25.6875rem; /* 411px */
    --width-5: 32.4375rem; /* 519px */
    --width-6: 39.25rem; /* 628px */
    --width-7: 46.0625rem; /* 737px */
    --width-8: 52.8125rem; /* 845px */
    --width-9: 59.625rem; /* 954px */
    --width-10: 66.4375rem; /* 1063px */
    --width-11: 73.1875rem; /* 1171px */
    --width-12: 80rem; /* 1280px */
    --width-full: 90rem; /* 1440px */
    /*    ----------------  */
}
/* ---------------- font-sizes ------------------- */
:root {
    --size-1-text: 7rem; /*112px*/
    --size-2-text: 6rem; /*96px*/
    --size-3-text: 5rem; /*80px*/
    --size-4-text: 4.5rem; /*72px*/
    --size-5-text: 3.75rem; /*60px*/
    --size-6-text: 3rem; /*48px*/
    --size-7-text: 2.75rem; /*44px*/
    --size-8-text: 2.25rem; /*36px*/
    --size-9-text: 1.75rem; /*28px*/
    --size-10-text: 1.5rem; /*24px*/
    --size-11-text: 1.375rem; /*22px*/
    --size-12-text: 1.25rem; /*20px*/
    --size-13-text: 1.125rem; /*18px*/
    --size-14-text: 1.5rem; /*24px*/
    --size-15-text: 1.375rem; /*22px*/
    --size-16-text: 1.25rem; /*20px*/
    --size-17-text: 1rem; /*16px*/
    --size-18-text: 1.125rem; /*18px*/
    --size-19-text: 0.875rem; /*14px*/
    --size-20-text: 0.75rem; /*12px*/
    --size-21-text: 0.625rem; /*10px*/
}
/* ---------------- letter-spacings ------------------- */
:root {
    --ls-1-txt: 0.002em;
    --ls-2-txt: 0.005em;
    --ls-3-txt: -0.01em;
    --ls-4-txt: -0.02em;
    --ls-5-txt: -0.04em;
    --ls-6-txt: 0.08em;
    --ls-7-txt: 0.02em;
    --ls-8-txt: 0.01em;
}
/* ---------------- border-radiuses ------------------- */
:root {
    --border-radius-1: 0.25rem;
    --border-radius-2: 1rem;
    --border-radius-3: 1.5rem;
    --border-radius-4: 2rem;
    --border-radius-5: .5rem;
}
/* ---------------- transitions ------------------- */
:root {
    --animation-default: .25s ease-in-out;
    --animation-primary: .4s cubic-bezier(.7, 0, .3, 1);
    --animation-fast: .3s cubic-bezier(.7, 0, .3, 1);
    --animation-smooth: .6s cubic-bezier(.7, 0, .3, 1);
    --animation-slow: .8s cubic-bezier(.7, 0, .3, 1);
}
/* ---------------- window-heights ------------------- */
:root {
    --vh: 1vh;
    --vh-2: 1vh;
    --window-height: calc(var(--vh, 1vh) * 100);
    --window-height-mob: calc(var(--vh-2, 1vh) * 100);
}
/* ---------------- body-styles ------------------- */
:root {
    --headings-color: var(--color-neutral-700);
    --link_left_offset: 20%;
    --link_height: 70px;
    --link_width: 88px;
    --alert_height: 0px;
    --header_height: 71px;
    --data-parallax-offset: 15%;
}