@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
    --pistachio: #CFE57F;
    --green-2: #87D1C9;
    --midnight: #173D3C;
    --pistachio-rgb: 23,61,60;
    --green-2-2: #31817D;
    --turquoise: #318180;
}

.curved-image-bottom-left {
    border-bottom-left-radius: 10rem;
}

header {
    border-bottom: 1px solid #eee;
}

[data-bs-theme="dark"] header {
    border-bottom: 1px solid #333;
}

#cu-logo path {
    fill: var(--midnight);
}

[data-bs-theme="dark"] #cu-logo path {
    fill: var(--pistachio);
}

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

    html body {
        --bs-body-font-family: "Montserrat";
    }

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

a {
    color: var(--green-2-2);
}

[data-bs-theme="dark"] a {
    color: var(--pistachio);
}

[data-bs-theme="dark"] .bg-green a, [data-bs-theme="dark"] .alert a {
    color: var(--turquoise);
}

[data-bs-theme="dark"] .navbar-brand svg path {
    fill: var(--pistachio);
}

.bg-grey-pattern {
    background-image: url("https://www.claytonutz.com/cfimages/bg-pattern-grey.webp/public")
}

.breadcrumb a {
    color: var(--midnight)
}

[data-bs-theme="dark"] .breadcrumb a {
    color: var(--pistachio);
}

.breadcrumb-item {
    font-family: Montserrat;
    font-size: .875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem
}

.breadcrumb-item + .breadcrumb-item::before {
    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 24 24" fill="none" stroke="rgb(23,61,60)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>')
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 24 24" fill="none" stroke="rgb(207,229,127)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>')
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

a {
    text-decoration: none;
}

.hover-link {
    text-decoration: none;
    color: initial;
    display: block;
    padding: 1rem;
    transition: all 200ms;
}

    .hover-link:hover {
        background: var(--hover-bg);
    }

.paper {
    background: white;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 5%) 0px 1px 3px, rgb(0 0 0 / 10%) 0px 1px 2px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #173D3C;
    --bs-btn-border-color: #173D3C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #697F1A;
    --bs-btn-hover-border-color: #697F1A;
    --bs-btn-focus-shadow-rgb: #CFE57F;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #102828;
    --bs-btn-active-border-color: #CFE57F;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #173D3C;
    --bs-btn-disabled-border-color: #173D3C;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125rem; /* 128.571% */
    letter-spacing: 0.05rem;
}

.btn-outline-secondary {
    --bs-btn-color: #318180;
    --bs-btn-border-color: #318180;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #318180;
    --bs-btn-hover-border-color: #318180;
    --bs-btn-focus-shadow-rgb: 108,117,125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #318180;
    --bs-btn-active-border-color: #318180;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #318180;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #318180;
    --bs-gradient: none;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 2rem;
    border: 2px solid #318180;
    font-weight: 600;
    line-height: 1.25rem; /* 125% */
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--midnight);
}

[data-bs-theme="dark"] .form-control:focus {
    border-color: var(--pistachio);
}

h1, .display-1 {
    color: var(--midnight);
    /* Headings/LG/Heading 1 */
    font-family: Montserrat;
    font-size: 3rem;
    font-style: normal;
    font-weight: 600;
    line-height: 3.625rem; /* 120.833% */
    font-size: clamp(1.5rem, 5vw, 3rem);
}

h2, .display-2 {
    color: var(--midnight);
    /* Headings/LG/Heading 2 */
    font-family: Montserrat;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.5rem; /* 125% */
}

h3, .display-3 {
    color: var(--midnight);
    /* Headings/MD/Heading 3 */
    font-family: Montserrat;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.5rem; /* 142.857% */
}

h4, .display-4 {
    color: var(--midnight);
    /* Headings/SM/Heading 4 */
    font-family: Montserrat;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.125rem; /* 141.667% */
}

h5, .display-5 {
    color: var(--midnight);
    /* Headings/XS/Heading 5 */
    font-family: Montserrat;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.875rem; /* 150% */
}

