:root {
    --mantis-blue: #4C648F;
    --mantis-blue-hover: #3D5279;
    --mantis-blue-active: #304365;
    --mantis-gold: #CCAD31;
    --mantis-gold-hover: #B39729;
    --mantis-gold-active: #998022;
    --mantis-navy: #0B1B36;
    --mantis-navy-hover: #14294A;
    --mantis-navy-active: #1C365D;
    --mantis-gray: #7B7D7F;
    --bs-primary: var(--mantis-blue);
    --bs-primary-rgb: 76, 100, 143;
    --bs-secondary: var(--mantis-gold);
    --bs-secondary-rgb: 204, 173, 49;
    --hero-cream: #fcf9f4;
    --hero-text: #1f2d4d;
    font-family: 'Inter', sans-serif;
}

body,
button,
input,
select,
textarea {
    font-family: 'Inter', sans-serif;
}
p {
    font-size: large;
}


h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--mantis-navy);
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mantis-blue);
}

h3, h4, h5, h6 {
    font-weight: 600;
}

.btn {
    font-weight: 600;
}

a {
    color: var(--mantis-blue);
}

    a:hover {
        color: var(--mantis-blue-hover);
    }


.text-mantis-navy {
    color: var(--mantis-navy) !important;
}

.text-mantis-blue {
    color: var(--mantis-blue) !important;
}

.text-mantis-gold {
    color: var(--mantis-gold) !important;
}

.text-mantis-gray {
    color: var(--mantis-gray) !important;
}


.hero-container {
    max-width: 1400px;
    margin-inline: auto;
}

@media (min-width: 1400px) {
    .hero-container {
        max-width: 1600px;
    }
}

.hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 1rem;
    overflow: hidden;
}

    .hero-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, var(--hero-fade-color, #fff) 0%, transparent 40% );
        pointer-events: none;
    }

@media (min-width: 992px) {
    .hero-container {
        padding-block: 1.5rem;
    }

    .hero-image {
        aspect-ratio: auto;
        min-height: 360px;
        height: 100%;
        background-position: right center;
        border-radius: 0 24px 24px 0;
    }

        .hero-image::before {
            background: linear-gradient( to right, var(--hero-fade-color, #fff) 0%, transparent 80% );
        }
}


.mantis-intro-logo {
    width: 100%;
    max-width: 320px;
}

.mantis-intro-divider img {
    display: block;
    width: 100%;
    height: auto;
}

.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.75rem 1.5rem rgba(11, 27, 54, 0.12) !important;
    }

    .card a:hover {
        color: var(--mantis-gold) !important;
    }

.form-control:focus,
.form-select:focus {
    border-color: var(--mantis-blue);
    box-shadow: 0 0 0 0.25rem rgba(76, 100, 143, 0.25);
}

header .navbar {
    background-color: var(--mantis-navy);
}

.navbar .navbar-toggler {
    background-color: var(--mantis-gold);
    border-color: var(--mantis-gold);
}

    .navbar .navbar-toggler:hover {
        background-color: var(--mantis-gold-hover);
        border-color: var(--mantis-gold-hover);
    }

    .navbar .navbar-toggler:active,
    .navbar .navbar-toggler[aria-expanded="true"] {
        background-color: var(--mantis-gold-active);
        border-color: var(--mantis-gold-active);
    }

    .navbar .navbar-toggler:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(204, 173, 49, 0.5);
    }

.navbar .navbar-toggler-icon {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%230B1B36' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

header .nav-link {
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
}

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

    header .nav-link.active {
        color: var(--mantis-gold) !important;
        font-weight: 600;
        text-decoration: underline solid var(--mantis-gold) 4px;
        text-underline-offset: 5px;
    }


footer .nav-link.active {
    color: var(--mantis-gold) !important;
    font-weight: 600;
    text-decoration: underline solid var(--mantis-gold) 4px;
    text-underline-offset: 5px;
}

footer .nav-link {
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
}

    footer .nav-link:hover {
        color: var(--mantis-gold-hover) !important;
    }

footer .text-body-secondary {
    text-decoration: none;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--mantis-gold);
    --bs-btn-border-color: var(--mantis-gold);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mantis-gold-hover);
    --bs-btn-hover-border-color: var(--mantis-gold-hover);
    --bs-btn-focus-shadow-rgb: 204, 173, 49;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--mantis-gold-active);
    --bs-btn-active-border-color: var(--mantis-gold-active);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--mantis-gold);
    --bs-btn-disabled-border-color: var(--mantis-gold);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mantis-blue);
    --bs-btn-border-color: var(--mantis-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mantis-blue-hover);
    --bs-btn-hover-border-color: var(--mantis-blue-hover);
    --bs-btn-focus-shadow-rgb: 76, 100, 143;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mantis-blue-active);
    --bs-btn-active-border-color: var(--mantis-blue-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--mantis-blue);
    --bs-btn-disabled-border-color: var(--mantis-blue);
}

.btn-mantis-gray {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mantis-gray-hover);
    --bs-btn-border-color: var(--mantis-gray-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mantis-gray-active);
    --bs-btn-hover-border-color: var(--mantis-gray-active);
    --bs-btn-focus-shadow-rgb: 123, 125, 127;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mantis-gray-active);
    --bs-btn-active-border-color: var(--mantis-gray-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--mantis-gray-hover);
    --bs-btn-disabled-border-color: var(--mantis-gray-hover);
}

.bg-mantis-navy {
    background-color: var(--mantis-navy) !important;
}

.mantis-footer {
    border-top: none !important;
}

.mantis-footer-border {
    display: block;
    width: 100%;
    height: 32px;
    margin-bottom: 1rem;
    overflow: visible;
}

    .mantis-footer-border path {
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
    }

.mantis-divider-image {
    display: block;
    width: 100%;
    height: 32px;
    object-fit: fill;
}

@media (max-width: 768px) {
    .mantis-divider-image {
        height: 24px;
    }
}

@media (max-width: 576px) {
    .mantis-divider-image {
        height: 20px;
    }
}


.service-card {
    position: relative;
    overflow: hidden;
    padding-bottom: 12px;
}

    .service-card .mantis-divider-image {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 12px;
        object-fit: fill;
        object-position: left center;
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 0.5s ease, opacity 0.2s ease;
    }

    .service-card:hover .mantis-divider-image {
        transform: translateX(0);
        opacity: 1;
    }


.stage-icon {
    width: 64px;
    height: 64px;
    background-color: #F0F1F2;
    color: var(--mantis-navy);
}

.stage-link {
    display: inline-block;
    color: var(--mantis-blue);
    transition: color 0.2s ease;
}

    .stage-link:hover,
    .stage-link:focus-visible {
        color: var(--mantis-gold);
    }

@media (prefers-reduced-motion: reduce) {
    .stage-link {
        transition: none;
    }
}