/* Base styling for the navbar */
.navbar {
    font-family: Arial, sans-serif; /* Lettertype */
    background-image: url(../img/galaxy.jpg);
    background-size: cover;
    background-attachment: fixed;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff; /* Light color for the brand name */
    text-transform: uppercase;
}

.navbar-brand:hover {
    color: #007bff; /* Change brand color on hover */
}

.nav-link {
    font-size: 1rem;
    color: #ffffff; /* Light color for the links */
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #007bff; /* Blue color on hover */
    background-color: rgba(0, 123, 255, 0.1); /* Light blue background on hover */
    border-radius: 5px; /* Rounded edges on hover */
}

.navbar-toggler {
    border-color: rgba(0, 123, 255, 0.5); /* Light blue border for toggler */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba%280%2C123%2C255%2C1%29' stroke-width='2' linecap='round' linejoin='round' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/* Dropdown Styling */
.dropdown-menu {
    background-color: rgba(0, 0, 0, 0.8); /* Dark background for the dropdown */
    border-radius: 5px;
    border: none;
}

.dropdown-item {
    color: white; /* White color for dropdown items */
    padding: 10px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
    background-color: #007bff; /* Blue background on hover */
    color: #ffffff; /* White text on hover */
}

/* Adjustments for mobile view */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-image: url(../img/live-car-l93g0jrgxphqut01.jpg);
        padding: 1rem;
    }

    .nav-item {
        text-align: center;
        margin-bottom: 10px;
    }

    .dropdown-menu {
        background-image: url(../img/galaxy.jpg);
        background-size: cover;
        background-attachment: fixed;
    }
}

/* Timer and Date Styling */
#timer, #date {
    font-size: 1rem;
    color: white;
    padding: 0.5rem;
    background-color: rgba(0, 123, 255, 0.1); /* Light blue transparent background */
    border-radius: 5px;
}