/* Base Styles: Midnight Navy Background */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0C1021; /* Midnight Navy */
            color: #E9EEF5; /* Light Silver */
            overflow-x: hidden;
        }

        /* Custom Tailwind Configuration */
        .neon-glow-shadow {
            box-shadow: 0 0 10px rgba(25, 230, 255, 0.5), 0 0 20px rgba(25, 230, 255, 0.2);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .neon-glow-hover:hover {
            box-shadow: 0 0 15px rgba(25, 230, 255, 0.7), 0 0 30px rgba(25, 230, 255, 0.4);
            transform: translateY(-2px);
        }

        /* Glassmorphism Effect */
        .glass-card {
            background-color: rgba(255, 255, 255, 0.05); /* Very light, transparent white */
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Hero Animated Background (Subtle Matrix/Grid Pattern) */
.hero-bg {
    background-image: url('https://i.pinimg.com/736x/0d/07/4c/0d074c6432364edab15a1ecbc7072131.jpg');
    background-size: cover; /* cover entire hero section */
    background-position: center; /* center the image */
    background-repeat: no-repeat; /* do not tile */
    min-height: 100vh; /* full viewport height */
}


        /* Text Gradients */
        .text-gradient {
            background-image: linear-gradient(90deg, #19E6FF, #1B4DF5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }

        /* Tech Stack Logos - Monochrome Glow */
        .tech-logo {
            filter: grayscale(100%) brightness(150%);
            transition: filter 0.3s, transform 0.3s;
        }
        .tech-logo:hover {
            filter: grayscale(0%) brightness(100%) drop-shadow(0 0 8px #19E6FF);
            transform: scale(1.05);
        }

        /* Style for Scroll Reveal (Simulated Fade-Up) */
        .fade-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .visible {
            opacity: 1;
            transform: translateY(0);
        }


        @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.animate-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}