/* Custom Dark Theme Configuration */
 :root {
     --color-bg-primary: #0A0A0A;
     --color-text-primary: #E5E7EB;
     /* Gray 200 */
     --color-accent: #00FFFF;
     /* Neon Cyan */
     --color-accent-dark: #00A3A3;
     --color-border: #1F2937;
     /* Gray 800 */
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--color-bg-primary);
     color: var(--color-text-primary);
     overflow-x: hidden;
     /* Animation for subtle background glow/noise */
     animation: backgroundFade 30s infinite alternate;
     cursor: none;
     /* Hide default cursor for neon tracker */
 }

 @keyframes backgroundFade {
     from {
         background-color: #0A0A0A;
     }

     to {
         background-color: #0A0A15;
     }
 }

 /* --- Custom Components & Styles --- */

 /* Neon Button Glow */
 .navbar-app{
            background-color: #000000;
            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(53, 198, 255);
            box-shadow: 0 4px 10px rgba(157, 240, 255, 0.3);
            transition: all 0.3s ease;
        }
        .nav-contact-btn:hover {
            box-shadow: 0 6px 15px rgba(145, 0, 241, 0.5);
            transform: translateY(-1px);
        }

 .neon-cta {
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease-in-out;
     box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
     cursor: pointer;
 }

 .neon-cta:hover {
     box-shadow: 0 0 25px var(--color-accent), 0 0 50px var(--color-accent);
     transform: translateY(-2px);
 }

 /* Animated Card Border (Cyber Grid effect) */
 .animated-card {
     background-color: #111827;
     /* Gray 900 */
     border: 1px solid var(--color-border);
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .animated-card:hover {
     border-color: var(--color-accent);
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 255, 255, 0.15);
 }

 /* Accent Text Shadow */
 .text-neon {
     color: var(--color-accent);
     text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
 }

 /* FAQ Toggle Styling */
 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease-out;
 }

 .faq-item.active .faq-answer {
     max-height: 500px;
     /* Arbitrarily large value */
     transition: max-height 0.6s ease-in;
 }

 /* --- SCROLL ANIMATIONS --- */
 /* Base state for elements that will animate */
 .animate-on-scroll {
     opacity: 0;
     transform: translate(0, 20px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }

 /* Keyframes for horizontal slide-in */
 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-100px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(100px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 /* Animation classes applied by JS observer */
 .animate-on-scroll.visible.slide-left {
     animation: slideInLeft 1s ease-out forwards;
 }

 .animate-on-scroll.visible.slide-right {
     animation: slideInRight 1s ease-out forwards;
 }

 /* Default fade-in for other elements */
 .animate-on-scroll.visible {
     opacity: 1;
     transform: translate(0, 0);
 }

 /* --- ADVANCED IT CURSOR EFFECT (NEW) --- */

 /* Main cursor container, positions the icon */
 #custom-cursor {
     position: fixed;
     z-index: 10000;
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 20px;
     /* Icon size */
     height: 20px;
     transform: translate(-50%, -50%);
     transition: transform 0.1s ease-out;
 }

 /* IT Icon styling */
 #cursor-icon {
     color: var(--color-accent);
     width: 16px;
     height: 16px;
     text-shadow: 0 0 5px var(--color-accent);
     transition: all 0.1s ease-out;
 }

 /* Lagging Neon Glow (behind the icon) */
 #cursor-glow {
     position: fixed;
     width: 35px;
     /* Initial glow size */
     height: 35px;
     border-radius: 50%;
     background: var(--color-accent);
     opacity: 0.5;
     mix-blend-mode: soft-light;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: width 0.3s, height 0.3s, opacity 0.3s;
     /* Transition for hover effect */
     box-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent-dark);
 }

 /* Hover effect on interactive elements */
 .interactive-element:hover #cursor-icon,
 .interactive-card:hover #cursor-icon {
     transform: scale(1.5);
 }

 .interactive-element:hover~#cursor-glow,
 .interactive-card:hover~#cursor-glow {
     width: 50px;
     height: 50px;
     opacity: 0.7;
     box-shadow: 0 0 25px var(--color-accent), 0 0 50px var(--color-accent);
 }

 /* Click Animation (Activity) */
 .cursor-clicked #cursor-icon {
     transform: scale(0.8);
     /* Shrink icon */
     opacity: 0.5;
 }

 .cursor-clicked #cursor-glow {
     width: 25px;
     /* Shrink glow */
     height: 25px;
     opacity: 1;
     box-shadow: 0 0 5px var(--color-accent), 0 0 10px var(--color-accent-dark);
 }


 @media (max-width:768px) {
    .cursor-glow{
        display: none !important;
    }
    .custom-cursor{
        display: none;
    }
 }



 .site-top {
     position: fixed;
     background-color: rgb(53, 53, 53);
     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: rgb(0, 238, 255);

 }

 @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: rgb(53, 53, 53);
     z-index: +1;
     border: none;
     padding: 0px 5px;
 }

 .fa-whatsapp {
     color: rgb(0, 238, 255) !important;
 }

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

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