@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: 16px;
    --font-size-body: 0.8em;
    --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-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-green));

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

    --gap: 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-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.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 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%);

    --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%);

    /* --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%
    ); */
}