/* --- CUSTOM FONTS & CSS VARIABLES --- */
        /* Importing a Coolvetica-like font from Google Fonts for headers if local font isn't found */
        @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
        
        @font-face {
            font-family: 'Coolvetica';
            src: local('Coolvetica'), local('Oswald'); /* Fallback to Oswald */
        }

        :root {
            --text-main: #ffffff;
            --text-muted: #a1a1aa;
            --glass-bg: rgba(15, 23, 42, 0.4);
            --glass-border: rgba(255, 255, 255, 0.1);
            --accent: #38bdf8; /* Cyan accent */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

       body {
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
            overflow-x: hidden;
            /* New Black and Purple Animated Background */
            background: linear-gradient(-45deg, #000000, #4c1d95, #0a0a0a, #2e1065);
            background-size: 400% 400%;
            animation: gradientBG 5s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        h1, h2, h3 {
            font-family: 'Coolvetica', sans-serif;
            letter-spacing: 1px;
        }

        section {
            padding: 100px 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- FROSTED GLASS HEADER --- */
        header {
            position: fixed;
            top: 20px; /* Pushes it down from the very top */
            left: 50%;
            transform: translateX(-50%); /* Centers it perfectly */
            width: auto; /* Shrinks the box to fit just the links */
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            z-index: 1000;
            padding: 15px 40px;
            border-radius: 50px; /* Creates the rounded pill shape */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Adds a subtle drop shadow */
        }

       nav {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        nav a {
            color: var(--text-main);
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            position: relative; /* Required for the underline animation */
            transition: color 0.3s ease;
        }

        /* --- UPDATED SOCIAL ICONS CSS --- */
 .social-icons {
    display: flex;
    gap: 35px;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
}

.social-icons a {
    display: block;
}

.social-icons svg {
    width: 32px;
    height: 32px;
    fill: var(--text-main);
    transition: fill 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover svg {
    fill: var(--accent); /* Changes to your Cyan color on hover */
    transform: translateY(-5px); /* Creates a little jump effect */
}

       /* The hidden underline */
        nav a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%; /* Starts the underline from the center */
            transform: translateX(-50%);
            background-color: #d8b4fe; /* Light purple, avoiding blue */
            transition: width 0.3s ease-out;
        }

        /* Text color changes on hover */
        nav a:hover {
            color: #d8b4fe;
        }

        /* Underline expands to 100% on hover */
        nav a:hover::after {
            width: 100%;
        }

        /* --- HOME SECTION --- */
    .hero-title {
            font-size: 10rem; /* Made it much bigger */
            font-weight: 100; /* Removed the boldness */
            margin-bottom: 10px;
            text-align: center;
        }

        .hero-subtitle {
            font-size: 1.5rem;
            color: var(--text-muted);
            margin-bottom: 40px;
            text-align: center;
            max-width: 600px;
        }

        .btn {
            display: inline-block;
            background: transparent;
            color: var(--text-main);
            border: 2px solid var(--text-main);
            padding: 15px 40px;
            font-size: 1.2rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 30px;
            cursor: pointer;
            /* Added a smoother, bouncier transition */
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        }

        .btn:hover {
            background: #7e22ce; /* Turns Purple */
            color: #ffffff;
            border-color: #7e22ce;
            transform: scale(1.1) translateY(-5px); /* Lifts up and grows */
            box-shadow: 0 10px 25px rgba(126, 34, 206, 0.5); /* Adds a purple glow */
        }

        /* --- WORK SECTION (Slider) --- */
        .section-title {
            font-size: 3rem;
            margin-bottom: 40px;
            text-align: center;
            width: 100%;
        }

        .slider-wrapper {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
        }

        .slider-btn {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: white;
            font-size: 2rem;
            cursor: pointer;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            z-index: 10;
            backdrop-filter: blur(5px);
        }

        .prev-btn { left: -20px; }
        .next-btn { right: -20px; }

        .work-grid {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 20px 0;
            scrollbar-width: none; /* Hide scrollbar Firefox */
        }
        .work-grid::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome */

        .work-card {
            min-width: 300px;
            height: 500px;
            background: #000;
            border-radius: 20px;
            scroll-snap-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--glass-border);
        }

        .work-card video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
            transition: opacity 0.3s;
        }

        .work-card:hover video {
            opacity: 1;
        }

        /* --- SKILLS SECTION --- */
        .skills-container {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            width: 100%;
        }

        .skill-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 40px 20px;
            text-align: center;
            width: 250px;
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
        }

        .skill-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(56, 189, 248, 0.2);
        }

        .skill-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--accent);
            color: #000;
            font-size: 0.8rem;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 20px;
        }

        /* --- ABOUT ME SECTION --- */
        .about-container {
            display: flex;
            align-items: center;
            gap: 50px;
            width: 100%;
            flex-wrap: wrap;
        }

        .about-video {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background: #000;
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            overflow: hidden;
        }

        .about-video video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .about-text {
            flex: 1;
            min-width: 300px;
        }

        .about-text ul {
            list-style: none;
        }

        .about-text li {
            font-size: 1.2rem;
            margin-bottom: 20px;
            position: relative;
            padding-left: 30px;
        }

        .about-text li::before {
            content: '★';
            color: var(--accent);
            position: absolute;
            left: 0;
            top: 2px;
        }

        /* --- CONTACT / TESTIMONIALS SECTION --- */
        .marquee-wrapper {
            width: 100vw; /* Full screen width */
            overflow: hidden;
            position: relative;
            margin-bottom: 60px;
            /* The Fading edges you asked for */
            -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
            mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        }

        .marquee-content {
            display: flex;
            width: max-content;
            animation: scrollMarquee 20s linear infinite;
        }

        .marquee-content:hover {
            animation-play-state: paused;
        }

        @keyframes scrollMarquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .testimonial-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            padding: 30px;
            border-radius: 20px;
            width: 350px;
            margin: 0 15px;
            backdrop-filter: blur(5px);
        }

        .stars { color: var(--accent); margin-bottom: 10px; }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            font-size: 1.2rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .contact-icon {
            font-size: 1.5rem;
            color: var(--accent);
        }

        /* --- FADE ANIMATION CLASSES --- */
     .fade-element {
            opacity: 0;
            /* Added a slight scale effect to the slide-up for a more premium feel */
            transform: translateY(50px) scale(0.95);
            transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        
        .fade-element.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* --- DESKTOP HIDDEN ELEMENTS --- */
        .mobile-menu-btn {
            display: none; /* Hides the name toggle on desktop */
        }

        /* --- MOBILE RESPONSIVENESS --- */
        @media (max-width: 768px) {
            /* 1. Header & Menu Slider */
            header {
                width: 90%;
                top: 15px;
                padding: 15px 25px;
            }
            .mobile-menu-btn {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-family: 'Coolvetica', sans-serif;
                font-size: 1.5rem;
                cursor: pointer;
                color: var(--text-main);
            }
            .dropdown-icon {
                font-size: 0.8rem;
                color: #d8b4fe;
            }
            nav {
                display: none; /* Hides links by default on mobile */
                flex-direction: column;
                margin-top: 15px;
                gap: 20px;
                border-top: 1px solid var(--glass-border);
                padding-top: 20px;
                text-align: center;
            }
            nav.open {
                display: flex; /* Opens the menu when clicked */
                animation: slideDown 0.3s ease forwards;
            }
            @keyframes slideDown {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }

            /* 2. Minimized Home Section */
            .hero-title { 
                font-size: 3.5rem; /* Shrunk down from 7rem */
                line-height: 1.1;
                margin-top: 60px;
            }
            .hero-subtitle { 
                font-size: 1.1rem; 
                padding: 0 15px;
                margin-bottom: 30px;
            }
            .btn {
                padding: 12px 30px;
                font-size: 1rem;
            }

            /* 3. Work Samples & Arrows */
            .slider-wrapper {
                flex-wrap: wrap; /* Allows arrows to drop below */
                justify-content: center;
                gap: 20px;
            }
            .work-grid {
                order: 1; /* Keeps videos on top */
                width: 100%;
                padding: 0 10px;
            }
            .slider-btn {
                display: flex; /* Un-hides the arrows */
                position: static; /* Removes absolute positioning */
                order: 2; /* Drops arrows below the videos */
            }

            /* 4. Arrange Stuffs Well (About & Contact) */
            .about-container {
                flex-direction: column;
                text-align: center;
            }
            .about-text li {
                text-align: left; /* Keeps list items readable */
                font-size: 1rem;
            }
            .social-icons {
                gap: 20px;
            }
            .social-icons svg {
                width: 28px; /* Slightly smaller icons on mobile */
                height: 28px;
            }
        }