/*
Theme Name: Epik Funnel
Theme URI: https://epikfunnel.com/
Author: You
Description: Made By Epik Funnel theme Custom
Version: 1.0
*/
        :root {
            --primary: #4FB286; /* NeoVerdant */
            --secondary: #34393B; /* Slate Iron */
            --accent: #FF715B; /* Coral Ember */
            --background: #F7F4E9; /* Cloud Cream */
            --text: #34393B;
           	--hover: #3DAF9F;
            --active: #FF563F;
            --sidebar: #ECEAE4;
            --anchor: #4FB286;
            --subheading: #5A5F61;
            --paragraph: #34393B;
        }

        /* Applying Poppins font and base text color */
        body {
            font-family: 'Poppins', sans-serif;
            color: var(--text);
            background-color: var(--background);
            /* CLS Fix: Always show scrollbar to prevent horizontal shift */
            overflow-y: scroll;
        }

        /* Tailwind Configuration Extension (for JIT mode with CDN, define colors directly) */
        /* Note: When using a build process, these would be in tailwind.config.js */
        .primary-color { color: var(--primary); }
        .bg-primary { background-color: var(--primary); }
        .secondary-color { color: var(--secondary); }
        .bg-secondary { background-color: var(--secondary); }
        .accent-color { color: var(--accent); }
        .bg-accent { background-color: var(--accent); }
        .background-color { color: var(--background); }
        .bg-background { background-color: var(--background); }
        .text-color { color: var(--text); }
        .hover-color { color: var(--hover); }
        .bg-hover-color { background-color: var(--hover); }
        .active-color { color: var(--active); }
        .bg-active-color { background-color: var(--active); }
        .sidebar-color { color: var(--sidebar); }
        .bg-sidebar-color { background-color: var(--sidebar); }
        .anchor-color { color: var(--anchor); }
        .subheading-color { color: var(--subheading); }
        .paragraph-color { color: var(--paragraph); }

        /* Custom styles for mega menu item strokes */
        .mega-menu-item-stroke {
            position: relative;
            padding-bottom: 0.25rem; /* Reduced padding for stroke */
            margin-bottom: 0.25rem; /* Reduced margin for stroke */
        }
        .mega-menu-item-stroke::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.1); /* Light stroke color */
        }
        .mega-menu-item-stroke:last-child::after,
        .mega-menu-item-stroke:nth-last-child(1)::after { /* Ensure last child in column doesn't have a stroke */
            display: none;
        }
        /* Icon styling */
        .mega-menu-item-stroke i,
        .mega-menu-list-item i { /* Target both types of items */
            margin-right: 0.75rem; /* Space between icon and text */
            color: var(--primary); /* Icon color */
        }

        /* Full-page mega menu specific transitions and visibility */
        .full-page-mega-menu {
            position: fixed;
            left: 139px; /* Reduced from 199px (199 * 0.7 = 139.3) */
            right: 139px; /* Reduced from 199px (199 * 0.7 = 139.3) */
            bottom: 0px; /* Changed from 199px to 0px */
            width: auto; /* Width is now controlled by left/right */
            height: auto; /* Height is now controlled by top/bottom */
            visibility: hidden; /* Hidden by default */
            opacity: 0; /* Fade out */
            transform: translateY(-20px); /* Slight slide up */
            transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
            pointer-events: none; /* Prevent interaction when hidden */
            overflow-y: hidden; /* Reverted to hidden for no scroll on desktop */
            border-radius: 1rem; /* Added border-radius for styling */
            z-index: 60; /* Increased z-index to be above the header (z-index: 50) */
            background-color: var(--background); /* Ensure background is set */
            padding: 0; /* Remove default padding, content will add its own */
            box-sizing: border-box; /* Include padding in dimensions */
        }
        .full-page-mega-menu.open {
            visibility: visible; /* Visible */
            opacity: 1; /* Fade in */
            transform: translateY(0); /* Slide down to original position */
            pointer-events: auto; /* Allow interaction */
        }

        /* Mobile menu overlay transitions */
        .mobile-menu-overlay {
            transform: translateX(-100%); /* Start off-screen to the left */
            transition: transform 0.3s ease-out;
        }
        .mobile-menu-overlay.open {
            transform: translateX(0); /* Slide in */
        }

        /* Ensure cross button is visible and interactive */
        .close-btn {
            z-index: 10; /* Ensure it's above other mega menu content */
            transition: transform 0.2s ease-out, background-color 0.2s ease-out;
        }
        .close-btn:active {
            transform: scale(0.9);
            background-color: var(--active); /* Active color on click */
        }

        /* Added for text alignment */
        .mega-menu-list-item {
            display: flex;
            align-items: center;
        }

        /* Mobile specific dropdown content for scrolling */
        .mobile-dropdown-content {
            max-height: 70vh; /* Limit height to prevent full screen scroll */
            overflow-y: auto; /* Allow scrolling within mobile dropdowns */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }

        /* Scrollbar Styling for Webkit browsers (Chrome, Safari) */
        /* Track */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px; /* For horizontal scrollbars if any */
        }
        ::-webkit-scrollbar-track {
            background: var(--secondary); /* Slate Iron */
            border-radius: 5px;
        }
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: var(--active); /* Coral Ember for thumb */
            border-radius: 5px;
        }
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent); /* Slightly different accent on hover */
        }

        /* Sticky header styles */
        .header-sticky {
            position: sticky;
            top: 0;
            z-index: 50; /* Ensure it stays above other content but below mega-menus */
            background-color: var(--background); /* Ensure background is solid when sticky */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Add shadow when sticky */
            transition: box-shadow 0.3s ease-in-out;
        }

/* Added by Syed... and generated by chatGPT */
main {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* === Typography === */
main h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  main h1 { font-size: 3rem; }
}

main h2 {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--subheading);
  margin-bottom: 1.25rem;
}

main h3, main h4, main h5, main h6 {
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 1rem;
}

main h3 { font-size: 1.5rem; }
main h4 { font-size: 1.25rem; }
main h5, main h6 { font-size: 1.125rem; }

main p {
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
  max-width: 48rem;
  color: var(--paragraph);
}

/* === Links === */
main a {
  color: var(--anchor);
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}
main a:hover {
  color: var(--hover);
}
main a:active {
  color: var(--active);
}

/* === Lists === */
main ul {
  margin-left: 1.5rem;
  list-style: none;
  padding-left: 0;
}

main ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--paragraph);
}

main ul li::before {
  content: "✅";
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: #FF563F;
}

/* === Images === */
main img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
main img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* === Blockquotes === */
main blockquote {
  border-left: 4px solid var(--accent);
  background-color: var(--sidebar);
  color: var(--secondary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  font-style: italic;
  position: relative;
}
main blockquote::before {
  content: "\201C";
  font-size: 2rem;
  position: absolute;
  left: -1.5rem;
  top: -0.5rem;
  color: var(--accent);
}

/* === Code Blocks === */
main code, main pre {
  background-color: #f4f4f4;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-family: monospace;
  font-size: 0.95rem;
  overflow-x: auto;
  display: block;
  margin: 1rem 0;
}

/* === Tables === */
main table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

main th,
main td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

main thead {
  background-color: var(--primary);
  color: white;
}

main tbody tr:hover {
  background-color: var(--sidebar);
  transition: background-color 0.3s ease;
}

/* Button */
main button {
  background-color: var(--accent);
  color: #fff;
  padding: 14px 30px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
}

main button:hover {
  background-color: var(--hover);
}

main button:active {
  background-color: var(--active);
}

/* Hero sEction CSS */
/* Custom animation for text fade-in-up */
@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure 'forwards' is always present so element stays in its final state */
.animate-fade-in-up {
    animation: fadeInMoveUp 0.8s ease-out forwards;
}
.animate-fade-in-up-2 {
    animation: fadeInMoveUp 0.8s ease-out 0.2s forwards; /* Slight delay */
}
.animate-fade-in-up-3 {
    animation: fadeInMoveUp 0.8s ease-out 0.4s forwards; /* More delay */
}

/* Optional: Subtle background pattern/gradient */
.hero-background-pattern {
    /* These use literal color values as CSS variables are stripped */
/*     background-image: radial-gradient(circle at top left, #F7F4E9 0%, #ECEAE4 50%, transparent 70%),
                      radial-gradient(circle at bottom right, #F7F4E9 0%, #ECEAE4 50%, transparent 70%);
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: top left, bottom right; */
}

/* Responsive image sizing */
.hero-image {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Ensures image fits within its container without cropping */
}



/* Custom animation for fade-in-up */
@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation classes */
.animate-fade-in-up {
    animation: fadeInMoveUp 0.8s ease-out forwards;
}
.animate-fade-in-up-2 {
    animation: fadeInMoveUp 0.8s ease-out 0.2s forwards; /* Slight delay */
}
.animate-fade-in-up-3 {
    animation: fadeInMoveUp 0.8s ease-out 0.4s forwards; /* More delay for CTA */
}
/* For individual cards, staggering their animation slightly */
.animate-fade-in-up[style*="animation-delay"] {
    opacity: 0; /* Ensure initial state is hidden for delayed animations */
}




        /* FAQ Home PAge specific styles */
        .faq-item-header {
            cursor: pointer;
            user-select: none; /* Prevent text selection on click */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            font-weight: 600;
            color: var(--secondary);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Light separator */
            transition: background-color 0.2s ease-in-out;
        }
        .faq-item-header:hover {
            background-color: rgba(0, 0, 0, 0.03); /* Subtle hover effect */
        }
        .faq-item-header.active {
            color: var(--primary);
            background-color: var(--background); /* Match background for active state */
            border-bottom-color: transparent;
        }
        .faq-item-header .faq-chevron {
            transition: transform 0.3s ease-in-out;
        }
        .faq-item-header.active .faq-chevron {
            transform: rotate(180deg);
        }
        .faq-item-content {
            padding: 0 1.5rem;
            overflow: hidden;
            max-height: 0; /* Hidden by default */
            transition: max-height 0.4s ease-in-out;
            background-color: var(--background); /* Background for content area */
            color: var(--paragraph);
        }
        .faq-item-content p {
            padding-bottom: 1.25rem; /* Padding for the paragraph inside */
            line-height: 1.6;
        }

/* Fixed Contact Buttons */
.contact-group {
    position: fixed;
    bottom: 24px; /* Spacing from bottom */
    right: 24px; /* Spacing from right */
    z-index: 110; /* Ensures it's above other content */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px; /* Space between buttons */
}

.contact-option {
    background-color: var(--primary); /* Default primary color */
    color: white;
    padding: 1rem; /* size of button */
    border-radius: 9999px; /* fully rounded */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Springy effect */
    transform: scale(0.8) translateY(20px); /* Initial state: slightly smaller, lower, hidden */
    opacity: 0;
    pointer-events: none; /* Not clickable when hidden */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; /* fixed width */
    height: 56px; /* fixed height */
}
.contact-option:hover {
    transform: scale(1.1) translateY(-2px); /* Scale up and slight lift on hover */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* Larger shadow on hover */
}

.contact-option.visible {
    transform: scale(1) translateY(0); /* Fully visible, original size, no offset */
    opacity: 1;
    pointer-events: auto; /* Clickable when visible */
}
/* Specific colors for individual contact options */
#whatsapp-btn { background-color: #25D366; } /* WhatsApp green */
#whatsapp-btn:hover { background-color: #1DA851; }
#email-btn { background-color: #3B82F6; } /* Tailwind blue-500 */
#email-btn:hover { background-color: #2563EB; }
#schedule-btn { background-color: #9333EA; } /* Tailwind purple-500 */
#schedule-btn:hover { background-color: #7C3AED; }
#chat-btn { background-color: var(--accent); } /* Your brand accent color */
#chat-btn:hover { background-color: var(--active); } /* Your brand active color */
#call-btn { background-color: var(--secondary); } /* Your brand secondary color */
#call-btn:hover { background-color: #1F2324; } /* Slightly darker secondary for hover */

/* Main toggle button */
#main-contact-toggle {
    width: 64px; /* Slightly larger toggle button */
    height: 64px;
    background-color: var(--accent); /* Your brand accent color */
    color: white;
    border-radius: 9999px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transform: scale(1) translateY(0);
    transition: all 0.3s ease-out; /* Smooth transition for scale and icon */
}
#main-contact-toggle:hover {
    transform: scale(1.1); /* Scale up on hover */
}

