:root {
            --primary-blue: #2563eb;
            --primary-red: #dc2626;
            --dark-blue: #1e40af;
            --light-blue: #93c5fd;
            --dark-red: #b91c1c;
            --light-red: #fca5a5;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            transition: all 0.3s ease;
        }
        
        .hero {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
        }
        
        .skill-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .project-card {
            transition: all 0.3s ease;
        }
        
        .project-card:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .testimonial-card {
            transition: all 0.3s ease;
        }
        
        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 0;
            width: 2px;
            height: 100%;
            background-color: var(--primary-blue);
        }
        
        .dark-mode {
            background-color: #1a1a1a;
            color: #e5e7eb;
        }
        
        .dark-mode .navbar {
            background-color: #111827 !important;
        }
        
        .dark-mode .card {
            background-color: #1f2937 !important;
        }