:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #4056e6; /**Blue**/
    --primaryLight: #62d0edff; /**Light Blue**/
    --secondary: #2c2c2c; /**Black**/
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    --backgroundColor: #e8f5f9;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

html{
  scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans 3', sans-serif;

}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}


/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-3-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/source-sans-3-v18-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

body,
html {
    /* reset margin and padding so there's no gap between the nav and the screen edges */
    margin: 0;
       padding: 0;
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
        overflow: hidden;
    }
    #cs-navigation {
        width: 100%;
        padding: 1.25rem 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: white;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: fixed;
        z-index: 10000;
    }
    #cs-navigation:before {
        content: "";
        width: 100%;
        height: 0vh;
        background: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        position: absolute;
        display: block;
        top: 100%;
        right: 0;
        z-index: -1100;
        opacity: 0;
        transition:
            height 0.5s,
            opacity 0.5s;
    }
    #cs-navigation.cs-active:before {
        height: 150vh;
        opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
        opacity: 1;
        transform: scaleY(1);
        transition-delay: 0.15s;
    }
    #cs-navigation.cs-active .cs-li {
        transform: translateY(0);
        opacity: 1;
    }
    #cs-navigation .cs-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    #cs-navigation .cs-logo {
        width: 40%;
        max-width: 9.125rem;
        height: 100%;
        margin: 0 auto 0 0;
        padding: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }
    #cs-navigation .cs-logo img {
        width: 60%;
        height: 100%;
        /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
        object-fit: contain;
    }
    #cs-navigation .cs-toggle {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0 0 0 auto;
        border-radius: 0.25rem;
        background-color: var(--primary);
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-navigation .cs-active .cs-line1 {
        top: 50%;
        transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
        top: 50%;
        transform-origin: center;
        transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    }
    #cs-navigation .cs-active .cs-line3 {
        bottom: 100%;
        opacity: 0;
    }
    #cs-navigation .cs-box {
        /* 24px - 28px */
        width: clamp(1.5rem, 2vw, 1.75rem);
        height: 1rem;
        position: relative;
    }
    #cs-navigation .cs-line {
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: #fafbfc;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
        top: 0;
        transform-origin: center;
        transition:
            transform 0.5s,
            top 0.3s,
            left 0.3s;
        animation-duration: 0.7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    #cs-navigation .cs-line2 {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition:
            top 0.3s,
            left 0.3s,
            transform 0.5s;
        animation-duration: 0.7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    #cs-navigation .cs-line3 {
        bottom: 0;
        transition:
            bottom 0.3s,
            opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
        width: 100%;
        height: auto;
        padding-bottom: 2.4em;
        opacity: 0;
        background-color: #fff;
        box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        transform: scaleY(0);
        transform-origin: top;
        transition:
            transform 0.4s,
            opacity 0.3s;
    }
    #cs-navigation .cs-ul {
        margin: 0;
        padding: 3rem 0 0 0;
        width: 100%;
        height: auto;
        max-height: 65vh;
        overflow: scroll;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }
    #cs-navigation .cs-li {
        width: 100%;
        text-align: center;
        list-style: none;
        margin-right: 0;
        /* transition from these values */
        transform: translateY(-4.375rem);
        opacity: 0;
        transition:
            transform 0.6s,
            opacity 0.9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
        transition-delay: 0.05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
        transition-delay: 0.1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
        transition-delay: 0.15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
        transition-delay: 0.2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
        transition-delay: 0.25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
        transition-delay: 0.3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
        transition-delay: 0.35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
        transition-delay: 0.4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
        transition-delay: 0.45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
        transition-delay: 0.5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
        transition-delay: 0.55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
        transition-delay: 0.6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
        transition-delay: 0.65s;
    }
    #cs-navigation .cs-li-link {
        /* 16px - 24px */
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        line-height: 1.2em;
        text-decoration: none;
        margin: 0;
        color: var(--headerColor);
        display: inline-block;
        position: relative;
    }
    #cs-navigation .cs-li-link.cs-active {
        color: var(--primary);
    }
    #cs-navigation .cs-li-link:hover {
        color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
        display: none;
    }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-navigation {
        width: 100%;
        padding: 0 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: white;
        position: fixed;
        z-index: 10000;
    }
    #cs-navigation .cs-container {
        width: 100%;
        /* same height as the cs-ul-wrapper */
        height: 5.8125rem;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1.5rem;
        position: relative;
    }
    #cs-navigation .cs-toggle {
        display: none;
    }
    #cs-navigation .cs-logo {
        width: 18.4%;
        max-width: 21.875rem;
        height: 4rem;
        /* margin-right auto pushes everything away from it to the right */
        margin: 0 auto 0 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }
    #cs-navigation .cs-logo img {
        width: 100%;
        height: 100%;
        /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
        object-fit: contain;
    }
    #cs-navigation .cs-ul-wrapper {
        /* absolutely positioned to be dead center */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    #cs-navigation .cs-ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* 20px - 36px */
        gap: clamp(.6rem, 1vw, 1.6rem);
    }
    #cs-navigation .cs-li {
        list-style: none;
        padding: 2.25rem 0;
        /* prevent flexbox from squishing it */
        flex: none;
    }
    #cs-navigation .cs-li-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 0.6vw, 1rem);
        font-weight: bold;
        line-height: 1.5em;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0;
        color: #6d6d6d;
        display: block;
        position: relative;
        transition: color 0.3s;
        padding: .5rem 1.5rem .5rem 1.5rem;
        border-radius: .5rem;
    }
    #cs-navigation .cs-li-link:hover {
        color: var(--headerColor);
        background-color: #f7f7f7;
    }
    #cs-navigation .cs-li-link.cs-active {
        color: var(--headerColor);
        background-color: #f7f7f7;
    }
    #cs-navigation .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 2rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
        border-radius: 0.5rem;
        overflow: hidden;
    }
    #cs-navigation .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
        border-radius: 0.5rem;
    }
    #cs-navigation .cs-button-solid:hover {
        color: #fff;
    }
    #cs-navigation .cs-button-solid:hover:before {
        width: 100%;
        border-radius: 0.5rem;
    }
}

