/* Update below HEX and RGB color code to your primary color for light mode */
[data-bs-theme=light] {
    --bs-primary: #b31d23 !important;
    --bs-primary-rgb: 179, 29, 35 !important;
    --bs-link-color: #c62828 !important;
    --bs-link-hover-color: #c54f54 !important;
    --bs-link-color-rgb: 198, 40, 40 !important;
    --bs-link-hover-color-rgb: 197, 79, 84;
    --bs-nav-pills-link-active-bg: #b31d23 !important;
    /* gradient primary (brand reds) */
    --bs-grad-primary-start: #c54f54;
    --bs-grad-primary-end: #b31d23;
    /* gradient secondary (subtle red tints) */
    --bs-grad-secondary-start: rgba(197, 79, 84, 0.15);
    --bs-grad-secondary-center: rgba(198, 40, 40, 0.15);
    --bs-grad-secondary-end: rgba(179, 29, 35, 0.15);
    /* Custom Colors for text and links over primary color background*/
    --bs-nav-link-color-over-red: #FFFFFF;
    --bs-nav-link-hover-color-over-red: #FFFFFF;
    --bs-text-color-over-red: #FFFFFF;
    --bs-secondary-rgb: rgb(244 244 244);
}

/* Update below HEX and RGB color code to your primary color for dark mode */
[data-bs-theme=dark] {
    --bs-primary: #b31d23 !important;
    --bs-primary-rgb: 179, 29, 35 !important;
    --bs-link-color: #c62828 !important;
    --bs-link-hover-color: #c54f54 !important;
    --bs-link-color-rgb: 198, 40, 40 !important;
    --bs-link-hover-color-rgb: 197, 79, 84;
    --bs-nav-pills-link-active-bg: #b31d23 !important;
    /* gradient primary (brand reds) */
    --bs-grad-primary-start: #c54f54;
    --bs-grad-primary-end: #b31d23;
    /* gradient secondary (subtle red tints) */
    --bs-grad-secondary-start: rgba(197, 79, 84, 0.15);
    --bs-grad-secondary-center: rgba(198, 40, 40, 0.15);
    --bs-grad-secondary-end: rgba(179, 29, 35, 0.15);
    /* --bs-primary: #f0ac19 !important;
  --bs-primary-rgb: 240, 172, 25  !important; 
  --bs-link-color:#f0ac19 !important;
  --bs-link-hover-color:#c48a0b !important;
  --bs-link-color-rgb: 240, 172, 25 !important;
  --bs-link-hover-color-rgb: 196, 138, 11;
  --bs-nav-pills-link-active-bg: #f0ac19 !important; */
}

/* Primary gradient color for background */
.bg-primary-grad {
    background: linear-gradient(180deg, var(--bs-grad-primary-start) 0%, var(--bs-grad-primary-end) 100%);
}
/* Secondary gradient color for background */
.bg-secondary-grad {
    background: linear-gradient(90deg, var(--bs-grad-secondary-start) 0%, var(--bs-grad-secondary-center) 51%, var(--bs-grad-secondary-end) 100%)
}

/* Text primary gradient */
.text-primary-grad {
    background: linear-gradient(90deg, var(--bs-grad-primary-start) 0%, var(--bs-grad-primary-end) 100%);
    background-clip: text;
    -WebKit-text-fill-color: transparent;
}

/* button gradient */
.btn-primary-grad {
    background: linear-gradient(to right, var(--bs-grad-primary-end) 0%, var(--bs-grad-primary-start) 51%, var(--bs-grad-primary-end) 100%);
    background-size: 200% auto;
}

    .btn-primary-grad:active, .btn-primary-grad:focus, .btn-primary-grad:hover, .btn-primary-grad:focus-visible {
        background-position: right center;
    }

/* Gradient link button  */
.link-primary-grad {
    background: linear-gradient(90deg, var(--bs-grad-primary-start) 0%, var(--bs-grad-primary-end) 100%);
    background-clip: text;
    -WebKit-text-fill-color: transparent;
}

    .link-primary-grad.active, .link-primary-grad:active, .link-primary-grad:focus, .link-primary-grad:hover {
        background: linear-gradient(280deg, var(--bs-grad-primary-start) 0%, var(--bs-grad-primary-end) 100%);
        background-clip: text;
        -WebKit-text-fill-color: transparent;
    }

    .link-primary-grad > .bi {
        background: linear-gradient(180deg, var(--bs-grad-primary-start) 0%, var(--bs-grad-primary-end) 100%);
        background-clip: text;
    }

/* Tab text primary */
.nav-pills-secondary .nav-link.active .price-text, .nav-pills-secondary .nav-link:hover .price-text {
    background: linear-gradient(90deg,var(--bs-grad-primary-start) 0%, var(--bs-grad-primary-end) 100%);
    background-clip: text;
    -WebKit-text-fill-color: transparent;
}

/* CSS for overriding primary colors */
.navbar {
    --bs-navbar-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
}

.navbar-dark {
    --bs-navbar-hover-color: var(--bs-primary) !important;
    --bs-navbar-active-color: var(--bs-primary) !important;
}

.nav {
    --bs-nav-link-hover-color: var(--bs-primary);
}

.dropdown-menu {
    --bs-dropdown-link-hover-color: var(--bs-primary) !important;
    --bs-dropdown-link-active-color: var(--bs-primary) !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: var(--bs-link-hover-color);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-link {
    --bs-btn-color: var(--bs-primary);
    --bs-link-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-primary-soft {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

    .btn-primary-soft.active,
    .btn-primary-soft:focus,
    .btn-primary-soft:hover {
        color: var(--bs-white);
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

.btn-primary-shadow {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 10px rgba(var( --bs-primary-rgb), .4);
}

    .btn-primary-shadow:hover {
        background-color: var(--bs-link-color);
        box-shadow: 0 0 0 10px rgba(var( --bs-primary-rgb), .4);
    }

    .btn-primary-shadow:focus {
        background-color: var(--bs-link-color);
        box-shadow: 0 0 0 10px rgba(var( --bs-primary-rgb), .4);
    }

    .btn-primary-shadow.active {
        background-color: var(--bs-link-color);
        box-shadow: 0 0 0 10px rgba(var( --bs-primary-rgb), .4);
    }

.fill-primary {
    fill: var(--bs-primary) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* .form-select:focus,
.form-control:focus{
  border-color: var(--bs-primary);
} */
.text-bg-primary {
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
}

.page-item.active .page-link,
.page-link:hover,
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* SVG inline colors */

/* "%23" is the encoding of '#' so place your color code immediately after "%23" in fill attribute. For example, if you want to replace any fill color with red then code will be like:
fill='%23ff0000' so it interprets like in HEX code: #ff0000; */

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c54f54'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c54f54'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}