/* Logo Container - Must be relative and hidden overflow to contain the shine */
    .nav-logo {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        border-radius: 8px; /* Optional: rounds the shine edges if logo is square */
    }

    /* The Shine Effect */
    .nav-logo::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%; /* Start well off-screen to the left */
        width: 50%;
        height: 100%;
        background: linear-gradient(
            to right, 
            rgba(255, 255, 255, 0) 0%, 
            rgba(255, 255, 255, 0.3) 50%, 
            rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-25deg); /* Tilts the light beam for a natural look */
        animation: logo-shine 20s infinite;
    }

    /* Shine Movement Logic */
    @keyframes logo-shine {
        0% { left: -150%; }
        30% { left: 150%; } /* Movement happens quickly (0% to 30%) */
        100% { left: 150%; } /* Pause/Delay (30% to 100%) before next shine */
    }

    /* Optional: Make the logo pulse slightly when the light hits it */
    .nav-logo img {
        height: 40px;
        display: block;
        transition: transform 0.3s;
    }

    .nav-logo:hover img {
        transform: scale(1.05);
    }