body {
            font-family: 'Inter', sans-serif;
            background-color: #f1f2f6; 
            color: #1F2937;
        }

        .text-shadow {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        @keyframes gradient-flow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .animate-gradient-flow {
            background-size: 200% auto;
            background-image: linear-gradient(to right, #06b6d4 0%, #3b82f6 50%, #06b6d4 100%);
            animation: gradient-flow 10s ease infinite;
        }

        .light-card {
            background: #FFFFFF;
            border: 1px solid #E5E7EB;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .light-card:hover {
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            transform: translateY(-4px);
        }
        
        .glow-button {
            transition: all 0.3s ease;
        }
        .glow-button:hover {
            transform: scale(1.05);
        }
        
        .horizontal-slider::-webkit-scrollbar {
            display: none;
        }
        .horizontal-slider {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        .offering-card-item {
            opacity: 0;
        }

        @keyframes slide-in {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-in {
            animation: slide-in 0.7s ease-out forwards;
        }

        @keyframes card-slide-up {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .card-animate {
            animation: card-slide-up 0.6s ease-out forwards;
        }
        .cta-section {
            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1582693630824-53c825364347?q=80&w=2070&auto:format&fit=crop');
            background-size: cover;
            background-position: center;
        }

        /* ====================================================== */
        /* START: UPDATED CSS for Testimonials */
        /* ====================================================== */
        .testimonial-card {
            /* Increased size for better visual weight */
            width: 95vw; /* Takes up most of viewport width on mobile */
            max-width: 450px; /* Increased max width for desktop/larger screens */
            text-align: left; 
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            
            /* Existing styles */
            background-color: #ffffff;
            border-radius: 12px;
            border: 1px solid #E5E7EB;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 24px;
            margin: 0 16px; 
            height: auto; /* Allow content to dictate height */
            white-space: normal; /* Allow text to wrap inside the card */
        }
        
        .testimonial-carousel {
            display: flex;
            overflow: hidden;
            width: 100%;
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        .testimonial-track-inner {
          display: flex;
          white-space: nowrap; 
          align-items: stretch;
        }

        .testimonial-track-inner > .testimonial-card {
          flex-shrink: 0;
        }

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

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

        .testimonial-row-1 .testimonial-track-inner {
          animation: slide-right 40s linear infinite;
          will-change: transform;
        }

        .testimonial-row-2 .testimonial-track-inner {
          animation: slide-left 40s linear infinite;
          will-change: transform;
        }

        .testimonial-track-inner:hover {
          animation-play-state: paused;
        }

        @media (prefers-reduced-motion: reduce) {
          .testimonial-row-1 .testimonial-track-inner,
          .testimonial-row-2 .testimonial-track-inner {
            animation: none;
          }
        }
        /* ====================================================== */
        /* END: UPDATED CSS for Testimonials */
        /* ====================================================== */


        /* === Footer Styling (UPDATED TO ORIGINAL DARK STYLE) === */
        .footer {
          font-family: 'Inter', sans-serif;
          color: #e5e7eb; /* Light gray text */
          /* Reverted to original dark gradient background */
          background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
          position: relative;
          overflow: hidden;
        }

        .footer a {
          color: #cbd5e1; /* Lighter links */
          text-decoration: none;
          transition: color 0.2s ease;
        }

        .footer a:hover {
          color: #60a5fa; /* Blue hover color */
        }

        .footer-main {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
          gap: 2rem;
          padding: 3rem 2rem;
          align-items: start;
        }
        
        .footer-logo {
            grid-column: span 1;
        }

        .footer-logo img {
          width: 140px;
          margin-bottom: 0.5rem;
        }

        .footer-logo p {
          color: #9ca3af;
          font-size: 0.9rem;
        }

        .footer-links h4,
        .footer-legal h4,
        .footer-contact h4 {
          font-weight: 700;
          color: #ffffff; /* White heading color */
          margin-bottom: 1rem;
          position: relative;
        }

        /* Added back blue underline for dark footer for contrast */
        .footer-links h4::after,
        .footer-legal h4::after,
        .footer-contact h4::after {
          content: '';
          position: absolute;
          bottom: -0.4rem;
          left: 0;
          width: 40px;
          height: 2px;
          background: #60a5fa;
          border-radius: 2px;
        }


        .footer-links ul,
        .footer-legal ul {
          list-style: none;
          padding: 0;
        }

        .footer-links li,
        .footer-legal li {
          margin-bottom: 0.6rem;
        }

        .footer-contact p {
          color: #d1d5db;
          margin: 0.6rem 0;
          font-size: 0.9rem;
        }

        .footer-contact i {
          color: #60a5fa; /* Light blue icon color */
          margin-right: 0.6rem;
        }

        .footer-social {
          margin-top: 1.5rem;
        }

        .footer-social a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.08); /* Dark background */
          color: #ffffff;
          width: 35px;
          height: 35px;
          border-radius: 9999px;
          margin-right: 0.8rem;
          transition: all 0.3s ease;
        }

        .footer-social a:hover {
          background: #60a5fa;
          color: #0f172a; /* Dark background on hover */
          transform: translateY(-2px);
        }

        .footer-bottom {
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          text-align: center;
          padding: 1rem;
          font-size: 0.85rem;
          color: #9ca3af;
          background: rgba(0, 0, 0, 0.2);
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
          .footer-main {
            grid-template-columns: 1fr;
            text-align: left;
          }
          .footer-logo {
            grid-column: span 1;
            margin-bottom: 1.5rem;
          }
        }
        
        /* END: Footer Styling */
        
        /* FAQ STYLES */
        .faq-item {
            border-bottom: 1px solid #e5e7eb;
        }
        .faq-question {
            cursor: pointer;
            padding: 1.25rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1.125rem;
            color: #111827;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out;
            padding: 0 0;
            color: #4b5563;
        }
        .faq-answer.active {
            max-height: 500px; /* Sufficiently large value */
            padding-bottom: 1.5rem;
        }
        .chevron {
            transition: transform 0.3s ease;
        }
        .chevron.rotated {
            transform: rotate(180deg);
        }

        /* CONTACT SECTION STYLES (Custom wave background) */
        .connect-section {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .wave-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
            z-index: 10;
            pointer-events: none;
        }

        /* SVG for wave background (light, subtle effect) */
        .wave-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.6;
        }
        
        .contact-content {
            position: relative;
            z-index: 20;
        }
        
        .send-button-gradient {
            background-image: linear-gradient(to right, #8a2be2, #a020f0, #9370db);
        }


        /* Custom CSS for animating the SVG path - UPDATED FOR DOTTED LINE */
        .animated-path {
            /* This is critical for the animation effect */
            stroke-dasharray: 5, 15; /* Shorter dash (dot) and larger gap */
            /* Start dash offset at 0 and move it backward to create flow */
            stroke-dashoffset: 0; 
            fill: none; /* Ensure no fill */
            transition: stroke-dashoffset 2s ease-out; /* Smooth transition for visual effect */
            /* Apply the new dash-flow-dotted animation for continuous movement */
            /* Removed dash-flow-dotted animation here to rely fully on scroll control. 
               It will be re-applied via JS if scroll logic is not active (mobile/resize) */
        }

        /* Temporarily disable the dash-flow animation when drawing via scroll */
        .animated-path.draw-on-scroll {
             animation: none !important;
             /* Ensure dasharray is set correctly for the visual dotted line when drawing starts */
             stroke-dasharray: 5, 15; 
             stroke-dashoffset: 0; /* Will be set by JS */
             stroke: #3b82f6 !important; /* Ensure vibrant blue on desktop */
        }

        .animated-path.flow-infinite {
            animation: dash-flow-dotted 1s linear infinite;
        }
        
        /* NEW: Custom styling for city filter cards */
        .city-filter-container .neon-border {
            border: 2px solid #000000 !important; /* Strong black border */
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.4); /* Neon blue glow effect */
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        
        /* 3D Flip Card Styles */
        .city-flip-card {
            perspective: 1000px;
            width: 100%;
            height: 100%;
        }

        .city-flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .city-flip-card.flipped .city-flip-inner {
            transform: rotateY(180deg);
        }

        .city-flip-front, .city-flip-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .city-flip-front {
            background-color: white;
            z-index: 2;
        }

        .city-flip-back {
            background-color: white;
            transform: rotateY(180deg);
            z-index: 1;
        }

        .city-flip-front img, .city-flip-back img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* UNIFIED HOVER/ACTIVE/FOCUS STYLES FOR NEON BORDER */
        .city-filter:hover .neon-border, 
        .city-filter:active .neon-border,
        .city-filter:focus .neon-border {
            box-shadow: 0 0 15px rgba(239, 68, 68, 0.9), 0 0 25px rgba(239, 68, 68, 0.5); /* Hover glow to red/pink for contrast */
        }
        
        /* UNIFIED HOVER/ACTIVE/FOCUS STYLES FOR NEON BORDER - APPLYING TRANSFORM TO THE PARENT CONTAINER */
        .city-filter:hover, 
        .city-filter:active,
        .city-filter:focus {
            transform: translateY(-2px); /* Apply lift effect to the whole container */
            transition: transform 0.3s ease;
        }
        
        /* === UPDATED CITY IMAGE SLIDE/KEN BURNS EFFECT === */
        .city-filter .city-image {
             /* Increased duration for a smoother "slide" feel */
             transition: transform 0.8s ease-in-out;
        }
        /* DESKTOP/FOCUS HOVER EFFECT (This applies the image slide/scale) */
        .city-filter:hover .city-image,
        .city-filter:focus .city-image {
             /* Scale up and translate right/down for a subtle Ken Burns "slide" effect */
             transform: scale(1.2) translate(5%, 5%); 
        }
        /* For touch devices, ensure tapping (active) doesn't keep the animation, only the hover/focus state applies the slide. */
        .city-filter:active .city-image {
             /* When active (tapped), reset the slide transformation to avoid keeping the slide */
             transform: scale(1); /* Ensure it doesn't slide on tap, only on hover/focus */
             transition-duration: 0.1s; /* Quick reset for active state */
        }
        /* ============================================== */
        
        /* NEW: 3D Card and Flow Styles for How It Works */

        .step-card-3d {
            background-color: #ffffff;
            border-radius: 20px;
            padding: 30px;
            /* Stronger lift shadow + Blue ambient glow for 3D feel */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 
                        0 15px 30px -5px rgba(59, 130, 246, 0.3); 
            /* Subtle 3D perspective applied to the card */
            transform: perspective(1000px) rotateX(0deg) scale(1);
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
            border: 1px solid #e5e7eb;
            /* Add scroll reveal base styles */
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.5s, transform 0.5s;
        }
        
        /* Class applied by Intersection Observer for reveal */
        .step-card-3d.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .step-card-3d.is-visible .step-badge {
            animation-delay: 0.5s; /* Delay pulse after card slides in */
        }
        
        .step-card-3d:hover {
            /* Subtle 3D tilt on hover for the interactive feel */
            transform: perspective(1000px) rotateX(2deg) scale(1.02); 
            box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.35),
                        0 20px 40px -8px rgba(96, 165, 250, 0.5); /* Stronger glow */
        }
        
        /* Step Dot (Connection Circle) Styling */
        .step-dot {
            fill: #ffffff;
            stroke: #3b82f6;
            stroke-width: 4;
        }
        
        /* NEW: Styles for the step number badge to ensure pulsing */
        .step-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 9999px;
            font-weight: 700;
            color: #ffffff;
            background-image: linear-gradient(135deg, #3b82f6, #06b6d4);
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); /* Initial shadow for pulse */
        }
        
        /* Mobile divider line styling */
        .mobile-divider {
            position: relative;
            height: 100%;
        }
        .mobile-divider::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            background: repeating-linear-gradient(
                to bottom,
                #93c5fd, /* Blue-300 */
                #93c5fd 5px,
                transparent 5px,
                transparent 15px
            );
        }
        /* Continuous subtle float on desktop only (removed hover scale up) */
        @media (min-width: 1024px) {
            .step-card-3d {
                animation: float-subtle 4s ease-in-out infinite;
            }
            #step-2.step-card-3d {
                 /* Offset the timing for visual variety */
                animation-delay: 1.5s; 
            }
            #step-3.step-card-3d {
                animation-delay: 3s;
            }
        }