@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #0ea5e9, #7e22ce);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(14, 165, 233, 0.2);
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background: linear-gradient(90deg, #0ea5e9, #7e22ce);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .active::after {
            width: 100%;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            left: -7.5px;
            top: 0;
            background: linear-gradient(135deg, #0ea5e9, #7e22ce);
        }
        
        .skill-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #1e293b;
        }
        
        .skill-progress {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #0ea5e9, #7e22ce);
            transition: width 1s ease-in-out;
        }
        
        .project-card {
            background: linear-gradient(145deg, #1e293b, #0f172a);
            box-shadow: 5px 5px 15px rgba(2, 6, 23, 0.5), 
                        -5px -5px 15px rgba(30, 41, 59, 0.5);
        }
        
        .contact-input {
            background-color: #1e293b;
            border: 1px solid #334155;
            transition: all 0.3s ease;
        }
        
        .contact-input:focus {
            border-color: #0ea5e9;
            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
        }
        
        .btn-primary {
            background: linear-gradient(90deg, #0ea5e9, #7e22ce);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(14, 165, 233, 0.3);
        }
        
        .social-icon {
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            transform: translateY(-3px);
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .floating {
            animation: float 3s ease-in-out infinite;
        }