/* Paste all your CSS from the <style> tag here */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Exo+2:wght@300;400;500;600;700&display=swap');

/* ...existing CSS code from your <style> tag... */
* {
            font-family: 'Exo 2', sans-serif;
        }
        
        .space-font {
            font-family: 'Orbitron', monospace;
        }
        
        /* Space Background */
        body {
            background: #000000;
            color: #ffffff;
            overflow-x: hidden;
        }
        
        .space-bg {
            background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
            position: relative;
        }
        
        .deep-space-bg {
            background: radial-gradient(ellipse at top, #0f0f23 0%, #000000 70%);
        }
        
        .nebula-bg {
            background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.1) 0%, rgba(75, 0, 130, 0.05) 50%, transparent 100%);
        }
        
        /* Animated Stars Background */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .star {
            position: absolute;
            background: #ffffff;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }
        
        .star.small {
            width: 1px;
            height: 1px;
            animation-duration: 2s;
        }
        
        .star.medium {
            width: 2px;
            height: 2px;
            animation-duration: 3s;
            box-shadow: 0 0 6px #ffffff;
        }
        
        .star.large {
            width: 3px;
            height: 3px;
            animation-duration: 4s;
            box-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff;
        }
        
        .star.colored {
            animation-duration: 5s;
        }
        
        .star.blue { background: #4fc3f7; box-shadow: 0 0 10px #4fc3f7; }
        .star.purple { background: #ba68c8; box-shadow: 0 0 10px #ba68c8; }
        .star.cyan { background: #26c6da; box-shadow: 0 0 10px #26c6da; }
        .star.pink { background: #f06292; box-shadow: 0 0 10px #f06292; }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }
        
        /* Shooting Stars */
        .shooting-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #ffffff;
            animation: shoot 3s linear infinite;
        }
        
        @keyframes shoot {
            0% {
                transform: translateX(-100px) translateY(100px);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateX(100vw) translateY(-100px);
                opacity: 0;
            }
        }
        
        /* Live Moving Particles */
        .space-particle {
            position: fixed;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle-small {
            width: 2px;
            height: 2px;
            animation: float-small 12s linear infinite;
        }
        
        .particle-medium {
            width: 4px;
            height: 4px;
            animation: float-medium 15s linear infinite;
        }
        
        .particle-large {
            width: 6px;
            height: 6px;
            animation: float-large 18s linear infinite;
        }
        
        .particle-colored {
            box-shadow: 0 0 10px currentColor;
        }
        
        .particle-blue { background: #4fc3f7; color: #4fc3f7; }
        .particle-purple { background: #ba68c8; color: #ba68c8; }
        .particle-cyan { background: #26c6da; color: #26c6da; }
        .particle-pink { background: #f06292; color: #f06292; }
        
        @keyframes float-small {
            0% {
                transform: translateY(100vh) translateX(0px) rotate(0deg);
                opacity: 0;
            }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% {
                transform: translateY(-100px) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }
        
        @keyframes float-medium {
            0% {
                transform: translateY(100vh) translateX(0px) rotate(0deg) scale(1);
                opacity: 0;
            }
            10% { opacity: 0.4; }
            50% { transform: translateY(50vh) translateX(-50px) rotate(180deg) scale(1.2); }
            90% { opacity: 0.4; }
            100% {
                transform: translateY(-100px) translateX(80px) rotate(360deg) scale(0.8);
                opacity: 0;
            }
        }
        
        @keyframes float-large {
            0% {
                transform: translateY(100vh) translateX(0px) rotate(0deg) scale(1);
                opacity: 0;
            }
            10% { opacity: 0.3; }
            25% { transform: translateY(75vh) translateX(30px) rotate(90deg) scale(1.1); }
            50% { transform: translateY(50vh) translateX(-30px) rotate(180deg) scale(1.3); }
            75% { transform: translateY(25vh) translateX(20px) rotate(270deg) scale(1.1); }
            90% { opacity: 0.3; }
            100% {
                transform: translateY(-100px) translateX(-20px) rotate(360deg) scale(0.9);
                opacity: 0;
            }
        }
        
        /* Section-Specific Particle Animations */
        @keyframes galaxy-particle-float {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg) scale(1);
                opacity: 0;
            }
            10% { opacity: 0.6; }
            20% { transform: translateY(-50px) translateX(20px) rotate(45deg) scale(1.1); }
            40% { transform: translateY(-120px) translateX(-15px) rotate(135deg) scale(0.9); }
            60% { transform: translateY(-200px) translateX(30px) rotate(225deg) scale(1.2); }
            80% { transform: translateY(-280px) translateX(-10px) rotate(315deg) scale(0.8); }
            90% { opacity: 0.4; }
            100% {
                transform: translateY(-350px) translateX(0px) rotate(360deg) scale(0.5);
                opacity: 0;
            }
        }
        
        @keyframes deep-space-particle-float {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg) scale(1);
                opacity: 0;
            }
            15% { opacity: 0.8; }
            25% { transform: translateY(-80px) translateX(-25px) rotate(60deg) scale(1.3); }
            50% { transform: translateY(-160px) translateX(35px) rotate(180deg) scale(0.7); }
            75% { transform: translateY(-240px) translateX(-20px) rotate(300deg) scale(1.1); }
            85% { opacity: 0.5; }
            100% {
                transform: translateY(-320px) translateX(10px) rotate(360deg) scale(0.3);
                opacity: 0;
            }
        }
        
        /* 3D Skill Spheres */
        /* Wrapper for sphere + label */
#skills3DContainer {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 500px; /* desktop */
    margin: 0 auto; /* center alignment */
    perspective: 1000px;
}

.skill-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* 3D Skill Spheres */
.skill-sphere-white {
    border-radius: 50%;
    background: #eb4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #fff2, 0 5px 15px #0006;
}

.skill-sphere-white:hover {
    transform: scale(1.3);
    box-shadow: 0 0 30px rgba(250, 246, 246, 0.467), 0 10px 50px #0009;
}

.skill-sphere:active {
    transform: scale(1.1) rotateY(360deg);
}

/* White / Grey themed spheres */
.skill-sphere-white {
    background: radial-gradient(circle at 30% 30%, #f9f9fa, #aaaaaa);
    color: #9d0f0f;
}

/* Skill label below sphere */

.skill-label {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
}

@keyframes sphere-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}
#skills3DContainer {
    perspective: 1000px;
    perspective-origin: center center;
}

/* Individual Float speeds */
.sphere-float-1 { animation: sphere-float-1 4s ease-in-out infinite; }
.sphere-float-2 { animation: sphere-float-2 5s ease-in-out infinite; }
.sphere-float-3 { animation: sphere-float-3 3.5s ease-in-out infinite; }
.sphere-float-4 { animation: sphere-float-4 4.5s ease-in-out infinite; }
.sphere-float-5 { animation: sphere-float-5 3.8s ease-in-out infinite; }

@keyframes sphere-float-1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }
@keyframes sphere-float-2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes sphere-float-3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes sphere-float-4 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes sphere-float-5 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-25px)} }

        /* Cosmic Glow Effects */
        .cosmic-glow {
            box-shadow: 0 0 20px rgba(138, 43, 226, 0.5), 0 0 40px rgba(138, 43, 226, 0.3), 0 0 60px rgba(138, 43, 226, 0.1);
        }
        
        .neon-blue {
            color: #00ffff;
            text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
        }
        
        .neon-purple {
            color: #ba68c8;
            text-shadow: 0 0 10px #ba68c8, 0 0 20px #ba68c8, 0 0 30px #ba68c8;
        }
        
        .neon-pink {
            color: #f06292;
            text-shadow: 0 0 10px #f06292, 0 0 20px #f06292, 0 0 30px #f06292;
        }
        
        .neon-cyan {
            color: #26c6da;
            text-shadow: 0 0 10px #26c6da, 0 0 20px #26c6da, 0 0 30px #26c6da;
        }
        
        .neon-yellow {
            color: #ffd700;
            text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
        }
        
        /* Glass Morphism Space Cards */
        .space-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        .space-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(138, 43, 226, 0.3);
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(138, 43, 226, 0.2);
        }
        
        /* 3D Holographic Effects */
        .holographic {
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
            background-size: 200% 200%;
            animation: hologram 3s ease-in-out infinite;
        }
        
        @keyframes hologram {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        /* Cosmic Animations */
        .orbit {
            animation: orbit 20s linear infinite;
        }
        
        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
        }
        
        .pulse-cosmic {
            animation: pulse-cosmic 2s ease-in-out infinite;
        }
        
        @keyframes pulse-cosmic {
            0%, 100% { 
                transform: scale(1);
                box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
            }
            50% { 
                transform: scale(1.05);
                box-shadow: 0 0 40px rgba(138, 43, 226, 0.6);
            }
        }
        
        .float-cosmic {
            animation: float-cosmic 6s ease-in-out infinite;
        }
        
        @keyframes float-cosmic {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-20px) rotate(5deg); }
            66% { transform: translateY(-10px) rotate(-5deg); }
        }
        
        /* Typing Animation with Cosmic Effect */
        .cosmic-typing::after {
            content: '|';
            color: #00ffff;
            animation: blink-cosmic 1s infinite;
        }
        
        @keyframes blink-cosmic {
            0%, 50% { opacity: 1; text-shadow: 0 0 10px #00ffff; }
            51%, 100% { opacity: 0; }
        }
        
        /* Space Navigation */
        .space-nav {
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(138, 43, 226, 0.3);
        }
        .space-nav a,
nav a {
    color: #fff;
    transition: color 0.3s, text-shadow 0.1s, transform 0.2s;
    text-decoration: none;
    position: relative;
}

.space-nav a:hover,
nav a:hover {
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff, 0 0 16px #00ffff;
    transform: scale(1.08);
}

.space-nav a::after,
nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #4fc3f7 0%, #ba68c8 100%);
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -4px;
}

