@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        :root {
            --primary-color: #6366f1;
            --primary-dark: #4f46e5;
            --secondary-color: #06b6d4;
            --accent-color: #f59e0b;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-light: #9ca3af;
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --bg-hero: linear-gradient(-45deg, #667eea, #764ba2, #6366f1, #06b6d4);
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --border-radius: 16px;
        }

        /* Theme Switcher Styles */
        .theme-switcher {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 10px 6px;
            border: 2px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .theme-switcher:hover {
            right: 10px;
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.05);
        }

        .theme-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 8px;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #ffffff;
            text-decoration: none;
            backdrop-filter: blur(8px);
            min-width: 55px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .theme-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .theme-button:hover::before {
            left: 100%;
        }

        .theme-button:hover {
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.6);
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 255, 255, 0.2);
        }

        .theme-button.active {
            background: rgba(255, 255, 255, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.5), 0 4px 15px rgba(0, 0, 0, 0.4);
            transform: scale(1.1);
        }

        .theme-button.active::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -6px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid rgba(255, 255, 255, 0.8);
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
        }

        .theme-icon {
            font-size: 20px;
            margin-bottom: 4px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
        }

        .theme-name {
            font-size: 8px;
            font-weight: 700;
            text-align: center;
            line-height: 1.2;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.6);
            color: #ffffff;
        }

        /* Money Heist Theme */
        .theme-money-heist {
            --primary-color: #dc143c;
            --primary-dark: #b91c3c;
            --secondary-color: #000000;
            --accent-color: #ffd700;
            --text-primary: #ffffff;
            --text-secondary: #e5e5e5;
            --text-light: #cccccc;
            --bg-primary: #0a0a0a;
            --bg-secondary: #1a1a1a;
            --bg-gradient: linear-gradient(135deg, #dc143c 0%, #000000 100%);
            --bg-hero: linear-gradient(-45deg, #dc143c, #000000, #8b0000, #2c0000);
        }

        .theme-money-heist body {
            background: #0a0a0a;
            color: #ffffff;
            font-family: 'Courier New', monospace;
        }

        .theme-money-heist .header {
            background: linear-gradient(-45deg, #dc143c, #000000, #8b0000, #2c0000);
        }

        .theme-money-heist .hero-title {
            color: #ffd700;
            text-shadow: 2px 2px 4px #000000, 0 0 15px #dc143c;
            font-weight: 800;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .theme-money-heist .hero-subtitle {
            color: #dc143c;
            font-weight: 700;
            text-shadow: 2px 2px 4px #000000;
            margin-bottom: 1.5rem;
            line-height: 1.3;
        }

        .theme-money-heist .hero-description {
            color: #e5e5e5;
            text-shadow: 1px 1px 3px #000000;
            background: rgba(0, 0, 0, 0.6);
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid rgba(220, 20, 60, 0.3);
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .theme-money-heist .btn-primary {
            background: linear-gradient(135deg, #dc143c, #8b0000);
            border: 2px solid #ffd700;
            color: #ffd700;
            font-weight: 700;
            text-shadow: 1px 1px 2px #000000;
            margin: 0.5rem;
        }

        .theme-money-heist .btn-secondary {
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid #dc143c;
            color: #dc143c;
            font-weight: 700;
            text-shadow: 1px 1px 2px #000000;
            margin: 0.5rem;
        }

        .theme-money-heist .section {
            background: #0a0a0a;
            color: #ffffff;
            padding: 6rem 0;
        }

        .theme-money-heist .section-title {
            color: #ffd700;
            text-shadow: 2px 2px 4px #000000, 0 0 15px #dc143c;
            margin-bottom: 2rem;
            line-height: 1.2;
        }

        .theme-money-heist .section-subtitle {
            color: #e5e5e5;
            text-shadow: 1px 1px 3px #000000;
            margin-bottom: 3rem;
            line-height: 1.5;
        }

        .theme-money-heist .about-text {
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            background: rgba(0, 0, 0, 0.4);
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            line-height: 1.7;
            border-left: 4px solid #dc143c;
        }

        .theme-money-heist p,
        .theme-money-heist .timeline-description,
        .theme-money-heist .timeline-company,
        .theme-money-heist .timeline-title {
            color: #ffffff;
            text-shadow: 2px 2px 4px #000000, 0 0 8px #000000;
            line-height: 1.6;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .theme-money-heist .timeline-year {
            color: #ffd700;
            background: rgba(220, 20, 60, 0.9);
            text-shadow: 1px 1px 2px #000000;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-weight: 700;
            border: 1px solid #ffd700;
        }

        .theme-money-heist .timeline-company {
            color: #ffd700 !important;
            font-weight: 800 !important;
            text-shadow: 2px 2px 4px #000000, 0 0 12px #000000 !important;
            background: rgba(220, 20, 60, 0.3);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            border: 1px solid rgba(255, 215, 0, 0.5);
            display: inline-block;
            margin-bottom: 1rem;
        }

        .theme-money-heist .timeline-description li {
            color: #ffffff !important;
            text-shadow: 2px 2px 4px #000000, 0 0 8px #000000 !important;
            font-weight: 500 !important;
            margin-bottom: 0.8rem;
            line-height: 1.6;
        }

        .theme-money-heist .timeline-title {
            color: #ffd700 !important;
            font-weight: 800 !important;
            text-shadow: 2px 2px 4px #000000, 0 0 12px #000000 !important;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .theme-money-heist .stat-label,
        .theme-money-heist .stat-number {
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            background: rgba(0, 0, 0, 0.4);
            padding: 0.5rem;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }

        .theme-money-heist .stat-number {
            color: #ffd700;
            font-weight: 800;
            text-shadow: 2px 2px 4px #000000, 0 0 10px #dc143c;
        }

        /* Money Heist - Skills Section */
        .theme-money-heist .skills {
            background: #0a0a0a;
        }

        .theme-money-heist .skill-category h3 {
            color: #ffd700;
            text-shadow: 2px 2px 4px #000000, 0 0 10px #dc143c;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #dc143c;
        }

        .theme-money-heist .skill-item span {
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            background: rgba(0, 0, 0, 0.4);
            padding: 0.5rem;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 0.5rem;
        }

        .theme-money-heist .skill-category {
            background: rgba(220, 20, 60, 0.1);
            border: 1px solid rgba(220, 20, 60, 0.3);
            padding: 2rem;
            border-radius: 8px;
            margin-bottom: 2rem;
        }

        /* Money Heist - Experience Section */
        .theme-money-heist .timeline-item {
            background: rgba(0, 0, 0, 0.7);
            border: 1px solid rgba(255, 215, 0, 0.5);
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            backdrop-filter: blur(10px);
        }

        /* Money Heist Mobile Responsive Improvements */
        @media (max-width: 768px) {
            .theme-money-heist .hero-title {
                font-size: 2.5rem;
                line-height: 1.1;
                margin-bottom: 1rem;
            }
            
            .theme-money-heist .hero-subtitle {
                font-size: 1.3rem;
                line-height: 1.2;
                margin-bottom: 1rem;
            }
            
            .theme-money-heist .hero-description {
                font-size: 1rem;
                padding: 1.2rem;
                margin-bottom: 1.5rem;
            }
            
            .theme-money-heist .section-title {
                font-size: 2rem;
                line-height: 1.1;
                margin-bottom: 1.5rem;
            }
            
            .theme-money-heist .section-subtitle {
                font-size: 1rem;
                line-height: 1.4;
                margin-bottom: 2rem;
            }
            
            .theme-money-heist .about-text {
                font-size: 0.95rem;
                padding: 1.2rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-money-heist .skill-category {
                padding: 1.5rem;
                margin-bottom: 1.5rem;
            }
            
            .theme-money-heist .timeline-item {
                padding: 1.5rem;
                margin-bottom: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .theme-money-heist .hero-title {
                font-size: 2rem;
                line-height: 1.1;
                margin-bottom: 0.8rem;
            }
            
            .theme-money-heist .hero-subtitle {
                font-size: 1.1rem;
                line-height: 1.2;
                margin-bottom: 0.8rem;
            }
            
            .theme-money-heist .hero-description {
                font-size: 0.9rem;
                padding: 1rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-money-heist .section-title {
                font-size: 1.8rem;
                line-height: 1.1;
                margin-bottom: 1.2rem;
            }
            
            .theme-money-heist .section-subtitle {
                font-size: 0.9rem;
                line-height: 1.3;
                margin-bottom: 1.5rem;
            }
            
            .theme-money-heist .about-text {
                font-size: 0.9rem;
                padding: 1rem;
                margin-bottom: 1rem;
            }
            
            .theme-money-heist .skill-category {
                padding: 1.2rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-money-heist .timeline-item {
                padding: 1.2rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-money-heist .btn-primary,
            .theme-money-heist .btn-secondary {
                font-size: 0.9rem;
                padding: 0.8rem 1.5rem;
                margin: 0.3rem;
            }
        }

        /* Iron Man Theme */
        .theme-iron-man {
            --primary-color: #ffd700;
            --primary-dark: #b8860b;
            --secondary-color: #dc143c;
            --accent-color: #ff6b00;
            --text-primary: #ffffff;
            --text-secondary: #f5f5f5;
            --text-light: #e0e0e0;
            --bg-primary: #1a1a1a;
            --bg-secondary: #2d2d2d;
            --bg-gradient: linear-gradient(135deg, #ffd700 0%, #dc143c 50%, #ff6b00 100%);
            --bg-hero: linear-gradient(-45deg, #ffd700, #dc143c, #ff6b00, #b8860b);
        }

        .theme-iron-man body {
            background: 
                radial-gradient(ellipse at top, #0f0f23 0%, #1a1a1a 50%, #000000 100%),
                linear-gradient(180deg, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
            color: #ffffff;
            font-family: 'Orbitron', 'Arial', 'Helvetica', sans-serif;
            position: relative;
            overflow-x: hidden;
        }

        .theme-iron-man body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(220, 20, 60, 0.12) 0%, transparent 45%),
                radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 10% 80%, rgba(255, 215, 0, 0.06) 0%, transparent 35%),
                radial-gradient(circle at 90% 20%, rgba(220, 20, 60, 0.08) 0%, transparent 40%);
            pointer-events: none;
            z-index: -1;
            animation: arcReactorPulse 4s ease-in-out infinite;
        }

        .theme-iron-man body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(255, 215, 0, 0.03) 2px,
                    rgba(255, 215, 0, 0.03) 4px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 2px,
                    rgba(255, 215, 0, 0.02) 2px,
                    rgba(255, 215, 0, 0.02) 4px
                );
            pointer-events: none;
            z-index: -1;
            opacity: 0.3;
        }

        @keyframes arcReactorPulse {
            0%, 100% {
                opacity: 0.7;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.02);
            }
        }

        .theme-iron-man .header {
            background: 
                linear-gradient(-45deg, #ffd700, #dc143c, #ff6b00, #b8860b),
                radial-gradient(ellipse at center, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
            background-size: 400% 400%, 100% 100%;
            animation: ironManGradient 8s ease infinite;
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 4px 30px rgba(255, 215, 0, 0.3),
                inset 0 -2px 10px rgba(0, 0, 0, 0.3);
        }

        .theme-iron-man .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            animation: ironManSweep 3s ease-in-out infinite;
        }

        .theme-iron-man .header::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 1px,
                    rgba(255, 215, 0, 0.1) 1px,
                    rgba(255, 215, 0, 0.1) 2px
                );
            opacity: 0.3;
        }

        @keyframes ironManGradient {
            0% { background-position: 0% 50%, center; }
            50% { background-position: 100% 50%, center; }
            100% { background-position: 0% 50%, center; }
        }

        @keyframes ironManSweep {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        .theme-iron-man .hero-title {
            color: #ffd700;
            text-shadow: 
                0 0 8px #ffd700,
                2px 2px 4px #000000;
            font-weight: 900;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            position: relative;
        }

        .theme-iron-man .hero-subtitle {
            color: #dc143c;
            font-weight: 700;
            text-shadow: 
                0 0 5px #dc143c,
                2px 2px 4px #000000;
            margin-bottom: 1.5rem;
            line-height: 1.3;
        }

        .theme-iron-man .hero-description {
            color: #f5f5f5;
            text-shadow: 1px 1px 3px #000000;
            background: 
                rgba(0, 0, 0, 0.8),
                radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
            padding: 2rem;
            border-radius: 15px;
            border: 2px solid rgba(255, 215, 0, 0.4);
            margin-bottom: 2rem;
            line-height: 1.6;
            box-shadow: 
                0 0 30px rgba(255, 215, 0, 0.3),
                inset 0 0 30px rgba(255, 215, 0, 0.1),
                0 8px 32px rgba(0, 0, 0, 0.3);
            position: relative;
            backdrop-filter: blur(10px);
        }

        .theme-iron-man .hero-description::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #ffd700, #ff6b00, #dc143c, #ffd700);
            border-radius: 15px;
            z-index: -1;
            animation: ironManBorderGlow 3s linear infinite;
        }

        .theme-iron-man .hero-description::after {
            content: '◉';
            position: absolute;
            top: 15px;
            right: 15px;
            color: #ffd700;
            font-size: 12px;
            text-shadow: 0 0 10px #ffd700;
            animation: ironManReactorBlink 2s ease-in-out infinite;
        }

        @keyframes ironManBorderGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes ironManReactorBlink {
            0%, 100% { opacity: 0.6; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        .theme-iron-man .btn-primary {
            background: linear-gradient(135deg, #ffd700, #ff6b00);
            border: 2px solid #dc143c;
            color: #000000;
            font-weight: 700;
            text-shadow: 1px 1px 2px #ffffff;
            margin: 0.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 15px rgba(255, 215, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }

        .theme-iron-man .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s ease;
        }

        .theme-iron-man .btn-primary:hover {
            background: linear-gradient(135deg, #ff6b00, #dc143c);
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 
                0 8px 25px rgba(255, 215, 0, 0.5),
                0 4px 15px rgba(220, 20, 60, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .theme-iron-man .btn-primary:hover::before {
            left: 100%;
        }

        .theme-iron-man .btn-secondary {
            background: 
                rgba(220, 20, 60, 0.8),
                linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(220, 20, 60, 0.1));
            border: 2px solid #ffd700;
            color: #ffd700;
            font-weight: 700;
            text-shadow: 
                1px 1px 2px #000000,
                0 0 5px #ffd700;
            margin: 0.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 
                0 4px 15px rgba(220, 20, 60, 0.3),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
        }

        .theme-iron-man .btn-secondary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
            transition: left 0.5s ease;
        }

        .theme-iron-man .btn-secondary:hover {
            background: 
                rgba(255, 215, 0, 0.9),
                linear-gradient(135deg, #ffd700, #ff6b00);
            color: #000000;
            text-shadow: 1px 1px 2px #ffffff;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 
                0 8px 25px rgba(255, 215, 0, 0.5),
                0 4px 15px rgba(255, 107, 0, 0.3);
        }

        .theme-iron-man .btn-secondary:hover::before {
            left: 100%;
        }

        .theme-iron-man .section {
            background: 
                #1a1a1a,
                radial-gradient(ellipse at center top, rgba(255, 215, 0, 0.05) 0%, transparent 70%),
                radial-gradient(ellipse at center bottom, rgba(220, 20, 60, 0.03) 0%, transparent 70%);
            color: #ffffff;
            padding: 6rem 0;
            position: relative;
            overflow: hidden;
        }

        .theme-iron-man .section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.08) 50%, transparent 100%),
                linear-gradient(0deg, transparent 0%, rgba(255, 107, 0, 0.05) 50%, transparent 100%);
            pointer-events: none;
            animation: ironManSectionPulse 8s ease-in-out infinite;
        }

        .theme-iron-man .section::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            box-shadow: 0 0 10px #ffd700;
            animation: ironManScanLine 6s linear infinite;
        }

        @keyframes ironManSectionPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes ironManScanLine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .theme-iron-man .section-title {
            color: #ffd700;
            text-shadow: 
                0 0 8px #ffd700,
                2px 2px 4px #000000;
            margin-bottom: 2rem;
            line-height: 1.2;
            position: relative;
            z-index: 1;
        }

        .theme-iron-man .section-subtitle {
            color: #f5f5f5;
            text-shadow: 1px 1px 3px #000000;
            margin-bottom: 3rem;
            line-height: 1.5;
        }

        .theme-iron-man .about-text {
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            background: rgba(0, 0, 0, 0.6);
            padding: 1.5rem;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            line-height: 1.7;
            border-left: 4px solid #ffd700;
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.3),
                inset 0 0 20px rgba(255, 215, 0, 0.1);
        }

        .theme-iron-man p,
        .theme-iron-man .timeline-description,
        .theme-iron-man .timeline-company,
        .theme-iron-man .timeline-title {
            color: #ffffff;
            text-shadow: 1px 1px 3px #000000;
            line-height: 1.6;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .theme-iron-man .timeline-year {
            color: #ffd700;
            background: rgba(220, 20, 60, 0.9);
            text-shadow: 
                0 0 5px #ffd700,
                1px 1px 2px #000000;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 700;
            border: 2px solid #ffd700;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
        }

        .theme-iron-man .timeline-company {
            color: #ffd700 !important;
            font-weight: 800 !important;
            text-shadow: 
                0 0 5px #ffd700,
                2px 2px 4px #000000 !important;
            background: rgba(220, 20, 60, 0.4);
            padding: 0.5rem 1rem;
            border-radius: 6px;
            border: 2px solid rgba(255, 215, 0, 0.6);
            display: inline-block;
            margin-bottom: 1rem;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
        }

        .theme-iron-man .timeline-description li {
            color: #ffffff !important;
            text-shadow: 1px 1px 3px #000000 !important;
            font-weight: 500 !important;
            margin-bottom: 0.8rem;
            line-height: 1.6;
        }

        .theme-iron-man .timeline-title {
            color: #ffd700 !important;
            font-weight: 800 !important;
            text-shadow: 
                0 0 5px #ffd700,
                2px 2px 4px #000000 !important;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .theme-iron-man .stat-label,
        .theme-iron-man .stat-number {
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            background: rgba(0, 0, 0, 0.6);
            padding: 0.5rem;
            border-radius: 6px;
            margin-bottom: 0.5rem;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .theme-iron-man .stat-number {
            color: #ffd700;
            font-weight: 800;
            text-shadow: 
                0 0 5px #ffd700,
                2px 2px 4px #000000;
            background: rgba(220, 20, 60, 0.3);
        }

        /* Iron Man - Skills Section */
        .theme-iron-man .skills {
            background: #1a1a1a;
        }

        .theme-iron-man .skill-category h3 {
            color: #ffd700;
            text-shadow: 
                0 0 5px #ffd700,
                2px 2px 4px #000000;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #dc143c;
            position: relative;
        }

        .theme-iron-man .skill-category h3::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 30%;
            height: 2px;
            background: #ffd700;
            box-shadow: 0 0 10px #ffd700;
        }

        .theme-iron-man .skill-item span {
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            background: rgba(0, 0, 0, 0.6);
            padding: 0.5rem;
            border-radius: 6px;
            display: inline-block;
            margin-bottom: 0.5rem;
            border: 1px solid rgba(255, 215, 0, 0.3);
            transition: all 0.3s ease;
        }

        .theme-iron-man .skill-item span:hover {
            background: rgba(255, 215, 0, 0.2);
            border-color: #ffd700;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        }

        .theme-iron-man .skill-category {
            background: 
                rgba(220, 20, 60, 0.1),
                radial-gradient(circle at top left, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at bottom right, rgba(255, 107, 0, 0.1) 0%, transparent 50%);
            border: 2px solid rgba(255, 215, 0, 0.4);
            padding: 2rem;
            border-radius: 15px;
            margin-bottom: 2rem;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 0 30px rgba(255, 215, 0, 0.1),
                0 0 50px rgba(255, 215, 0, 0.1);
            position: relative;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }

        .theme-iron-man .skill-category::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #ffd700, #ff6b00, #dc143c, #ffd700);
            border-radius: 15px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .theme-iron-man .skill-category:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.5),
                inset 0 0 40px rgba(255, 215, 0, 0.2),
                0 0 60px rgba(255, 215, 0, 0.2);
        }

        .theme-iron-man .skill-category:hover::before {
            opacity: 0.3;
        }

        .theme-iron-man .skill-item span {
            color: #ffffff;
            text-shadow: 1px 1px 2px #000000;
            background: 
                rgba(0, 0, 0, 0.7),
                linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(220, 20, 60, 0.1));
            padding: 0.6rem 1rem;
            border-radius: 8px;
            display: inline-block;
            margin: 0.3rem;
            border: 1px solid rgba(255, 215, 0, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .theme-iron-man .skill-item span::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
            transition: left 0.5s ease;
        }

        .theme-iron-man .skill-item span:hover {
            background: 
                rgba(255, 215, 0, 0.2),
                linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 107, 0, 0.2));
            border-color: #ffd700;
            box-shadow: 
                0 0 15px rgba(255, 215, 0, 0.4),
                inset 0 0 10px rgba(255, 215, 0, 0.1);
            transform: translateY(-2px) scale(1.05);
            text-shadow: 
                1px 1px 2px #000000,
                0 0 8px #ffd700;
        }

        .theme-iron-man .skill-item span:hover::before {
            left: 100%;
        }

        /* Iron Man - Floating Particles */
        .theme-iron-man body::after {
            content: '⚡ ◆ ⬢ ⚡ ◆ ⬢ ⚡ ◆ ⬢ ⚡';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 12px;
            color: rgba(255, 215, 0, 0.3);
            pointer-events: none;
            z-index: -1;
            animation: ironManFloatParticles 20s linear infinite;
            white-space: nowrap;
            overflow: hidden;
        }

        @keyframes ironManFloatParticles {
            0% { transform: translateY(100vh) translateX(-50px); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
        }

        /* Iron Man - Experience Section */
        .theme-iron-man .timeline-item {
            background: 
                rgba(0, 0, 0, 0.85),
                radial-gradient(circle at top right, rgba(255, 215, 0, 0.1) 0%, transparent 60%),
                radial-gradient(circle at bottom left, rgba(220, 20, 60, 0.1) 0%, transparent 60%);
            border: 2px solid rgba(255, 215, 0, 0.5);
            padding: 2.5rem;
            margin-bottom: 2rem;
            border-radius: 15px;
            backdrop-filter: blur(15px);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 40px rgba(255, 215, 0, 0.15),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .theme-iron-man .timeline-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #ffd700, #dc143c, #ff6b00, #ffd700);
            background-size: 200% 100%;
            animation: ironManPulseFlow 4s ease-in-out infinite;
        }

        .theme-iron-man .timeline-item::after {
            content: '⚡';
            position: absolute;
            top: 15px;
            right: 15px;
            color: #ffd700;
            font-size: 14px;
            text-shadow: 0 0 10px #ffd700;
            animation: ironManReactorSpin 3s linear infinite;
        }

        .theme-iron-man .timeline-item:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 
                0 12px 48px rgba(0, 0, 0, 0.5),
                0 0 60px rgba(255, 215, 0, 0.25),
                inset 0 1px 0 rgba(255, 215, 0, 0.3);
        }

        @keyframes ironManPulseFlow {
            0% { 
                background-position: 0% 50%; 
                opacity: 0.6; 
            }
            50% { 
                background-position: 100% 50%; 
                opacity: 1; 
            }
            100% { 
                background-position: 0% 50%; 
                opacity: 0.6; 
            }
        }

        @keyframes ironManReactorSpin {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.2); }
            100% { transform: rotate(360deg) scale(1); }
        }

        /* Iron Man Mobile Responsive Improvements */
        @media (max-width: 768px) {
            .theme-iron-man .hero-title {
                font-size: 2.5rem;
                line-height: 1.1;
                margin-bottom: 1rem;
            }
            
            .theme-iron-man .hero-subtitle {
                font-size: 1.3rem;
                line-height: 1.2;
                margin-bottom: 1rem;
            }
            
            .theme-iron-man .hero-description {
                font-size: 1rem;
                padding: 1.2rem;
                margin-bottom: 1.5rem;
            }
            
            .theme-iron-man .section-title {
                font-size: 2rem;
                line-height: 1.1;
                margin-bottom: 1.5rem;
            }
            
            .theme-iron-man .section-subtitle {
                font-size: 1rem;
                line-height: 1.4;
                margin-bottom: 2rem;
            }
            
            .theme-iron-man .about-text {
                font-size: 0.95rem;
                padding: 1.2rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-iron-man .skill-category {
                padding: 1.5rem;
                margin-bottom: 1.5rem;
            }
            
            .theme-iron-man .timeline-item {
                padding: 1.5rem;
                margin-bottom: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .theme-iron-man .hero-title {
                font-size: 2rem;
                line-height: 1.1;
                margin-bottom: 0.8rem;
            }
            
            .theme-iron-man .hero-subtitle {
                font-size: 1.1rem;
                line-height: 1.2;
                margin-bottom: 0.8rem;
            }
            
            .theme-iron-man .hero-description {
                font-size: 0.9rem;
                padding: 1rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-iron-man .section-title {
                font-size: 1.8rem;
                line-height: 1.1;
                margin-bottom: 1.2rem;
            }
            
            .theme-iron-man .section-subtitle {
                font-size: 0.9rem;
                line-height: 1.3;
                margin-bottom: 1.5rem;
            }
            
            .theme-iron-man .about-text {
                font-size: 0.9rem;
                padding: 1rem;
                margin-bottom: 1rem;
            }
            
            .theme-iron-man .skill-category {
                padding: 1.2rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-iron-man .timeline-item {
                padding: 1.2rem;
                margin-bottom: 1.2rem;
            }
            
            .theme-iron-man .btn-primary,
            .theme-iron-man .btn-secondary {
                font-size: 0.9rem;
                padding: 0.8rem 1.5rem;
                margin: 0.3rem;
            }
        }

        /* Squid Game Theme */
        .theme-squid-game {
            --primary-color: #00a86b;
            --primary-dark: #008b5a;
            --secondary-color: #ff1744;
            --accent-color: #ffeb3b;
            --text-primary: #2e2e2e;
            --text-secondary: #424242;
            --text-light: #616161;
            --bg-primary: #f5f5f5;
            --bg-secondary: #ffffff;
            --bg-gradient: linear-gradient(135deg, #00a86b 0%, #ff1744 100%);
            --bg-hero: linear-gradient(-45deg, #00a86b, #ff1744, #ffeb3b, #2196f3);
        }

        .theme-squid-game body {
            background: #f5f5f5;
            color: #2e2e2e;
            font-family: 'Arial Black', Arial, sans-serif;
        }

        .theme-squid-game .header {
            background: linear-gradient(-45deg, #00a86b, #ff1744, #ffeb3b, #2196f3);
        }

        .theme-squid-game .hero-title {
            color: #ffffff;
            text-shadow: 3px 3px 0px #000000, 0 0 15px #000000;
            font-weight: 900;
            -webkit-text-stroke: 2px #000000;
            background: rgba(0, 0, 0, 0.7);
            padding: 1rem 2rem;
            border-radius: 8px;
            display: inline-block;
            margin-bottom: 1.5rem;
        }

        .theme-squid-game .hero-subtitle {
            color: #ffffff !important;
            background: #ff1744 !important;
            font-weight: 900 !important;
            text-shadow: 3px 3px 0px #000000, 0 0 8px #000000 !important;
            padding: 0.8rem 1.5rem !important;
            border-radius: 6px !important;
            border: 3px solid #000000 !important;
            display: inline-block !important;
            margin-bottom: 1.5rem !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
            position: relative !important;
            z-index: 10 !important;
        }

        /* Additional specificity for paragraph element */
        .theme-squid-game p.hero-subtitle {
            color: #ffffff !important;
            background: #ff1744 !important;
            font-weight: 900 !important;
            text-shadow: 3px 3px 0px #000000, 0 0 8px #000000 !important;
            padding: 0.8rem 1.5rem !important;
            border-radius: 6px !important;
            border: 3px solid #000000 !important;
            display: inline-block !important;
            margin-bottom: 1.5rem !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
            position: relative !important;
            z-index: 10 !important;
        }

        /* Override any conflicting styles for squid game hero subtitle */
        body.theme-squid-game .hero-subtitle,
        html.theme-squid-game .hero-subtitle,
        .theme-squid-game .hero-content .hero-subtitle {
            color: #ffffff !important;
            background-color: #ff1744 !important;
            background: #ff1744 !important;
            font-weight: 900 !important;
            text-shadow: 3px 3px 0px #000000, 0 0 8px #000000 !important;
            padding: 0.8rem 1.5rem !important;
            border-radius: 6px !important;
            border: 3px solid #000000 !important;
            display: inline-block !important;
            margin-bottom: 1.5rem !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
            position: relative !important;
            z-index: 10 !important;
        }

        .theme-squid-game .btn-primary {
            background: linear-gradient(135deg, #00a86b, #008b5a);
            border: 3px solid #000000;
            color: #ffffff;
            font-weight: 900;
            text-shadow: 1px 1px 0px #000000;
        }

        .theme-squid-game .btn-secondary {
            background: #ff1744;
            border: 3px solid #000000;
            color: #ffffff;
            font-weight: 900;
            text-shadow: 1px 1px 0px #000000;
        }

        .theme-squid-game .section {
            background: #ffffff;
            border: 3px solid #000000;
            margin: 10px;
            border-radius: 0;
        }

        .theme-squid-game .section-title {
            color: #ff1744;
            text-shadow: 2px 2px 0px #000000;
            -webkit-text-stroke: 1px #000000;
        }

        .theme-squid-game .section-subtitle {
            color: #2e2e2e;
            font-weight: 900;
            text-shadow: 1px 1px 0px #ffffff;
        }

        .theme-squid-game .about-text {
            color: #2e2e2e;
            font-weight: 700;
            text-shadow: 1px 1px 0px #ffffff;
        }

        .theme-squid-game p,
        .theme-squid-game .timeline-description,
        .theme-squid-game .timeline-company,
        .theme-squid-game .timeline-title {
            color: #000000 !important;
            font-weight: 700;
            text-shadow: 2px 2px 0px #ffffff, 0 0 5px #ffffff !important;
        }

        .theme-squid-game .timeline-company {
            color: #ffffff !important;
            background: #ff1744 !important;
            font-weight: 900 !important;
            text-shadow: 2px 2px 0px #000000, 0 0 5px #000000 !important;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            border: 2px solid #000000;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .theme-squid-game .timeline-description li {
            color: #000000 !important;
            font-weight: 600 !important;
            text-shadow: 2px 2px 0px #ffffff, 0 0 5px #ffffff !important;
            background: rgba(255, 255, 255, 0.95) !important;
            padding: 0.5rem !important;
            border-radius: 4px !important;
            border: 1px solid #000000 !important;
            margin-bottom: 0.5rem !important;
            line-height: 1.6;
        }

        .theme-squid-game .timeline-title {
            color: #ffffff !important;
            background: #00a86b !important;
            font-weight: 900 !important;
            text-shadow: 2px 2px 0px #000000, 0 0 5px #000000 !important;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            border: 2px solid #000000;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            display: inline-block;
        }

        .theme-squid-game .timeline-year {
            color: #ffffff;
            background: #ff1744;
            border: 2px solid #000000;
            font-weight: 900;
            text-shadow: 1px 1px 0px #000000;
        }

        .theme-squid-game .stat-label {
            color: #2e2e2e;
            font-weight: 900;
            text-shadow: 1px 1px 0px #ffffff;
        }

        .theme-squid-game .stat-number {
            color: #ff1744;
            font-weight: 900;
            text-shadow: 2px 2px 0px #000000;
            -webkit-text-stroke: 1px #000000;
        }

        /* Squid Game - Skills Section */
        .theme-squid-game .skills {
            background: #f5f5f5;
            border: 5px solid #000000;
        }

        .theme-squid-game .skill-category h3 {
            color: #00a86b;
            font-weight: 900;
            text-shadow: 2px 2px 0px #000000;
            -webkit-text-stroke: 1px #000000;
        }

        .theme-squid-game .skill-item span {
            color: #2e2e2e;
            font-weight: 800;
            text-shadow: 1px 1px 0px #ffffff;
        }

        /* Squid Game - Experience Section */
        .theme-squid-game .timeline-item {
            background: #ffffff;
            border: 3px solid #000000;
            border-radius: 0;
        }

        /* Additional Squid Game Timeline Visibility Fixes */
        .theme-squid-game .timeline-content {
            background: #ffffff !important;
            border: 2px solid #000000 !important;
            padding: 1.5rem !important;
        }

        .theme-squid-game .timeline-content h3,
        .theme-squid-game .timeline-content .timeline-title {
            color: #ffffff !important;
            background: #00a86b !important;
            font-weight: 900 !important;
            text-shadow: 2px 2px 0px #000000, 0 0 8px #000000 !important;
            font-size: 1.5rem !important;
            margin-bottom: 1rem !important;
            border: 2px solid #000000 !important;
            padding: 0.5rem 1rem !important;
            border-radius: 4px !important;
            display: inline-block !important;
        }

        .theme-squid-game .timeline-content p,
        .theme-squid-game .timeline-content .timeline-company {
            color: #ffffff !important;
            background: #ff1744 !important;
            font-weight: 900 !important;
            text-shadow: 2px 2px 0px #000000, 0 0 8px #000000 !important;
            padding: 0.5rem 1rem !important;
            border-radius: 4px !important;
            border: 2px solid #000000 !important;
            display: inline-block !important;
            margin-bottom: 1rem !important;
        }

        /* Additional specific overrides for Squid Game timeline elements */
        .theme-squid-game .timeline-item .timeline-company,
        .theme-squid-game .timeline-item p.timeline-company {
            color: #ffffff !important;
            background-color: #ff1744 !important;
            background: #ff1744 !important;
            font-weight: 900 !important;
            text-shadow: 3px 3px 0px #000000, 0 0 10px #000000 !important;
            padding: 0.5rem 1rem !important;
            border-radius: 4px !important;
            border: 3px solid #000000 !important;
            display: inline-block !important;
            margin-bottom: 1rem !important;
            position: relative !important;
            z-index: 5 !important;
        }

        .theme-squid-game .timeline-item .timeline-title,
        .theme-squid-game .timeline-item h3.timeline-title {
            color: #ffffff !important;
            background-color: #00a86b !important;
            background: #00a86b !important;
            font-weight: 900 !important;
            text-shadow: 1px 1px 0px #000000, 0 0 1px #000000 !important;
            font-size: 1.5rem !important;
            margin-bottom: 1rem !important;
            border: 3px solid #000000 !important;
            padding: 0.5rem 1rem !important;
            border-radius: 4px !important;
            display: inline-block !important;
            position: relative !important;
            z-index: 5 !important;
        }

        .theme-squid-game .hero-description {
            color: #2e2e2e;
            font-weight: 700;
            text-shadow: 2px 2px 0px #ffffff;
            background: rgba(255, 255, 255, 0.9);
            padding: 10px;
            border-radius: 0;
            border: 2px solid #000000;
        }

        /* Additional Universal Theme Fixes */
        .theme-money-heist .stats-container {
            background: rgba(10, 10, 10, 0.9);
            border: 2px solid rgba(255, 215, 0, 0.5);
        }

        .theme-money-heist .about-intro p {
            color: #ffffff;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        }

        .theme-squid-game .stats-container {
            background: #ffffff;
            border: 4px solid #000000;
            border-radius: 0;
        }

        .theme-squid-game .about-intro p {
            color: #2e2e2e;
            font-weight: 700;
            text-shadow: 1px 1px 0px #ffffff;
        }

        /* Fix for floating elements text */
        .theme-money-heist .tech-label,
        .theme-money-heist .element-label {
            color: #ffd700;
            text-shadow: 0 0 5px #000000;
        }

        .theme-squid-game .tech-label,
        .theme-squid-game .element-label {
            color: #ffffff;
            font-weight: 900;
            text-shadow: 2px 2px 0px #000000;
        }

        /* Theme fixes for Contact Section */
        .theme-money-heist .contact {
            background: #0a0a0a;
        }

        .theme-money-heist .contact .section-title {
            color: #ffd700;
            text-shadow: 0 0 15px #dc143c;
        }

        .theme-money-heist .contact .section-subtitle {
            color: #e5e5e5;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
        }

        .theme-squid-game .contact {
            background: #f5f5f5;
            border: 5px solid #000000;
        }

        .theme-squid-game .contact .section-title {
            color: #ff1744;
            font-weight: 900;
            text-shadow: 3px 3px 0px #000000;
            -webkit-text-stroke: 2px #000000;
        }

        .theme-squid-game .contact .section-subtitle {
            color: #2e2e2e;
            font-weight: 800;
            text-shadow: 2px 2px 0px #ffffff;
        }

        /* Squid Game Contact Cards Styling */
        .theme-squid-game .contact-card {
            background: #ffffff;
            border: 5px solid #000000;
            border-radius: 0;
            box-shadow: 10px 10px 0px #ff1744;
        }

        .theme-squid-game .contact-card-title {
            color: #000000;
            font-weight: 900;
            text-shadow: 2px 2px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff;
            background: #ffeb3b;
            border: 3px solid #000000;
            padding: 15px;
            margin: -5px -5px 20px -5px;
        }

        .theme-squid-game .contact-item {
            background: #ffffff;
            border: 3px solid #000000;
            color: #000000;
            font-weight: 800;
            text-shadow: 1px 1px 0px #ffffff;
            border-radius: 0;
            box-shadow: 4px 4px 0px #00a86b;
        }

        .theme-squid-game .contact-item:hover {
            background: #00a86b;
            color: #ffffff;
            text-shadow: 2px 2px 0px #000000;
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0px #000000;
        }

        .theme-squid-game .social-link {
            background: #ffffff;
            border: 3px solid #000000;
            color: #000000;
            font-weight: 800;
            text-shadow: 1px 1px 0px #ffffff;
            border-radius: 0;
            box-shadow: 4px 4px 0px #ff1744;
            padding: 12px;
            margin: 5px 0;
        }

        .theme-squid-game .social-link:hover {
            background: #ff1744;
            color: #ffffff;
            text-shadow: 2px 2px 0px #000000;
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0px #000000;
        }

        .theme-squid-game .qr-label {
            color: #000000;
            font-weight: 900;
            text-shadow: 2px 2px 0px #ffffff;
            background: #ffffff;
            border: 3px solid #000000;
            padding: 10px;
            border-radius: 0;
        }

        /* Black & White Theme */
        .theme-black-white {
            --primary-color: #000000;
            --primary-dark: #333333;
            --secondary-color: #666666;
            --accent-color: #ffffff;
            --text-primary: #000000;
            --text-secondary: #333333;
            --text-light: #666666;
            --bg-primary: #ffffff;
            --bg-secondary: #f8f8f8;
            --bg-gradient: linear-gradient(135deg, #000000 0%, #333333 100%);
            --bg-hero: linear-gradient(-45deg, #ffffff, #f0f0f0, #e0e0e0, #d0d0d0);
        }

        .theme-black-white body {
            background: #ffffff;
            color: #000000;
            font-family: 'Georgia', 'Times New Roman', serif;
            font-weight: 400;
        }

        .theme-black-white .header {
            background: linear-gradient(-45deg, #ffffff, #f0f0f0, #e0e0e0, #d0d0d0);
        }

        .theme-black-white .hero-title {
            color: #000000;
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
            font-weight: 700;
            font-family: 'Georgia', serif;
        }

        .theme-black-white .hero-subtitle {
            color: #333333;
            font-weight: 600;
            font-style: italic;
        }

        .theme-black-white .hero-description {
            color: #000000;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border: 2px solid #000000;
            border-radius: 0;
            font-style: italic;
        }

        .theme-black-white .btn-primary {
            background: #000000;
            border: 2px solid #000000;
            color: #ffffff;
            font-weight: 600;
            border-radius: 0;
            font-family: 'Georgia', serif;
        }

        .theme-black-white .btn-primary:hover {
            background: #ffffff;
            color: #000000;
            border: 2px solid #000000;
        }

        .theme-black-white .btn-secondary {
            background: #ffffff;
            border: 2px solid #000000;
            color: #000000;
            font-weight: 600;
            border-radius: 0;
            font-family: 'Georgia', serif;
        }

        .theme-black-white .btn-secondary:hover {
            background: #000000;
            color: #ffffff;
        }

        .theme-black-white .section {
            background: #ffffff;
            color: #000000;
            border-top: 1px solid #e0e0e0;
        }

        .theme-black-white .section-title {
            color: #000000;
            font-family: 'Georgia', serif;
            font-weight: 700;
            border-bottom: 3px solid #000000;
            padding-bottom: 10px;
        }

        .theme-black-white .section-subtitle {
            color: #333333;
            font-style: italic;
        }

        .theme-black-white .about-text {
            color: #000000;
            line-height: 1.8;
            font-size: 1.1rem;
        }

        .theme-black-white .stats-container {
            background: #f8f8f8;
            border: 2px solid #000000;
            border-radius: 0;
        }

        .theme-black-white .stat-item span {
            color: #000000;
        }

        .theme-black-white .stat-number {
            color: #000000;
            font-weight: 700;
        }

        .theme-black-white .timeline-item {
            background: #f8f8f8;
            border: 1px solid #000000;
            border-radius: 0;
        }

        .theme-black-white .timeline-year {
            color: #ffffff;
            background: #000000;
            border-radius: 0;
        }

        .theme-black-white .timeline-title {
            color: #000000;
            font-weight: 700;
        }

        .theme-black-white .timeline-company {
            color: #333333;
            font-style: italic;
        }

        .theme-black-white .contact-card {
            background: #ffffff;
            border: 2px solid #000000;
            border-radius: 0;
            box-shadow: 4px 4px 0px #000000;
        }

        .theme-black-white .contact-card-title {
            color: #ffffff;
            background: #000000;
            padding: 15px;
            margin: -2px -2px 20px -2px;
            font-weight: 700;
        }

        .theme-black-white .contact-item {
            background: #f8f8f8;
            border: 1px solid #000000;
            color: #000000;
            border-radius: 0;
        }

        .theme-black-white .contact-item:hover {
            background: #000000;
            color: #ffffff;
        }

        .theme-black-white .social-link {
            background: #f8f8f8;
            border: 1px solid #000000;
            color: #000000;
            border-radius: 0;
        }

        .theme-black-white .social-link:hover {
            background: #000000;
            color: #ffffff;
        }

        .theme-black-white .footer-content {
            background: #000000;
            border: none;
        }

        .theme-black-white .footer-text {
            color: #ffffff;
        }

        .theme-black-white .footer-text p {
            color: #ffffff;
        }

        .theme-black-white .footer-link {
            color: #ffffff;
            border: 1px solid #ffffff;
            background: transparent;
        }

        .theme-black-white .footer-link:hover {
            color: #000000;
            background: #ffffff;
        }

        .theme-black-white .qr-code {
            border: 3px solid #000000;
            border-radius: 0;
            background: #ffffff;
        }

        .theme-black-white .qr-label {
            color: #000000;
            background: #f8f8f8;
            border: 1px solid #000000;
            border-radius: 0;
        }

        /* Universal text contrast improvements */
        .theme-money-heist * {
            --text-primary: #ffffff;
            --text-secondary: #e5e5e5;
            --text-light: #cccccc;
        }

        /* Footer fixes for Money Heist theme */
        .theme-money-heist .tech-footer {
            background: linear-gradient(135deg, #dc143c 0%, #000000 50%, #8b0000 100%);
        }

        .theme-money-heist .footer-content {
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid rgba(255, 215, 0, 0.5);
        }

        .theme-money-heist .footer-text {
            color: #ffffff;
            text-shadow: 0 0 5px rgba(220, 20, 60, 0.8);
        }

        .theme-money-heist .footer-text p {
            color: #ffffff;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        }

        .theme-money-heist .footer-link {
            color: #ffd700;
            text-shadow: 0 0 5px rgba(220, 20, 60, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.3);
            padding: 5px 10px;
            background: rgba(220, 20, 60, 0.1);
        }

        .theme-money-heist .footer-link:hover {
            color: #dc143c;
            background: #ffd700;
            text-shadow: 0 0 5px #000000;
        }

        /* QR Code styling for Money Heist theme */
        .theme-money-heist .qr-code {
            border: 3px solid #ffd700;
            background: #ffffff;
            box-shadow: 0 0 30px rgba(220, 20, 60, 0.5);
        }

        .theme-money-heist .qr-title {
            color: #ffd700;
            text-shadow: 0 0 10px #dc143c;
        }

        /* Modal fixes for Money Heist theme */
        .theme-money-heist .modal-content {
            background: #0a0a0a;
            border: 2px solid #ffd700;
            color: #ffffff;
        }

        .theme-money-heist .modal-content h2 {
            color: #ffd700;
            text-shadow: 0 0 10px #dc143c;
        }

        .theme-money-heist .modal-content p {
            color: #ffffff;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        }

        .theme-squid-game * {
            --text-primary: #2e2e2e;
            --text-secondary: #424242;
            --text-light: #616161;
        }

        /* Footer fixes for Squid Game theme */
        .theme-squid-game .tech-footer {
            background: linear-gradient(135deg, #00a86b 0%, #ff1744 50%, #ffeb3b 100%);
            border: 5px solid #000000;
        }

        .theme-squid-game .footer-content {
            background: rgba(255, 255, 255, 0.98);
            border: 5px solid #000000;
            margin: 15px;
            box-shadow: 10px 10px 0px #ff1744;
            padding: 20px;
        }

        .theme-squid-game .footer-text {
            color: #000000;
            font-weight: 900;
            text-shadow: 2px 2px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff;
            background: rgba(255, 255, 255, 0.95);
            padding: 15px;
            border: 3px solid #000000;
            border-radius: 0;
        }

        .theme-squid-game .footer-text p {
            color: #000000;
            font-weight: 900;
            text-shadow: 2px 2px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff;
            font-size: 18px;
            background: #ffffff;
            padding: 10px;
            border: 2px solid #000000;
            margin: 5px 0;
        }

        .theme-squid-game .footer-link {
            color: #ffffff;
            font-weight: 900;
            text-shadow: 2px 2px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000;
            border: 4px solid #000000;
            padding: 10px 15px;
            background: #ff1744;
            text-decoration: none;
            border-radius: 0;
            margin: 5px;
            display: inline-block;
            box-shadow: 4px 4px 0px #000000;
        }

        .theme-squid-game .footer-link:hover {
            color: #000000;
            background: #ffeb3b;
            text-shadow: 2px 2px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff;
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0px #000000;
        }

        /* Footer links container for Squid Game theme */
        .theme-squid-game .footer-links {
            background: rgba(255, 255, 255, 0.9);
            border: 3px solid #000000;
            padding: 15px;
            margin-top: 15px;
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        /* QR Code styling for Squid Game theme */
        .theme-squid-game .qr-code {
            border: 4px solid #000000;
            border-radius: 0;
            background: #ffffff;
            box-shadow: 8px 8px 0px #ff1744;
        }

        .theme-squid-game .qr-title {
            color: #2e2e2e;
            font-weight: 900;
            text-shadow: 2px 2px 0px #ffffff;
            background: #ffeb3b;
            border: 3px solid #000000;
            padding: 10px;
            border-radius: 0;
        }

        /* Modal fixes for Squid Game theme */
        .theme-squid-game .modal-content {
            background: #ffffff;
            border: 5px solid #000000;
            color: #2e2e2e;
            border-radius: 0;
            box-shadow: 10px 10px 0px #ff1744;
        }

        .theme-squid-game .modal-content h2 {
            color: #ff1744;
            font-weight: 900;
            text-shadow: 2px 2px 0px #000000;
            -webkit-text-stroke: 1px #000000;
        }

        .theme-squid-game .modal-content p {
            color: #2e2e2e;
            font-weight: 700;
            text-shadow: 1px 1px 0px #ffffff;
        }

        /* Additional Money Heist Theme Effects */
        .theme-money-heist .hero-content {
            background: rgba(220, 20, 60, 0.1);
            border: 2px solid rgba(255, 215, 0, 0.3);
            box-shadow: 0 0 50px rgba(220, 20, 60, 0.3);
        }

        .theme-money-heist .about-visual::before {
            content: "💰";
            position: absolute;
            top: -20px;
            right: -20px;
            font-size: 60px;
            opacity: 0.3;
            animation: moneyFloat 3s ease-in-out infinite;
        }

        .theme-money-heist .floating-tech-icons .tech-icon-item {
            background: rgba(220, 20, 60, 0.2);
            border: 1px solid rgba(255, 215, 0, 0.5);
        }

        /* Additional Squid Game Theme Effects */
        .theme-squid-game .hero-content {
            background: rgba(255, 255, 255, 0.9);
            border: 5px solid #000000;
            border-radius: 0;
            box-shadow: 10px 10px 0px #ff1744;
        }

        .theme-squid-game .about-visual::before {
            content: "🔺🔴⭕";
            position: absolute;
            top: -30px;
            left: -30px;
            font-size: 40px;
            opacity: 0.5;
            animation: squidGameShapes 2s ease-in-out infinite;
        }

        .theme-squid-game .floating-tech-icons .tech-icon-item {
            background: rgba(0, 168, 107, 0.8);
            border: 3px solid #000000;
            border-radius: 0;
            color: #ffffff;
            font-weight: 900;
        }

        @keyframes moneyFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(15deg); }
        }

        @keyframes squidGameShapes {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.1) rotate(180deg); }
        }

        /* Responsive Design for Theme Switcher */
        @media (max-width: 768px) {
            .theme-switcher {
                right: 10px;
                gap: 6px;
                padding: 8px 5px;
                top: 20px;
                transform: none;
                background: rgba(0, 0, 0, 0.85);
                border: 2px solid rgba(255, 255, 255, 0.7);
                box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.2);
            }
            
            .theme-button {
                min-width: 45px;
                padding: 8px 6px;
                background: rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.5);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            }
            
            .theme-icon {
                font-size: 16px;
                margin-bottom: 3px;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
            }
            
            .theme-name {
                font-size: 7px;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7);
            }

            .theme-switcher:hover {
                right: 5px;
                background: rgba(0, 0, 0, 0.9);
                border: 2px solid rgba(255, 255, 255, 0.8);
            }
            
            /* Ensure theme and language switchers don't overlap */
            .language-switcher {
                left: 10px;
                top: 80px;
            }
        }

        @media (max-width: 480px) {
            .theme-switcher {
                right: 5px;
                gap: 5px;
                padding: 6px 4px;
                top: 15px;
                transform: none;
                background: rgba(0, 0, 0, 0.9);
                border: 2px solid rgba(255, 255, 255, 0.8);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
            }
            
            .theme-button {
                min-width: 40px;
                padding: 6px 4px;
                background: rgba(255, 255, 255, 0.25);
                border: 1px solid rgba(255, 255, 255, 0.6);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
            }
            
            .theme-icon {
                font-size: 14px;
                margin-bottom: 2px;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
            }
            
            .theme-name {
                font-size: 6px;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.8);
            }

            .theme-switcher:hover {
                right: 0px;
                background: rgba(0, 0, 0, 0.95);
            }
            
            /* Better mobile positioning */
            .language-switcher {
                left: 5px;
                top: 75px;
            }
        }

        /* Mobile layout improvements for small screens */
        @media (max-width: 360px) {
            .theme-switcher {
                flex-direction: row;
                gap: 3px;
                padding: 4px;
                border-radius: 12px;
            }
            
            .theme-button {
                min-width: 35px;
                padding: 4px 2px;
                border-radius: 8px;
            }
            
            .theme-icon {
                font-size: 12px;
                margin-bottom: 1px;
            }
            
            .theme-name {
                font-size: 5px;
            }
            
            .language-switcher {
                left: 5px;
                top: 65px;
            }
            
            .language-toggle {
                padding: 6px 8px;
                min-width: 80px;
                border-radius: 20px;
            }
            
            .language-icon {
                font-size: 14px;
            }
            
            .language-text {
                font-size: 10px;
            }
        }

        /* Language Switcher Styles */
        .language-switcher {
            position: fixed;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            z-index: 1000;
        }

        .language-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            min-width: 140px;
            justify-content: center;
        }

        .language-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
        }

        .language-icon {
            font-size: 20px;
            animation: rotate 10s linear infinite;
        }

        .language-text {
            font-size: 14px;
            font-weight: 600;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .language-dropdown {
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 10px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            opacity: 0;
            visibility: hidden;
            transform: translateX(-20px);
            transition: all 0.3s ease;
            min-width: 200px;
            max-height: 400px;
            overflow-y: auto;
            z-index: 1001;
        }

        .language-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        .language-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: #333;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .language-option:last-child {
            border-bottom: none;
        }

        .language-option:hover {
            background: rgba(99, 102, 241, 0.1);
            color: #6366f1;
            transform: translateX(5px);
        }

        .language-option .flag {
            font-size: 18px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        .language-option .lang-name {
            font-weight: 500;
            font-size: 14px;
        }

        /* Language Switcher Mobile Responsive */
        @media (max-width: 768px) {
            .language-switcher {
                left: 10px;
                top: 20px;
                transform: none;
            }
            
            .language-toggle {
                padding: 10px 12px;
                min-width: 120px;
                font-size: 13px;
            }
            
            .language-icon {
                font-size: 18px;
            }
            
            .language-text {
                font-size: 12px;
            }
            
            .language-dropdown {
                position: fixed;
                top: 70px;
                left: 10px;
                right: 10px;
                margin-left: 0;
                min-width: auto;
                max-height: 300px;
            }
            
            .language-option {
                padding: 14px 16px;
            }
            
            .language-option .flag {
                font-size: 16px;
            }
            
            .language-option .lang-name {
                font-size: 13px;
            }
        }

        @media (max-width: 480px) {
            .language-switcher {
                left: 5px;
                top: 15px;
            }
            
            .language-toggle {
                padding: 8px 10px;
                min-width: 100px;
                border-radius: 25px;
            }
            
            .language-icon {
                font-size: 16px;
            }
            
            .language-text {
                font-size: 11px;
            }
            
            .language-dropdown {
                top: 60px;
                left: 5px;
                right: 5px;
                max-height: 250px;
            }
            
            .language-option {
                padding: 12px 14px;
            }
            
            .language-option .flag {
                font-size: 14px;
            }
            
            .language-option .lang-name {
                font-size: 12px;
            }
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.7;
            color: var(--text-primary);
            background-color: var(--bg-primary);
            overflow-x: hidden;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* Animated Background */
        .animated-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(-45deg, #667eea, #764ba2, #6366f1, #06b6d4);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            z-index: -1;
        }

        /* Theme-specific animated backgrounds */
        .theme-money-heist .animated-bg {
            background: linear-gradient(-45deg, #dc143c, #000000, #8b0000, #2c0000, #ffd700);
            animation: moneyHeistShift 12s ease infinite;
        }

        .theme-squid-game .animated-bg {
            background: linear-gradient(-45deg, #00a86b, #ff1744, #ffeb3b, #2196f3, #ffffff);
            animation: squidGameShift 10s ease infinite;
        }

        .theme-black-white .animated-bg {
            background: linear-gradient(-45deg, #ffffff, #f0f0f0, #e0e0e0, #d0d0d0, #c0c0c0);
            animation: blackWhiteShift 20s ease infinite;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes moneyHeistShift {
            0% { 
                background-position: 0% 50%; 
                filter: contrast(1.2) brightness(0.9);
            }
            25% {
                background-position: 100% 30%;
                filter: contrast(1.4) brightness(0.8);
            }
            50% { 
                background-position: 100% 50%; 
                filter: contrast(1.6) brightness(0.7);
            }
            75% {
                background-position: 0% 70%;
                filter: contrast(1.4) brightness(0.8);
            }
            100% { 
                background-position: 0% 50%; 
                filter: contrast(1.2) brightness(0.9);
            }
        }

        @keyframes squidGameShift {
            0% { 
                background-position: 0% 50%; 
                filter: saturate(1.5) contrast(1.3);
            }
            33% {
                background-position: 100% 30%;
                filter: saturate(1.8) contrast(1.5);
            }
            66% { 
                background-position: 50% 100%; 
                filter: saturate(2) contrast(1.7);
            }
            100% { 
                background-position: 0% 50%; 
                filter: saturate(1.5) contrast(1.3);
            }
        }

        @keyframes blackWhiteShift {
            0% { 
                background-position: 0% 50%; 
                filter: contrast(1.1) brightness(1);
            }
            25% {
                background-position: 100% 30%;
                filter: contrast(1.2) brightness(0.95);
            }
            50% { 
                background-position: 100% 50%; 
                filter: contrast(1.3) brightness(0.9);
            }
            75% {
                background-position: 0% 70%;
                filter: contrast(1.2) brightness(0.95);
            }
            100% { 
                background-position: 0% 50%; 
                filter: contrast(1.1) brightness(1);
            }
        }

        /* Header Section */
        .header {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .floating-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .shape {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 20s infinite linear;
        }

        /* Theme-specific shapes */
        .theme-money-heist .shape {
            background: rgba(220, 20, 60, 0.3);
            border: 2px solid rgba(255, 215, 0, 0.5);
            animation: moneyHeistFloat 15s infinite linear;
        }

        .theme-squid-game .shape {
            background: rgba(0, 168, 107, 0.4);
            border: 3px solid rgba(255, 23, 68, 0.6);
            border-radius: 0;
            animation: squidGameFloat 18s infinite linear;
        }

        .theme-black-white .shape {
            background: rgba(0, 0, 0, 0.1);
            border: 2px solid rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            animation: blackWhiteFloat 25s infinite linear;
        }

        .shape:nth-child(1) { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; }
        .shape:nth-child(2) { width: 60px; height: 60px; top: 60%; left: 80%; animation-delay: -5s; }
        .shape:nth-child(3) { width: 100px; height: 100px; top: 80%; left: 20%; animation-delay: -10s; }
        .shape:nth-child(4) { width: 40px; height: 40px; top: 30%; left: 70%; animation-delay: -15s; }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        @keyframes moneyHeistFloat {
            0% { 
                transform: translateY(0px) rotate(0deg) scale(1); 
                opacity: 0.8;
                background: rgba(220, 20, 60, 0.3);
            }
            50% {
                background: rgba(255, 215, 0, 0.4);
                transform: translateY(-50vh) rotate(180deg) scale(1.2);
            }
            100% { 
                transform: translateY(-100vh) rotate(360deg) scale(0.8); 
                opacity: 0;
                background: rgba(139, 0, 0, 0.2);
            }
        }

        @keyframes squidGameFloat {
            0% { 
                transform: translateY(0px) rotate(0deg) scale(1); 
                opacity: 0.9;
                background: rgba(0, 168, 107, 0.4);
                border-radius: 0;
            }
            25% {
                background: rgba(255, 23, 68, 0.5);
                border-radius: 50%;
                transform: translateY(-25vh) rotate(90deg) scale(1.1);
            }
            50% {
                background: rgba(255, 235, 59, 0.6);
                border-radius: 20%;
                transform: translateY(-50vh) rotate(180deg) scale(1.3);
            }
            75% {
                background: rgba(33, 150, 243, 0.5);
                border-radius: 50%;
                transform: translateY(-75vh) rotate(270deg) scale(1.1);
            }
            100% { 
                transform: translateY(-100vh) rotate(360deg) scale(0.8); 
                opacity: 0;
                background: rgba(0, 168, 107, 0.2);
                border-radius: 0;
            }
        }

        @keyframes blackWhiteFloat {
            0% { 
                transform: translateY(0px) rotate(0deg) scale(1); 
                opacity: 0.6;
                background: rgba(0, 0, 0, 0.1);
            }
            25% {
                background: rgba(0, 0, 0, 0.2);
                transform: translateY(-25vh) rotate(90deg) scale(1.1);
            }
            50% {
                background: rgba(0, 0, 0, 0.15);
                transform: translateY(-50vh) rotate(180deg) scale(1.2);
            }
            75% {
                background: rgba(0, 0, 0, 0.25);
                transform: translateY(-75vh) rotate(270deg) scale(1.1);
            }
            100% { 
                transform: translateY(-100vh) rotate(360deg) scale(0.8); 
                opacity: 0;
                background: rgba(0, 0, 0, 0.05);
            }
        }

        .hero-content {
            position: relative;
            z-index: 20;
            text-align: center;
            color: white;
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 3rem 2rem;
            margin: 3rem auto;
            max-width: 700px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .profile-image-container {
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
        }

        .profile-image {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.3) 0%, rgba(52, 152, 219, 0.2) 100%);
            backdrop-filter: blur(20px);
            border: 4px solid rgba(100, 255, 218, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4.5rem;
            animation: profilePulse 3s ease-in-out infinite;
            box-shadow: 0 0 40px rgba(100, 255, 218, 0.4),
                        0 0 80px rgba(100, 255, 218, 0.2),
                        0 8px 32px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .profile-image::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(100, 255, 218, 0.1), transparent, rgba(52, 152, 219, 0.1), transparent);
            animation: profileShimmer 4s linear infinite;
        }

        .profile-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            position: relative;
            z-index: 2;
        }

        @keyframes profilePulse {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 0 40px rgba(100, 255, 218, 0.4),
                            0 0 80px rgba(100, 255, 218, 0.2),
                            0 8px 32px rgba(0, 0, 0, 0.3);
            }
            50% { 
                transform: scale(1.08); 
                box-shadow: 0 0 60px rgba(100, 255, 218, 0.6),
                            0 0 120px rgba(100, 255, 218, 0.3),
                            0 12px 48px rgba(0, 0, 0, 0.4);
            }
        }

        @keyframes profileShimmer {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 1.5rem;
            letter-spacing: 4px;
            position: relative;
            display: inline-block;
            animation: slideInUp 1s ease-out;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                         0 0 15px rgba(0, 0, 0, 0.6),
                         0 0 25px rgba(255, 255, 255, 0.2);
            font-family: 'Inter', sans-serif;
            text-transform: uppercase;
        }

        .hero-subtitle {
            font-size: 1.6rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            opacity: 0.95;
            animation: slideInUp 1s ease-out 0.2s both;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                         0 0 10px rgba(0, 0, 0, 0.6);
            color: #ffffff;
            letter-spacing: 1px;
            position: relative;
        }

        .hero-subtitle::before {
            content: '◆';
            position: absolute;
            left: -30px;
            top: 50%;
            transform: translateY(-50%);
            color: #64ffda;
            font-size: 1rem;
            animation: pulse 2s ease-in-out infinite;
            text-shadow: 0 0 10px rgba(100, 255, 218, 0.8);
        }

        .hero-subtitle::after {
            content: '◆';
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            color: #3498db;
            font-size: 1rem;
            animation: pulse 2s ease-in-out infinite;
            animation-delay: 1s;
            text-shadow: 0 0 10px rgba(52, 152, 219, 0.8);
        }

        .hero-description {
            font-size: 1rem;
            max-width: 550px;
            margin: 0 auto 2rem;
            opacity: 0.9;
            animation: slideInUp 1s ease-out 0.4s both;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
            line-height: 1.6;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: slideInUp 1s ease-out 0.6s both;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(20px);
        }

        .btn-primary:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        /* Resume Download Button Special Style - Normal Theme */
        .btn[download] {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.8) 0%, rgba(251, 191, 36, 0.7) 100%);
            border: 2px solid rgba(245, 158, 11, 0.6);
            color: white;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .btn[download]::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s ease;
        }

        .btn[download]:hover::before {
            left: 100%;
        }

        .btn[download]:hover {
            background: linear-gradient(135deg, rgba(245, 158, 11, 1) 0%, rgba(251, 191, 36, 0.9) 100%);
            border-color: rgba(245, 158, 11, 0.8);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
        }

        /* Money Heist Theme Resume Button */
        .money-heist .btn[download] {
            background: linear-gradient(135deg, rgba(220, 38, 127, 0.9) 0%, rgba(165, 32, 96, 0.8) 100%);
            border: 2px solid #dc267f;
            color: #fff;
            box-shadow: 0 0 20px rgba(220, 38, 127, 0.3);
            animation: moneyHeistPulse 2s infinite;
        }

        @keyframes moneyHeistPulse {
            0%, 100% { 
                box-shadow: 0 0 20px rgba(220, 38, 127, 0.3), 0 0 40px rgba(220, 38, 127, 0.1);
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 0 30px rgba(220, 38, 127, 0.5), 0 0 60px rgba(220, 38, 127, 0.2);
                transform: scale(1.02);
            }
        }

        .money-heist .btn[download]:hover {
            background: linear-gradient(135deg, rgba(220, 38, 127, 1) 0%, rgba(165, 32, 96, 1) 100%);
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 30px rgba(220, 38, 127, 0.5);
            animation: none;
        }

        /* Squid Game Theme Resume Button */
        .squid-game .btn[download] {
            background: linear-gradient(135deg, rgba(0, 188, 212, 0.9) 0%, rgba(0, 150, 136, 0.8) 100%);
            border: 2px solid #00bcd4;
            color: #fff;
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
            animation: squidGameBlink 3s infinite;
        }

        @keyframes squidGameBlink {
            0%, 90%, 100% { 
                background: linear-gradient(135deg, rgba(0, 188, 212, 0.9) 0%, rgba(0, 150, 136, 0.8) 100%);
                box-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
            }
            45%, 55% { 
                background: linear-gradient(135deg, rgba(244, 67, 54, 0.9) 0%, rgba(183, 28, 28, 0.8) 100%);
                box-shadow: 0 0 25px rgba(244, 67, 54, 0.6);
            }
        }

        .squid-game .btn[download]:hover {
            background: linear-gradient(135deg, rgba(244, 67, 54, 1) 0%, rgba(183, 28, 28, 1) 100%);
            border-color: #f44336;
            transform: translateY(-3px) rotate(1deg);
            box-shadow: 0 10px 25px rgba(244, 67, 54, 0.5);
            animation: none;
        }

        /* Black & White Theme Resume Button */
        .black-white .btn[download] {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(64, 64, 64, 0.8) 100%);
            border: 2px solid #fff;
            color: #fff;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            animation: blackWhiteStrobe 4s infinite;
        }

        @keyframes blackWhiteStrobe {
            0%, 80%, 100% { 
                background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(64, 64, 64, 0.8) 100%);
                color: #fff;
                border-color: #fff;
                box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            }
            85%, 95% { 
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(224, 224, 224, 0.8) 100%);
                color: #000;
                border-color: #000;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            }
        }

        .black-white .btn[download]:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
            color: #000;
            border-color: #000;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
            animation: none;
        }

        /* Modern Section Styles */
        .section {
            padding: 6rem 0;
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: var(--bg-gradient);
            border-radius: 2px;
        }

        .section-subtitle {
            font-size: 1.2rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Hero Infographics */
        .hero-infographics {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 1;
            opacity: 0.2;
            overflow: hidden;
        }

        .hero-scene {
            position: relative;
            height: 100%;
            max-width: 1280px;
            margin: 0 auto;
        }

        /* Floating Tech Icons */
        .floating-tech-icons {
            position: absolute;
            top: 20%;
            left: 5%;
            z-index: 2;
        }

        .tech-icon-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            animation: techFloat 4s ease-in-out infinite;
            animation-delay: var(--delay);
        }

        .tech-icon {
            font-size: 24px;
            filter: drop-shadow(0 0 10px rgba(100, 255, 218, 0.5));
        }

        .tech-label {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
            background: rgba(0, 0, 0, 0.3);
            padding: 4px 8px;
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }

        /* Code Snippets */
        .hero-code-snippets {
            position: absolute;
            top: 15%;
            right: 5%;
        }

        .code-snippet {
            background: rgba(30, 30, 30, 0.9);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
            border: 1px solid rgba(100, 255, 218, 0.3);
            animation: codeFloat 6s ease-in-out infinite;
            min-width: 200px;
        }

        .snippet-1 { animation-delay: 0s; }
        .snippet-2 { animation-delay: 3s; }

        .code-line {
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: #a6e22e;
            line-height: 1.4;
            margin: 2px 0;
        }

        @keyframes codeFloat {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-10px) scale(1.02); }
        }

        /* Statistics Visualization */
        .hero-stats {
            position: absolute;
            bottom: 15%;
            left: 5%;
        }

        .stat-item {
            margin-bottom: 15px;
            animation: statReveal 2s ease-out;
            animation-delay: var(--delay);
        }

        .stat-number {
            font-size: 18px;
            font-weight: bold;
            color: #00d4aa;
            text-shadow: 0 0 10px rgba(0, 212, 170, 0.5);
        }

        .stat-label {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 5px;
        }

        .stat-bar {
            width: 80px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }

        .stat-fill {
            height: 100%;
            background: linear-gradient(90deg, #00d4aa, #3498db);
            border-radius: 2px;
            animation: fillBar 2s ease-out;
            animation-delay: var(--delay);
            width: var(--width);
        }

        @keyframes fillBar {
            0% { width: 0%; }
            100% { width: var(--width); }
        }

        @keyframes statReveal {
            0% { opacity: 0; transform: translateX(-20px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Tech Stack Orbit */
        .tech-orbit {
            position: absolute;
            bottom: 20%;
            right: 8%;
            width: 120px;
            height: 120px;
        }

        .orbit-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            animation: pulse 2s ease-in-out infinite;
        }

        .orbit-item {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .orbit-1 {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            animation: orbit 8s linear infinite;
        }

        .orbit-2 {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            animation: orbit 8s linear infinite;
            animation-delay: -2s;
        }

        .orbit-3 {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            animation: orbit 8s linear infinite;
            animation-delay: -4s;
        }

        .orbit-4 {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            animation: orbit 8s linear infinite;
            animation-delay: -6s;
        }

        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(60px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
        }

        /* Resume Download Infographic */
        .resume-infographic {
            position: absolute;
            top: 30%;
            right: 15%;
            z-index: 3;
            cursor: pointer;
            animation: resumeFloat 4s ease-in-out infinite;
        }

        .resume-container {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 16px;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 200px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .resume-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.6s ease;
        }

        .resume-container:hover::before {
            left: 100%;
        }

        .resume-container:hover {
            transform: translateY(-5px) scale(1.05);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .resume-icon {
            font-size: 2.5rem;
            animation: resumePulse 2s ease-in-out infinite;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
        }

        .resume-text {
            flex: 1;
            color: white;
        }

        .resume-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .resume-subtitle {
            font-size: 0.9rem;
            opacity: 0.9;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .download-indicator {
            font-size: 1.5rem;
            animation: downloadBounce 1.5s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
        }

        .resume-download-link {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
        }

        @keyframes resumeFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(1deg); }
        }

        @keyframes resumePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes downloadBounce {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }

        /* Binary Rain */
        .binary-rain {
            position: absolute;
            top: 0;
            left: 30%;
            right: 30%;
            height: 100%;
            pointer-events: none;
            opacity: 0.1;
        }

        .binary-line {
            position: absolute;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #00d4aa;
            white-space: nowrap;
            animation: binaryDrop 10s linear infinite;
        }

        .binary-line:nth-child(1) { left: 10%; animation-delay: 0s; }
        .binary-line:nth-child(2) { left: 30%; animation-delay: -2s; }
        .binary-line:nth-child(3) { left: 50%; animation-delay: -4s; }
        .binary-line:nth-child(4) { left: 70%; animation-delay: -6s; }

        @keyframes binaryDrop {
            0% { top: -50px; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 100vh; opacity: 0; }
        }

        /* Achievement Particles */
        .achievement-particles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            font-size: 20px;
            animation: particleFloat 12s ease-in-out infinite;
            opacity: 0.7;
        }

        .particle:nth-child(1) { top: 25%; left: 15%; animation-delay: 0s; }
        .particle:nth-child(2) { top: 45%; left: 85%; animation-delay: -2s; }
        .particle:nth-child(3) { top: 65%; left: 10%; animation-delay: -4s; }
        .particle:nth-child(4) { top: 35%; left: 90%; animation-delay: -6s; }
        .particle:nth-child(5) { top: 75%; left: 75%; animation-delay: -8s; }

        @keyframes particleFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
        }

        @keyframes pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.1); }
        }

        /* About Section */
        .about {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            position: relative;
            overflow: hidden;
        }
        
        .about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(6, 182, 212, 0.03) 100%);
            pointer-events: none;
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .about-content {
            position: relative;
        }
        
        .about-intro {
            background: white;
            padding: 2.5rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.8);
        }
        
        .about-intro::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--bg-gradient);
        }
        
        .about-text {
            font-size: 1.1rem;
            line-height: 1.7;
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
        }
        
        .about-text:last-child {
            margin-bottom: 0;
        }
        
        .stats-container {
            background: white;
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .stat-item {
            text-align: center;
            padding: 1.5rem 1rem;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .stat-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-gradient);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .stat-item:hover::before {
            opacity: 0.1;
        }
        
        .stat-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .stat-number {
            display: block;
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }

        .stat-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 1;
        }
        
        .about-visual {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .about-image {
            width: 500px;
            height: 900px;
            background: white;
            border-radius: 5%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-color);
            box-shadow: var(--shadow-xl);
            position: relative;
            overflow: hidden;
            border: 8px solid rgba(255, 255, 255, 0.9);
        }
        
        .about-image::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: var(--bg-gradient);
            opacity: 0.1;
            animation: rotate 20s linear infinite;
        }
        
        .about-image span {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: 2rem;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Skills Section */
        .skills {
            background: var(--bg-secondary);
        }

        /* Experience Section */
        .experience {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            position: relative;
            overflow: hidden;
        }
        
        .experience::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.05) 100%);
            pointer-events: none;
        }

        /* Skills Section with Creative Enhancements */
        .skills {
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
            position: relative;
            overflow: hidden;
            color: var(--text-primary);
        }

        .skills::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(99,102,241,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)" /></svg>');
            opacity: 0.4;
        }

        .animated-bg-skills {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
                        radial-gradient(circle at 40% 80%, rgba(245, 158, 11, 0.04) 0%, transparent 50%);
            animation: skillsBgMove 20s ease-in-out infinite;
        }

        @keyframes skillsBgMove {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.1) rotate(5deg); }
        }

        .floating-skill-icons {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .skill-icon {
            position: absolute;
            font-size: 2rem;
            opacity: 0.6;
            animation: floatSkillIcon 6s ease-in-out infinite;
        }

        .skill-icon-1 { top: 10%; left: 10%; animation-delay: 0s; }
        .skill-icon-2 { top: 20%; right: 15%; animation-delay: 1s; }
        .skill-icon-3 { bottom: 30%; left: 20%; animation-delay: 2s; }
        .skill-icon-4 { bottom: 15%; right: 10%; animation-delay: 3s; }
        .skill-icon-5 { top: 60%; left: 5%; animation-delay: 4s; }
        .skill-icon-6 { top: 80%; right: 25%; animation-delay: 5s; }

        @keyframes floatSkillIcon {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
            50% { transform: translateY(-20px) rotate(10deg); opacity: 0.8; }
        }

        .skills-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            position: relative;
            z-index: 2;
        }

        .skill-category {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
            border: 1px solid rgba(99, 102, 241, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .skill-category::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
            animation: skillCategoryGlow 3s ease-in-out infinite;
        }

        @keyframes skillCategoryGlow {
            0%, 100% { transform: scaleX(1); opacity: 1; }
            50% { transform: scaleX(1.1); opacity: 0.8; }
        }

        .skill-category:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 12px 40px rgba(99, 102, 241, 0.25);
            border-color: rgba(99, 102, 241, 0.4);
            background: rgba(255, 255, 255, 0.9);
        }

        .category-icon {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 2rem;
            opacity: 0.7;
            animation: categoryIconPulse 2s ease-in-out infinite;
        }

        @keyframes categoryIconPulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .skill-radar {
            position: absolute;
            top: 1rem;
            left: 1rem;
            width: 30px;
            height: 30px;
        }

        .radar-ping {
            width: 100%;
            height: 100%;
            border: 2px solid #64ffda;
            border-radius: 50%;
            animation: radarPing 2s infinite;
        }

        @keyframes radarPing {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }

        .skill-category h3 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            margin-top: 1rem;
            text-shadow: none;
            position: relative;
            z-index: 2;
        }

        .skill-item {
            margin-bottom: 1.5rem;
            position: relative;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .skill-item:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateX(5px);
        }

        .skill-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.8rem;
        }

        .skill-name {
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-shadow: none;
            font-size: 1rem;
            line-height: 1.4;
        }

        .skill-tech-icon {
            font-size: 1.2rem;
            animation: techIconSpin 3s ease-in-out infinite;
            filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.4));
            text-shadow: none;
        }

        @keyframes techIconSpin {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(15deg); }
        }

        .skill-percentage {
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-color);
            text-shadow: none;
            animation: percentageGlow 2s ease-in-out infinite;
        }

        @keyframes percentageGlow {
            0%, 100% { color: var(--primary-color); }
            50% { color: var(--secondary-color); }
        }

        .skill-bar {
            height: 12px;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(99, 102, 241, 0.2);
        }

        .skill-progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
            border-radius: 6px;
            transition: width 1.5s ease;
            position: relative;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
        }

        .progress-glow {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: progressShimmer 2s infinite;
        }

        @keyframes progressShimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .skill-particles {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .skill-particles .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #64ffda;
            border-radius: 50%;
            animation: particleFloat 3s ease-in-out infinite;
        }

        .skill-particles .particle:nth-child(1) { 
            top: 20%; right: 10%; animation-delay: 0s; 
        }
        .skill-particles .particle:nth-child(2) { 
            top: 60%; right: 5%; animation-delay: 1s; 
        }
        .skill-particles .particle:nth-child(3) { 
            top: 40%; right: 15%; animation-delay: 2s; 
        }

        @keyframes particleFloat {
            0%, 100% { transform: translateY(0px); opacity: 0.6; }
            50% { transform: translateY(-15px); opacity: 1; }
        }

        /* Skills Section Responsive Styles */
        @media (max-width: 768px) {
            .skills-container {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .skill-category {
                padding: 1.5rem;
            }
            
            .category-icon {
                font-size: 1.5rem;
            }
            
            .floating-skill-icons .skill-icon {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .skill-category {
                padding: 1rem;
            }
            
            .skill-item {
                padding: 0.8rem;
            }
            
            .floating-skill-icons .skill-icon {
                font-size: 1.2rem;
            }
        }

        /* Experience Section */
        .experience {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            position: relative;
            overflow: hidden;
        }
        
        .experience::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.05) 100%);
            pointer-events: none;
        }

        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }

        /* Experience Overview */
        .experience-overview {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 3rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), rgba(255, 255, 255, 0.8));
            border-radius: 15px;
            border: 1px solid rgba(100, 255, 218, 0.2);
        }

        .current-role-highlight {
            position: relative;
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(100, 255, 218, 0.15);
            border: 2px solid var(--primary-color);
        }

        .role-badge {
            position: absolute;
            top: -10px;
            left: 20px;
            background: var(--primary-color);
            color: white;
            padding: 0.3rem 1rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .current-role-highlight h3 {
            font-size: 1.5rem;
            color: var(--text-primary);
            margin: 1rem 0 0.5rem 0;
        }

        .company-name {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 1.1rem;
            margin: 0 0 1rem 0;
        }

        .role-details {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .role-details .duration,
        .role-details .location {
            background: rgba(100, 255, 218, 0.1);
            color: var(--primary-color);
            padding: 0.3rem 0.8rem;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .role-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2.5rem;
            opacity: 0.7;
        }

        /* Career Stats */
        .career-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(100, 255, 218, 0.2);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            display: block;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            font-weight: 600;
            margin-top: 0.5rem;
        }

        /* Experience Timeline */
        .experience-timeline {
            position: relative;
            margin: 3rem 0;
        }

        .experience-timeline::before {
            content: '';
            position: absolute;
            left: 30px;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, var(--primary-color), rgba(100, 255, 218, 0.3));
            border-radius: 2px;
        }

        .timeline-card {
            position: relative;
            margin-bottom: 2rem;
            padding-left: 80px;
            transition: all 0.3s ease;
        }

        .timeline-card:hover {
            transform: translateX(10px);
        }

        .timeline-dot {
            position: absolute;
            left: 18px;
            top: 20px;
            width: 24px;
            height: 24px;
            background: white;
            border: 4px solid var(--primary-color);
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(100, 255, 218, 0.5);
            z-index: 2;
        }

        .timeline-card.current .timeline-dot {
            background: var(--primary-color);
            border-color: white;
            box-shadow: 0 0 20px rgba(100, 255, 218, 0.8);
            animation: pulse 2s infinite;
        }

        .timeline-card.education .timeline-dot {
            border-color: #ffc107;
            box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
        }

        .education-dot {
            border-color: #ffc107 !important;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 20px rgba(100, 255, 218, 0.8); }
            50% { box-shadow: 0 0 30px rgba(100, 255, 218, 1); }
            100% { box-shadow: 0 0 20px rgba(100, 255, 218, 0.8); }
        }

        .card-content {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(100, 255, 218, 0.2);
            position: relative;
        }

        .timeline-card.current .card-content {
            border: 2px solid var(--primary-color);
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), white);
        }

        .timeline-card.education .card-content {
            border-color: rgba(255, 193, 7, 0.3);
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), white);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .card-header h4 {
            color: var(--text-primary);
            font-size: 1.2rem;
            font-weight: 700;
            margin: 0;
        }

        .timeframe {
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 600;
            background: rgba(100, 255, 218, 0.1);
            padding: 0.3rem 0.8rem;
            border-radius: 12px;
        }

        .company {
            color: var(--primary-color);
            font-weight: 600;
            margin: 0 0 1rem 0;
            font-size: 1rem;
        }

        .role-description {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }

        .achievements {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .achievement-tag {
            background: rgba(100, 255, 218, 0.1);
            color: var(--primary-color);
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 600;
            border: 1px solid rgba(100, 255, 218, 0.3);
        }

        .achievement-tag.impact {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            border: none;
            box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        }

        /* Key Highlights */
        .key-highlights {
            margin-top: 3rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), rgba(255, 255, 255, 0.8));
            border-radius: 15px;
            border: 1px solid rgba(255, 193, 7, 0.2);
        }

        .key-highlights h3 {
            text-align: center;
            color: var(--text-primary);
            margin-bottom: 2rem;
            font-size: 1.5rem;
        }

        .highlights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .highlight-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .highlight-item:hover {
            transform: translateY(-5px);
        }

        .highlight-icon {
            font-size: 2.5rem;
            min-width: 60px;
            text-align: center;
        }

        .highlight-text strong {
            color: var(--text-primary);
            font-size: 1.1rem;
            display: block;
            margin-bottom: 0.3rem;
        }

        .highlight-text span {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        /* Responsive Design */
        @media (max-width: 968px) {
            .experience-overview {
                grid-template-columns: 1fr;
            }

            .career-stats {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .timeline-card {
                padding-left: 60px;
            }

            .experience-timeline::before {
                left: 20px;
            }

            .timeline-dot {
                left: 8px;
            }

            .career-stats {
                grid-template-columns: 1fr;
            }

            .highlights-grid {
                grid-template-columns: 1fr;
            }

            .current-role-highlight {
                padding: 1.5rem;
            }

            .role-icon {
                top: 15px;
                right: 15px;
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .timeline-card {
                padding-left: 50px;
            }

            .card-content {
                padding: 1rem;
            }

            .achievements {
                gap: 0.3rem;
            }

            .achievement-tag {
                font-size: 0.75rem;
                padding: 0.2rem 0.6rem;
            }
        }

        /* Skills Section */
        .skills {
            padding: 80px 0;
            background: white;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .skill-category h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--text-primary);
            font-weight: 700;
            text-shadow: none;
            position: relative;
            z-index: 2;
        }

        .skill-item {
            margin-bottom: 15px;
        }

        .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-weight: 700;
            color: var(--text-primary);
            text-shadow: none;
            align-items: center;
            gap: 0.5rem;
        }

        .skill-bar {
            background: rgba(99, 102, 241, 0.1);
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid rgba(99, 102, 241, 0.2);
        }

        .skill-progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        /* Awards Section */
        .awards {
            background: linear-gradient(135deg, #fefefe 0%, #f1f5f9 100%);
            position: relative;
            overflow: hidden;
        }

        .awards::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.04) 0%, rgba(99, 102, 241, 0.06) 100%);
            opacity: 1;
        }

        .awards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            position: relative;
            z-index: 1;
        }

        .award-card {
            background: white;
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .award-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s ease;
        }

        .award-card:hover::before {
            left: 100%;
        }

        .award-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: var(--shadow-xl);
        }

        /* Award Card Variants */
        .award-gold {
            background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
            color: #2c2c2c;
            border: 2px solid #f9a825;
            position: relative;
        }

        .award-platinum {
            background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
            color: #2c2c2c;
            border: 2px solid #9e9e9e;
            position: relative;
        }

        .award-innovation {
            background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%);
            color: #1565c0;
            border: 2px solid #1976d2;
            position: relative;
        }

        .award-research {
            background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
            color: #ad1457;
            border: 2px solid #c2185b;
            position: relative;
        }

        .award-glow {
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: inherit;
            border-radius: inherit;
            filter: blur(8px);
            opacity: 0.2;
            z-index: -1;
            animation: glowPulse 3s ease-in-out infinite;
        }

        @keyframes glowPulse {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 0.4; }
        }

        .award-badge {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .badge-inner {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .award-icon {
            font-size: 2rem;
            margin-bottom: 0.3rem;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
            animation: iconBounce 2s ease-in-out infinite;
            line-height: 1;
        }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .award-stars {
            display: flex;
            gap: 1px;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 100%;
        }

        .star {
            font-size: 0.6rem;
            animation: starTwinkle 1.5s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.2s);
            line-height: 1;
        }

        .star:nth-child(1) { --i: 0; }
        .star:nth-child(2) { --i: 1; }
        .star:nth-child(3) { --i: 2; }
        .star:nth-child(4) { --i: 3; }
        .star:nth-child(5) { --i: 4; }

        @keyframes starTwinkle {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        .award-breakdown {
            display: flex;
            justify-content: space-around;
            margin: 1rem 0;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .breakdown-item {
            text-align: center;
        }

        .breakdown-number {
            display: block;
            font-size: 1.5rem;
            font-weight: bold;
            color: #f9a825;
        }

        .breakdown-text {
            font-size: 0.8rem;
            opacity: 0.8;
            font-weight: 600;
            color: inherit;
        }

        .award-description {
            color: inherit;
            line-height: 1.6;
            font-weight: 500;
            opacity: 0.9;
        }

        .achievement-particles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 1;
        }

        .achievement-particles .particle {
            position: absolute;
            font-size: 1rem;
            animation: particleFloat 4s ease-in-out infinite;
            opacity: 0.6;
        }

        .achievement-particles .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
        .achievement-particles .particle:nth-child(2) { top: 30%; right: 15%; animation-delay: 1s; }
        .achievement-particles .particle:nth-child(3) { bottom: 25%; left: 20%; animation-delay: 2s; }
        .achievement-particles .particle:nth-child(4) { bottom: 35%; right: 10%; animation-delay: 3s; }

        .partnership-ring {
            display: flex;
            gap: 1px;
            margin-top: 0.5rem;
        }

        .ring-segment {
            width: 8px;
            height: 3px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 2px;
            animation: segmentGlow 2s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.3s);
        }

        .ring-segment:nth-child(1) { --i: 0; }
        .ring-segment:nth-child(2) { --i: 1; }
        .ring-segment:nth-child(3) { --i: 2; }
        .ring-segment:nth-child(4) { --i: 3; }

        @keyframes segmentGlow {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; background: #ffd700; }
        }

        .impact-metrics {
            display: flex;
            justify-content: space-around;
            margin: 1rem 0;
        }

        .metric-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .metric-icon {
            font-size: 1.5rem;
            animation: metricPulse 2s ease-in-out infinite;
        }

        .metric-text {
            font-size: 0.8rem;
            font-weight: 600;
        }

        @keyframes metricPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .partnership-animation {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 1.5rem;
            animation: handshakeFloat 3s ease-in-out infinite;
        }

        @keyframes handshakeFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
        }

        .lightning-effects {
            margin-top: 0.5rem;
        }

        .lightning-bolt {
            width: 2px;
            height: 15px;
            background: #ffd700;
            margin: 1px;
            animation: lightningFlash 1s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.2s);
        }

        .lightning-bolt:nth-child(1) { --i: 0; }
        .lightning-bolt:nth-child(2) { --i: 1; }
        .lightning-bolt:nth-child(3) { --i: 2; }

        @keyframes lightningFlash {
            0%, 100% { opacity: 0.3; height: 15px; }
            50% { opacity: 1; height: 20px; }
        }

        .automation-showcase {
            margin: 1rem 0;
        }

        .automation-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .flow-step {
            font-size: 1.5rem;
            animation: stepPulse 2s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.5s);
        }

        .flow-step:nth-child(1) { --i: 0; }
        .flow-step:nth-child(3) { --i: 1; }
        .flow-step:nth-child(5) { --i: 2; }

        @keyframes stepPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .flow-arrow {
            font-size: 1rem;
            opacity: 0.7;
            animation: arrowSlide 2s ease-in-out infinite;
        }

        @keyframes arrowSlide {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(5px); }
        }

        .savings-display {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .savings-amount, .savings-value {
            font-size: 0.9rem;
            font-weight: bold;
            padding: 0.2rem 0.5rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
        }

        .automation-gears {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .gear {
            position: absolute;
            font-size: 1.2rem;
            animation: gearRotate 4s linear infinite;
        }

        .gear-1 { animation-delay: 0s; }
        .gear-2 { transform: translateX(15px); animation-delay: 0.5s; animation-direction: reverse; }
        .gear-3 { transform: translateX(30px); animation-delay: 1s; }

        @keyframes gearRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .research-molecules {
            margin-top: 0.5rem;
        }

        .molecule {
            display: flex;
            gap: 2px;
            justify-content: center;
        }

        .atom {
            width: 6px;
            height: 6px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: atomVibrate 1.5s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.3s);
        }

        .atom:nth-child(1) { --i: 0; }
        .atom:nth-child(2) { --i: 1; }
        .atom:nth-child(3) { --i: 2; }

        @keyframes atomVibrate {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        .innovation-showcase {
            margin: 1rem 0;
        }

        .innovation-items {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .innovation-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }

        .innovation-icon {
            font-size: 1.2rem;
            animation: innovationPulse 2s ease-in-out infinite;
        }

        @keyframes innovationPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .innovation-text {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .dna-helix {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 30px;
            height: 40px;
        }

        .helix-strand {
            position: absolute;
            width: 2px;
            height: 100%;
            background: rgba(255, 255, 255, 0.6);
            animation: helixRotate 3s linear infinite;
        }

        .strand-1 { left: 5px; }
        .strand-2 { right: 5px; animation-delay: 1.5s; }

        @keyframes helixRotate {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        /* Awards Timeline */
        .awards-timeline {
            margin-top: 4rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }

        .timeline-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 2rem;
            color: var(--text-primary);
            background: var(--bg-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .timeline-track {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2rem 0;
        }

        .timeline-marker {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .marker-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            padding: 1rem;
            background: white;
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            animation: markerFloat 3s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.5s);
        }

        .timeline-marker:nth-child(1) .marker-icon { --i: 0; }
        .timeline-marker:nth-child(2) .marker-icon { --i: 1; }
        .timeline-marker:nth-child(3) .marker-icon { --i: 2; }
        .timeline-marker:nth-child(4) .marker-icon { --i: 3; }
        .timeline-marker:nth-child(5) .marker-icon { --i: 4; }

        @keyframes markerFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .marker-year {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .marker-title {
            font-size: 0.9rem;
            text-align: center;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .timeline-progress {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            z-index: 1;
        }

        .progress-line {
            height: 100%;
            background: var(--bg-gradient);
            border-radius: 2px;
            animation: progressFill 5s ease-in-out infinite;
        }

        @keyframes progressFill {
            0% { width: 0; }
            100% { width: 100%; }
        }

        .award-icon {
            font-size: 3.5rem;
            margin-bottom: -1rem;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
        }

        .award-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .award-description {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Projects Section */
        .projects {
            background: var(--bg-primary);
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .project-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            position: relative;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }

        .project-header {
            padding: 1.5rem;
            background: var(--bg-gradient);
            color: white;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            min-height: 120px;
            width: 100%;
        }

        .project-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255,255,255,0.2);
        }

        .project-header-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            width: 100%;
            min-width: 0;
        }

        .project-icon {
            font-size: 2.5rem;
            opacity: 0.9;
        }

        .project-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .project-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin: 0;
            line-height: 1.3;
            color: white;
        }

        .project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.75rem;
            width: 100%;
        }

        .tech-tag {
            background: rgba(255, 255, 255, 0.15);
            padding: 0.3rem 0.7rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            white-space: nowrap;
        }

        /* Responsive styles for tech-tags */
        @media (max-width: 768px) {
            .project-tech {
                gap: 0.4rem;
                margin-top: 0.5rem;
            }
            
            .tech-tag {
                font-size: 0.7rem;
                padding: 0.25rem 0.6rem;
            }
        }

        @media (max-width: 480px) {
            .project-tech {
                gap: 0.3rem;
                margin-top: 0.5rem;
            }
            
            .tech-tag {
                font-size: 0.65rem;
                padding: 0.2rem 0.5rem;
            }
        }

        .project-content {
            padding: 1.5rem;
        }

        .project-description {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .project-links {
            display: flex;
            gap: 0.5rem;
        }

        .project-link {
            padding: 0.5rem 1rem;
            background: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .project-link:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

        /* Featured Projects Section */
        .sample-work {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
            position: relative;
            overflow: hidden;
        }
        
        .sample-work::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(118, 75, 162, 0.02) 0%, rgba(102, 126, 234, 0.04) 100%);
            pointer-events: none;
        }

        .sample-work .section-title {
            color: #2c3e50;
        }

        .work-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .work-item {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .work-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        }

        .work-item h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: #2c3e50;
        }

        .work-item p {
            color: #555;
        }

        /* Testimonials Section */
        .testimonials {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            position: relative;
        }
        
        .testimonials::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.02) 0%, rgba(245, 158, 11, 0.03) 100%);
            pointer-events: none;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
        }

        .testimonial-card {
            background: white;
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            position: relative;
            transition: all 0.3s ease;
        }

        .testimonial-card::before {
            content: '"';
            position: absolute;
            top: 1rem;
            left: 1.5rem;
            font-size: 4rem;
            color: var(--primary-color);
            opacity: 0.3;
            font-family: serif;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }

        .testimonial-content {
            position: relative;
            z-index: 1;
        }

        .testimonial-text {
            font-style: italic;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--bg-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 1.2rem;
        }

        .author-info h4 {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .author-info p {
            color: var(--text-light);
            font-size: 0.9rem;
        }

        /* Contact Section */
        .contact {
            position: relative;
            color: white;
            text-align: center;
            overflow: hidden;
            padding: 8rem 0;
        }

        .contact .animated-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f172a, #1e293b);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            z-index: -1;
        }

        .contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="30" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="70" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="90" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
            animation: float 20s infinite linear;
            z-index: 1;
        }

        .contact .section-title {
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .contact .section-subtitle {
            color: rgba(255,255,255,0.9);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .contact-content {
            position: relative;
            z-index: 2;
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 2rem;
            align-items: stretch;
        }

        .contact-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            min-height: 280px;
            display: flex;
            flex-direction: column;
        }

        .contact-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .contact-card:hover::before {
            opacity: 1;
        }

        .contact-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            border-color: rgba(255,255,255,0.3);
        }

        .contact-card-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: white;
            margin-bottom: 1.5rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .contact-card-icon {
            font-size: 1.5rem;
        }

        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            flex: 1;
            justify-content: center;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1rem;
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            color: white;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .contact-item:hover {
            background: rgba(255,255,255,0.2);
            transform: translateX(5px);
        }

        .contact-icon {
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
            opacity: 0.9;
        }

        .qr-center-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
        }

        .qr-wrapper {
            position: relative;
            margin-bottom: 1rem;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .qr-code {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .qr-code::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(99, 102, 241, 0.1), transparent);
            animation: qr-shimmer 3s infinite;
        }

        @keyframes qr-shimmer {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .qr-code:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 12px 24px rgba(0,0,0,0.3);
        }

        .qr-label {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.9);
            font-weight: 500;
        }

        /* Mobile Save Details Button */
        .mobile-save-details {
            display: none;
            width: 100%;
            margin-top: 1rem;
        }

        .save-details-btn {
            width: 100%;
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 16px 20px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .save-details-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .save-details-btn:hover::before {
            left: 100%;
        }

        .save-details-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
            background: linear-gradient(135deg, #0056b3, #007bff);
        }

        .save-details-btn:active {
            transform: translateY(0);
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }

        .save-icon {
            font-size: 18px;
            animation: saveIconBounce 2s ease-in-out infinite;
        }

        .save-text {
            font-size: 14px;
            font-weight: 700;
        }

        .save-arrow {
            font-size: 16px;
            transition: transform 0.3s ease;
        }

        .save-details-btn:hover .save-arrow {
            transform: translateX(4px);
        }

        @keyframes saveIconBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* Theme-specific button colors */
        body.theme-money-heist .save-details-btn {
            background: linear-gradient(135deg, #dc143c, #8b0000);
            box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
        }

        body.theme-money-heist .save-details-btn:hover {
            background: linear-gradient(135deg, #8b0000, #dc143c);
            box-shadow: 0 8px 25px rgba(220, 20, 60, 0.5);
        }

        body.theme-squid-game .save-details-btn {
            background: linear-gradient(135deg, #ff1744, #d50000);
            box-shadow: 0 4px 15px rgba(255, 23, 68, 0.4);
        }

        body.theme-squid-game .save-details-btn:hover {
            background: linear-gradient(135deg, #d50000, #ff1744);
            box-shadow: 0 8px 25px rgba(255, 23, 68, 0.5);
        }

        body.theme-black-white .save-details-btn {
            background: linear-gradient(135deg, #333, #000);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }

        body.theme-black-white .save-details-btn:hover {
            background: linear-gradient(135deg, #000, #333);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
        }

        body.theme-iron-man .save-details-btn {
            background: linear-gradient(135deg, #ffd700, #dc2626);
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
        }

        body.theme-iron-man .save-details-btn:hover {
            background: linear-gradient(135deg, #dc2626, #ffd700);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
        }

        /* Label visibility controls */
        .desktop-label {
            display: inline;
        }

        .mobile-label {
            display: none;
        }

        /* Mobile responsive styles */
        @media (max-width: 768px) {
            .qr-code {
                display: none;
            }

            .mobile-save-details {
                display: block;
            }

            .desktop-label {
                display: none;
            }

            .mobile-label {
                display: inline;
            }

            .qr-wrapper {
                flex-direction: column;
                align-items: center;
            }
        }

        .social-links {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            flex: 1;
            justify-content: center;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
        }

        .social-link {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            color: white;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            background: rgba(255,255,255,0.1);
            border-radius: 0;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
            width: 100%;
        }

        .social-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.5s ease;
        }

        .social-link:hover::before {
            left: 100%;
        }

        .social-link:hover {
            background: rgba(255,255,255,0.2);
            transform: translateX(5px);
        }

        .social-icon {
            font-size: 1.1rem;
            width: 60px;
            text-align: center;
            opacity: 0.9;
            border-radius: 0;
        }

        /* Tech Footer Styles */
        .tech-footer {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            position: relative;
            overflow: hidden;
            padding: 0;
        }

        /* Contact Section Infographics */
        .contact-infographics {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 1;
            opacity: 0.7;
            overflow: hidden;
        }

        .contact {
            position: relative;
            overflow: hidden;
        }

        .contact .container {
            position: relative;
            z-index: 2;
        }

        .developer-scene {
            position: relative;
            height: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .developer {
            position: absolute;
            bottom: 20px;
        }

        .dev-1 {
            left: 20%;
            transform: scale(0.8);
        }

        .dev-2 {
            right: 25%;
            transform: scale(0.7);
        }

        .dev-3 {
            right: 5%;
            bottom: 30px;
            transform: scale(0.6);
        }

        .dev-sitting {
            height: 35px !important;
            border-radius: 15px 15px 25px 25px !important;
        }

        .mobile-device {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 30px;
            background: #2c3e50;
            border-radius: 3px;
            border: 1px solid #34495e;
        }

        .screen-glow {
            width: 100%;
            height: 70%;
            background: linear-gradient(135deg, #3498db, #2ecc71);
            border-radius: 2px;
            margin-top: 2px;
            animation: screenGlow 2s ease-in-out infinite alternate;
        }

        @keyframes screenGlow {
            0% { opacity: 0.6; }
            100% { opacity: 1; }
        }

        .dev-head {
            width: 30px;
            height: 30px;
            background: #fdbcb4;
            border-radius: 50%;
            position: relative;
            margin: 0 auto 5px;
        }

        .dev-head::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            width: 3px;
            height: 3px;
            background: #333;
            border-radius: 50%;
            box-shadow: 8px 0 0 #333;
        }

        .dev-head::after {
            content: '';
            position: absolute;
            top: 15px;
            left: 11px;
            width: 8px;
            height: 2px;
            background: #333;
            border-radius: 2px;
        }

        .dev-body {
            width: 40px;
            height: 50px;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            border-radius: 20px 20px 5px 5px;
            margin: 0 auto;
            position: relative;
        }

        .dev-body::before {
            content: '';
            position: absolute;
            top: 15px;
            left: -8px;
            width: 15px;
            height: 25px;
            background: #fdbcb4;
            border-radius: 8px;
        }

        .dev-body::after {
            content: '';
            position: absolute;
            top: 15px;
            right: -8px;
            width: 15px;
            height: 25px;
            background: #fdbcb4;
            border-radius: 8px;
        }

        .dev-laptop {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .laptop-screen {
            width: 60px;
            height: 40px;
            background: #2c3e50;
            border-radius: 3px;
            border: 2px solid #34495e;
            position: relative;
            margin-bottom: 2px;
        }

        .code-lines {
            padding: 6px;
        }

        .code-line {
            height: 2px;
            background: #27ae60;
            margin: 3px 0;
            border-radius: 1px;
            animation: typing 2s infinite;
        }

        .code-line:nth-child(2) {
            width: 80%;
            animation-delay: 0.5s;
        }

        .code-line:nth-child(3) {
            width: 60%;
            animation-delay: 1s;
        }

        @keyframes typing {
            0%, 50% { opacity: 0.3; }
            25% { opacity: 1; }
        }

        .laptop-base {
            width: 70px;
            height: 8px;
            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
            border-radius: 0 0 5px 5px;
        }

        .thinking-bubble {
            position: absolute;
            top: -40px;
            right: -20px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 8px 12px;
            font-size: 16px;
            animation: float 3s ease-in-out infinite;
        }

        .thinking-bubble::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 20px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid rgba(255,255,255,0.9);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .tech-icon {
            position: absolute;
            font-size: 24px;
            animation: techFloat 4s ease-in-out infinite;
            animation-delay: var(--delay);
            opacity: 0.7;
        }

        .tech-icon:nth-child(1) { top: 30%; left: 10%; }
        .tech-icon:nth-child(2) { top: 20%; right: 15%; }
        .tech-icon:nth-child(3) { top: 60%; left: 70%; }
        .tech-icon:nth-child(4) { top: 40%; left: 60%; }
        .tech-icon:nth-child(5) { top: 70%; right: 40%; }

        @keyframes techFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
        }

        /* Data Visualization */
        .data-viz {
            position: absolute;
            top: 20px;
            left: 15%;
            transform: scale(0.8);
        }

        .chart-container {
            background: rgba(255,255,255,0.25);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 15px;
            border: 1px solid rgba(255,255,255,0.4);
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }

        .bar-chart {
            display: flex;
            align-items: end;
            gap: 4px;
            height: 40px;
            margin-bottom: 8px;
        }

        .bar {
            width: 8px;
            background: linear-gradient(to top, #3498db, #2ecc71);
            border-radius: 2px;
            height: var(--height);
            animation: barGrow 2s ease-out infinite;
            animation-delay: var(--delay);
        }

        @keyframes barGrow {
            0%, 100% { transform: scaleY(0.5); }
            50% { transform: scaleY(1); }
        }

        .chart-label {
            font-size: 10px;
            color: rgba(255,255,255,0.8);
            text-align: center;
        }

        /* Progress Rings */
        .progress-rings {
            position: absolute;
            top: 30px;
            right: 20%;
        }

        .progress-ring {
            position: relative;
            margin-bottom: 15px;
            text-align: center;
        }

        .ring-1 {
            animation: float 3s ease-in-out infinite;
        }

        .ring-2 {
            animation: float 3s ease-in-out infinite;
            animation-delay: 1s;
        }

        .progress-circle {
            transform-origin: center;
            animation: progressFill 3s ease-in-out infinite;
        }

        @keyframes progressFill {
            0% { stroke-dashoffset: 157; }
            50% { stroke-dashoffset: 30; }
            100% { stroke-dashoffset: 157; }
        }

        .ring-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 8px;
            color: white;
            font-weight: bold;
        }

        /* Network Nodes */
        .network-nodes {
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
        }

        .node {
            position: absolute;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: white;
            font-weight: bold;
        }

        .node-1 { top: 0; left: 0; }
        .node-2 { top: 30px; left: 80px; }
        .node-3 { top: -20px; left: 160px; }

        .node-pulse {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(100, 255, 218, 0.3);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        .connection-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100px;
            pointer-events: none;
        }

        /* Floating Code Block */
        .floating-code {
            position: absolute;
            top: 50px;
            left: 60%;
            animation: float 4s ease-in-out infinite;
        }

        .code-block {
            background: #1e1e1e;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #64ffda;
            min-width: 120px;
            box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3);
        }

        .code-header {
            background: #2d2d2d;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .code-dots {
            display: flex;
            gap: 4px;
        }

        .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .dot.red { background: #ff5f56; }
        .dot.yellow { background: #ffbd2e; }
        .dot.green { background: #27ca3f; }

        .file-name {
            font-size: 8px;
            color: #ccc;
        }

        .code-content {
            padding: 8px 12px;
        }

        .code-text {
            font-size: 8px;
            color: #a6e22e;
            font-family: 'Courier New', monospace;
            line-height: 1.4;
        }

        /* Tech Stack */
        .tech-stack {
            position: absolute;
            bottom: 50px;
            left: 30%;
            display: flex;
            gap: 20px;
        }

        .stack-item {
            text-align: center;
            animation: stackBounce 3s ease-in-out infinite;
            animation-delay: var(--delay);
        }

        .tech-logo {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .tech-name {
            font-size: 8px;
            color: rgba(255,255,255,0.8);
            font-weight: bold;
        }

        @keyframes stackBounce {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        /* Geometric Shapes */
        .geometric-shapes {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .shape {
            position: absolute;
            animation: shapeFloat 6s ease-in-out infinite;
            animation-delay: var(--delay);
            opacity: 0.3;
        }

        .triangle {
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 14px solid #e74c3c;
            top: 20%;
            left: 80%;
        }

        .circle {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #f39c12;
            top: 60%;
            left: 10%;
        }

        .square {
            width: 12px;
            height: 12px;
            background: #9b59b6;
            top: 30%;
            left: 40%;
            transform: rotate(45deg);
        }

        .hexagon {
            width: 16px;
            height: 14px;
            background: #1abc9c;
            top: 70%;
            left: 75%;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        @keyframes shapeFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* Achievement Badges */
        .achievement-badges {
            position: absolute;
            top: 80px;
            right: 5%;
        }

        .badge {
            background: linear-gradient(135deg, #00d4aa, #3498db);
            border-radius: 20px;
            padding: 8px 12px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
            animation: badgeGlow 3s ease-in-out infinite alternate;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .badge-1 { animation-delay: 0s; }
        .badge-2 { animation-delay: 1s; }

        .badge-icon {
            font-size: 12px;
        }

        .badge-text {
            font-size: 9px;
            color: white;
            font-weight: bold;
        }

        @keyframes badgeGlow {
            0% { box-shadow: 0 0 10px rgba(0, 212, 170, 0.6); }
            100% { box-shadow: 0 0 25px rgba(0, 212, 170, 0.9); }
        }

        .plant {
            position: absolute;
            font-size: 40px;
            bottom: 0;
        }

        .plant-1 {
            left: 5%;
            transform: rotate(-10deg);
        }

        .plant-2 {
            right: 8%;
            transform: rotate(10deg);
        }

        .footer-content {
            background: rgba(0,0,0,0.2);
            padding: 20px 0;
            backdrop-filter: blur(10px);
        }

        .footer-text {
            text-align: center;
            color: rgba(255,255,255,0.8);
        }

        .footer-text p {
            margin-bottom: 10px;
            font-size: 14px;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .footer-link {
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            font-size: 13px;
            transition: color 0.3s ease;
        }

        .footer-link:hover {
            color: rgba(255,255,255,0.9);
        }

        .qr-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .qr-code {
            width: 180px;
            height: 180px;
            background: white;
            border-radius: 16px;
            padding: 1rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .qr-code:hover {
            transform: scale(1.05);
            box-shadow: 0 25px 50px rgba(0,0,0,0.4);
        }

        .qr-code::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent, rgba(99, 102, 241, 0.1), transparent, rgba(6, 182, 212, 0.1), transparent);
            animation: rotate 10s linear infinite;
        }

        .qr-code-content {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .qr-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            opacity: 0.9;
        }

        .social-section {
            text-align: right;
        }

        .social-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .social-links {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: flex-end;
        }

        .social-link {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            background: rgba(255, 255, 255, 0.15);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            backdrop-filter: blur(20px);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            min-width: 200px;
            justify-content: flex-start;
        }

        .social-link:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateX(-5px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .social-icon {
            font-size: 1.5rem;
            width: 30px;
            text-align: center;
            border-radius: 0;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .social-link {
            height: 60px;
            background: rgba(255, 255, 255, 0.15);
            border: 2px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 600;
            transition: all 0.3s ease;
            backdrop-filter: blur(20px);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .social-link:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .container {
                padding: 0 1.5rem;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
            
            .projects-grid {
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            }
        }

        @media (max-width: 1024px) {
            .container {
                padding: 0 2rem;
            }
            
            .hero-title {
                font-size: 3rem;
            }
            
            .section-title {
                font-size: 2.3rem;
            }
            
            .about-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }
            
            .about-image {
                width: 400px;
                height: 600px;
                font-size: 1rem;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            
            .timeline {
                padding: 1rem 0;
            }
            
            .timeline::before {
                left: 2.5rem;
            }
            
            .timeline-item:nth-child(odd) .timeline-content,
            .timeline-item:nth-child(even) .timeline-content {
                margin-left: 5rem;
                margin-right: 0;
                padding-left: 2rem;
                padding-right: 1rem;
                text-align: left;
            }
            
            .timeline-marker {
                left: 2.5rem;
            }
            
            .skills-container {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 1.5rem;
            }
            
            .awards-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }
            
            .projects-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }
            
            .testimonials-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .contact-card {
                padding: 1.5rem;
            }
        }

        /* Medium tablet optimization */
        @media (max-width: 1024px) {
            .hero-infographics {
                opacity: 0.15;
            }

            .floating-tech-icons,
            .hero-code-snippets,
            .hero-stats,
            .tech-orbit {
                transform: scale(0.8);
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 1rem;
            }

            .hero-content {
                padding: 2rem 1.5rem;
                margin: 1rem auto;
                background: rgba(255, 255, 255, 0.04);
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.15);
                max-width: 600px;
            }

            .hero-title {
                font-size: 2.7rem;
                line-height: 1.1;
                letter-spacing: 3px;
                margin-bottom: 1.2rem;
                text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9),
                             0 0 15px rgba(255, 255, 255, 0.4);
            }

            .hero-subtitle {
                font-size: 1.3rem;
                text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
                margin-bottom: 1.2rem;
            }

            .hero-subtitle::before,
            .hero-subtitle::after {
                display: none;
            }
            
            /* Squid Game Theme Mobile Responsive Fixes */
            .theme-squid-game .hero-subtitle,
            body.theme-squid-game .hero-subtitle,
            .theme-squid-game .hero-content .hero-subtitle {
                color: #ffffff !important;
                background: #ff1744 !important;
                background-color: #ff1744 !important;
                font-weight: 900 !important;
                text-shadow: 2px 2px 0px #000000 !important;
                padding: 0.6rem 1.2rem !important;
                border-radius: 6px !important;
                border: 3px solid #000000 !important;
                display: inline-block !important;
                margin-bottom: 1.2rem !important;
                font-size: 1.3rem !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
                position: relative !important;
                z-index: 10 !important;
            }
            
            .theme-squid-game .hero-title {
                color: #ffffff !important;
                text-shadow: 3px 3px 0px #000000, 0 0 15px #000000 !important;
                font-weight: 900 !important;
                -webkit-text-stroke: 2px #000000 !important;
                background: rgba(0, 0, 0, 0.7) !important;
                padding: 0.8rem 1.5rem !important;
                border-radius: 8px !important;
                display: inline-block !important;
                margin-bottom: 1.2rem !important;
            }
            
            .hero-description {
                font-size: 1rem;
                line-height: 1.6;
                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
            }

            /* Hero infographics mobile responsiveness */
            .hero-infographics {
                opacity: 0.1;
            }

            .floating-tech-icons {
                display: none;
            }

            .hero-code-snippets {
                display: none;
            }

            .hero-stats {
                display: none;
            }

            .tech-orbit {
                display: none;
            }

            .resume-infographic {
                top: 20%;
                right: 5%;
                transform: scale(0.8);
            }

            .resume-container {
                min-width: 160px;
                padding: 1rem;
            }

            .resume-icon {
                font-size: 2rem;
            }

            .resume-title {
                font-size: 0.95rem;
            }

            .resume-subtitle {
                font-size: 0.8rem;
            }

            .download-indicator {
                font-size: 1.2rem;
            }

            .binary-rain {
                opacity: 0.05;
            }

            .achievement-particles {
                display: none;
            }

            .section {
                padding: 4rem 0;
            }

            .section-title {
                font-size: 2.2rem;
                margin-bottom: 0.75rem;
            }
            
            .section-subtitle {
                font-size: 1rem;
                line-height: 1.6;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
                gap: 0.75rem;
                margin-top: 2rem;
            }
            
            .btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
                backdrop-filter: blur(15px);
                border: 2px solid rgba(255, 255, 255, 0.4);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            .about-intro,
            .stats-container {
                padding: 1.5rem;
                margin-bottom: 1.5rem;
            }
            
            .about-image {
                width: 320px;
                height: 500px;
                font-size: 0.9rem;
            }
            
            .stat-item {
                padding: 1rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
            
            .timeline::before {
                left: 1.5rem;
            }

            .timeline-item:nth-child(odd) .timeline-content,
            .timeline-item:nth-child(even) .timeline-content {
                margin-left: 3.5rem;
                margin-right: 0;
                padding-left: 1.5rem;
                padding-right: 1rem;
                text-align: left;
            }

            .timeline-marker {
                left: 1.5rem;
                width: 16px;
                height: 16px;
            }
            
            .timeline-content {
                padding: 2rem;
            }
            
            .experience-card {
                padding: 1.5rem;
            }
            
            .experience-title {
                font-size: 1.3rem;
            }
            
            .experience-header {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .timeline-content {
                padding: 1.5rem;
            }

            .skills-container {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .skill-category {
                padding: 1.5rem;
            }

            .awards-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .award-card {
                padding: 1.5rem;
                text-align: center;
            }
            
            .award-badge {
                width: 60px;
                height: 60px;
                margin-bottom: 1rem;
            }
            
            .award-icon {
                font-size: 2rem;
            }
            
            .award-breakdown {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .automation-flow {
                flex-wrap: wrap;
                gap: 0.3rem;
            }
            
            .flow-step {
                font-size: 1.2rem;
            }
            
            .innovation-items {
                gap: 0.3rem;
            }
            
            .innovation-item {
                padding: 0.3rem;
            }
            
            .timeline-track {
                flex-direction: column;
                gap: 2rem;
            }
            
            .marker-icon {
                font-size: 1.5rem;
                padding: 0.8rem;
            }
            
            .timeline-title {
                font-size: 1.5rem;
            }

            .projects-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .testimonials-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .testimonial-card {
                padding: 1.5rem;
            }
            
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                padding: 1rem;
                margin: 1rem 0;
            }
            
            .contact-card {
                padding: 1rem;
            }

            .social-links {
                flex-direction: column;
                gap: 0.75rem;
            }

            .social-link {
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
            }

            .social-icon {
                font-size: 1rem;
                border-radius: 0;
            }
            
            .qr-code {
                width: 70px;
                height: 70px;
                font-size: 1.8rem;
            }

            .footer-graphics {
                height: 120px;
            }

            .developer {
                transform: scale(0.5) !important;
            }

            .dev-1 {
                left: 10%;
            }

            .dev-2 {
                right: 15%;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 1rem;
            }

            .hero-content {
                padding: 1.5rem 1rem;
                margin: 0.5rem auto;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.15);
                max-width: 500px;
            }

            .hero-title {
                font-size: 2rem;
                letter-spacing: 2px;
                line-height: 1.1;
                text-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
                             0 0 12px rgba(255, 255, 255, 0.5);
            }

            .hero-subtitle {
                font-size: 1rem;
                text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
            }

            .hero-subtitle::before,
            .hero-subtitle::after {
                display: none;
            }
            
            /* Squid Game Theme Mobile Responsive Fixes - Small Screens */
            .theme-squid-game .hero-subtitle,
            body.theme-squid-game .hero-subtitle,
            .theme-squid-game .hero-content .hero-subtitle {
                color: #ffffff !important;
                background: #ff1744 !important;
                background-color: #ff1744 !important;
                font-weight: 900 !important;
                text-shadow: 2px 2px 0px #000000 !important;
                padding: 0.5rem 1rem !important;
                border-radius: 4px !important;
                border: 2px solid #000000 !important;
                display: inline-block !important;
                margin-bottom: 1rem !important;
                font-size: 1rem !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
                position: relative !important;
                z-index: 10 !important;
            }
            
            .theme-squid-game .hero-title {
                color: #ffffff !important;
                text-shadow: 3px 3px 0px #000000, 0 0 12px #000000 !important;
                font-weight: 900 !important;
                -webkit-text-stroke: 1px #000000 !important;
                background: rgba(0, 0, 0, 0.8) !important;
                padding: 0.7rem 1.2rem !important;
                border-radius: 6px !important;
                display: inline-block !important;
                margin-bottom: 1rem !important;
                font-size: 2rem !important;
            }

            .hero-description {
                font-size: 0.9rem;
                text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
            }

            .profile-image {
                width: 150px;
                height: 150px;
                font-size: 3rem;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            }

            /* Completely hide infographics on small mobile */
            .hero-infographics {
                display: none;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .section {
                padding: 3rem 0;
            }

            .btn {
                padding: 0.75rem 1.5rem;
                font-size: 0.9rem;
            }

            .timeline-content {
                padding: 1.5rem;
            }
            
            .timeline-title {
                font-size: 1.2rem;
            }
            
            .timeline-company {
                font-size: 1rem;
            }
            
            .experience-card {
                padding: 1.25rem;
            }
            
            .experience-title {
                font-size: 1.2rem;
            }
            
            .experience-company {
                font-size: 1rem;
            }

            .skill-category {
                padding: 1.5rem;
            }

            .award-card {
                padding: 1.5rem;
            }
            
            .award-badge {
                width: 50px;
                height: 50px;
            }
            
            .award-icon {
                font-size: 1.8rem;
            }
            
            .marker-icon {
                font-size: 1.2rem;
                padding: 0.6rem;
            }
            
            .marker-year {
                font-size: 1rem;
            }
            
            .marker-title {
                font-size: 0.8rem;
            }
            
            .automation-flow {
                font-size: 1rem;
            }
            
            .flow-step {
                font-size: 1rem;
            }
            
            .timeline-title {
                font-size: 1.3rem;
            }

            .project-card .project-header,
            .project-card .project-content {
                padding: 1.25rem;
            }

            .testimonial-card {
                padding: 1.5rem;
            }

            .contact-info h3 {
                font-size: 1.5rem;
            }
            
            .contact-grid {
                padding: 0.5rem;
                margin: 0.5rem 0;
                gap: 1rem;
            }
            
            .contact-card {
                padding: 0.75rem;
            }
            
            .qr-code {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
            
            .contact-item,
            .social-link {
                font-size: 0.85rem;
                padding: 0.5rem 0.5rem;
            }

            .social-links {
                gap: 0.5rem;
            }

            .social-icon {
                font-size: 0.9rem;
                border-radius: 0;
            }

            .footer-graphics {
                height: 150px;
            }

            .developer {
                transform: scale(0.6) !important;
            }

            .tech-icon {
                font-size: 18px;
            }

            .plant {
                font-size: 30px;
            }

            .footer-links {
                gap: 1rem;
            }

            /* Mobile responsiveness for contact infographic elements */
            .contact-infographics .data-viz, 
            .contact-infographics .progress-rings, 
            .contact-infographics .floating-code, 
            .contact-infographics .achievement-badges {
                transform: scale(0.6);
            }

            .contact-infographics .data-viz {
                top: 10px;
                left: 5%;
            }

            .contact-infographics .progress-rings {
                top: 15px;
                right: 10%;
            }

            .contact-infographics .floating-code {
                top: 30px;
                left: 30%;
            }

            .contact-infographics .achievement-badges {
                top: 40px;
                right: 5%;
            }

            .contact-infographics .network-nodes {
                bottom: 80px;
                transform: translateX(-50%) scale(0.7);
            }

            .contact-infographics .tech-stack {
                bottom: 30px;
                left: 10%;
                flex-direction: column;
                gap: 10px;
            }

            .contact-infographics .geometric-shapes .shape {
                transform: scale(0.5);
            }

            .contact-infographics .developer3 {
                transform: scale(0.6);
                right: 5%;
            }
        }

        /* Extra small mobile devices */
        @media (max-width: 480px) {
            .container {
                padding: 0 0.75rem;
            }
            
            .hero-content {
                padding-top: 7rem;
            }
            
            .hero-title {
                font-size: 2rem;
                line-height: 1.1;
                margin-bottom: 0.8rem;
            }

            .hero-subtitle {
                font-size: 1.1rem;
                margin-bottom: 1rem;
            }

            .hero-description {
                font-size: 0.9rem;
                text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
                margin-bottom: 1.5rem;
                padding: 1rem;
            }

            .profile-image {
                width: 150px;
                height: 150px;
                font-size: 3rem;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            }

            /* Completely hide infographics on small mobile */
            .hero-infographics {
                display: none;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .section {
                padding: 3rem 0;
            }

            .btn {
                padding: 0.75rem 1.5rem;
                font-size: 0.9rem;
                margin: 0.25rem;
            }

            .cta-buttons {
                flex-direction: column;
                gap: 0.5rem;
                width: 100%;
            }

            .timeline-content {
                padding: 1.5rem;
            }
            
            .timeline-title {
                font-size: 1.2rem;
            }
            
            .timeline-company {
                font-size: 1rem;
            }
            
            .timeline-item {
                padding-left: 50px;
                margin-bottom: 1.5rem;
            }
            
            .experience-card {
                padding: 1.2rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }

            .skill-category {
                padding: 1rem;
                margin-bottom: 1rem;
            }

            .project-card {
                margin-bottom: 1.5rem;
            }

            .contact-item {
                padding: 0.8rem;
                font-size: 0.9rem;
            }

            .social-link {
                padding: 0.8rem 1rem;
                font-size: 0.9rem;
                min-width: 150px;
            }

            /* Better spacing for mobile themes */
            .about-text {
                font-size: 0.9rem;
                line-height: 1.6;
                margin-bottom: 1rem;
            }

            .section-subtitle {
                font-size: 0.95rem;
                margin-bottom: 2rem;
            }

            /* Mobile theme improvements */
            .theme-money-heist .hero-title,
            .theme-squid-game .hero-title,
            .theme-black-white .hero-title {
                font-size: 1.8rem;
                line-height: 1.1;
            }

            .theme-money-heist .section-title,
            .theme-squid-game .section-title,
            .theme-black-white .section-title {
                font-size: 1.6rem;
                margin-bottom: 1rem;
            }

            /* Fix text spacing in all themes */
            .theme-money-heist p,
            .theme-squid-game p,
            .theme-black-white p {
                margin-bottom: 1rem;
                line-height: 1.6;
            }

            /* Ensure buttons don't overlap */
            .theme-money-heist .btn,
            .theme-squid-game .btn,
            .theme-black-white .btn {
                margin: 0.4rem 0.2rem;
                display: block;
                width: calc(100% - 0.4rem);
                text-align: center;
            }
            
            .contact-infographics .data-viz, 
            .contact-infographics .progress-rings, 
            .contact-infographics .floating-code, 
            .contact-infographics .achievement-badges {
                transform: scale(0.4);
            }

            .contact-infographics .network-nodes {
                bottom: 60px;
                transform: translateX(-50%) scale(0.5);
            }

            .contact-infographics .tech-stack {
                bottom: 20px;
                left: 5%;
                gap: 5px;
            }

            .contact-infographics .geometric-shapes .shape {
                transform: scale(0.3);
            }

            .contact-infographics .developer3 {
                transform: scale(0.4);
                right: 2%;
            }

            .contact-infographics .code-block {
                min-width: 80px;
            }

            .contact-infographics .node {
                width: 30px;
                height: 30px;
                font-size: 8px;
            }

            .contact-infographics .badge {
                padding: 4px 8px;
            }

            .contact-infographics .badge-text {
                font-size: 7px;
            }

            /* Hero Infographics Mobile - Extra Small */
            .hero-infographics .floating-tech-icons .tech-icon {
                transform: scale(0.4);
            }

            .hero-infographics .code-snippet {
                transform: scale(0.5);
                font-size: 8px;
            }

            .hero-infographics .statistics-viz .stat-bar {
                transform: scale(0.5);
            }

            .hero-infographics .tech-orbit {
                width: 120px;
                height: 120px;
            }

            .hero-infographics .tech-orbit .orbit-item {
                transform: scale(0.4);
            }

            .hero-infographics .binary-rain .binary-drop {
                font-size: 8px;
                transform: scale(0.6);
            }

            .hero-infographics .achievement-particles .particle {
                transform: scale(0.4);
            }
        }

        /* Scroll animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-on-scroll {
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards;
        }

        /* Utilities */
        .text-gradient {
            background: var(--bg-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            animation: modalFadeIn 0.3s ease-out;
        }

        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            animation: modalSlideIn 0.3s ease-out;
        }

        .modal-header {
            padding: 30px 30px 20px;
            border-bottom: 1px solid #e5e7eb;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 20px 20px 0 0;
            position: relative;
        }

        .modal-title {
            font-size: 2rem;
            font-weight: 700;
            color: white;
            margin: 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 25px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .modal-body {
            padding: 30px;
            line-height: 1.8;
            color: var(--text-primary);
        }

        .modal-body h3 {
            color: var(--primary-color);
            font-size: 1.25rem;
            font-weight: 600;
            margin: 25px 0 15px 0;
            border-left: 4px solid var(--primary-color);
            padding-left: 15px;
        }

        .modal-body h3:first-child {
            margin-top: 0;
        }

        .modal-body p {
            margin-bottom: 15px;
            color: var(--text-secondary);
        }

        .modal-body ul {
            margin: 15px 0;
            padding-left: 25px;
        }

        .modal-body li {
            margin-bottom: 8px;
            color: var(--text-secondary);
        }

        .modal-body strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .last-updated {
            background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            text-align: center;
            font-style: italic;
            color: var(--text-light);
            border-left: 4px solid var(--accent-color);
        }

        @keyframes modalFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes modalSlideIn {
            from { 
                transform: translateY(-50px);
                opacity: 0;
            }
            to { 
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Mobile responsiveness for modal */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                margin: 20px;
                max-height: 85vh;
            }

            .modal-header {
                padding: 20px 20px 15px;
            }

            .modal-title {
                font-size: 1.5rem;
                padding-right: 40px;
            }

            .modal-body {
                padding: 20px;
            }

            .modal-close {
                top: 15px;
                right: 15px;
                width: 35px;
                height: 35px;
                font-size: 24px;
            }
        }

        /* Go to Top Button */
        .go-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            visibility: hidden;
            transform: translateY(100px);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .go-to-top-icon {
            font-size: 24px;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 2px;
            display: none;
            animation: iconBounce 2s ease-in-out infinite;
        }

        /* Theme-specific icon visibility */
        body.theme-normal .go-to-top-icon.normal-theme,
        body:not([class*="theme"]) .go-to-top-icon.normal-theme {
            display: block;
        }

        body.theme-money-heist .go-to-top-icon.money-heist-theme {
            display: block;
            animation: moneyRain 2s ease-in-out infinite;
        }

        body.theme-squid-game .go-to-top-icon.squid-game-theme {
            display: block;
            animation: triangleGlow 2s ease-in-out infinite;
        }

        body.theme-black-white .go-to-top-icon.black-white-theme {
            display: block;
            animation: minimalistPulse 2s ease-in-out infinite;
        }

        body.theme-iron-man .go-to-top-icon.iron-man-theme {
            display: block;
            animation: ironManPower 2s ease-in-out infinite;
        }

        /* Icon Animations */
        @keyframes iconBounce {
            0%, 100% { 
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            50% { 
                transform: translateY(-5px) scale(1.1);
                opacity: 0.8;
            }
        }

        @keyframes moneyRain {
            0%, 100% { 
                transform: translateY(0) rotate(0deg) scale(1);
                filter: drop-shadow(0 0 5px #ffd700);
            }
            25% { 
                transform: translateY(-3px) rotate(-5deg) scale(1.1);
                filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 15px #ff6b6b);
            }
            50% { 
                transform: translateY(-5px) rotate(0deg) scale(1.2);
                filter: drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 20px #ff6b6b);
            }
            75% { 
                transform: translateY(-3px) rotate(5deg) scale(1.1);
                filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 15px #ff6b6b);
            }
        }

        @keyframes triangleGlow {
            0%, 100% { 
                transform: translateY(0) scale(1);
                filter: drop-shadow(0 0 5px #ff1744) drop-shadow(0 0 10px #ff1744);
                color: #ff1744;
            }
            33% { 
                transform: translateY(-3px) scale(1.15);
                filter: drop-shadow(0 0 10px #ff1744) drop-shadow(0 0 20px #ff1744) drop-shadow(0 0 30px #ff4569);
                color: #ff4569;
            }
            66% { 
                transform: translateY(-6px) scale(1.3);
                filter: drop-shadow(0 0 15px #ff1744) drop-shadow(0 0 25px #ff1744) drop-shadow(0 0 35px #ff4569);
                color: #ff6b6b;
            }
        }

        @keyframes minimalistPulse {
            0%, 100% { 
                transform: translateY(0) scale(1);
                opacity: 1;
                filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
            }
            50% { 
                transform: translateY(-4px) scale(1.1);
                opacity: 0.9;
                filter: drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 15px rgba(255,255,255,0.6));
            }
        }

        @keyframes ironManPower {
            0%, 100% { 
                transform: translateY(0) scale(1);
                filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 15px #dc2626);
                color: #ffd700;
            }
            25% { 
                transform: translateY(-3px) scale(1.1);
                filter: drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 25px #dc2626) drop-shadow(0 0 35px #ea580c);
                color: #dc2626;
            }
            50% { 
                transform: translateY(-6px) scale(1.2);
                filter: drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 30px #dc2626) drop-shadow(0 0 40px #ea580c);
                color: #ea580c;
            }
            75% { 
                transform: translateY(-3px) scale(1.1);
                filter: drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 25px #dc2626) drop-shadow(0 0 35px #ea580c);
                color: #dc2626;
            }
        }

        .go-to-top-text {
            font-size: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1;
        }

        .go-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .go-to-top:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 12px 35px rgba(0, 123, 255, 0.4);
            background: linear-gradient(135deg, #0056b3, #007bff);
        }

        .go-to-top:hover .go-to-top-icon {
            animation-duration: 0.5s;
            animation-iteration-count: infinite;
        }

        /* Theme-specific hover effects */
        body.theme-money-heist .go-to-top:hover .money-heist-theme {
            animation: moneyRainHover 0.5s ease-in-out infinite;
        }

        body.theme-squid-game .go-to-top:hover .squid-game-theme {
            animation: triangleGlowHover 0.5s ease-in-out infinite;
        }

        body.theme-black-white .go-to-top:hover .black-white-theme {
            animation: minimalistPulseHover 0.5s ease-in-out infinite;
        }

        body.theme-iron-man .go-to-top:hover .iron-man-theme {
            animation: ironManPowerHover 0.5s ease-in-out infinite;
        }

        body.theme-normal .go-to-top:hover .normal-theme {
            animation: iconBounceHover 0.5s ease-in-out infinite;
        }

        /* Hover-specific animations */
        @keyframes moneyRainHover {
            0%, 100% { 
                transform: translateY(0) rotate(0deg) scale(1);
                filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ff6b6b);
            }
            50% { 
                transform: translateY(-8px) rotate(10deg) scale(1.3);
                filter: drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 30px #ff6b6b) drop-shadow(0 0 40px #dc143c);
            }
        }

        @keyframes triangleGlowHover {
            0%, 100% { 
                transform: translateY(0) scale(1) rotate(0deg);
                filter: drop-shadow(0 0 15px #ff1744) drop-shadow(0 0 25px #ff1744);
                color: #ff1744;
            }
            50% { 
                transform: translateY(-10px) scale(1.4) rotate(180deg);
                filter: drop-shadow(0 0 25px #ff1744) drop-shadow(0 0 35px #ff1744) drop-shadow(0 0 45px #ff4569);
                color: #ffffff;
            }
        }

        @keyframes minimalistPulseHover {
            0%, 100% { 
                transform: translateY(0) scale(1);
                opacity: 1;
                filter: drop-shadow(0 0 5px rgba(255,255,255,1));
            }
            50% { 
                transform: translateY(-8px) scale(1.2);
                opacity: 0.8;
                filter: drop-shadow(0 0 15px rgba(255,255,255,1)) drop-shadow(0 0 25px rgba(255,255,255,0.8));
            }
        }

        @keyframes ironManPowerHover {
            0%, 100% { 
                transform: translateY(0) scale(1) rotate(0deg);
                filter: drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 30px #dc2626);
                color: #ffd700;
            }
            50% { 
                transform: translateY(-12px) scale(1.4) rotate(15deg);
                filter: drop-shadow(0 0 30px #ffd700) drop-shadow(0 0 40px #dc2626) drop-shadow(0 0 50px #ea580c);
                color: #ffffff;
            }
        }

        @keyframes iconBounceHover {
            0%, 100% { 
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            50% { 
                transform: translateY(-8px) scale(1.2);
                opacity: 0.9;
            }
        }

        .go-to-top:active {
            transform: translateY(-2px) scale(1.05);
        }

        /* Pulse animation for go to top button */
        .go-to-top::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            background: inherit;
            animation: gotoTopPulse 2s infinite;
            z-index: -1;
        }

        /* Additional theme effects */
        body.theme-money-heist .go-to-top::after {
            content: '💸';
            position: absolute;
            font-size: 12px;
            opacity: 0;
            animation: moneyFloat 3s ease-in-out infinite;
            pointer-events: none;
        }

        body.theme-squid-game .go-to-top::after {
            content: '⚪';
            position: absolute;
            font-size: 8px;
            opacity: 0;
            animation: circleFloat 3s ease-in-out infinite;
            pointer-events: none;
            color: #ffffff;
        }

        body.theme-iron-man .go-to-top::after {
            content: '🔥';
            position: absolute;
            font-size: 12px;
            opacity: 0;
            animation: fireFloat 3s ease-in-out infinite;
            pointer-events: none;
            color: #ffd700;
        }

        @keyframes moneyFloat {
            0% {
                opacity: 0;
                transform: translate(-20px, 20px) rotate(0deg);
            }
            25% {
                opacity: 1;
                transform: translate(-15px, -10px) rotate(45deg);
            }
            50% {
                opacity: 0.8;
                transform: translate(15px, -25px) rotate(90deg);
            }
            75% {
                opacity: 0.6;
                transform: translate(20px, -15px) rotate(135deg);
            }
            100% {
                opacity: 0;
                transform: translate(25px, 20px) rotate(180deg);
            }
        }

        @keyframes circleFloat {
            0% {
                opacity: 0;
                transform: translate(-15px, 15px) scale(0.5);
            }
            25% {
                opacity: 1;
                transform: translate(-10px, -8px) scale(0.8);
            }
            50% {
                opacity: 0.9;
                transform: translate(10px, -20px) scale(1);
            }
            75% {
                opacity: 0.7;
                transform: translate(15px, -10px) scale(0.8);
            }
            100% {
                opacity: 0;
                transform: translate(20px, 15px) scale(0.5);
            }
        }

        @keyframes fireFloat {
            0% {
                opacity: 0;
                transform: translate(-20px, 20px) scale(0.5) rotate(0deg);
                filter: drop-shadow(0 0 5px #ffd700);
            }
            25% {
                opacity: 1;
                transform: translate(-12px, -10px) scale(0.9) rotate(90deg);
                filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 15px #dc2626);
            }
            50% {
                opacity: 0.8;
                transform: translate(12px, -25px) scale(1.2) rotate(180deg);
                filter: drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 20px #dc2626) drop-shadow(0 0 25px #ea580c);
            }
            75% {
                opacity: 0.6;
                transform: translate(18px, -12px) scale(0.9) rotate(270deg);
                filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 15px #dc2626);
            }
            100% {
                opacity: 0;
                transform: translate(25px, 20px) scale(0.5) rotate(360deg);
                filter: drop-shadow(0 0 5px #ffd700);
            }
        }

        @keyframes gotoTopPulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.3);
                opacity: 0;
            }
        }

        /* Theme-specific Go to Top Button colors */
        /* Normal Theme */
        body.theme-normal .go-to-top {
            background: linear-gradient(135deg, #007bff, #0056b3);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        }

        body.theme-normal .go-to-top:hover {
            background: linear-gradient(135deg, #0056b3, #007bff);
            box-shadow: 0 12px 35px rgba(0, 123, 255, 0.4);
        }

        /* Money Heist Theme */
        body.theme-money-heist .go-to-top {
            background: linear-gradient(135deg, #dc143c, #8b0000);
            box-shadow: 0 8px 25px rgba(220, 20, 60, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }

        body.theme-money-heist .go-to-top:hover {
            background: linear-gradient(135deg, #8b0000, #dc143c);
            box-shadow: 0 12px 35px rgba(220, 20, 60, 0.5);
        }

        body.theme-money-heist .go-to-top::before {
            background: linear-gradient(135deg, #dc143c, #8b0000);
        }

        /* Squid Game Theme */
        body.theme-squid-game .go-to-top {
            background: linear-gradient(135deg, #ff1744, #d50000);
            box-shadow: 0 8px 25px rgba(255, 23, 68, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }

        body.theme-squid-game .go-to-top:hover {
            background: linear-gradient(135deg, #d50000, #ff1744);
            box-shadow: 0 12px 35px rgba(255, 23, 68, 0.5);
        }

        body.theme-squid-game .go-to-top::before {
            background: linear-gradient(135deg, #ff1744, #d50000);
        }

        /* Black & White Theme */
        body.theme-black-white .go-to-top {
            background: linear-gradient(135deg, #333, #000);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.3);
        }

        body.theme-black-white .go-to-top:hover {
            background: linear-gradient(135deg, #000, #333);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
        }

        body.theme-black-white .go-to-top::before {
            background: linear-gradient(135deg, #333, #000);
        }

        /* Iron Man Theme */
        body.theme-iron-man .go-to-top {
            background: linear-gradient(135deg, #ffd700, #dc2626);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
            border-color: rgba(255, 215, 0, 0.3);
        }

        body.theme-iron-man .go-to-top:hover {
            background: linear-gradient(135deg, #dc2626, #ffd700);
            box-shadow: 0 12px 35px rgba(255, 215, 0, 0.5);
        }

        body.theme-iron-man .go-to-top::before {
            background: linear-gradient(135deg, #ffd700, #dc2626);
        }

        /* Mobile responsiveness for go to top button */
        @media (max-width: 768px) {
            .go-to-top {
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
            }
            
            .go-to-top-icon {
                font-size: 20px;
                margin-bottom: 1px;
            }
            
            .go-to-top-text {
                font-size: 7px;
            }

            /* Reduce animation intensity on mobile */
            .go-to-top-icon {
                animation-duration: 2.5s;
            }

            body.theme-money-heist .go-to-top::after,
            body.theme-squid-game .go-to-top::after {
                font-size: 10px;
                animation-duration: 4s;
            }
        }

        @media (max-width: 480px) {
            .go-to-top {
                bottom: 15px;
                right: 15px;
                width: 45px;
                height: 45px;
            }
            
            .go-to-top-icon {
                font-size: 18px;
                margin-bottom: 1px;
            }
            
            .go-to-top-text {
                font-size: 6px;
            }

            /* Further reduce effects on small screens */
            body.theme-money-heist .go-to-top::after,
            body.theme-squid-game .go-to-top::after {
                font-size: 8px;
                animation-duration: 5s;
            }
        }