/*Copyright 2025 Registration Control Systems

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.*/

@font-face {
    font-family: "Arimo";
    src: url(../../assets/css/fonts/Arimo/Arimo-VariableFont_wght.ttf);
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes borderAnimation {
    0% {
        width: 0%;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        width: 98%;
        opacity: 1;
    }
}

@keyframes spinAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

html {
    scroll-behavior: smooth;
    z-index: -1000;
}

body {
    font-family: "Arimo", sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    z-index: -1000;
    overflow-x: hidden;
}

/* This section is going to be for the navigation bar */
.navbar-home {

    ul {
        position: fixed;
        top: 0;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        display: block;
        list-style-type: none;
        z-index: auto;
        z-index: 1000;
        transition: top 0.3s;
        transition: background-color 250ms ease;

    }

    /*This displays a nav section suitable for larger screens like computers, laptops and tvs*/
    @media all and (min-width: 1119px) {

        .standard {

            .material-symbols-outlined {
                font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
                display: none;
            }

            .box {
                float: right;
                display: inline-flex;
            }

            li {
                display: flex;
                float: left !important;
                pointer-events: none;
                text-align: right !important;
            }

            li img {
                width: auto;
                height: 60px;
                margin: 14px 10px 0px;
                cursor: pointer;
                float: inherit;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: height 150ms ease-in-out;
            }

            .drop-button {
                padding-top: 0px;
                border-top: 2px solid transparent;
                cursor: pointer;
                display: block;
                color: #ffffff;
                padding-bottom: 35px;
                margin: 32px 40px 0px 0px;
                font-weight: 600;
                font-size: 17px;
                text-decoration: none;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: padding-bottom 150ms linear, margin 150ms ease-in-out, color 100ms linear, padding-top 150ms ease-in-out, border-top 150ms ease;
            }

            .dropdown-content {
                top: 89px;
                position: absolute;
                background-color: #2951ad;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
                pointer-events: none;
                transition: opacity 150ms ease-in-out, max-height 375ms ease-in-out, top 150ms linear;
                transition-delay: 75ms, top 0ms;
                overflow: hidden;
                opacity: 0;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 17px;
                display: block;
                padding: 14px;
                transition: color 100ms linear, background-color 100ms linear;
                min-width: max-content;
            }

            .dropdown-content a:hover {
                color: #f7f7f7;
                background-color: #23479d;
                text-decoration: underline;
            }

            .dropdown:hover .dropdown-content,
            .dropdown:focus-within .dropdown-content {
                pointer-events: auto;
                opacity: 1;
            }

            .dropdown:hover .drop-button {
                color: #f7f7f7;
                border-top: 2px solid #f7f7f7;
                padding-top: 8px;
                margin: 24px 40px 0px 0px;

            }

            .request {
                font-size: 15px !important;
                margin-top: 26px;
                margin-right: 20px;
                font-weight: bolder;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: block;
                color: #3257af;
                transition: background-color 100ms linear, margin-top 150ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 10px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f0f2f4;
            }
        }

    }

    /*This displays a nav section suitable for smaller screens like phones and tablets*/
    @media all and (min-width: 0em) and (max-width: 1119px) {

        ul {
            background-color: #23479d;
        }

        .standard {

            .border {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
            }

            .border-last {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
                margin-bottom: 20px;
            }

            .container {
                display: block;
                cursor: pointer;
                margin: 10px 20px 5px 0px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                float: right;
            }

            .bar1,
            .bar2,
            .bar3 {
                width: 40px;
                height: 4px;
                background-color: #ffffff;
                margin: 8px 0;
                transition: background-color 100ms linear, opacity 0.2s, transform 0.4s;
                border-radius: 2px;
            }

            .mobile-dropdown.semi-active .bar1 {
                transform: translate(0, 14px) rotate(-45deg);
                background-color: #ffffff;
            }

            .mobile-dropdown.semi-active .bar2 {
                opacity: 0;
                background-color: #ffffff;

            }

            .mobile-dropdown.semi-active .bar3 {
                transform: translate(0, -10px) rotate(45deg);
                background-color: #ffffff;
            }

            li img {
                width: auto;
                height: 45px;
                margin: 10px 9px 5px;
                cursor: pointer;
                float: inherit;
                opacity: inherit;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .drop-button {
                border: none;
                cursor: pointer;
                display: block;
                color: #ffffff;
                text-align: left;
                margin: 18px 70px 18px 20px !important;
                font-weight: 1000;
                font-size: 20px;
                text-decoration: none;
                padding-right: 13px;
                opacity: 1;
                z-index: 1 !important;
                transition: color 100ms linear;
            }

            .mobile-dropdown {
                position: relative;
            }

            .dropdown-content-mobile {
                position: absolute;
                background-color: #2951ad;
                opacity: 1;
                pointer-events: none;
                cursor: default;
                transition: max-height 350ms ease-in-out;
                transition-delay: 50ms;
                z-index: -5 !important;
                top: 63px;
                width: 100%;
                overflow: auto;
                max-height: 0px;
            }

            .plus-1 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-1-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .dropdown.active .plus-1 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-1-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .drop-button {
                color: #f7f7f7;
            }

            .mobile-dropdown.semi-active .dropdown-content-mobile {
                max-height: 550px;
                pointer-events: auto;
            }

            .dropdown {
                position: relative;
                overflow: scroll;
                background-color: none;
                transition: background-color 250ms linear;
            }

            .dropdown-content {
                padding-top: 10px;
                position: relative;
                opacity: 1;
                max-width: fit-content;
                pointer-events: none;
                overflow: hidden;
                transition: max-height 250ms ease-in-out, margin-top 250ms ease-in-out;
                transition-delay: 25ms;
                max-height: 0px;
                left: 20px;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 14px;
                display: block;
                padding: 14px;
                min-width: max-content;
                font-weight: 600;
                width: fit-content;
            }

            .dropdown.active,
            .dropdown.active {
                border: none;
            }

            .dropdown.active .dropdown-content {
                pointer-events: auto;
                cursor: pointer;
                opacity: 1;
                max-height: 250px;
                margin-top: -15px;
            }

            .request {
                position: relative;
                font-size: 14px !important;
                float: right;
                margin: 13px 15px 5px 0px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: inline-block;
                color: #3257af;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 12px 20px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }
        }
    }

}

.navbar-home.sticking {

    ul {
        position: fixed;
        top: 0;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        background-color: #ffffff;
        display: block;
        list-style-type: none;
        z-index: auto;
        background-color: #23479d;
        border-bottom: 1px solid #ffffff12;
        z-index: 2;
        transition: background-color 250ms ease;

    }

    /*This displays a nav section suitable for larger screens like computers, laptops and tvs*/
    @media all and (min-width: 1119px) {

        .standard {

            .material-symbols-outlined {
                font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
                display: none;
            }

            li {
                float: right;
                pointer-events: none;
                text-align: right !important;
            }

            li img {
                width: auto;
                height: 50px;
                margin: 12px 10px 0px;
                cursor: pointer;
                float: inherit;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: height 250ms ease-in-out;
            }

            .drop-button {
                padding-top: 0px;
                border-top: 2px solid transparent;
                cursor: pointer;
                display: block;
                color: #ffffff;
                padding-bottom: 27px;
                margin: 25px 40px 0px 0px;
                font-weight: 600;
                font-size: 17px;
                text-decoration: none;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: padding-bottom 150ms linear, margin 150ms ease-in-out, color 100ms linear, padding-top 150ms ease-in-out, border-top 150ms linear;
            }

            .dropdown {
                position: relative;
            }

            .dropdown-content {
                position: absolute;
                background-color: #2951ad;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
                pointer-events: none;
                transition: opacity 150ms ease-in-out, max-height 375ms ease-in-out, top 150ms linear;
                transition-delay: 75ms, top 0ms;
                overflow: hidden;
                opacity: 0;
                top: 74px;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 17px;
                display: block;
                padding: 14px;
                transition: color 100ms linear, background-color 100ms linear;
                min-width: max-content;
            }

            .dropdown-content a:hover {
                color: #f7f7f7;
                background-color: #23479d;
                text-decoration: underline;
            }

            .dropdown:hover .dropdown-content {
                pointer-events: auto;
                opacity: 1;
            }

            .dropdown:hover .drop-button {
                color: #f7f7f7;
                border-top: 2px solid #f7f7f7;
                padding-top: 8px;
                margin: 17px 40px 0px 0px;

            }

            .request {
                font-size: 15px !important;
                margin-top: 19px;
                margin-right: 20px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: block;
                color: #3e67c7;
                transition: background-color 100ms linear, margin-top 150ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 10px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f0f2f4;
            }

        }

    }

    /*This displays a nav section suitable for smaller screens like phones and tablets*/
    @media all and (min-width: 0em) and (max-width: 1119px) {

        .standard {

            .border {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
            }

            .border-last {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
                margin-bottom: 20px;
            }

            .container {
                display: block;
                cursor: pointer;
                margin: 10px 20px 5px 0px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                float: right;
            }

            .bar1,
            .bar2,
            .bar3 {
                width: 40px;
                height: 4px;
                background-color: #ffffff;
                margin: 8px 0;
                transition: background-color 100ms linear, opacity 0.2s, transform 0.4s;
                border-radius: 2px;
            }

            .mobile-dropdown.semi-active .bar1 {
                transform: translate(0, 14px) rotate(-45deg);
                background-color: #ffffff;
            }

            .mobile-dropdown.semi-active .bar2 {
                opacity: 0;
                background-color: #ffffff;

            }

            .mobile-dropdown.semi-active .bar3 {
                transform: translate(0, -10px) rotate(45deg);
                background-color: #ffffff;
            }

            li img {
                width: auto;
                height: 45px;
                margin: 10px 9px 5px;
                cursor: pointer;
                float: inherit;
                opacity: inherit;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .drop-button {
                border: none;
                cursor: pointer;
                display: block;
                color: #ffffff;
                text-align: left;
                margin: 18px 70px 18px 20px !important;
                font-weight: 1000;
                font-size: 20px;
                text-decoration: none;
                padding-right: 13px;
                opacity: 1;
                z-index: 1 !important;
                transition: color 100ms linear;
            }

            .mobile-dropdown {
                position: relative;
            }

            .dropdown-content-mobile {
                position: absolute;
                background-color: #2951ad;
                opacity: 1;
                pointer-events: none;
                cursor: default;
                transition: max-height 350ms ease-in-out;
                transition-delay: 50ms;
                z-index: -5 !important;
                top: 63px;
                width: 100%;
                overflow: auto;
                max-height: 0px;
            }

            .plus-1 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-1-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .dropdown.active .plus-1 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-1-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .drop-button {
                color: #f7f7f7;
            }

            .mobile-dropdown.semi-active .dropdown-content-mobile {
                max-height: 550px;
                pointer-events: auto;
            }

            .dropdown {
                position: relative;
                overflow: scroll;
                background-color: none;
                transition: background-color 250ms linear;
            }

            .dropdown-content {
                position: relative;
                opacity: 1;
                max-width: fit-content;
                pointer-events: none;
                overflow: hidden;
                transition: max-height 250ms ease-in-out, margin-top 250ms ease-in-out;
                transition-delay: 25ms;
                max-height: 0px;
                left: 20px;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 14px;
                display: block;
                padding: 14px;
                min-width: max-content;
                font-weight: 600;
                width: fit-content;
            }

            .dropdown.active,
            .dropdown.active {
                border: none;
            }

            .dropdown.active .dropdown-content {
                pointer-events: auto;
                cursor: pointer;
                opacity: 1;
                max-height: 250px;
                margin-top: -15px;
            }

            .request {
                position: relative;
                font-size: 14px !important;
                float: right;
                margin: 13px 15px 5px 0px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: inline-block;
                color: #3e67c7;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 12px 20px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f7f7f7;
            }
        }

    }

}

/* This section is going to be for the navigation bar */
.navbar {

    /*this entire class section is an absolute mess! DO NOT mess with this!!*/

    ul {
        position: fixed;
        top: 0;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        display: block;
        list-style-type: none;
        z-index: auto;
        background-color: #23479d;
        border-bottom: 1px solid #ffffff12;
        z-index: 1000;
        transition: top 0.3s;
    }

    /*This displays a nav section suitable for larger screens like computers, laptops and tvs*/
    @media all and (min-width: 1119px) {

        .standard {

            .material-symbols-outlined {
                font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
                display: none;
            }

            .box {
                float: right;
                display: inline-flex;
            }

            li {
                display: flex;
                float: left !important;
                pointer-events: none;
                text-align: right !important;
            }

            li img {
                width: auto;
                height: 60px;
                margin: 14px 20px 0px;
                cursor: pointer;
                float: inherit;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: height 250ms ease-in-out;
            }

            .drop-button {
                padding-top: 0px;
                border-top: 2px solid transparent;
                cursor: pointer;
                display: block;
                color: #ffffff;
                padding-bottom: 35px;
                margin: 32px 40px 0px 0px;
                font-weight: 600;
                font-size: 17px;
                text-decoration: none;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: padding-bottom 250ms linear, margin 250ms ease-in-out, color 100ms linear, padding-top 250ms ease-in-out, border-top 250ms ease;
            }

            .dropdown-content {
                top: 89px;
                position: absolute;
                background-color: #2951ad;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
                pointer-events: none;
                transition: opacity 150ms ease-in-out, max-height 375ms ease-in-out, top 250ms linear;
                transition-delay: 75ms, top 0ms;
                overflow: hidden;
                opacity: 0;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 17px;
                display: block;
                padding: 14px;
                transition: color 100ms linear, background-color 100ms linear;
                min-width: max-content;
            }

            .dropdown-content a:hover {
                color: #f7f7f7;
                background-color: #23479d;
                text-decoration: underline;
            }

            .dropdown:hover .dropdown-content,
            .dropdown:focus-within .dropdown-content {
                pointer-events: auto;
                opacity: 1;
            }

            .dropdown:hover .drop-button {
                color: #f7f7f7;
                border-top: 2px solid #f7f7f7;
                padding-top: 8px;
                margin: 24px 40px 0px 0px;

            }

            .request {
                font-size: 15px !important;
                margin-top: 26px;
                margin-right: 20px;
                font-weight: bolder;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: block;
                color: #3e67c7;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 10px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f0f2f4;
            }
        }

    }

    /*This displays a nav section suitable for smaller screens like phones and tablets*/
    @media all and (min-width: 0em) and (max-width: 1119px) {


        .standard {

            .border {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
            }

            .border-last {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
                margin-bottom: 20px;
            }

            .container {
                display: block;
                cursor: pointer;
                margin: 10px 20px 5px 0px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                float: right;
            }

            .bar1,
            .bar2,
            .bar3 {
                width: 40px;
                height: 4px;
                background-color: #ffffff;
                margin: 8px 0;
                transition: background-color 100ms linear, opacity 0.2s, transform 0.4s;
                border-radius: 2px;
            }

            .mobile-dropdown.semi-active .bar1 {
                transform: translate(0, 14px) rotate(-45deg);
                background-color: #ffffff;
            }

            .mobile-dropdown.semi-active .bar2 {
                opacity: 0;
                background-color: #ffffff;

            }

            .mobile-dropdown.semi-active .bar3 {
                transform: translate(0, -10px) rotate(45deg);
                background-color: #ffffff;
            }

            li img {
                width: auto;
                height: 45px;
                margin: 10px 20px 5px;
                cursor: pointer;
                float: inherit;
                opacity: inherit;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .drop-button {
                border: none;
                cursor: pointer;
                display: block;
                color: #ffffff;
                text-align: left;
                margin: 18px 70px 18px 20px !important;
                font-weight: 1000;
                font-size: 20px;
                text-decoration: none;
                padding-right: 13px;
                opacity: 1;
                z-index: 1 !important;
                transition: color 100ms linear;
            }

            .mobile-dropdown {
                position: relative;
            }

            .dropdown-content-mobile {
                position: absolute;
                background-color: #2951ad;
                opacity: 1;
                pointer-events: none;
                cursor: default;
                transition: max-height 350ms ease-in-out;
                transition-delay: 50ms;
                z-index: -5 !important;
                top: 63px;
                width: 100%;
                overflow: auto;
                max-height: 0px;
            }

            .plus-1 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-1-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .dropdown.active .plus-1 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-1-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .drop-button {
                color: #f7f7f7;
            }

            .mobile-dropdown.semi-active .dropdown-content-mobile {
                max-height: 550px;
                pointer-events: auto;
            }

            .dropdown {
                position: relative;
                overflow: scroll;
                background-color: none;
                transition: background-color 250ms linear;
            }

            .dropdown-content {
                padding-top: 10px;
                position: relative;
                opacity: 1;
                max-width: fit-content;
                pointer-events: none;
                overflow: hidden;
                transition: max-height 250ms ease-in-out, margin-top 250ms ease-in-out;
                transition-delay: 25ms;
                max-height: 0px;
                left: 20px;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 14px;
                display: block;
                padding: 14px;
                min-width: max-content;
                font-weight: 600;
                width: fit-content;
            }

            .dropdown.active,
            .dropdown.active {
                border: none;
            }

            .dropdown.active .dropdown-content {
                pointer-events: auto;
                cursor: pointer;
                opacity: 1;
                max-height: 250px;
                margin-top: -15px;
            }

            .request {
                position: relative;
                font-size: 14px !important;
                float: right;
                margin: 13px 15px 5px 0px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: inline-block;
                color: #23479d;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 12px 20px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }
        }
    }

}

.navbar.sticking {

    /*this entire class section is an absolute mess! DO NOT mess with this!!*/

    ul {
        position: fixed;
        top: 0;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        background-color: #ffffff;
        display: block;
        list-style-type: none;
        z-index: auto;
        background-color: #23479d;
        border-bottom: 1px solid #ffffff12;
        z-index: 2;
        transition: background-color 250ms ease;

    }

    /*This displays a nav section suitable for larger screens like computers, laptops and tvs*/
    @media all and (min-width: 1119px) {

        .standard {

            .material-symbols-outlined {
                font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
                display: none;
            }

            li {
                float: right;
                pointer-events: none;
                text-align: right !important;
            }

            li img {
                width: auto;
                height: 50px;
                margin: 12px 10px 0px;
                cursor: pointer;
                float: inherit;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: height 250ms ease-in-out;
            }

            .drop-button {
                padding-top: 0px;
                border-top: 2px solid transparent;
                cursor: pointer;
                display: block;
                color: #ffffff;
                padding-bottom: 27px;
                margin: 25px 40px 0px 0px;
                font-weight: 600;
                font-size: 17px;
                text-decoration: none;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: padding-bottom 250ms linear, margin 250ms ease-in-out, color 100ms linear, padding-top 250ms ease-in-out, border-top 250ms linear;
            }

            .dropdown {
                position: relative;
            }

            .dropdown-content {
                position: absolute;
                background-color: #2951ad;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
                pointer-events: none;
                transition: opacity 150ms ease-in-out, max-height 375ms ease-in-out, top 250ms linear;
                transition-delay: 75ms, top 0ms;
                overflow: hidden;
                opacity: 0;
                top: 74px;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 17px;
                display: block;
                padding: 14px;
                transition: color 100ms linear, background-color 100ms linear;
                min-width: max-content;
            }

            .dropdown-content a:hover {
                color: #f7f7f7;
                background-color: #23479d;
                text-decoration: underline;
            }

            .dropdown:hover .dropdown-content {
                pointer-events: auto;
                opacity: 1;
            }

            .dropdown:hover .drop-button {
                color: #f7f7f7;
                border-top: 2px solid #f7f7f7;
                padding-top: 8px;
                margin: 17px 40px 0px 0px;

            }

            .request {
                font-size: 15px !important;
                margin-top: 19px;
                margin-right: 20px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: block;
                color: #3e67c7;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 10px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f0f2f4;
            }

        }

    }

    /*This displays a nav section suitable for smaller screens like phones and tablets*/
    @media all and (min-width: 0em) and (max-width: 1119px) {

        .standard {

            .border {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
            }

            .border-last {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
                margin-bottom: 20px;
            }

            .container {
                display: block;
                cursor: pointer;
                margin: 10px 20px 5px 0px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                float: right;
            }

            .bar1,
            .bar2,
            .bar3 {
                width: 40px;
                height: 4px;
                background-color: #ffffff;
                margin: 8px 0;
                transition: background-color 100ms linear, opacity 0.2s, transform 0.4s;
                border-radius: 2px;
            }

            .mobile-dropdown.semi-active .bar1 {
                transform: translate(0, 14px) rotate(-45deg);
                background-color: #ffffff;
            }

            .mobile-dropdown.semi-active .bar2 {
                opacity: 0;
                background-color: #ffffff;

            }

            .mobile-dropdown.semi-active .bar3 {
                transform: translate(0, -10px) rotate(45deg);
                background-color: #ffffff;
            }

            li img {
                width: auto;
                height: 45px;
                margin: 10px 9px 5px;
                cursor: pointer;
                float: inherit;
                opacity: inherit;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .drop-button {
                border: none;
                cursor: pointer;
                display: block;
                color: #ffffff;
                text-align: left;
                margin: 18px 70px 18px 20px !important;
                font-weight: 1000;
                font-size: 20px;
                text-decoration: none;
                padding-right: 13px;
                opacity: 1;
                z-index: 1 !important;
                transition: color 100ms linear;
            }

            .mobile-dropdown {
                position: relative;
            }

            .dropdown-content-mobile {
                position: absolute;
                background-color: #2951ad;
                opacity: 1;
                pointer-events: none;
                cursor: default;
                transition: max-height 350ms ease-in-out;
                transition-delay: 50ms;
                z-index: -5 !important;
                top: 63px;
                width: 100%;
                overflow: auto;
                max-height: 0px;
            }

            .plus-1 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-1-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .dropdown.active .plus-1 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-1-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .drop-button {
                color: #f7f7f7;
            }

            .mobile-dropdown.semi-active .dropdown-content-mobile {
                max-height: 550px;
                pointer-events: auto;
            }

            .dropdown {
                position: relative;
                overflow: scroll;
                background-color: none;
                transition: background-color 250ms linear;
            }

            .dropdown-content {
                position: relative;
                opacity: 1;
                max-width: fit-content;
                pointer-events: none;
                overflow: hidden;
                transition: max-height 250ms ease-in-out, margin-top 250ms ease-in-out;
                transition-delay: 25ms;
                max-height: 0px;
                left: 20px;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 14px;
                display: block;
                padding: 14px;
                min-width: max-content;
                font-weight: 600;
                width: fit-content;
            }

            .dropdown.active,
            .dropdown.active {
                border: none;
            }

            .dropdown.active .dropdown-content {
                pointer-events: auto;
                cursor: pointer;
                opacity: 1;
                max-height: 250px;
                margin-top: -15px;
            }

            .request {
                position: relative;
                font-size: 14px !important;
                float: right;
                margin: 13px 15px 5px 0px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 5px;
                cursor: pointer;
                display: inline-block;
                color: #3e67c7;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 12px 20px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f7f7f7;
            }
        }

    }

}

.navbar.hidden {

    /*this entire class section is an absolute mess! DO NOT mess with this!!*/

    ul {
        position: fixed;
        top: 0 !important;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        display: block;
        list-style-type: none;
        z-index: auto;
        background-color: #23479d;
        border-bottom: 1px solid #ffffff12;
        z-index: 2;
    }

    /*This displays a nav section suitable for larger screens like computers, laptops and tvs*/
    @media all and (min-width: 1119px) {

        .standard {

            .material-symbols-outlined {
                font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
                display: none;
            }

            .box {
                float: right;
                display: inline-flex;
            }

            li {
                display: flex;
                float: left !important;
                pointer-events: none;
                text-align: right !important;
            }

            li img {
                width: auto;
                height: 60px;
                margin: 12px 10px 0px;
                cursor: pointer;
                float: inherit;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: height 250ms linear;
            }

            .drop-button {
                padding-top: 0px;
                border-top: 3px solid transparent;
                cursor: pointer;
                display: block;
                color: #ffffff;
                padding-bottom: 29px;
                margin: 35px 40px 0px 0px;
                font-weight: bold;
                font-size: 17px;
                text-decoration: none;
                pointer-events: all;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                transition: padding-bottom 250ms linear, margin 250ms ease-in-out, color 100ms linear, padding-top 250ms ease-in-out, border-top 250ms linear;
            }

            .dropdown-content {
                top: 87px;
                position: absolute;
                background-color: #2951ad;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
                pointer-events: none;
                transition: opacity 150ms ease-in-out, max-height 375ms ease-in-out, top 250ms linear;
                transition-delay: 75ms, top 0ms;
                overflow: hidden;
                opacity: 0;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 17px;
                display: block;
                padding: 14px;
                transition: color 100ms linear, background-color 100ms linear;
                min-width: max-content;
            }

            .dropdown-content a:hover {
                color: #f7f7f7;
                background-color: #23479d;
                text-decoration: underline;
            }

            .dropdown:hover .dropdown-content {
                pointer-events: auto;
                opacity: 1;
            }

            .dropdown:hover .drop-button {
                color: #f7f7f7;
                border-top: 3px solid #f7f7f7;
                padding-top: 8px;
                margin: 27px 40px 0px 0px;

            }

            .request {
                font-size: 15px !important;
                margin-top: 27px;
                margin-right: 20px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 25px;
                cursor: pointer;
                display: block;
                color: #3e67c7;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 10px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f6f6f6;
            }
        }

    }

    /*This displays a nav section suitable for smaller screens like phones and tablets*/
    @media all and (min-width: 0em) and (max-width: 1119px) {


        .standard {

            .border {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
            }

            .border-last {
                border-bottom: 1px solid #ffffff;
                margin: 0 auto;
                padding: 0 auto;
                width: 90%;
                display: flex;
                text-align: center;
                margin-bottom: 20px;
            }

            .container {
                display: block;
                cursor: pointer;
                margin: 10px 20px 5px 0px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                float: right;
            }

            .bar1,
            .bar2,
            .bar3 {
                width: 40px;
                height: 4px;
                background-color: #ffffff;
                margin: 8px 0;
                transition: background-color 100ms linear, opacity 0.2s, transform 0.4s;
                border-radius: 2px;
            }

            .mobile-dropdown.semi-active .bar1 {
                transform: translate(0, 14px) rotate(-45deg);
                background-color: #ffffff;
            }

            .mobile-dropdown.semi-active .bar2 {
                opacity: 0;
                background-color: #ffffff;

            }

            .mobile-dropdown.semi-active .bar3 {
                transform: translate(0, -10px) rotate(45deg);
                background-color: #ffffff;
            }

            li img {
                width: auto;
                height: 45px;
                margin: 10px 9px 5px;
                cursor: pointer;
                float: inherit;
                opacity: inherit;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .drop-button {
                border: none;
                cursor: pointer;
                display: block;
                color: #ffffff;
                text-align: left;
                margin: 18px 70px 18px 20px !important;
                font-weight: 1000;
                font-size: 20px;
                text-decoration: none;
                padding-right: 13px;
                opacity: 1;
                z-index: 1 !important;
                transition: color 100ms linear;
            }

            .mobile-dropdown {
                position: relative;
            }

            .dropdown-content-mobile {
                position: absolute;
                background-color: #2951ad;
                opacity: 1;
                pointer-events: none;
                cursor: default;
                transition: max-height 350ms ease-in-out;
                transition-delay: 50ms;
                z-index: -5 !important;
                top: 63px;
                width: 100%;
                overflow: auto;
                max-height: 0px;
            }

            .plus-1 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-1-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-2-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3 {
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .plus-3-2 {
                rotate: 90deg;
                width: 10px;
                float: right;
                border-bottom: 2px solid #ffffff;
                border-top: 1px solid #ffffff;
                border-right: 5px solid #ffffff;
                transition: transform 150ms ease-in-out, border 100ms linear;
                transition-delay: 25ms;
                cursor: pointer;
                margin: -29px 20px 0px 0px;
            }

            .dropdown.active .plus-1 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-1-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-2-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3 {
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .plus-3-2 {
                transform: rotate(-90deg);
                border-bottom: 2px solid #f7f7f7;
                border-top: 1px solid #f7f7f7;
                border-right: 5px solid #f7f7f7;
            }

            .dropdown.active .drop-button {
                color: #f7f7f7;
            }

            .mobile-dropdown.semi-active .dropdown-content-mobile {
                max-height: 550px;
                pointer-events: auto;
            }

            .dropdown {
                position: relative;
                overflow: scroll;
                background-color: none;
                transition: background-color 250ms linear;
            }

            .dropdown-content {
                position: relative;
                opacity: 1;
                max-width: fit-content;
                pointer-events: none;
                overflow: hidden;
                transition: max-height 250ms ease-in-out, margin-top 250ms ease-in-out;
                transition-delay: 25ms;
                max-height: 0px;
                left: 20px;
            }

            .dropdown-content a {
                text-align: left;
                font-weight: lighter;
                color: #ffffff;
                text-decoration: none;
                font-size: 14px;
                display: block;
                padding: 14px;
                min-width: max-content;
                font-weight: 600;
                width: fit-content;
            }

            .dropdown.active,
            .dropdown.active {
                border: none;
            }

            .dropdown.active .dropdown-content {
                pointer-events: auto;
                cursor: pointer;
                opacity: 1;
                max-height: 250px;
                margin-top: -15px;
            }

            .request {
                position: relative;
                font-size: 14px !important;
                float: right;
                margin: 13px 15px 5px 0px;
                font-weight: bold;
                background-color: #ffffff;
                border-radius: 25px;
                cursor: pointer;
                display: inline-block;
                color: #23479d;
                transition: background-color 100ms linear, margin-top 250ms linear;
                text-decoration: none;
                pointer-events: all;
                padding: 12px 20px;
                animation: fadeInAnimation ease 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .request:hover {
                background-color: #f7f7f7;
            }
        }

    }

}

.sub-nav {

    position: sticky;
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
    top: 87px;
    z-index: 2;
    border-top: 1px solid #ffffff12;
    border-bottom: 1px solid #ffffff12;
    background-color: #23479d;
    transition: top 0.3s;


    @media all and (min-width: 62.5em) {

        .sub-menu {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }

        button {
            margin: 0 50px;
            background: none;
            padding: 10px;
            border: none;
            cursor: pointer;
            color: #ffffff;
            font-weight: 550;
            font-size: 16px;
            transition: color 100ms linear;
            text-decoration: none;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            transition: border-bottom 200ms linear, color 200ms linear;
            transition-delay: 50ms;
        }


        button:hover {
            border-bottom: 4px solid #ffffff;
            color: #ffffff;
        }

        button.active {
            border-bottom: 4px solid #ffffff;
            color: #ffffff;
        }
    }

    @media all and (min-width: 0em) and (max-width: 62.5em) {

        top: 63px;

        .sub-menu {
            display: inline-block;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }

        button {
            margin: 0 10px;
            background: none;
            padding: 7px;
            border: none;
            cursor: pointer;
            color: #ffffff;
            font-weight: 550;
            font-size: 13px;
            transition: color 100ms linear;
            text-decoration: none;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            transition: border-bottom 200ms linear, color 200ms linear;
            transition-delay: 50ms;
        }

        button.active {
            border-bottom: 4px solid #ffffff;
            color: #ffffff;
        }
    }
}

.scroll-box {
    display: block;
    position: relative;
    margin: 175px 0px 125px;
    padding: 0 auto;

    .page {
        width: 8.5in;
        height: 11in;
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 0 auto;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;

        h1 {
            text-align: left;
            font-size: 2em;
            font-weight: bold;
            color: #23479d;
            padding: 100px 1in 50px;
            margin: 0 auto;
        }

        p {
            font-size: 20px;
            font-weight: lighter;
            color: #3d3d3d;
            line-height: 2;
            padding: 50px 1in;
            margin: 0 auto;
        }

        ul {
            font-size: 1em;
            font-weight: bold;
            color: #23479d;
            padding: 0px 1in 20px;
            margin: 0 auto;
            list-style-type: square;
        }

        li::marker {
            color: #f05829;
        }

        li {
            font-size: 1em;
            font-weight: lighter;
            color: #3d3d3d;
            padding: 20px;
            margin: 0 auto;
        }
    }

    .page-tnr {
        width: 8.5in;
        height: 11in;
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 0 auto;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;

        h1 {
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            font-family: 'Times New Roman', Times, serif !important;
            color: #3d3d3d;
            padding: 100px 50px 0px;
            margin: 0 auto;
        }

        p {
            font-size: 20px;
            font-weight: lighter;
            font-family: 'Times New Roman', Times, serif !important;
            color: #3d3d3d;
            line-height: 2;
            padding: 50px 1in;
            margin: 0 auto;
        }
    }
}

#section-1 {

    scroll-margin-top: 125px;

}

#section-2 {

    scroll-margin-top: 125px;

}

#section-3 {

    scroll-margin-top: 142px;

}

#section-4 {

    scroll-margin-top: 142px;

}

.banner-clrd {
    min-height: max-content;
    display: inline-block;
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    background-color: #23479d;
    overflow: hidden;


    @media all and (min-width: 62.5em) {
        padding: 50px 0px 50px;

        .shrink {
            width: 100%;
        }

        .push {
            margin-bottom: 0px;
            padding-bottom: 75px;
        }

        .title-decor {

            h2 {
                color: #ffffff;
                font-size: 2.5em;
                font-weight: 700;
                position: relative;
                padding: 0 auto;
                margin: 0 auto;
            }

            p {
                line-height: 1.65;
                color: #ffffff;
                font-size: 1em;
                position: relative;
                font-weight: 500;
                margin: 30px auto;
                width: 75%;
            }
        }

        .button {

            a {
                overflow: auto;
                position: relative;
                text-decoration: none;
                border: 0;
                color: #ffffff;
                font-size: 1.25em;
                padding: 15px;
                background: linear-gradient(to right, #3d65c5, #3d65c5, #23479d);
                /* Solid color followed by gradient */
                background-size: 200% 100%;
                /* Stretch the background horizontally */
                background-position: 0% 0%;
                /* Initial position showing the solid color */
                transition: background-position 0.5s ease-in-out;
                /* Transition for background position */
                border-radius: 5px;
                font-style: none;
                pointer-events: auto;
            }

            a:hover {
                background-position: 100% 0%;
                /* Move to reveal the gradient */
                cursor: pointer;
            }
        }

        .box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            background-color: #4f91c8;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 2px solid #ffffff12;

            h3 {
                font-size: 0.9em;
                color: #ffffff;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #ffffff;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

            ul {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 0px 0px 0px;
                line-height: 3;
            }

        }

        .box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            padding: 40px 15px 40px;
            vertical-align: top;

            h3 {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #ffffff;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

            ul {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 0px 0px 0px;
            }

        }

        .box-3 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 1px solid #ffffff12;

            h3 {
                font-size: 1.1em;
                color: #ffffff;
                padding: 0 auto;
                display: block;
                margin: 10px 0px;
            }

            p {
                line-height: 1.4;
                color: #ffffff;
                padding: 0 auto;
                margin: 10px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
                background-color: #ffffff12;
            }

        }

        .list-box {

            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            text-align: left;
            margin: 20px 20px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            max-width: 38em;
            pointer-events: all;

            .border {
                display: block;
                border: 2px solid #ffffff;
                animation: borderAnimation ease 1.75s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-delay: 750ms;
                opacity: 0;
            }

            .linear-title {

                margin: 52px 0px;
                max-width: fit-content;

                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -22px;
                    border: 2px solid #ffffff;
                    border-radius: 50px;
                    padding: 8px;
                    height: auto;
                    width: 2.5em;
                    background-color: #ffffff12;
                }

                h3 {
                    margin: 0px 20px;
                    padding: 0 auto;
                    display: inline;
                    color: #ffffff;
                    font-size: 20px;
                    font-weight: 600;
                }
            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 3.5em;
                font-weight: 800;
                color: #ffffff;
            }

            h4 {
                font-size: 1.25em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 1.75em;
                font-weight: 800;
                color: #ffffff;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2.5em;
                font-weight: 800;
                color: #ffffff;
            }

            p {
                line-height: 1.25em;
                width: 100%;
                font-size: 22px;
                color: #ffffff;
                font-weight: lighter;
            }

            .accordian {

                width: 75%;
                float: right;

                div p {
                    color: #ffffff !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #ffffff !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #ffffff !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #ffffff;
                    border-top: 1px solid #ffffff;
                    border-right: 5px solid #ffffff;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #ffffff;
                    border-top: 1px solid #ffffff;
                    border-right: 5px solid #ffffff;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #ffffff;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }

        }

        .list-box-2 {

            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            text-align: left;
            margin: 20px 0px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            max-width: 38em;

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 3.5em;
                font-weight: 800;
                color: #ffffff;
            }

            h4 {
                font-size: 1.25em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 1.75em;
                font-weight: 800;
                color: #ffffff;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2.5em;
                font-weight: 800;
                color: #ffffff;
            }

            p {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #ffffff;
                font-weight: 500;
            }

            img {
                max-width: 38em;
                width: 100%;
                height: auto;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }

            .accordian {

                width: 75%;
                float: right;

                div p {
                    color: #ffffff !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #ffffff !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #ffffff !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #ffffff;
                    border-top: 1px solid #ffffff;
                    border-right: 5px solid #ffffff;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #ffffff;
                    border-top: 1px solid #ffffff;
                    border-right: 5px solid #ffffff;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #ffffff;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }

            ul {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #ffffff;
                font-weight: 500;
                list-style-type: square;
            }

        }

        .list-box-3 {
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;

            a {
                padding: 0 auto;
                margin: 0 auto;
                display: block;
            }

            img {
                height: 7em;
                width: auto;
                margin: 50px;
                transform-origin: center;
                transition: transform 0.2s ease-in, margin 0.2s ease-in;
            }

            span {
                padding: 0px !important;
                border-radius: 50%;
                display: flex;
                position: x;
                margin: 33px;
                border: 2px solid;
                transition: margin 0.2s ease-in;
                pointer-events: all;
                cursor: pointer;
            }

            span:hover {
                margin: 27px;
            }

            span:hover .circle {
                margin: 7px;
            }

            span:hover img {
                transform: scale(0.95);
                margin: 45px;
            }

            .circle {
                width: inherit;
                display: inline-block;
                border-radius: 50%;
                margin: -4px;
                transition: margin 0.2s ease-in;
            }

            h3 {
                color: #ffffff;
                margin-top: 0;
            }

            p {
                margin-top: -10px !important;
                width: 80%;
                margin: 0 auto;
                color: #ffffff;
            }
        }


        .list-box-4 {
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            margin: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }

        .list-box-5 {
            margin: 75px 0px;
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }

        .list-box-6 {
            display: inline;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 38em;
        }
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {

        margin-top: 64px !important;
        padding: 0px;

        .shrink {
            width: 60%;
        }

        .title-decor {

            h1 {
                color: #3d3d3d;
                font-size: 2em;
                font-weight: 700;
                position: relative;
                padding: 0 auto;
                margin: 0 auto;
            }

            p {
                color: #3d3d3d;
                font-size: 1em;
                position: relative;
                font-weight: 500;
                margin: 10px auto;
                width: 75%;
            }
        }

        .button {

            a {
                overflow: auto;
                position: relative;
                text-decoration: none;
                border: 0;
                color: #ffffff;
                font-size: 1.25em;
                padding: 15px;
                background: linear-gradient(to right, #3d65c5, #3d65c5, #23479d);
                /* Solid color followed by gradient */
                background-size: 200% 100%;
                /* Stretch the background horizontally */
                background-position: 0% 0%;
                /* Initial position showing the solid color */
                transition: background-position 0.5s ease-in-out;
                /* Transition for background position */
                border-radius: 5px;
                font-style: none;
                pointer-events: auto;
            }

            a:hover {
                background-position: 100% 0%;
                /* Move to reveal the gradient */
                cursor: pointer;
            }
        }

        .box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            background-color: #4f91c8;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 2px solid #ffffff12;

            h3 {
                font-size: 0.9em;
                color: #ffffff;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #ffffff;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

            ul {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 0px 0px 0px;
                line-height: 3;
            }

        }

        .box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            padding: 10px 15px 20px;
            vertical-align: top;

            h3 {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #ffffff;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

            ul {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 0px 0px 0px;
                line-height: 3;
            }

        }

        .box-3 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 1px solid #ffffff12;

            h3 {
                font-size: 1.1em;
                color: #ffffff;
                padding: 0 auto;
                display: block;
                margin: 10px 0px;
            }

            p {
                line-height: 1.4;
                color: #ffffff;
                padding: 0 auto;
                margin: 10px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
                background-color: #ffffff12;
            }

        }

        .list-box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            margin: 20px 20px !important;
            display: inline-block;
            position: relative;
            vertical-align: top;
            text-align: left;

            .border {
                display: block;
                border: 2px solid #ffffff;
                animation: borderAnimation ease 2s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-delay: 0.75s;
                opacity: 0;
            }


            h3 {
                font-size: 1em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 25px auto 0px;
            }

            h1 {
                font-size: 1.75em;
                font-weight: 800;
                color: #ffffff;
                margin: 20px 0px;
            }

            p {
                font-size: 1em;
                font-weight: lighter;
                color: #ffffff;
                margin: 0px 0px auto;
                line-height: 1.5em;
            }

            img {
                width: 20em;
                height: auto;
                border-radius: 15px;
                box-shadow: 10px 10px #2626262e;
                padding: 0 auto;
                margin: 0px auto 20px;
            }
        }

        .list-box-2 {
            text-align: left;
            margin: 20px 0px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;
            text-align: left;
            max-width: 38em;
            float: left !important;

            span {
                display: block;
                border: 2px solid #ffffff;
                animation: borderAnimation ease 2s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-delay: 0.75s;
                opacity: 0;
            }

            .linear-title {
                margin: 52px 0px;
                max-width: fit-content;

                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -20px;
                    border: 2px solid #ffffff;
                    border-radius: 50px;
                    padding: 8px;
                    height: auto;
                    width: 1.75em;
                    background-color: #ffffff12;
                }

                p {
                    margin: 0px 20px;
                    padding: 0 auto;
                    display: inline;
                    color: #ffffff;
                    font-size: 1em;
                    font-weight: 600;
                }
            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 3.5em;
                font-weight: 800;
                color: #ffffff;
            }

            h4 {
                font-size: 1em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                font-size: 2em;
                font-weight: 700;
                color: #ffffff;
                margin: 15px 0px 0px;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #ffffff;
            }

            p {
                font-size: 1em;
                color: #ffffff;
                line-height: 1.5em;
            }

            ul {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #ffffff;
                list-style-type: square;
            }

            img {
                max-width: 38em;
                width: 100%;
                height: auto;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }

            .accordian {

                width: 100%;
                margin: 0 auto;
                padding: 0 auto;
                position: relative;
                display: inline;

                div p {
                    color: #3d3d3d !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #3d3d3d !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #3d3d3d !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #3d3d3d;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }
        }

        .list-box-3 {
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;

            a {
                padding: 0 auto;
                margin: 0 auto;
                display: block;
            }

            img {
                height: 7em;
                width: auto;
                margin: 50px;
                transform-origin: center;
                transition: transform 0.2s ease-in, margin 0.2s ease-in;
            }

            span {
                padding: 0px !important;
                border-radius: 50%;
                display: flex;
                position: x;
                margin: 33px;
                border: 2px solid;
                transition: margin 0.2s ease-in;
                pointer-events: all;
                cursor: pointer;
            }

            span:hover {
                margin: 27px;
            }

            span:hover .circle {
                margin: 7px;
            }

            span:hover img {
                transform: scale(0.95);
                margin: 45px;
            }

            .circle {
                width: inherit;
                display: inline-block;
                border-radius: 50%;
                margin: -4px;
                transition: margin 0.2s ease-in;
            }

            h3 {
                color: #ffffff;
                margin-top: 0;
            }

            p {
                margin-top: -10px !important;
                width: 80%;
                margin: 0 auto;
                color: #ffffff;
            }
        }

        .list-box-4 {
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }

        .list-box-5 {
            margin: 75px 0px;
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }
    }

    @media all and (min-width: 0em) and (max-width: 658px) {

        margin-top: 64px !important;
        padding: 0px;

        .shrink {
            width: 90%;
        }

        .title-decor {

            h1 {
                color: #3d3d3d;
                font-size: 2em;
                font-weight: 700;
                position: relative;
                padding: 0 auto;
                margin: 0 auto;
            }

            p {
                color: #3d3d3d;
                font-size: 1em;
                position: relative;
                font-weight: 500;
                margin: 10px auto;
                width: 75%;
            }
        }

        .button {

            a {
                overflow: auto;
                position: relative;
                text-decoration: none;
                border: 0;
                color: #ffffff;
                font-size: 1.25em;
                padding: 15px;
                background: linear-gradient(to right, #3d65c5, #3d65c5, #23479d);
                /* Solid color followed by gradient */
                background-size: 200% 100%;
                /* Stretch the background horizontally */
                background-position: 0% 0%;
                /* Initial position showing the solid color */
                transition: background-position 0.5s ease-in-out;
                /* Transition for background position */
                border-radius: 5px;
                font-style: none;
                pointer-events: auto;
            }
        }

        .box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            background-color: #4f91c8;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 2px solid #ffffff12;

            h3 {
                font-size: 0.9em;
                color: #ffffff;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #ffffff;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

            ul {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 0px 0px 0px;
                line-height: 3;
            }

        }

        .box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            padding: 40px 15px 40px;
            vertical-align: top;

            h3 {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #ffffff;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

            ul {
                font-size: 0.85em;
                color: #ffffff;
                padding: 0 auto;
                margin: 0px 0px 0px;
                line-height: 3;
            }

        }

        .box-3 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 1px solid #ffffff12;

            h3 {
                font-size: 1.1em;
                color: #ffffff;
                padding: 0 auto;
                display: block;
                margin: 10px 0px;
            }

            p {
                line-height: 1.4;
                color: #ffffff;
                padding: 0 auto;
                margin: 10px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
                background-color: #ffffff12;
            }

        }


        .list-box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            text-align: left;
            margin: 40px 20px 10px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;
            text-align: left;
            max-width: 38em;
            float: left !important;

            .border {
                background-color: #ffffff;
                display: block;
                border: 2px solid #ffffff;
                animation: borderAnimation ease 2s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-delay: 0.75s;
                opacity: 0;
            }


            .linear-title {
                margin: 52px 0px;
                max-width: fit-content;

                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -20px;
                    border: 2px solid #ffffff;
                    border-radius: 50px;
                    padding: 8px;
                    height: auto;
                    width: 1.75em;
                    background-color: #ffffff12;
                }

                p {
                    margin: 0px 10px;
                    padding: 0 auto;
                    display: inline;
                    color: #ffffff;
                    font-size: 1em;
                    font-weight: 600;
                }
            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #ffffff;
            }

            h4 {
                font-size: 1em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                font-size: 2em;
                font-weight: 700;
                color: #ffffff;
                margin: 15px 0px 0px;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #ffffff;
            }

            p {
                font-size: 1.25em;
                color: #ffffff;
                line-height: 1.5em;
                font-weight: lighter;
            }

            img {
                margin: 0 auto;
                width: 100%;
                max-width: 30em;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
                left: 0 !important;
            }

            .accordian {

                width: 100%;
                margin: 0 auto;
                padding: 0 auto;
                position: relative;
                display: inline;

                div p {
                    color: #3d3d3d !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #3d3d3d !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #3d3d3d !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #3d3d3d;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }
        }

        .list-box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            text-align: left;
            margin: 40px 20px 10px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;
            text-align: left;
            max-width: 38em;
            float: left !important;

            .linear-title {
                margin: 52px 0px;
                max-width: fit-content;

                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -20px;
                    border: 2px solid #ffffff;
                    border-radius: 50px;
                    padding: 8px;
                    height: auto;
                    width: 1.75em;
                    background-color: #ffffff12;
                }

                p {
                    margin: 0px 10px;
                    padding: 0 auto;
                    display: inline;
                    color: #ffffff;
                    font-size: 1em;
                    font-weight: 600;
                }
            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #ffffff;
            }

            h4 {
                font-size: 1em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                font-size: 2em;
                font-weight: 700;
                color: #ffffff;
                margin: 15px 0px 0px;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #ffffff;
            }

            p {
                font-size: 1em;
                color: #ffffff;
                line-height: 1.5em;
            }

            ul {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #ffffff;
                list-style-type: square;
            }

            img {
                max-width: 38em;
                width: 100%;
                height: auto;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }

            .accordian {

                width: 100%;
                margin: 0 auto;
                padding: 0 auto;
                position: relative;
                display: inline;

                div p {
                    color: #3d3d3d !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #3d3d3d !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #3d3d3d !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #3d3d3d;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }
        }

        .list-box-3 {
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;

            a {
                padding: 0 auto;
                margin: 0 auto;
                display: block;
            }

            img {
                height: 7em;
                width: auto;
                margin: 50px;
                transform-origin: center;
            }

            span {
                padding: 0px !important;
                border-radius: 50%;
                display: flex;
                position: x;
                margin: 33px;
                border: 2px solid;
            }

            .circle {
                width: inherit;
                display: inline-block;
                border-radius: 50%;
                margin: -4px;
            }

            h3 {
                color: #ffffff;
                margin-top: 0;
            }

            p {
                margin-top: -10px !important;
                width: 80%;
                margin: 0 auto;
                color: #ffffff;
            }
        }

        .list-box-4 {
            margin: 40px 0px;
            display: inline-block;
            overflow: hidden;
        }

        .list-box-5 {
            margin: 0px 0px 20px;
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }
    }
}

.banner-bw {
    min-height: max-content;
    display: inline-block;
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    background-color: #ffffff;
    overflow: hidden;


    @media all and (min-width: 62.5em) {

        padding: 50px 0px 50px;

        .shrink {
            width: 45%;
        }

        .push {
            margin-bottom: 0px;
            padding-bottom: 75px;
        }

        .title-decor {

            h2 {
                color: #1a2f6c;
                font-size: 2.5em;
                font-weight: 700;
                position: relative;
                padding: 0 auto;
                margin: 0 auto;
            }

            p {
                color: #1a2f6c;
                font-size: 1em;
                position: relative;
                font-weight: 500;
                margin: 30px auto;
                width: 75%;
                line-height: 1.65;
            }
        }

        .button {

            a {
                overflow: auto;
                position: relative;
                text-decoration: none;
                border: 0;
                color: #ffffff;
                font-size: 1.25em;
                padding: 15px;
                background: linear-gradient(to right, #3d65c5, #3d65c5, #23479d);
                /* Solid color followed by gradient */
                background-size: 200% 100%;
                /* Stretch the background horizontally */
                background-position: 0% 0%;
                /* Initial position showing the solid color */
                transition: background-position 0.5s ease-in-out;
                /* Transition for background position */
                border-radius: 5px;
                font-style: none;
            }

            a:hover {
                background-position: 100% 0%;
                /* Move to reveal the gradient */
                cursor: pointer;
            }
        }

        .box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            background-color: #ffffff;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 1px solid #1a2f6c2d;

            h3 {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #1a2f6c;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            padding: 40px 15px 40px;
            vertical-align: top;

            h3 {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #1a2f6c;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .box-3 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 2px solid #ffffff12;

            h3 {
                font-size: 1.1em;
                color: #1a2f6c;
                padding: 0 auto;
                display: block;
                margin: 10px 0px;
            }

            p {
                line-height: 1.4;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 10px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .list-box {

            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            text-align: left;
            margin: 20px 0px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            max-width: 38em;
            pointer-events: all;

            .linear-title {

                margin: 52px 0px;
                max-width: fit-content;

                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -22px;
                    border: 2px solid #1a2f6c;
                    border-radius: 50px;
                    padding: 8px;
                    height: auto;
                    width: 2.5em;
                    background-color: #ffffff12;
                }

                h3 {
                    margin: 0px 20px;
                    padding: 0 auto;
                    display: inline;
                    color: #1a2f6c;
                    font-size: 20px;
                    font-weight: 600;
                }
            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 3.5em;
                font-weight: 800;
                color: #1a2f6c;
            }

            h4 {
                font-size: 1.25em;
                font-weight: 800;
                color: #1a2f6c;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 1.75em;
                font-weight: 800;
                color: #1a2f6c;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2.5em;
                font-weight: 800;
                color: #1a2f6c;
            }

            p {
                line-height: 1.25em;
                width: 100%;
                font-size: 22px;
                color: #1a2f6c;
                font-weight: lighter;
            }

        }

        .list-box-2 {

            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            text-align: left;
            margin: 20px 0px;
            display: inline-block;
            position: relative;
            max-width: min-content;
            max-width: 38em;

            .linear-title {

                position: relative;
                padding: 10px 0px 20px;
                margin: 37px 0px 27px;
                max-width: fit-content;
                pointer-events: all;
                transition: transform 0.3s ease;
                /* optionally center the anchor point for a more natural scale */
                transform-origin: center center;
                cursor: pointer;
            }


            .linear-title img {
                display: inline;
                padding: 0 auto;
                margin-bottom: -22px;
                border: 2px solid #1a2f6c;
                border-radius: 20px;
                padding: 8px;
                height: auto;
                width: 2.5em;
                background-color: #1a2f6c;
                transition: transform 0.3s ease;
            }

            .linear-title h3 {
                margin: 0px 20px;
                padding: 0 auto;
                display: inline;
                color: #1a2f6c;
                font-size: 20px;
                font-weight: 600;
                transition: transform 0.3s ease;
            }

            .linear-title p {
                font-size: 16px;
                padding: 20px 0px;
            }

            .linear-title ul {
                color: #1a2f6c;
                padding: 0 auto;
                margin: 0 auto;
            }

            .linear-title li {
                padding: 10px 0px;
            }

            .linear-title:hover img,
            .linear-title:focus-within img {
                transform: scale(1.15);
            }

            .linear-title:hover,
            .linear-title:focus-within {
                transform: scale(1.05);
            }

            .linear-title-2 {

                max-width: 48ch !important;
                margin: 0 auto;
                max-width: fit-content;
                margin-bottom: 30px;
                pointer-events: all;


                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -22px;
                    border: 2px solid #1a2f6c;
                    border-radius: 20px;
                    padding: 8px;
                    height: auto;
                    width: 2.5em;
                    background-color: #ffffff12;
                }

                h3 {
                    margin: 0px 20px;
                    padding: 0 auto;
                    display: inline;
                    color: #1a2f6c;
                    font-size: 20px;
                    font-weight: 600;
                }

                p {
                    font-size: 14px;
                    padding: 20px 0px;
                    font-weight: 500;
                }

                ul {
                    color: #1a2f6c;
                    padding: 0 auto;
                    margin: 0 auto;
                    font-size: 14px;
                    font-weight: lighter;
                }

                li {
                    padding: 10px 0px;
                }

            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 3.5em;
                font-weight: 800;
                color: #1a2f6c;
            }

            h4 {
                font-size: 1.25em;
                font-weight: 800;
                color: #1a2f6c;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 1.75em;
                font-weight: 800;
                color: #1a2f6c;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2.5em;
                font-weight: 800;
                color: #1a2f6c;
            }

            p {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #1a2f6c;
                font-weight: 500;
            }

            ul {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #1a2f6c;
                font-weight: 500;
                list-style-type: square;
            }

            img {
                max-width: 38em;
                width: 100%;
                height: auto;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }

            .accordian {

                width: 75%;
                float: right;

                div p {
                    color: #1a2f6c !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #1a2f6c !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #ffffff !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #ffffff;
                    border-top: 1px solid #ffffff;
                    border-right: 5px solid #ffffff;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #ffffff;
                    border-top: 1px solid #ffffff;
                    border-right: 5px solid #ffffff;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #ffffff;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }

        }

        .list-box-3 {
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;

            a {
                padding: 0 auto;
                margin: 0 auto;
                display: block;
            }

            img {
                height: 7em;
                width: auto;
                margin: 50px;
                transform-origin: center;
                transition: transform 0.2s ease-in, margin 0.2s ease-in;
            }

            span {
                padding: 0px !important;
                border-radius: 50%;
                display: flex;
                position: x;
                margin: 33px;
                border: 2px solid;
                transition: margin 0.2s ease-in;
                pointer-events: all;
                cursor: pointer;
            }

            span:hover {
                margin: 27px;
            }

            span:hover .circle {
                margin: 7px;
            }

            span:hover img {
                transform: scale(0.95);
                margin: 45px;
            }

            .circle {
                width: inherit;
                display: inline-block;
                border-radius: 50%;
                margin: -4px;
                transition: margin 0.2s ease-in;
            }

            h3 {
                color: #1a2f6c;
                margin-top: 0;
            }

            p {
                margin-top: -10px !important;
                width: 80%;
                margin: 0 auto;
                color: #1a2f6c;
            }
        }

        .list-box-4 {
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            margin: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }

        .list-box-5 {
            margin: 75px 0px;
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }

        .list-box-6 {
            display: inline;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 38em;
        }
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {

        padding: 0px;

        .shrink {
            width: 60%;
        }

        .landing-logo {
            animation: landingAnimation ease 2s, fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            opacity: 0;
            position: absolute !important;
            rotate: -45deg;
            width: auto !important;
            height: 20em !important;
            overflow-x: hidden !important;
            z-index: -5 !important;
        }

        .landing-img {
            animation: landingAnimation2 ease 1s, fadeInAnimation ease 0.5s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-delay: 1s;
            opacity: 0;
            width: 100% !important;
            height: auto !important;
            border-radius: 20px !important;
            margin: 0 auto !important;
            padding: 0 auto !important;
        }

        .push {
            margin-bottom: 95px;
        }

        .title-decor {

            h2 {
                color: #1a2f6c;
                font-size: 2em;
                font-weight: 700;
                position: relative;
                padding: 0 auto;
                margin: 0 auto;
            }

            p {
                color: #1a2f6c;
                font-size: 1em;
                position: relative;
                font-weight: 500;
                margin: 10px auto;
                width: 75%;
            }
        }

        .button {

            a {
                top: 50px;
                position: relative;
                text-decoration: none;
                border: 0;
                color: #ffffff;
                font-size: 1.25em;
                padding: 15px;
                background: linear-gradient(to right, #3d65c5, #3d65c5, #23479d);
                border-radius: 10px;
                font-style: none;
                transition: background-color 150ms linear;
            }

            a:hover {
                background-color: #1d3a80;
                cursor: pointer;

            }
        }

        .box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            background-color: #ffffff;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 1px solid #1a2f6c2d;

            h3 {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #1a2f6c;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            padding: 40px 15px 40px;
            vertical-align: top;

            h3 {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #1a2f6c;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .box-3 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 2px solid #ffffff12;

            h3 {
                font-size: 1.1em;
                color: #1a2f6c;
                padding: 0 auto;
                display: block;
                margin: 10px 0px;
            }

            p {
                line-height: 1.4;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 10px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }


        .list-box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            margin: 20px 20px !important;
            display: inline-block;
            position: relative;
            vertical-align: top;
            text-align: left;

            h3 {
                font-size: 1em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 25px auto 0px;
            }

            h2 {
                font-size: 1.75em;
                font-weight: 800;
                color: #ffffff;
                margin: 20px 0px;
            }

            p {
                font-size: 1em;
                font-weight: lighter;
                color: #ffffff;
                margin: 0px 0px auto;
                line-height: 1.5em;
            }

            img {
                width: 20em;
                height: auto;
                border-radius: 15px;
                box-shadow: 10px 10px #2626262e;
                padding: 0 auto;
                margin: 0px auto 20px;
            }
        }

        .list-box-2 {
            text-align: left;
            margin: 20px 0px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;
            text-align: left;
            max-width: 38em;
            float: left !important;

            .linear-title {
                margin: 52px 0px;
                max-width: fit-content;

                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -20px;
                    border: 2px solid #ffffff;
                    border-radius: 50px;
                    padding: 8px;
                    height: auto;
                    width: 1.75em;
                    background-color: #ffffff12;
                }

                p {
                    margin: 0px 20px;
                    padding: 0 auto;
                    display: inline;
                    color: #ffffff;
                    font-size: 1em;
                    font-weight: 600;
                }
            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 3.5em;
                font-weight: 800;
                color: #1a2f6c;
            }

            h4 {
                font-size: 1em;
                font-weight: 800;
                color: #1a2f6c;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                font-size: 2em;
                font-weight: 700;
                color: #1a2f6c;
                margin: 15px 0px 0px;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #1a2f6c;
            }

            p {
                font-size: 1em;
                color: #1a2f6c;
                line-height: 1.5em;
            }

            ul {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #1a2f6c;
                list-style-type: square;
            }

            img {
                max-width: 38em;
                width: 100%;
                height: auto;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }

            .accordian {

                width: 100%;
                margin: 0 auto;
                padding: 0 auto;
                position: relative;
                display: inline;

                div p {
                    color: #3d3d3d !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #3d3d3d !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #3d3d3d !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #3d3d3d;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }
        }

        .list-box-3 {
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;

            a {
                padding: 0 auto;
                margin: 0 auto;
                display: block;
            }

            img {
                height: 7em;
                width: auto;
                margin: 50px;
                transform-origin: center;
                transition: transform 0.2s ease-in, margin 0.2s ease-in;
            }

            span {
                padding: 0px !important;
                border-radius: 50%;
                display: flex;
                position: x;
                margin: 33px;
                border: 2px solid;
                transition: margin 0.2s ease-in;
                pointer-events: all;
                cursor: pointer;
            }

            span:hover {
                margin: 27px;
            }

            span:hover .circle {
                margin: 7px;
            }

            span:hover img {
                transform: scale(0.95);
                margin: 45px;
            }

            .circle {
                width: inherit;
                display: inline-block;
                border-radius: 50%;
                margin: -4px;
                transition: margin 0.2s ease-in;
            }

            h3 {
                color: #1a2f6c;
                margin-top: 0;
            }

            p {
                margin-top: -10px !important;
                width: 80%;
                margin: 0 auto;
                color: #1a2f6c;
            }
        }

        .list-box-4 {
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }

        .list-box-5 {
            margin: 75px 0px;
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }
    }

    @media all and (max-width: 658px) and (min-width: 0) {

        padding: 0px;

        .shrink {
            width: 90%;
        }

        .title-decor {

            padding: 40px 20px 10px;

            h2 {
                color: #1a2f6c;
                font-size: 2em;
                font-weight: 700;
                position: relative;
                padding: 0 auto;
                margin: 0 auto;
            }

            p {
                color: #1a2f6c;
                font-size: 1em;
                position: relative;
                font-weight: 500;
                margin: 10px auto;
            }
        }

        .box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            background-color: #ffffff;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 1px solid #1a2f6c2d;

            h3 {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #1a2f6c;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            padding: 40px 15px 40px;
            vertical-align: top;

            h3 {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 12px 5px 0px;
                display: inline-block;
                border-bottom: 3px solid #1a2f6c;
                vertical-align: top;
            }

            p {
                font-size: 0.85em;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 5px 0px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .box-3 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            display: inline-block;
            position: relative;
            width: 15em;
            vertical-align: top;
            text-align: left;
            height: 10em;
            margin: 0px 20px 20px 0px;
            padding: 20px 20px 25px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 21px;
            vertical-align: top;
            border: 2px solid #ffffff12;

            h3 {
                font-size: 1.1em;
                color: #1a2f6c;
                padding: 0 auto;
                display: block;
                margin: 10px 0px;
            }

            p {
                line-height: 1.4;
                color: #1a2f6c;
                padding: 0 auto;
                margin: 10px 0px;
            }

            img {
                border-radius: 17px;
                padding: 8px;
                height: auto;
                width: 30px;
            }

        }

        .list-box {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            margin: 20px 20px !important;
            display: inline-block;
            position: relative;
            vertical-align: top;
            text-align: left;

            h3 {
                font-size: 1em;
                font-weight: 800;
                color: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 25px auto 0px;
            }

            h2 {
                font-size: 1.75em;
                font-weight: 800;
                color: #ffffff;
                margin: 20px 0px;
            }

            p {
                font-size: 1em;
                font-weight: lighter;
                color: #ffffff;
                margin: 0px 0px auto;
                line-height: 1.5em;
            }

            img {
                width: 20em;
                height: auto;
                border-radius: 15px;
                box-shadow: 10px 10px #2626262e;
                padding: 0 auto;
                margin: 0px auto 20px;
            }
        }

        .list-box-2 {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            text-align: left;
            margin: 40px 20px !important;
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;
            text-align: left;
            max-width: 38em;
            float: left !important;


            .linear-title {
                margin: 52px 0px;
                max-width: fit-content;

                img {
                    display: inline;
                    padding: 0 auto;
                    margin-bottom: -20px;
                    border: 2px solid #ffffff;
                    border-radius: 50px;
                    padding: 8px;
                    height: auto;
                    width: 1.75em;
                    background-color: #ffffff12;
                }

                p {
                    margin: 0px 10px;
                    padding: 0 auto;
                    display: inline;
                    color: #ffffff;
                    font-size: 1em;
                    font-weight: 600;
                }
            }

            h1 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #1a2f6c;
            }

            h4 {
                font-size: 1em;
                font-weight: 800;
                color: #1a2f6c;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 auto;
                margin: 0 auto;
            }

            h3 {
                font-size: 2em;
                font-weight: 700;
                color: #1a2f6c;
                margin: 15px 0px 0px;
            }

            h2 {
                margin: 0 auto;
                padding: 0 auto;
                font-size: 2em;
                font-weight: 800;
                color: #1a2f6c;
            }

            p {
                font-size: 1em;
                color: #1a2f6c;
                line-height: 1.5em;
            }

            ul {
                line-height: 1.65em;
                width: 100%;
                font-size: 1em;
                color: #1a2f6c;
                list-style-type: square;
            }

            img {
                max-width: 38em;
                width: 100%;
                height: auto;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }

            .accordian {

                width: 100%;
                margin: 0 auto;
                padding: 0 auto;
                position: relative;
                display: inline;

                div p {
                    color: #3d3d3d !important;
                    padding-bottom: 20px;
                    width: 100%;
                }

                a {
                    color: #3d3d3d !important;
                    margin: 0 auto;
                    padding: 0 auto;
                    font-weight: 800;
                    font-size: 1.4em;
                    margin: 25px 0px 17px;
                }

                li {
                    color: #3d3d3d !important;
                    line-height: 1.5em;
                    margin: 10px 0px;
                }

                .plus {
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .plus-2 {
                    rotate: 90deg;
                    width: 10px;
                    float: right;
                    border-bottom: 2px solid #3d3d3d;
                    border-top: 1px solid #3d3d3d;
                    border-right: 5px solid #3d3d3d;
                    transition: transform 150ms ease-in-out;
                    transition-delay: 25ms;
                    cursor: pointer;
                    margin-top: -29px;
                }

                .dropdown {
                    position: relative;
                    overflow: hidden;
                    background-color: none;
                    border-bottom: 1px solid #3d3d3d;
                    padding: 0 auto;
                    margin: 0 auto;
                }

                .drop-button {
                    border: none;
                    cursor: pointer;
                    display: block;
                }

                .dropdown-content {
                    position: relative;
                    opacity: 1;
                    max-width: fit-content;
                    pointer-events: none;
                    overflow: hidden;
                    transition: max-height 350ms ease-in-out;
                    max-height: 0px;
                }


                .dropdown.active .plus-2 {
                    transform: rotate(-90deg);
                }

                .dropdown.active .dropdown-content {
                    max-height: 550px;
                    pointer-events: auto;
                }
            }
        }

        .list-box-3 {
            display: inline-block;
            position: relative;
            max-width: min-content;
            margin: 0 auto;
            vertical-align: top;

            a {
                padding: 0 auto;
                margin: 0 auto;
                display: block;
            }

            img {
                height: 7em;
                width: auto;
                margin: 50px;
                transform-origin: center;
            }

            span {
                padding: 0px !important;
                border-radius: 50%;
                display: flex;
                position: x;
                margin: 33px;
                border: 2px solid;
            }

            .circle {
                width: inherit;
                display: inline-block;
                border-radius: 50%;
                margin: -4px;
            }

            h3 {
                color: #1a2f6c;
                margin-top: 0;
            }

            p {
                margin-top: -10px !important;
                width: 80%;
                margin: 0 auto;
                color: #1a2f6c;
            }
        }

        .list-box-4 {
            display: inline-block;
            overflow: hidden;
        }

        .list-box-5 {
            margin: 0px 0px 20px;
            display: inline-block;
            text-align: left;
            padding: 0 auto;
            position: relative;
            width: 100%;
            max-width: 78em;
        }
    }
}

.overlay-pat {
    background-image: url(../../assets/img/seamless-wavy-line-pattern2.png), linear-gradient(70deg, #5b95ae, #0c376c);
}

.overlay-home {

    @media all and (min-width: 840px) {
        border-image: fill 1 linear-gradient(150deg, #23489db0 0%, #23489d00);
    }

    @media all and (min-width: 0em) and (max-width: 840px) {
        border-image: fill 1 linear-gradient(0deg, #23489db0 30%, #23489da9)
    }
}

.overlay {

    @media all and (min-width: 840px) {
        border-image: fill 1 linear-gradient(90deg, #23479d 30%, #23489da9);
    }

    @media all and (min-width: 0em) and (max-width: 840px) {
        border-image: fill 1 linear-gradient(0deg, #23479d 30%, #23489da9)
    }
}

.overlay-reversed {

    @media all and (min-width: 840px) {
        border-image: fill 1 linear-gradient(-90deg, #23479d 40%, #23489da9);
    }

    @media all and (min-width: 0em) and (max-width: 840px) {
        border-image: fill 1 linear-gradient(0deg, #23479d 30%, #23489da9)
    }
}

.overlay-rad {

    @media all and (min-width: 840px) {
        border-image: fill 1 linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        position: relative;
        /* create a positioning context */
        overflow: hidden;
        /* clip the pseudo-element */
    }

    @media all and (min-width: 0em) and (max-width: 840px) {
        border-image: fill 1 linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    }
}

.overlay-rad::before {

    @media all and (min-width: 62.5em) {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right,
                rgba(29, 118, 177, 0.137) 0%,
                rgba(62, 140, 185, 0.144) 100%,
                transparent 100%);
        opacity: 0;
        /* start fully transparent */
        transition: opacity 0.3s ease;
        /* fade in/out */
        pointer-events: none;
        z-index: -1;
    }

    @media all and (min-width: 0) and (max-width: 1119px) {

        border-image: fill 1 linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        position: relative;
        /* create a positioning context */
        overflow: hidden;
        /* clip the pseudo-element */

    }
}

/* On hover of your button, fade it in */
.overlay-rad:has(.button a:hover)::before {
    opacity: 1;
}

.background {

    @media all and (min-width: 62.5em) {

        z-index: 1;
        background-image: url(../../assets/img/BG9A6130-1.webp);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    @media all and (min-width: 840px) and (max-width: 1119px) {
        z-index: 1;
        background-image: url(../../assets/img/BG9A6130-3.webp);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;

    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        overflow: hidden;
        z-index: 1;
        background-image: url(../../assets/img/BG9A6130-3.webp);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;


    }

}

.background-rad {

    @media all and (min-width: 62.5em) {

        z-index: 1;
        background-image: url(../../assets/img/self_reg.webp);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
        pointer-events: none;
        transition: background-size 0.5s ease;
    }

    @media all and (min-width: 840px) and (max-width: 1119px) {
        z-index: 1;
        background-image: url(../../assets/img/self_reg.webp);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 100% 50%;

    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        overflow: hidden;
        z-index: 1;
        background-image: url(../../assets/img/self_reg.webp);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: 100% 50%;


    }

}

.background-rad:has(.button a:hover) {


    @media all and (min-width: 62.5em) {

        background-size: 105% auto !important;
        background-position: center center !important;
    }

    @media all and (min-width: 840px) and (max-width: 1119px) {

        background-size: auto 100%;
        background-position: 100% 50%;

    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        background-size: auto 100%;
        background-position: 100% 50%;

    }
}

.background-et {

    @media all and (min-width: 62.5em) {

        z-index: 1;
        background-image: url(../../assets/img/eventexample.jpg);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 100px -100px;
        background-attachment: fixed;

    }

    @media all and (min-width: 840px) and (max-width: 1119px) {
        z-index: 1;
        background-image: url(../../assets/img/eventexample.jpg);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: right 0px;
        background-attachment: fixed;

    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        z-index: 1;
        background-image: url(../../assets/img/eventexample.jpg);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: -100px 0px;
        background-attachment: fixed;

    }
}

.background-about {

    @media all and (min-width: 62.5em) {

        z-index: 1;
        background-image: url(../../assets/img/Jacquard-cards-1.webp);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: right 90px;
        background-attachment: fixed;

    }

    @media all and (min-width: 840px) and (max-width: 1119px) {
        z-index: 1;
        background-image: url(../../assets/img/Jacquard-cards-1.webp);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: right 0px;
        background-attachment: fixed;

    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        z-index: 1;
        background-image: url(../../assets/img/Jacquard-cards-1.webp);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: -100px 0px;
        background-attachment: fixed;

    }

}

.background-er {

    @media all and (min-width: 62.5em) {

        z-index: 1;
        background-image: url(../../assets/img/regexample.webp);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right 0px;
        background-attachment: fixed;

    }

    @media all and (min-width: 840px) and (max-width: 1119px) {
        z-index: 1;
        background-image: url(../../assets/img/regexample.webp);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right 0px;
        background-attachment: fixed;

    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        z-index: 1;
        background-image: url(../../assets/img/regexample.webp);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: -100px 0px;
        background-attachment: fixed;

    }

}

.background-os {

    @media all and (min-width: 62.5em) {

        z-index: 1;
        background-image: url(../../assets/img/495946945.jpg);
        background-size: 85% auto;
        background-repeat: no-repeat;
        background-position: right 0px;
        background-attachment: fixed;
    }

    @media all and (min-width: 840px) and (max-width: 1119px) {
        z-index: 1;
        background-image: url(../../assets/img/495946945.jpg);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: right 0px;
        background-attachment: fixed;
    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        z-index: 1;
        background-image: url(../../assets/img/495946945.jpg);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: -100px 0px;
        background-attachment: fixed;
    }

}

.background-ex {

    @media all and (min-width: 62.5em) {

        z-index: 1;
        background-image: url(../../assets/img/BG9A6098.jpg);
        background-size: 75% auto;
        background-repeat: no-repeat;
        background-position: right 0px;
    }

    @media all and (min-width: 840px) and (max-width: 1119px) {
        z-index: 1;
        background-image: url(../../assets/img/BG9A6098.jpg);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: right 0px;
        background-attachment: fixed;
    }

    @media all and (min-width: 0em) and (max-width: 840px) {

        z-index: 1;
        background-image: url(../../assets/img/BG9A6098.jpg);
        background-size: auto 75%;
        background-repeat: no-repeat;
        background-position: -100px 0px;
        background-attachment: fixed;
    }

}

.bottom {

    @media all and (min-width: 0em) and (max-width: 840px) {
        position: absolute !important;
        bottom: 0 !important;
        left: 0;
    }

}

.expand {
    height: 37em !important;
}

.sub-form-light {

    /* Style inputs with type="text", select elements and textareas */
    input[type=text],
    input[type=email],
    input[type=tel],
    select,
    textarea {
        width: 100%;
        /* Full width */
        padding: 12px;
        /* Some padding */
        border: 1px solid #2d5ac32d;
        /* Gray border */
        border-radius: 3px;
        /* Rounded borders */
        box-sizing: border-box;
        /* Make sure that padding and width stays in place */
        margin-top: 6px;
        /* Add a top margin */
        margin-bottom: 16px;
        /* Bottom margin */
        resize: vertical;
        /* Allow the user to vertically resize the textarea (not horizontally) */
        font-size: 16px;
        color: #3d3d3d;
        font-family: sans-serif;
        background-color: #2d5ac305;
    }

    input[id=fname],
    input[id=lname] {
        width: 100%;
        /* Full width */
        padding: 12px;
        /* Some padding */
        border: 1px solid #2d5ac338;
        /* Gray border */
        border-radius: 3px;
        /* Rounded borders */
        box-sizing: border-box;
        /* Make sure that padding and width stays in place */
        resize: vertical;
        /* Allow the user to vertically resize the textarea (not horizontally) */
        font-size: 16px;
        color: #3d3d3d;
        font-family: sans-serif;
    }

    label {
        color: #3d3d3d;
        font-size: 16px;
        font-weight: 500;

    }

    /* Style the submit button with a specific background color etc */
    input[type=submit] {
        background-color: #3d65c5;
        color: #ffffff;
        padding: 10px 18px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color linear 150ms;
        font-size: 14px;
        margin-bottom: 40px;
    }

    /* When moving the mouse over the submit button, add a darker green color */
    input[type=submit]:hover {
        background-color: #23479d;
    }

    /* Add a background color and some padding around the form */
    .wrapper {
        margin: 0 auto;
        padding: 50px auto 60px;
        position: relative;
        display: inline-block;
    }

    a {
        text-decoration: none;
        font-style: normal;
        color: #23479d;
        padding: 0 auto;
        margin: 0 auto;
    }

    a:hover {
        color: #36a2d4;
        text-decoration: underline;
    }

    h1 {
        margin: 0 auto 25px;
        padding: 0 auto;
        color: #3d3d3d;
    }

    h2 {
        margin: 0 auto 25px;
        padding: 0 auto;
        color: #3d3d3d;
    }

    p {
        margin: 0 auto 25px;
        padding: 0 auto;
        color: #3d3d3d;
    }

    input.error {
        border: 2px solid #e13232e5;
    }

    textarea.error {
        border: 2px solid #e13232e5;
    }

    label.error {
        background: #e13232e5;
        padding: 7px;
        margin: 5px 0px 0px;
        color: white;
        border-radius: 4px;
        font-size: 16px;
        display: block;
        max-width: max-content;
    }

}

.sub-form-dark {

    border-bottom: 1px solid #ffffff12;
    background-color: #23479d;


    /* Style inputs with type="text", select elements and textareas */
    input[type=text],
    input[type=email],
    input[type=tel],
    select,
    textarea {
        width: 100%;
        /* Full width */
        padding: 12px;
        /* Some padding */
        border: 1px solid #ffffff12;
        /* Gray border */
        border-radius: 3px;
        /* Rounded borders */
        box-sizing: border-box;
        /* Make sure that padding and width stays in place */
        margin-top: 6px;
        /* Add a top margin */
        margin-bottom: 16px;
        /* Bottom margin */
        resize: vertical;
        /* Allow the user to vertically resize the textarea (not horizontally) */
        font-size: 16px;
        color: #3d3d3d;
        font-family: sans-serif;
    }

    input[id=fname],
    input[id=lname] {
        width: 100%;
        /* Full width */
        padding: 12px;
        /* Some padding */
        border: 1px solid #ffffff12;
        /* Gray border */
        border-radius: 3px;
        /* Rounded borders */
        box-sizing: border-box;
        /* Make sure that padding and width stays in place */
        resize: vertical;
        /* Allow the user to vertically resize the textarea (not horizontally) */
        font-size: 16px;
        color: #3d3d3d;
        font-family: sans-serif;
    }

    label {
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;

    }

    /* Style the submit button with a specific background color etc */
    input[type=submit] {
        background-color: #ff8a4f;
        color: #ffffff;
        padding: 10px 18px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color linear 150ms;
        font-size: 14px;
        margin-bottom: 40px;
    }

    /* When moving the mouse over the submit button, add a darker green color */
    input[type=submit]:hover {
        background-color: #ff7a38;
    }

    /* Add a background color and some padding around the form */
    .wrapper {
        padding-top: 80px !important;
        margin: 0px 10px;
        padding: 50px auto 60px;
        position: relative;
        max-width: 40em;
        display: block;
    }

    .link {
        text-decoration: none;
        font-style: normal;
        color: #3aafe4;
    }

    a:hover {
        color: #36a2d4;
        text-decoration: underline;
    }

    h1 {
        margin: 0 auto 25px;
        padding: 0 auto;
        color: #ffffff;
    }

    input.error {
        border: 2px solid #e13232;
    }

    textarea.error {
        border: 2px solid #e13232;
    }

    label.error {
        background: #e13232;
        padding: 7px;
        margin: 5px 0px 0px;
        color: white;
        border-radius: 4px;
        font-size: 16px;
        display: block;
        max-width: max-content;
    }

}

.sent-page {

    p,
    h1 {
        color: #3d3d3d;
        text-align: center;
    }

    a {
        color: #2d5ac3;
        text-decoration: none;
    }

    a:hover {
        color: #3aafe4;
    }
}

.font-decor {

    @media all and (min-width: 1119px) {

        margin: 150px 20px 100px;

        h1 {
            color: #3d3d3d;
            font-size: 2em;
        }

        h2 {
            color: #3d3d3d;
            font-size: 3.5em;
        }

        p {
            color: #3d3d3d;
            font-size: 1em;
        }

        ul {
            color: #3d3d3d;
            list-style-type: square;
        }

        li {
            color: #3d3d3d;
        }

        a {
            text-decoration: none;
            font-style: normal;
            color: #23479d;
            padding: 0 auto;
            margin: 0 auto;
            pointer-events: all;
            cursor: pointer;
        }

        a:hover {
            color: #36a2d4;
            text-decoration: underline;
        }
    }

    @media all and (min-width: 0) and (max-width: 1119px) {

        margin: 0px 20px 30px;

        h1 {
            color: #3d3d3d;
            font-size: 1.75em;
        }

        h2 {
            padding: 0 auto;
            margin: 0 auto;
            color: #3d3d3d;
            font-size: 3em;
        }

        p {
            color: #3d3d3d;
            font-size: 1em;
        }

        ul {
            color: #3d3d3d;
            list-style-type: square;
        }

        li {
            color: #3d3d3d;
        }

        a {
            text-decoration: none;
            font-style: normal;
            color: #23479d;
            padding: 0 auto;
            margin: 0 auto;
            pointer-events: all;
            cursor: pointer;
        }

        a:hover {
            color: #36a2d4;
            text-decoration: underline;
        }
    }

}

/*This section will display the footer containing our address, copyright and alternative nav options.*/
.sub-footer {

    /*This will universally set the width of the elements to 100% the view width as well as create a blue background.*/

    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
    bottom: 0;
    display: block;
    background-color: #23479d;
    text-align: left;
    border-bottom: 1px solid #ffffff12;

    @media all and (min-width: 750px) {

        .wrapper {
            margin: 0px 70px 50px 10px;
            position: relative;
            cursor: default;
        }

        .nav-wrapper {
            margin: 125px 0px 50px;
            display: inline-flex;
            text-align: left;
        }

        div img {
            height: 70px;
            width: auto;
            margin: 0;
            margin-bottom: 0;
        }

        div h3 {
            margin: 0px 0px 0px;
            color: #fff;
            font-size: 21px;
            font-weight: 700;
            display: block;
            cursor: text;
            text-decoration: none;
        }

        div a:has(h3) {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            display: block;
            cursor: text;
            text-decoration: none !important;
        }

        div a {
            color: #fff;
            font-size: 16px;
            font-weight: lighter;
            cursor: pointer;
            display: block;
            margin: 30px 0px 0px;
            font-weight: lighter;
            transition: color 0.3s ease;
        }

        div a:hover {
            color: #78A9F5;
        }
    }

    @media all and (max-width: 750px) and (min-width: 0) {

        .wrapper {
            margin: 0px 70px 50px 30px;
            position: relative;
            cursor: default;
        }

        .nav-wrapper {
            margin: 50px 0px 0px;
            display: inline-block;
            text-align: left;
        }

        div img {
            height: 70px;
            width: auto;
            margin: 0;
            margin-bottom: 0;
        }

        div h3 {
            margin: 0px 0px 0px;
            color: #fff;
            font-size: 21px;
            font-weight: 700;
            display: block;
            cursor: text;
            text-decoration: none;
        }

        div a:has(h3) {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            display: block;
            cursor: text;
            text-decoration: none !important;
        }

        div a {
            color: #fff;
            font-size: 16px;
            font-weight: lighter;
            cursor: pointer;
            display: block;
            margin: 30px 0px 0px;
            font-weight: lighter;
            transition: color 0.3s ease;
        }

        div a:hover {
            color: #78A9F5;
        }
    }

}

.footer {

    padding: 30px;
    background-color: #23479d;
    text-align: left;

    @media all and (min-width: 750px) {


        .wrapper {
            margin: 0px 10px;
        }

        a {
            display: inline;
            color: #ffffff;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        p {
            color: #ffffff;
            display: inline;
        }

        a:hover {
            color: #78A9F5;
        }

        .copyright {
            float: right;
            display: inline;
            color: #ffffffc2;
            font-weight: 400;
            font-size: 14px;
            text-decoration: none;
        }

        .copyright:hover {
            color: #ffffffc2;
        }
    }

    @media all and (max-width: 750px) and (min-width: 0) {


        .wrapper {
            display: inline-block;
        }

        a {
            display: inline;
            color: #ffffff;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        p {
            color: #ffffff;
            display: inline;
        }

        a:hover {
            color: #78A9F5;
        }

        .copyright {
            margin-top: 10px;
            float: left;
            display: inline;
            color: #ffffffc2;
            font-weight: 400;
            font-size: 14px;
            text-decoration: none;
        }

        .copyright:hover {
            color: #ffffffc2;
        }
    }

}

.set-width {
    top: 0;
    display: block;
    position: relative;
    max-width: 78em;
    margin: 0 auto;
    padding: 0 auto;
    width: 100%;
    height: 100%;
}

.request-page {

    @media only screen and (min-width: 1119px) {

        .box {
            margin: 175px 10px 75px;
            border-bottom: 10px solid #23479d;
        }

        .title {

            color: #ffffff;
            background-color: #23479d;
            max-width: fit-content;
            padding: 25px 35px;

        }

        .service-button {


            input[type=checkbox]+label a {
                text-align: center;
                border: 2px solid #23479d;
                font-size: 15px;
                font-weight: bolder;
                color: #23479d;
                display: block;
                padding: 15px 40px;
                transition: background-color 50ms linear, color 50ms linear;
                pointer-events: all;
                cursor: pointer;
                margin: 15px 15px 0px 0px;
                width: 22ch;
            }

            input[type=checkbox]+label a:hover {
                background-color: #23479d;
                color: #ffffff;
                text-decoration: none;
            }

            input[type=checkbox]:checked+label a {
                background-color: #23479d;
                color: #ffffff;
                text-decoration: none;
            }

            .hidden {
                position: absolute;
                visibility: hidden;
                opacity: 0;
            }

            label.error {
                background: #e13232e5;
                padding: 7px;
                margin: 5px 0px 0px;
                color: white;
                border-radius: 4px;
                font-size: 16px;
                display: block;
                max-width: max-content;
            }
        }

        .wrapper {
            margin: 0 auto;
            position: relative;
            max-width: 40em;
            display: inline-block;
            margin: 0px 10px;
            height: fit-content;
        }

        .attex {
            margin-left: auto;
            height: fit-content;
            display: inline;
            position: relative;
            float: right;
            right: 0 !important;
            border-left: 1px solid #3d3d3d3d;
            padding-left: 15px !important;
            color: #3d3d3d;

            div p {
                margin: 10px 0px 30px;
                font-size: 17px;
            }

            div b {
                font-size: 17px;
            }

            h2 {
                margin: 0px 0px 30px;
                font-size: 2em;
            }
        }

    }

    @media all and (min-width: 0em) and (max-width: 1119px) {

        .box {
            margin: 120px 10px 50px;
            border-bottom: 10px solid #23479d;
        }

        .title {

            color: #ffffff;
            background-color: #23479d;
            max-width: fit-content;
            padding: 25px 35px;

        }

        .service-button {

            text-align: center;

            input[type=checkbox]+label a {
                text-align: center;
                border: 2.5px solid #23479d;
                font-size: 15px;
                font-weight: bolder;
                color: #23479d;
                display: block;
                padding: 15px 40px;
                transition: background-color 50ms linear, color 50ms linear;
                pointer-events: all;
                cursor: pointer;
                margin: 15px 0px 0px 0px;
                width: 22ch;
                text-decoration: none;
            }

            input[type=checkbox]:checked+label a {
                background-color: #23479d;
                color: #ffffff;
                text-decoration: none;
            }

            .hidden {
                position: absolute;
                visibility: hidden;
                opacity: 0;
            }

            label.error {
                background: #e13232e5;
                padding: 7px;
                margin: 5px 0px 0px;
                color: white;
                border-radius: 4px;
                font-size: 16px;
                display: block;
                max-width: max-content;
            }
        }

        .set-width {
            margin: 0px 10px;
            display: block;
            position: relative;
            max-width: 90%;
            margin: 0 auto;
            padding: 0 auto;
            width: 100%;
            height: 100%;
        }

        .attex {
            width: fit-content;
            border-left: none;
            border-top: 1px solid #3d3d3d3d;
            border-bottom: 1px solid #3d3d3d3d;
            padding: 30px 0px 15px;
            color: #3d3d3d;
            margin: -15px 0px 30px;

            div p {
                margin: 10px 0px 30px;
            }

            h2 {
                margin: 0px 0px 30px;
                font-size: 2em;
            }
        }

    }


}

#searchBar {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    width: fit-content;
    position: fixed;
    z-index: 1000;
}

#searchInput {
    flex: 1;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    color: #3d3d3d;
}

#prevButton,
#nextButton {
    padding: 8px 12px;
    font-size: 16px;
    border: none;
    background-color: #23479d;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

#searchButton {
    display: inline-block;
    border: none;
    background-color: none;
    cursor: pointer;
    margin: 0 auto;
    padding: 0 auto;

    img {
        width: 2em;
        height: auto;
        margin: 0 auto;
        padding: 0 auto;
    }
}

#searchInfo {
    color: #3d3d3d;
    margin: 0 auto;
    padding: 0 auto;
    position: fixed;
    margin-top: 50px;
}

mark {
    background-color: yellow;
    padding: 0 2px;
    border-radius: 3px;
}

mark.active {
    background-color: orange;
    outline: 2px solid orange;
}

#right {

    @media all and (min-width: 62.5em) {
        text-align: right;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        text-align: inherit;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        text-align: inherit;
    }

}

#height {

    @media all and (min-width: 62.5em) {
        padding: 125px 0px;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        padding: 25px 0px;
        margin: 0px !important;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        padding: inherit;
        margin: 0 !important;
    }

}

#height-half {

    @media all and (min-width: 62.5em) {
        padding: 75px 0px;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        padding: 25px 0px;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        padding: 0px 0px 25px;
    }

}

#middle {

    @media all and (min-width: 62.5em) {
        margin: 100px 0px !important;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        margin: inherit;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        margin: inherit;
    }
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    background: #00449e;
    /* a strong contrasting color */
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transform: translateY(-100%);
    /* hide off‐screen */
    transition: transform 0.3s;
    z-index: 999;
    /* keep it above other elements */
}

/* When focused, slide into view */
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid #ffbf47;
}

/* 1. Base state: hidden and slightly shifted down */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. Visible state: fully shown and in-place */
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#flex {

    @media all and (min-width: 62.5em) {
        display: flex;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        display: inherit;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        display: inherit;
    }

}

.belt {
    position: relative;
    overflow: hidden;
    /* optional height just so you can see it */
    padding: 10px 0;
}

.belt__viewport {
    width: 100%;
    /* the moving content will sit inside here */
}

/* was: animation: belt-scroll var(--dur, 20s) linear infinite; */
.belt__loop {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    will-change: transform;
    animation: none;
    /* <-- disable CSS keyframes */
}


.belt__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    flex: 0 0 auto;
    /* critical: don’t shrink */
}

.card {
    display: inline-block;
    pointer-events: all;
    cursor: pointer;
    max-width: min-content;
    width: 100%;
    height: auto;
    padding: 30px;
    background: inherit;
    color: #fff;
    background-color: #1b356e7c;
    white-space: nowrap;
    transform-origin: center;
    transition: scale 250ms ease-in-out;
    border-radius: 10px;


    h3 {
        margin: 0px auto 30px;
        font-weight: 600;
        font-size: 16px;
    }

    img {
        max-width: 20em;
        width: 100%;
        height: auto;
    }

    .new {
        color: #ffffff;
        margin: 15px 0px 0px;
        text-align: left;

    }

    .icon {
        margin: 0 auto;
        padding: 0 auto;
        width: 8em;
        height: auto;
        border-radius: 10px;
        display: block;
        padding: 25px 65px;
    }
}

.belt:not(.is-manual) .card:hover {
    scale: 1.05;
    transition: scale 250ms ease;
}

.belt.is-manual .card.is-active {
    scale: 1.05;
    transition: scale 250ms ease;
}

.belt.is-manual .card.is-active:hover {
    scale: 1.05;
    transition: scale 250ms ease;
}

.card:focus-visible {
    outline: none;
    /* optional */
    box-shadow: 0 0 0 3px #93c5fd;
    border-radius: 4px;
}


/* Drive the animation by a *measured* distance */
@keyframes belt-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--distance)));
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .belt__loop {
        animation: none;
    }
}

/* set your card gap once */
.belt {
    --gap: 24px;
}

.belt__track {
    display: flex;
    gap: var(--gap);
    flex: 0 0 auto;
}

/* add one gap of space only at the seam */
.belt__loop>.belt__track:first-child {
    padding-right: var(--gap);
}

/* When the user takes control… */
.belt.is-manual .belt__track--clone {
    display: none !important;
}

/* If your CSS animation runs on a wrapper (belt__loop), stop it in manual mode */
.belt.is-manual .belt__loop {
    animation: none !important;
}

/* Dots are invisible until manual mode */
.belt-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.belt:not(.is-manual) .belt-dots {
    display: none;
}

.belt-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: #cfd8ea;
    transition: background-color .25s ease, transform .25s ease;
    cursor: pointer;
}

.belt-dots .dot.active {
    background: #23479d;
    transform: scale(1.25);
}

.belt-dots .dot:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

/* --- list-box-3: hover pulse ring (SVG-free) --- */
.list-box-3 span {
    /* When present, --ring defines pulse color; otherwise it falls back */
    --pulse-width: 4px;
    position: relative;
    /* ensure pseudo-elements position correctly */
}

/* two pulses (staggered) */
.list-box-3 span::after,
.list-box-3 span::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--pulse-width));
    border-radius: 50%;
    pointer-events: none;
    border: var(--pulse-width) solid var(--ring);
    /* dotted like your SVG dots */
    opacity: 0;
    transform: scale(.92);
    transform-origin: 50% 50%;
    z-index: -1;
}

.list-box-3 span:hover::after,
.list-box-3 span:hover::before {
    animation: lb3Ripple 900ms ease-out forwards;
}

.list-box-3 span:hover::before {
    animation-delay: 140ms;
}

@keyframes lb3Ripple {
    0% {
        opacity: 0;
        transform: scale(.92);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.10);
    }
}

@media (prefers-reduced-motion: reduce) {

    .list-box-3 span::after,
    .list-box-3 span::before {
        animation: none !important;
    }
}

/* ===== RCS Radial — CONTAINED to parent width (78em) ===== */

/* Wrap: clip to parent width so nothing bleeds outside 78em */
.rsc-rad-wrap {
    position: relative;
    overflow: hidden;
    /* contain visuals to the .set-width column */
    isolation: isolate;
}

/* Core sizing & theme */
.rsc-rad-diagram {
    /* You can tweak these three */
    --hub: clamp(340px, 42vmin, 420px);
    /* circle diameter */
    --card-max: 340px;
    /* max width of each card */
    --standoff: 12px;
    /* little gap from spoke end to card */

    /* Derived: gap is “whatever space is left” on each side */
    /* 100% = parent width (78em); keep cards fully inside */
    --gap: clamp(20px,
            calc((75% - var(--hub) - var(--card-max)) / 2),
            160px);

    /* Regular box instead of oversizing a canvas */
    inline-size: 100%;
    /* obey the 78em parent */
    block-size: var(--hub);
    /* as tall as the circle */
    margin: 0 auto;
    position: relative;
    isolation: isolate;

    /* existing palette from earlier examples */
    --ink: #1a2f6c;
    --card-bg: #ffffff;
    --line: #f0f0f0;
}

/* Center hub (unchanged) */
.rsc-rad-hub {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 0;
}

.rsc-rad-hub-circle {
    inline-size: var(--hub);
    block-size: var(--hub);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, .06), 0 0 0 2px rgba(255, 255, 255, .08) inset;
}

.rsc-rad-hub-circle img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transform: scale(1.015);
}

/* Spoke defaults (angle + per-item push still work) */
.rsc-rad-spoke {
    --angle: 0deg;
    --push: 0px;
    position: absolute;
    inset: 0;
}

/* Line: from circle edge → anchor point (uses gap + push + standoff) */
.rsc-rad-spoke::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    inline-size: calc(var(--gap) + var(--standoff));
    transform-origin: left center;
    transform: rotate(var(--angle)) translateX(calc(var(--hub) / 2));
    background: linear-gradient(90deg, var(--line), rgba(0, 0, 0, 0.08));
    opacity: .88;
    transition: opacity .25s ease;
    z-index: 1;
}

/* Card: anchored layout + max width so it fits within container math */
.rsc-rad-callout {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:
        rotate(var(--angle)) translateX(calc(var(--hub)/2 + var(--gap) + var(--push) + var(--standoff))) rotate(calc(-1 * var(--angle))) translate(var(--tx, 0%), var(--ty, 0%));
    /* anchor preset (see below) */

    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .08);
    background: var(--card-bg);
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    max-inline-size: var(--card-max);
    /* <= ensures no overflow */
    z-index: 2;
    transition: transform .2s ease, border-color .2s ease;
}

/* Icon + text (unchanged) */
.rsc-rad-icon {
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(133, 133, 133, 0.06);
    border: 1px solid rgba(255, 255, 255, .08);
    flex: 0 0 auto;
}

.rsc-rad-icon img {
    inline-size: 50px;
    block-size: auto;
    display: block;
}

.rsc-rad-label {
    font-weight: 700;
    letter-spacing: .2px;
}

.rsc-rad-sub {
    display: block;
    font-size: 12px;
    opacity: .8;
    margin-top: 1px;
}

/* Hover */
.rsc-rad-spoke:is(:hover, :focus-within)::before {
    opacity: 1;
}

.rsc-rad-callout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 0 6px rgba(35, 71, 157, .45);
}

.rsc-rad-spoke:is(:hover, :focus-within) .rsc-rad-callout {
    border-color: rgba(255, 255, 255, .2);
    transform:
        rotate(var(--angle)) translateX(calc(var(--hub)/2 + var(--gap) + var(--push) + var(--standoff) + 4px)) rotate(calc(-1 * var(--angle))) translate(var(--tx, 0%), var(--ty, 0%));
}

/* ----- Anchor presets (where the spoke touches the card) ----- */
.rsc-anchor-tl .rsc-rad-callout {
    --tx: 0%;
    --ty: 0%;
}

/* top-left */
.rsc-anchor-tr .rsc-rad-callout {
    --tx: -100%;
    --ty: 0%;
}

/* top-right */
.rsc-anchor-bl .rsc-rad-callout {
    --tx: 0%;
    --ty: -100%;
}

/* bottom-left */
.rsc-anchor-br .rsc-rad-callout {
    --tx: -100%;
    --ty: -100%;
}

/* bottom-right */
.rsc-anchor-cl .rsc-rad-callout {
    --tx: 0%;
    --ty: -50%;
}

/* center-left */
.rsc-anchor-cr .rsc-rad-callout {
    --tx: -100%;
    --ty: -50%;
}

/* center-right */

/* Mobile: stack and hide lines */
@media (max-width: 720px) {
    .rsc-rad-diagram {
        inline-size: min(92vw, 960px);
        block-size: auto;
    }

    .rsc-rad-spoke::before {
        display: none;
    }

    .rsc-rad-callout {
        position: static;
        transform: none;
        inline-size: min(92vw, 560px);
        margin: 10px auto 0;
        display: grid;
        grid-template-columns: 44px 1fr;
    }
}

/* --- Radial: vertical halo so top/bottom cards aren't clipped --- */
.rsc-rad-diagram {
    /* Approximate pill height incl. padding/shadow; tweak if yours differs */
    --card-h: clamp(68px, 10vmin, 96px);
    /* Extra clearance = half card height + line standoff + a little breathing room */
    --halo: calc((var(--card-h) / 2) + var(--standoff) + 10px);

    /* Make the diagram taller: circle + top&bottom halo */
    block-size: calc(var(--hub) + 2 * var(--halo));
}

/* Keep the circle perfectly centered inside the taller canvas */
.rsc-rad-hub {
    /* Instead of inset:0, inset vertically by the halo so the hub sits centered */
    inset: var(--halo) 0;
}

/* --- Fix: only animate when the card itself is hovered/focused --- */

/* The spoke fills the whole diagram; don't let it capture hover */
.rsc-rad-spoke {
    pointer-events: none;
}

.rsc-rad-callout {
    pointer-events: auto;
}

/* Card nudge/outline ONLY on card hover/focus (not whole diagram) */
.rsc-rad-callout:is(:hover, :focus-visible) {
    border-color: rgba(255, 255, 255, .2);
    transform:
        rotate(var(--angle)) translateX(calc(var(--hub)/2 + var(--gap) + var(--standoff) + 4px)) rotate(calc(-1 * var(--angle))) translate(var(--tx, 0%), var(--ty, 0%));
}

/* Brighten the connector line only when THIS card is hovered/focused */
.rsc-rad-spoke:has(.rsc-rad-callout:is(:hover, :focus-visible))::before {
    opacity: 1;
}

/* ===== Fix: real stacking on mobile ===== */
@media (max-width: 640px) {

    /* Circle sits above, cards stack below */
    .rsc-rad-diagram {
        --hub: 62vw;
        --card: 92vw;
        --standoff: 10px;
        block-size: auto;
    }

    .rsc-rad-hub {
        position: relative !important;
        inset: auto !important;
        display: grid;
        place-items: center;
        margin: 8px auto 14px;
    }

    .rsc-rad-hub-circle {
        inline-size: min(62vw, 420px);
        block-size: min(62vw, 420px);
    }

    /* KEY: spokes must stop being absolute so children can flow */
    .rsc-rad-spoke {
        position: static !important;
        inset: auto !important;
        pointer-events: auto;
    }

    .rsc-rad-spoke::before {
        display: none !important;
    }

    /* Cards become full-width stacked rows */
    .rsc-rad-callout {
        position: static !important;
        transform: none !important;
        inline-size: 100% !important;
        max-inline-size: none !important;
        display: grid;
        grid-template-columns: 44px 1fr;
        align-items: center;
        gap: 12px;
        margin: 20px 0;
        padding: 14px 16px;
        border-radius: 14px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
    }

    /* Optional: slightly smaller icon */
    .rsc-rad-icon {
        inline-size: 40px;
        block-size: 40px;
    }
}

/* On touch devices, disable the hover nudge */
@media (hover: none) {
    .rsc-rad-callout:is(:hover, :focus-visible) {
        transform: none !important;
        border-color: rgba(255, 255, 255, .08);
    }
}

/* === Mobile fixes: keep cards inside the viewport and show shadows === */
@media (max-width: 640px) {

    /* a little side gutter so shadows never hit the edge */
    .rsc-rad-diagram {
        --rad-gutter: 16px;
        padding-inline: var(--rad-gutter);
    }

    /* let shadows render; the cards will now be safely narrower anyway */
    .rsc-rad-wrap,
    .banner-bw .list-box-4 {
        overflow: visible;
    }

    /* keep each pill <= viewport - gutters; center it */
    .rsc-rad-callout {
        box-sizing: border-box;
        inline-size: min(100%, calc(100vw - var(--rad-gutter) * 2)) !important;
        margin-inline: auto;
    }

    /* --- Normalize icon + background sizes --- */
    .rsc-rad-diagram {
        /* one place to control sizes */
        --icon-bg: 40px;
        /* background square */
        --icon-size: 40px;
        /* actual glyph size */
        --icon-radius: 10px;
    }


    /* SVGs and <img> behave the same and are centered */
    .rsc-rad-icon :is(img, svg) {
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
        /* optional per-icon fine-tuning (defaults do nothing) */
        transform:
            translate(var(--icon-dx, 0), var(--icon-dy, 0)) scale(var(--icon-scale, 1));
    }

}

#left {

    @media all and (min-width: 62.5em) {
        text-align: inherit;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        text-align: inherit;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        text-align: left !important;
    }
}

