/*
    Copyright 2026 PHD Consulting. All rights reserved.
*/

/* Font Scale */
/* Created using https://www.fluid-type-scale.com/ and other tools */
/* --fs-* = Font Size */
/* --lh-* = Line Height */

:root {
    --fs-xs: clamp(0.79rem, -0.02vi + 0.8rem, 0.78rem);
    --fs-sm: clamp(0.89rem, 0.12vi + 0.83rem, 0.94rem);
    --fs-md: clamp(1rem, 0.32vi + 0.85rem, 1.13rem);
    --fs-lg: clamp(1.13rem, 0.57vi + 0.85rem, 1.35rem);
    --fs-xl: clamp(1.27rem, 0.9vi + 0.83rem, 1.62rem);
    --fs-2xl: clamp(1.42rem, 1.32vi + 0.79rem, 1.94rem);
    --fs-3xl: clamp(1.6rem, 1.85vi + 0.71rem, 2.33rem);
    --fs-4xl: clamp(1.8rem, 2.52vi + 0.59rem, 2.8rem);
    --lh-xs: 1.7;
    --lh-sm: 1.6;
    --lh-md: 1.6;
    --lh-lg: 1.6;
    --lh-xl: 1.5;
    --lh-2xl: 1.4;
    --lh-3xl: 1.3;
    --lh-4xl: 1.2;
}

/* Theme */

