/* CSS Variables for Dark Theme with Moon-inspired Colors */
:root {
    /* Deep Space Cyber Theme */
    --primary-color: #00f3ff;
    /* Neon Cyan */
    --primary-dark: #00c0cc;
    /* Deep Cyan */
    --secondary-color: #bc13fe;
    /* Neon Magenta */
    --accent-color: #fbbf24;
    /* Golden accent (kept for warmth) */

    --text-primary: #ffffff;
    /* Pure White */
    --text-secondary: #e2e8f0;
    /* Light Blue-Grey */
    --text-light: #94a3b8;
    /* Muted Blue-Grey */

    --bg-primary: #050510;
    /* Deepest Space Blue */
    --bg-secondary: #0a0a1a;
    /* Dark Space Blue */
    --bg-tertiary: #11112b;
    /* Lighter Space Blue */

    --border-color: rgba(0, 243, 255, 0.2);
    /* Cyan Glow Border */

    --shadow-light: 0 4px 14px 0 rgba(0, 243, 255, 0.15);
    --shadow-medium: 0 6px 20px rgba(0, 243, 255, 0.2);
    --shadow-large: 0 10px 30px rgba(188, 19, 254, 0.25);

    --gradient-primary: linear-gradient(135deg, #00f3ff 0%, #bc13fe 100%);
    /* Cyber Gradient */
    --gradient-secondary: linear-gradient(135deg, #bc13fe 0%, #00f3ff 100%);
    /* Reverse Cyber Gradient */
}


/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: #050510;
    /* Ensure dark background */
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: transparent;
    transition: all 0.3s ease;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(5, 5, 16, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-logo a:hover {
    color: var(--primary-dark);
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    margin: 3px 0;
    transition: 0.3s;
}


/* Home Section */
.home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: transparent;
    /* Changed to transparent for Galaxy effect */
    position: relative;
    overflow: hidden;
}

.home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    /* Hidden for Galaxy effect */
    pointer-events: none;
}

.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.home-content {
    animation: fadeInUp 1s ease;
}

.home-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow:
        2px 2px 0px #00c0cc,
        4px 4px 0px rgba(0, 0, 0, 0.2);
}

.highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 243, 255, 0.3);
    background-size: 200% auto;
    animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
    to {
        background-position: 200% center;
    }
}

.home-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.typewriter-container {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

.ghost-text {
    opacity: 0;
    visibility: visible;
    color: transparent;
}

.typewriter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    white-space: inherit;
    /* Inherit nowrap/normal from parent/media query */
    -webkit-text-fill-color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    pointer-events: none;
}

.typewriter::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: var(--primary-color);
    margin-left: 4px;
    vertical-align: -0.1em;
    /* Adjust alignment to match text baseline */
    animation: caretBlink 1s infinite;
}

@keyframes caretBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

.home-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.home-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Premium Button Styles */
/* Rotating Border Animation */
@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

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

.btn {
    position: relative;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    color: white;
    z-index: 1;
    border: none;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(0);
    background: transparent;
    letter-spacing: 0.5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* The rotating light */
.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: conic-gradient(from 0deg, transparent 0%, transparent 80%, var(--primary-color) 100%);
    transform: translate(-50%, -50%);
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* The inner background */
.btn::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 48px;
    background: var(--bg-primary);
    z-index: -1;
    transition: all 0.3s ease;
}

.btn:hover::before {
    opacity: 1;
    animation: rotate 3s linear infinite;
    background: conic-gradient(from 0deg, transparent 0%, transparent 70%, #fff 100%);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn:active {
    transform: scale(0.95);
}

.btn-primary::after {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(188, 19, 254, 0.2));
}

.btn-primary:hover::after {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.4), rgba(188, 19, 254, 0.4));
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
}

.btn-secondary::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.btn-secondary:hover::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

/* Cyber Command Center (Home Revamp) */
.home-container {
    perspective: 1000px;
}

.cyber-command-panel {
    background: rgba(10, 10, 25, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 243, 255, 0.2);
    padding: 50px;
    border-radius: 10px;
    position: relative;
    clip-path: polygon(30px 0, 100% 0,
            100% calc(100% - 30px), calc(100% - 30px) 100%,
            0 100%, 0 30px);
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.1);
    max-width: 800px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.cyber-command-panel:hover {
    transform: translateZ(20px) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0 80px rgba(0, 243, 255, 0.2);
    border-color: rgba(0, 243, 255, 0.5);
}

.cyber-command-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-top: 3px solid var(--primary-color);
    border-left: 3px solid var(--primary-color);
    filter: drop-shadow(0 0 5px var(--primary-color));
}

.cyber-command-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid var(--primary-color);
    border-right: 3px solid var(--primary-color);
    filter: drop-shadow(0 0 5px var(--primary-color));
}

.panel-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 243, 255, 0.2);
    padding-bottom: 10px;
}

.status-indicator {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--primary-color);
    letter-spacing: 1px;
}

/* Glitch Text */
.glitch-wrapper {
    display: inline-block;
}

.glitch-text {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
}

.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 900px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 900px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(12px, 9999px, 5px, 0);
    }

    5% {
        clip: rect(54px, 9999px, 23px, 0);
    }

    10% {
        clip: rect(8px, 9999px, 86px, 0);
    }

    15% {
        clip: rect(43px, 9999px, 12px, 0);
    }

    20% {
        clip: rect(0, 0, 0, 0);
    }

    100% {
        clip: rect(0, 0, 0, 0);
    }
}

/* Holo Pedestal */
.holo-pedestal-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pedestal-base {
    width: 220px;
    height: 15px;
    background: radial-gradient(ellipse at center, rgba(0, 243, 255, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    margin-top: -20px;
    box-shadow: 0 0 20px var(--primary-color);
    animation: pulse-glow 2s infinite;
}

.hologram-light {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 350px;
    background: linear-gradient(to top, rgba(0, 243, 255, 0.1), transparent);
    clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
    pointer-events: none;
    z-index: -1;
}

.home-image {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInRight 1s ease;
}

/* Cyber Scroll Indicator */
.cyber-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.8;
}

.mouse-icon {
    width: 30px;
    height: 50px;
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 2px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 2s infinite;
}

@keyframes scroll-wheel {
    0% {
        top: 10px;
        opacity: 1;
    }

    100% {
        top: 30px;
        opacity: 0;
    }
}

.arrow-down span {
    display: block;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid var(--secondary-color);
    border-right: 2px solid var(--secondary-color);
    transform: rotate(45deg);
    margin: -5px;
    animation: arrow-scroll 2s infinite;
}

.arrow-down span:nth-child(2) {
    animation-delay: 0.2s;
}

.arrow-down span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes arrow-scroll {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-5px, -5px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(5px, 5px);
    }
}

