/*
 * SALIT brand layer.
 * Loaded after the base theme to keep vendor CSS untouched.
 */
:root {
    --salit-navy: #182860;
    --salit-navy-rgb: 24, 40, 96;
    --salit-navy-deep: #102058;
    --salit-blue: #203870;
    --salit-cyan: #00c0b0;
    --salit-cyan-rgb: 0, 192, 176;
    --salit-cyan-ui: #008f87;
    --salit-cyan-ui-rgb: 0, 143, 135;
    --salit-cyan-soft: #e4fbf9;
    --salit-surface: #f6f9fb;
    --salit-border: #d9e5ec;
    --salit-text: #1b2438;
    --salit-muted: #607086;

    --primary-clr: var(--salit-navy);
    --primary-clr-rgb: var(--salit-navy-rgb);
    --primary: var(--salit-navy);
    --primary-dark: var(--salit-navy-deep);
    --primary-rgb: var(--salit-navy-rgb);
    --secondary: var(--salit-cyan-ui);
    --secondary-rgb: var(--salit-cyan-ui-rgb);
    --green: var(--salit-cyan-ui);
    --green-soft: rgba(var(--salit-cyan-rgb), 0.14);
    --title: var(--salit-text);
    --text: var(--salit-muted);
    --bg-light: var(--salit-surface);
    --border: var(--salit-border);
    --secondary-clr: #607086;
    --dark-clr: var(--salit-navy-deep);
    --base-clr: var(--salit-cyan-ui);
    --base-clr-2: var(--salit-cyan);
    --border-clr: rgba(var(--salit-navy-rgb), 0.14);
    --success-clr: var(--salit-cyan-ui);
    --info-clr: #20a8c8;
    --theameColor: var(--salit-navy);
    --theameColor-rgba: var(--salit-navy-rgb);
    --text-title: var(--salit-text);

    --bs-primary: var(--salit-navy);
    --bs-primary-rgb: var(--salit-navy-rgb);
    --bs-success: var(--salit-cyan-ui);
    --bs-success-rgb: var(--salit-cyan-ui-rgb);
    --bs-info: #20a8c8;
    --bs-info-rgb: 32, 168, 200;
    --info-dark: #167a95;
    --bs-body-bg: var(--salit-surface);
    --bs-body-bg-rgb: 246, 249, 251;
    --bs-body-color: var(--salit-muted);
    --bs-heading-color: var(--salit-text);
    --bs-border-color: var(--salit-border);
    --panel-sidebar-primary: var(--salit-navy);

    --base-1: var(--salit-cyan-ui);
    --base-rgb: var(--salit-cyan-ui-rgb);
    --base-2: var(--salit-cyan);
    --base-rgb-2: var(--salit-cyan-rgb);
    --primary-clr: var(--salit-navy);
    --header-bg: #f1f7f8;
    --body-clr: var(--salit-muted);
    --title-clr: var(--salit-text);
    --title-rgb: 27, 36, 56;
    --section-bg: var(--salit-surface);
}

body {
    background-color: var(--salit-surface);
}

a,
.text--primary,
.theme-clr,
.theme-clr:hover {
    color: var(--salit-navy) !important;
}

.bg--primary,
.btn--primary,
.btn-primary,
.page-item.active .page-link {
    background-color: var(--salit-navy) !important;
    border-color: var(--salit-navy) !important;
    color: #fff !important;
}

.btn--primary:hover,
.btn-primary:hover,
.btn--primary:focus,
.btn-primary:focus {
    background-color: var(--salit-navy-deep) !important;
    border-color: var(--salit-navy-deep) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--salit-cyan-rgb), 0.18) !important;
}

.btn-outline-primary {
    color: var(--salit-navy) !important;
    border-color: var(--salit-navy) !important;
}

.btn-outline-primary:hover {
    background-color: var(--salit-navy) !important;
    color: #fff !important;
}

.btn--secondary,
.theme-style .btn--secondary {
    background-color: var(--salit-muted) !important;
    border-color: var(--salit-muted) !important;
}

.btn--primary-light,
.bg-primary.bg-opacity-10,
.bg--primary.bg-opacity-10 {
    background-color: rgba(var(--salit-cyan-rgb), 0.12) !important;
    color: var(--salit-navy) !important;
    border-color: transparent !important;
}

.form-control:focus,
.form--control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--salit-cyan-ui) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--salit-cyan-rgb), 0.18) !important;
}