:root {
    /* Header */
    --header-bg: #0059B3;
    --header-text: #FFFFFF;
    --header-link: #FFFFFF;
    --header-link-hover: #FFE385;
    /* Header Top Bar */
    --header-top-bar-bg: #00000020;
    --header-top-bar-text: #FFFFFF;
    --header-top-bar-link: #FFFFFF;
    --header-top-bar-link-hover: #FFE385;
    /* Header Nav Bar (Desktop) */
    --header-menu-bg: #0059B3;
    --header-menu-text: #FFFFFF;
    --header-menu-link: #FFFFFF;
    --header-menu-link-hover: #FFE385;
    /* Header Nav Bar (Mobile) */
    --header-mobile-menu-bg: #004185;
    --header-mobile-menu-text: #FFFFFF;
    --header-mobile-menu-link: #FFFFFF;
    --header-mobile-menu-link-hover: #FFE385;
    /* Footer */
    --footer-bg: #0059b3;
    --footer-text: #FFFFFF;
    --footer-link: #FFFFFF;
    --footer-link-hover: #FFE385;
    /* Footer Menu */
    --footer-menu-bg: #0060BF;
    --footer-menu-heading: #FFFFFF;
    --footer-menu-text: #FFFFFF;
    --footer-menu-link: #FFFFFF;
    --footer-menu-link-hover: #FFE385;
    --footer-menu-icon: #FFE385;
    /* Footer Copyright */
    --footer-copyright-bg: rgba(0,0,0,0.125);
    --footer-copyright-text: #FFFFFF;
    --footer-copyright-link: #FFFFFF;
    --footer-copyright-link-hover: #FFE385;
    /* Main */
    --main-bg: #F8F8F8;
    --main-heading: #004185;
    --main-heading-accent: #3E3E3E;
    --main-heading-muted: #3E3E3EBF;
    --main-text: #000000;
    --main-text-accent: #C0151B;
    --main-text-muted: #000000BF;
    --main-link: #3E8CFF;
    --main-link-hover: #9A3412;
    /* Primary Button */
    --btn-primary-bg: #c0151b;
    --btn-primary-text: #FFFFFF;
    --btn-primary-border: #c0151b;
    --btn-primary-hover-bg: #900c11;
    --btn-primary-hover-text: #FFFFFF;
    --btn-primary-hover-border: #900c11;
    /* Secondary Button */
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #c0151b;
    --btn-secondary-border: #c0151b;
    --btn-secondary-hover-bg: #c0151b;
    --btn-secondary-hover-text: #FFFFFF;
    --btn-secondary-hover-border: #c0151b;
    /* Hero */
    --hero-bg: #12181D;
    --hero-text: #FFFFFF;
    --hero-text-accent: #C0151B;
    --hero-text-muted: #FFFFFF99;
    --hero-link: #c0151b;
    --hero-link-hover: #FF0000;
    /* Hero Primary Button*/
    --hero-btn-primary-bg: #C0151B;
    --hero-btn-primary-text: #FFFFFF;
    --hero-btn-primary-border: #C0151B;
    --hero-btn-primary-hover-bg: #900C11;
    --hero-btn-primary-hover-text: #FFFFFF;
    --hero-btn-primary-hover-border: #900C11;
    /* Hero Secondary Button*/
    --hero-btn-secondary-bg: #00000099;
    --hero-btn-secondary-text: #FFFFFF;
    --hero-btn-secondary-border: #FFFFFF;
    --hero-btn-secondary-hover-bg: #FFFFFF;
    --hero-btn-secondary-hover-text: #000000;
    --hero-btn-secondary-hover-border: #FFFFFF;
    /* Section Light */
    --section-lt-bg: #DFDFDF;
    --section-lt-heading: #004185;
    --section-lt-heading-accent: #3E3E3E;
    --section-lt-heading-muted: #3E3E3EBF;
    --section-lt-text: #000000;
    --section-lt-text-accent: #C0151B;
    --section-lt-text-muted: #3E3E3E;
    --section-lt-link: #3E8CFF;
    --section-lt-link-hover: #9A3412;
    /* Section Light Primary Button*/
    --section-lt-btn-primary-bg: #FFFFFF;
    --section-lt-btn-primary-text: #0068d0;
    --section-lt-btn-primary-border: #FFFFFF;
    --section-lt-btn-primary-hover-bg: #CCCCCC;
    --section-lt-btn-primary-hover-text: #0068d0;
    --section-lt-btn-primary-hover-border: #CCCCCC;
    /* Section Light Secondary Button*/
    --section-lt-btn-secondary-bg: #00000099;
    --section-lt-btn-secondary-text: #FFFFFF;
    --section-lt-btn-secondary-border: #FFFFFF;
    --section-lt-btn-secondary-hover-bg: #FFFFFF;
    --section-lt-btn-secondary-hover-text: #000000;
    --section-lt-btn-secondary-hover-border: #FFFFFF;
    /* Section Dark */
    --section-dk-bg: #0059b3;
    --section-dk-heading: #FFE385;
    --section-dk-heading-accent: #FFE385;
    --section-dk-heading-muted: #FFE38599;
    --section-dk-text: #FBFCFF;
    --section-dk-text-accent: #FFE385;
    --section-dk-text-muted: #FBFCFF99;
    --section-dk-link: #FEF08A;
    --section-dk-link-hover: #FDE047;
    /* Section Dark Primary Button*/
    --section-dk-btn-primary-bg: #C0151B;
    --section-dk-btn-primary-text: #FFFFFF;
    --section-dk-btn-primary-border: #C0151B;
    --section-dk-btn-primary-hover-bg: #900C11;
    --section-dk-btn-primary-hover-text: #FFFFFF;
    --section-dk-btn-primary-hover-border: #900C11;
    /* Section Dark Secondary Button*/
    --section-dk-btn-secondary-bg: #00000099;
    --section-dk-btn-secondary-text: #FFFFFF;
    --section-dk-btn-secondary-border: #FFFFFF;
    --section-dk-btn-secondary-hover-bg: #FFFFFF;
    --section-dk-btn-secondary-hover-text: #000000;
    --section-dk-btn-secondary-hover-border: #FFFFFF;
    /* Section Ultra-Dark */
    --section-udk-bg: #101B24;
    --section-udk-heading: #BED2ED;
    --section-udk-heading-accent: #C0151B;
    --section-udk-heading-muted: #BED2ED99;
    --section-udk-text: #FFFFFF;
    --section-udk-text-accent: #C0151B;
    --section-udk-text-muted: #B0C4DEA8;
    --section-udk-link: #CCCCCC;
    --section-udk-link-hover: #F9E7AD;
    /* Other important colors */
    --gilded: #FFE385;
}

/* General Stuff */

html {
    height: 100%;
    min-height: 100%;
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.6;
}

body {
    height: 100%;
    min-height: 100%;
    min-height: 100vh;
    margin: 0 0;
    padding: 0 0;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: var(--fs-md);
    line-height: var(--lh-md);
}

#frmMaster {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-height: 100vh;
}

/* Some Bootstrap Fixes */

.container-xl {
    max-width: 1440px;
}

.modal {
    z-index: 99990;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(0.5rem) !important;
}

textarea {
    resize: none;
}

.card {
    color: var(--main-text);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(0,0,0,0.0163);
    border-color: rgba(0,0,0,0.125);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.33);

    .img-card-top {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.125);
    }

    .card-body {
        padding: 1.5rem 1.5rem;

        .card {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    }

    ul {
        margin-left: 2rem;
    }
}

