/* Mobile menu button CSS fix */
.mobile-menu-btn {
    display: none; /* This ensures the mobile button is hidden by default */
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
}

/* Only show the mobile menu button on smaller screens */
@media screen and (max-width: 768px) {
    .mobile-menu-btn {
        display: block; /* Only display on mobile */
    }
    
    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--primary);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        box-shadow: var(--box-shadow);
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        z-index: 99;
    }
    
    .nav-links.active {
        transform: translateY(0);
    }
    
    .nav-links li {
        margin: 12px 0;
    }
}

/* Ensure proper display on larger screens */
@media screen and (min-width: 769px) {
    .nav-links {
        display: flex;
        position: static;
        transform: none;
        background-color: transparent;
        box-shadow: none;
        width: auto;
        padding: 0;
    }
}