:root {
    --cel-navy: #1f326b;
    --cel-pink: #ff3980;
    --cel-light-blue: #4abcec;
    --cel-black: #000000;
    --cel-dark-grey: #444444;
    --cel-grey: #7d7d7d;
    --cel-lilac: #f8f8ff;
    --cel-blue: #368bce;
}
@font-face {
    font-family: 'Metropolis';
    src: url('/assets/fonts/metropolis/metropolis-latin-400-normal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/assets/fonts/metropolis/metropolis-latin-400-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('/assets/fonts/metropolis/metropolis-latin-800-normal.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}


/* Body and Text Styling */
body {
    font-family: 'Metropolis';
    color: var(--cel-black);
}

h1 {
    font-weight: bold;
    color: var(--cel-navy);
    margin-bottom: 2rem;
    font-size: 2.2rem;
}

h2 {
    font-size: 1.08rem !important;
    color: var(--cel-navy);
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.933;
    letter-spacing: -0.01rem;
}

h3,
.h3 {
    letter-spacing: -0.01rem;
    color: var(--cel-navy);
    font-weight: bold;
}

h4 {
    font-size: 1.04rem;
    font-weight: bold;
}

p {
    line-height: 1.36;
    font-size: 1rem;
}

/* Links */
a {
    color: var(--cel-pink);
    transition: all 0.4s ease;
}

partial a:hover {
    color: var(--cel-pink);
    opacity: 0.64;
}