@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap');
    
    body {
        font-family: 'Inter', sans-serif;
        background-color: #020617;
        color: #f8fafc;
        scroll-behavior: smooth;
    }
    
    .gradient-text {
        background: linear-gradient(90deg, #0ea5e9, #3b82f6, #6366f1);
        background-size: 300% 300%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: gradient 8s ease infinite;
    }
    
    .gradient-bg {
        background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a);
    }
    
    .card-hover {
        transition: all 0.3s ease;
    }
    
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.1), 0 10px 10px -5px rgba(14, 165, 233, 0.04);
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -1.5rem;
        top: 0;
        height: 100%;
        width: 2px;
        background: linear-gradient(to bottom, #0ea5e9, #3b82f6);
    }
    
    .timeline-dot {
        position: absolute;
        left: -2.125rem;
        top: 0.25rem;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 9999px;
        background-color: #0ea5e9;
        border: 4px solid #0f172a;
    }
    
    .skill-bar {
        height: 0.5rem;
        background-color: #1e293b;
        border-radius: 0.25rem;
    }
    
    .skill-progress {
        height: 100%;
        border-radius: 0.25rem;
        background: linear-gradient(90deg, #0ea5e9, #3b82f6);
        transition: width 1s ease-in-out;
    }
    
    .nav-link {
        position: relative;
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #0ea5e9;
        transition: width 0.3s ease;
    }
    
    .nav-link:hover::after {
        width: 100%;
    }
    
    .active-nav::after {
        width: 100%;
    }
    
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #0f172a;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #0ea5e9;
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #3b82f6;
    }

            .futuristic-text {
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 1px;
        }
        
        .glow-effect {
            box-shadow: 0 0 15px rgba(56, 182, 255, 0.5);
        }
        
        .glow-effect:hover {
            box-shadow: 0 0 20px rgba(56, 182, 255, 0.8);
        }
        
        .input-field {
            background-color: rgba(20, 20, 40, 0.7);
            border: 1px solid rgba(56, 182, 255, 0.3);
            transition: all 0.3s ease;
        }
        
        .input-field:focus {
            border-color: rgba(56, 182, 255, 0.7);
            background-color: rgba(30, 30, 60, 0.7);
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(56, 182, 255, 0.4);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(56, 182, 255, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(56, 182, 255, 0);
            }
        }
        
        .cyber-line {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(56, 182, 255, 0.7), transparent);
        }