/* Floating Tech Elements */
.floating-tech-element {
    position: absolute;
    color: rgba(0, 243, 255, 0.3);
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    pointer-events: none;
    animation: float-random 10s infinite linear;
}

.fte-1 {
    top: 20%;
    left: 10%;
    animation-duration: 15s;
}

.fte-2 {
    top: 60%;
    right: 10%;
    animation-duration: 20s;
    animation-direction: reverse;
}

.fte-3 {
    bottom: 20%;
    left: 20%;
    animation-duration: 12s;
}

@keyframes float-random {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -50px) rotate(10deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* System Metrics Sidebar */

.cyber-sidebar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
}

.cyber-sidebar.left {
    left: 50px;
}

.cyber-sidebar.right {
    right: 50px;
    align-items: center;
}

.social-link-item a {
    color: var(--text-secondary);
    font-size: 1.5rem;
    transition: all 0.3s ease;
    display: block;
}

.social-link-item a:hover {
    color: var(--primary-color);
    transform: scale(1.2);
    text-shadow: 0 0 10px var(--primary-color);
}

.social-line {
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom, var(--primary-color), transparent);
    margin: 10px 0;
}

.sidebar-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--primary-color);
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: bold;
}

/* Scanner Line */
.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
    box-shadow: 0 0 20px var(--primary-color);
    z-index: 15;
    animation: scan-vertical 3s linear infinite;
    opacity: 0.8;
    pointer-events: none;
}

@keyframes scan-vertical {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}



.metric-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-label {
    font-family: 'Courier New', monospace;
    color: var(--primary-color);
    font-size: 0.8rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.metric-bar {
    width: 6px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.metric-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-color);
    animation: metric-pulse 2s infinite alternate;
}

@keyframes metric-pulse {
    0% {
        height: 40%;
        opacity: 0.7;
    }

    100% {
        height: 80%;
        opacity: 1;
    }
}

/* Running Code Log */
.code-log-container {
    position: absolute;
    bottom: 100px;
    right: 50px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: rgba(0, 243, 255, 0.5);
    text-align: right;
    pointer-events: none;
}

.code-line {
    margin-bottom: 5px;
    opacity: 0;
    animation: fade-in-up 0.5s forwards;
}

.code-line:nth-child(1) {
    animation-delay: 0.5s;
}

.code-line:nth-child(2) {
    animation-delay: 1.5s;
}

.code-line:nth-child(3) {
    animation-delay: 2.5s;
}

.code-line:nth-child(4) {
    animation-delay: 3.5s;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Hide */
@media (max-width: 768px) {

    .cyber-sidebar,
    .code-log-container,
    .floating-tech-element {
        display: none;
    }
}

.profile-placeholder {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(12, 15, 25, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.35),
        0 8px 40px rgba(0, 0, 0, 0.2);
    overflow: visible;
    border: 3px solid transparent;
    background-image: linear-gradient(rgba(12, 15, 25, 0.85), rgba(12, 15, 25, 0.85)),
        linear-gradient(135deg, #4a90a4, #2d5a6b);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.profile-placeholder img,
.profile-placeholder video {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}

/* Rotating tech ring - Clockwise */
.profile-placeholder::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 180, 220, 0.3);
    animation: spinClockwise 20s linear infinite;
}

/* Rotating tech ring - Counter-clockwise */
.profile-placeholder::after {
    content: '';
    position: absolute;
    top: -18px;
    left: -18px;
    right: -18px;
    bottom: -18px;
    border-radius: 50%;
    border: 1px solid rgba(140, 80, 180, 0.25);
    border-top-color: rgba(160, 60, 200, 0.45);
    border-right-color: transparent;
    animation: spinCounterClockwise 15s linear infinite;
}

@keyframes spinClockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinCounterClockwise {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* Third rotating ring - opposite to outer ring (clockwise) */
.profile-ring-third {
    position: absolute;
    top: -26px;
    left: -26px;
    right: -26px;
    bottom: -26px;
    border-radius: 50%;
    border: 1px dotted rgba(80, 200, 150, 0.25);
    animation: spinClockwise 12s linear infinite;
    pointer-events: none;
}

@keyframes techRingSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: rotate(45deg);
}

/* Section Styles */
section {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    position: relative;
    text-shadow:
        2px 2px 0px rgba(188, 19, 254, 0.5),
        4px 4px 0px rgba(0, 0, 0, 0.2);
}

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

/* About Section */
.about {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
        radial-gradient(circle at 20% 80%, rgba(167, 139, 250, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(203, 213, 225, 0.05) 0%, transparent 50%); */
    pointer-events: none;
}

/* Education Section */
.education {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.education::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
        linear-gradient(45deg, transparent 48%, rgba(167, 139, 250, 0.03) 49%, rgba(167, 139, 250, 0.03) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(251, 191, 36, 0.03) 49%, rgba(251, 191, 36, 0.03) 51%, transparent 52%);
    background-size: 60px 60px; */
    pointer-events: none;
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.education-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.education-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
}

.education-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}

.education-item:nth-child(odd) {
    flex-direction: row;
}

.education-item:nth-child(even) {
    flex-direction: row-reverse;
}

.education-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-medium);
    flex-shrink: 0;
}

.education-content {
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    margin: 0 2rem;
    flex: 1;
    transition: all 0.3s ease;
}

.education-content:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

.education-item:nth-child(odd) .education-content {
    margin-left: 2rem;
    margin-right: 0;
}

.education-item:nth-child(even) .education-content {
    margin-right: 2rem;
    margin-left: 0;
}

.education-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.education-period {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.education-status {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.education-institution {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 1rem;
}

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

/* Cyber Identity Section */
.cyber-identity {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

.cyber-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    background: rgba(10, 10, 25, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 243, 255, 0.1);
    padding: 50px;
    border-radius: 4px;
    /* Sharper corners for HUD look */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    position: relative;
    animation: cyber-breath 4s ease-in-out infinite alternate;
    clip-path: polygon(0 0, 20px 0, 20px 0, 100% 0,
            100% 20px, 100% 100%,
            calc(100% - 20px) 100%, 0 100%,
            0 calc(100% - 20px));
    /* Tech shape */
}

/* HUD Corners */
.cyber-wrapper::before,
.cyber-wrapper::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid var(--primary-color);
    transition: all 0.3s ease;
}

.cyber-wrapper::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.cyber-wrapper::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

@keyframes cyber-breath {
    0% {
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
        border-color: rgba(0, 243, 255, 0.1);
    }

    100% {
        box-shadow: 0 0 60px rgba(0, 243, 255, 0.3), inset 0 0 20px rgba(0, 243, 255, 0.1);
        border-color: rgba(0, 243, 255, 0.5);
    }
}

/* Holographic Profile */
.holo-profile-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.holo-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed rgba(0, 243, 255, 0.3);
    animation: spin-slow 10s linear infinite;
}

