@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
        
        :root {
            --primary-color: #00e5ff;
            --secondary-color: #007bff;
            --dark-bg: #0f101a;
            --card-bg: rgba(255, 255, 255, 0.05);
            --border-color: rgba(255, 255, 255, 0.15);
            --text-color: #e0e0e0;
            --section-bg: #1e2029;
            --hover-bg: rgba(255, 255, 255, 0.1);
        }
        .light-mode {
            --primary-color: #007bff;
            --secondary-color: #00e5ff;
            --dark-bg: #f5f7fa;
            --card-bg: rgba(255, 255, 255, 0.8);
            --border-color: rgba(0, 0, 0, 0.1);
            --text-color: #2d3748;
            --section-bg: #e2e8f0;
            --hover-bg: rgba(0, 0, 0, 0.05);
        }
       body {
            font-family: 'Poppins', 'Inter', sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-color);
            transition: background-color 0.5s, color 0.5s;
            /* UPDATED: Changed the SVG fill color and size of the background pattern */
          /* background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233a3a5e' fill-opacity='0.4'%3E%3Cpath d='M20 0L0 20L20 40L40 20L20 0Z M20 12L8 20L20 28L32 20L20 12Z'/%3E%3C/g%3E%3C/svg%3E");*/
            background-attachment: fixed;
            padding: 2rem;
        }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--dark-bg); }
        ::-webkit-scrollbar-thumb { background: linear-gradient(45deg, var(--secondary-color), var(--primary-color)); border-radius: 5px; }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #00c6ff, #007bff); }
        .sticky-nav { backdrop-filter: blur(10px); background-color: rgba(19, 21, 27, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
        .light-mode .sticky-nav { background-color: rgba(235, 237, 239, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
        
        /* Glassmorphism card effect with 3D tilt */
        .glass-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            transform-style: preserve-3d;
            transform: perspective(1000px);
            transition: transform 0.5s ease-in-out;
        }
   
        /* Gradient for the 'About Me' title */
        .gradient-text {
            background-image: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Custom scrollbar styling */
        .about-scroll-box::-webkit-scrollbar {
            width: 8px;
        }
        .about-scroll-box::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }
        .about-scroll-box::-webkit-scrollbar-thumb {
            background-color: var(--primary-color);
            border-radius: 10px;
            border: 2px solid var(--card-bg);
        }
        .about-scroll-box::-webkit-scrollbar-thumb:hover {
            background-color: var(--secondary-color);
        }

        /* Animated glowing border for profile pic */
        .glowing-border {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 9999px;
            padding: 8px;
            background-clip: padding-box;
            background-origin: border-box;
            background-image: linear-gradient(to right, var(--card-bg), var(--card-bg)), linear-gradient(45deg, #ff007f, #00ffff, var(--primary-color));
            animation: glowing-pulse 4s infinite ease-in-out;
            transition: transform 0.3s ease-in-out;
        }
        
        .glowing-border::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(45deg, #ff007f, #00ffff, var(--primary-color));
            -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        @keyframes glowing-pulse {
            0% {
                background-position: 0% 50%;
                box-shadow: 0 0 15px var(--primary-color);
            }
            50% {
                background-position: 100% 50%;
                box-shadow: 0 0 25px var(--secondary-color);
            }
            100% {
                background-position: 0% 50%;
                box-shadow: 0 0 15px var(--primary-color);
            }
        }

        .glowing-border:hover {
            transform: scale(1.05);
        }

        .profile-pic {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }
        
        /* Other existing styles */
        .btn-primary-gradient { background: linear-gradient(45deg, var(--secondary-color), var(--primary-color)); transition: all 0.3s ease; }
        .btn-primary-gradient:hover { box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5); transform: translateY(-3px); }
        .btn-secondary-outline { border: 2px solid var(--primary-color); color: var(--primary-color); transition: all 0.3s ease; }
        .btn-secondary-outline:hover { background-color: var(--primary-color); color: var(--dark-bg); box-shadow: 0 8px 20px rgba(0, 229, 255, 0.5); transform: translateY(-3px); }
        .section-title { position: relative; display: inline-block; padding-bottom: 0.75rem; margin-bottom: 2.5rem; }
        .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); border-radius: 2px; }
        .project-card { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transform-style: preserve-3d; border-radius: 1.5rem; }
        .project-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); }
        .project-card .card-img-overlay { opacity: 0; background: rgba(0, 0, 0, 0.8); transition: opacity 0.4s ease-in-out; border-radius: 0.75rem; }
        .project-card:hover .card-img-overlay { opacity: 1; }
        #particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }
        .fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in-up.visible { opacity: 1; transform: translateY(0); }
        .skill-bar-container { background-color: rgba(255, 255, 255, 0.1); border-radius: 9999px; height: 10px; overflow: hidden; }
        .skill-bar { height: 100%; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); border-radius: 9999px; width: 0%; transition: width 1.5s ease-out; }
        .skill-bar.filled { width: var(--skill-level); }
        .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 40; display: none; }
        .mobile-menu-overlay.open { display: block; }
        .mobile-menu { position: fixed; top: 0; right: -300px; width: 280px; height: 100%; background-color: var(--dark-bg); z-index: 50; padding: 2rem; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4); transition: right 0.4s ease-in-out; display: flex; flex-direction: column; }
        .mobile-menu.open { right: 0; }
        .mobile-menu .nav-link { display: block; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.5rem; transition: background-color 0.3s; }
        .mobile-menu .nav-link:hover { background-color: var(--hover-bg); }
        .close-menu-btn { position: absolute; top: 1rem; right: 1rem; font-size: 2rem; color: var(--text-color); }
        .close-menu-btn:hover { color: var(--primary-color); }
        .nav-link {
            position: relative;
            overflow: hidden;
            transform: translateY(0);
            transition: all 0.3s ease-in-out;
            display: inline-flex;
            align-items: center;
            z-index: 1;
        }