.badge-soft-primary,
.badge-primary-soft,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.nav--tabs.nav--pills .nav-item .nav-link.active {
    background-color: var(--salit-cyan-soft) !important;
    color: var(--salit-navy) !important;
}

.nav--tabs,
.nav-tabs {
    background: transparent;
}

.nav--tabs.nav--pills,
.tabs-inner.nav--tabs.nav--pills,
.page-header-tabs,
.card-header .nav-tabs,
.hs-nav-scroller-horizontal .nav-tabs {
    background: linear-gradient(180deg, #f7fbfc 0%, #eef6f8 100%) !important;
    border: 1px solid rgba(var(--salit-navy-rgb), 0.08) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

.nav--tabs.nav--pills .nav-item .nav-link,
.tabs-inner.nav--tabs.nav--pills .nav-item .nav-link {
    color: var(--salit-navy) !important;
    border-radius: 999px !important;
}

.nav--tabs.nav--pills .nav-item .nav-link:hover,
.tabs-inner.nav--tabs.nav--pills .nav-item .nav-link:hover {
    background: rgba(var(--salit-cyan-rgb), 0.12) !important;
    color: var(--salit-navy) !important;
}

.nav--tabs.nav--pills .nav-item .nav-link.active,
.tabs-inner.nav--tabs.nav--pills .nav-item .nav-link.active {
    background: var(--salit-navy) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(var(--salit-navy-rgb), 0.16) !important;
}

.nav--tabs .nav-link.active {
    border-color: var(--salit-navy) !important;
}

.card,
.card-body,
.tab-content,
.content.container-fluid,
.main .content,
.bg--secondary {
    border-color: rgba(var(--salit-navy-rgb), 0.08);
}

body.v2-chrome {
    --v2-bg: var(--salit-surface);
    --v2-panel: #ffffff;
    --v2-border: var(--salit-border);
    --v2-border-strong: #bfd0dc;
    --v2-text: var(--salit-text);
    --v2-text-soft: #455775;
    --v2-text-muted: var(--salit-muted);
    --v2-hover: #edf5f7;
    --v2-primary: var(--salit-navy);
    --v2-primary-deep: var(--salit-navy-deep);
    --v2-primary-tint: var(--salit-cyan-soft);
    --v2-primary-tint-strong: #a9e8e2;
    --v2-module: var(--salit-cyan-ui);
    --v2-module-deep: var(--salit-navy);
    --v2-module-tint: var(--salit-cyan-soft);
    --v2-module-tint-strong: #a9e8e2;
    --v2-accent: var(--salit-cyan);
}

.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link:hover,
.navbar-vertical .show > .nav-link {
    color: #fff !important;
}

.navbar-vertical .nav-link.active {
    background: rgba(var(--salit-cyan-rgb), 0.18) !important;
}

.cmn--btn,
.header--btn,
.mobile-menu .mob-browse-web {
    background: var(--salit-navy) !important;
    border-color: var(--salit-navy) !important;
    color: #fff !important;
}

.cmn--btn:hover,
.header--btn:hover,
.mobile-menu .mob-browse-web:hover {
    background: var(--salit-navy-deep) !important;
    border-color: var(--salit-navy-deep) !important;
    color: #fff !important;
}

.hero {
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--salit-cyan-rgb), 0.14), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, var(--salit-surface) 100%) !important;
}

.hero h1 .hl,
.sec-header h2 .hl,
.earn-top h2 .hl,
.hl {
    color: var(--salit-cyan-ui) !important;
}

.hero-btn--vendor,
.svc-arrow,
.slider-arrow,
.newsletter-btn {
    background: var(--salit-navy) !important;
    border-color: var(--salit-navy) !important;
    color: #fff !important;
}

.hero-btn--vendor:hover,
.svc-arrow:hover,
.slider-arrow:hover,
.newsletter-btn:hover {
    background: var(--salit-navy-deep) !important;
    border-color: var(--salit-navy-deep) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(var(--salit-navy-rgb), 0.18) !important;
}

.hero-btn--delivery {
    border-color: var(--salit-border) !important;
    color: var(--salit-navy) !important;
}

.hero-btn--delivery:hover {
    border-color: var(--salit-cyan-ui) !important;
    color: var(--salit-cyan-ui) !important;
    box-shadow: 0 8px 24px rgba(var(--salit-cyan-rgb), 0.14) !important;
}