.hero {
    position: relative;
    overflow: hidden;
}

/* paragraph sits above the h1 during the animation */
.hero__lead {
    position: relative;
    z-index: 2;
}

/* h1 starts below and rises up behind the paragraph */
.hero__title {
    position: relative;
    z-index: 1;
    /* under the paragraph */
    transform: translateY(120%);
    /* start below */
    opacity: 0;
    animation: hero-rise 1500ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes hero-rise {
    0% {
        transform: translateY(120%);
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    /* fade in while still behind the paragraph */
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {

    .hero__title,
    .hero__lead {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

.accordian {

    max-width: 38em;

    @media all and (min-width: 62.5em) {

        margin-bottom: 150px;

        .dropdown>li {
            position: relative;
            list-style: none;
        }


        div p {
            max-width: 60ch;
            color: #505050 !important;
            width: 100%;
            font-weight: 100;
        }

        a {
            color: #3d3d3d !important;
            margin: 0 auto;
            padding: 0 auto;
            font-weight: 800;
            font-size: 1.15em;
            margin: 15px 0px;
        }

        li {
            color: #3d3d3d !important;
            line-height: 1.5em;
            margin: 20px 0px;
            width: 100%;
            max-width: 38em;
        }

        .item-head {
            position: relative;
        }

        /* make room so text never sits under the icon */
        .item-head .drop-button {
            display: block;
            padding-right: 40px;
            /* adjust as needed */
        }

        .plus {
            width: 10px;
            border-bottom: 2px solid #3d3d3d;
            border-top: 1px solid #3d3d3d;
            border-right: 5px solid #3d3d3d;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            float: none;
            margin: 0;

        }

        .plus-2 {
            rotate: 90deg;
            width: 10px;
            border-bottom: 2px solid #3d3d3d;
            border-top: 1px solid #3d3d3d;
            border-right: 5px solid #3d3d3d;
            transition: transform 150ms ease-in-out;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            float: none;
            margin: 0;
        }

        .dropdown {
            display: block;
            overflow: hidden;
            background-color: none;
            border-bottom: 1px solid #3d3d3d3d;
            padding: 0 auto;
            margin: 0 auto;
            width: 100%;
            max-width: 38em;
        }

        .drop-button {
            margin: 0 auto;
            border: none;
            cursor: pointer;
            display: block;
            position: relative;
        }

        .dropdown-content {
            position: relative;
            opacity: 1;
            max-width: fit-content;
            pointer-events: none;
            overflow: hidden;
            transition: max-height 500ms ease-in-out;
            transition-delay: none !important;
            max-height: 0px;
        }


        .dropdown.active .plus-2 {
            transform: translateY(-50%) rotate(90deg);
        }

        .dropdown.active .dropdown-content {
            max-height: 550px;
            pointer-events: auto;
        }
    }

    @media all and (min-width: 0) and (max-width: 1119px) {

        margin-bottom: 50px;

        .dropdown>li {
            position: relative;
            list-style: none;
        }


        div p {
            max-width: 60ch;
            color: #505050 !important;
            width: 100%;
            font-weight: 100;
        }

        a {
            color: #3d3d3d !important;
            margin: 0 auto;
            padding: 0 auto;
            font-weight: 800;
            font-size: 1.15em;
            margin: 15px 0px;
        }

        li {
            color: #3d3d3d !important;
            line-height: 1.5em;
            margin: 20px 0px;
            width: 100%;
            max-width: 38em;
        }

        .item-head {
            position: relative;
        }

        /* make room so text never sits under the icon */
        .item-head .drop-button {
            display: block;
            padding-right: 40px;
            /* adjust as needed */
        }


        .plus {
            width: 10px;
            border-bottom: 2px solid #3d3d3d;
            border-top: 1px solid #3d3d3d;
            border-right: 5px solid #3d3d3d;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            float: none;
            margin: 0;

        }

        .plus-2 {
            rotate: 90deg;
            width: 10px;
            border-bottom: 2px solid #3d3d3d;
            border-top: 1px solid #3d3d3d;
            border-right: 5px solid #3d3d3d;
            transition: transform 150ms ease-in-out;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            float: none;
            margin: 0;
        }

        .dropdown {
            display: block;
            overflow: hidden;
            background-color: none;
            border-bottom: 1px solid #3d3d3d3d;
            padding: 0 auto;
            margin: 0 auto;
            width: 100%;
            max-width: 38em;
        }

        .drop-button {
            margin: 0 auto;
            border: none;
            cursor: pointer;
            display: block;
            position: relative;
        }

        .dropdown-content {
            position: relative;
            opacity: 1;
            max-width: fit-content;
            pointer-events: none;
            overflow: hidden;
            transition: max-height 500ms ease-in-out;
            transition-delay: none !important;
            max-height: 0px;
        }


        .dropdown.active .plus-2 {
            transform: translateY(-50%) rotate(90deg);
        }

        .dropdown.active .dropdown-content {
            max-height: 550px;
            pointer-events: auto;
        }
    }
}

#margin-left {

    @media all and (min-width: 62.5em) {
        margin-left: auto !important;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        margin-left: auto !important;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        margin-left: none !important;
    }

}

.padding {

    @media all and (min-width: 62.5em) {
        padding: 0 20px;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        padding: 0 auto;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        padding: 0 auto;
    }
}

#float-r {

    @media all and (min-width: 62.5em) {
        float: right;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        float: left;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        float: left;
    }

}

#float-l {

    @media all and (min-width: 62.5em) {
        float: left;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        float: left;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        float: left;
    }

}

.hide {
    opacity: 0;
    display: none;
}

.margin-l-auto {

    @media all and (min-width: 62.5em) {
        margin-left: auto !important;
    }

    @media all and (min-width: 658px) and (max-width: 1119px) {
        margin-left: auto !important;
    }

    @media all and (min-width: 0em) and (max-width: 658px) {
        margin-left: 0 !important;
    }

}