/*|| Typography */
.ng-serif-regular {
    font-family: var(--ng-font-serif-regular);
    font-weight: 400;
    line-height: 140%;
}

    .ng-serif-regular.ng-6xl {
        font-size: var(--ng-size-72px);
        line-height: 110%;
    }

    .ng-serif-regular.ng-5xl {
        font-size: var(--ng-size-64px);
        line-height: 110%;
    }

    .ng-serif-regular.ng-4xl {
        font-size: var(--ng-size-40px);
    }

    .ng-serif-regular.ng-3xl {
        font-size: var(--ng-size-28px);
    }

    .ng-serif-regular.ng-2xl {
        font-size: var(--ng-size-24px);
    }

    .ng-serif-regular.ng-xl {
        font-size: var(--ng-size-20px);
    }

    .ng-serif-regular.ng-l {
        font-size: var(--ng-size-18px);
    }

    .ng-serif-regular.ng-m {
        font-size: var(--ng-size-16px);
    }

.ng-sans-regular {
    font-family: var(--ng-font-sans-regular);
    font-weight: 400;
    line-height: 140%;
}

.ng-sans-medium {
    font-family: var(--ng-font-sans-medium);
    font-weight: 500;
    line-height: 140%;
}

.ng-sans-semibold {
    font-family: var(--ng-font-sans-semibold);
    font-weight: 600;
    line-height: 140%;
}

    .ng-sans-regular.ng-6xl,
    .ng-sans-medium.ng-6xl,
    .ng-sans-semibold.ng-6xl {
        font-size: var(--ng-size-48px);
        line-height: 120%;
    }

    .ng-sans-regular.ng-5xl,
    .ng-sans-medium.ng-5xl,
    .ng-sans-semibold.ng-5xl {
        font-size: var(--ng-size-36px);
        line-height: 120%;
    }

    .ng-sans-regular.ng-4xl,
    .ng-sans-medium.ng-4xl,
    .ng-sans-semibold.ng-4xl {
        font-size: var(--ng-size-32px);
        line-height: 125%;
    }

    .ng-sans-regular.ng-3xl,
    .ng-sans-medium.ng-3xl,
    .ng-sans-semibold.ng-3xl {
        font-size: var(--ng-size-28px);
        line-height: 125%;
    }

    .ng-sans-regular.ng-2xl,
    .ng-sans-medium.ng-2xl,
    .ng-sans-semibold.ng-2xl {
        font-size: var(--ng-size-24px);
        line-height: 130%;
    }

    .ng-sans-regular.ng-xl,
    .ng-sans-medium.ng-xl,
    .ng-sans-semibold.ng-xl {
        font-size: var(--ng-size-20px);
    }

    .ng-sans-regular.ng-l,
    .ng-sans-medium.ng-l,
    .ng-sans-semibold.ng-l {
        font-size: var(--ng-size-18px);
    }

    .ng-sans-regular.ng-m,
    .ng-sans-medium.ng-m,
    .ng-sans-semibold.ng-m {
        font-size: var(--ng-size-16px);
    }

    .ng-sans-regular.ng-s,
    .ng-sans-medium.ng-s,
    .ng-sans-semibold.ng-s {
        font-size: var(--ng-size-14px);
        line-height: 130%;
    }

    .ng-sans-regular.ng-xs,
    .ng-sans-medium.ng-xs,
    .ng-sans-semibold.ng-xs {
        font-size: var(--ng-size-12px);
        line-height: 130%;
    }

.force-font-52 {
    font-size: var(--ng-size-52px) !important;
}

@media (max-width: 576px) {
    /*  
    Font sizes seemed to vary on certain components on mobile. I was originally going to just have standard mobile sizes using below.
    .ng-serif-regular.ng-6xl {
        font-size: var(--ng-size-40px);
        line-height: 130%;
    }

    .ng-sans-regular.ng-l,
    .ng-sans-medium.ng-l,
    .ng-sans-semibold.ng-l {
        font-size: var(--ng-size-16px);
    }

    .ng-sans-regular.ng-m,
    .ng-sans-medium.ng-m,
    .ng-sans-semibold.ng-m {
        font-size: var(--ng-size-12px);
        line-height: 130%;
    }*/
}

/* End Typography */

/* || Colors */
.ng-white {
    color: white;
}

.ng-black {
    color: black;
}

.ng-blue01 {
    color: var(--ng-color-blue01);
}

.ng-blue02 {
    color: var(--ng-color-blue02);
}

.ng-blue03 {
    color: var(--ng-color-blue03);
}

.ng-blue04 {
    color: var(--ng-color-blue04);
}

.ng-blue05 {
    color: var(--ng-color-blue05);
}

.ng-blue06 {
    color: var(--ng-color-blue06);
}

.ng-blue07 {
    color: var(--ng-color-blue07);
}

.ng-blue08 {
    color: var(--ng-color-blue08);
}

.ng-light-blue01 {
    color: var( --ng-color-light-blue01);
}

.ng-light-blue02 {
    color: var( --ng-color-light-blue02);
}

.ng-light-blue03 {
    color: var( --ng-color-light-blue03);
}

.ng-light-blue04 {
    color: var( --ng-color-light-blue04);
}