.space-nav a:hover::after,
nav a:hover::after {
    width: 100%;
}
        
        /* Cosmic Buttons */
        .cosmic-btn {
            background: linear-gradient(45deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));
            border: 2px solid rgba(138, 43, 226, 0.5);
            color: #ffffff;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .cosmic-btn:hover {
            background: linear-gradient(45deg, rgba(138, 43, 226, 0.4), rgba(75, 0, 130, 0.4));
            border-color: rgba(138, 43, 226, 0.8);
            box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
            transform: translateY(-3px);
        }
        
        .cosmic-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;
        }
        
        .cosmic-btn:hover::before {
            left: 100%;
        }
        
        /* Planet Decorations */
        .planet {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
        }
        
        .planet-1 {
            width: 150px;
            height: 150px;
            background: radial-gradient(circle at 30% 30%, #ff6b6b, #ee5a24);
            top: 10%;
            right: 10%;
            animation: orbit 30s linear infinite;
        }
        
        .planet-2 {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at 30% 30%, #4834d4, #686de0);
            bottom: 20%;
            left: 5%;
            animation: orbit 25s linear infinite reverse;
        }
        
        .planet-3 {
            width: 80px;
            height: 80px;
            background: radial-gradient(circle at 30% 30%, #00d2d3, #01a3a4);
            top: 50%;
            right: 5%;
            animation: orbit 35s linear infinite;
        }
        
        /* Advanced Scroll Reveal Animations */
        .reveal-cosmic {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .reveal-cosmic.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        
        .reveal-fade-up {
            opacity: 0;
            transform: translateY(60px);
            transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .reveal-fade-up.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        
        .reveal-fade-left {
            opacity: 0;
            transform: translateX(-60px);
            transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .reveal-fade-left.revealed {
            opacity: 1;
            transform: translateX(0);
        }
        
        .reveal-fade-right {
            opacity: 0;
            transform: translateX(60px);
            transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .reveal-fade-right.revealed {
            opacity: 1;
            transform: translateX(0);
        }
        
        .reveal-scale {
            opacity: 0;
            transform: scale(0.8);
            transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .reveal-scale.revealed {
            opacity: 1;
            transform: scale(1);
        }
        
        .reveal-rotate {
            opacity: 0;
            transform: rotate(-10deg) scale(0.9);
            transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .reveal-rotate.revealed {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
        
        /* Parallax Elements */
        .parallax-slow {
            transform: translateY(0);
            transition: transform 0.1s ease-out;
        }
        
        .parallax-medium {
            transform: translateY(0);
            transition: transform 0.1s ease-out;
        }
        
        .parallax-fast {
            transform: translateY(0);
            transition: transform 0.1s ease-out;
        }
        
        /* Stagger Animation Classes */
        .stagger-1 { transition-delay: 0.1s; }
        .stagger-2 { transition-delay: 0.2s; }
        .stagger-3 { transition-delay: 0.3s; }
        .stagger-4 { transition-delay: 0.4s; }
        .stagger-5 { transition-delay: 0.5s; }
        .stagger-6 { transition-delay: 0.6s; }
        
        /* Text Reveal Animations */
        .text-reveal {
            overflow: hidden;
        }
        
        .text-reveal span {
            display: inline-block;
            transform: translateY(100%);
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .text-reveal.revealed span {
            transform: translateY(0);
        }
        
        /* Counter Animation */
        .counter {
            font-variant-numeric: tabular-nums;
        }
        
        /* Magnetic Effect */
        .magnetic {
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        /* Scroll Progress Bar */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, #8a2be2, #00ffff, #f06292);
            z-index: 9999;
            transition: width 0.1s ease-out;
        }
        
        /* Skill Cards with Cosmic Theme */
        .skill-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(138, 43, 226, 0.2);
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
        }
        
        .skill-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent, rgba(138, 43, 226, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s;
        }
        
        .skill-card:hover::before {
            transform: translateX(100%);
        }
        
        .skill-card:hover {
            background: rgba(138, 43, 226, 0.1);
            border-color: rgba(138, 43, 226, 0.5);
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(138, 43, 226, 0.3);
        }
        
        /* Project Cards with Space Theme */
        .project-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.5s ease;
            position: relative;
        }
        
        .project-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(0, 255, 255, 0.5);
            transform: translateY(-15px) rotateX(5deg);
            box-shadow: 0 25px 50px rgba(0, 255, 255, 0.2);
        }
        
        /* Galaxy Background for Sections */
        .galaxy-section {
            background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.1) 0%, rgba(75, 0, 130, 0.05) 30%, transparent 70%);
            position: relative;
        }
        
        /* Cosmic Loading Animation */
        .cosmic-loader {
            width: 60px;
            height: 60px;
            border: 3px solid rgba(138, 43, 226, 0.3);
            border-top: 3px solid #8a2be2;
            border-radius: 50%;
            animation: cosmic-spin 1s linear infinite;
        }
        
        @keyframes cosmic-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .space-font {
                font-size: 0.9em;
            }
            
            .planet {
                display: none;
            }
            
            .star.large {
                width: 2px;
                height: 2px;
            }
        }
        
        /* Achievement Section Styles */
        .achievement-badge {
            font-size: 2rem;
            opacity: 0.3;
            filter: drop-shadow(0 0 10px currentColor);
        }
        
        .achievement-card {
            position: relative;
            overflow: hidden;
        }
        
        .achievement-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(138, 43, 226, 0.1), transparent);
            transition: left 0.6s;
        }
        
        .achievement-card:hover::before {
            left: 100%;
        }
        
        .achievement-icon {
            animation: achievement-pulse 2s ease-in-out infinite;
        }
        
        @keyframes achievement-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .timeline-line {
            animation: timeline-glow 3s ease-in-out infinite;
        }
        
        @keyframes timeline-glow {
            0%, 100% { box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); }
            50% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.8); }
        }
        
        /* Education Section Styles */
        .education-card {
            perspective: 1000px;
            transition: all 0.6s ease;
        }
        
        .education-container {
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }
        
        .education-card:hover .education-container {
            transform: rotateY(5deg) rotateX(5deg);
        }
        
        .education-front {
            backface-visibility: hidden;
            position: relative;
        }
        
        .education-icon {
            animation: education-float 4s ease-in-out infinite;
        }
        
        @keyframes education-float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
        }
        
        .certification-item {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .certification-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
            transition: left 0.5s;
        }
        
        .certification-item:hover::before {
            left: 100%;
        }
        
       /* Knowledge Constellation Styles */