.ring-outer {
    width: 100%;
    height: 100%;
    border-top-color: var(--primary-color);
    border-bottom-color: var(--secondary-color);
}

.ring-inner {
    width: 80%;
    height: 80%;
    border: 2px solid rgba(188, 19, 254, 0.3);
    border-left-color: var(--secondary-color);
    border-right-color: var(--primary-color);
    animation-direction: reverse;
    animation-duration: 8s;
}

.profile-hex {
    width: 220px;
    height: 220px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--bg-secondary);
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 2px solid var(--primary-color);
}

.cyber-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(20%) contrast(1.2);
    transition: all 0.5s ease;
}

.holo-profile-container:hover .cyber-img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.1);
}

.holo-status {
    position: absolute;
    bottom: -20px;
    background: var(--bg-primary);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: 0 0 10px var(--primary-color);
    z-index: 3;
}

/* Circuit Overlay */
.profile-hex::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 243, 255, 0.2) 100%),
        linear-gradient(45deg, transparent 45%, rgba(0, 243, 255, 0.1) 50%, transparent 55%);
    background-size: 100% 100%, 20px 20px;
    z-index: 5;
    pointer-events: none;
}

/* Laser Scan Effect */
.holo-profile-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(0, 243, 255, 0.5), transparent);
    z-index: 4;
    animation: scan-line 3s linear infinite;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    pointer-events: none;
}

@keyframes scan-line {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Cyber Content */
.cyber-content {
    flex: 1;
}

.cyber-header {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.sys-code {
    font-family: 'Courier New', monospace;
    color: var(--secondary-color);
    font-size: 0.9rem;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sys-code:hover {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
    cursor: pointer;
}

.sys-code::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(44px, 9999px, 56px, 0);
    }

    5% {
        clip: rect(12px, 9999px, 89px, 0);
    }

    10% {
        clip: rect(85px, 9999px, 2px, 0);
    }

    15% {
        clip: rect(34px, 9999px, 12px, 0);
    }

    20% {
        clip: rect(0, 0, 0, 0);
    }

    100% {
        clip: rect(0, 0, 0, 0);
    }
}

.cyber-text {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.typing-effect {
    display: inline-block;
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    animation: typing 3s steps(30, end), blink-caret .75s step-end infinite;
    vertical-align: bottom;
    width: 25ch;
    font-family: 'Courier New', monospace;
    color: var(--primary-color);
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 25ch
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--primary-color);
    }
}

.cyber-text .highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* Stats Grid */
.cyber-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.cyber-stat-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.cyber-stat-card:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

.cyber-stat-card:hover .stat-icon {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
    animation: pulse-glow 1s infinite;
}

@keyframes pulse-glow {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.stat-info h4 {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
}

.stat-info span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

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

/* Responsive */
@media (max-width: 992px) {
    .cyber-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

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

    .cyber-stat-card {
        justify-content: center;
    }
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: center;
}

.about-image {
    display: flex;
    justify-content: center;
}

.profile-photo {
    width: 250px;
    height: 250px;
    border-radius: 20px;
    background: var(--gradient-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: white;
    box-shadow: var(--shadow-large);
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.about-text h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.about-text p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

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

.stat {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease;
}

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

.stat h4 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat p {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Skills Section */
.skills {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.skills::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
        radial-gradient(circle at 10% 20%, rgba(167, 139, 250, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(203, 213, 225, 0.04) 0%, transparent 60%); */
    pointer-events: none;
}

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

.skill-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2.5rem 2rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    --skill-glow: var(--primary-color);
    /* Default fallback */
}

/* Dynamic Colors based on icon data-color */
.skill-card:has([data-color="cyan"]) {
    --skill-glow: #00f3ff;
}

.skill-card:has([data-color="green"]) {
    --skill-glow: #00ff9d;
}

.skill-card:has([data-color="orange"]) {
    --skill-glow: #ff9d00;
}

.skill-card:has([data-color="red"]) {
    --skill-glow: #ff0055;
}

.skill-card:has([data-color="yellow"]) {
    --skill-glow: #ffea00;
}

.skill-card:has([data-color="blue"]) {
    --skill-glow: #00a8ff;
}

.skill-card:has([data-color="indigo"]) {
    --skill-glow: #6366f1;
}

.skill-card:has([data-color="purple"]) {
    --skill-glow: #bc13fe;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, var(--skill-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.skill-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--skill-glow);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.5),
        0 0 20px var(--skill-glow),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.skill-card:hover::before {
    opacity: 0.15;
}

.skill-icon {
    font-size: 3.5rem;
    color: var(--skill-glow);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 10px var(--skill-glow));
    transition: all 0.4s ease;
    display: inline-block;
}

.skill-card:hover .skill-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 20px var(--skill-glow));
}

.skill-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.skill-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Skill Progress Bar (Visual Only for now) */
.skill-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--skill-glow);
    width: 0%;
    transition: width 0.6s ease 0.2s;
    box-shadow: 0 0 10px var(--skill-glow);
}

.skill-card:hover::after {
    width: 100%;
}

/* Projects Section */
.projects {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
        linear-gradient(30deg, transparent 24%, rgba(167, 139, 250, 0.05) 25%, rgba(167, 139, 250, 0.05) 26%, transparent 27%, transparent 74%, rgba(251, 191, 36, 0.05) 75%, rgba(251, 191, 36, 0.05) 76%, transparent 77%),
        linear-gradient(-30deg, transparent 24%, rgba(251, 191, 36, 0.05) 25%, rgba(251, 191, 36, 0.05) 26%, transparent 27%, transparent 74%, rgba(167, 139, 250, 0.05) 75%, rgba(167, 139, 250, 0.05) 76%, transparent 77%);
    background-size: 80px 80px; */
    pointer-events: none;
}

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

.project-card {
    background: var(--bg-primary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

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

.project-image {
    height: 200px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
}

.project-content {
    padding: 2rem;
}

.project-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.project-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tech-tag {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

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

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.project-link:hover {
    color: var(--primary-dark);
}

/* Achievements Section */
.achievements {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.achievements::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
        radial-gradient(circle at 30% 70%, rgba(167, 139, 250, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, rgba(203, 213, 225, 0.03) 0%, transparent 40%); */
    pointer-events: none;
}

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

.achievement-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.1) 0%, rgba(188, 19, 254, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.achievement-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow:
        0 10px 30px -10px rgba(0, 243, 255, 0.3),
        0 0 20px rgba(0, 243, 255, 0.1),
        inset 0 0 20px rgba(0, 243, 255, 0.05);
}

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

.achievement-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    background: rgba(0, 243, 255, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 243, 255, 0.2);
}

.achievement-card:hover .achievement-icon {
    background: var(--primary-color);
    color: #000;
    transform: rotateY(180deg);
    box-shadow: 0 0 15px var(--primary-color);
}

.achievement-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 700;
}

.achievement-company {
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 2px;
}

.achievement-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.achievement-date {
    background: rgba(188, 19, 254, 0.1);
    color: var(--secondary-color);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(188, 19, 254, 0.3);
    align-self: flex-start;
    transition: all 0.3s ease;
}

.achievement-card:hover .achievement-date {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 0 10px var(--secondary-color);
}

.credential-id {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.achievement-card:hover .credential-id {
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

.achievement-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.achievement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
}

.verified-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--primary-color);
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px var(--primary-color));
    animation: pulse 2s infinite;
}