h6, .display-6 {
    color: var(--midnight);
    /* Headings/XS/Heading 6 */
    font-family: Montserrat;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.625rem; /* 144.444% */
}

h7, .display-7 {
    color: var(--midnight);
    /* Headings/MD/Heading 7 */
    font-family: Montserrat;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem; /* 125% */
}

h8, .display-8 {
    color: var(--midnight);
    /* Headings/SM/Heading 8 */
    font-family: Montserrat;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem; /* 128.571% */
}

[data-bs-theme="dark"] .alert h1,
[data-bs-theme="dark"] .alert .display-1,
[data-bs-theme="dark"] .alert h2,
[data-bs-theme="dark"] .alert .display-2,
[data-bs-theme="dark"] .alert h3,
[data-bs-theme="dark"] .alert .display-3,
[data-bs-theme="dark"] .alert h4,
[data-bs-theme="dark"] .alert .display-4,
[data-bs-theme="dark"] .alert h5,
[data-bs-theme="dark"] .alert .display-5,
[data-bs-theme="dark"] .alert h6,
[data-bs-theme="dark"] .alert .display-6,
[data-bs-theme="dark"] .alert h7,
[data-bs-theme="dark"] .alert .display-7,
[data-bs-theme="dark"] .alert h8,
[data-bs-theme="dark"] .alert .display-8 {
    color: var(--midnight);
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] .display-1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] .display-2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] .display-3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] .display-4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] .display-5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .display-6,
[data-bs-theme="dark"] h7,
[data-bs-theme="dark"] .display-7,
[data-bs-theme="dark"] h8,
[data-bs-theme="dark"] .display-8 {
    color: var(--turquoise);
}

p {
    /* Body/LG/Body 1 paragraph */
    font-family: Montserrat;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.625rem; /* 162.5% */
    letter-spacing: -0.0125rem;
}

.dogear-left {
    border-top-left-radius: 100px;
}

.bg-1 {
    background: var(--pistachio);
}

.bg-2 {
    background: var(--green-2);
}

.bg-3 {
    background: var(--midnight);
}

.colour-1 {
    color: var(--pistachio);
}

.colour-2 {
    color: var(--green-2);
}

.colour-3 {
    color: var(--midnight);
}

.alert-info {
    --bs-alert-bg: var(--pistachio);
    --bs-alert-border-color: #829D20;
    --bs-alert-color: var(--midnight);
}

.alert p:last-child {
    margin-bottom: 0;
}

footer {
    background: url('/img/green-3-bg-tile.webp');
}

    footer .overlay {
        background: #173D3Cdd;
        background: linear-gradient(180deg, rgb(var(--pistachio-rgb)) 0%, rgba(var(--pistachio-rgb), 0.9) 50%, rgba(var(--pistachio-rgb), 0.8) 80%, rgba(var(--pistachio-rgb), 0.5) 100%);
    }

/*CHECKBOX*/


input[type=checkbox] {
    position: relative;
    width: 18px;
    height: 18px;
    border: 1px solid #bdc1c6;
    appearance: none;
    outline: 0;
    cursor: pointer;
    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
    margin-right: 5px;
}

    input[type=checkbox]::before {
        position: absolute;
        content: "";
        top: 1px;
        left: 5px;
        width: 6px;
        height: 11px;
        border-style: solid;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        color: var(--midnight);
    }

    input[type=checkbox]:checked {
        background: #fff;
        border-color: #869898;
    }

        input[type=checkbox]:checked::before {
            opacity: 1;
        }


.form-check-input:focus {
    border-width: 3px;
}

    .form-check-input:focus:before {
        top: 0px;
        left: 5px;
        width: 5px;
        height: 10px;
    }

.form-check-label {
    user-select: none; /* Standard syntax */
}
/*END CHECKBOX*/

.card {
    border: none;
}

