/* Base Styles & Fonts */
body {
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Header Styling */
.header-scrolled {
    background-color: rgba(16, 16, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hero Section Video Background */
.hero-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}

#hero .relative.z-10 {
    text-shadow: 0 1px 3px rgba(0,0,0,0.4); /* Slightly stronger for video */
}


/* Tab Content Animation (Solutions Section) */
.tab-content.active {
    /* GSAP now handles tab content fade-in */
}
/* @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
} */

/* Initial state for solution image cards for GSAP animation (if needed beyond JS) */
.solution-image-card {
    /* opacity: 0; */ /* GSAP sets initial opacity */
    /* transform: translateY(20px); */ /* GSAP sets initial transform */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* For hover */
}
.solution-image-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.04);
}


/* Project Carousel Animations */
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
.animate-scroll {
    animation: scroll 70s linear infinite; /* Slightly slower for smoother feel */
}

@keyframes scroll-reverse {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.animate-scroll-reverse {
    animation: scroll-reverse 70s linear infinite; /* Slightly slower */
}

/* Hover effects for project cards */
#projects .flex-shrink-0 > div { /* Targeting the inner div of the li */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
#projects .flex-shrink-0 > div:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.05);
}


/* Client Logos Styling */
#client-logos-grid .client-logo-item img {
    max-height: 48px; 
    transition: filter 0.3s ease, transform 0.3s ease;
}
#client-logos-grid .client-logo-item:hover img {
    transform: scale(1.1);
}

/* FAQ Icon Animation */
.faq-icon {
    transition: transform 0.3s ease-in-out;
    display: inline-block;
}
/* details[open] .faq-icon is handled by Tailwind group-open utilities */


/* Section Title Underline Animation */
section > .container > h2, 
section > .container > div > h2 { 
    position: relative;
    display: inline-block; 
}

section > .container > h2::after,
section > .container > div > h2::after {
    content: '';
    position: absolute;
    bottom: -6px; /* Adjust position */
    left: 0;
    width: 0; /* Initially hidden */
    height: 3px; 
    background-color: #3b82f6; /* Tailwind's blue-500 or your brand color */
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; /* Added delay */
}

section > .container > h2.title-visible-for-underline::after,
section > .container > div > h2.title-visible-for-underline::after {
   width: 60px; /* Or a percentage like '30%' */
}

/* Contact Form Field Focus */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    /* Tailwind's focus:ring-2 focus:ring-white is primary */
    /* Optional: border-color: #fff; */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Mobile Nav Toggle Icon Animation */
#nav-toggle svg path {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform-origin: center;
}
#nav-toggle.active svg path:nth-child(1) {
    transform: translateY(6px) rotate(45deg); /* Adjusted for typical 3-line hamburger */
}
#nav-toggle.active svg path:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
#nav-toggle.active svg path:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg); /* Adjusted for typical 3-line hamburger */
}

/* General Smoothness - Lenis handles scroll-behavior */
/* html {
    scroll-behavior: smooth; /* IMPORTANT: REMOVE IF USING LENIS */
/* } */