/* --- Base and Font Setup --- */
        body {
            font-family: 'Inter', sans-serif;
            color: #334155; /* text-slate-700 */
            /* CRITICAL FIX: Offset for your fixed header */
            padding-top: 92px; 
        }
        .font-orbitron {
            font-family: 'Orbitron', sans-serif;
        }
        
        /* --- Professional Sticky Header --- */
        .header-main {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid #e5e7eb; /* slate-200 */
            transition: all 0.3s ease;
        }
        .header-scrolled {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* --- Navbar Link Styling --- */
        .nav-link {
            position: relative;
            color: #334155; /* text-slate-700 */
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px; /* Adjusted for better spacing */
            left: 0;
            background-color: #22c55e; /* green-500 */
            transition: width 0.3s ease;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        .nav-link.active {
            color: #22c55e; /* green-500 */
        }

        /* --- Dropdown Menu --- */
        .dropdown-menu {
            display: none;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .dropdown-menu.open {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        #industries-dropdown a:hover {
            background-color: #22c55e !important;
            color: #ffffff !important;
        }

        /* --- Mobile Navigation --- */
        .mobile-nav {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            max-width: 320px;
            height: 100vh;
            background-color: white;
            z-index: 1001;
            transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .mobile-nav.open {
            right: 0;
        }
        .body-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease;
        }
        .body-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* --- UNIFIED SECTION STYLING --- */
        .section-title {
            font-family: 'Orbitron', sans-serif;
            color: #1e293b; /* text-slate-800 */
        }
        .section-subtitle {
            color: #475569; /* text-slate-600 */
        }
        
        /* --- FOOTER STYLING --- */
        #footer { background-color: #1e293b; color: #cbd5e1; } /* text-slate-300 */
        .footer-heading { color: #22c55e; font-family: 'Orbitron', sans-serif; }
        .footer-links a, .footer-contact a { color: #cbd5e1; }
        .footer-links a:hover, .footer-contact a:hover { color: #ffffff; }
        .footer-divider { border-color: #334155; }
        .copyright-text { color: #94a3b8; }
        .social-icons a { color: #cbd5e1; }
        .social-icons a:hover { color: #22c55e; }

        /* * ===================================
         * HERO SECTION STYLING (Merged)
         * ===================================
        */
        .hero-section {
            /* Full-screen immersive feel, adjusted for fixed header */
            min-height: calc(100vh - 92px); 
            position: relative;
            display: flex;
            align-items: center;
            
            /* The high-quality background image */
            background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?q=80&w=1920&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Parallax-like effect */
        }

        .hero-overlay {
            /* This is the key "pro" trick */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
            z-index: 1;
        }

        .hero-section .container {
            /* Ensure content is above the overlay */
            z-index: 2;
        }

        /* * ===================================
         * CUSTOM BUTTON STYLING (Merged)
         * ===================================
        */
        .btn-outline-light-custom {
            color: #fff;
            border-color: #fff;
            border-width: 2px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .btn-outline-light-custom:hover {
            color: #22c55e;  /* Your brand green */
            background-color: #fff;
            border-color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        /*

          
        /* --- Hero Carousel Text Readability --- */
        #hero-carousel .carousel-item {
            height: 100vh;
            min-height: 400px;
            background-size: cover;
            background-position: center center;
        }

      

        #hero-carousel .carousel-item::after {
             content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(10, 25, 47, 0.8) 0%, rgba(10, 25, 47, 0.2) 100%);
        }
        #hero-carousel video, #hero-carousel img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
        
        #hero-carousel .carousel-caption {
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            z-index: 10;
        }

        #hero-carousel  .carousel-caption h1 {
            font-family: var(--font-headings);
            font-size: 4rem;
            font-weight: 700;
            color: var(--primary-light);
            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
            animation: fadeInDown 1s ease-out;
        }

         #hero-carousel  .carousel-caption h1 span {
            color: var(--accent-green);
        }

        
         #hero-carousel .carousel-caption p {
            font-size: 1.25rem;
            max-width: 700px;
            margin: 1rem auto;
            color: #E0E0E0;
            animation: fadeInUp 1s ease-out 0.5s;
            animation-fill-mode: both; /* Keeps the element in its final state */
        }
        
         #hero-carousel .carousel-caption .btn{
            background-color: transparent;
            border-color: #ffffff;
            color: #ffffff;
         }
         
         #hero-carousel .carousel-caption .btn:hover{
              background-color: #ffffff; /* Fills on hover */
            color: #222222; /* Text color flips */
            transform: translateY(-2px);
         }
        .caption-subtitle { animation: fadeInUp 1s ease-out 0.5s both; }
        .caption-title { animation: fadeInUp 1s ease-out 0.8s both; }
        #hero-carousel .btn { animation: fadeInUp 1s ease-out 1.1s both; }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* --- PROFESSIONAL "ANATOMY OF CONTROL" SECTION --- */
        #hand-features {
            background-color: #f8fafc; /* bg-slate-50 */
        }
        /* Wrapper for sticky positioning */
        .visual-wrapper {
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 20vh; /* Sticks 20% from the top */
        }
        .feature-step {
            min-height: 40vh;
            margin-bottom: 2rem;
            /* Card Styling */
            background-color: #ffffff; /* bg-white */
            border: 2px solid #e2e8f0; /* border-slate-200 */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            padding: 2rem; /* p-8 */
            
            /* --- THIS IS THE FIX --- */
            /* Vertically centers the text content */
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* --- END OF FIX --- */

            /* Inactive State */
            opacity: 0.5;
            /* Animation */
            transition: opacity 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
        }
        /* This is the ACTIVE state, triggered by GSAP */
        .feature-step.is-active {
            opacity: 1;
            border-color: #22c55e; /* border-green-500 */
            transform: scale(1.02);
        }
        .feature-step h3 {
            color: #22c55e; /* text-green-500 */
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
        }
        /* On desktop, we adjust spacing */
        @media (min-width: 768px) {
            .feature-step {
                min-height: 60vh;
                margin-bottom: 20vh; /* Creates scroll space */
            }
        }
        /* --- END "ANATOMY OF CONTROL" --- */

        /* --- UNIFIED SECTION STYLING --- */
        .section-title {
            font-family: 'Orbitron', sans-serif;
            color: #1e293b; /* text-slate-800 */
        }
        .section-subtitle {
            color: #475569; /* text-slate-600 */
        }


        /* --- SERVICES, PARTNERS, CTA, FOOTER --- */
        #services { background-color: #f8fafc; }
        .service-card {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .service-icon { color: #22c55e; }
        .service-title { color: #1e293b; }
        #partners { background-color: #ffffff; }
        .partner-logo-item img {
            max-height: 45px;
            filter: grayscale(100%) opacity(60);
            transition: filter 0.3s ease;
        }
        .partner-logo-item:hover img { filter: grayscale(0%) opacity(100); }
        #cta { background: #1e293b; /* text-slate-800 */ }
        .cta-title { font-family: 'Orbitron', sans-serif; color: #ffffff; }
        .cta-text { color: #e2e8f0; } /* text-slate-200 */
        #footer { background-color: #1e293b; color: #cbd5e1; } /* text-slate-300 */
        .footer-heading { color: #22c55e; font-family: 'Orbitron', sans-serif; }
        .footer-links a, .footer-contact a { color: #cbd5e1; }
        .footer-links a:hover, .footer-contact a:hover { color: #ffffff; }
        .footer-divider { border-color: #334155; }
        .copyright-text { color: #94a3b8; }
        .social-icons a { color: #cbd5e1; }
        .social-icons a:hover { color: #22c55e; }

           /* --- Main Section Styling (for reference) --- */
        .section-title {
            font-family: var(--font-logo);
            color: var(--primary-light);
        }
        .section-subtitle {
            color: var(--text-muted);
        }


          /* Style for the custom swiper navigation buttons */
        .robot-swiper .swiper-button-next,
        .robot-swiper .swiper-button-prev {
            background-color: white;
            color: #111827; /* gray-900 */
            width: 44px;
            height: 44px;
            border-radius: 9999px; /* full */
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            transition: all 0.3s ease;
        }

        .robot-swiper .swiper-button-next:hover,
        .robot-swiper .swiper-button-prev:hover {
            background-color: #f3f4f6; /* gray-100 */
            transform: scale(1.05);
        }

        .robot-swiper .swiper-button-next::after,
        .robot-swiper .swiper-button-prev::after {
            font-size: 18px;
            font-weight: 900;
        }
        
        /* Style for swiper pagination bullets */
        .robot-swiper .swiper-pagination-bullet {
            background-color: #6b7280; /* gray-500 */
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        
        .robot-swiper .swiper-pagination-bullet-active {
            background-color: #111827; /* gray-900 */
            opacity: 1;
            transform: scale(1.1);
        }


        /* --- Featured Projects Section CSS --- */
        /* This is all the CSS you need for this section */
        .project-card {
            /* On mobile, it's a styled card */
            background-color: var(--secondary-dark);
            padding: 2rem;
            border-radius: 0.5rem;
        }
        @media (min-width: 768px) {
            /* On desktop, the card background is transparent */
            .project-card {
                background-color: transparent;
                padding: 0;
            }
        }
        .project-category {
            color: var(--accent-green);
            font-family: var(--font-logo);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .project-title {
            color: var(--primary-light);
            font-family: var(--font-logo);
            font-size: 2rem;
            font-weight: 700;
            margin-top: 0.5rem;
        }
        .project-description {
            line-height: 1.7;
            color: var(--text-muted);
        }
        .project-features-list {
            list-style: none;
            padding-left: 0;
        }
        .project-features-list li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: var(--text-muted);
        }
        .project-features-list i {
            color: var(--accent-green);
        }
        .btn-primary {
            display: inline-block;
            background-color: #f2f2f2;
            color: var(--primary-dark) !important;
            font-family: var(--font-main);
            font-weight: 700;
            padding: 0.75rem 2rem;
            border-radius: 9999px; /* pill shape */
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(100, 255, 218, 0.1);
        }
        .btn-primary:hover {
            background-color: white;
            color: var(--primary-dark) !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(100, 255, 218, 0.2);
        }
        /*
 * ===================================
 * WHATSAPP FLOATING BUTTON STYLING
 * ===================================
*/
.whatsapp-float-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Official WhatsApp Green */
    color: #FFF;
    border-radius: 50%;
    
    /* Centering the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.8rem; /* Makes the icon larger */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    
    /* "Rich" hover animation */
    transition: all 0.3s ease;
    
    /* Sits on top of other content */
    z-index: 1050; 
}

.whatsapp-float-btn:hover {
    color: #FFF;
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background-color: #128C7E; /* Darker WhatsApp green on hover */
}

/*
 * ===================================
 * SCROLL TO TOP ARROW STYLING
 * ===================================
*/
#scrollTopBtn {
    position: fixed;
    /* Positioned 15px above the WhatsApp button.
      (25px from bottom + 60px WA btn height + 15px_spacing) 
    */
    bottom: 100px; 
    right: 25px;
    
    width: 50px;
    height: 50px;
    
    /* Using your site's dark footer color */
    background-color: #1e293b; 
    color: #FFF;
    border-radius: 50%;
    
    /* Centering the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.5rem; /* Icon size */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); /* For fade-in-up effect */
    
    transition: all 0.3s ease;
    z-index: 1040; /* Below WhatsApp, above content */
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    background-color: #22c55e; /* Your brand green */
    color: #FFF;
    transform: translateY(-3px); /* "Lift" effect */
}
        .about-grid {
            height: 500px; /* Give the grid a fixed height */
        }
        .about-grid-item {
            background-color: #f1f5f9; /* bg-slate-100 */
            transition: opacity 0.3s ease;
        }
        .about-grid-item:hover {
            opacity: 0.9;
        }
        .about-main-image {
            background-image: url('https://images.unsplash.com/photo-1567789884554-0b844b597180?q=80&w=2070&auto=format=fit=crop');
            background-size: cover;
            background-position: center;
        }
        /* Add this to your CSS to see the effect */