/* INHERITED CSS VARIABLES for Theming */
                :root {
                --primary-dark: #0a192f; /* Deep Navy Background */
                --secondary-dark: #112240; /* Card/Section Background */
                --accent-color: #64ffda; /* Vibrant Cyan Accent */
                --light-text: #ccd6f6; /* Main Text Color */
                --lighter-text: #8892b0; /* Subtext/Muted Color */
                }

                /* Configure Tailwind to use our custom theme colors */
                tailwind.config = {
                theme: {
                extend: {
                colors: {
                'primary-dark': 'var(--primary-dark)',
                'secondary-dark': 'var(--secondary-dark)',
                'accent': 'var(--accent-color)',
                'light-text': 'var(--light-text)',
                'lighter-text': 'var(--lighter-text)',
                },
                fontFamily: {
                sans: ['Inter', 'sans-serif'],
                },
                boxShadow: {
                'accent-glow': '0 0 15px rgba(100, 255, 218, 0.3)',
                }
                }
                }
                }

                body {
                background-color: var(--primary-dark);
                color: var(--light-text);
                font-family: 'Inter', sans-serif;
                overflow-x: hidden; /* Prevent horizontal scroll on mobile */
                }

                /* --- Header Setup for Canvas Animation --- */
                #animated-header {
                position: relative;
                overflow: hidden;
                background-color: var(--secondary-dark);
                }

                /* Canvas styling to cover the header area and sit behind text */
                #particleCanvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
                z-index: 0; /* Keep it behind the header content */
                }

                /* --- Custom Testimonial Card Style --- */
                .testimonial-card {
                background-color: var(--secondary-dark);
                transition: all 0.3s ease-in-out;
                border: 1px solid rgba(17, 34, 64, 0.5);
                min-height: 350px; /* Enforce consistent card height for smooth transitions */
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
                }

                .testimonial-card:hover {
                transform: none; /* Remove hover transform since it's a carousel */
                border-color: rgba(17, 34, 64, 0.5);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
                }

                .quote-icon {
                color: var(--accent-color);
                opacity: 0.1;
                font-size: 5rem;
                position: absolute;
                top: 0.5rem;
                right: 0.5rem;
                line-height: 1;
                }

                /* --- Project Card Style --- */
                .project-card {
                background-color: var(--secondary-dark);
                transition: all 0.3s ease-in-out;
                }

                .project-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
                }


                /* --- Impact Snapshot Card Style --- */
                .impact-card {
                background-color: rgba(17, 34, 64, 0.6);
                border: 2px solid var(--accent-color);
                transition: all 0.3s ease-in-out;
                position: relative;
                overflow: hidden;
                }

                .impact-card:before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.05), transparent);
                transition: left 0.7s ease-in-out;
                }

                .impact-card:hover:before {
                left: 100%;
                }

                /* Keyframe for the pulsing glow on load */
                @keyframes pulse-accent {
                0% { box-shadow: 0 0 0 rgba(100, 255, 218, 0.5); }
                70% { box-shadow: 0 0 10px rgba(100, 255, 218, 0.8); }
                100% { box-shadow: 0 0 0 rgba(100, 255, 218, 0.5); }
                }

                .pulse-on-load {
                animation: pulse-accent 2s ease-out infinite alternate;
                }

                /* --- CAROUSEL SLIDE STYLES (Existing) --- */

                .carousel-wrapper {
                position: relative;
                /* Ensures smooth height transition */
                transition: height 0.3s ease-in-out;
                overflow: hidden; /* Clips the sliding elements */
                }

                .testimonial-slide {
                padding: 2rem;
                border-radius: 0.75rem;
                /* Slide transition using transform */
                transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

                /* Initial state: off-screen right */
                transform: translateX(100%);

                /* Must be absolute for overlapping transition */
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                pointer-events: none;
                z-index: 10; /* Default background */
                }

                /* Class for the slide that is currently visible */
                .testimonial-slide.active-slide {
                transform: translateX(0); /* Move to center */
                position: relative; /* Crucial: make it relative to dictate the carousel-wrapper height */
                pointer-events: auto;
                z-index: 20; /* Bring active slide forward */
                }

                /* Class for the slide that is moving off-screen left (EXITING) */
                .testimonial-slide.slide-exit {
                transform: translateX(-100%);
                position: absolute; /* Must be absolute for the exit animation */
                z-index: 15;
                }

                /* --- PROGRESS DOT STYLES (UPDATED for Dot/Line Toggle) --- */

                .dot-container {
                display: flex;
                justify-content: center;
                margin-top: 2rem;
                padding: 0 1rem;
                }

                .progress-dot {
                /* Base style: Small dot/square */
                height: 8px;
                width: 8px;
                margin: 0 0.5rem;
                background-color: var(--secondary-dark); /* Darker background for the dot itself */
                border: 1px solid var(--lighter-text); /* Subtle border for visibility */
                cursor: pointer;
                border-radius: 4px; /* Square with rounded corners */
                overflow: hidden;
                flex-grow: 0; /* Prevents dot from taking up excess space */
                max-width: 8px; /* Initial max width is small */
                transition: all 0.3s ease-in-out; /* Transition size change */
                position: relative;
                opacity: 0.8;
                }

                .progress-dot:hover {
                transform: scale(1.1);
                opacity: 1;
                }

                /* Active Dot: Expands to the line, border changes to accent, prepares for fill animation */
                .progress-dot.active {
                width: 100%;
                max-width: 120px;
                border-radius: 2px; /* Flatter radius for line shape */
                border-color: var(--accent-color);
                flex-grow: 1; /* Allows it to take up the space */
                transform: none; /* Remove hover effect when active */
                }

                .progress-dot-fill {
                height: 100%;
                width: 0%;
                background-color: var(--accent-color);
                transition: none; /* Managed by JS */
                position: absolute;
                top: 0;
                left: 0;
                }