.knowledge-orbit {
    position: absolute;
    border: 3px solid rgba(138, 43, 226, 0.3);
    border-radius: 50%;
    animation: knowledge-rotate 20s linear infinite;
}

.orbit-1 { width: 120px; height: 120px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.orbit-2 { width: 160px; height: 160px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-duration: 25s; animation-direction: reverse; }
.orbit-3 { width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-duration: 30s; }
.orbit-4 { width: 240px; height: 240px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-duration: 35s; animation-direction: reverse; }

@keyframes knowledge-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Planet container */
.knowledge-planet {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: knowledge-counter-rotate 20s linear infinite;
}

/* Planet positions outside orbit */
.planet-frontend { top: -40px; left: 50%; transform: translateX(-50%); }
.planet-backend { top: 50%; right: -40px; transform: translateY(-50%); animation-duration: 25s; animation-direction: reverse; }
.planet-database { bottom: -40px; left: 50%; transform: translateX(-50%); animation-duration: 30s; }
.planet-tools { top: 50%; left: -40px; transform: translateY(-50%); animation-duration: 35s; animation-direction: reverse; }

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

/* Skill Sphere Style */
.knowledge-planet-skill-sphere {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:transparent;
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid white;
    transition: transform 0.3s, border-color 0.3s;
}

.knowledge-planet-skill-sphere:hover {
    transform: scale(1.2);
    border-color: rgba(0,255,255,0.6);
}

/* Center */
.knowledge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.3), rgba(75, 0, 130, 0.5));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(0, 255, 255, 0.5);
    animation: knowledge-center-pulse 3s ease-in-out infinite;
}

