.hamburger-menu {
    display: none; /* Ensure this is only visible on mobile */
    cursor: pointer;
    font-size: 30px; /* Size of hamburger icon */
    color: #ffffff; /* Icon color */
}

@media (max-width: 768px) {
    .hamburger-menu {
        display: block; /* Show hamburger menu on mobile */
    }

    .nav-links {
        display: none; /* Hide navigation links initially on mobile */
        flex-direction: column;
        width: 100%;
        padding: 0; /* Remove padding if present */
    }

    .nav-links.active {
        display: flex; /* Display links when active */
    }

    .nav-links a {
        text-align: center; /* Center-align links */
        padding: 10px; /* Add padding for better touch targets */
        width: 100%; /* Full width for each link */
    }
}