.card .card-body {
    border: 1px solid #ddd;
    border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.nav-item {
    display: flex;
    align-items: center;
}

a.nav-link, button.btn.dropdown-toggle {
    color: #173D3C;
    font-family: Montserrat;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem;
}

[data-bs-theme="dark"] a.nav-link, [data-bs-theme="dark"] button.btn.dropdown-toggle {
    color: var(--turquoise);
}

[data-bs-theme="dark"] nav.navbar {
    background: #141517;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}


.ts-wrapper .ts-dropdown {
    margin: 0
}

.ts-dropdown .option {
    display: flex;
    align-items: center
}

.ts-control:focus-visible {
    outline: 1px solid var(--midnight)
}

.ts-control > div.item {
    font-size: 1rem
}

.hidden {
    display: none;
}

.cusearch-autocomplete-container {
    position: relative;
    z-index: 9;
}

.cusearch-autocomplete-results {
    position: absolute;
    border: 1px solid #677979;
    padding: .75rem 0;
    width: 100%;
    border-radius: 1rem;
    background: #fff;
    margin-top: 1rem;
    top: 100%
}

[data-bs-theme="dark"] .cusearch-autocomplete-results {
    border: 1px solid #CFE57F;
    background: var(--bg-2);
}

.loader-bars-container {
    width: 2rem;
    height: 2rem;
    display: flex;
    gap: 4px
}

.bg-midnight .loader-bar {
    background-color: var(--pistachio)
}

@keyframes loader-bar {
    0% {
        transform: scale(.6);
        opacity: 0
    }

    50%,to {
        transform: scale(1)
    }
}

.loader-bar {
    flex: 1 1;
    background: var(--midnight);
    animation: loader-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;
    border-radius: calc(.125rem)
}

    .loader-bar:first-of-type {
        animation-delay: -.24s
    }

    .loader-bar:nth-child(2) {
        animation-delay: -.12s
    }

.cusearch-autocomplete-results-inner {
    max-height: 352px;
    overflow: auto
}

.autocomplete-item {
    padding: .75rem 2rem .75rem 1.5rem;
    font-family: Montserrat;
    font-size: .75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    transition: all 200ms;
    border: 1px solid transparent;
    cursor: pointer
}

.scrollbar {
    scrollbar-width: auto;
    scrollbar-color: #173d3c #fff
}

*::-webkit-scrollbar {
    width: 19px
}

*::-webkit-scrollbar-track {
    background: #fff
}

*::-webkit-scrollbar-thumb {
    background-color: #173d3c;
    border-radius: 10px;
    border: 5px solid #fff
}

div.cusearch-autocomplete-results-inner {
    scrollbar-width: auto;
    scrollbar-color: #173d3c
}

    div.cusearch-autocomplete-results-inner::-webkit-scrollbar {
        width: 16px
    }

    div.cusearch-autocomplete-results-inner::-webkit-scrollbar-thumb {
        background-color: #173d3c;
        border-radius: 10px;
        border: 5px solid #fff
    }

.autocomplete-item span:first-of-type {
    margin-right: 20px
}

.autocomplete-item:hover, .autocomplete-item.active {
    border: 1px solid #31817d;
    background: #87d1c9;
}

[data-bs-theme="dark"] .autocomplete-item:hover, [data-bs-theme="dark"] .autocomplete-item.active {
   background: var(--midnight);
}

.autocomplete-item:active {
    border: 1px solid var(--midnight);
    background: var(--midnight);
    color: #fff
}

.search-spinner {
    width: 24px;
    height: 24px
}

.hero-image-container {
    flex: 0 0 350px
}



.sidenav a {
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
    color: #31817d;
    display: block;
    padding: .5rem 1rem .5rem 0;
    width: 100%;
    position: relative
}

    .sidenav a:hover:after {
        content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 24 24" fill="none" stroke="rgb(200,200,200)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>');
        right: 0;
        position: absolute;
        top: calc(50% - 8px);
        height: 16px
    }

    .sidenav a.active:after {
        content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 24 24" fill="none" stroke="rgb(49,129,125)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>');
        right: 0;
        position: absolute;
        top: calc(50% - 8px);
        height: 16px
    }

.sidenav > nav.nav {
    padding-left: 1rem;
    border-bottom: 1px solid #cecece
}

#scrollspy-menu {
    list-style: none;
    padding-left: 0;
}


#hero-image {
    max-width: 100%;
    border-top-right-radius: 10rem;
    object-fit: cover
}

