/* =========================================================
   NATURAL CAR SPA
   Dark Navy Bootstrap Theme
========================================================= */

:root {

    /* ================= BRAND COLORS ================= */

    --navy: #0a2352;
    --deep: #061631;
    --blue: #17428a;
    --mid: #1d4c9c;
    --lt: #9cc0f2;
    --sky: #e9eff9;
    --ink: #1a2540;
    --line: #d6dfef;
    --muted: #5b6b88;


    /* ================= BOOTSTRAP PRIMARY ================= */

    --bs-primary: #0a2352;
    --bs-primary-rgb: 10, 35, 82;


    /* ================= BOOTSTRAP LINKS ================= */

    --bs-link-color: #0a2352;
    --bs-link-hover-color: #17428a;

    --bs-link-color-rgb: 10, 35, 82;
    --bs-link-hover-color-rgb: 23, 66, 138;


    /* ================= BODY ================= */

    --bs-body-color: #1a2540;
    --bs-body-bg: #ffffff;


    /* ================= BORDER ================= */

    --bs-border-color: #d6dfef;
}


/* =========================================================
   BACKGROUND COLORS
========================================================= */

.bg-primary,
.bg-navy {
    background-color: #0a2352 !important;
}

.bg-deep {
    background-color: #061631 !important;
}

.bg-sky {
    background-color: #e9eff9 !important;
}


/* =========================================================
   TEXT COLORS
========================================================= */

.text-primary {
    color: #0a2352 !important;
}

.text-navy {
    color: #0a2352 !important;
}

.text-blue {
    color: #17428a !important;
}

.text-muted-custom {
    color: #5b6b88 !important;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary {
    --bs-btn-color: #ffffff;

    --bs-btn-bg: #0a2352;
    --bs-btn-border-color: #0a2352;

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #061631;
    --bs-btn-hover-border-color: #061631;

    --bs-btn-focus-shadow-rgb: 10, 35, 82;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #061631;
    --bs-btn-active-border-color: #061631;

    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #0a2352;
    --bs-btn-disabled-border-color: #0a2352;
}


/* =========================================================
   OUTLINE PRIMARY BUTTON
========================================================= */

.btn-outline-primary {
    --bs-btn-color: #0a2352;

    --bs-btn-border-color: #0a2352;

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0a2352;
    --bs-btn-hover-border-color: #0a2352;

    --bs-btn-focus-shadow-rgb: 10, 35, 82;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #061631;
    --bs-btn-active-border-color: #061631;

    --bs-btn-disabled-color: #0a2352;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0a2352;
}


/* =========================================================
   BORDER COLORS
========================================================= */

.border-primary {
    border-color: #0a2352 !important;
}

.border-navy {
    border-color: #0a2352 !important;
}


/* =========================================================
   LINKS
========================================================= */

a {
    color: #17428a;
}

a:hover {
    color: #0a2352;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar .navbar-brand {
    color: #0a2352;
}

.navbar .navbar-brand:hover {
    color: #061631;
}

.navbar .nav-link {
    color: #1a2540;
}

.navbar .nav-link:hover {
    color: #0a2352;
}

.navbar .nav-link.active {
    color: #0a2352;
    font-weight: 600;
}


/* =========================================================
   NAV PILLS
========================================================= */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #ffffff;
    background-color: #0a2352;
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination {

    --bs-pagination-color: #0a2352;

    --bs-pagination-hover-color: #061631;

    --bs-pagination-focus-color: #061631;

    --bs-pagination-active-color: #ffffff;

    --bs-pagination-active-bg: #0a2352;

    --bs-pagination-active-border-color: #0a2352;
}


/* =========================================================
   FORM CONTROLS
========================================================= */

.form-control:focus,
.form-select:focus {

    border-color: #17428a;

    box-shadow: 0 0 0 0.25rem rgba(10, 35, 82, 0.15);
}


/* =========================================================
   FORM CHECKBOX / RADIO
========================================================= */

.form-check-input:checked {

    background-color: #0a2352;

    border-color: #0a2352;
}

.form-check-input:focus {

    border-color: #17428a;

    box-shadow: 0 0 0 0.25rem rgba(10, 35, 82, 0.15);
}


/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-item.active,
.dropdown-item:active {

    color: #ffffff;

    background-color: #0a2352;
}


/* =========================================================
   LIST GROUP
========================================================= */

.list-group-item.active {

    color: #ffffff;

    background-color: #0a2352;

    border-color: #0a2352;
}


/* =========================================================
   BADGES
========================================================= */

.badge.bg-primary {

    background-color: #0a2352 !important;
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.progress-bar {

    background-color: #0a2352;
}


/* =========================================================
   TABLE
========================================================= */

.table-primary {

    --bs-table-bg: #e9eff9;

    --bs-table-color: #1a2540;

    --bs-table-border-color: #d6dfef;
}


/* =========================================================
   ACCORDION
========================================================= */

.accordion {

    --bs-accordion-active-color: #0a2352;

    --bs-accordion-active-bg: #e9eff9;

    --bs-accordion-btn-focus-border-color: #17428a;

    --bs-accordion-btn-focus-box-shadow:
        0 0 0 0.25rem rgba(10, 35, 82, 0.15);
}


/* =========================================================
   HERO / DARK NAVY SECTION
========================================================= */

.bg-navy {

    background-color: #0a2352 !important;

    color: #ffffff;
}


/* =========================================================
   DARK NAVY CARD / SECTION
========================================================= */

.bg-deep {

    background-color: #061631 !important;

    color: #ffffff;
}


/* =========================================================
   SOFT BRAND BACKGROUND
========================================================= */

.bg-soft-primary {

    background-color: #e9eff9 !important;

    color: #0a2352 !important;
}


/* =========================================================
   ICON BACKGROUND
========================================================= */

.icon-primary {

    background-color: #0a2352;

    color: #ffffff;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {

    background-color: #0a2352;

    color: #ffffff;
}


/* ================= NAVBAR ================= */

.navbar .nav-link {
    font-size: 13px;
    color: var(--ink);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--navy);
}

/* Appointment button */
.navbar .btn {
    font-size: 13px;
}

/* Top information bar */
.bg-primary .small {
    font-size: 13px;
}

/* Marquee */
marquee {
    font-size: 13px;
}