.glass-navbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0px;
    background: rgba(0, 0, 0, 0.8);
    margin: 0;
    max-width: 100%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 999;
    transition: all 0.3s ease-in-out;

}

    /* Scrolled state */
    .glass-navbar.scrolled {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

/* Nav links (apply to both states) */
.custom-nav .nav-link {
    color: white !important;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    text-decoration: none;
    font-weight: 600;
    margin: 0 10px;
}

    /* Hover effect */
    .custom-nav .nav-link:hover {
        color: lightgreen !important; /* Yellow */
        text-decoration: none;
    }

/* Button styling */
.btn {
    padding: 4px 12px;
    color: white !important;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    text-decoration: none;
}
    .btn:hover {
        color: lightgreen !important; /* Yellow */
        text-decoration: none;
    }

.navbar-toggler-icon {
    filter: brightness(0) invert(1); /* makes the icon white */
}
.navbar-brand img:hover {
    filter: drop-shadow(0 0 8px limegreen);
    transition: filter 0.3s ease;
}