.hero-illustration,
.svc-icon-btn.active .lbl,
.stat-num .plus,
.cta-user-btn {
    color: var(--salit-cyan-ui) !important;
}

.services-section {
    background: linear-gradient(184deg, rgba(var(--salit-cyan-rgb), 0.08) 0%, #fff 30%, #fff 75%, rgba(var(--salit-navy-rgb), 0.05) 100%) !important;
}

.svc-icon-btn:hover,
.svc-icon-btn.active,
.zone-tag:hover,
.earn-card:hover,
.stat-card:hover {
    border-color: var(--salit-cyan-ui) !important;
    box-shadow: 0 8px 24px rgba(var(--salit-navy-rgb), 0.08) !important;
}

.svc-icon-btn.active,
.zone-tag:hover,
.earn-card-icon,
.stat-icon {
    background: var(--salit-cyan-soft) !important;
}

.marquee,
.refer-card,
.cta-box,
.footer {
    --primary: var(--salit-navy);
    --primary-dark: var(--salit-navy-deep);
    --primary-rgb: var(--salit-navy-rgb);
    --green: var(--salit-cyan-ui);
    --green-soft: rgba(var(--salit-cyan-rgb), 0.14);
}

.marquee .dot,
.zone-dot {
    background: var(--salit-cyan) !important;
    box-shadow: 0 0 0 3px rgba(var(--salit-cyan-rgb), 0.16) !important;
}

.refer-card,
.cta-box {
    background: linear-gradient(135deg, var(--salit-navy-deep), var(--salit-navy) 58%, #0d746f) !important;
}

.earn-card::before,
.stat-card::after {
    background: linear-gradient(90deg, var(--salit-navy), var(--salit-cyan)) !important;
}

.app-btn {
    background: var(--salit-navy) !important;
    color: #fff !important;
    border: 1px solid var(--salit-navy) !important;
}

.app-btn:hover,
.app-btn:focus {
    background: var(--salit-navy-deep) !important;
    color: #fff !important;
    border-color: var(--salit-navy-deep) !important;
    box-shadow: 0 8px 22px rgba(var(--salit-navy-rgb), 0.18) !important;
}

.app-btn .ab-text,
.app-btn .ab-sm,
.app-btn .ab-lg {
    color: #fff !important;
}

.app-btn .ab-sm {
    opacity: 0.78;
}

.footer,
.footer-section,
.footer__wrapper {
    --base-1: var(--salit-cyan-ui);
    --base-2: var(--salit-cyan);
}

.footer .f-brand p,
.footer-bottom-bar {
    color: rgba(255, 255, 255, 0.72) !important;
}

.footer h5 {
    color: rgba(255, 255, 255, 0.58) !important;
}

.footer a,
.footer .f-links a,
.footer .f-contact a,
.footer .f-app-link,
.footer .f-app-link .fal-text,
.footer .f-app-link .fal-sm,
.footer .f-app-link .fal-lg {
    color: #fff !important;
}

.footer a:hover,
.footer .f-links a:hover,
.footer .f-contact a:hover,
.footer .f-app-link:hover {
    color: var(--salit-cyan) !important;
}

.footer .f-app-link {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.footer .f-app-link:hover,
.footer .f-social a:hover {
    background: rgba(var(--salit-cyan-rgb), 0.12) !important;
    border-color: rgba(var(--salit-cyan-rgb), 0.42) !important;
}

.footer .f-social a {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

*[stroke="#039D55"],
*[stroke="#00E77B"],
*[stroke="#03C168"],
*[stroke="#00A759"],
*[stroke="#00B05E"],
*[stroke="#00C066"],
*[stroke="#04F485"] {
    stroke: var(--salit-cyan-ui) !important;
}

*[fill="#039D55"],
*[fill="#00E77B"],
*[fill="#03C168"],
*[fill="#00A759"],
*[fill="#00B05E"],
*[fill="#00C066"],
*[fill="#04F485"] {
    fill: var(--salit-cyan-ui) !important;
}

*[stop-color="#039D55"],
*[stop-color="#00E77B"],
*[stop-color="#03C168"],
*[stop-color="#00A759"],
*[stop-color="#00B05E"],
*[stop-color="#00C066"],
*[stop-color="#04F485"] {
    stop-color: var(--salit-cyan-ui) !important;
}