/* --- Dropdown Navigation Styling --- */
    #navbar {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .nav-item {
        position: relative;
        display: inline-block;
        text-decoration: none;
        padding: 10px 15px;
    }

    /* Dropdown Content Container (Hidden by default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #ffffff;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
        z-index: 1000;
        border-radius: 6px;
        top: 100%;
        left: 0;
        padding: 5px 0;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
        color: #333333;
        padding: 10px 15px;
        text-decoration: none;
        display: block;
        font-size: 14px;
        transition: background-color 0.2s ease;
    }

    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    /* Show the dropdown menu on hover */
    .nav-item:hover .dropdown-content {
        display: block;
    }

    @media (max-width: 768px) {
        #navbar {
            display: flex; /* Overridden by topbar.css fixed position */
        }

        .nav-item {
            width: 100%;
            padding: 10px 0;
        }

        .dropdown-content {
            position: static;
            display: block; /* Always show dropdown content on mobile */
            box-shadow: none;
            padding-left: 20px;
            min-width: unset;
        }
        
        .nav-item:hover .dropdown-content {
            display: block;
        }
    }