/* Define custom styles for a cyber/neon aesthetic */
        :root {
            /* PRIMARY COLOR: Neon Green (Lime-400) */
            --primary-color: #a2e63586; 
            --secondary-color: #3b82f6; 
            --dark-bg: #030712; /* Deeper, near black background */
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--dark-bg);
            color: #f1f5f9; /* Tailwind slate-100 */
            overflow-x: hidden; 
            /* Hide the default cursor */
            cursor: none; 
        }


        .navbar-app{
            background-color: #000214 !important;
            position: fixed;
        }

         /* Gradient Text on Hover (for .nav-link-item class) */
        .nav-link-item:hover {
            background-image: linear-gradient(to right, #5d92db, #a45ed3, #c85fe2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            transform: scale(1.01);
            transition: transform 0.3s ease;
        }

        /* Animated Underline for Links */
        .nav-link-item {
            position: relative;
            color: white !important;
        }
        @media (max-width:1024px) {
            .nav-link-item{
                color: black !important;
            }
        }
        .nav-link-item::before {
            content: '';
            position: absolute;
            height: 2px;
            width: 0%;
            bottom: 0;
            left: 0;
            /* Using one of the gradient colors for consistency */
            background-color: #9100f1; 
            transition: width 0.5s linear;
            margin: 0 0 -10px 0;
            display: inline-block;
        }
        .nav-link-item:hover::before {
            width: 100%;
        }

        /* Responsive adjustments for underline on small screens */
        @media (max-width: 768px) {
            .nav-link-item::before {
                margin: 0 0 -1px 0;
            }
            .nav-link-item:hover::before {
                width: 30%;
            }
        }
        
        /* Dropdown Menu Custom Border */
        .custom-dropdown-menu {
            border-radius: 0 !important;
            border: 2px solid rgba(134, 134, 245, 0.151) !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-top: -5px !important;
            z-index: +99999;
        }

        /* Custom Button Style */
        .nav-contact-btn {
            background-color: rgb(106, 172, 8);
            box-shadow: 0 4px 10px rgba(104, 248, 91, 0.3);
            transition: all 0.3s ease;
        }
        .nav-contact-btn:hover {
            box-shadow: 0 6px 15px rgba(145, 212, 89, 0.5);
            transform: translateY(-1px);
        }

        /* NEW: Hacker/Monospace Font for code blocks and specific text */
        .font-hacker {
            /* Fallback to system monospace fonts */
            font-family: 'SF Mono', 'Courier New', monospace; 
        }
        
        /* --- Custom Cursor Styles --- */
        .custom-cursor {
            pointer-events: none; 
            position: fixed;
            z-index: 9999;
            transition: transform 0.1s ease-out, opacity 0.3s ease-in-out;
            transform: translate(-50%, -50%) scale(1);
        }
        .cursor-active {
            transform: translate(-50%, -50%) scale(1.5) rotate(45deg); 
            border: 2px solid var(--primary-color);
        }
        .cursor-ring {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid var(--primary-color);
            transition: transform 0.2s ease-out;
        }
        @media (max-width:768px) {
            .custom-cursor{
                display: none;
            }
            .cursor-ring{
                display: none;
            }
        }
        /* --- End Custom Cursor Styles --- */

        /* NEW: Neon Text Glow for Titles and Key text */
        .neon-text-glow {
            text-shadow: 0 0 4px var(--primary-color), 0 0 10px rgba(162, 230, 53, 0.356), 0 0 20px rgba(162, 230, 53, 0.349);
        }
        @media (max-width:768px) {
            .neon-text-glow{
                font-size: 30px !important;
            }
        }
        .neon-icon-glow {
            filter: drop-shadow(0 0 1px var(--primary-color)) drop-shadow(0 0 8px rgba(109, 158, 30, 0.336));
        }

        /* NEW: Scan Line Animation for a CRT/Hacking look */
        @keyframes scanline {
            0% { transform: translateY(0); opacity: 0.1; }
            50% { opacity: 0.05; }
            100% { transform: translateY(100vh); opacity: 0.1; }
        }
        .scan-line-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(
                rgba(3, 7, 18, 0.1) 50%,
                var(--primary-color) 50%
            );
            background-size: 100% 4px;
            animation: scanline 8s infinite linear;
            z-index: 2; /* Below content, above matrix */
        }
        
        /* NEW: Matrix Rain Background Container */
        .hero-section{
            margin-top: 70px !important;
        }
        
        .matrix-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.2; /* Subtle opacity for background */
            z-index: 1;
        }

        /* Hero CTA Button Glow */
        .cta-button {
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(162, 230, 53, 0.349); 
        }
        @media (max-width:768px) {
            .cta-button{
                font-size: 13px;
                padding: 10px 20px;
            }
        }

        .cta-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(162, 230, 53, 0.418), 0 0 40px rgba(168, 231, 67, 0.342);
            background-color: #83cc16c2; 
        }

        /* Service Card Hover Transition (Updated to Neon Green border/shadow) */
        .service-card {
            transition: all 0.3s ease-in-out;
            border: 1px solid rgba(163, 230, 53, 0.2); 
            background-color: rgba(17, 24, 39, 0.8); 
            backdrop-filter: blur(2px); 
        }
       

        .service-card:hover {
            transform: translateY(-5px) scale(1.02);
            border-color: var(--primary-color);
            box-shadow: 0 0 25px rgba(162, 230, 53, 0.13); 
            background-color: rgba(17, 24, 39, 0.95);
        }

        /* Section Title Underline Animation (Updated to Neon Green) */
        .cyber-line {
            display: block;
            width: 50px;
            height: 3px;
            background-color: var(--primary-color);
            margin: 10px auto 0;
            transition: width 0.3s ease-in-out;
        }

        .section-header:hover .cyber-line {
            width: 100px;
        }

        /* --- Scroll Reveal Animations CSS (Retained) --- */
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .reveal {
            opacity: 0;
            transition: opacity 0.5s, transform 0.5s;
        }
        
        .reveal.visible.slide-left {
            animation: slideInLeft 0.8s forwards;
        }
        
        .reveal.visible.slide-right {
            animation: slideInRight 0.8s forwards;
        }
        
        .reveal.visible.fade-up {
            animation: fadeInUp 0.8s forwards;
        }
        /* --- End Scroll Reveal Animations CSS --- */




        .site-top {
            position: fixed;
            background-color: white;
            right: 50px;
            bottom: 20px;
            padding: 13px 15px;
            border-radius: 50%;
            display: none;
            transition: opacity 0.3s ease;
            z-index: +9999;
            border: none;
            animation: topbtn 1.5s infinite linear alternate;
        }
        
        .site-top i {
            color:green ;

        }
        @keyframes topbtn {
            0% {
                transform: translateY(20px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .site-top.show {
            display: block;
            opacity: 1;
        }

        .whatsapp-btn {
            position: fixed;
            bottom: 70px;
            left: 20px;
            font-size: 30px;
            border-radius: 10px;
            background-color: white;
            z-index: +1;
            border: none;
            padding: 0px 5px;
        }

        .fa-whatsapp {
            color: green !important;
        }

        @media (max-width: 600px) {
            .topBtn {
                z-index: +1;
            }

            .whatsapp-btn {
                z-index: +1;
            }
        }