.git-image {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.git-image-container {
    flex: 0 0 108px;
    margin-right: .5rem
}


.git-image-container.large {
    flex: 0 0 148px;
    margin-right: .5rem
}

:root {
    --dark-green: #173d3c;
    --dark-green-rgb: "23, 61, 60";
    --turquoise: #87d1c9;
    --pistachio: #cfe57f
}



.dark-green {
    color: var(--dark-green)
}

.turquoise-dark {
    color: #3ea39e
}

.bg-dark-green {
    background: var(--dark-green)
}

.bg-green {
    background: #cfe57f
}

.bg-blue {
    background: #87d1c9
}

.bg-grey {
    background: #869898
}

.bg-white {
    background: #fff
}

.color-dark-green {
    color: var(--dark-green)
}

.color-green {
    color: #cfe57f
}

.color-blue {
    color: #87d1c9
}

.color-grey {
    color: #869898
}

.color-white {
    color: #fff
}

.bg-aqua {
    background: #87d1c9
}

.bg-aqua-light {
    background: #c3e8e4
}

.bg-midnight {
    background: var(--dark-green)
}

.bg-midnight a {
    color: #fff
}

.bg-midnight a:hover {
    color: var(--turquoise)
}

.bg-midnight-2 {
    background: #224c4a
}

.bg-midnight-3 {
    background: #456463
}

.bg-midnight-dark {
    background: #102828
}

.bg-pistachio {
    background: #73915d
}

.color-aqua {
    background: #87d1c9
}

.color-aqua-light {
    background: #c3e8e4
}

.color-midnight {
    background: var(--dark-green)
}

.color-midnight-2 {
    background: #224c4a
}

.color-midnight-3 {
    background: #456463
}

.color-midnight-dark {
    background: #102828
}

.color-pistachio {
    background: #73915d
}

color-neutral-1 {
    color: #f6f6f6
}

color-neutral-2 {
    color: #eceded
}

color-neutral-3 {
    color: #e2e4e4
}

color-neutral-6 {
    color: #cecece
}

color-neutral-7 {
    color: #666
}

color-neutral-8 {
    color: #4d4d4d
}

color-neutral-9 {
    color: #222
}

.breadcrumb a {
    color: var(--dark-green)
}

a,a.display-7,a.display-8 {
    color: #318180;
    transition: color 200ms
}

a:hover,a.display-7:hover,a.display-8:hover {
    color: #697f1a
}

a:not(.btn):focus,a.display-7:focus,a.display-8:focus {
    color: #102828
}

a.dark-green {
    color: var(--dark-green)
}

.footer-section ul li {
    margin-top: 0.25rem
}

footer ul {
    list-style: none;
    padding-left: 0
}



.bg-midnight .btn-primary {
    color: var(--dark-green);
    --bs-btn-bg: var(--pistachio);
    --bs-btn-border-color: var(--pistachio);
    --bs-btn-hover-bg: var(--turquoise);
    --bs-btn-hover-border-color: var(--turquoise);
    --bs-btn-focus-shadow-rgb: #cfe57f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c3e8e4;
    --bs-btn-active-border-color: #cfe57f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dark-green);
    --bs-btn-disabled-border-color: var(--dark-green)
}

.bg-midnight .btn-primary:hover {
    color: var(--dark-green)
}

.bg-midnight .btn-outline-primary {
    --bs-btn-color: var(--pistachio);
    --bs-btn-border-color: var(--pistachio);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--turquoise);
    --bs-btn-hover-border-color: var(--turquoise);
    --bs-btn-focus-shadow-rgb: #cfe57f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #102828;
    --bs-btn-active-border-color: #cfe57f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dark-green);
    --bs-btn-disabled-border-color: var(--dark-green);
    border-radius: 2rem;
    border-width: 2px;
    padding: 1rem 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: .05rem;
    color: var(--pistachio)
}


