:root {
    --tt-navy: #1B365D;
    --tt-green: #78BE20;
    --tt-green-dark: #659f1b;
}


/* ========================================
   Global
   ======================================== */

html,
body {
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* ========================================
   12th Tech Header
   Bootstrap handles fixed positioning
   through the fixed-top class
   ======================================== */

.tt-site-header {
    height: 72px;
    display: flex;
    align-items: center;
    background-color: var(--tt-navy) !important;
    transition: background-color .3s ease, box-shadow .3s ease;
}

    .tt-site-header > .container-fluid {
        width: 100%;
    }


    /* ========================================
   Header Brand
   ======================================== */

    .tt-site-header .tt-site-brand {
        color: #fff !important;
        text-decoration: none;
        font-size: 1.55rem;
        font-weight: 800;
        letter-spacing: -0.045em;
        line-height: 1;
        white-space: nowrap;
        transition: color .3s ease;
    }


    /* ========================================
   Header Navigation
   ======================================== */

    .tt-site-header #mainNav {
        margin-left: auto !important;
    }

    .tt-site-header .navbar-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
        display: flex;
        align-items: center;
        justify-content: flex-end !important;
    }

    .tt-site-header .nav-link {
        color: rgba(255, 255, 255, .92) !important;
        font-weight: 500;
        white-space: nowrap;
        transition: color .2s ease;
    }

        .tt-site-header .nav-link:hover,
        .tt-site-header .nav-link:focus {
            color: var(--tt-green) !important;
        }


    /* ========================================
   Login Button
   ======================================== */

    .tt-site-header .btn-success {
        color: #fff !important;
        white-space: nowrap;
    }


    /* ========================================
   Scrolled Header
   Header changes from navy to white
   Bootstrap JS class switching handles
   navbar-dark / navbar-light
   ======================================== */

    .tt-site-header.tt-scrolled {
        background-color: #fff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
    }

        .tt-site-header.tt-scrolled .tt-site-brand {
            color: var(--tt-navy) !important;
        }

        .tt-site-header.tt-scrolled .nav-link {
            color: var(--tt-navy) !important;
        }

            .tt-site-header.tt-scrolled .nav-link:hover,
            .tt-site-header.tt-scrolled .nav-link:focus {
                color: var(--tt-green) !important;
            }


/* ========================================
   Desktop Header
   Applies at Bootstrap lg breakpoint
   and larger
   ======================================== */

@media (min-width: 992px) {

    .tt-site-header #mainNav {
        display: flex !important;
        flex-basis: auto;
        margin-left: auto !important;
    }

        .tt-site-header #mainNav .navbar-nav {
            display: flex !important;
            flex-direction: row;
            align-items: center;
            margin-left: auto !important;
            gap: 1.25rem;
        }

        .tt-site-header #mainNav .nav-item {
            margin: 0 !important;
        }

        .tt-site-header #mainNav .nav-link {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
}


/* ========================================
   Desktop Dropdowns
   Open dropdown menus on hover
   ======================================== */

@media (min-width: 992px) {

    .tt-site-header .navbar-nav .dropdown {
        position: relative;
    }

        .tt-site-header .navbar-nav .dropdown:hover > .dropdown-menu {
            display: block;
        }

    .tt-site-header .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0;
    }
}


/* ========================================
   Mobile Header
   Bootstrap controls hamburger icon color
   through navbar-dark / navbar-light

   Expanded navigation stays white
   with navy text
   ======================================== */

@media (max-width: 991.98px) {

    /* Expanded mobile navigation panel */
    .tt-site-header #mainNav {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        width: 100%;
        margin-left: 0 !important;
        background-color: #fff;
        padding: 1rem 1.5rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .10);
    }

        /* Stack mobile navigation vertically */
        .tt-site-header #mainNav .navbar-nav {
            width: 100%;
            margin: 0 !important;
            align-items: stretch;
            justify-content: flex-start !important;
        }

        /* Main mobile navigation links */
        .tt-site-header #mainNav .nav-link {
            color: var(--tt-navy) !important;
            padding: .65rem 0;
        }

            .tt-site-header #mainNav .nav-link:hover,
            .tt-site-header #mainNav .nav-link:focus {
                color: var(--tt-green) !important;
            }

        /* Dropdowns inside mobile menu */
        .tt-site-header #mainNav .dropdown-menu {
            position: static !important;
            width: 100%;
            border: 0;
            box-shadow: none;
            background-color: #f8f9fa;
            margin: .25rem 0 .5rem;
            padding: .35rem 0;
        }

        /* Mobile dropdown links */
        .tt-site-header #mainNav .dropdown-item {
            color: var(--tt-navy);
            padding: .6rem 1rem;
        }

            .tt-site-header #mainNav .dropdown-item:hover,
            .tt-site-header #mainNav .dropdown-item:focus {
                color: var(--tt-green);
                background-color: rgba(120, 190, 32, .08);
            }
}


/* ========================================
   Primary Buttons
   ======================================== */

.btn-primary {
    --si-btn-bg: var(--tt-green);
    --si-btn-border-color: var(--tt-green);
    --si-btn-hover-bg: var(--tt-green-dark);
    --si-btn-hover-border-color: var(--tt-green-dark);
}


/* ========================================
   Scroll Animations
   ======================================== */

.tt-animate {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
}


/* Start slightly to the right */
.tt-fade-right {
    transform: translateX(70px);
}


/* Start slightly to the left */
.tt-fade-left {
    transform: translateX(-70px);
}


/* Start slightly below */
.tt-fade-up {
    transform: translateY(50px);
}


/* Activated when visible */
.tt-animate.tt-visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* ========================================
   Accessibility
   Disable animations when the visitor
   prefers reduced motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    .tt-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ========================================
   Menu for Large Dropdowns
   Used for temporary Pages menu
   ======================================== */

.tt-site-header .tt-pages-menu {
    max-height: 70vh;
    overflow-y: auto;
}