:root {
            --primary: #00bfff; /* Soft cyan blue */
            --bg: #0c1220;
            --card-bg: #161b22;
            --text: #e6edf3;
            --text-secondary: #8b949e;
            --code-bg: #1e1e1e; /* VS Code editor background */
        }
       
        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }
       #hero {
    background: url('../images/background\ 1.jpg') center/cover no-repeat fixed;
}

/* Dark overlay so text remains readable on bright images */
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 14, 23, 0.7); /* Adjust opacity (last value) if needed */
    z-index: 1;
}
        h1, h2, h5 {
            font-family: 'Orbitron', sans-serif;
        }
       
        .heading-glow {
            text-shadow: 0 0 65px rgba(228, 20, 20, 0.288);
            color: white;
        }
       
       
        .card {
            background: var(--card-bg);
            border: 1px solid #30363d;
            border-radius: 12px;
            transition: all 0.4s ease;
            cursor: pointer;
        }
       
        .card:hover {
            transform: translateY(-10px) scale(1.05);
            border-color: var(--primary);
            box-shadow: 0 10px 30px rgba(0, 191, 255, 0.2);
        }
       
        .btn-primary-custom {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
            transition: all 0.3s;
        }
       
        .btn-primary-custom:hover {
            background: var(--primary);
            color: #000;
            box-shadow: 0 0 20px rgba(0, 191, 255, 0.4);
            transform: rotate(5deg);
        }
       
        nav {
            background: rgba(10, 14, 23, 0.8) !important;
            backdrop-filter: blur(2px);
        }
       
        .nav-link {
            color: var(--text-secondary) !important;
        }
       
        .nav-link:hover {
            color: var(--primary) !important;
        }
       
        .social-icon {
            color: var(--text-secondary);
            font-size: 1.5rem;
            margin: 0 15px;
            transition: all 0.3s;
        }
       
        .social-icon:hover {
            color: var(--primary);
            transform: translateY(-5px) rotate(360deg);
        }
       
        section { padding: 80px 0; }
       
        /* Starfield Canvas */
        #starfield {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: -1;
            pointer-events: none;
        }
      
       
        @keyframes typing {
            0% { width: 0; }
            40% { width: 100%; }
            60% { width: 100%; }
            100% { width: 0; }
        }
       
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--primary); }
        }
       
        /* Additional Futuristic Animations */
        .fade-in {
            animation: fadeIn 1.5s ease-in-out;
            
        }
       
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
       
        .pulse-glow {
            animation: pulseGlow 2s infinite alternate;
        }
       
        @keyframes pulseGlow {
            from { text-shadow: 0 0 5px rgba(0, 191, 255, 0.2); }
            to { text-shadow: 0 0 20px rgba(0, 191, 255, 0.6); }
        }
       
        .hero-bg {
            background: linear-gradient(135deg, var(--bg), #001f3f);
            animation: gradientShift 10s ease infinite;
        }
       
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
       
        /* Code Snippet - VS Code-like Text Editor Style */
        .code-editor {
            background: var(--code-bg);
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            margin-top: 30px;
            height: 180px;
        }
       
        .editor-header {
            background: #252526;
            padding: 8px 15px;
            border-bottom: 1px solid #3c3c3c;
            font-size: 0.9rem;
            color: #ccc;
        }
       
        .editor-header .dots {
            display: inline-block;
        }
       
        .editor-header .dot {
            height: 12px;
            width: 12px;
            background-color: #ff5f56;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
        }
       
        .editor-header .dot.yellow { background-color: #ffbd2e; }
        .editor-header .dot.green { background-color: #27c93f; }
       
        pre {
            margin: 0 !important;
            padding: 20px !important;
            background: var(--code-bg) !important;
            border-radius: 0 !important;
        }
       
        code {
            font-size: 0.95rem !important;
        }

        /* Perfect Circular Profile Picture */
/* Perfect Circular Profile Picture */
.profile-wrapper {
    width: 280px;           /* Adjust size as needed */
    height: 280px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid var(--primary);
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.4);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Ensures perfect circle, no distortion */
    display: block;
}

/* Optional: Slight entrance zoom for profile pic */
.profile-wrapper.animate__fadeIn {
    animation-duration: 1.2s;
}
       
        /* Typewriter animation for code snippet */
        #code-content {
            white-space: pre-wrap;
            overflow: hidden;
            border-right: 0.15em solid var(--primary);
            animation: code-typing 10s steps(400) infinite, blink-caret 0.75s step-end infinite;
        }
       
        @keyframes code-typing {
            0% { width: 0; }
            40% { width: 100%; }
            60% { width: 100%; }
            100% { width: 0; }
            
        }