.mastery-level {
    width: 100%;
    margin-bottom: 1rem;
}

.mastery-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 3px;
    position: relative;
    box-shadow: 0 0 10px var(--primary-color);
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: shimmer 2s infinite;
}

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

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}



.card-barcode {
    height: 20px;
    width: 60px;
    background: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.5) 0px,
            rgba(255, 255, 255, 0.5) 2px,
            transparent 2px,
            transparent 4px);
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.achievement-card:hover .card-barcode {
    opacity: 0.8;
}

.achievement-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 243, 255, 0.05) 51%, transparent 52%);
    background-size: 100% 200%;
    animation: scanline 3s linear infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.achievement-card:hover::after {
    opacity: 1;
}

@keyframes scanline {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 200%;
    }
}

/* Contact Section */
.contact {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
        linear-gradient(60deg, transparent 40%, rgba(167, 139, 250, 0.04) 41%, rgba(167, 139, 250, 0.04) 42%, transparent 43%),
        linear-gradient(-60deg, transparent 40%, rgba(251, 191, 36, 0.04) 41%, rgba(251, 191, 36, 0.04) 42%, transparent 43%),
        radial-gradient(circle at 80% 20%, rgba(203, 213, 225, 0.02) 0%, transparent 50%);
    background-size: 100px 100px, 100px 100px, 200px 200px; */
    pointer-events: none;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.contact-info p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.contact-item i {
    color: var(--primary-color);
    width: 20px;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.social-link:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

.contact-form {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.contact-form h3 {
    transform: translateZ(20px);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.3s ease;
    transform: translateZ(10px);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.4);
    transform: translateZ(20px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: rgba(5, 5, 16, 0.95);
    backdrop-filter: blur(10px);
    padding: 2rem 0;
    text-align: center;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background:
        radial-gradient(circle at 20% 80%, rgba(167, 139, 250, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.03) 0%, transparent 50%); */
    pointer-events: none;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: var(--bg-primary);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-medium);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .home-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .home-title {
        font-size: 2.5rem;
        white-space: normal;
        word-wrap: break-word;
    }

    .typewriter,
    .ghost-text {
        white-space: normal;
        word-break: break-word;
    }

    .profile-placeholder {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }

    .home-subtitle {
        font-size: 1.2rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

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

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .skills-grid,
    .projects-grid,
    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .education-timeline::before {
        left: 30px;
    }

    .education-item {
        flex-direction: row !important;
        padding-left: 60px;
    }

    .education-item .education-content {
        margin: 0 !important;
        margin-left: 1rem !important;
    }

    .education-icon {
        position: absolute;
        left: 0;
    }

    .home-buttons {
        justify-content: center;
    }

    .project-links {
        flex-direction: column;
    }

    .social-links {
        justify-content: center;
    }
}

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

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

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

    .profile-placeholder {
        width: 250px;
        height: 250px;
        font-size: 4rem;
    }

    .profile-photo {
        width: 200px;
        height: 200px;
        font-size: 4rem;
    }

    .skill-card,
    .project-content,
    .achievement-card,
    .contact-form {
        padding: 1.5rem;
    }
}

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Education Section Premium Styles */
.education {
    background: transparent;
    position: relative;
    padding: 100px 0;
}

.education-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Neon Vertical Line */
.education-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
            transparent,
            var(--primary-color),
            var(--secondary-color),
            transparent);
    transform: translateX(-50%);
    box-shadow: 0 0 15px var(--primary-color);
}

.education-item {
    display: flex;
    flex-direction: row;
    /* Explicitly set row */
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    width: 100%;
}

/* Left Side Items */
.education-item.left {
    justify-content: flex-start !important;
    padding-right: 50px;
    flex-direction: row !important;
}

.education-item.left .education-card {
    text-align: left;
    /* Reset to left */
    margin-right: 20px;
}

.education-item.left .education-header {
    flex-direction: row !important;
}

.education-item.left .education-tags {
    justify-content: flex-start;
    /* Reset to start */
}

/* Right Side Items */
.education-item.right {
    justify-content: flex-end !important;
    padding-left: 50px;
    flex-direction: row !important;
}

.education-item.right .education-card {
    text-align: left;
    margin-left: 20px;
    /* Push slightly away from center */
}

.education-item.right .education-header {
    flex-direction: row !important;
}

.education-item.right .education-tags {
    justify-content: flex-start;
}

/* Glowing Dot - Pulsing */
.education-dot {
    position: absolute;
    left: 50%;
    width: 24px;
    height: 24px;
    background: var(--bg-primary);
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 15px var(--primary-color);
    transition: all 0.3s ease;
}

.education-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    transition: 0.3s;
}

.education-item:hover .education-dot {
    background: var(--primary-color);
    box-shadow: 0 0 30px var(--primary-color), 0 0 60px var(--secondary-color);
    transform: translateX(-50%) scale(1.3);
}

.education-item:hover .education-dot::after {
    opacity: 1;
    background: white;
}

/* Date Label */
.education-date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5, 5, 16, 0.8);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    top: -35px;
    z-index: 2;
    backdrop-filter: blur(5px);
}

/* Glassmorphism Card - Premium Update */
.education-card {
    width: 45%;
    background: linear-gradient(145deg, rgba(10, 10, 25, 0.9), rgba(0, 20, 40, 0.8));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 24px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}

.education-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(0, 243, 255, 0.03), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.education-card:hover::before {
    transform: translateX(100%);
}

.education-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 243, 255, 0.2),
        inset 0 0 20px rgba(0, 243, 255, 0.05);
}

/* Card Header */
.education-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
    /* padding-right added in badge section */
}

.education-item:nth-child(even) .education-header {
    flex-direction: row-reverse;
}

.school-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 243, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.school-info h3 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-weight: 700;
}

.school-info .institution {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: block;
}

/* Badge - Absolute Position */
.education-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(188, 19, 254, 0.2));
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: var(--text-primary);
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Card Header - Adjust for Badge */
.education-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
    padding-right: 80px;
    /* Make space for badge */
}

/* Description */
.education-desc {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}