/* Message Box Overlay (for popups like Schedule or Chat) */
.message-box-overlay {
    position: fixed;
    inset: 0; /* Covers the whole viewport */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120; /* Ensures it's above all other content, including floating buttons */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}
.message-box-overlay.show {
    opacity: 1;
    visibility: visible;
}
.message-box-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 24rem; /* max-w-sm */
    width: 100%;
    text-align: center;
}
.message-box-content button {
    background-color: var(--primary); /* Primary brand color for popup button */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
}
.message-box-content button:hover {
    background-color: var(--hover); /* Hover brand color for popup button */
}
/* Custom animation for fade-in-up */
@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation classes */
.animate-fade-in-up {
    animation: fadeInMoveUp 0.8s ease-out forwards;
}
.animate-fade-in-up-2 {
    animation: fadeInMoveUp 0.8s ease-out 0.2s forwards; /* Slight delay */
}
.animate-fade-in-up-3 {
    animation: fadeInMoveUp 0.8s ease-out 0.4s forwards; /* More delay for CTA */
}
/* For individual elements with animation delay */
.animate-fade-in-up[style*="animation-delay"] {
    opacity: 0; /* Ensure initial state is hidden for delayed animations */
}

/* Scrollable Container and Frame Specific Styles */
.content-frame {
    border: 4px solid var(--primary); /* Visual border line */
    padding: 1.5rem; /* Default padding for mobile */
    border-radius: 1.5rem; /* Rounded corners for the frame */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Outer shadow */
}

@media (min-width: 768px) { /* Medium screens and up */
    .content-frame {
        padding: 4rem; /* Increased padding for desktop/tablet */
    }
}
@media (min-width: 1024px) { /* Large screens and up */
    .content-frame {
        padding: 6.25rem; /* Approx. 100px padding for large screens */
    }
}

.scrollable-content-area {
    height: 400px; /* Fixed height */
    overflow-y: auto; /* Enable vertical scrolling */
    background-color: white; /* Inner background */
    border-radius: 1rem; /* Rounded corners for the inner content */
    padding: 2rem; /* Inner padding for content */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05); /* Subtle inner shadow for depth */
}

/* Webkit Scrollbar Styling (Chrome, Safari, Edge) */
.scrollable-content-area::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}
.scrollable-content-area::-webkit-scrollbar-track {
    background: var(--sidebar); /* Track color: Cloud Cream */
    border-radius: 6px;
}
.scrollable-content-area::-webkit-scrollbar-thumb {
    background: var(--primary); /* Thumb color: NeoVerdant */
    border-radius: 6px;
    border: 2px solid var(--sidebar); /* Border around thumb */
}
.scrollable-content-area::-webkit-scrollbar-thumb:hover {
    background: var(--hover); /* Hover color: slightly darker NeoVerdant */
}

/* Firefox Scrollbar Styling */
.scrollable-content-area {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: var(--primary) var(--sidebar); /* thumb color track color */
}

/* Brands logo section CSS */
/* Custom animation for fade-in-up */
@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation classes */
.animate-fade-in-up {
    animation: fadeInMoveUp 0.8s ease-out forwards;
}
.animate-fade-in-up-2 {
    animation: fadeInMoveUp 0.8s ease-out 0.2s forwards; /* Slight delay */
}
.animate-fade-in-up-3 {
    animation: fadeInMoveUp 0.8s ease-out 0.4s forwards; /* More delay for CTA */
}
/* For individual elements with animation delay */
.animate-fade-in-up[style*="animation-delay"] {
    opacity: 0; /* Ensure initial state is hidden for delayed animations */
}

/* Marquee/Auto-Scroll Animation */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scrolls 50% of the width, so duplicated content aligns */
}

.marquee-content {
    white-space: nowrap; /* Keep all items in one line */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align logos */
    animation: scroll-left 20s linear infinite; /* Adjust duration for speed */
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused; /* Pause on hover */
}

