/* CSS Variables for Light Theme - Refined for Professionalism */
        :root {
            --primary-bg: #ffffff; /* Main background, bright white */
            --secondary-bg: #f8f9fa; /* Slightly off-white for alternating sections */
            --tertiary-bg: #eef1f5;  /* Light gray for cards/inputs, slightly more prominent */
            --navbar-bg-start: rgba(255,255,255,0.98); /* Nearly opaque white for navbar */
            --navbar-bg-end: rgba(253,253,253,0.98);
            --navbar-text: #212529; /* Dark charcoal for navbar text */
            --hero-overlay-start: rgba(255,255,255,0.7);
            --hero-overlay-mid: rgba(255,255,255,0.9);
            --hero-overlay-end: rgba(255,255,255,0.98);
            --text-dark: #212529; /* Main dark text */
            --text-medium: #495057; /* Medium gray text */
            --text-light: #6c757d; /* Lighter gray for secondary text/placeholders */
            --accent-orange: #fd7e14; /* Slightly deeper orange */
            --accent-yellow: #ffc107; /* Standard yellow */
            --accent-purple-light: #6f42c1; /* Deeper, richer purple */
            --accent-purple-medium: #563d7c; /* Even deeper purple for contrast */
            --accent-indigo: #6610f2; /* Deeper indigo */
            --accent-red: #dc3545; /* Standard red */
            --accent-green: #28a745; /* Standard green */
            --accent-blue: #007bff; /* Standard blue */
            --accent-teal: #20c997; /* Standard teal */
            --border-light: rgba(108, 117, 125, 0.15); /* Subtle gray border, slightly softer */
            --shadow-light: rgba(0, 0, 0, 0.05); /* Softer shadows */
            --shadow-medium: rgba(0, 0, 0, 0.1);
            --shadow-strong: rgba(0, 0, 0, 0.2);
            --button-shadow-color: rgba(249, 115, 22, 0.3); /* Button specific shadow color */
            --button-shadow-hover-color: rgba(249, 115, 22, 0.4);
            --bg-section-secondary: #f0f2f5; /* A bit darker than secondary-bg for contrast */
            --text-medium-dark: #343a40; /* Slightly darker than text-medium for contrast */
        }

        /* Base Styles */
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow-x: hidden; /* Prevent horizontal scroll */
            background-color: var(--primary-bg);
            color: var(--text-dark);
            line-height: 1.6;
            min-height: 100vh;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Reusable container for sections */
        .section-container {
            max-width: 100%; /* Default to full width for mobile */
            margin: 0 auto;
            padding: 0 1rem; /* Consistent horizontal padding for mobile - REDUCED FROM 1.5REM */
        }

        /* Animations */
        @keyframes fade-in-down {
          from { opacity: 0; transform: translateY(-20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-down { animation: fade-in-down 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

        @keyframes fade-in-up {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up { animation: fade-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

        @keyframes fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        .animate-fade-in { animation: fade-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

        @keyframes zoom-in {
          from { opacity: 0; transform: scale(0.95); }
          to { opacity: 1; transform: scale(1); }
        }
        .animate-zoom-in { animation: zoom-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
        .animate-delay-100 { animation-delay: 0.1s; }
        .animate-delay-200 { animation-delay: 0.2s; }
        .animate-delay-300 { animation-delay: 0.3s; }
        .animate-delay-400 { animation-delay: 0.4s; }
        .animate-delay-500 { animation-delay: 0.5s; }
        .animate-delay-600 { animation-delay: 0.6s; }
        .animate-delay-700 { animation-delay: 0.7s; }
        .animate-delay-800 { animation-delay: 0.8s; }

        /* General Utility Classes */
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .block { display: block; }
        .relative { position: relative; }
        .absolute { position: absolute; }
        .fixed { position: fixed; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .z-50 { z-index: 50; }
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .w-full { width: 100%; }
        .h-screen { height: 100vh; }
        .py-16 { padding-top: 4rem; padding-bottom: 4rem; } /* Adjusted padding */
        .pt-16 { padding-top: 4rem; }
        .p-8 { padding: 2rem; }
        .p-12 { padding: 3rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mb-10 { margin-bottom: 0rem; }
        .mb-16 { margin-bottom: 4rem; }
        .mt-16 { margin-top: 4rem; }
        .rounded-full { border-radius: 9999px; }
        .rounded-md { border-radius: 0.375rem; }
        .rounded-lg { border-radius: 0.5rem; } /* Added for more common use */
        .rounded-2xl { border-radius: 1rem; }
        .rounded-3xl { border-radius: 1.5rem; }
        .shadow-md { box-shadow: 0 4px 6px var(--shadow-light); }
        .shadow-xl { box-shadow: 0 20px 25px var(--shadow-medium); }
        .shadow-2xl { box-shadow: 0 25px 50px var(--shadow-strong); }
        .bg-cover-img { background-size: cover; }
        .bg-center-img { background-position: center; }
        .list-none { list-style: none; }
        .pl-0 { padding-left: 0; }
        .underline-on-hover:hover { text-decoration: underline; }

        /* Typography */
        .text-md { font-size: 1rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }
        .text-3xl { font-size: 1.875rem; }
        .text-4xl { font-size: 2.25rem; }
        .text-5xl { font-size: 3rem; }
        .text-6xl { font-size: 3.75rem; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }
        .font-extrabold { font-weight: 800; }
        .tracking-tight { letter-spacing: -0.025em; }
        .leading-tight { line-height: 1.25; }

        /* Component Specific Styles */

        /* Navbar */
        .main-header {
            background: linear-gradient(to right, var(--navbar-bg-start), var(--navbar-bg-end));
            box-shadow: 0 2px 10px var(--shadow-light);
            color: var(--navbar-text);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            width: 100%;
            padding: 1rem 0;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 50;
            border-bottom: 1px solid var(--border-light); /* Subtle border */
        }
        .main-header .logo-text {
            color: var(--navbar-text);
            text-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .main-header .logo-accent {
            color: var(--accent-orange);
        }
        .nav-menu {
            display: none; /* Hidden by default for mobile */
            gap: 2.5rem;
        }
        .nav-link {
            color: var(--navbar-text);
            position: relative;
            padding: 0.75rem 0;
            font-weight: 600;
            transition: color 0.3s ease-out;
            text-decoration: none;
        }
        .nav-link:hover {
            color: var(--accent-purple-medium);
        }
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--accent-purple-light);
            border-radius: 9999px;
            animation: none;
        }

        /* Mobile Menu Button */
        .mobile-menu-button {
            color: var(--navbar-text);
            border: none;
            background: none;
            cursor: pointer;
            border-radius: 0.5rem;
            padding: 0.5rem;
            transition: background-color 0.3s ease-out, transform 0.2s ease-out;
            outline: none;
            /* Added for mobile menu icon visibility */
            position: relative;
            z-index: 10;
        }
        .mobile-menu-button:focus {
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);
        }
        .mobile-menu-button:hover {
            background-color: rgba(139, 92, 246, 0.1);
            transform: scale(1.1);
        }
        .mobile-menu-button svg {
            width: 36px;
            height: 36px;
            stroke-width: 2;
            transition: transform 0.3s ease-out;
            /* Explicitly setting stroke color for visibility */
            stroke: var(--accent-purple-medium); /* A dark purple for contrast */
        }
        .mobile-menu-button.active svg {
             transform: rotate(90deg);
        }

        /* Mobile Menu Drawer */
        .mobile-menu-drawer {
            opacity: 0;
            transform: translateY(-100%);
            visibility: hidden;
            pointer-events: none;
            position: absolute;
            width: 100%;
            left: 0;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            top: 100%;
            background-color: var(--navbar-bg-end); /* Consistent with navbar background */
            box-shadow: 0 8px 16px var(--shadow-medium);
            padding: 1rem 0;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
        }
        .mobile-menu-drawer.mobile-menu-open {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            pointer-events: auto;
        }
        .mobile-nav-link {
            color: var(--text-dark);
            padding: 0.75rem 1.5rem;
            transition: background-color 0.3s ease-out, transform 0.2s ease-out, box-shadow 0.3s ease-out;
            border-radius: 0.75rem;
            margin: 0.25rem auto;
            width: 90%;
            max-width: 300px;
            display: block;
            text-decoration: none;
            text-align: center;
            font-weight: 500;
            font-size: 1.125rem;
        }
        .mobile-nav-link:hover {
            background-color: var(--accent-purple-light);
            color: #ffffff;
            transform: scale(1.02);
            box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
        }

        /* Hero Section - Static Hero */
        .hero-section {
            background-color: var(--primary-bg);
            
            display: flex; /* Ensure flexbox for centering */
            align-items: center;
            justify-content: center;
            position: relative; /* Needed for overlay and background positioning */
            overflow: hidden; /* Hide overflowing background */
        }
        .hero-section .hero-bg-image {
            background-image: url('https://placehold.co/1920x1080/E0E0E0/333333?text=Digital+Screen+Advertising+Light'); /* Lighter placeholder */
            background-attachment: fixed; /* Parallax effect */
            background-size: cover;
            background-position: center;
            position: absolute;
            inset: 0;
            z-index: 0; /* Behind content */
        }
        .hero-section .hero-overlay {
            background: radial-gradient(circle at center, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 75%, var(--hero-overlay-end) 100%);
            position: absolute;
            inset: 0;
            z-index: 1; /* Above background, below content */
        }
        .hero-section .hero-content {
            position: relative; /* Ensure content is above overlay */
            z-index: 2;
            max-width: 90%; /* Allow more width for content */
            padding-bottom: 1rem; /* Reduced padding */
            text-align: center;
            margin: 0 auto; /* Center content horizontally */
        }

        .hero-heading {
            font-size: 2.5rem; /* text-4xl on mobile */
            font-weight: 800; /* font-extrabold */
            line-height: 1.25; /* leading-tight */
            color: var(--text-dark); /* Dark text on light background */
            text-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03); /* Softer shadow */
            margin-bottom: 1rem;
            max-width: 30ch; /* Control line length for readability */
            margin-left: auto;
            margin-right: auto;
        }
        .hero-heading .hero-heading-accent {
            color: var(--accent-orange);
        }
        .hero-subheading {
            font-size: 1.125rem; /* text-lg on mobile */
            color: var(--text-medium);
            margin-bottom: 2.5rem; /* More space before button */
            max-width: 60ch; /* Control line length for readability */
            margin-left: auto;
            margin-right: auto;
        }

        /* Buttons */
        .btn-primary {
            background: linear-gradient(90deg, var(--accent-orange), var(--accent-yellow));
            color: var(--text-dark); /* Dark text for contrast */
            font-weight: 700;
            padding: 1rem 2.5rem;
            border-radius: 9999px;
            box-shadow: 0 10px 20px var(--button-shadow-color);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            text-decoration: none;
            display: inline-block;
            position: relative;
            overflow: hidden;
            text-shadow: 0 1px 1px rgba(0,0,0,0.05);
            font-size: 1.125rem;
            border: none;
            cursor: pointer;
        }
        .btn-primary:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 15px 30px var(--button-shadow-hover-color);
        }
        .btn-primary:active {
            transform: translateY(0px) scale(0.98);
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
        }

        .btn-secondary {
            background: linear-gradient(90deg, var(--accent-purple-medium), var(--accent-purple-light)); /* Purple gradient */
            color: #ffffff;
            font-weight: 600;
            padding: 0.75rem 2rem;
            border-radius: 0.75rem; /* Slightly rounded */
            box-shadow: 0 5px 10px rgba(107, 70, 193, 0.3);
            transition: all 0.3s ease-in-out;
            text-decoration: none; /* Ensure no underline */
            display: flex; /* Make it flex to center icon and text */
            align-items: center;
            justify-content: center;
            gap: 0.75rem; /* Increased gap for icon and text */
            font-size: 1.125rem; /* Consistent font size */
        }
        .btn-secondary:hover {
            transform: translateY(-2px) scale(1.01);
            box-shadow: 0 8px 15px rgba(107, 70, 193, 0.5);
            color: #ffffff; /* Keep text white on hover */
        }


        /* Section Headings */
        .section-heading {
            font-size: 2.5rem; /* Mobile font size */
            font-weight: 800;
            color: var(--accent-purple-medium); /* Darker purple for headings */
            text-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 4rem;
        }

        /* Billboard Section */
        .billboard-text {
            font-size: 1.125rem;
            color: var(--text-medium);
            text-align: left;
            line-height: 1.6;
        }
        .billboard-feature-title {
            font-size: 1.875rem;
            font-weight: 700;
            text-align: left;
            margin-bottom: 1.5rem;
        }
        .billboard-feature-title.orange { color: var(--accent-orange); }
        .billboard-feature-title.indigo { color: var(--accent-indigo); }

        .feature-list {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 1rem;
            font-size: 1.125rem;
            color: var(--text-medium);
            text-align: left;
            list-style: none;
            padding-left: 0;
        }
        .feature-item {
            
            align-items: center;
            background-color: var(--tertiary-bg); /* Tertiary for feature items */
            padding: 1rem;
            border-radius: 0.75rem;
            box-shadow: 0 2px 6px var(--shadow-light);
            color: var(--text-dark);
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
            border: 1px solid rgba(139, 92, 246, 0.1); /* Subtle purple border */
        }
        .feature-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px var(--shadow-medium);
            background-color: rgba(139, 92, 246, 0.05); /* Subtle purple tint on hover */
        }
        .icon-svg { /* Global styling for all inline SVGs */
            margin-right: 0.75rem;
            flex-shrink: 0;
            width: 1.25em; /* Inherit font size for proper scaling */
            height: 1.25em;
            stroke-width: 2.2;
        }
        /* Icon Colors */
        .icon-svg.red { color: var(--accent-red); }
        .icon-svg.teal { color: var(--accent-teal); }
        .icon-svg.yellow { color: var(--accent-yellow); }
        .icon-svg.blue { color: var(--accent-blue); }
        .icon-svg.purple { color: var(--accent-purple-light); }
        .icon-svg.green { color: var(--accent-green); }
        .icon-svg.orange { color: var(--accent-orange); }

        .feature-item span {
            color: var(--text-dark);
            font-weight: 600;
        }

        .cta-section {
            margin-top: 4rem;
            padding: 2.5rem;
            border-radius: 1rem;
            box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2); /* Shadow matching gradient for light theme */
            background: linear-gradient(90deg, var(--accent-red), var(--accent-orange));
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        .cta-section h3 {
            font-size: 1.875rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 1rem;
        }
        .cta-section p {
            font-size: 1.125rem;
            color: #ffffff;
            margin-bottom: 2rem;
        }
        .cta-section .btn-primary {
            background-color: #ffffff; /* White button on colorful CTA */
            color: var(--accent-red);
            font-size: 1.125rem;
            width: 100%; /* Full width on mobile */
            max-width: 300px; /* Constrain width for mobile CTA button */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .cta-section .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

        /* Portfolio Section */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 2.5rem; /* Increased gap for better visual separation */
        }
        .portfolio-card {
            background-color: var(--tertiary-bg); /* Tertiary for portfolio cards */
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 10px 20px var(--shadow-medium); /* Softer shadow for cards */
            border: 1px solid var(--border-light);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .portfolio-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 15px 30px var(--shadow-strong); /* More pronounced on hover */
        }
        .portfolio-card img {
            transition: transform 0.3s ease-in-out;
            height: 224px; /* Fixed height for consistent image size: h-56 = 14rem = 224px */
            object-fit: cover; /* Ensure images cover the area without distortion */
            width: 100%;
        }
        .portfolio-card-content {
            padding: 1.5rem; /* Padding for the content area of the card */
        }
        .portfolio-card h3 {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            margin-bottom: 0.75rem; /* Spacing below title */
        }
        /* Specific colors for portfolio item titles */
        .portfolio-card .purple-medium { color: var(--accent-purple-medium); }
        .portfolio-card .indigo { color: var(--accent-indigo); }
        .portfolio-card .orange { color: var(--accent-orange); }
        .portfolio-card .green { color: var(--accent-green); }
        .portfolio-card .red { color: var(--accent-red); }
        .portfolio-card .teal { color: var(--accent-teal); }

        .portfolio-card p {
            font-size: 1.0625rem; /* slightly larger than base text for readability */
            line-height: 1.6;
        }
        .portfolio-card .text-medium-dark {
            color: var(--text-medium-dark);
        }

        /* About Us Section */
        .about-us-container {
            max-width: 900px;
            background-color: var(--secondary-bg); /* Secondary background for about section */
            padding: 2.5rem;
            border-radius: 1.5rem;
            box-shadow: 0 15px 30px var(--shadow-medium);
            border: 1px solid var(--border-light);
        }
        .about-us-container p {
            color: var(--text-medium);
        }
        .about-us-container .font-bold {
            color: var(--accent-orange); /* Highlight for brand name */
        }

        /* Contact Section */
        .contact-form-container {
            max-width: 600px;
            background-color: var(--secondary-bg); /* Secondary background for contact form */
            padding: 2.5rem;
            border-radius: 1.5rem;
            box-shadow: 0 15px 30px var(--shadow-medium);
            border: 1px solid var(--border-light);
        }
        .contact-form-container p {
            color: var(--text-medium);
        }
        .form-input {
            background-color: var(--primary-bg); /* Primary for inputs */
            border: 1px solid var(--text-light);
            border-radius: 0.5rem;
            padding: 1rem;
            color: var(--text-dark);
            transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            width:90%;
			margin-bottom: 20px;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--accent-purple-light);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
            background-color: #fcfdff; /* Slightly lighter on focus */
        }
        .form-input::placeholder {
            color: var(--text-light);
        }

        .contact-details p a {
            color: var(--accent-purple-medium); /* Darker purple for links */
            transition: color 0.3s ease;
        }
        .contact-details p a:hover {
            color: var(--accent-purple-light);
        }

        /* Floating Buttons */
        .fixed.bottom-6.right-6 a {
            padding: 1rem; /* Adjust padding for larger icons */
            width: 56px; /* Fixed width for circle */
            height: 56px; /* Fixed height for circle */
            flex-shrink: 0;
            display: flex; /* Ensure content is centered */
            align-items: center;
            justify-content: center;
            border-radius: 9999px; /* Ensure perfectly round */
            transition: all 0.3s ease-in-out; /* Add transition for smoothness */
        }
        .fixed.bottom-6.right-6 a svg {
            width: 28px; /* Standard icon size for floating buttons */
            height: 28px;
            stroke-width: 2.2;
            margin-right: 0; /* No margin as text is removed */
        }
        /* Ensure there's no hidden text or group hover effects on floating buttons */
        .fixed.bottom-6.right-6 a {
            box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Softer initial shadow */
        }
        .fixed.bottom-6.right-6 a:hover {
            box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Stronger shadow on hover */
            transform: translateY(-4px) scale(1.1); /* Add a slight lift and scale on hover */
        }
        .fixed.bottom-6.right-6 a .group-hover\:block {
            display: none; /* Hide by default */
        }
        .fixed.bottom-6.right-6 a:hover .group-hover\:block {
            display: block; /* Show on hover */
        }


        /* Footer */
        .main-footer {
            background: linear-gradient(to right, var(--navbar-bg-start), var(--navbar-bg-end));
            color: var(--text-medium);
            box-shadow: 0 -2px 10px var(--shadow-light);
           
            text-align: center;
            border-top: 1px solid var(--border-light); /* Subtle border */
        }
        .main-footer p {
            margin-bottom: 1rem;
            font-size: 1rem;
            color: var(--text-medium);
        }
        .main-footer a {
            color: var(--accent-purple-medium); /* Darker purple for links */
            transition: color 0.3s ease;
        }
        .main-footer a:hover {
            color: var(--accent-purple-light);
        }

        /* Clients Carousel Styles */
        .clients-carousel-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 1rem 0; /* Add some vertical padding */
            background: linear-gradient(to right, rgba(248, 249, 250, 0.8), rgba(248, 249, 250, 0) 5%, rgba(248, 249, 250, 0) 95%, rgba(248, 249, 250, 0.8)); /* Light theme gradient mask */
            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0));
            mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0));
        }

        .clients-carousel-track {
            display: flex;
            white-space: nowrap; /* Prevent wrapping of images */
            /* Calculated width: (150px logo width + 2 * 1.5rem margin [2 * 24px]) * 8 original logos = 198px * 8 = 1584px. Then double for duplicated content. */
            width: 3168px; /* Total width for 16 logos (8 original + 8 duplicated) */
            animation: scroll-left 40s linear infinite; /* Adjust duration for speed */
            will-change: transform; /* Optimize for animation */
        }

        .clients-logo {
            flex-shrink: 0; /* Prevent logos from shrinking */
            width: 150px; /* Fixed width for each logo */
            height: 80px; /* Fixed height for each logo */
            object-fit: contain; /* Ensure logos fit within their bounds */
            margin: 0 1.5rem; /* Space between logos */
            filter: grayscale(100%) brightness(1.2) contrast(1.2); /* Stylize logos for light theme */
            opacity: 0.7; /* Slightly faded */
            transition: filter 0.3s ease, opacity 0.3s ease;
        }

        .clients-logo:hover {
            filter: grayscale(0%) brightness(1) contrast(1); /* Colorize on hover */
            opacity: 1; /* Full opacity on hover */
        }

        @keyframes scroll-left {
            0% { transform: translateX(0px); }
            100% { transform: translateX(-1584px); } /* Scrolls exactly one set of 8 logos */
        }
        /* Media Queries for Responsiveness */
        @media (min-width: 768px) { /* Medium devices (tablts, 768px and up) */
            .nav-menu {
                display: flex;
            }
            .mobile-menu-button {
                display: none;
            }
            .mobile-menu-drawer {
                display: none;
            }

            .section-container {
                max-width: 1024px; /* Increased max-width for tablets */
                padding: 0 2rem; /* Adjusted padding for tablets */
            }

            .hero-heading {
                font-size: 4.5rem; /* md:text-6xl */
            }
            .hero-subheading {
                font-size: 1.375rem; /* md:text-xl */
            }
            .btn-primary {
                font-size: 1.25rem;
            }

            .section-heading {
                font-size: 3rem; /* md:text-5xl */
            }
            /* Adjusted for billboard section's inner div */
            .contact-form-container, .about-us-container {
                padding: 3rem;
            }
            .billboard-text {
                font-size: 1.25rem;
            }
            .billboard-feature-title {
                font-size: 2.25rem;
            }
            .feature-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1.5rem;
            }
            .cta-section h3 {
                font-size: 2.25rem;
            }
            .cta-section p {
                font-size: 1.25rem;
            }
            .cta-section .btn-primary {
                width: auto; /* Revert to auto width on desktop */
                padding-left: 3rem; /* Adjust padding for bigger buttons on desktop */
                padding-right: 3rem;
            }
            .contact-form-container .btn-primary { /* Specific for contact form */
                width: auto;
                padding-left: 3rem;
                padding-right: 3rem;
            }
            /* Portfolio grid for medium devices */
            .portfolio-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (min-width: 1024px) { /* Large devices (desktops, 1024px and up) */
            .section-container {
                max-width: 1400px; /* Wider content on large screens */
                padding: 0 3rem; /* Adjusted padding for large desktops */
            }

            .hero-heading {
                font-size: 5.5rem; /* Larger heading for desktops */
                line-height: 1.1;
            }
            .hero-section .hero-content {
                max-width: 1100px; /* Increased max-width for hero content */
            }
            .hero-subheading {
                font-size: 1.5rem; /* lg:text-2xl */
            }
            .section-heading {
                font-size: 3.75rem; /* lg:text-6xl */
            }
            .feature-list {
                gap: 2rem;
            }
            /* Portfolio grid for large devices */
            .portfolio-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }