/* Overrides for Bootstrap's theme colors */
:root {
    --bs-primary: #2eefd3;   /* New primary color */
    --bs-secondary: #00bcd4; /* New secondary color */
    --bs-light: #fff;
}

.bg-dark {
    background-color: #00273a !important;
}

.bg-primary {
    background: linear-gradient(to right, #16f69f, #2eefd3) !important;
}


.bg-secondary {
    background-color: #0b1b21 !important;
}

.bg-light {
    background-color: var(--bs-light) !important;
}

.bg-grey {
    background-color: #F6F6F6;
}

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

.text-light {
    color: var(--bs-light) !important;
}

.border-end {
    border-right-color: #00273a !important;
    @media (min-width: 768px) {
        border-right-color: #333333 !important;
        padding-right: 36px !important;
    }
}

/* Navbar with better spacing */
.navbar {
    width: 92%; /* Increase width to fill more space */
    margin: 0 auto; /* Center the navbar */
}

.navbar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between;
}

.navbar-brand {
    margin-right: auto !important;
}

.navbar-nav {
    margin-left: auto !important;
}

/* Optional: Styling for active state */
.navbar-nav .nav-link {
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 6px 12px !important;
    margin: 0 3px;
    border: 2px solid transparent !important; /* Always have border for consistent spacing */
}

.navbar-nav .nav-link.active {
    color: var(--bs-primary) !important; /* Change color when active */
    font-weight: bold; /* Make the active link bold */
    border: 2px solid var(--bs-primary) !important; /* Add border */
    background-color: rgba(46, 239, 211, 0.1) !important; /* Subtle background */
}

.navbar-nav .nav-link:hover {
    color: var(--bs-primary) !important;
    border: 2px solid rgba(46, 239, 211, 0.5) !important;
    background-color: rgba(46, 239, 211, 0.05) !important;
}

.btn-close {
    filter: invert(1); /* Inverts the color of the close button */
}

.btn-close:focus {
    box-shadow: none;
}