/* Tags */
.education-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.education-item:nth-child(even) .education-tags {
    justify-content: flex-end;
}

.education-tags span {
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.education-tags span:hover {
    background: rgba(0, 243, 255, 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Responsive */
/* Responsive */
@media (max-width: 768px) {
    .education-timeline::before {
        left: 30px;
    }

    .education-item {
        flex-direction: column !important;
        align-items: flex-start;
        margin-left: 0;
        padding-left: 50px;
        /* Reduced from 60px */
        padding-right: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Reset Left/Right specific styles for mobile */
    .education-item.left,
    .education-item.right {
        justify-content: flex-start !important;
        padding-right: 0;
        padding-left: 50px;
        /* Reduced from 60px */
    }

    .education-item.left .education-card,
    .education-item.right .education-card {
        width: 100%;
        margin: 0;
        text-align: left;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .education-item.left .education-header,
    .education-item.right .education-header {
        flex-direction: row !important;
    }

    .education-item.left .education-tags,
    .education-item.right .education-tags {
        justify-content: flex-start;
    }

    .education-dot {
        left: 30px;
        transform: translateX(-50%);
    }

    .education-date {
        position: relative;
        left: 0;
        transform: none;
        display: inline-block;
        margin-bottom: 10px;
        top: 0;
        margin-left: 10px;
        /* Align with card */
    }

    /* Fix Badge Overlap on Mobile - Place next to Logo */
    .education-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding-right: 0;
    }

    .school-icon {
        order: 1;
    }

    .education-badge {
        order: 2;
        position: relative;
        top: auto;
        right: auto;
        margin: 0;
        display: inline-block;
    }

    .school-info {
        order: 3;
        width: 100%;
        /* Force text to new line for clean layout */
        margin-top: 5px;
    }
}


/* Cyber Badge */
.cyber-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid var(--primary-color);
    padding: 8px 16px;
    border-radius: 20px;
    color: var(--primary-color);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0% {
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 243, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    }
}

/* Tech Ring Outer */
.tech-ring-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 380px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(0, 243, 255, 0.3);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    animation: spin-slow 20s linear infinite reverse;
}

.tech-ring-outer::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color);
}

/* Casual Badge */
.casual-badge {
    position: absolute;
    top: -40px;
    right: -20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: float-badge 3s ease-in-out infinite;
    z-index: 20;
    transform-origin: center bottom;
}

@keyframes float-badge {

    0%,
    100% {
        transform: translateY(0) rotate(5deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* ==========================================
   DARK MODE TOGGLE
   ========================================== */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(0, 243, 255, 0.4);
    background: rgba(10, 10, 25, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.15);
    transition: all 0.4s ease;
}

.dark-mode-toggle:hover {
    transform: rotate(30deg) scale(1.1);
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.3);
}

/* ==========================================
   LIGHT MODE - COMPREHENSIVE OVERRIDES
   ========================================== */

/* --- Core Variables --- */
html.light-mode {
    --bg-primary: #eaecf5;
    --bg-secondary: #dde1ed;
    --bg-tertiary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #2d2d4a;
    --text-light: #555770;
    --border-color: rgba(79, 70, 229, 0.2);
    --primary-color: #4338ca;
    --primary-dark: #3730a3;
    --secondary-color: #6d28d9;
    --shadow-light: 0 4px 14px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-large: 0 10px 40px rgba(0, 0, 0, 0.15);
    --gradient-primary: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    --gradient-secondary: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%);
}

html.light-mode body {
    color: var(--text-primary);
}

/* --- HTML & Background --- */
html.light-mode {
    background-color: #eaecf5;
}

/* --- Sections Backgrounds --- */
html.light-mode .home,
html.light-mode .cyber-identity,
html.light-mode .about,
html.light-mode .education,
html.light-mode .skills,
html.light-mode .projects,
html.light-mode .achievements,
html.light-mode .contact,
html.light-mode .github-repos-section {
    background: var(--bg-primary);
}

