﻿
/* Fraunces (Google Fonts option) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&display=swap');

/* DM Sans (Google Fonts option) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* JetBrains Mono (Google Fonts option) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --c-navy: #001961 !important;
    --c-navy-80: #334b7f;
    --c-navy-60: #667d9d;
    --c-navy-40: #99afbb;
    --c-navy-20: #cce1d9;
    --c-navy-10: #e6f0ec;
    --c-coquelicot: #FF4000 !important;
    --c-bone: #F4F2EC !important;
    --c-slate: #565A6E !important;
    --c-mist: #E3E4EA !important;
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "DM Sans", Arial, Helvetica, sans-serif;
    --font-label: "JetBrains Mono", Consolas, monospace;
    --letter-spacing-label: 0.08em;
}

.c-navy {
    color: var(--c-navy) !important;
}

.c-coquelicot {
    color: var(--c-coquelicot) !important;
}

.c-bone {
    color: var(--c-bone) !important;
}

.c-slate {
    color: var(--c-slate) !important;
}

.c-mist {
    color: var(--c-mist) !important;
}


body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.62;
    background: var(--c-bone);
    color: var(--c-slate);
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

p {
    margin-bottom: 1.2em;
}

strong {
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-navy);
    margin-bottom: 0.5em;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: 30px; /* ✅ updated */
    line-height: 1.05; /* ✅ updated */
}

h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
}

h3 {
    font-size: 1.5rem;
}

a {
    color: var(--c-navy);
}

.label,
.eyebrow,
.tag,
.meta {
    font-family: var(--font-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--c-slate);
}


.caption {
    font-family: var(--font-body);
    font-weight: 500; /* ✅ medium */
    font-size: 12px; /* ✅ updated */
    line-height: 1.4; /* ✅ updated */
    color: var(--c-slate);
}


button,
.btn {
    font-family: var(--font-body);
    font-weight: 600;
}

.btn-primary, .btn-yellow, .btn-primary.dropdown-toggle {
    background: var(--c-coquelicot) !important;
    background-color: var(--c-coquelicot) !important;
    color: var(--white);
}

    .btn-primary:not([disabled]):not(.disabled):active,
    .btn-primary:not([disabled]):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background: var(--c-mist) !important;
        color: var(--c-slate) !important;
    }

    .btn-outline-primary {
        color: var(--c-coquelicot) !important;
        background-color: transparent !important;
        border: 2px solid var(--c-coquelicot) !important;
    }

.btn-outline-primary:not(:disabled):not(.disabled).active {
    background: var(--c-coquelicot) !important;
    background-color: var(--c-coquelicot) !important;
    border-color: var(--c-navy) !important;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary:active:focus,
    .btn-outline-primary.active {
        color: var(--c-navy) !important;
        border-color: var(--c-navy) !important;
    }

.btn-secondary {
    border: 1px solid var(--c-mist);
    color: var(--c-mist);
    background: var(--c-navy) !important;
}

    .btn-secondary:hover {
        color: var(--c-navy);
        background: var(--c-slate) !important;
    }

    .btn-secondary:not([disabled]):not(.disabled):active,
    .btn-secondary:not([disabled]):not(.disabled).active,
    .show > .btn-secondary.dropdown-toggle {
        color: var(--c-navy);
        background: var(--c-mist) !important;
    }

.btn-primary.dropdown-toggle:hover, .btn-primary.dropdown-toggle:focus {
    background-color: var(--c-coquelicot) !important;
    color: var(--c-mist) !important;
    border-color: var(--c-navy) !important;
}

.dropdown .dropdown-menu .dropdown-item:hover, .dropdown .dropdown-menu .dropdown-item:active {
    background-color: var(--c-navy-60) !important;
}

.btn-secondary.dropdown-toggle {
    background-color: var(--c-navy) !important;
}

    .btn-secondary.dropdown-toggle:hover, .btn-secondary.dropdown-toggle:focus {
        background-color: var(--c-navy-80) !important;
        color: var(--c-mist) !important;
    }

    .main-menu-list ul li a {
        background-color: var(--c-coquelicot) !important;
    }

.main-menu-list ul li ul li a {
    background-color: var(--c-navy-80) !important;
}

.main-menu-list a {
    background-color: var(--c-mist) !important;
    background-color: var(--c-coquelicot) !important;
}

.lead {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
}


.display {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 46px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--c-navy);
}

.alert-primary {
    color: var(--white) !important;
    background-color: var(--c-coquelicot) !important;
    border-color: var(--c-navy-40);
}

    .alert-primary a {
        color: var(--c-navy-80)!important;
    }

/* Page elements */
.jumbo-screen {
    background-image: linear-gradient( 135deg, var(--c-navy) 100% ) !important;
}

.creative-lp {
    font-family: var(--font-body);
    color: var(--c-slate) !important;
}

#homeCTAs div {
    background: var(--c-coquelicot) !important;
    color: var(--c-mist) !important;
}

#reviewSlider {
    background: var(--white) !important;
}

.navbar {
    background: var(--c-navy) !important;
}

.page-footer {
    background: var(--c-navy-80) !important;
    color: var(--c-mist) !important;
}

    .page-footer h4, .page-footer h5, .page-footer h6 {
        color: var(--bone) !important;
    }

    .page-footer a, .page-footer p {
        color: var(--c-mist) !important;
    }

.text-primary {
    color: var(--c-navy) !important;
}

.text-secondary {
    color: var(--c-coquelicot) !important;
}

.equicantis-gold-bright {
    background: var(--c-coquelicot) !important;
    color: var(--c-mist) !important;
}

    .equicantis-gold-bright h2, .equicantis-gold-bright h5 {
        color: var(--c-mist) !important;
    }

.sidebar-fixed {
    background: var(--c-navy) !important;
}

    .sidebar-fixed .list-group .active {
        background: var(--c-coquelicot) !important;
    }

    .sidebar-fixed .list-group-item-action:hover {
        background: var(--c-mist) !important;
        color: var(--c-slate) !important;
    }

    .card .card-body h1, .card .card-body h2, .card .card-body h3, .card .card-body h4, .card .card-body h5, .card .card-body h6 {
        font-weight: 600;
    }

.pagination .page-item.active .page-link {
    background: var(--c-coquelicot) !important;
}

.md-tabs {
    background: var(--c-navy) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--c-mist) !important;
    background-color: var(--c-navy) !important;
}

.fc .fc-button-primary {
    background: var(--c-mist) !important;
    color: var(--c-slate) !important;
}

    .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
        color: var(--c-bone) !important;
        border-color: var(--c-slate) !important;
        background-color: var(--c-navy) !important;
    }

.fc .fc-button-primary:hover {
    background: var(--c-mist) !important;
    color: var(--c-slate) !important;
}

/* FORMS */

.form-heading {
    padding: 15px 0px;
    background: var(--c-coquelicot) !important;
    color: var(--white) !important;
}

    .form-heading h2 {
        margin: 0px;
        color: var(--white) !important;
    }


    /*AURON UNCOMMENT THIS IF SAFE TO USE AS PER TASK*/
mdb-card {
    background-color: var(--c-slate);
    color: var(--c-bone);
}

mdb-card header {
    color: inherit;
}

mdb-card h3{
    color:white;
}