/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-106 {
        padding: 2.5rem 1rem 1.25rem;
        background: #4056e6;;
    }
    #cs-footer-106 .cs-container {
        width: 100%;
        max-width: 67.5rem;
        margin: auto;
    }
    #cs-footer-106 .cs-ul {
        padding: 0 0 2.5rem;
        margin: auto;
        border-bottom: 1px solid #eff0f6;
    }
    #cs-footer-106 .cs-li {
        list-style: none;
        text-align: center;
        margin-bottom: 1.25rem;
    }

    #cs-footer-106 .cs-li .cs-footer-contact {
        list-style: none;
        text-align: center;
        margin-bottom: 1.25rem;
    }

    #cs-footer-106 .cs-link {
        /* 15px - 17px */
        font-size: clamp(0.9375rem, 2vw, 1.0625rem);
        line-height: 1.5em;
        text-decoration: none;
        font-weight: 700;
        color: var(--bodyTextColorWhite);
        position: relative;
    }
    #cs-footer-106 .cs-link:hover{
        width: 100%;
        color: grey;
    }
    #cs-footer-106 .cs-bottom {
        margin-top: 1.25rem;
        display: flex;
        /* set everyone to position on the left side */
        justify-content: flex-start;
        align-items: center;
    }
    #cs-footer-106 .cs-copyright {
        font-size: 0.9375rem;
        text-align: center;
        color: #a0a3bd;
        display: block;
        /* margin right auto on a flexbox pushes everyone else to the right */
        margin: 0 auto 0 0;
    }
    #cs-footer-106 .cs-social-link {
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 0.75rem;
        background: #a0a3bd;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-footer-106 .cs-social-link img {
        height: 0.6875rem;
        width: auto;
    }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
    #cs-footer-106 .cs-ul {
        display: flex;
        /* push everything to the left */
        justify-content: flex-start;
        align-items: center;
    }
    #cs-footer-106 .cs-li {
        /* 45px - 88px */
        margin: 0 clamp(2.8125rem, 7vw, 5.5rem) 0 0;
    }
    #cs-footer-106 .cs-footer-contact{
        margin: 0;
        /* margin-left auto will push everything away and force it to the farthest 
                   right edge */
        margin-left: auto;
    }

    #cs-footer-106 .cs-li:last-of-type{
        margin-left: clamp(2.8125rem, 7vw, 5.5rem);
    }