.brand-logo-wrapper {
    flex-shrink: 0; /* Prevent logos from shrinking */
/*     width: 180px; Fixed width for each logo container */
	 width: 200px; /* Fixed width for each logo container */
    padding: 0 2rem; /* Space between logos */
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo {
/*     filter: grayscale(100%); Grayscale effect */
/*     opacity: 0.6; Slightly faded */
	opacity: 1; /* Slightly faded */
    transition: all 0.3s ease-in-out;
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
/*     max-height: 80px; Limit height of logos */
	max-height: 100px;
	border-radius: 5px;
}

.brand-logo:hover {
    filter: grayscale(0%); /* Full color on hover */
    opacity: 1; /* Fully opaque on hover */
    transform: scale(1.05); /* Slight scale on hover */
}

/* CEO Section CSS */
        /* CEO Section Specific Styles */
        /* CEO Section Specific Styles */
        #ceo-section {
            background-color: var(--background); /* Using secondary for dark background */
            padding-top: 4rem; /* py-16 */
            padding-bottom: 6rem; /* md:py-24 (adjusted slightly for vertical spacing) */
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
        }

        #ceo-section .container {
            max-width: 1280px; /* Equivalent to max-w-7xl (Tailwind default is ~1280px) */
            margin-left: auto;
            margin-right: auto;
        }

        #ceo-section h2 {
            color: var(--background); /* White text for main heading */
            margin-bottom: 1.5rem; /* mb-6 */
        }
        #ceo-section h2 .primary-color {
            color: var(--primary); /* Primary color for highlighted span */
        }
        #ceo-section p {
            color: var(--secondary); /* Light gray for paragraph, adjusted for readability on dark background */
            margin-bottom: 2rem; /* Adjusted margin-bottom for intro paragraph on mobile */
        }
        @media (min-width: 768px) {
            #ceo-section p {
                margin-bottom: 4rem; /* Restore margin for desktop */
            }
        }

        /* CEO Tab Buttons */
        .ceo-tab-btn {
            display: flex; /* Use flex to align icon and text */
            align-items: center; /* Center items vertically */
            justify-content: center; /* Center items horizontally if text wraps */
            text-align: center; /* Ensure text is centered if it wraps */
            padding: 0.8rem 1.6rem; /* Default for larger screens */
            font-size: 1.125rem; /* Default text-lg */
            border-radius: 9999px; /* rounded-full */
            font-weight: 600; /* font-semibold */
            cursor: pointer;
            transition: all 0.3s ease; /* Smooth transitions for hover/active */
            border: 1px solid transparent; /* Consistent border to prevent layout shift */
            flex-shrink: 0; /* Important: Prevent button from shrinking smaller than content */
            overflow: hidden; /* Hide overflowing content */
            text-overflow: ellipsis; /* Show ellipsis for overflowing text */
        }

        .active-ceo-tab { /* Specific class for active tab */
            background-color: var(--primary);
            color: white; /* Active text color is white */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            border-color: var(--primary);
        }

        /* Adjust colors for default (inactive) state */
        .ceo-tab-btn:not(.active-ceo-tab) {
            background-color: white; /* Inactive background is white */
            color: var(--secondary); /* Inactive text color is secondary */
            border: 1px solid var(--background); /* light gray border, using background variable */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .ceo-tab-btn:not(.active-ceo-tab):hover {
            background-color: var(--background); /* light gray hover, using background variable */
            border-color: var(--primary); /* primary color border on hover */
            box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
        }

        /* Responsive adjustments for CEO tab buttons */
        @media (max-width: 767px) { /* Applies to all mobile screens (below md) */
            .ceo-tab-btn {
                padding: 0.6rem 1rem; /* Smaller padding */
                font-size: 0.95rem; /* Slightly smaller font */
                white-space: normal; /* Allow text to wrap on mobile */
                height: auto; /* Allow height to adjust with content */
                flex-basis: auto; /* Allow flex item to determine its size based on content */
            }
        }
        @media (max-width: 479px) { /* Extra small screens */
            .ceo-tab-btn {
                padding: 1rem 1rem; /* Even smaller padding */align-content
                font-size: 0.85rem; /* Even smaller font */
            }
        }

        /* Tab Content Wrapper */
        .ceo-content-wrapper {
            position: relative;
            /* Adjust min-height based on the tallest content to prevent layout jumps */
            min-height: 300px; /* Keep a sensible min-height */
        }

        /* Tab Content Areas */
        .ceo-tab-content {
            /* Changed to opacity and visibility for smoother transitions and to prevent display issues */
            position: absolute; /* Take out of flow when hidden */
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }

        .ceo-tab-content.active-ceo-content {
            /* Show when active */
            position: static; /* Put back into flow when active */
            opacity: 1;
            visibility: visible;
            /* Removed animation: fadeIn here, as transition handles it */
        }

        /* Tab Content Text Colors (for content within the white tab box) */
        .ceo-tab-content h4 {
            color: var(--secondary); /* Using secondary for headings inside tabs */
        }
        .ceo-tab-content p,
        .ceo-tab-content ul li {
            color: var(--secondary); /* Using secondary for text inside tabs */
        }
        /* For "Muhammad Ahmad" text directly under the CEO picture */
        #ceo-section .mb-2.primary-color { /* Adjusted selector for the CEO name h3 */
            color: var(--primary);
        }
        #ceo-section .text-xl.font-medium.mb-4 { /* For Founder & CEO text */
            color: var(--secondary); /* Using rgba for better control on dark background */
        }
        #ceo-section .text-lg.leading-relaxed { /* For CEO quote */
            color: var(--secondary); /* Using rgba for better control on dark background */
        }
        #ceo-section .text-right.font-semibold.mt-4 { /* For CEO name in message */
            color: var(--secondary); /* Using secondary for CEO name in message */
        }

        /* Specific fix for ceo-message-content */
        .ceo-message-content h4,
        .ceo-message-content p,
        .ceo-message-content li {
            color: var(--secondary) !important;
        }

        /* Custom animation for fade-in-up */
        @keyframes fadeInMoveUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Animation classes */
        .animate-fade-in-up {
            animation: fadeInMoveUp 0.8s ease-out both;
        }
        .animate-fade-in-up-2 {
            animation: fadeInMoveUp 0.8s ease-out 0.2s both;
        }
        .animate-fade-in-up-3 {
            animation: fadeInMoveUp 0.8s ease-out 0.4s both;
        }
/* Reviews Section CSS */
        /* Custom animation for fade-in-up */
        @keyframes fadeInMoveUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Animation classes */
        .animate-fade-in-up {
            animation: fadeInMoveUp 0.8s ease-out forwards;
        }
        .animate-fade-in-up-2 {
            animation: fadeInMoveUp 0.8s ease-out 0.2s forwards; /* Slight delay */
        }
        .animate-fade-in-up-3 {
            animation: fadeInMoveUp 0.8s ease-out 0.4s forwards; /* More delay for CTA */
        }
        /* For individual elements with animation delay */
        .animate-fade-in-up[style*="animation-delay"] {
            opacity: 0; /* Ensure initial state is hidden for delayed animations */
        }

        	/* Review Sites Marquee/Auto-Scroll Animation */
        @keyframes scroll-right-to-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* Scrolls 50% of the width for seamless loop */
        }

        .review-sites-marquee-content {
            white-space: nowrap; /* Keep all items in one line */
            display: flex; /* Use flexbox for alignment */
            align-items: center; /* Vertically align logos */
            animation: scroll-right-to-left 5s linear infinite; /* Adjust duration for speed */
            animation-play-state: running; /* Ensure it runs by default */
        }

        .review-sites-marquee-container:hover .review-sites-marquee-content {
            animation-play-state: paused; /* Pause on hover */
        }

        .review-site-logo-wrapper {
            flex-shrink: 0; /* Prevent logos from shrinking */
            width: 120px; /* Fixed width for each logo container */
            padding: 0 0.5rem;  /* Decreased from 1.5rem to reduce space between logos */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .review-site-logo {
/*             filter: grayscale(100%); Grayscale effect */
            opacity: 1; /* Slightly faded */
            transition: all 0.3s ease-in-out;
            max-width: 100%;
            height: auto; /* Maintain aspect ratio */
            max-height: 50px; /* Limit height of logos */
        }

        .review-site-logo:hover {
            filter: grayscale(0%); /* Full color on hover */
            opacity: 1; /* Fully opaque on hover */
            transform: scale(1.1); /* Slight scale on hover */
        }

        /* Google Review Card Styling */
        .google-review-card {
            background-color: white;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 1.5rem;
            margin-bottom: 1.5rem; /* Space between review cards */
            position: relative; /* For star positioning */
        }
        .google-review-card:last-child {
            margin-bottom: 0; /* No margin after last review */
        }

        .star-rating {
            color: #FFD700; /* Gold color for stars */
            font-size: 1.25rem; /* text-xl */
        }
/* Portfilio section */
        /* Portfolio Section Styles */
        /* Main Tabs Container - Mobile Scrollbar Functionality (Horizontal) */
        .portfolio-main-tabs-container {
            display: flex;
            flex-wrap: nowrap; /* Ensure tabs stay in a single row */
            overflow-x: auto; /* Enable horizontal scrolling */
            scroll-snap-type: x mandatory; /* Smooth snapping */
            scroll-behavior: smooth; /* Smooth scroll behavior */
            gap: 1rem; /* Gap between tabs */
            padding-bottom: 0.5rem; /* Space for scrollbar */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            
            /* Custom scrollbar styling */
            scrollbar-width: thin; /* For Firefox */
            scrollbar-color: var(--primary) rgba(0, 0, 0, 0.1); /* Thumb and track colors */
        }

        .portfolio-main-tabs-container::-webkit-scrollbar {
            height: 0.4rem; /* Height of the scrollbar */
        }
        .portfolio-main-tabs-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 0.2rem;
        }
        .portfolio-main-tabs-container::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 0.2rem;
        }
        .portfolio-main-tabs-container::-webkit-scrollbar-thumb:hover {
            background: var(--hover);
        }

        .portfolio-main-tab-button {
            flex-shrink: 0; /* Prevent buttons from shrinking */
            min-width: 120px; /* Minimum width for each tab */
            padding: 0.75rem 1.5rem; /* py-3 px-6 */
            font-weight: 600; /* font-semibold */
            text-align: center;
            border-radius: 0.5rem; /* rounded-lg */
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            scroll-snap-align: start; /* Snap to the start of each tab */
            background-color: transparent;
            color: var(--subheading); /* Inactive color */
        }

        .portfolio-main-tab-button.is-active {
            background-color: var(--primary);
            color: white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }
        .portfolio-main-tab-button:not(.is-active):hover {
            color: var(--primary);
        }

        /* Content Area for Main Tabs */
        .portfolio-main-tab-content {
            display: none; /* Hidden by default */
            margin-top: 2rem;
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        .portfolio-main-tab-content.is-active {
            display: block; /* Show active content */
            animation: fadeIn 0.5s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Inner Layout: Horizontal Sub-Tabs and Content */
        .portfolio-inner-layout {
            display: flex;
            flex-direction: column; /* Always stack sub-tabs above content */
            gap: 2rem;
        }

        /* Horizontal Sub-Tabs Container - Mobile Scrollbar Functionality */
        .portfolio-horizontal-subtabs-container {
            display: flex;
            flex-wrap: nowrap; /* Ensure tabs stay in a single row */
            overflow-x: auto; /* Enable horizontal scrolling */
            scroll-snap-type: x mandatory; /* Smooth snapping */
            scroll-behavior: smooth; /* Smooth scroll behavior */
            gap: 0.5rem; /* Smaller gap between sub-tabs */
            padding-bottom: 0.5rem; /* Space for scrollbar */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            
            /* Custom scrollbar styling (inherits from main tabs where applicable or specific here) */
            scrollbar-width: thin;
            scrollbar-color: var(--accent) rgba(0, 0, 0, 0.05); /* Accent for sub-tab scrollbar */
            margin-bottom: 1rem; /* Space below sub-tabs */
        }

        .portfolio-horizontal-subtabs-container::-webkit-scrollbar {
            height: 0.3rem; /* Thinner scrollbar for sub-tabs */
        }
        .portfolio-horizontal-subtabs-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 0.15rem;
        }
        .portfolio-horizontal-subtabs-container::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 0.15rem;
        }
        .portfolio-horizontal-subtabs-container::-webkit-scrollbar-thumb:hover {
            background: var(--active);
        }


        .portfolio-horizontal-subtab-button {
            flex-shrink: 0; /* Prevent buttons from shrinking */
            min-width: 100px; /* Minimum width for sub-tabs */
            padding: 0.6rem 1rem; /* Smaller padding */
            font-weight: 500;
            text-align: center;
            border-radius: 9999px; /* PILL-SHAPED / rounded-full */
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
            scroll-snap-align: start;
            background-color: var(--background); /* Inactive background */
            color: var(--subheading); /* INACTIVE TEXT COLOR: Slate Iron */
            border: 1px solid rgba(0,0,0,0.05); /* Subtle border for definition */
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .portfolio-horizontal-subtab-button.is-active {
            background-color: var(--primary); /* ACTIVE BACKGROUND: NeoVerdant */
            color: white; /* ACTIVE TEXT COLOR: White (for contrast) */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transform: translateY(-2px); /* Slight lift */
        }
        .portfolio-horizontal-subtab-button:not(.is-active):hover {
            background-color: var(--sidebar); /* HOVER BACKGROUND: Sidebar (light gray) */
            color: var(--primary); /* HOVER TEXT COLOR: NeoVerdant */
            transform: translateY(-1px); /* Subtle lift on hover */
        }

        .portfolio-content-column {
            flex-grow: 1; /* Takes remaining space */
            width: 100%; /* Full width */
            /* Background and shadow were previously on this, now handled by main tab content */
        }

        .portfolio-sub-content-item {
            display: none; /* Hidden by default */
            /* Padding from parent .portfolio-main-tab-content */
            color: var(--paragraph);
        }
        .portfolio-sub-content-item.is-active {
            display: block; /* Show active content */
            animation: fadeIn 0.5s ease-out forwards;
        }

        /* Table Styles for Case Studies */
        .table-responsive-wrapper {
            overflow-x: auto; /* Enable horizontal scroll for table on small screens */
            -webkit-overflow-scrolling: touch;
            padding-bottom: 0.5rem; /* Space for scrollbar */
            margin-bottom: 1rem; /* Space below the table */
            border-radius: 0.5rem; /* Match parent container */
        }

        /* Custom scrollbar for the responsive table wrapper */
        .table-responsive-wrapper::-webkit-scrollbar {
            height: 0.4rem;
        }
        .table-responsive-wrapper::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 0.2rem;
        }
        .table-responsive-wrapper::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 0.2rem;
        }
        .table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.4);
        }

        .case-study-table {
            width: 100%;
            min-width: 600px; /* Ensure table content doesn't shrink on small screens */
            border-collapse: collapse;
            margin-top: 1.5rem;
            font-size: 0.95rem; /* Slightly smaller font for table content */
        }
        .case-study-table th,
        .case-study-table td {
            border: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
            padding: 0.75rem;
            text-align: left;
            vertical-align: top;
        }
        .case-study-table th {
            background-color: var(--primary); /* BRANDED HEADER BACKGROUND: NeoVerdant */
            font-weight: 600;
            color: white; /* BRANDED HEADER TEXT COLOR: White */
        }
        .case-study-table td {
            background-color: white;
        }
        .case-study-table tr:nth-child(even) td {
            background-color: rgba(0, 0, 0, 0.02); /* Very subtle striping */
        }

        /* Video Modal Styles (copied from previous immersive) */
        .video-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000; /* High z-index to be on top */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        .video-modal.is-active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            position: relative;
            background-color: transparent; /* Video modal background is transparent */
            border-radius: 0.75rem;
            max-width: 90%;
            max-height: 90%;
            overflow: hidden; /* Ensure video frame stays within bounds */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            transform: scale(0.9); /* Initial scale for entry animation */
            transition: transform 0.3s ease-in-out;
        }

        .video-modal.is-active .modal-content {
            transform: scale(1); /* Scale to normal size on active */
        }

        .video-frame-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio (for YouTube/Vimeo embeds) */
            height: 0;
            overflow: hidden;
            background-color: black; /* Black background for video area */
        }

        .video-frame-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .modal-close-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 2rem; /* Larger close icon */
            color: white; /* White for visibility on dark overlay */
            cursor: pointer;
            z-index: 1010;
            padding: 0.5rem;
            border-radius: 50%;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .modal-close-button:hover {
            background-color: rgba(255,255,255,0.2);
            color: var(--accent); /* Accent color on hover for close button */
        }
        body.no-scroll {
            overflow: hidden; /* Utility to prevent body scrolling */
        }
