@font-face {
    font-family: "Museo Sans";
    src: url("../fonts/MuseoSans-300.woff2") format("woff2"),
        url("../fonts/MuseoSans-300.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: "Museo Sans";
    src: url("../fonts/MuseoSans-500.woff2") format("woff2"),
        url("../fonts/MuseoSans-500.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Museo Sans";
    src: url("../fonts/MuseoSans-700.woff2") format("woff2"),
        url("../fonts/MuseoSans-700.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Museo Sans";
    src: url("../fonts/MuseoSans-900.woff2") format("woff2"),
        url("../fonts/MuseoSans-900.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family-heading: "Museo Sans", "Inter", Verdana, sans-serif;
    --font-family-body: Verdana, sans-serif;
    --font-size-root: clamp(14px, 9.2px + 0.75vw, 16px);
    --font-size-body: 1rem;
    --line-height-body: 1.5em;

    --color-bg: #ffffff;
    --color-white: #ffffff;
    --color-surface: #f5f5f1;
    --color-text: #333333;
    --color-text-gray: #666666;
    --color-brand-green: #8ac646;
    --color-brand-army: #7aa845;
    --color-brand-gold: #f3b824;
    --color-brand-purple: #763f98;
    --color-brand-gray: #79797A;
    --color-brand-light-gray: #dddddd;
    --color-brand-blue: #204a8a;
    --color-brand-ice: #f7ffff;
    --color-brand-emerald: #01A29C;
    --color-brand-black: #222222;
    --color-brand-pjh-green: #0B806F;
    --color-brand-pjh-light-green: #10B49C;
    --color-brand-pjh-mint: #F0FAF9;
    --color-brand-pjh-dark-green: #17594F;
    --color-brand-gradient: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-army));

    --max-width: 1120px;
    --wide-width: 1440px;
    --medium-width: 800px;
    --narrow-width: 640px;
    --limit-width: 1080px;
    --header-offset: 5rem;

    --gap: clamp(18px, 4vw, 36px);
    --gap6: calc(var(--gap) / 6);
    --gap9: calc(var(--gap) / 4);
    --gap12: calc(var(--gap) / 3);
    --gap18: calc(var(--gap) / 2);
    --gap24: calc(var(--gap) / 3 * 2);
    --gap48: calc(var(--gap) / 3 * 4);
    --gap72: calc(var(--gap) * 2);
    --gap108: calc(var(--gap) * 3);

    --color-brand-black-rgb: 0 0 0;
    --color-brand-army-rgb: 122 168 69;
    --color-brand-gold-rgb: 243 184 36;
    --color-brand-emerald-rgb: 1 162 156;
    --color-brand-purple-rgb: 118 63 152;
    --color-brand-green-rgb: 138 198 70;
    --color-brand-blue-rgb: 32 74 138;
    --color-brand-surface-rgb: 245, 245, 241;

    --text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35);

    --heading-bg-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.8) 100%);

    --heading-bg-overlay-more: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);

    --heading-bg-overlay-home: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);

    --hero-slide-gradient:
        radial-gradient(ellipse 140% 30% at left bottom,
            rgb(0 0 0 / 0.9) 0%,
            rgb(0 0 0 / 0) 90%);
    --hero-slide-gradient-more:
        radial-gradient(ellipse 140% 60% at left bottom,
            rgb(0 0 0 / 0.9) 0%,
            rgb(0 0 0 / 0) 90%);
    --card-slide-gradient:
        radial-gradient(ellipse 160% 80% at left bottom,
            rgb(0 0 0 / 0.8) 0%,
            rgb(0 0 0 / 0) 80%);

    --card-slide-balanced-gradient:
        linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,1));

    --background-slide-gradient:
        radial-gradient(ellipse 150% 80% at left bottom,
            rgb(var(--color-brand-blue-rgb) / 1) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.7) 50%,
            rgb(var(--color-brand-blue-rgb) / 0) 80%),
        radial-gradient(ellipse 150% 80% at left bottom,
            rgb(0 0 0 / 0.5) 0%,
            rgb(0 0 0 / 0) 80%),
        radial-gradient(ellipse 150% 80% at right top,
            rgb(var(--color-brand-green-rgb) / 0.5) 0%,
            rgb(var(--color-brand-green-rgb) / 0) 50%);

    --background-slide-gradient-mild:
        radial-gradient(ellipse 150% 60% at left bottom,
            rgb(var(--color-brand-blue-rgb) / 1) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.5) 50%,
            rgb(var(--color-brand-blue-rgb) / 0) 80%),
        radial-gradient(ellipse 150% 60% at left bottom,
            rgb(0 0 0 / 0.5) 0%,
            rgb(0 0 0 / 0) 80%),
        radial-gradient(ellipse 150% 50% at right top,
            rgb(var(--color-brand-green-rgb) / 0.4) 0%,
            rgb(var(--color-brand-green-rgb) / 0) 0%);

    --background-visual-gradient:
        radial-gradient(ellipse 150% 80% at left bottom,
            rgb(var(--color-brand-blue-rgb) / 1) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.5) 50%,
            rgb(var(--color-brand-blue-rgb) / 0) 80%),
        radial-gradient(ellipse 150% 80% at left bottom,
            rgb(0 0 0 / 0.5) 0%,
            rgb(0 0 0 / 0) 80%),
        radial-gradient(ellipse 150% 80% at right top,
            rgb(var(--color-brand-green-rgb) / 0.4) 0%,
            rgb(var(--color-brand-green-rgb) / 0) 50%);

    --background-visual-gradient-mild:
        radial-gradient(ellipse 150% 60% at left bottom,
            rgb(var(--color-brand-blue-rgb) / 1) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.5) 50%,
            rgb(var(--color-brand-blue-rgb) / 0) 80%),
        radial-gradient(ellipse 150% 60% at left bottom,
            rgb(0 0 0 / 0.5) 0%,
            rgb(0 0 0 / 0) 80%),
        radial-gradient(ellipse 150% 50% at right top,
            rgb(var(--color-brand-green-rgb) / 0.4) 0%,
            rgb(var(--color-brand-green-rgb) / 0) 0%);

    --background-visual-gradient-mild-black:
        radial-gradient(ellipse 180% 60% at left bottom,
            rgb(var(--color-brand-black-rgb) / 0.8) 0%,
            rgb(var(--color-brand-black-rgb) / 0.5) 40%,
            rgb(var(--color-brand-black-rgb) / 0) 100%);

    --background-sustain-gradient:
        radial-gradient(ellipse 140% 120% at right bottom,
            rgb(var(--color-brand-blue-rgb) / 1) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.5) 50%,
            rgb(var(--color-brand-blue-rgb) / 0) 80%),
        radial-gradient(ellipse 140% 120% at right bottom,
            rgb(0 0 0 / 0.8) 0%,
            rgb(0 0 0 / 0.6) 50%,
            rgb(0 0 0 / 0) 100%),
        radial-gradient(ellipse 140% 80% at right top,
            rgb(var(--color-brand-green-rgb) / 0.4) 0%,
            rgb(var(--color-brand-green-rgb) / 0) 30%);

    --background-sustain-gradient2:
        radial-gradient(ellipse 120% 80% at right bottom,
            rgb(var(--color-brand-blue-rgb) / 1) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.5) 50%,
            rgb(var(--color-brand-blue-rgb) / 0) 80%),
        radial-gradient(ellipse 120% 80% at right bottom,
            rgb(0 0 0 / 0.8) 0%,
            rgb(0 0 0 / 0.6) 50%,
            rgb(0 0 0 / 0) 100%),
        radial-gradient(ellipse 120% 80% at right top,
            rgb(var(--color-brand-green-rgb) / 0.4) 0%,
            rgb(var(--color-brand-green-rgb) / 0) 30%);


    --background-visual-gradient-content:
        radial-gradient(ellipse 300% 200% at left bottom,
            rgb(0 0 0 / 1) 20%,
            rgb(0 0 0 / 0.5) 50%,
            rgb(0 0 0 / 0) 80%);
    
    --footer-column-count: 3;

    /* --background-sustain-gradient: 
    radial-gradient(ellipse 160% 80% at left bottom,
            rgb(var(--color-brand-blue-rgb) / 1) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.5) 50%,
            rgb(var(--color-brand-blue-rgb) / 0) 80%),
        radial-gradient(ellipse 160% 80% at left bottom,
            rgb(0 0 0 / 0.8) 0%,
            rgb(0 0 0 / 0.6) 50%,
            rgb(0 0 0 / 0) 100%),
        radial-gradient(ellipse 160% 80% at right top,
            rgb(var(--color-brand-green-rgb) / 0.4) 0%,
            rgb(var(--color-brand-green-rgb) / 0) 30%)
            ; */

    /* --background-visual-gradient: linear-gradient(20deg,
            rgb(var(--color-brand-blue-rgb) / 0.9) 0%,
            rgb(var(--color-brand-blue-rgb) / 0.8) 20%,
            rgb(var(--color-brand-green-rgb) / 0.8) 40%,
            rgb(var(--color-brand-green-rgb) / 0) 60%,
            rgb(var(--color-brand-green-rgb) / 0) 80%,
            rgb(var(--color-brand-green-rgb) / 0) 100%), linear-gradient(20deg,
            rgba(0 0 0 / 0.7) 0%,
            rgba(0 0 0 / 0) 60%,
            rgba(0 0 0 / 0) 100%); */

    /* --background-visual-gradient: radial-gradient(
        ellipse 150% 80% at left bottom,
        rgb(var(--color-brand-blue-rgb) / 0.9) 0%,
        rgb(var(--color-brand-blue-rgb) / 0.8) 20%,
        rgb(var(--color-brand-green-rgb) / 0.8) 40%,
        rgb(var(--color-brand-green-rgb) / 0) 60%,
        rgb(var(--color-brand-green-rgb) / 0) 80%,
        rgb(var(--color-brand-green-rgb) / 0) 100%
    ),
    radial-gradient(
        ellipse 150% 90% at left bottom,
        rgba(0 0 0 / 0.7) 0%,
        rgba(0 0 0 / 0) 60%,
        rgba(0 0 0 / 0) 100%
    ); */

    /* --background-visual-gradient: radial-gradient(
        ellipse 150% 80% at left bottom,
        rgb(var(--color-brand-blue-rgb) / 0.9) 10%,
        rgb(var(--color-brand-blue-rgb) / 0.8) 40%,
        rgb(var(--color-brand-green-rgb) / 0.8) 60%,
        rgb(var(--color-brand-green-rgb) / 0) 80%,
        rgb(var(--color-brand-green-rgb) / 0) 100%
    ),
    radial-gradient(
        ellipse 150% 90% at left bottom,
        rgba(0 0 0 / 0.5) 0%,
        rgba(0 0 0 / 0) 100%
    ); */
}