.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.3s ease;
    z-index: 1001;
}

.mobile-menu-btn:hover {
    color: #667eea;
    transform: scale(1.1);
}

@media (max-width: 768px) {

    .mobile-menu-btn {
        display: block !important;
    }

    header nav {
        position: relative;
    }

    .nav-links {
        display: flex !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column !important;
        background: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(20, 20, 30, 0.98) 100%) !important;
        backdrop-filter: blur(20px) !important;
        width: 100% !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.5s ease !important;
        border-top: 1px solid rgba(102, 126, 234, 0.3) !important;
        padding: 0 !important;
        gap: 0 !important;
        z-index: 999 !important;
        margin: 0 !important;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
    }

    .nav-links.active {
        max-height: 600px !important;
        padding: 15px 0 !important;
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3) !important;
    }

    .nav-links li {
        width: 100% !important;
        text-align: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        opacity: 0;
        transform: translateY(-10px);
        animation: slideDown 0.3s ease forwards;
    }

    .nav-links.active li:nth-child(1) { animation-delay: 0.05s; }
    .nav-links.active li:nth-child(2) { animation-delay: 0.1s; }
    .nav-links.active li:nth-child(3) { animation-delay: 0.15s; }
    .nav-links.active li:nth-child(4) { animation-delay: 0.2s; }
    .nav-links.active li:nth-child(5) { animation-delay: 0.25s; }
    .nav-links.active li:nth-child(6) { animation-delay: 0.3s; }
    .nav-links.active li:nth-child(7) { animation-delay: 0.35s; }

    @keyframes slideDown {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-links a {
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 16px 20px !important;
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .nav-links a::before {
        content: '';
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent);
        transition: left 0.5s ease;
    }

    .nav-links a:hover::before {
        left: 100%;
    }

    .nav-links a:hover {
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)) !important;
        color: #667eea !important;
        padding-left: 30px !important;
        border-left: 3px solid #667eea !important;
    }

    .nav-links li:last-child a {
        border-bottom: none !important;
    }
}

@media (max-width: 480px) {
    .mobile-menu-btn {
        font-size: 24px;
        padding: 5px 8px;
    }

    .nav-links a {
        font-size: 15px !important;
        padding: 14px 15px !important;
    }

    .nav-links a:hover {
        padding-left: 25px !important;
    }
}

@media (max-width: 360px) {
    .nav-links a {
        font-size: 14px !important;
        padding: 12px 10px !important;
    }
}