.btn-primary-dark {
    --bs-btn-color: var(--dark-green);
    --bs-btn-bg: #cfe57f;
    --bs-btn-border-color: #cfe57f;
    --bs-btn-hover-color: var(--dark-green);
    --bs-btn-hover-bg: #87d1c9;
    --bs-btn-hover-border-color: #87d1c9;
    --bs-btn-focus-shadow-rgb: #cfe57f;
    --bs-btn-active-color: var(--dark-green);
    --bs-btn-active-bg: #cfe57f;
    --bs-btn-active-border-color: #87d1c9;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dark-green);
    --bs-btn-disabled-border-color: var(--dark-green);
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: .05rem
}

.btn-secondary-dark {
    --bs-btn-color: #cfe57f;
    --bs-btn-bg: var(--dark-green);
    --bs-btn-border-color: #cfe57f;
    --bs-btn-hover-color: #87d1c9;
    --bs-btn-hover-bg: var(--dark-green);
    --bs-btn-hover-border-color: #87d1c9;
    --bs-btn-focus-shadow-rgb: #cfe57f;
    --bs-btn-active-color: #cfe57f;
    --bs-btn-active-bg: var(--dark-green);
    --bs-btn-active-border-color: #cfe57f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dark-green);
    --bs-btn-disabled-border-color: var(--dark-green);
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: .05rem
}

footer {
    padding-top: 3rem
}

.case-study {
    border-top-left-radius: 5rem
}

.case-studies-image {
    width: 100%
}

.case-studies-image img {
    width: 100%;
    max-height: 260px
}

.case-studies-text {
    height: inherit
}



#scrollspy-menu nav {
    width: 100%
}

nav#scrollspy-menu > nav {
    display: block
}

.sidenav.parent-active {
    max-height: 95vh;
    overflow: auto;
}

div.col.me-5 .scrollspy-sidenav nav a {
    padding: 8px 10px;
    display: block;
    margin-bottom: 1px
}

.scrollspy-sidenav nav nav {
    display: none;
    padding-left: 10px
}

.scrollspy-sidenav nav a.active + nav {
    display: block
}

.mobile-menu {
    display: none
}

#scrollspy-menu nav li {
    padding: 0
}

.sidenav > li > nav {
    display: none;
    padding-left: 1rem;
    border-bottom: 1px solid #cecece;
}

    .sidenav > li > nav.show {
        display: block;
    }

#scrollspy-menu nav {
    width: 100%;
}

#scrollspy {
    top: 20px;
}
@media(max-width: 991px) {
    nav#scrollspy-menu {
        bottom: 0;
        left: 0;
        width: 100%;
        top: initial !important;
        position: fixed;
        height: 50px
    }

    .sidenav.parent-active {
        max-height: none
    }

    .sidenav.parent-active {
        display: block;
        overflow: auto;
        max-height: calc(100vh - 200px)
    }

    #scrollspy-menu > nav > a {
        font-weight: 700
    }

    #scrollspy > h2 {
        display: none
    }

    footer#footer {
        padding-bottom: 60px
    }

    div#scrollspy {
        z-index: 9
    }

    .scrollspy-sidenav a {
        color: #fff;
        padding: 1rem
    }

        .scrollspy-sidenav a:hover {
            color: var(--pistachio)
        }

    .mobile-menu {
        color: #fff;
        text-align: center;
        padding: 10px;
        font-size: 24px;
        background: var(--dark-green);
        display: block;
        border-bottom: 1px solid #fff
    }

    #scrollspy-menu.expanded nav {
        display: block;
        overflow: auto;
        max-height: calc(100vh - 120px)
    }

    div.col.me-5 #scrollspy-menu nav a {
        color: #fff;
        padding: 10px
    }

    #scrollspy-menu.expanded nav nav {
        display: block
    }

    div.col.me-5 #scrollspy-menu nav a {
        padding-left: 15px
    }

    #scrollspy-menu nav {
        display: none
    }

    nav#scrollspy-menu.expanded {
        height: calc(100% - 135px);
        background: var(--dark-green)
    }
}