/* --- Cards & Panels --- */
html.light-mode .cyber-command-panel {
    background: #ffffff;
    border: 2px solid rgba(79, 70, 229, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(79, 70, 229, 0.06);
    backdrop-filter: blur(10px);
}

html.light-mode .cyber-card,
html.light-mode .skill-card,
html.light-mode .achievement-card,
html.light-mode .education-card,
html.light-mode .cyber-card-separate,
html.light-mode .github-repo-card {
    background: #ffffff;
    border: 1px solid rgba(79, 70, 229, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* --- Headings --- */
html.light-mode .section-title,
html.light-mode .home-title,
html.light-mode h3 {
    color: var(--text-primary);
    text-shadow: none;
}

html.light-mode .section-title {
    text-shadow: 1px 1px 0px rgba(79, 70, 229, 0.2);
}

/* --- Text --- */
html.light-mode .home-subtitle,
html.light-mode .home-description,
html.light-mode p,
html.light-mode .cyber-text,
html.light-mode .section-subtitle {
    color: var(--text-secondary);
}

/* --- Navbar / Pill Nav --- */
html.light-mode .pill-nav-items {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(99, 102, 241, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

html.light-mode .pill-logo {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(99, 102, 241, 0.1);
}

html.light-mode .logo-text {
    background: linear-gradient(90deg, #1a1a2e, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

html.light-mode .pill {
    color: #4a4a6a;
    border-right-color: rgba(99, 102, 241, 0.1);
}

html.light-mode .pill:hover {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    text-shadow: none;
    box-shadow: inset 0 0 10px rgba(79, 70, 229, 0.1);
}

html.light-mode .pill.is-active::after {
    background: #4f46e5;
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}

html.light-mode .pill .pill-label-hover {
    color: #4f46e5;
}

html.light-mode .mobile-menu-button {
    background: rgba(79, 70, 229, 0.1);
}

html.light-mode .hamburger-line {
    background: #1a1a2e;
}

html.light-mode .mobile-menu-popover {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(99, 102, 241, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

html.light-mode .mobile-menu-popover .mobile-menu-link {
    color: #4a4a6a;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

html.light-mode .mobile-menu-popover .mobile-menu-link:hover {
    background-color: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
    text-shadow: none;
}

/* --- Home Section --- */
html.light-mode .home-title {
    text-shadow: 1px 1px 0px rgba(79, 70, 229, 0.3);
}

html.light-mode .highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

html.light-mode .typewriter {
    -webkit-text-fill-color: var(--primary-color);
    text-shadow: none;
}

html.light-mode .typewriter::after {
    background-color: var(--primary-color);
}

html.light-mode .glitch-text {
    color: #1a1a2e;
}

html.light-mode .glitch-text::before,
html.light-mode .glitch-text::after {
    background: var(--bg-primary);
}

html.light-mode .glitch-text::before {
    text-shadow: -1px 0 #7c3aed;
}

html.light-mode .glitch-text::after {
    text-shadow: -1px 0 #4f46e5;
}

/* --- Cyber Command Panel --- */
html.light-mode .panel-header {
    border-bottom-color: rgba(99, 102, 241, 0.15);
}

html.light-mode .status-indicator {
    color: var(--primary-color);
}

html.light-mode .cyber-command-panel::before {
    border-top-color: var(--primary-color);
    border-left-color: var(--primary-color);
    filter: none;
}

html.light-mode .cyber-command-panel::after {
    border-bottom-color: var(--primary-color);
    border-right-color: var(--primary-color);
    filter: none;
}

/* --- Buttons --- */
html.light-mode .btn::after {
    background: var(--bg-tertiary);
}

html.light-mode .btn {
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html.light-mode .btn:hover::before {
    background: conic-gradient(from 0deg, transparent 0%, transparent 70%, var(--primary-color) 100%);
}

html.light-mode .btn-primary::after {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(124, 58, 237, 0.12));
}

html.light-mode .btn-primary:hover::after {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.25), rgba(124, 58, 237, 0.25));
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.2);
}

html.light-mode .btn-secondary::after {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
}

html.light-mode .btn-secondary:hover::after {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04));
}

/* --- Cyber Sidebar & Social --- */
html.light-mode .social-link-item a {
    color: var(--text-secondary);
}

html.light-mode .social-link-item a:hover {
    color: var(--primary-color);
    text-shadow: none;
}

html.light-mode .social-line {
    background: linear-gradient(to bottom, var(--primary-color), transparent);
}

html.light-mode .sidebar-label {
    color: var(--primary-color);
}

/* --- Scanner Line --- */
html.light-mode .scanner-line {
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
    opacity: 0.3;
}

/* --- Scroll Indicator --- */
html.light-mode .mouse-icon {
    border-color: var(--primary-color);
}

html.light-mode .wheel {
    background: var(--primary-color);
}

html.light-mode .arrow-down span {
    border-color: var(--secondary-color);
}

/* --- Floating Tech Elements --- */
html.light-mode .floating-tech-element {
    color: rgba(79, 70, 229, 0.2);
}

/* --- Profile Placeholder --- */
html.light-mode .profile-placeholder {
    background: rgba(245, 247, 250, 0.9);
    background-image: linear-gradient(rgba(245, 247, 250, 0.9), rgba(245, 247, 250, 0.9)),
        linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.05);
}

html.light-mode .profile-placeholder::before {
    border-color: rgba(79, 70, 229, 0.25);
}

html.light-mode .profile-placeholder::after {
    border-color: rgba(124, 58, 237, 0.2);
    border-top-color: rgba(124, 58, 237, 0.35);
}

html.light-mode .profile-ring-third {
    border-color: rgba(79, 70, 229, 0.15);
}

html.light-mode .casual-badge {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(99, 102, 241, 0.15);
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* --- Pedestal & Hologram --- */
html.light-mode .pedestal-base {
    background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.15);
}

html.light-mode .hologram-light {
    background: linear-gradient(to top, rgba(79, 70, 229, 0.05), transparent);
}

/* --- Metric Bars --- */
html.light-mode .metric-bar {
    background: rgba(0, 0, 0, 0.06);
}

html.light-mode .metric-fill {
    background: var(--secondary-color);
    box-shadow: 0 0 6px var(--secondary-color);
}

html.light-mode .metric-label {
    color: var(--primary-color);
}

/* --- Code Log --- */
html.light-mode .code-log-container {
    color: rgba(79, 70, 229, 0.35);
}

/* --- Skill Cards --- */
html.light-mode .skill-card {
    background: var(--bg-tertiary);
    border-color: rgba(99, 102, 241, 0.1);
}

html.light-mode .skill-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 15px rgba(79, 70, 229, 0.1);
}

html.light-mode .skill-card h3 {
    text-shadow: none;
}

/* --- Achievement Cards --- */
html.light-mode .achievement-card {
    background: var(--bg-tertiary);
}

html.light-mode .credential-id {
    color: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1);
}

html.light-mode .progress-bar {
    background: rgba(0, 0, 0, 0.06);
}

/* --- Cyber Badge --- */
html.light-mode .cyber-badge {
    background: rgba(79, 70, 229, 0.08);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.1);
}

/* --- Tech Ring --- */
html.light-mode .tech-ring-outer {
    border-color: rgba(79, 70, 229, 0.15);
}

html.light-mode .tech-ring-outer::before {
    background: var(--primary-color);
    box-shadow: 0 0 6px var(--primary-color);
}

/* --- Contact Form --- */
html.light-mode .contact-form {
    background: #ffffff;
    border: 1px solid rgba(79, 70, 229, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

html.light-mode .form-group input,
html.light-mode .form-group textarea {
    background: #f3f4f8;
    border: 1.5px solid rgba(79, 70, 229, 0.2);
    color: var(--text-primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

html.light-mode .form-group input:focus,
html.light-mode .form-group textarea:focus {
    background: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
}

html.light-mode .form-group input::placeholder,
html.light-mode .form-group textarea::placeholder {
    color: #8b8fa8;
}

/* --- Cyber Input (contact-cyber) --- */
html.light-mode .cyber-input {
    background: #f3f4f8;
    border: 1.5px solid rgba(79, 70, 229, 0.2);
    color: var(--text-primary);
}

html.light-mode .cyber-input:focus {
    background: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
}

html.light-mode .cyber-input::placeholder {
    color: #8b8fa8;
}

/* --- Contact Cyber Cards --- */
html.light-mode .cyber-card-separate {
    background: #ffffff;
    border: 1px solid rgba(79, 70, 229, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
}

html.light-mode .cyber-card-separate::before {
    background: linear-gradient(45deg, transparent, var(--primary-color), transparent);
    opacity: 0.3;
}

html.light-mode .cyber-contact-info {
    background: rgba(67, 56, 202, 0.03);
}

html.light-mode .cyber-social-link {
    background: rgba(67, 56, 202, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.2);
    color: var(--text-primary);
}

html.light-mode .cyber-social-link:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 15px rgba(67, 56, 202, 0.3);
}

/* --- Resume Button --- */
html.light-mode .cyber-resume-btn {
    background: rgba(79, 70, 229, 0.04);
    color: var(--primary-color);
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.08);
}

html.light-mode .cyber-resume-btn::after {
    background: rgba(255, 255, 255, 0.95);
}

html.light-mode .cyber-resume-btn:hover {
    color: var(--primary-color);
    text-shadow: none;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

html.light-mode .cyber-resume-btn:hover i {
    color: var(--primary-color);
    filter: none;
}

/* --- Submit Button --- */
html.light-mode .cyber-submit-btn {
    background: rgba(79, 70, 229, 0.04);
    color: var(--primary-color);
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.08);
}

html.light-mode .cyber-submit-btn::after {
    background: rgba(255, 255, 255, 0.95);
}

html.light-mode .cyber-submit-btn:hover {
    color: #fff;
    background: var(--primary-color);
    text-shadow: none;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.2);
}

html.light-mode .cyber-submit-btn:hover i {
    color: #fff;
    filter: none;
}

/* --- Holo Globe --- */
html.light-mode .holo-globe,
html.light-mode .holo-globe::before,
html.light-mode .holo-globe::after {
    border-color: rgba(79, 70, 229, 0.12);
}

/* --- Data Stream --- */
html.light-mode .data-stream {
    background: linear-gradient(180deg, transparent 0%, rgba(79, 70, 229, 0.04) 50%, transparent 100%);
}

/* --- Project Cards --- */
html.light-mode .cyber-card {
    background: var(--bg-tertiary);
    border-color: rgba(99, 102, 241, 0.12);
}

html.light-mode .cyber-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 8px rgba(79, 70, 229, 0.15);
}

html.light-mode .card-content h3 {
    color: var(--text-primary);
    text-shadow: none;
}

html.light-mode .card-content p {
    color: var(--text-secondary);
}

html.light-mode .card-overlay {
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.85) 100%);
}

