.background-image-container {
    background-image: url('../assets/img/hero-img.png');
    background-size: cover; /* Ensure the image covers the entire container */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    width: 100%; /* Ensure the div takes up the full width of its parent */
    height: 100vh; /* Set the height to 100% of the viewport height */
}

.dropdown.user-dr i {
    /* Your styles here */
    margin-right: 5px; /* Example style */
}

.dropdown.user-dr span {
    vertical-align: middle
}

#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's above other elements on the page */
}

    #loading-overlay .spinner-border {
        width: 2rem;
        height: 2rem;
    }

.card {
    cursor: pointer;
}

    .card input[type="radio"] {
        display: none;
    }

    .card.selected {
        border: 2px solid #007bff;
    }