/*  video section css */
        button[type="submit"] {
            background-color: #4FB286; /* NeoVerdant Primary Color */
            transition: background-color 0.3s ease-in-out; /* Smooth transition for hover/active */
        }
        button[type="submit"]:hover {
            background-color: #3DAF9F !important; /* Hover Green */
        }
        button[type="submit"]:active {
            background-color: #FF563F !important; /* Active Coral */
        }
        /* Focus ring color for inputs, using custom property for consistency */
        input:focus, textarea:focus {
            --tw-ring-color: #4FB286; /* NeoVerdant Primary Color */
        }
/* views slider css */
        /* Marquee Animation */
        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }

        .animate-marquee {
            animation: marquee 30s linear infinite; /* Adjust speed by changing '30s' */
        }

        /* Pause animation on hover of the container */
        .marquee-container:hover .animate-marquee {
            animation-play-state: paused;
        }

        /* To duplicate the content and ensure seamless loop */
        .marquee-content {
            display: flex;
            width: max-content; /* Ensure content takes up full width */
        }

        .marquee-item {
            flex-shrink: 0; /* Prevent items from shrinking */
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px; /* Fixed height for consistency on desktop */
            padding: 0 2rem; /* Spacing between logos */
        }

        @media (max-width: 767px) { /* Adjust for mobile, below 'md' breakpoint */
            .marquee-item {
                height: 80px; /* Slightly smaller height on mobile */
                padding: 0 1rem;
            }
        }

        .marquee-item img {
            max-height: 80px; /* Max height for logos */
            width: auto; /* Maintain aspect ratio */
            filter: grayscale(100%) opacity(70%); /* Subtle grayscale for consistent look */
            transition: filter 0.3s ease-in-out;
        }

        .marquee-item img:hover {
            filter: grayscale(0%) opacity(100%); /* Color on hover */
        }
  /* Company Culture */
         /* --- Our Services Section Styles --- */
        .culture-gallery-section {
            background-color: var(--background); /* Use your light background color */
            padding-top: 5rem;
            padding-bottom: 5rem;
			--gallery-gap: 1rem;
        }

        .culture-gallery-container {
            max-width: 1400px;
            margin: 0 auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* Section Header */
        .culture-gallery-header {
            text-align: center;
            margin-bottom: 3.5rem; /* Adjust spacing below header */
        }
        .culture-gallery-header h2 {
            font-size: 2.5rem; /* text-4xl */
            font-weight: 800; /* font-extrabold */
            color: var(--heading-on-light); /* Dark heading color */
            margin-bottom: 1rem; /* mb-4 */
        }
        .culture-gallery-header h2 span {
            color: var(--primary); /* Primary color for highlighted text */
        }
        .culture-gallery-header p {
            font-size: 1.125rem; /* text-lg */
            color: var(--text-on-light); /* Dark text color */
            max-width: 800px;
            margin: 0 auto;
        }

        /* Services Tab Navigation */
        .culture-tabs-gallery-nav {
            display: flex;
            flex-wrap: nowrap; /* Prevent wrapping on mobile to allow horizontal scroll */
            justify-content: flex-start; /* Align tabs to the start */
            gap: 0.75rem; /* space-x-2 sm:space-x-4 equivalent */
            margin-bottom: 2.5rem; /* mb-10 */
            overflow-x: auto; /* Enable horizontal scrolling */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            scroll-snap-type: x mandatory; /* Snap to tabs */
            padding-bottom: 0.5rem; /* Space for scrollbar if it appears */
        }
        /* Keep scrollbar visible as requested */
        .culture-tabs-gallery-nav::-webkit-scrollbar {
            height: 8px; /* Make scrollbar visible */
            background-color: rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        .culture-tabs-gallery-nav::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.3);
            border-radius: 4px;
        }
        /* For Firefox */
        .culture-tabs-gallery-nav {
            scrollbar-width: thin;
            scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
        }

        @media (min-width: 768px) { /* On desktop, allow tabs to wrap and center */
            .culture-tabs-gallery-nav {
                flex-wrap: wrap;
                justify-content: center;
                overflow-x: visible; /* Disable scrollbar */
                scroll-snap-type: none;
                padding-bottom: 0;
                scrollbar-width: none; /* Hide for firefox on desktop */
            }
            .culture-tabs-gallery-nav::-webkit-scrollbar {
                display: none; /* Hide for webkit on desktop */
            }
        }

        .culture-gallery-tab-button {
            padding: 0.8rem 1.6rem;
            font-size: 1rem; /* text-base */
            font-weight: 600; /* font-semibold */
            border-radius: 9999px; /* rounded-full */
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            cursor: pointer;
            flex-shrink: 0; /* Prevent buttons from shrinking too much */
            white-space: nowrap; /* Keep text on single line if possible */
            scroll-snap-align: start; /* Snap to the start of each button */
        }

        /* Active Service Tab */
        .culture-gallery-tab-button.active-culture-gallery-tab {
            background-color: var(--primary);
            color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        /* Inactive Service Tab */
        .culture-gallery-tab-button:not(.active-culture-gallery-tab) {
            background-color: var(--background); /* Light background color */
            color: var(--text-on-light); /* Dark text color */
            border: 1px solid rgba(0,0,0,0.1);
        }
        .culture-gallery-tab-button:not(.active-culture-gallery-tab):hover {
            background-color: var(--hover);
            color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        /* Service Tab Content Wrapper */
        .culture-gallery-tab-content-wrapper {
            display: none; /* Hidden by default */
            width: 100%;
        }
        .culture-gallery-tab-content-wrapper.active-culture-gallery-content {
            display: block; /* Shown when active */
        }

        /* Scrollable Content Wrapper (for arrows and horizontal scroll) */
        .culture-scrollable-gallery-wrapper {
            position: relative; /* For positioning arrows */
            display: flex; /* Enables horizontal arrangement with arrows */
            align-items: center; /* Vertically centers arrows with content */
            /* Removed padding from here as it's handled by main container's px-4 */
        }
        @media (min-width: 768px) { /* On desktop, revert to block flow */
            .culture-scrollable-gallery-wrapper {
                display: block;
            }
        }

        /* Horizontal Scroll Container for Images */
        .culture-images-scroll-container {
            display: flex; /* Enables horizontal scrolling of images */
            overflow-x: auto; /* Allows horizontal scrolling */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            scroll-snap-type: x mandatory; /* Snap to images */
            gap: var(--gallery-gap); /* Gap between images */
            padding-bottom: 1rem; /* Space for scrollbar if visible */
            flex-grow: 1; /* Allows scroll container to take available space */
        }
        /* Keep scrollbar visible as requested */
        .culture-images-scroll-container::-webkit-scrollbar {
            height: 8px; /* Make scrollbar visible */
            background-color: rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        .culture-images-scroll-container::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.3);
            border-radius: 4px;
        }
        /* For Firefox */
        .culture-images-scroll-container {
            scrollbar-width: thin;
            scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
        }

        /* Individual Image Wrapper */
        .culture-image-wrapper {
            flex-shrink: 0; /* Prevent images from shrinking */
            position: relative; /* For potential overlay/tooltip */
            padding-bottom: 60%; /* Aspect ratio (e.g., 5:3 or 16:9 for landscape images) */
            overflow: hidden;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow */
            scroll-snap-align: start; /* Snap to the start of each image */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            
            /* Mobile-first width definitions for scrolling */
            width: 85vw; /* Default: Show 1.x items on smallest screens, allowing next to peek */
            /* Using a max-width for individual images to prevent them from becoming too large before grid kicks in */
            max-width: 300px; /* Example max-width for a single item in scroll view */
        }
        .culture-image-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.15);
        }

        @media (min-width: 400px) { /* Adjust for slightly larger phones */
            .culture-image-wrapper {
                width: calc(50% - var(--gallery-gap) / 2); /* Show 2 images with gap */
            }
        }
        @media (min-width: 640px) { /* sm breakpoint: show 3 images before desktop grid */
            .culture-image-wrapper {
                width: calc(33.333% - 2 * var(--gallery-gap) / 3); /* Show ~3 items */
            }
        }
        @media (min-width: 768px) { /* md breakpoint: switch to grid, no scroll */
            .culture-images-scroll-container {
                display: grid; /* Change to grid layout */
                grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
                gap: var(--gallery-gap); /* Use gallery gap for grid */
                overflow-x: hidden; /* Hide scrollbar */
                scroll-snap-type: none; /* Disable snapping */
                padding-bottom: 0; /* No scrollbar space needed */
                scrollbar-width: none; /* Hide for firefox on desktop */
            }
            .culture-images-scroll-container::-webkit-scrollbar {
                display: none; /* Hide for webkit on desktop */
            }
            .culture-image-wrapper {
                width: auto; /* Let grid determine width */
                padding-bottom: 75%; /* Adjust aspect ratio for grid if needed, or keep consistent */
                max-width: none; /* Remove flex item max-width */
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .culture-images-scroll-container {
                grid-template-columns: repeat(4, 1fr); /* 4 columns on large desktop */
            }
        }

        .culture-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.5rem;
        }

        /* Mobile Scroll Arrows */
        .culture-scroll-arrow {
            display: none; /* Hidden by default */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5); /* Semi-transparent */
            color: white;
            padding: 0.75rem 0.5rem;
            border-radius: 0.5rem;
            cursor: pointer;
            z-index: 10;
            font-size: 1.5rem;
            transition: background-color 0.2s ease, opacity 0.3s ease;
            border: none;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        .culture-scroll-arrow:hover {
            background-color: rgba(0,0,0,0.7);
        }
        .culture-scroll-arrow-prev {
            left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .culture-scroll-arrow-next {
            right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        /* Show arrows on mobile, hide on desktop */
        @media (max-width: 767px) {
            .culture-scroll-arrow {
                display: flex; /* Show on mobile */
            }
        }
        @media (min-width: 768px) {
            .culture-scroll-arrow {
                display: none; /* Hide on desktop */
            }
        }
/* This is Partner with section css */
                /* Section container styles */
        /* py-0 my-0 will be effectively overridden by padding-top/bottom here */
        .partners-section-wrapper {
            background-color: var(--secondary);
            padding-top: 3rem; /* Adjusted for better spacing */
            padding-bottom: 3rem; /* Adjusted for better spacing */
            position: relative; /* Needed for animation context */
            overflow: hidden; /* Ensures animations stay within the section */
        }

        .partners-container {
            max-width: 1200px; /* Constrain overall width */
            margin: 0 auto; /* Center the container */
            padding-left: 1rem; /* px-4 for responsiveness */
            padding-right: 1rem; /* px-4 */
            padding-bottom: 3rem; /* Added padding below text for spacing before infinite scroll */
        }

        /* Section Header */
        .partners-header-content {
            text-align: center;
            margin-bottom: 2rem; /* Reduced margin-bottom */
        }
        .partners-header-content h2 {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 800; /* font-extrabold */
            color: white; /* Text color for h2 */
            margin-bottom: 0.75rem; /* mb-3 */
        }
        .partners-header-content h2 span {
            color: var(--primary); /* Highlight with primary color */
        }
        .partners-header-content p {
            font-size: 1.125rem; /* text-lg */
            color: #D1D5DB; /* Tailwind gray-300 for contrast */
            max-width: 800px;
            margin: 0 auto;
        }

        /* Gallery Image Wrapper */
        .gallery-image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 0.5rem; /* rounded-lg */
            overflow: hidden; /* Ensures image and overlay stay within bounds */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow */
            cursor: pointer;
        }

        .gallery-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }

        /* Image overlay for hover effect (background color only, no text/icon) */
        .gallery-image-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            border-radius: 0.5rem; /* rounded-lg */
            background-color: rgba(79, 178, 134, 0.5); /* Primary color with opacity */
        }

        .gallery-image-wrapper:hover .gallery-image {
            transform: scale(1.05);
        }

        .gallery-image-wrapper:hover .gallery-image-overlay {
            opacity: 1;
        }

        /* Infinite Scroll Carousel Container Styles */
        .infinite-scroll-container {
            overflow: hidden; /* Hides content outside the visible area */
            position: relative;
        }

        /* Individual Scroll Row Styles */
        .infinite-scroll-row {
            display: flex;
            width: max-content; /* Critical for infinite scroll content to exceed viewport */
            margin-bottom: 1rem; /* Space between rows */
            height: 100px; /* Reduced height for smaller mobile screens */
            align-items: center;
            will-change: transform; /* Optimize animation performance */
        }

        /* Remove margin from the last row */
        .infinite-scroll-row:last-child {
            margin-bottom: 0;
        }

        /* Individual Scroll Item (Image Wrapper) Styles */
        .infinite-scroll-item {
            flex-shrink: 0; /* Prevent items from shrinking */
            margin-right: 1.5rem; /* Tailwind's gap-6 equivalent for horizontal spacing */
            height: 100%; /* Take full height of its parent row */
            /* Responsive widths for images based on screen size */
            width: 150px; /* Default fixed width for items on smallest screens to control sizing */
        }

        @media (min-width: 480px) { /* Custom breakpoint for slightly larger mobiles */
            .infinite-scroll-item {
                width: 180px; /* Slightly larger fixed width */
            }
        }
        @media (min-width: 640px) { /* sm breakpoint */
            .infinite-scroll-item {
                width: 200px; /* Larger fixed width */
            }
            .infinite-scroll-row {
                margin-bottom: 1.5rem; /* restore bigger margin on larger screens */
                height: 120px; /* restore height on larger screens */
            }
        }
        @media (min-width: 768px) { /* md breakpoint */
            .infinite-scroll-item {
                width: 220px; /* Even larger fixed width */
            }
            .infinite-scroll-row {
                height: 150px; /* Full height for desktop */
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .infinite-scroll-item {
                width: 250px; /* Largest fixed width for large screens */
            }
        }


        /* Animation for Row 1 (Right to Left) */
        .infinite-scroll-row-1 {
            animation: scroll-right-to-left linear infinite 40s; /* Adjust speed as needed */
        }
        @keyframes scroll-right-to-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* Scrolls by 50% of its max-content width */
        }

        /* Animation for Row 2 (Left to Right) */
        .infinite-scroll-row-2 {
            animation: scroll-left-to-right linear infinite 40s; /* Adjust speed as needed */
        }
        @keyframes scroll-left-to-right {
            0% { transform: translateX(-50%); } /* Start from middle to loop seamlessly */
            100% { transform: translateX(0); }
        }

        /* Animation for Row 3 (Right to Left) */
        .infinite-scroll-row-3 {
            animation: scroll-right-to-left linear infinite 40s; /* Adjust speed as needed */
        }

        /* Pause animation on hover for specific row */
        .infinite-scroll-row:hover {
            animation-play-state: paused;
        }

        /* Tooltip Box Styles */
        .tooltip-box {
            position: absolute;
            bottom: 0.5rem; /* Equivalent to Tailwind's bottom-2 */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(44, 62, 80, 0.9); /* var(--secondary) with opacity */
            color: white;
            font-size: 0.75rem; /* text-xs */
            padding: 0.25rem 0.75rem; /* px-2 py-1 */
            border-radius: 0.25rem; /* rounded-md */
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            pointer-events: none; /* Allows clicks/hovers to pass through to the image */
            white-space: nowrap; /* Prevent text from wrapping */
            z-index: 10; /* Ensure tooltip is above other elements */
        }

        .infinite-scroll-item .gallery-image-wrapper:hover .tooltip-box {
            opacity: 1;
        }

        /* Animation for Header Text (from previous request, adapted for this context) */
        .animate-fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
        }
        .animate-fade-in-up-2 {
            animation: fadeInUp 1s ease-out 0.3s forwards; /* Delayed start */
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* KPI section CSS */
        /* Awareness Section Specific Styles */
        .tab-buttons-container {
            display: flex;
            flex-wrap: nowrap; /* Ensure tabs stay in a single row */
            justify-content: flex-start; /* Align tabs to the start */
            overflow-x: auto; /* Enable horizontal scrolling */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            padding-bottom: 1rem; /* Add padding for scrollbar visibility */
            margin-bottom: 1rem; /* Space below tab buttons */
            /* This container will ensure content scrolls horizontally */
        }

        /* Hide scrollbar for a cleaner look, but still allow scrolling */
        .tab-buttons-container::-webkit-scrollbar {
            height: 0.5rem; /* Height of the scrollbar */
        }

        .tab-buttons-container::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2); /* Color of the scrollbar thumb */
            border-radius: 0.25rem; /* Rounded corners for the thumb */
        }

        .tab-buttons-container::-webkit-scrollbar-track {
            background-color: rgba(0, 0, 0, 0.1); /* Color of the scrollbar track */
            border-radius: 0.25rem;
        }


        .tab-button-kpi {
            min-width: 150px; /* Minimum width for each tab to ensure content fits */
            height: 100px; /* Large height for tabs as requested */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            flex-shrink: 0; /* Prevent buttons from shrinking */
            cursor: pointer; /* Indicate clickability */
            white-space: nowrap; /* Prevent text wrapping within tab */
            font-weight: 600; /* font-semibold */
            border-radius: 0.5rem; /* rounded-lg */
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* subtle shadow */
            padding: 0.5rem 1rem; /* Added minimal padding for content */
            margin-right: 0.5rem; /* Spacing between buttons */
        }

        /* Remove margin from the last button to prevent extra space at the end of the scroll */
        .tab-button-kpi:last-child {
            margin-right: 0;
        }

        /* Active tab button style */
        .tab-button-kpi.is-active {
            background-color: white; /* Active tab has a white background */
            color: var(--primary); /* Active tab text color is primary */
            box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* More prominent shadow for active tab */
        }

        /* Inactive tab button style */
        .tab-button-kpi:not(.is-active) {
            background-color: transparent; /* Inactive tabs have transparent background */
            color: var(--subheading); /* Inactive tab text color is subheading color */
        }
        .tab-button-kpi:not(.is-active):hover {
            color: var(--primary); /* Hover on inactive makes text primary */
        }

        .tab-content-kpi {
            background-color: white; /* Background for the content area */
            padding: 2.5rem; /* p-10 equivalent */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
            display: none; /* Hidden by default, shown by JS */
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            margin-top: 2rem; /* mt-8 */
        }

        .tab-content-kpi.is-active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        /* Inner layout of the tab content as per the image */
        .kpi-content-layout {
            display: flex;
            flex-direction: column;
            gap: 2rem; /* space-y-8 */
        }

        @media (min-width: 768px) { /* md breakpoint */
            .kpi-content-layout {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start; /* Align content to the top */
            }
        }

        .kpi-text-block {
            flex: 1; /* Allows text block to grow */
            text-align: center;
        }
        @media (min-width: 768px) { /* md breakpoint */
            .kpi-text-block {
                text-align: left;
                padding-right: 2rem; /* space from image/buttons */
            }
        }

        .kpi-image-and-buttons-block {
            flex-shrink: 0; /* Prevent shrinking */
            display: flex;
            flex-direction: column;
            align-items: center; /* Center image and buttons vertically on small screens */
            gap: 1.5rem; /* space-y-6 */
        }

        @media (min-width: 768px) { /* md breakpoint */
            .kpi-image-and-buttons-block {
                flex-direction: row; /* Image and buttons side-by-side */
                align-items: flex-start; /* Align to the top */
                gap: 2.5rem; /* space-x-10 between image and side buttons */
            }
        }

        .kpi-main-image {
            width: 100%;
            max-width: 280px; /* Constrain image size */
            height: auto;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* subtle shadow */
            object-fit: cover;
        }

        .kpi-side-buttons-group {
            display: flex;
            flex-direction: column;
            gap: 1rem; /* space-y-4 */
            width: 100%; /* Full width on small screens */
            max-width: 300px; /* Limit width of button column */
        }
        @media (min-width: 768px) { /* md breakpoint */
            .kpi-side-buttons-group {
                width: auto; /* Shrink to content width on larger screens */
            }
        }

        .kpi-side-button {
            background-color: var(--secondary); /* Dark background for side buttons */
            color: white;
            padding: 0.75rem 1.25rem; /* py-3 px-5 */
            border-radius: 0.5rem; /* rounded-lg */
            font-weight: 600; /* font-semibold */
            text-align: center;
            transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* subtle shadow */
            cursor: pointer;
        }
        .kpi-side-button:hover {
            background-color: var(--primary); /* Primary on hover */
            transform: translateY(-2px); /* Slight lift */
        }


