@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

@font-face {
    font-family: 'Nexa';
    src: url('/Fonts/Nexa-Font-Family/Nexa Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Nexa';
    src: url('/Fonts/Nexa-Font-Family/Nexa Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Nexa';
    src: url('/Fonts/Nexa-Font-Family/Nexa Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-ExtraLightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-SemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-ExtraBoldItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/Fonts/Metropolis/Metropolis-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

:root {
    --color-primary-mint: #A1D7D4;
    --color-primary-indigo: #1A0D7C;
    --color-primary-indigo-light: #002999;
    --color-primary-violet: #6F4CFF;
    --color-primary-red: #D83333;
    --color-primary-teal: #82CAC7;
    --color-primary-sky: #9FDEEB;
    --color-secondary-ice: #F0F8FD;
    --color-secondary-shell: #FBF6F2;
    --color-secondary-dew: #EDF4F4;
    --color-secondary-mist: #FCF9FF;
    --color-secondary-bone: #FAF9F4;
    --color-secondary-pearl: #FAF5F6;
    --color-grey-obsidian: #0E101A;
    --color-grey-steel: #AEB0C1;
    --color-grey-steel50: #D7D8E0;
    --color-grey-steel75: #E6E8F0;
    --color-grey-steel90: #F5F8FA;
    --color-grey-cloud: #2D3880;
    --color-black-light: #000418;
    --color-white: #FFFFFF;
    --color-white-sky: #F6FCFC;
    --color-secondary-active: #F0F9F8;
    --font-roboto: 'Roboto', sans-serif;
    --font-nexa: Nexa;
    --font-sfprorounded: 'Roboto';
    --font-metropolis: 'Metropolis';
    --fontweight-bold: 700;
    --fontweight-medium: 500;
    --fontweight-regular: 400;
    --fontweight-light: 300;
    --fontsize-h1: 64px;
    --fontsize-h2: 34px;
    --fontsize-h3: 24px;
    --fontsize-h4: 20px;
    --fontsize-body: 16px;
    --fontsize-caption: 14px;
    --fontsize-button-large: 18px;
    --fontsize-h2-s: 12px;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-roboto);
}

h1:focus {
    outline: none;
}

/* ===== Custom Scrollbar ===== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-indigo-light) var(--color-grey-steel75);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-grey-steel75);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-indigo-light);
    border-radius: 10px;
    border: 2px solid var(--color-grey-steel75);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-indigo);
}

::-webkit-scrollbar-thumb:active {
    background: var(--color-primary-violet);
}

/* Corner where horizontal and vertical scrollbars meet */
::-webkit-scrollbar-corner {
    background: var(--color-grey-steel75);
}