html.light-mode .tech-chip {
    background: rgba(79, 70, 229, 0.06);
    border-color: rgba(99, 102, 241, 0.15);
    color: var(--text-secondary);
}

html.light-mode .cyber-card:hover .tech-chip {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 6px rgba(79, 70, 229, 0.15);
}

html.light-mode .tech-corner {
    border-color: var(--primary-color);
}

html.light-mode .tech-orb {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.15);
}

html.light-mode .status-badge {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(99, 102, 241, 0.15);
    color: var(--text-primary);
}

/* --- Cyber Button --- */
html.light-mode .cyber-btn {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

html.light-mode .cyber-btn:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.25);
}

/* --- Education Section --- */
html.light-mode .education-timeline::before {
    background: linear-gradient(to bottom, transparent, var(--primary-color), var(--secondary-color), transparent);
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.2);
}

html.light-mode .education-dot {
    background: var(--bg-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.2);
}

html.light-mode .education-item:hover .education-dot {
    background: var(--primary-color);
    box-shadow: 0 0 12px var(--primary-color);
}

html.light-mode .education-date {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(99, 102, 241, 0.2);
    color: var(--primary-color);
}

html.light-mode .education-card {
    background: #ffffff;
    border: 1px solid rgba(79, 70, 229, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

html.light-mode .education-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

html.light-mode .education-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

html.light-mode .school-icon {
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary-color);
}

html.light-mode .education-badge {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.1));
    border-color: rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
}

html.light-mode .education-tags span {
    background: rgba(79, 70, 229, 0.05);
    color: var(--text-secondary);
    border-color: rgba(99, 102, 241, 0.1);
}

html.light-mode .education-tags span:hover {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* --- Social Links --- */
html.light-mode .social-link {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

html.light-mode .social-link:hover {
    background: var(--primary-color);
    color: #fff;
}

/* --- Footer --- */
html.light-mode .footer {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-top-color: rgba(99, 102, 241, 0.1);
}

/* --- About Stats --- */
html.light-mode .stat {
    background: var(--bg-tertiary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* --- Dark Mode Toggle --- */
html.light-mode .dark-mode-toggle {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(99, 102, 241, 0.2);
    color: #4f46e5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

html.light-mode .dark-mode-toggle:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

/* --- Galaxy & Grid --- */
html.light-mode #galaxy-bg {
    opacity: 0.06;
}

html.light-mode .cyber-grid-plane {
    opacity: 0.02;
}

/* --- Cyber Detail Item (Contact Info) --- */
html.light-mode .cyber-detail-item:hover {
    background: rgba(79, 70, 229, 0.04);
    border-color: rgba(99, 102, 241, 0.15);
    box-shadow: -5px 0 10px -5px rgba(79, 70, 229, 0.2);
}

html.light-mode .cyber-detail-item i {
    color: var(--primary-color);
    text-shadow: none;
}

/* --- Scan Line --- */
html.light-mode .scan-line {
    background: linear-gradient(to bottom, transparent, rgba(79, 70, 229, 0.3), transparent);
    opacity: 0.1;
}

/* --- Map Background --- */
html.light-mode .cyber-map-bg {
    opacity: 0.4;
}

/* --- Barcode --- */
html.light-mode .card-barcode {
    background: repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.3) 0px,
            rgba(0, 0, 0, 0.3) 2px,
            transparent 2px,
            transparent 4px);
}

/* ==========================================
   LIGHT MODE - ABOUT / CYBER-IDENTITY SECTION
   ========================================== */

/* About Wrapper (HUD Panel) */
html.light-mode .cyber-wrapper {
    background: #ffffff;
    border: 2px solid rgba(79, 70, 229, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(67, 56, 202, 0.06);
    backdrop-filter: none;
    animation: none;
}

html.light-mode .cyber-wrapper::before,
html.light-mode .cyber-wrapper::after {
    border-color: var(--primary-color);
}

/* Cyber Header */
html.light-mode .cyber-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Cyber Stat Cards */
html.light-mode .cyber-stat-card {
    background: #f0f0fb;
    border: 1px solid rgba(79, 70, 229, 0.15);
}

html.light-mode .cyber-stat-card:hover {
    background: rgba(79, 70, 229, 0.08);
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.1);
}

html.light-mode .cyber-stat-card:hover .stat-icon {
    text-shadow: none;
}

/* Holographic Profile */
html.light-mode .holo-ring {
    border-color: rgba(79, 70, 229, 0.15);
}

html.light-mode .ring-outer {
    border-top-color: var(--primary-color);
    border-bottom-color: var(--secondary-color);
}

html.light-mode .ring-inner {
    border-color: rgba(124, 58, 237, 0.15);
    border-left-color: var(--secondary-color);
    border-right-color: var(--primary-color);
}

html.light-mode .profile-hex {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

html.light-mode .profile-hex::before {
    background-image:
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(79, 70, 229, 0.08) 100%),
        linear-gradient(45deg, transparent 45%, rgba(79, 70, 229, 0.04) 50%, transparent 55%);
}

html.light-mode .holo-status {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.15);
}

/* Laser Scan on Profile */
html.light-mode .holo-profile-container::after {
    background: linear-gradient(180deg, transparent, rgba(79, 70, 229, 0.15), transparent);
}

/* Sys Code Link */
html.light-mode .sys-code {
    color: var(--secondary-color);
}

html.light-mode .sys-code:hover {
    color: var(--primary-color);
    text-shadow: none;
}

html.light-mode .sys-code::before {
    background: var(--bg-secondary);
}

/* Cyber Grid Background Lines */
html.light-mode .cyber-identity::before {
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
}

/* Typing Effect */
html.light-mode .typing-effect {
    border-right-color: var(--primary-color);
    color: var(--primary-color);
}

/* ==========================================
   LIGHT MODE - BACKGROUND EFFECTS
   ========================================== */

/* Galaxy Canvas - Nearly invisible */
html.light-mode .galaxy-container {
    opacity: 0.04;
}

/* Particles - Nearly invisible */
html.light-mode #particles-container {
    opacity: 0.15;
}