/* Case Study Carousel Styles */
        /* Case Study Carousel Styles */
        .case-study-carousel-container {
            position: relative;
            overflow: hidden;
            padding: 2rem 0; /* Vertical padding */
        }

        .case-study-carousel-track {
            display: flex;
            scroll-snap-type: x mandatory; /* Smooth snapping */
            scroll-behavior: smooth; /* Smooth scroll behavior */
            padding-bottom: 1rem; /* Space for scrollbar */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            overflow-x: auto; /* Enable native horizontal scroll */

            /* Custom scrollbar styling for this track */
            scrollbar-width: thin; /* For Firefox */
            scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); /* Thumb and track colors */
        }

        .case-study-carousel-track::-webkit-scrollbar {
            height: 0.5rem; /* Height of the scrollbar */
        }
        .case-study-carousel-track::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 0.25rem;
        }
        .case-study-carousel-track::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 0.25rem;
        }
        .case-study-carousel-track::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.5);
        }

        .case-study-card {
            flex-shrink: 0; /* Do not grow or shrink */
            width: 85vw; /* Default width for small screens, forcing scroll */
            margin-right: 1.5rem; /* Space between cards */
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 450px;
            scroll-snap-align: start; /* Snap to the START of each card */
        }

        @media (min-width: 640px) { /* sm breakpoint */
            .case-study-card {
                width: calc(50% - 0.75rem); /* Two cards per view on sm screens */
            }
        }

        @media (min-width: 1024px) { /* lg breakpoint */
            .case-study-card {
                width: calc(33.333% - 1rem); /* Three cards per view on lg screens */
            }
            .case-study-carousel-track {
                overflow-x: hidden; /* Hide scrollbar on desktop */
                padding-bottom: 0; /* Remove padding for scrollbar */
                scrollbar-width: none; /* Hide scrollbar for Firefox */
            }
            .case-study-carousel-track::-webkit-scrollbar {
                display: none; /* Hide scrollbar for Chrome/Safari */
            }
        }

        .case-study-label {
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--primary);
            color: white;
            padding: 0.5rem 1rem;
            border-bottom-right-radius: 0.5rem;
            font-size: 0.875rem; /* text-sm */
            font-weight: 600; /* font-semibold */
        }

        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--background); /* Cloud Cream */
            color: var(--secondary); /* Slate Iron */
            border: none;
            padding: 1rem;
            cursor: pointer;
            z-index: 10;
            border-radius: 0.5rem; /* Squared corners */
            transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .carousel-arrow:hover {
            background-color: var(--primary); /* Lighter primary on hover */
            color: var(--background); /* Cloud Cream on hover */
            transform: translateY(-50%) scale(1.05);
        }

        .carousel-arrow-left {
            left: 1rem;
        }

        .carousel-arrow-right {
            right: 1rem;
        }

        /* Show arrows only on screens smaller than lg breakpoint */
        @media (max-width: 1023px) { /* Up to lg breakpoint */
            .carousel-arrow {
                display: block;
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint and up */
            .carousel-arrow {
                display: none; /* Hide arrows on desktop if 3 cards are always visible */
            }
        }

        /* Blog Section Styles */
        .blog-carousel-wrapper {
            position: relative; /* For arrow positioning */
            padding: 0 1rem; /* Space for arrows */
        }

        .blog-scroll-container {
            display: flex;
            flex-wrap: nowrap; /* Keep cards in one row on mobile */
            overflow-x: auto; /* Enable horizontal scrolling */
            scroll-snap-type: x mandatory; /* Smooth snapping */
            scroll-behavior: smooth; /* Smooth scroll behavior */
            gap: 2rem; /* Gap between blog cards */
            padding-bottom: 1rem; /* Space for scrollbar */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */

            /* Custom scrollbar styling */
            scrollbar-width: thin; /* For Firefox */
            scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); /* Thumb and track colors */
        }

        .blog-scroll-container::-webkit-scrollbar {
            height: 0.5rem; /* Height of the scrollbar */
        }
        .blog-scroll-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 0.25rem;
        }
        .blog-scroll-container::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 0.25rem;
        }
        .blog-scroll-container::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.5);
        }

        .blog-card {
            flex-shrink: 0; /* Prevent cards from shrinking */
            width: 85vw; /* Make cards wider than screen to force scroll */
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease;
            scroll-snap-align: start; /* Snap to the start of each card */
        }

        .blog-card:hover {
            transform: translateY(-5px);
        }

        .blog-image {
            width: 100%;
            height: 180px; /* Fixed height for consistency */
            object-fit: cover;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;
        }

        /* Revert blog section to grid layout on larger screens */
        @media (min-width: 640px) { /* sm breakpoint */
            .blog-scroll-container {
                display: grid; /* Change to grid */
                grid-template-columns: repeat(2, 1fr); /* 2 columns on sm */
                overflow-x: hidden; /* Hide scrollbar */
                scroll-snap-type: none; /* Disable snapping */
                padding-bottom: 0; /* Remove scrollbar padding */
                scrollbar-width: none; /* Hide scrollbar for Firefox */
            }
            .blog-scroll-container::-webkit-scrollbar {
                display: none; /* Hide scrollbar for Chrome/Safari */
            }
            .blog-card {
                width: auto; /* Auto width for grid items */
                flex-shrink: 1; /* Allow shrinking in grid */
            }
            .blog-carousel-wrapper {
                padding: 0; /* Remove padding for arrows on desktop */
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .blog-scroll-container {
                grid-template-columns: repeat(4, 1fr); /* 4 columns on lg */
            }
        }
        
        /* Blog Carousel Arrows */
        .blog-carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--background); /* Cloud Cream */
            color: var(--secondary); /* Slate Iron */
            border: none;
            padding: 1rem;
            cursor: pointer;
            z-index: 10;
            border-radius: 0.5rem; /* Squared corners */
            transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: none; /* Hidden by default */
        }

        .blog-carousel-arrow:hover {
            background-color: var(--primary); /* Lighter primary on hover */
            color: var(--background); /* Cloud Cream on hover */
            transform: translateY(-50%) scale(1.05);
        }

        .blog-carousel-arrow-left {
            left: 0; /* Position at the edge of the wrapper */
        }

        .blog-carousel-arrow-right {
            right: 0; /* Position at the edge of the wrapper */
        }

        /* Show blog arrows only on screens where horizontal scrolling is needed (e.g., < md) */
        @media (max-width: 639px) { /* Up to sm breakpoint */
            .blog-carousel-arrow {
                display: block;
            }
        }
        @media (min-width: 640px) { /* sm breakpoint and up */
            .blog-carousel-arrow {
                display: none; /* Hide arrows on desktop if 2 or 4 cards are visible */
            }
        }

        /* Mobile Optimization for section padding/margin */
        @media (max-width: 767px) { /* Applies to screens smaller than md breakpoint */
            /* Case Study Section */
            .case-study-section-wrapper {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }
            /* Removing previous !important overrides for h2 and p within the container */
            .case-study-section-wrapper > .container.mx-auto.px-4 {
                 /* Revert to default or Tailwind classes */
                 padding-top: theme('spacing.16'); /* Equivalent to py-16 */
                 padding-bottom: theme('spacing.16'); /* Equivalent to py-16 */
                 margin-top: revert;
                 margin-bottom: revert;
            }
            .case-study-section-wrapper h2,
            .case-study-section-wrapper p {
                /* Let Tailwind's mb-6 and mb-16 apply */
                margin-top: revert;
                margin-bottom: revert;
                padding-top: revert;
                padding-bottom: revert;
            }
            .case-study-carousel-container {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }


            /* Blog Section */
            .blog-section-wrapper {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }
            /* Target the immediate child container of blog-section-wrapper */
            .blog-section-wrapper > .container.mx-auto.px-4 {
                 margin-top: revert; /* Revert to default or Tailwind classes */
                 margin-bottom: revert; /* Revert to default or Tailwind classes */
                 padding-top: theme('spacing.16'); /* Equivalent to py-16 */
                 padding-bottom: theme('spacing.16'); /* Equivalent to py-16 */
            }
            .blog-section-wrapper h2 {
                margin-top: revert; /* Revert to default or Tailwind classes */
                margin-bottom: revert; /* Revert to default or Tailwind classes */
                padding-top: revert; /* Revert to default or Tailwind classes */
                padding-bottom: revert; /* Revert to default or Tailwind classes */
            }
            /* blog-scroll-container already has padding-bottom for scrollbar, keep that */
        }