.ng-light-blue05 {
    color: var( --ng-color-light-blue05);
}

.ng-light-blue06 {
    color: var( --ng-color-light-blue06);
}

.ng-aqua01 {
    color: var(--ng-color-aqua01);
}

.ng-aqua02 {
    color: var(--ng-color-aqua02);
}

.ng-aqua03 {
    color: var(--ng-color-aqua03);
}

.ng-aqua04 {
    color: var(--ng-color-aqua04);
}

.ng-aqua05 {
    color: var(--ng-color-aqua05);
}

.ng-aqua06 {
    color: var(--ng-color-aqua06);
}

.ng-dark01 {
    color: var(--ng-color-dark01);
}

.ng-dark02 {
    color: var(--ng-color-dark02);
}

.ng-dark03 {
    color: var(--ng-color-dark03);
}

.ng-dark04 {
    color: var(--ng-color-dark04);
}

.ng-dark05 {
    color: var(--ng-color-dark05);
}

.ng-dark06 {
    color: var(--ng-color-dark06);
}

.ng-dark07 {
    color: var(--ng-color-dark07);
}

.ng-dark08 {
    color: var(--ng-color-dark08);
}

.ng-yellow01 {
    color: var(--ng-color-yellow01);
}

.ng-yellow02 {
    color: var(--ng-color-yellow02);
}

.ng-yellow03 {
    color: var(--ng-color-yellow03);
}

.ng-yellow04 {
    color: var(--ng-color-yellow04);
}

.ng-yellow05 {
    color: var(--ng-color-yellow05);
}

.ng-yellow06 {
    color: var(--ng-color-yellow06);
}

.ng-yellow07 {
    color: var(--ng-color-yellow07);
}

.ng-yellow08 {
    color: var(--ng-color-yellow08);
}
/* End Colors */

/* || Components*/

/* || Background colors */
.bg-beige {
    background-color: var(--ng-color-beige02);
    border-radius: 12px;
}

.bg-light-blue {
    background-color: var(--ng-color-light-blue01);
    border-radius: 12px;
}

.bg-dark-gradient {
    background-image: radial-gradient( circle at bottom right, #34a795 0%, #206164 35%, #0a172d 70%, #071023 100% );
    border-radius: 12px;
}

.bg-dark-blue {
    background-color: var(--ng-color-blue08);
    border-radius: 12px;
}

.bg-dark-black {
    background-color: black;
}
/* Font color swap for dark background */
.bg-dark [class*="ng-blue"]:not(.keep-color *),
.bg-dark-gradient [class*="ng-blue"]:not(.keep-color *),
.bg-dark-blue [class*="ng-blue"]:not(.keep-color *) {
    color: white;
}

.component-spacing[class*="bg-"] {
    padding-top: var(--ng-size-120px);
    padding-bottom: var(--ng-size-120px);
}
/* End Background colors */

.component-spacing {
    margin-bottom: var(--ng-size-120px);
}


.ng-eyebrow {
    color: var(--ng-color-blue);
    font-family: var(--ng-font-eyebrow-footer-body-bold);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4rem;
    margin-bottom: 12px;
}

.ng-blue-bg-eyebrow {
    font-family: var(--ng-font-eyebrow-footer-body-bold);
    font-weight: 600;
    font-size: .875rem;
    background-color: var(--ng-color-light-blue);
    color: var(--ng-color-blue);
    padding: .625rem .375rem;
    border-radius: .25rem;
    display: inline-block; /* May not be needed. */
    /* line-height: 130%; */
    /* letter-spacing: 0%; */
}

/* From slick CSS for the arrow buttons */
.slick-sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}


@media (max-width:991px) {
    .component-spacing {
        padding-top: var(--ng-size-60px);
        padding-bottom: var(--ng-size-60px);
        margin-bottom: var(--ng-size-60px);
    }
}
/* End Components */

/* || Bootstrap overrides/extensions */
.container, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 10.25rem; /* design has a large 82px padding on either side. */
}

@media (max-width:991px) {
    .container, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
        --bs-gutter-x: 2rem; /* design has a 16px padding on mobile. */
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1440px; /* design is set to 1440px width. */
    }
}

#content.container, #footer.container, #header.container {
    padding: 0;
    margin: 0;
    max-width: none;
    width: auto;
}

.mb-10px {
    margin-bottom: var(--ng-size-10px);
}

.mb-12px {
    margin-bottom: var(--ng-size-12px);
}

.mb-20px {
    margin-bottom: var(--ng-size-20px);
}

.mb-24px {
    margin-bottom: var(--ng-size-24px);
}

.mb-32px {
    margin-bottom: var(--ng-size-32px);
}

.mb-35px {
    margin-bottom: var(--ng-size-35px);
}

.mb-40px {
    margin-bottom: var(--ng-size-40px);
}

.mb-60px {
    margin-bottom: var(--ng-size-60px);
}

.ml-10px {
    margin-left: var(--ng-size-10px);
}

.ml-28px {
    margin-left: var(--ng-size-28px);
}

.mr-45px {
    margin-right: var(--ng-size-45px);
}

.mr-60px {
    margin-right: var(--ng-size-60px);
}

sup {
    top: 0.25em;
    font-size: 1.75em;
}
/* End Bootstrap overrides/extensions */