/* Gradient Blinds - Nearly invisible */
html.light-mode .gradient-blinds-container {
    opacity: 0.06;
}

/* ==========================================
   LIGHT MODE - ORBIT ICONS
   ========================================== */
html.light-mode .orbit-icon {
    background: var(--bg-tertiary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
}

/* ==========================================
   LIGHT MODE - GLASS ICONS (Skills)
   ========================================== */
html.light-mode .icon-btn__front {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.08) inset;
}

html.light-mode .icon-btn__back {
    box-shadow: 0.5em -0.5em 0.75em rgba(0, 0, 0, 0.08);
}

html.light-mode .icon-btn__icon {
    color: var(--text-primary);
}

/* ==========================================
   LIGHT MODE - CHROMA GRID
   ========================================== */
html.light-mode .chroma-card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

html.light-mode .chroma-info {
    color: var(--text-primary);
}

html.light-mode .chroma-info .role,
html.light-mode .chroma-info .handle {
    color: var(--text-secondary);
}

/* ==========================================
   LIGHT MODE - ELECTRIC BORDER
   ========================================== */
html.light-mode .eb-glow-1,
html.light-mode .eb-glow-2 {
    opacity: 0.25;
}

html.light-mode .eb-background-glow {
    opacity: 0.1;
}

/* ==========================================
   LIGHT MODE - GRID SCAN
   ========================================== */
html.light-mode .gridscan__preview {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: rgba(99, 102, 241, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

html.light-mode .gridscan__badge {
    background: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   LIGHT MODE - CURSOR
   ========================================== */
html.light-mode .magic-cursor {
    border-color: var(--primary-color);
    mix-blend-mode: normal;
}

html.light-mode .cursor-hover {
    background-color: rgba(79, 70, 229, 0.2);
}

/* ==========================================
   LIGHT MODE - SCRAMBLED TEXT
   ========================================== */
html.light-mode .scrambled-char.scrambling {
    color: var(--primary-color);
    text-shadow: none;
}

/* ==========================================
   LIGHT MODE - ACHIEVEMENT Section Extras
   ========================================== */
html.light-mode .achievement-card:hover .achievement-date {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
}

html.light-mode .achievement-card:hover .credential-id {
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}

html.light-mode .verified-badge {
    color: var(--primary-color);
    filter: none;
}

/* ==========================================
   LIGHT MODE - FOOTER Extras
   ========================================== */
html.light-mode .footer a {
    color: var(--primary-color);
}

html.light-mode .footer p {
    color: var(--text-secondary);
}

/* ==========================================
   LIGHT MODE - GitHub Repos Section
   ========================================== */
html.light-mode .github-repo-card {
    background: var(--bg-tertiary);
    border-color: rgba(99, 102, 241, 0.12);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

html.light-mode .github-repo-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.1);
}

html.light-mode .repo-language-dot {
    box-shadow: none;
}

/* ==========================================
   LIGHT MODE - Misc Remaining
   ========================================== */

/* Contact section Cyber wrapper */
html.light-mode .cyber-contact-form {
    background: transparent;
}

/* Form validation error */
html.light-mode .form-error {
    color: #dc2626;
}

/* Nav bar ref */
html.light-mode .navbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(99, 102, 241, 0.1);
}

html.light-mode .nav-link {
    color: var(--text-primary);
}

html.light-mode .nav-link:hover {
    color: var(--primary-color);
}

html.light-mode .nav-link::after {
    background: var(--primary-color);
}

html.light-mode .nav-logo a {
    color: var(--primary-color);
}

html.light-mode .bar {
    background: var(--text-primary);
}


/* ==========================================
   BACK TO TOP BUTTON
   ========================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9998;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(0, 243, 255, 0.3);
    background: rgba(10, 10, 25, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
    transition: all 0.4s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.3);
    background: rgba(0, 243, 255, 0.15);
}

html.light-mode .back-to-top {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(99, 102, 241, 0.2);
    color: #4f46e5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

html.light-mode .back-to-top:hover {
    border-color: var(--primary-color);
    background: rgba(79, 70, 229, 0.08);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

/* ==========================================
   GITHUB REPOS SECTION
   ========================================== */
.github-repos-section {
    padding: 100px 0;
    position: relative;
}

.github-repos-section .section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.github-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.github-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    color: var(--text-light);
    font-size: 1rem;
}

.github-repo-card {
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.15);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.github-repo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.github-repo-card:hover::before {
    opacity: 1;
}

.github-repo-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 243, 255, 0.4);
    box-shadow: 0 8px 30px rgba(0, 243, 255, 0.1);
}

.github-repo-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.github-repo-card h3 i {
    font-size: 0.85rem;
    opacity: 0.7;
}

.github-repo-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 16px;
}

.github-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-light);
    border-top: 1px solid rgba(0, 243, 255, 0.1);
    padding-top: 12px;
}

.github-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.github-meta .fa-star {
    color: #fbbf24;
}

.github-meta .fa-code-branch {
    color: var(--primary-color);
}

.github-error-link {
    color: var(--primary-color);
    text-decoration: underline;
}

/* ==========================================
   FORM VALIDATION STYLES
   ========================================== */
.form-error {
    display: block;
    font-size: 0.78rem;
    color: #ef4444;
    margin-top: 4px;
    min-height: 1em;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.cyber-input.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

.cyber-input.input-success {
    border-color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

/* ==========================================
   RESUME BUTTON ENHANCED
   ========================================== */
.cyber-resume-btn {
    position: relative;
    overflow: hidden;
}

.cyber-resume-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 243, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cyber-resume-btn:hover::after {
    width: 300px;
    height: 300px;
}

@keyframes pulse-download {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(0, 243, 255, 0);
    }
}

.cyber-resume-btn:hover {
    animation: pulse-download 1.5s infinite;
}

/* ==========================================
   RESPONSIVE FOR NEW ELEMENTS
   ========================================== */
@media (max-width: 768px) {
    .github-grid {
        grid-template-columns: 1fr;
    }

    .dark-mode-toggle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        top: 15px;
        right: 15px;
    }

    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
    }
}

@media (max-width: 1024px) {
    .github-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}