.bg-change {
    background-color: var(--bs-body-bg); /* Uses Bootstrap's theme variable */
    color: var(--bs-body-color);
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

[data-bs-theme="dark"] .bg-change
 {
    background-color: var(--bs-body-bg); /* Uses Bootstrap's theme variable */
    color: var(--bs-body-color);
}

.event-item {
    min-height: 500px;
}
/* if i get everything from event-1 to event item the boxes will merge. */

.event-1 {
    background-image: url('../../images/pages/about_us/objective_about_us.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.5); /* Initial overlay */
    background-blend-mode: multiply; /* Darkens only the background */
    transition: background-color 0.3s ease-in-out;
}

.event-1:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Lighter overlay on hover */
}

/* select2 modoficaitons */

[data-bs-theme="dark"] .select2-selection {
    background-color: var(--bs-body-bg) !important; /* Uses Bootstrap's theme variable */
    color: var(--bs-body-color) !important;
    border-color: gray !important;
}

[data-bs-theme="dark"] .select2-search__field {
    background-color: var(--bs-body-bg) !important; /* Uses Bootstrap's theme variable */
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option:hover {
    background-color: #0056b3 !important;
    color: white !important;
}

[data-bs-theme="dark"] .select2-selection__choice__remove:hover {
    color: white;
}

[data-bs-theme="dark"] .select2-selection__choice__display {
    color: white;
    padding-left: 5px;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: #007bff !important; /* Blue */
    color: white !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    color: black !important;
}

/* Change color when selected */
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    color: white !important; /* White text */
}