/* Navbar background and styling */

.header {
    height: 8.5%;
    background-color: rgba(255, 255, 255, 0.9);
    /* Semi-transparent white */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    backdrop-filter: blur(5px);
    /* Optional: Adds a glass effect */
    z-index: 1000;
    /* Ensures navbar stays above other content */
}

.navbar-nav .nav-link {
    color: #333;
    /* Dark text for better contrast */
    font-weight: 500;
    /* Slightly bolder font */
    transition: color 0.3s ease;
    /* Smooth hover effect */
}

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

.navbar-toggler {
    border: none;
    /* Removes default button border */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(51,51,51,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /* Custom dark icon for the toggler */
}

.navbar-nav .nav-link[aria-current="page"] {
    text-decoration: underline;
}

@media (max-width: 991.98px) {

    /* Bootstrap lg breakpoint */
    .navbar-nav {
        background-color: rgba(255, 255, 255, 0.95);
        /* Solid background for mobile dropdown */
        border-radius: 0.5rem;
        /* Rounded corners */
        padding: 1rem;
        /* Adds space inside the dropdown */
    }
}

/* Prevent dropdown from showing on hover */
.dropdown:hover > .dropdown-menu {
display: none !important;
}

.dropdown .dropdown-menu.show {
display: block !important;
}

.navbar .dropdown:hover > .dropdown-menu,
#profile-card.dropdown:hover > .dropdown-menu {
  display: none !important;
}

.navbar .dropdown .dropdown-menu.show,
#profile-card.dropdown .dropdown-menu.show {
  display: block !important;
}