/* 

BREAKPOINTS

320px for smallest phones
360 px for most common phones
390 px for most common phones
420px for portrait phones
768px for tablets
992px for larger tablets
1024px for weird resolutions
1200px for large devices
1366px for most common laptop monitors
1600px for large laptops
1920px for most common monitors
2560px for iMacs

*/


/* FONTS */

/* League Spartan Variable */
@font-face {
    font-family: "League Spartan";
    src: url("../assets/LeagueSpartan-VariableFont_wght.woff2") format("woff2");
    font-display: swap;
    unicode-range: U+20-21, U+24-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+C1, U+C9,
        U+CD, U+D3, U+DA, U+DD, U+E1, U+E9, U+ED, U+F3, U+FA, U+FD, U+10C-10F,
        U+11A-11B, U+147-148, U+158-159, U+160-161, U+164-165, U+16E-16F, U+17D-17E,
        U+2010-2011, U+2013, U+2018, U+201A, U+201C, U+201E, U+2026, U+2030, U+20AC;
}

/* @link https://utopia.fyi/type/calculator?c=360,19,1.2,1920,22,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.8247rem, 0.8119rem + 0.0568vw, 0.88rem);
    --step--1: clamp(0.9896rem, 0.9641rem + 0.1132vw, 1.1rem);
    --step-0: clamp(1.1875rem, 1.1442rem + 0.1923vw, 1.375rem);
    --step-1: clamp(1.425rem, 1.3572rem + 0.3013vw, 1.7188rem);
    --step-2: clamp(1.71rem, 1.6088rem + 0.4497vw, 2.1484rem);
    --step-3: clamp(2.052rem, 1.9058rem + 0.6498vw, 2.6855rem);
    --step-4: clamp(2.4624rem, 2.256rem + 0.9175vw, 3.3569rem);
    --step-5: clamp(2.9549rem, 2.6684rem + 1.2731vw, 4.1962rem);
    --step-6: clamp(3.5459rem, 3.1537rem + 1.7429vw, 5.2452rem);
    --step-7: clamp(4.255rem, 3.7239rem + 2.3605vw, 6.5565rem);
    --step-8: clamp(5.106rem, 4.393rem + 3.1688vw, 8.1956rem);
    --step-9: clamp(6.1272rem, 5.1771rem + 4.2229vw, 10.2445rem);
    --step-10: clamp(7.3527rem, 6.0943rem + 5.5928vw, 12.8057rem);

    /* COLORS */

    --bg: #F4FDFF;
    --bg-alt: #ececec;
    --text: #333333;
    --text-heading: #252525;
    --primary: #0062FF;
    --primary-darker: #1D344A;
    --primary-darkest: #121F2C;
    --accent: #FFA800;

}


* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-family: 'Arial', sans-serif;
    font-size: var(--step-0);
}

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

a {
    color: inherit;
    text-decoration: none;
}


h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: var(--step-3);
    text-transform: uppercase;
}

h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: var(--step-2);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.container {
    width: min(1280px, 90%);
}

.section {
    width: 100%;
    padding: 2rem 1rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-alt {
    background-color: var(--bg-alt);
}

.section-dark {
    background-color: var(--primary-darker);
    color: var(--bg);
}


.button {
    color: var(--primary);
    padding: 1em 1.5em;
    border: 2px solid var(--primary);
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: var(--step--1);
    display: inline-block;
}

.button-cta {
    background-color: var(--primary);
    color: var(--bg);
}



.button:hover {
    background-color: var(--primary);
    color: var(--bg);
    transition: all 0.3s ease;
    font-weight: 600;
}

.button.button-cta:hover {
    background-color: var(--bg);
    color: var(--primary);
    transition: all 0.3s ease;
    font-weight: 600;
}



.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
}

.fade-in.visible {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}