:root {
    --color-background: #1C7EAB;
    --color-background-light: #299BC8;
    --color-background-dark: #0A6389;
    --color-overlay: linear-gradient(#121D20b0 70%, #081217d0);

    --color-secondary: var(--color-background-dark);
    --color-primary: #FE9662;
    --text-color-primary-light: #FFAF85;
    --text-color-primary-dark: #D5520D;
    --text-color-dark: #1E4E66;
    --text-color: var(--text-color-light);
    --color-detail: #0A6389;

    --font-body: "Barlow", sans-serif;
    --font-display: "Barlow Condensed", sans-serif;

    --header-background-color: var(--color-background-dark);

    --swoosh-height: 60px;

    --font-size-h3: 2.5rem;

    --border-radius: 5px;

    color: var(--text-color-light);

    --font-size-h1: clamp(3rem, 2rem + 5vw, 4.5rem);
}

main {
    margin-top: 0;
    padding-top: calc(var(--header-size) + 2 * var(--padding-mega));
}

main:has(> .hero-banner:first-child) {
    padding-top: 0;
}

.header-decor {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.header-decor svg {
    width: 100%;
    min-width: 800px;
    max-height: var(--swoosh-height);
}

#header-decor-foreground path {
    fill: var(--color-background-dark)!important;
}

#header-decor-background path {
    fill: var(--color-background-light)!important;
}

nav a {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--text-color-light);
    text-transform: uppercase;
    font-size: 1.2rem;
}

.button {
    font-family: var(--font-display);
    font-weight: 800;
}

.button-primary {
    background: linear-gradient(#FFC5A6, #DD4C00);
    border: none;
    padding: 1px;
    transition: 75ms;
    color: var(--text-color-light);
    text-transform: uppercase;
    font-size: 1.2rem;
}

.button-primary .button-label {
    background: var(--color-primary);
    width: 100%;
    height: 100%;
    flex-grow: 1;
    border-radius: calc(var(--border-radius) - 1px);
    padding: var(--padding-small) var(--padding-medium);
    transition: 75ms;
    text-shadow: 0 1px 0 #63250060, 0 2px 2px #63250040;
}

.button-wrapper:hover .button-primary {
    transform: translateY(-2px);
    box-shadow: 0 2px 0 0 #00000060;
    color: var(--text-color-light);
}

.button-wrapper:hover .button-label {

}

h1 {
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1;
}

h2 {
    color: var(--text-color);
    text-transform: uppercase;
}

h3 {
    font-size: var(--font-size-h3);
}

p, h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}

.social-icon svg {
    fill: var(--text-color);
}

.p1 {
    font-size: 1.2rem;
    font-weight: 200;
}

.tag {
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-color-primary-light);
}

#header-swipe .logo-image-container {
    height: 130px;
    z-index: 100;
    width: 230px;
    max-width: unset;
}

#header-swipe .logo-image-container > img {
    max-height: 100%;
    height: unset;
}

#header-swipe .nav-toggle-wrapper {
    --hamburger-size-y: 3px;
}

#header-swipe .nav-toggle {
    width: 30px;
    height: 14px;
}

#header-swipe .nav-toggle:before, #header-swipe .nav-toggle:after {
    border-radius: 1px;
}

.hero-banner {
    padding: var(--swoosh-height) 0 var(--padding-mega);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-banner .tag {
    font-size: 1.2rem;
}

.hero-banner-content {
    align-items: flex-start;
}

.hero-banner-content > * {
    text-align: left;
    max-width: 800px;
}

#mega-columns {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    --text-color: var(--text-color-light);
}

.mega-column {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    min-height: max(70vh, 600px);
}

.mc-background-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.mc-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(#000000d0, #00000000 50%, #00000000 30%, #000000d0);
}

.mega-column > *:not(.mc-background-overlay, .mc-background-image-wrapper, .mc-top-accent) {
    position: relative;
    z-index: 1;
}

.mc-top-accent {
    font-family: var(--font-display);
    color: var(--text-color-light);
    font-weight: 800;
    font-size: 15rem;
    position: absolute;
    top: -.3em;
    left: 0;
    right: 0;
    text-align: center;
    opacity: .2;
    white-space: nowrap;
    margin: 0 -.1em;
}

.mc-top {
    max-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--padding-mega);
}

.mc-top svg {
    height: 100%;
}

.mc-bottom {
    color: var(--text-color-light);
    padding: var(--padding-large);
}

.mc-bottom:before {
    content: "";
    width: 60px;
    height: 3px;
    background: var(--text-color-light);
    display: block;
    margin-bottom: var(--padding-small);
}

.will-animate .mc-top-accent {
    opacity: 0;
    transform: translateX(-.2em);
}

.animate .mc-top-accent {
    opacity: .1;
    transform: none;
    transition: 1s;
}

.will-animate .mc-bottom:before {
    width: 0;
}

.animate .mc-bottom:before {
    width: 60px;
    transition: 1s;
    transition-delay: .8s;
}

.will-animate .mc-bottom-content {
    opacity: 0;
    transform: translateY(1em);
}

.animate .mc-bottom-content {
    opacity: 1;
    transition: 1s;
    transition-delay: .5s;
}

.style-light {
    background: #C8EAF6;
    --text-color: var(--text-color-dark);
}

.style-light .tag {
    color: var(--text-color-primary-dark);
}

.panel {
    padding: var(--padding-medium);
    border-radius: var(--border-radius);
}

form label {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
}

fieldset legend, form label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8em;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

fieldset label {
    flex-direction: row;
    align-items: center;
}

.form-group {
    display: flex;
    flex-direction: row;
    gap: var(--padding-small);
    flex-wrap: wrap;
}

.form-group > * {
    flex: 1 1 0;
}

.fieldset-options {
    display: flex;
    flex-direction: row;
    gap: var(--padding-small);
    flex-wrap: wrap;
}

.fieldset-options > * {
    flex: 1 1 0;
    min-width: 150px;
}

input[type=checkbox] {

    background: white;
}

footer a {
    color: var(--text-color);
}

.itb-content {
    background-color: #000000a0;
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius);
    overflow: hidden;
}

@media (min-width: 600px) {
    .itb-image, .reverse .itb-image {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1000px) {
    .image-text-banner-wrapper {
        min-height: 650px;
    }
}

@media (min-width: 1000px) {
    #header-swipe {
        position: relative;
    }

    main:has(.hero-banner:first-child) {
        margin-top: 0;
    }

    main {
        padding-top: calc(var(--padding-mega) * 2);
    }

    #header-swipe .header-wrapper {
        align-items: flex-end;
    }

    #header-swipe .logo-image-container {
        height: 170px;
        width: 270px;
    }
}

@media (min-width: 800px) {
    #mega-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}