@keyframes knowledge-center-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
    50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 30px rgba(0, 255, 255, 0.8); }
}


        
        /* Neon Green Color */
        .neon-green {
            color: #00ff00;
            text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
        }
        
        /* Interactive Hover Effects */
        .achievement-item:hover .achievement-card {
            transform: translateY(-5px) scale(1.02);
        }
        
        .education-card:hover {
            transform: translateY(-10px);
        }
        
        /* Mobile Responsiveness for New Sections */
        @media (max-width: 768px) {
            .achievement-item {
                flex-direction: column;
                text-align: center;
            }
            
            .achievement-item .w-1\/2 {
                width: 100%;
                padding: 0;
                margin-bottom: 1rem;
            }
            
            .timeline-line {
                display: none;
            }
            
            .achievement-node {
                position: relative;
                margin: 1rem auto;
            }
            
            .knowledge-orbit {
                display: none;
            }
            
            .knowledge-center {
                position: relative;
                transform: none;
                margin: 2rem auto;
            }
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.5);
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #8a2be2, #4b0082);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(45deg, #9932cc, #6a0dad);
        }
        /* ...existing CSS... */

/* Contact Form Styles */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(30, 41, 59, 0.8);
    color: #fff;
    border: 1px solid #4fc3f7;
    font-size: 1rem;
    margin-bottom: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

