:root {
    --app-blue-bg: #3d4d6a;
    --app-blue-bg-color: #ced4da;
    --app-blue-bg-active-color: var(--accent-color);
    --app-blue-bg-hover-color: #ffffff;
    --app-navbar-hover-color: #ffffff;
    --bs-primary-bg: #283a5a;
    /*--bs-body-bg: var(--bs-secondary-bg);*/
}

/*  GENERAL ---------------------------------------------------*/

body {
    background-color: var(--bs-secondary-bg);
}

header {
}

main {
    flex: 1 0 auto;
}

footer {
    width: 100%;
    flex-shrink: 0;
    font-size: 14px;
    position: relative;
}

.layout-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* Add margin to main when a fixed header is present (for hybrid Blazor/Razor layouts) */
    .layout-root > header.header.fixed-top + main.main {
        margin-top: 68px;
    }

/* Remove the top margin in Index*/
.index-page .layout-root > header.header.fixed-top + main.main {
    margin-top: 0;
}

/*  SECTIONS --------------------------------------------------*/
/* .btn-get-started matches .hero .btn-get-started so we can use it anywhere */
.btn-get-started {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 12px 28px;
    border-radius: 50px;
    transition: 0.5s;
}

    .btn-get-started:hover {
        color: var(--contrast-color);
        background: color-mix(in srgb, var(--accent-color), transparent 15%);
    }

.page {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

/*  HEADER ----------------------------------------------------*/
.header {
    padding: 0;
}

    .header .logo {
        color: var(--nav-color);
        order: 0;
    }

    .header .navbar-brand {
        font-size: 1rem;
    }

    .header .nav-link {
        color: var(--nav-color);
    }

    .header .navbar-nav .nav-link.active, .header .navbar-nav .nav-link.show {
        color: var(--bs-yellow);
    }

    .header.nav-link:focus, .header .nav-link:hover {
        color: var(--accent-color);
    }

/*  FOOTER ----------------------------------------------------*/
.footer {
    padding-bottom: 0;
}

    .footer .footer-links ul a {
        color: var(--app-blue-bg-color);
    }

    .footer .social-links a {
        background: #f8f9fa;
        color: var(--accent-color);
        border-color: #f8f9fa;
    }

        .footer .social-links a:hover {
            background: var(--bs-primary);
        }

    .footer h4 {
        color: var(--app-blue-bg-color);
        text-transform: uppercase;
    }

        .footer h4::before,
        .footer h4::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
        }

        .footer h4::before {
            right: 0;
            background: var(--bs-border-color);
        }

        .footer h4::after {
            background: var(--bs-primary);
            width: 60px;
        }

    .footer .footer-links ul li {
        border-bottom: 1px solid var(--bs-border-color);
    }

/*  ABOUT SECTION ---------------------------------------------*/
.about ul li {
    align-items: start;
}

/*  CALL TO ACTION SECTION ------------------------------------*/
.call-to-action {
}

/*  CONTACT SECTION -------------------------------------------*/
.contact.section .form-label {
    margin-bottom: 0.1rem;
}

/*  HERO SECTION ----------------------------------------------*/
.hero {
    --heading-color: #dee2e6;
    background: url("/_content/qa.common.ui/img/hero-bg.jpg") center center;
    background-size: cover;
    position: relative;
    height: 80vh;
}

    .hero p, .hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
        /*color: var(--bs-yellow);*/
        color: var(--heading-color);
        text-align: center;
    }

    .hero .btn-watch-video {
        color: var(--heading-color);
    }


/*  TESTIMONIALS SECTION (mods based on LOGIS template) -------*/
.testimonials {
    --heading-color: #dee2e6;
    color: var(--heading-color);
    background: url("/_content/qa.common.ui/img/misc/slide-3.jpg") no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

    .testimonials::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(14, 29, 52, 0.7);
    }