﻿:root {
    --primaryBackgroundColor: #f68d38;
    --secondaryBackgroundColor: #f7f7f7;
    --primaryTextColor: #818285;
    --secondaryTextColor: #f68d38;
    --primaryHeaderColor: #4a4a4a;
    --colorWhite: #ffffff;
    --colorBlack: #242424;
    --primaryFontFamily: 'Century Gothic', sans-serif;
    --secondaryFontFamily: "Gill Sans MT", sans-serif;
    /* Responsive Spacing */
    --space-xs: 0.25rem; /* 4px */
    --space-sm: 0.5rem; /* 8px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 4rem; /* 64px */
}

p {
    font-family: var(--secondaryFontFamily);
    margin-bottom: 0 !important;
}

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: clip;
}

main#web__content {
    flex: 1;
    margin-top: 100px;
}

h1.heading-1 {
    font-size: 32px;
    line-height: 36px;
    font-family: var(--primaryFontFamily);
    color: var(--primaryHeaderColor, #4a4a4a);
}

h2.heading-2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    font-family: var(--primaryFontFamily);
    color: var(--primaryHeaderColor, #4a4a4a);
}

h3.heading-3 {
    font-size: 24px;
    line-height: 36px;
    font-family: var(--secondaryFontFamily);
    color: var(--secondaryTextColor, #f68d38);
}

h4.heading-4 {
    font-size: 22px;
    line-height: 36px;
    font-family: var(--primaryFontFamily);
    color: var(--primaryHeaderColor, #4a4a4a);
}

h5.heading-5 {
    font-size: 18px;
    line-height: 36px;
    font-family: var(--primaryFontFamily);
    color: var(--primaryHeaderColor, #4a4a4a);
}

h6.heading-6 {
    font-size: 16px;
    line-height: 36px;
    font-family: var(--primaryFontFamily);
    color: var(--primaryHeaderColor, #4a4a4a);
}

.link {
    color: var(--secondaryTextColor, #f68d38);
    text-decoration: none;
}

.primaryButton {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--colorWhite, #ffffff);
    background-color: var(--primaryBackgroundColor, #f68d38);
    max-width: fit-content;
    min-width: 170px;
    font-family: var(--primaryFontFamily);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    border: 2px solid var(--colorWhite, #ffffff);
    border-radius: 25px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), -1px 0 0 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
    padding: 6px 15px;
}

    .primaryButton:focus,
    .primaryButton:focus-visible,
    a:focus,
    a:focus-visible {
        outline: #f68d38 auto 1px;
        box-shadow: none;
    }

.accordion-item .accordion-header .accordion-button:focus,
.accordion-item .accordion-header .accordion-button:focus-visible {
    outline: #f68d38 auto 1px;
    border: 1px solid #f68d38;
    box-shadow: none;
}

.cta__button {
    color: var(--colorWhite, #ffffff);
    background-color: var(--primaryBackgroundColor, #f68d38);
    max-width: fit-content;
    min-width: 150px;
    font-family: var(--primaryFontFamily);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    border: 2px solid var(--colorWhite, #ffffff);
    border-radius: 25px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), -1px 0 0 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
    padding: 5px 15px;
}

    .cta__button a {
        color: inherit;
    }

.apply-bottom-margin {
    margin-bottom: 64px;
}

.apply-top-margin {
    margin-top: 64px;
}

.rte-color {
    color: orange;
}

.px-responsive {
    padding-inline: var(--space-md) !important;
}

.container--xxl {
    max-width: 1680px !important;
    margin: 0 auto !important;
}

@media (max-width: 1020px) {
    .apply-bottom-margin {
        margin-bottom: 48px;
    }

    .apply-top-margin {
        margin-top: 48px;
    }

    h1.heading-1 {
        font-size: 22px;
    }

    h2.heading-2 {
        font-size: 20px;
    }

    h3.heading-3 {
        font-size: 18px;
        line-height: 28px;
    }

    h4.heading-4 {
        font-size: 16px;
    }

    h5.heading-5 {
        font-size: 14px;
    }

    h6.heading-6 {
        font-size: 12px;
    }

    main#web__content {
        margin-top: 54px;
    }

    .px-responsive {
        padding-inline: var(--space-lg) !important;
    }
}

@media (min-width: 1020px) {
    .px-responsive {
        padding-inline: var(--space-3xl) !important;
    }
}

@media (max-width: 767px) {
    .px-responsive {
        padding-inline: var(--space-md) !important;
    }
}