#contactForm input[type="text"]:focus,
#contactForm input[type="email"]:focus,
#contactForm textarea:focus {
    border-color: #ba68c8;
    background: rgba(30, 41, 59, 1);
}

#contactForm textarea {
    min-height: 120px;
    resize: vertical;
}

#contactForm button[type="submit"] {
    background: linear-gradient(90deg, #4fc3f7 0%, #ba68c8 100%);
    color: #fff;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(76, 195, 247, 0.2);
    transition: background 0.3s, transform 0.2s;
}

#contactForm button[type="submit"]:hover {
    background: linear-gradient(90deg, #ba68c8 0%, #4fc3f7 100%);
    transform: scale(1.05);
}

/* ...rest of your CSS... */
/* Subtle glow for main texts */
.text-glow {
  text-shadow: 
    0 0 6px rgba(255, 255, 255, 0.6),   /* light halo */
    0 0 12px rgba(0, 0, 0, 0.8);       /* contrast outline */
}

/* Neon cyan glow */
.neon-cyan {
  color: #00ffff;
  text-shadow: 
    0 0 0px #00ffff,
    0 0 8px rgba(0, 255, 255, 0.5);
}

/* Neon purple glow */
.neon-purple {
  color: #af6aef;
  text-shadow: 
    0 0 0px #a855f7,
    0 0 8px rgba(168, 85, 247, 0.5);
}