/* Social Proof Section */
        /* Social Proofs & Worldwide Presence Section Styles */
        /* Global styles for consistent box-sizing and overflow control */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        body {
            overflow-x: hidden; /* Prevents horizontal scrolling across the whole page */
        }

        /* Section Styling */
        .global-impact-section {
            background-color: var(--secondary); /* Uses your secondary color */
            color: var(--background); /* Uses your light background for text on dark background */
            padding: 5rem 0; /* py-20 */
        }

        /* Main Content Grid */
        .impact-content-grid {
            display: grid;
            grid-template-columns: 1fr; /* Single column on mobile */
            gap: 4rem; /* Spacing between columns on larger screens */
            max-width: 1200px; /* Constrain overall width */
            margin: 0 auto; /* Center the grid */
            padding: 0 1rem; /* px-4 for responsiveness */
        }

        @media (min-width: 768px) { /* md breakpoint */
            .impact-content-grid {
                grid-template-columns: 1fr 1fr; /* Two columns on desktop */
                gap: 5rem; /* Larger gap on desktop */
            }
        }

        /* Column Styling */
        .impact-column {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center content horizontally on mobile */
            text-align: center; /* Center text on mobile */
            padding: 0 0.5rem; /* Small internal padding for content safety on mobile */
        }
        @media (min-width: 768px) {
            .impact-column {
                align-items: flex-start; /* Align content to start on desktop */
                text-align: left; /* Align text to left on desktop */
                padding: 0; /* Remove mobile-specific padding */
            }
        }

        /* --- Stats Grid (Cards) --- */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* ALWAYS 2 columns on mobile by default */
            gap: 0.75rem; /* Adjusted gap for better fit */
            width: 100%; /* Take full width of parent column */
            max-width: 700px; /* Constrain max width even on mobile if parent is wider */
            margin: 0 auto; /* Center the grid on mobile */
        }

        @media (min-width: 768px) { /* md breakpoint */
            .stats-grid {
                grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
                gap: 1.5rem; /* Larger gap on desktop */
                margin: 0; /* Align to left on desktop */
                max-width: 100%; /* Allow to expand within column */
            }
        }

        .stat-card {
            background-color: rgba(255, 255, 255, 0.1); /* Consistent with your previous transparent white */
            border-radius: 0.75rem;
            padding: 0.85rem; /* Optimized padding */
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            width: 100%; /* Ensures card fills its grid cell */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            background-color: rgba(255, 255, 255, 0.15); /* Slightly brighter on hover */
        }

        .stat-card .icon {
            color: var(--primary); /* Uses your primary color */
            font-size: 2.25rem; /* text-3xl */
            margin-bottom: 0.5rem;
        }
        .stat-card .number {
            font-size: 2rem; /* text-3xl */
            font-weight: 700;
            color: var(--background); /* Uses your light background for numbers */
            line-height: 1.1;
        }
        .stat-card .description {
            font-size: 0.8rem; /* text-sm */
            color: rgba(255,255,255,0.7); /* Adjusted for readability on dark background */
            margin-top: 0.25rem;
        }

        /* --- World Map Image --- */
        .world-map-image {
            width: 100%;
            max-width: 600px; /* Maximum width for the map */
            height: auto;
            border-radius: 0.75rem;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            margin-bottom: 2rem;
            object-fit: contain; /* Ensures image scales down without cropping */
        }

        /* --- Domain List Grid --- */
        .domain-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 2 columns on smallest mobile */
            gap: 0.5rem; /* Gap between domain items */
            width: 100%; /* Fluid width */
            max-width: 450px; /* Constrain max width on mobile */
            margin: 0 auto; /* Center on mobile */
        }

        @media (min-width: 400px) { /* Slightly larger mobile screens */
            .domain-list {
                grid-template-columns: repeat(3, 1fr); /* 3 columns */
            }
        }
        @media (min-width: 640px) { /* sm breakpoint */
            .domain-list {
                grid-template-columns: repeat(4, 1fr); /* 4 columns */
                max-width: 600px; /* Allow wider on sm */
            }
        }
        @media (min-width: 768px) { /* md breakpoint */
            .domain-list {
                grid-template-columns: repeat(3, 1fr); /* 3 columns in its desktop column */
                max-width: 300px; /* Specific width for desktop column */
                margin: 0; /* Align to left on desktop */
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .domain-list {
                grid-template-columns: repeat(6, 1fr); /* 6 columns on large desktops */
                max-width: 100%; /* Allow to expand within column */
            }
        }

        .domain-list li {
            background-color: rgba(255,255,255,0.08); /* Subtle background */
            padding: 0.5rem 0.75rem;
            border-radius: 0.25rem;
            color: var(--background); /* Uses your light background for domain list items */
            font-size: 0.875rem; /* text-sm */
            text-align: center;
            transition: background-color 0.2s ease;
        }
        .domain-list li:hover {
            background-color: rgba(255,255,255,0.15);
        }

        /* --- Main Mobile Tabs Styling --- */
        .primary-tabs-container {
            display: flex; /* Always flex for tab buttons */
            gap: 0.75rem; /* Space between primary tabs */
            margin-bottom: 2rem; /* Space below tabs */
            width: 100%;
            justify-content: center;
        }

        .primary-tabs-container .tab-button {
            background-color: rgba(255, 255, 255, 0.15);
            color: var(--background); /* Uses your light background for text */
            padding: 0.8rem 1.6rem;
            border-radius: 9999px; /* Pill shape */
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
            border: none;
            flex-grow: 1;
            text-align: center;
            white-space: nowrap;
            max-width: calc(50% - 0.375rem); /* Exactly two tabs, accounting for gap */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .primary-tabs-container .tab-button.active {
            background-color: var(--primary); /* Uses your primary color */
            color: white;
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
            transform: translateY(-2px);
        }

        .primary-tabs-container .tab-button:hover:not(.active) {
            background-color: rgba(255, 255, 255, 0.25);
        }

        /* Content for primary tabs */
        .primary-tab-content {
            display: none; /* Hidden by default */
            width: 100%;
        }
        .primary-tab-content.active {
            display: block; /* Shown when active */
        }

        /* --- Media Queries for Responsive Behavior --- */
        @media (min-width: 768px) { /* md breakpoint and up (Desktop) */
            .primary-tabs-container {
                display: none; /* Hide main tab buttons on desktop */
            }

            .primary-tab-content {
                display: block !important; /* Force show all content on desktop */
            }

            /* Reset column alignment for desktop */
            .impact-column {
                align-items: flex-start;
                text-align: left;
            }

            /* Adjust button alignment within columns on desktop */
            .impact-column .mt-8 {
                text-align: left;
            }
        }

        @media (max-width: 767px) { /* Mobile specific adjustments (below md breakpoint) */
            /* Ensure headings and buttons are centered within active tabs */
            .primary-tab-content h3,
            .primary-tab-content .mt-8 {
                text-align: center;
            }
        }

        /* Font Awesome icon coloring */
        .fa-award, .fa-chart-line, .fa-globe {
            color: var(--primary); /* Uses your primary color */
        }

/* why choose us new */
                /* Animations for 'Why Epik Funnel' section */
        .animate-fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
        }
        .animate-fade-in-up-2 {
            animation: fadeInUp 1s ease-out 0.3s forwards;
        }

        @keyframes fadeInUp {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .primary-color {
            color: var(--primary);
        }

        /* Icon Slider Section Styles */
        .icon-slider-section {
            background-color: var(--secondary); /* Dark background as requested */
            padding-top: 0; /* No padding at top */
            padding-bottom: 0; /* No padding at bottom */
            margin-top: 0; /* No margin at top */
            margin-bottom: 0; /* No margin at bottom */
            overflow: hidden; /* Important for the slider to work */
        }

        .icon-slider-container {
            display: flex;
            width: max-content; /* Allow content to dictate width */
            animation: scroll-left-continuous linear infinite 25s; /* Adjust speed as needed */
            will-change: transform; /* Performance hint */
        }

        .icon-slider-container:hover {
            animation-play-state: paused; /* Pause on hover */
        }

        .icon-slider-item {
            flex-shrink: 0; /* Prevent items from shrinking */
            width: 150px; /* Fixed width for each icon/badge */
            height: 100px; /* Fixed height for each icon/badge */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            box-sizing: content-box; /* Padding adds to width */
            margin-right: 2rem; /* Space between items */
        }

        /* Responsive adjustments for items to show more/less */
        @media (min-width: 640px) { /* sm breakpoint */
            .icon-slider-item {
                width: 180px;
                height: 120px;
            }
        }
        @media (min-width: 768px) { /* md breakpoint */
            .icon-slider-item {
                width: 200px;
                height: 140px;
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .icon-slider-item {
                width: 220px;
                height: 150px;
            }
        }


        @keyframes scroll-left-continuous {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* Scrolls half the duplicated content */
        }

        .icon-badge {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* Ensures badge fits within its item div */
            filter: grayscale(100%) opacity(70%); /* Subtle grayscale and opacity */
            transition: filter 0.3s ease-in-out;
        }

        .icon-badge:hover {
            filter: grayscale(0%) opacity(100%); /* Full color and opacity on hover */
        }

        /* Specific styles for the "Why Epik Funnel" cards on mobile */
        .cards-scroll-wrapper {
            position: relative; /* For the arrow positioning */
            padding: 0; /* Remove padding as arrows are removed */
        }

        /* Cards container inside the wrapper */
        .cards-scroll-container {
            flex-wrap: nowrap; /* Ensure cards stay in one row */
            overflow-x: auto; /* Enable horizontal scrolling */
            scroll-snap-type: x mandatory; /* Smooth snapping */
            scroll-behavior: smooth; /* Smooth scroll on button click */
            padding-bottom: 1rem; /* Space for scrollbar */
        }

        /* Custom scrollbar styling (retained scrollbar as requested) */
        .cards-scroll-container::-webkit-scrollbar {
            height: 0.5rem; /* Height of the scrollbar */
        }

        .cards-scroll-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1); /* Light track */
            border-radius: 0.25rem;
        }

        .cards-scroll-container::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3); /* Darker thumb */
            border-radius: 0.25rem;
        }

        .cards-scroll-container::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.5); /* Even darker on hover */
        }

        .why-card {
            flex-shrink: 0; /* Prevent cards from shrinking */
            width: 85vw; /* Make cards wider than screen to force scroll */
            margin-right: 1rem; /* Space between cards */
            scroll-snap-align: start; /* Snap to the start of each card */
        }
        /* Ensure the first and last card are correctly aligned for snapping */
        .cards-scroll-container .why-card:first-child {
            margin-left: 0.5rem; /* Align first card visually from container edge */
        }
        .cards-scroll-container .why-card:last-child {
            margin-right: 0.5rem; /* Ensure last card has similar spacing to the left */
        }

        @media (min-width: 640px) { /* sm breakpoint */
            .why-card {
                width: calc(50% - 0.5rem); /* Two cards per view on sm screens */
            }
            .cards-scroll-container .why-card:first-child,
            .cards-scroll-container .why-card:last-child {
                margin-left: 0;
                margin-right: 1rem; /* Reset to standard margin */
            }
        }
        @media (min-width: 768px) { /* md breakpoint */
            .why-card {
                width: auto; /* Revert to auto width for grid layout */
                margin-right: 0; /* Remove margin for grid gap */
            }
            .cards-scroll-wrapper {
                padding: 0; /* Remove padding for grid layout */
            }
            .cards-scroll-container {
                overflow-x: hidden; /* Hide scrollbar on desktop */
                padding-bottom: 0; /* Remove scrollbar padding on desktop */
            }
            /* Remove custom scrollbar styling on desktop */
            .cards-scroll-container::-webkit-scrollbar {
                display: none;
            }
            .cards-scroll-container {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }

/* Features our services area css A */
        /* Animations */
        .animate-fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
        }
        .animate-fade-in-up-2 {
            animation: fadeInUp 1s ease-out 0.3s forwards;
        }
        .animate-fade-in-up-3 {
            animation: fadeInUp 1s ease-out 0.6s forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .primary-color {
            color: var(--primary);
        }

        /* Specialized Services Section Styles */
        .services-scroll-container {
            display: flex;
            flex-wrap: nowrap; /* Ensure cards stay in one row on mobile */
            overflow-x: auto; /* Enable horizontal scrolling */
            scroll-snap-type: x mandatory; /* Smooth snapping */
            scroll-behavior: smooth; /* Smooth scroll behavior */
            gap: 2rem; /* Gap between service cards */
            padding-bottom: 1rem; /* Space for scrollbar */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            /* Custom scrollbar styling */
            scrollbar-width: thin; /* For Firefox */
            scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); /* Thumb and track colors */
        }

        /* Webkit scrollbar styles (Chrome, Safari, Edge) */
        .services-scroll-container::-webkit-scrollbar {
            height: 0.5rem; /* Height of the scrollbar */
        }
        .services-scroll-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1); /* Light track */
            border-radius: 0.25rem;
        }
        .services-scroll-container::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3); /* Darker thumb */
            border-radius: 0.25rem;
        }
        .services-scroll-container::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.5); /* Even darker on hover */
        }

        .service-card-showcase {
            flex-shrink: 0; /* Prevent cards from shrinking */
            width: 85vw; /* Make cards wider than screen to force scroll */
            scroll-snap-align: start; /* Snap to the start of each card */
            display: flex; /* Flexbox for internal content alignment */
            flex-direction: column; /* Stack content vertically */
            justify-content: space-between; /* Push CTA to bottom */
            min-height: 300px; /* Ensure consistent card height */
        }

        /* Adjust width of cards on smaller tablets (sm breakpoint) */
        @media (min-width: 640px) { /* sm breakpoint */
            .service-card-showcase {
                width: calc(50vw - 2.5rem); /* Two cards per view on sm, accounting for gap and px-4 */
            }
        }

        /* Revert to grid layout and hide scrollbar on larger screens (lg breakpoint) */
        @media (min-width: 1024px) { /* lg breakpoint */
            .services-scroll-container {
                display: grid; /* Change to grid */
                grid-template-columns: repeat(4, 1fr); /* 4 columns */
                overflow-x: hidden; /* Hide scrollbar */
                scroll-snap-type: none; /* Disable snapping */
                padding-bottom: 0; /* Remove scrollbar padding */
                scrollbar-width: none; /* Hide scrollbar for Firefox */
            }
            .services-scroll-container::-webkit-scrollbar {
                display: none; /* Hide scrollbar for Chrome/Safari */
            }
            .service-card-showcase {
                width: auto; /* Auto width for grid items */
                flex-shrink: 1; /* Allow shrinking in grid */
                margin-right: 0; /* Remove margin-right for grid gap */
            }
        }

        .service-card-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.5rem; /* py-3 px-6 */
            border-radius: 9999px; /* rounded-full */
            font-weight: 600; /* font-semibold */
            text-align: center;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* shadow-md */
            margin-top: 1rem; /* Space from paragraph */
        }
 /* Packages Tool tip CSS */
/* Styles for tooltip on touch/click */
        .tooltip-content.is-active {
            visibility: visible;
            opacity: 1;
        }
        
        .tooltip-li.is-active {
            background-color: #f3f4f6; /* Tailwind's bg-gray-100 */
        }