/* Custom Styles */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0a0a0a;
            color: #f0f0f0;
            overflow-x: hidden;
        }

        /* Animated background canvas */
        #particle-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
        }

        /* Sidebar Styling */
        .sidebar {
            transition: transform 0.3s ease-in-out;
        }

        /* Mobile menu slide-in/out */
        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.active {
                transform: translateX(0);
            }
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0a0a0a;
        }
        ::-webkit-scrollbar-thumb {
            background: #FBBF24; /* Yellow accent */
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #F59E0B; /* Darker yellow */
        }

        /* Animation for scroll-triggered elements */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            will-change: opacity, transform;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom underline effect */
        .link-underline {
            position: relative;
            text-decoration: none;
        }
        .link-underline::after {
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: #FBBF24; /* Yellow accent */
            transform-origin: bottom right;
            transition: transform 0.25s ease-out;
        }
        .link-underline:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        /* Hero section with text and image */
        .hero-section {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: row;
        }

        /* Developer image container */
        .image-container {
            position: relative;
            width: 820px;
            height: 830px;
            z-index: 1;
            margin-right: 50px;

        }

        /* Developer image with gradient overlay */
        .developer-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Gradient overlay for image */
.image-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    /* Combine gradients */
    background:
        /* Bottom fade */
        linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,0.8) 20%, rgba(10,10,10,0) 100%),
        /* Left fade */
        linear-gradient(to right, #0a0a0a 0%, rgba(10,10,10,0.8) 20%, rgba(10,10,10,0) 100%),
        /* Right fade */
        linear-gradient(to left, #0a0a0a 0%, rgba(10,10,10,0.8) 20%, rgba(10,10,10,0) 100%);

    background-repeat: no-repeat;
    background-size: 100% 30%, 30% 100%, 30% 100%;
    background-position: bottom, left, right;
}

        /* Text container */
        .text-container {
            position: relative;
            z-index: 3;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Media query for responsive layout */
        @media (max-width: 1280px) {
            .hero-section {
                flex-direction: column;
            }

            .image-container {
                width: 100%;
                height: 450px;
                margin-right: 0;
                margin-bottom: 40px;
                bottom: 0rem;
            }

            .developer-image {
                width: 100%;
                object-position: center;
            }

            .image-gradient {
                background: linear-gradient(
                    180deg,
                    rgba(10, 10, 10, 0) 0%,
                    rgba(10, 10, 10, 0.7) 70%,
                    #0a0a0a 100%
                );
            }
        }

        @media (max-width: 768px) {
            .image-container {
                height: 350px;
            }
        }