:root {
            --primary-color: #380aae; /* Deep violet -#9c01d9*/
            --primary-dark: #1c17b3; /* Darker violet -#7b2cbf*/
            --primary-light: #0846b9; /* Lighter violet -#c77dff*/
            --accent-color: #1b068f; /* Bright violet for accents -#aa00ff */
            --dark-bg: #121212; /* Very dark gray, almost black */
            --darker-bg: #0a0a0a; /* Even darker background */
            --card-bg: #1e1e1e; /* Dark card background */
            --text-primary: #f3f4f6; /* Light text */
            --text-secondary: #a0aec0; /* Muted text */
            --border-color: #333333; /* Dark borders */
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-primary);
        }
        
        .card {
            background-color: var(--card-bg);
            border-color: var(--border-color);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(157, 78, 221, 0.4);
        }
        
        .gradient-text {
            background: linear-gradient(to right, var(--primary-light), var(--primary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .project-button {
            transition: all 0.3s;
        }
        
        .project-button:hover {
            transform: translateY(-2px);
        }
        
        .skill-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #000000;
            overflow: hidden;
        }
        
        .skill-progress {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        }
        
        .nav-link {
            position: relative;
            transition: all 0.3s;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            transition: width 0.3s;
        }
        
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in {
            animation: fadeIn 0.6s ease-out forwards;
        }

        .mono {
            font-family: 'Roboto Mono', monospace;
        }

        .profile-img {
            filter: drop-shadow(0 10px 8px rgb(157 78 221 / 0.4));
        }

        .glow {
            box-shadow: 0 0 15px rgba(157, 78, 221, 0.5);
        }
        
        .project-card {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .section-title {
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            bottom: -6px;
            left: 0;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        }

        .project-buttons-wrapper {
            opacity: 0.5;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        .project-card:hover .project-buttons-wrapper {
            opacity: 1;
            transform: translateY(0);
        }

        /* New skill card design */
        .skill-card {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            transition: all 0.3s;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
        }
        
        .skill-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px -6px rgba(157, 78, 221, 0.4);
        }
        
        .skill-header {
            padding: 12px 16px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
        }
        
        .skill-body {
            padding: 16px;
        }
        
        /* Horizontal scroll containers */
        .scroll-container {
            display: flex;
            overflow-x: auto;
            padding: 20px 0;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) var(--card-bg);
            gap: 20px;
        }
        
        .scroll-container::-webkit-scrollbar {
            height: 6px;
        }
        
        .scroll-container::-webkit-scrollbar-track {
            background: var(--card-bg);
            border-radius: 10px;
        }
        
        .scroll-container::-webkit-scrollbar-thumb {
            background-color: var(--primary-color);
            border-radius: 10px;
        }
        
        .certificate-card, .project-card {
            flex: 0 0 auto;
            width: 320px;
            margin-right: 16px;
        }

        /* Certificate card design */
        .certificate-card {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            transition: all 0.3s;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
        }
        
        .certificate-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px -6px rgba(157, 78, 221, 0.4);
        }
        
        /* Resume button with pulse effect */
        .resume-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .resume-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.4);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        .resume-btn:hover::after {
            animation: ripple 1s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--card-bg);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

        /* Shine effect for headings */
        .shine {
            position: relative;
            overflow: hidden;
        }
        
        .shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
            transform: skewX(-25deg);
            animation: shine 4s infinite;
        }
        
        @keyframes shine {
            0% {
                left: -100%;
            }
            20%, 100% {
                left: 100%;
            }
        }

        /* Skill bullets */
        .skill-bullet {
            display: inline-block;
            padding: 6px 12px;
            margin: 4px;
            background: linear-gradient(135deg, rgba(157, 78, 221, 0.15), rgba(123, 44, 191, 0.15));
            border-radius: 20px;
            border: 1px solid rgba(157, 78, 221, 0.3);
            color: var(--text-primary);
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .skill-bullet:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, rgba(157, 78, 221, 0.25), rgba(123, 44, 191, 0.25));
            box-shadow: 0 4px 12px -4px rgba(157, 78, 221, 0.5);
        }

        /* Decorative elements */
        .decoration {
            position: absolute;
            z-index: 0;
            opacity: 0.1;
            pointer-events: none;
        }

        .code-decoration {
            font-family: 'Roboto Mono', monospace;
            font-size: 4rem;
            color: var(--primary-color);
        }

        .role-badge {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 8px;
            display: inline-block;
        }
        
        /* Hero section background */
        .hero-bg {
            background: radial-gradient(circle at 30% 50%, rgba(157, 78, 221, 0.1), transparent 50%), 
                       radial-gradient(circle at 70% 30%, rgba(123, 44, 191, 0.1), transparent 50%);
        }

        /* Each section alternating dark backgrounds */
        .section-even {
            background-color: var(--dark-bg);
        }
        
        .section-odd {
            background-color: var(--darker-bg);
        }