html>body:nth-child(2)>header:nth-child(7)>div:nth-child(1)>div:nth-child(2)>p:nth-child(1) {
padding-left : 10px;
}

  /* --- 1. VARIABLES & RESET --- */
        :root {
            --bg: #030316; /* #282052 #2c2749 #252525 #120d30 #01010c*/
            --text: #ffffff;
            --glass: rgba(255, 255, 255, 0.02);
            --glass-border: rgba(77, 62, 62, 0.08);
            --primary: #101157; /* 7c3aed */
            --secondary: #16316b; /* 2563eb */
            --accent: #8b325f; /* 8b325f */
            --font: 'Space Grotesk', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: var(--font);
            overflow-x: hidden;
        }

        /* --- 2. GLOBAL UTILITIES --- */
        .container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 24px; 
            width: 100%;
        }

        h1, h2, h3 { font-weight: 700; letter-spacing: -1px; }

        /* --- 3. FIXED NAVIGATION --- */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 90px;
            display: flex;
            align-items: center;
            z-index: 5000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.03);
            transition: 0.3s;
        }

        .nav-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .logo { 
            font-size: 1.5rem; 
            font-weight: 700; 
            letter-spacing: 2px;
            z-index: 5001;
            position: relative;
        }
        
        .menu-btn {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            padding: 12px 28px;
            border-radius: 50px;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 1px;
            font-weight: 700;
            position: relative;
            z-index: 5001;
        }
        
        .menu-btn:hover { 
            background: white; 
            color: black; 
            border-color: white; 
        }

        /* --- 4. OVERLAY MENU --- */
        .menu-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #050505;
            z-index: 9000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .menu-overlay.open { opacity: 1; visibility: visible; }
        
        .menu-links { text-align: center; }
        .menu-links a {
            display: block;
            font-size: clamp(2.5rem, 6vw, 5rem);
            color: rgba(255,255,255,0.5);
            margin: 10px 0;
            text-decoration: none;
            transition: 0.3s;
            transform: translateY(30px);
            opacity: 0;
        }
        .menu-links a:hover { color: white; transform: skewX(-10deg); }
        
        .menu-overlay.open .menu-links a {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.2s;
        }

        .close-menu {
            position: absolute;
            top: 30px; right: 40px;
            cursor: pointer;
            font-size: 0.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 10px 20px;
            border-radius: 30px;
            text-transform: uppercase;
        }
        .close-menu:hover { background: white; color: black; }

        /* --- 5. HERO SECTION --- */
        .hero {
            height: 105vh;
            display: flex;
            align-items: flex-end;
            position: relative;
            z-index: 10;
        }

        .hero-content-wrapper {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .hero-main-text h1 {
            font-size: clamp(4rem, 13vw, 11rem);
            line-height: 0.85;
            text-transform: uppercase;
            margin: 0;
            font-weight: 700;
            letter-spacing: -4px;
            color: white;
            cursor: default;
        }
   
        .hacker-text.outlined { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.8); }

   

        .hero-sub { max-width: 300px; margin-bottom: 10px; }
        .hero-sub p {
            font-size: 1.1rem;
            color: rgba(255,255,255,0.6);
            line-height: 1.5;
            margin-bottom: 40px;
        }

        /* Showreel Badge */
        .showreel-badge {
            width: 120px; height: 120px;
            position: relative;
            display: flex; justify-content: center; align-items: center;
            cursor: pointer;
        }
        .text-circle { width: 100%; height: 100%; animation: rotateText 10s linear infinite; }
        .text-circle text { font-size: 12px; font-weight: 700; letter-spacing: 2px; fill: white; }
        .play-icon { position: absolute; font-size: 1.2rem; color: white; }
        @keyframes rotateText { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* --- 6. ANIMATED BACKGROUND --- */
        .background-blobs {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1; overflow: hidden; filter: blur(90px); opacity: 0.6;
        }
        .blob { position: absolute; border-radius: 50%; animation: float 10s infinite alternate; }
        .blob-1 { width: 500px; height: 500px; background: var(--primary); top: -100px; left: -100px; }
        .blob-2 { width: 400px; height: 400px; background: var(--secondary); bottom: -100px; right: -100px; animation-delay: -5s; }
        .blob-3 { width: 300px; height: 300px; background: var(--accent); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse 8s infinite; }
        @keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } }

        /* --- 7. UTILITY CLASSES --- */
        .gradient-text {
            background: linear-gradient(to right, #c084fc, #6366f1, #3b82f6);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .reveal.active { opacity: 1; transform: translateY(0); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal-delay-1 { transition-delay: 0.2s; }
        .reveal-delay-2 { transition-delay: 0.4s; }

        /* --- 8. PRELOADER --- */
        .preloader {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #000; z-index: 10000;
            display: flex; justify-content: center; align-items: center;
            transition: opacity 0.5s ease-out, visibility 0.5s;
        }
        .loader-text {
            font-size: 3rem; font-weight: bold; animation: blink 1s infinite;
            background: linear-gradient(to right, #fff, #999);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
        .preloader.hide { opacity: 0; visibility: hidden; }

        /* --- 9. CUSTOM CURSOR --- */
        .cursor {
            width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.5);
            border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999;
            transition: transform 0.1s; mix-blend-mode: difference; transform: translate(-50%, -50%);
        }
        .cursor-dot {
            width: 8px; height: 8px; background: white; border-radius: 50%;
            position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
        }

        /* --- 10. SECTIONS --- */
        .trust-section { padding: 50px 0; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
        .trust-label { font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; }
        .logo-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; }
        .client-logo { font-weight: 700; font-size: 1.8rem; color: rgba(255,255,255,0.2); transition: 0.4s; }
        .client-logo:hover { color: white; text-shadow: 0 0 15px rgba(255,255,255,0.6); transform: scale(1.1); }

        .marquee-wrapper { background: white; color: black; padding: 20px 0; overflow: hidden; white-space: nowrap; transform: rotate(-2deg) scale(1.05); margin: 80px 0; }
        .marquee-content { display: inline-block; animation: scroll 20s linear infinite; font-size: 2.5rem; font-weight: 700; text-transform: uppercase; }
        @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        .section { padding: 50px 0; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
        .card { background: var(--glass); border: 1px solid var(--glass-border); padding: 40px; border-radius: 20px; backdrop-filter: blur(20px); transition: 0.4s; opacity: 0; transform: translateY(50px); }
        .card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-10px); border-color: rgba(255, 255, 255, 0.3); }
        .card-number { font-size: 3rem; opacity: 0.2; font-weight: 700; margin-bottom: 20px; }
        .card h3 { font-size: 1.5rem; margin-bottom: 15px; }
        .card p { color: rgba(255,255,255,0.6); line-height: 1.6; }

        /* --- 11. PORTFOLIO --- */
        .project-row { display: flex; align-items: center; gap: 60px; margin-bottom: 150px; opacity: 0; transform: translateY(50px); }
        .project-row.reverse { flex-direction: row-reverse; }
        .project-card { flex: 1.5; perspective: 1000px; cursor: none; }
        .project-img-wrapper { height: 500px; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5); transform-style: preserve-3d; transition: transform 0.1s ease-out; }
        
        /* Updated to target VIDEO as well as IMG */
        .project-img-wrapper img, 
        .project-img-wrapper video { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.8s, filter 0.5s; 
            filter: grayscale(100%) contrast(1.2); 
        }

        .project-card:hover .project-img-wrapper img,
        .project-card:hover .project-img-wrapper video { 
            transform: scale(1.1); 
            filter: grayscale(0%) contrast(1); 
        }

        .overlay-cursor { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 100px; height: 100px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; color: black; display: flex; justify-content: center; align-items: center; font-weight: 700; pointer-events: none; z-index: 10; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .project-card:hover .overlay-cursor { transform: translate(-50%, -50%) scale(1); }
        .project-info { flex: 1; }
        .project-number { font-size: 5rem; font-weight: 700; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2); line-height: 1; margin-bottom: 20px; }
        .project-title { font-size: 3rem; margin-bottom: 20px; line-height: 1.1; }
        .project-desc { color: rgba(255,255,255,0.6); margin-bottom: 30px; font-size: 1.1rem; }
        .tech-stack { display: flex; gap: 10px; flex-wrap: wrap; }
        .tech-stack span { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.8); transition: 0.3s; }
        .tech-stack span:hover { background: white; color: black; border-color: white; }

        .mobile-works {
            display: none;
        }

        /* --- 12. FOOTER --- */
        .footer-cta { text-align: center; padding-bottom: 50px 0; overflow: hidden; }
        .big-link { font-size: clamp(2rem, 7vw, 6rem); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.5); text-decoration: none; position: relative; font-weight: 700; }
        .big-link:hover { color: white; text-shadow: 0 0 30px rgba(255,255,255,0.5); -webkit-text-stroke: 1px white; }

        @media(max-width: 900px) {
            .desktop-works {
                display: none;
            }
            .mobile-works {
                display: block;
            }
            .cursor, .cursor-dot { display: none; }
            * { cursor: auto; }
            .hero-content-wrapper { flex-direction: column; align-items: flex-start; }
            .hero-sub { margin-top: 0px; display: flex; align-items: center; gap: 20px; max-width: 100%;}
            .hero-sub p { margin-bottom: 0; }
            .logo-grid { justify-content: center; }
            .project-row, .project-row.reverse { flex-direction: column; gap: 30px; }
            .project-img-wrapper { height: 300px; }
            .project-card { width: 100%; padding:10px;}
            .hero {height: 85vh;}
            .grid {padding: 10px;}
            .hero-main-text h1{font-size: 91px !important;}
             h2{padding-left: 10px; margin-bottom: 5px !important; text-align: center; font-size: 40px !important;}
            .project-row{margin-bottom: 50px; }
            .marquee-wrapper{margin:40px 0px 1px; padding: 0px;}
            .project-title, .project-number, .project-desc{padding-left: 10px;}
            .big-link{font-size: clamp(3.5rem, 7vw, 6rem);}
            #hacker-text-other{text-align: right;}
            .hero-sub p{display: none;} 
        
        }