.shadow {
    box-shadow: 0px 0.25rem 0.25rem 0.5rem -0.25rem rgba(0,0,0,0.33) !important;
}

figure {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 0.5rem;
}

figure figcaption {
    display: none;
}

figure img {
    position: relative;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

.caption {
    margin-bottom: 0;
}

.text-bold {
    font-weight: bold;
}

h1, .text-4xl {
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;

/*    &::before {
        content: "";
        display: table;
        margin-bottom: calc((var(--cap-height-ratio, 0.72) - var(--lh-4xl)) * 0.5 * var(--fs-4xl));
    }*/
}

h2, .text-3xl {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;

/*    &::before {
        content: "";
        display: table;
        margin-bottom: calc((var(--cap-height-ratio, 0.72) - var(--lh-3xl)) * 0.5 * var(--fs-3xl));
    }*/
}

h3, .text-2xl {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;

/*    &::before {
        content: "";
        display: table;
        margin-bottom: calc((var(--cap-height-ratio, 0.72) - var(--lh-2xl)) * 0.5 * var(--fs-2xl));
    }*/
}

h4, .text-xl {
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;

/*    &::before {
        content: "";
        display: table;
        margin-bottom: calc((var(--cap-height-ratio, 0.72) - var(--lh-xl)) * 0.5 * var(--fs-xl));
    }*/
}

h5, .text-lg {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;

/*    &::before {
        content: "";
        display: table;
        margin-bottom: calc((var(--cap-height-ratio, 0.72) - var(--lh-lg)) * 0.5 * var(--fs-lg));
    }*/
}

h6, .text-md {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;

/*    &::before {
        content: "";
        display: table;
        margin-bottom: calc((var(--cap-height-ratio, 0.72) - var(--lh-md)) * 0.5 * var(--fs-md));
    }*/
}

.has-6-columns-max {
    /* Content with this class will have at most 6 columns, which each column at least 128px wide. */
    columns: 128px 6;
    column-gap: 2rem;
}

.has-auto-columns {
    columns: 3 300px;
    column-gap: 2rem;
}

.has-auto-columns-seo {
    columns: 4 250px;
    column-gap: 2rem;
}

.w-33 {
    max-width: 33.333%;
}

.w-66 {
    max-width: 66.666%;
}

/* Form Fixes */

label {
    color: var(--main-text);
    font-weight: bold;
}

label sup {
    color: var(--main-text-accent);
    font-weight: bold;
}

input[type="text"], input[type="email"], input[type="tel"], textarea, textarea.form-control {
    color: var(--main-text);
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF99;

    &:focus {
        color: var(--main-text);
        background-color: #FFFFFF;
        border: 1px solid #FFFFFF99;
    }
}

/* ADA Skip Links */
.skip_links {
    text-align: left;
    position: fixed;
    z-index: 99999;
}

.skip_links a {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip_links a:focus, .skip_links a:active {
    position: static;
    left: 0.25rem;
    top: 0.25rem;
    width: auto;
    height: auto;
    padding: 1rem 1rem;
    overflow: visible;
    text-decoration: none;
    color: #000000;
    border: 1px solid #FFFFFF;
    background-color: #FCFCFC;
}

/* Back to Top Button */

.back-to-top {
    z-index: 9999;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    display: none;
    box-shadow: 0px 0.25rem 0.5rem 0px rgba(0,0,0,0.33);
}

/* Header */

header {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    width: 100%;
    color: var(--header-text);
    background-color: var(--header-bg);

    a:not(.btn) {
        &, &:visited {
            color: var(--header-link);
            font-weight: bold;
            text-decoration: none;
        }

            &:hover {
                color: var(--header-link-hover);
                text-decoration: none;
            }
    }

    .header-contact {
        font-size: var(--fs-md);
        line-height: var(--lh-md);
        color: var(--header-top-bar-text);
        background-color: var(--header-top-bar-bg);
        border-bottom: 1px solid rgba(255,255,255,0.125);

        ul {
            margin-bottom: 0;
        }

        a:not(.btn) {
            &, &:visited {
                color: var(--header-top-bar-link);
                font-weight: bold;
                text-decoration: none;
            }

                &:hover {
                    color: var(--header-top-bar-link-hover);
                    text-decoration: none;
                }
        }

        @media (max-width: 991px) {
            display: none;
        }
    }

    .header-menu {
        overflow-x: clip;

        .mobile-contact-info {
            font-size: var(--fs-md);
            line-height: var(--lh-md);

            ul {
                margin-bottom: 0;
            }

            a:not(.btn) {
                &, &:visited {
                    color: var(--header-link);
                    font-weight: bold;
                    text-decoration: none;
                }

                    &:hover {
                        color: var(--header-link-hover);
                        text-decoration: none;
                    }
            }
        }
    }

    @media (max-width: 991px) {
        padding-bottom: 0;
    }
}

/* Nav Menu */

nav.top-navbar {
    padding-block: 0;
    padding-inline: 0;
    /* font-family: 'Archivo Narrow', Arial, Helvetica, sans-serif; */
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: var(--fs-md);
    font-weight: bold;
    line-height: var(--lh-md);
    text-transform: uppercase;
    color: var(--header-menu-text);
    background-color: transparent;
    /* Toggler */
    .navbar-toggler {
        padding: 0.25rem 0 0.25rem 0;
        font-size: var(--fs-3xl);
        color: var(--header-mobile-menu-link);
        line-height: 1.0;

        &, &:active, &:focus {
            border: 0 none transparent;
            outline: 0 none transparent;
            color: var(--header-mobile-menu-link);
            text-decoration: none;
            box-shadow: none;
        }

            &:hover {
                color: var(--header-mobile-menu-link-hover);
            }
    }
    /* Navigation Lists */
    ul {
        &.navbar-nav {

            @media (min-width: 992px) and (max-width: 1199px) {
                font-size: calc(var(--fs-md) * 0.95);
                line-height: var(--lh-md);
            }

            a.nav-link.dropdown-toggle::after {
                display: none;
            }

            > li {
                > a.nav-link {
                    &, &:visited {
                        display: inline-block;
                        margin-right: 1.25rem;
                        padding-block: 0;
                        padding-inline: 0;
                        color: var(--header-menu-link);
                        border: none;
                        border-bottom: 2px solid var(--header-bg);

                        @media (max-width: 991px) {
                            border-bottom: 0 none;
                        }
                    }
                }

                    > a.nav-link:not(.dropdown-toggle):hover {
                        color: var(--header-menu-link-hover);
                        text-decoration: none;
                        box-shadow: none;
                        border-bottom: 2px solid var(--header-menu-link-hover);

                        @media (max-width: 991px) {
                            border-bottom: 0 none;
                        }
                    }

                    > a.nav-link.dropdown-toggle {
                        &:hover,
                        &:focus,
                        &.show {
                            color: var(--header-menu-link-hover);
                            text-decoration: none;
                            box-shadow: none;
                        }
                    }

                &:hover > a.nav-link.dropdown-toggle,
                &.show > a.nav-link.dropdown-toggle {
                    color: var(--header-menu-link-hover);
                }

                &:last-child > a.nav-link {
                    margin-right: 0;
                }
            }
        }

        &.dropdown-menu {
            border: 0 none transparent;
            box-shadow: 0px 2px 0px 1px rgba(0, 0, 0, 0.2);

            > li {
                > a.dropdown-item {
                    &, &:visited {
                        padding: 0.5rem 1rem;
                        font-size: var(--fs-sm);
                        line-height: var(--lh-sm);
                        color: #000000;
                        text-decoration: none;
                        font-weight: 400;
                    }

                        &:hover {
                            color: #000000;
                            text-decoration: none;
                            background-color: rgba(0, 0, 0, 0.125);
                        }
                }

                &.dropdown-menu-arrow {
                    top: -25px;
                    left: 20px;
                    width: 0;
                    height: 0;
                    position: relative;

                    &::before, &::after {
                        content: "";
                        position: absolute;
                        display: block;
                        width: 0;
                        height: 0;
                        border-width: 7px 8px;
                        border-style: solid;
                        border-color: transparent;
                        z-index: 1001;
                    }

                    &::after {
                        bottom: -18px;
                        right: -8px;
                        border-bottom-color: #FFFFFF;
                    }

                    &::before {
                        bottom: -17px;
                        right: -8px;
                    }
                }
            }
        }
    }

    @media (max-width: 1399px) {
        ul.navbar-nav > li > a.nav-link {
            margin-right: 0.5rem;
            padding: 0.5rem 0.75rem 0.5rem 0.75rem !important;
        }
    }

    @media (max-width: 991px) {
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.75rem 1rem;
        background-color: var(--header-mobile-menu-bg);

        ul.navbar-nav > li > a.nav-link {
            &, &:visited {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
                padding: 0.5rem 1rem !important;
                color: var(--header-mobile-menu-link);
            }

                &:hover {
                    color: var(--header-mobile-menu-link-hover);
                    text-decoration: none;
                    box-shadow: none;
                }
        }
    }
}

/* Footer */

footer {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    width: 100%;
    padding: 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--footer-text);
    font-weight: 400;
    background-color: var(--footer-bg);

    hr {
        opacity: 1.0;
    }

    .container-xl {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .footer-menu {
        color: var(--footer-menu-text);

        h2 {
            margin-bottom: 0.33rem;
            font-family: 'Archivo Narrow', Arial, Helvetica, sans-serif;
            color: var(--footer-menu-heading);
            font-weight: bold;
        }

        hr {
            margin-top: 0;
            margin-bottom: 1rem;
            border-top: 2px solid var(--footer-menu-heading);
        }

        ul.fa-ul {
            margin-left: 1.75rem;

            i {
                color: var(--footer-menu-icon);
            }
        }

        a:not(.btn) {
            &, &:visited {
                color: var(--footer-menu-link);
                text-decoration: none;
            }

                &:hover {
                    color: var(--footer-menu-link-hover);
                    text-decoration: none;
                }
        }
    }

    .footer-copyright {
        display: block;
        margin: 0 0;
        padding: 2rem 0 calc(2rem - 2px) 0;
        color: var(--footer-copyright-text);
        background-color: var(--footer-copyright-bg);

        ul {
            margin-bottom: 0;
        }

        a:not(.btn) {
            &, &:visited {
                color: var(--footer-copyright-link);
                text-decoration: none;
            }

                &:hover {
                    color: var(--footer-copyright-link-hover);
                    text-decoration: none;
                }
        }
    }
}

/* Main */

main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    padding: 0 0;
    color: var(--main-text);
    background-color: var(--main-bg);

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 1.5rem;
        font-family: 'Archivo Narrow', Arial, Helvetica, sans-serif;
        color: var(--main-heading);
        text-wrap: balance;

        .muted, &.muted {
            color: var(--main-heading-muted);
        }

        .accent, &.accent {
            color: var(--main-heading-accent);
        }
    }

    p {
        margin-top: 0;
        margin-bottom: 1.5rem;
        text-wrap: pretty;
    }

    a:not(.btn) {
        &, &:visited {
            color: var(--main-link);
            text-decoration: none;
        }

            &:hover {
                color: var(--main-link-hover);
                text-decoration: none;
            }
    }

    a:not(.btn) {
        &:hover {
        }
    }

    a, input, button {
        &.btn.btn-primary {
            &, &:visited {
                color: var(--btn-primary-text) !important;
                background-color: var(--btn-primary-bg) !important;
                border-color: var(--btn-primary-border) !important;
            }

                &:hover {
                    color: var(--btn-primary-hover-text) !important;
                    background-color: var(--btn-primary-hover-bg) !important;
                    border-color: var(--btn-primary-hover-border) !important;
                }
        }

        &.btn.btn-secondary {
            &, &:visited {
                color: var(--btn-secondary-text) !important;
                background-color: var(--btn-secondary-bg) !important;
                border-color: var(--btn-secondary-border) !important;
            }

                &:hover {
                    color: var(--btn-secondary-hover-text) !important;
                    background-color: var(--btn-secondary-hover-bg) !important;
                    border-color: var(--btn-secondary-hover-border) !important;
                }
        }
    }

    .accent {
        color: var(--main-text-accent);
    }

    .muted {
        color: var(--main-text-muted);
    }

    .gilded {
        color: var(--gilded);
    }

    .fa-2x.fa-stack-scale-80 {
        font-size: 1.33em;
    }

    .fa-stack-2x {
        color: var(--main-text-accent);
    }

    .fa-inverse {
        color: var(--main-bg);
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;

        @media (max-width: 767px) {
            display: flex;
            flex-direction: column;
        }
    }

    .icon {
        font-size: 5rem;
        width: auto !important;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        color: var(--main-text-accent);
    }

    .row.fancy-border {
        overflow-x: clip;
        max-width: 100%;

        [class^="col-"]:not(:last-child) {
            border-right: 2px solid #0000001A;
        }
    }

    section {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 3.125rem 1rem;

        h1, h2 {
            margin-bottom: 1.5rem;
        }

        h3, h4, h5, h6 {
            margin-bottom: 1.25rem;
        }

        hr {
            margin: 2.25rem 0 2rem 0;
            border-top: 2px solid #888888;
            opacity: 0.5;
        }

        a:not(.btn) {
            &:hover {
                .card {
                    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
                    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
                }
            }
        }

        /* Hero Section */
        &.hero {
            max-height: 640px;
            color: var(--hero-text);
            background-color: var(--hero-bg);
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;

            hr {
                margin: 2.5rem 0 2rem 0 !important;
                border-width: 3px !important;
            }

            .container-xl {
                min-height: 480px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                @media (max-width: 991px) {
                    min-height: 480px;
                    padding-top: 2.5rem;
                    padding-bottom: 2.5rem;
                }

                @media (max-width: 767px) {
                    min-height: 0;
                }
            }

            &.hero-tall {
                max-height: 750px;

                .container-xl {
                    min-height: 640px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    @media (max-width: 991px) {
                        min-height: 480px;
                        padding-top: 2.5rem;
                        padding-bottom: 2.5rem;
                    }

                    @media (max-width: 767px) {
                        min-height: 0;
                    }
                }
            }

            &.hero-short {
                max-height: 480px;

                .container-xl {
                    min-height: 0;
                }
            }

            span {
                display: block;
                text-wrap: balance;
            }

            h1,
            h2,
            h3 {
                margin-bottom: 2rem;
                color: var(--heading-hero);
                text-transform: uppercase;
            }

            hr {
                width: 10ch;
                margin: 0 auto;
                border-top: 2px solid var(--hero-text-accent);
                opacity: 0.75;
            }

            p {
                max-width: 90%;
                margin-bottom: 2rem;
                font-size: var(--fs-lg);
                line-height: var(--lh-lg);

                @media (max-width: 991px) {
                    max-width: 100%;
                    width: 66%;
                }

                @media (max-width: 767px) {
                    max-width: 100%;
                    width: 75%;
                }
            }

            a, input, button {
                &.btn.btn-primary {
                    &, &:visited {
                        color: var(--hero-btn-primary-text) !important;
                        background-color: var(--hero-btn-primary-bg) !important;
                        border-color: var(--hero-btn-primary-border) !important;
                    }

                        &:hover {
                            color: var(--hero-btn-primary-hover-text) !important;
                            background-color: var(--hero-btn-primary-hover-bg) !important;
                            border-color: var(--hero-btn-primary-hover-border) !important;
                        }
                }

                &.btn.btn-secondary {
                    &, &:visited {
                        color: var(--hero-btn-secondary-text) !important;
                        background-color: var(--hero-btn-secondary-bg) !important;
                        border-color: var(--hero-btn-secondary-border) !important;
                    }

                        &:hover {
                            color: var(--hero-btn-secondary-hover-text) !important;
                            background-color: var(--hero-btn-secondary-hover-bg) !important;
                            border-color: var(--hero-btn-secondary-hover-border) !important;
                        }
                }
            }
        }
        /* Light Background Section */
        &.bg-lt {
            color: var(--section-lt-text);
            background-color: var(--section-lt-bg);

            & ::selection {
                background-color: var(--section-lt-text);
                color: var(--section-lt-bg);
            }

            h1, h2, h3, h4, h5, h6 {
                color: var(--section-lt-heading);

                .muted, &.muted {
                    color: var(--section-lt-heading-muted);
                }

                .accent, &.accent {
                    color: var(--section-lt-heading-accent);
                }
            }

            hr {
                border-color: var(--section-lt-text);
            }

            .muted {
                color: var(--section-lt-text-muted);
            }

            .accent {
                color: var(--section-lt-text-accent);
            }

            .row.fancy-border {
                overflow-x: clip;
                max-width: 100%;

                [class^="col-"]:not(:last-child) {
                    border-right: 2px solid #FFFFFF1A;
                }
            }

            .card {
                color: var(--section-lt-text);
                background-color: rgba(255,255,255,0.125);
                border: 1px solid #dfdfdf;

                .img-card-top {
                    border-bottom: 1px solid #dfdfdf;
                }
            }

            a:not(.btn) {
                &, &:visited {
                    color: var(--section-lt-link);
                    text-decoration: none;
                }

                    &:hover {
                        color: var(--section-lt-link-hover);
                        text-decoration: none;

                        .card {
                            color: var(--section-lt-text);
                            background-color: rgba(255,255,255,0.25);
                            border: 1px solid #FFFFFF;
                            -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
                            box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
                        }
                    }
            }

            .icon {
                color: var(--section-lt-text-accent);
            }

            .fa-stack {

                .fa-stack-2x {
                    color: var(--section-lt-text-accent);
                }

                .fa-inverse {
                    color: var(--section-lt-bg);
                }
            }

            .fa-ul li i {
                color: #FFE385;
            }

            a, input, button {
                &.btn.btn-primary {
                    &, &:visited {
                        color: var(--section-lt-btn-primary-text) !important;
                        background-color: var(--section-lt-btn-primary-bg) !important;
                        border-color: var(--section-lt-btn-primary-border) !important;
                    }

                        &:hover {
                            color: var(--section-lt-btn-primary-hover-text) !important;
                            background-color: var(--section-lt-btn-primary-hover-bg) !important;
                            border-color: var(--section-lt-btn-primary-hover-border) !important;
                        }
                }

                &.btn.btn-secondary {
                    &, &:visited {
                        color: var(--section-lt-btn-secondary-text) !important;
                        background-color: var(--section-lt-btn-secondary-bg) !important;
                        border-color: var(--section-lt-btn-secondary-border) !important;
                    }

                        &:hover {
                            color: var(--section-lt-btn-secondary-hover-text) !important;
                            background-color: var(--section-lt-btn-secondary-hover-bg) !important;
                            border-color: var(--section-lt-btn-secondary-hover-border) !important;
                        }
                }
            }
        }
        /* Dark Background Section */
        &.bg-dk {
            color: var(--section-dk-text);
            background-color: var(--section-dk-bg);

            & ::selection {
                background-color: var(--section-dk-text);
                color: var(--section-dk-bg);
            }

            h1, h2, h3, h4, h5, h6 {
                color: var(--section-dk-heading);

                .muted {
                    color: var(--section-dk-heading-muted);
                }

                .accent {
                    color: var(--section-dk-heading-accent);
                }
            }

            hr {
                border-color: var(--section-dk-text);
            }

            a:not(.btn) {
                &, &:visited {
                    color: var(--section-dk-link);
                    text-decoration: none;
                }

                    &:hover {
                        color: var(--section-dk-link-hover);
                        text-decoration: none;

                        .card {
                            color: var(--section-dk-text);
                            background-color: rgba(255,255,255,0.25);
                            border: 1px solid #FFFFFF;
                            -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
                            box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
                        }
                    }
            }

            .muted {
                color: var(--section-dk-text-muted);
            }

            .accent {
                color: var(--section-dk-text-accent);
            }

            .row.fancy-border {
                overflow-x: clip;
                max-width: 100%;

                [class^="col-"]:not(:last-child) {
                    border-right: 2px solid #FFFFFF1A;
                }
            }

            .card {
                color: var(--section-dk-text);
                background-color: rgba(255,255,255,0.125);
                border: 1px solid #dfdfdf;
            }

            .fa-ul li i {
                color: #FFE385;
            }

            .fa-stack {

                .fa-stack-2x {
                    color: var(--section-dk-text);
                }

                .fa-inverse {
                    color: var(--section-dk-bg);
                }
            }

            .icon {
                color: var(--section-dk-text-accent);
            }

            a, input, button {
                &.btn.btn-primary {
                    &, &:visited {
                        color: var(--section-dk-btn-primary-text) !important;
                        background-color: var(--section-dk-btn-primary-bg) !important;
                        border-color: var(--section-dk-btn-primary-border) !important;
                    }

                        &:hover {
                            color: var(--section-dk-btn-primary-hover-text) !important;
                            background-color: var(--section-dk-btn-primary-hover-bg) !important;
                            border-color: var(--section-dk-btn-primary-hover-border) !important;
                        }
                }

                &.btn.btn-secondary {
                    &, &:visited {
                        color: var(--section-dk-btn-secondary-text) !important;
                        background-color: var(--section-dk-btn-secondary-bg) !important;
                        border-color: var(--section-dk-btn-secondary-border) !important;
                    }

                        &:hover {
                            color: var(--section-dk-btn-secondary-hover-text) !important;
                            background-color: var(--section-dk-btn-secondary-hover-bg) !important;
                            border-color: var(--section-dk-btn-secondary-hover-border) !important;
                        }
                }
            }
        }

        &.google-map {
            padding: 0;

            .container-fluid {
                padding: 0;
            }

            .ratio-google {
                padding-bottom: 25%;

                @media (max-width: 991px) {
                    padding-bottom: 42.3%;
                }

                @media (max-width: 767px) {
                    padding-bottom: 75.0%;
                }
            }
        }
    }
    /* Ultra-Dark Background Section */
    &.bg-udk {
        color: var(--section-udk-text);
        background-color: var(--section-udk-bg);

        h1, h2, h3, h4, h5, h6 {
            color: var(--section-udk-heading);

            .muted {
                color: var(--section-udk-heading-muted);
            }

            .accent {
                color: var(--section-udk-heading-accent);
            }
        }

        hr {
            border-color: var(--section-udk-text);
        }

        a:not(.btn) {
            &, &:visited {
                color: var(--section-udk-link);
                text-decoration: none;
            }

                &:hover {
                    color: var(--section-udk-link-hover);
                    text-decoration: none;
                }
        }

        .muted {
            color: var(--section-udk-text-muted);
        }

        .accent {
            color: var(--section-udk-text-accent);
        }

        .icon {
            color: var(--section-udk-text-accent);
        }
    }
}
    
