/* Add this to your site.css or a custom CSS file */
:root {
    /* Override primary color */
    /*--bs-primary: #8CBCE4;*/
    --bs-primary: #388ba6;
    --bs-primary-rgb: R, G, B; /* Same color in RGB format */
    /* Optional: Override primary variants */
    --bs-primary-subtle: #lighter-variant;
    --bs-primary-dark: #darker-variant;
    /* Optional: Override hover/active states */
    --bs-primary-hover: #hover-color;
    --bs-primary-active: #active-color;
    --bs-nav-link-color: #EB8336;
}

/* Ensure background classes use the new color */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #EB8336;
    --bs-btn-border-color: #EB8336;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #C16A2C;
    --bs-btn-hover-border-color: #C16A2C;
    --bs-btn-focus-shadow-rgb: 56, 157, 196;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #C16A2C;
    --bs-btn-active-border-color: #C16A2C;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #F1C19C;
    --bs-btn-disabled-border-color: #F1C19C;
}

    .btn-primary:active, .btn-primary:hover {
        background-color: #C16A2C;
    }

    .btn-primary:focus {
        background-color: #EB8336;
    }

/* Optional: Update button hover states */
/*.btn-primary:hover {
    background-color: var(--bs-primary-hover) !important;
}*/

/* Optional: Update active states */
/*.btn-primary:active,
.btn-primary.active {
    background-color: var(--bs-primary-active) !important;
}*/