@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&family=Playwrite+NZ+Basic&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

:root {
    /* Main Brand Colors */
    --primary-blue: #1544A3;
    --dark-blue: #1F447B;
    --deep-blue: #133C8F;
    --accent-teal: #11AFB6;
    --accent-teal-dark: #129399;

    /* Neutral / UI Colors */
    --bg-light-blue: #E0EEFB;
    --bg-accent-blue: #F3F9FF;
    --text-white: #FFFFFF;
    --text-black: #000000;
    --text-muted-white: rgba(255, 255, 255, 0.6);
    --text-muted-blue: #DCEFFB;
    --text-para-blue: #466385;
    --border-glass: rgba(173, 184, 195, 0.2);
    --border-light-blue: #B9CDF8;

    /* Effects & Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-btn: rgba(255, 255, 255, 0.2);
    --glass-bg: rgba(0, 0, 0, 0.2);
    --glass-blur: blur(25px);
    --glass-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);

    /* Typography */
    --font-main: "Parkinsans", sans-serif;
}

body {
    font-family: var(--font-main);
    background: var(--primary-blue);
    font-weight: 300;
    letter-spacing: 0.04em;
    overflow-anchor: none; /* prevent browser scroll anchoring from conflicting with Lenis */
}

* {
    outline: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input,
button {
    -moz-appearance: none;
    -webkit-appearance: none;
}

input,
button,
div,
ul,
li {
    outline: none !important;
}

div {
    box-sizing: border-box;
}

a:link,
a:visited {
    text-decoration: none;
}

img {
    border: none;
    outline: none;
    max-width: 100%;
    display: block;
}

svg {
    display: block;
}

ul,
ul li {
    list-style-type: none
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.helperSpan {
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.clr {
    clear: both
}

.floatLft {
    float: left
}

.floatRgt {
    float: right
}

.inlineBlk {
    display: inline-block;
    vertical-align: middle
}

.table {
    display: table
}

.transition {
    transition: all .35s ease 0s;
    -moz-transition: all .35s ease 0s;
    -webkit-transition: all .35s ease 0s;
}

.col-100 {
    width: 100%
}

.col-90 {
    width: 90%
}

.col-80 {
    width: 80%
}

.col-70 {
    width: 70%
}

.col-60 {
    width: 60%
}

.col-50 {
    width: 50%
}

.col-40 {
    width: 40%
}

.col-30 {
    width: 30%
}

.col-20 {
    width: 20%
}

.col-10 {
    width: 10%
}

.flexDisplay {
    display: flex;
}

.justifySpace {
    justify-content: space-between;
}

.justifyStart {
    justify-content: flex-start;
}

.justifyEnd {
    justify-content: flex-end;
}

.justifyCenter {
    justify-content: center;
}

.alignStart {
    align-items: flex-start;
}

.alignEnd {
    align-items: flex-end;
}

.alignCenter {
    align-items: center;
}

.flexWrap {
    flex-flow: row wrap;
}

.flexColumn {
    flex-direction: column;
}

.textCenter {
    text-align: center;
}

.textLeft {
    text-align: left;
}

.textRight {
    text-align: right;
}

.np__fw500 {
    font-weight: 500;
}

.np__fw600 {
    font-weight: 600;
}

.np__fw700 {
    font-weight: 700;
}

.np__fw800 {
    font-weight: 800;
}

.np__fw900 {
    font-weight: 900;
}

.h_wrapper {
    max-width: 1920px;
    padding: 0 24px;
    margin: 0 auto;
}

.wrapper {
    max-width: 1398px;
    padding: 0 24px;
    margin: 0 auto;
}

.o_wrapper {
    max-width: 1814px;
    padding: 0;
    padding-left: 24px;
    margin: 0 0 0 auto;
    position: relative;
}

.c_wrapper {
    max-width: 1532px;
    padding: 0 24px;
    margin: 0 auto;
}

.s_wrapper {
    max-width: 1700px;
    padding: 0 24px;
    margin: 0 auto;
}

.ac_wrapper {
    max-width: 1763px;
    padding: 0 24px;
    margin: 0 auto;
}

.t_wrapper {
    max-width: 1738px;
    padding: 0 24px;
    margin: 0 auto;
}

.act_wrapper {
    max-width: 1807px;
    padding-left: 24px;
    margin: 0 0 0 auto;
}

.m_wrapper {
    max-width: 1488px;
    padding: 0 24px;
    margin: 0 auto;
}

.f_wrapper {
    max-width: 1097px;
    margin: 0 auto;
}