/* Home Page */

section.hero.home-hero {
    background-color: #000000;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/home/home-hero.webp');
    background-position: right center;

    @media (max-width: 991px) {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/home/home-hero-mobile.webp');
    }
}

section.why-us {
    .container-xl > .row {

        .col-6:not(:last-child) {
            @media (min-width: 992px) {
                border-right: 2px solid rgba(255,255,255,0.25);
            }
        }

        p {
            font-size: calc(var(--fs-md) * 0.95);
            line-height: var(--lh-md);
        }

    }
}

.featured-site-image {
    padding: 1rem 1rem;
    background-color: #FFFFFF;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.125) 100%);
}

    /* About Us */

    section.hero.about-us-hero {
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/about-us/about-hero.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/about-us/about-hero-mobile.webp');
        }
    }

    section.hero.about-us-bottom {
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/about-us/about-bottom.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/about-us/about-bottom-mobile.webp');
        }
    }
    /* Contact Page */

    section.hero.contact-us-hero {
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/contact-us/contact-hero.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/contact-us/contact-hero-mobile.webp');
        }
    }

    section.hero.contact-us-bottom {
        background-position: center center;
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/contact-us/contact-bottom.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/contact-us/contact-bottom-mobile.webp');
        }
    }
    /* Website Design */

    section.hero.web-design-hero {
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/web-design/web-design-hero.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/web-design/web-design-hero-mobile.webp');
        }
    }

    section.hero.web-design-bottom {
        background-position: center center;
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/web-design/web-design-bottom.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/web-design/web-design-bottom-mobile.webp');
        }
    }

    /* SEO and AI Optimization */

    section.hero.seo-hero {
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/seo/seo-hero.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/seo/seo-hero-mobile.webp');
        }
    }

    section.hero.seo-bottom {
        background-position: right center;
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/seo/seo-bottom.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/seo/seo-bottom-mobile.webp');
        }
    }
    /* Hosting */

    section.hero.hosting-hero {
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/hosting/hosting-hero.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/hosting/hosting-hero-mobile.webp');
        }
    }

    section.hero.hosting-bottom {
        background-position: right center;
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/hosting/hosting-bottom.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/hosting/hosting-bottom-mobile.webp');
        }
    }
    /* Town Pages */

    span.phd-title {
        font-size: var(--fs-lg);
    }

    section.hero.towns-hero {
        background-color: #000000;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.50) 40%, rgba(0, 0, 0, 0.0) 60%), url('/assets/images/towns/towns-hero.webp');

        @media (max-width: 991px) {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.2)), url('/assets/images/towns/towns-hero-mobile.webp');
        }
    }

.town-bottom {
    color: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000000;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%), url('/assets/images/web-design/web-design-bottom.webp');

    h2 {
        color: #FFFFFF;
    }

    ul {
        a {
            &, &:visited {
                color: #FFFFFF;
                text-decoration: none;
            }

                &:hover {
                    color: #FFFFCC;
                    text-decoration: none;
                }
        }
    }

    .container-xl .card {
        color: #fff !important;
        background-color: rgba(0,0,0,0.60)
    }

        .container-xl .card .card-body h2 {
            color: #fff !important;
            text-transform: none !important;
        }

        .container-xl .card .card-body ul a {
            color: var(--footer-menu-icon);
        }

            .container-xl .card .card-body ul a:hover {
                color: #FFF1C2 !important;
            }
}