/* styles.css */

/* Fix font rendering speed */
@font-face {
    font-display: swap;
}

/* Fix Layout Shifts */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure mobile menu is hidden by default but reachable */
#nav-menu {
    display: flex;
}

@media (max-width: 768px) {
    #nav-menu {
        display: none; /* JavaScript will toggle this to 'flex' or 'block' */
    }
    #nav-menu.active {
        display: flex;
        flex-direction: column;
    }
}
/* 1. Prevent "Invisible Text" while fonts load */
@font-face {
  font-display: swap;
}

/* 2. Optimize image rendering */
img {
  max-width: 100%;
  height: auto; /* Prevents layout shifts on mobile */
  content-visibility: auto; /* Only renders images when near the viewport */
}

/* 3. Smooth scrolling without heavy JS */
html {
  scroll-behavior: smooth;
}

/* Define Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

@layer base {
    :root {
        /* Primary/Background Colors */
        --color-woodsmoke: #040505;
        --color-iceberg: #D9ECF1;

        /* Accent/Headline Colors */
        --color-java: #1FBDBF;
        --color-fun-blue: #1E6AB7;

        /* Tailwind Configuration */
        --color-primary-bg: var(--color-woodsmoke);
        --color-secondary-bg: var(--color-iceberg);
        --color-headline-1: var(--color-java);
        --color-headline-2: var(--color-fun-blue);
        
        /* Text Colors - High contrast for accessibility */
        --color-text-on-dark: var(--color-iceberg);
        --color-text-on-light: var(--color-woodsmoke);
    }

    body {
        font-family: 'Roboto', sans-serif;
        /* Default background and text for the site */
        background-color: var(--color-primary-bg);
        color: var(--color-text-on-dark);
        scroll-behavior: smooth;
    }

    /* Apply custom colors using Tailwind classes */
    .bg-woodsmoke { background-color: var(--color-woodsmoke); }
    .bg-iceberg { background-color: var(--color-iceberg); }
    .text-java { color: var(--color-java); }
    .text-fun-blue { color: var(--color-fun-blue); }
    .text-on-dark { color: var(--color-text-on-dark); }
    .text-on-light { color: var(--color-text-on-light); }
}

/* Animations */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Custom CSS to force the mobile menu to show when JavaScript adds 'active-menu' */
#mobile-menu.active-menu {
    /* Use 'block' or 'flex' depending on what Tailwind uses for your layout */
    display: block !important; 
}

/* Button Hover Animation */
.btn-primary {
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(30, 106, 183, 0.4); /* Shadow color from Fun Blue */
}

/* Navbar Slide/Opacity Transition */
.navbar-slide {
    transition: opacity 0.3s, transform 0.3s;
}
.navbar-hidden {
    opacity: 0;
    transform: translateY(-100%);
}
/* --- Brand Carousel Styles (New) --- */

.brands-carousel-wrapper {
    width: 100%;
    padding: 3rem 0; /* Increased padding for visual weight */
    background-color: var(--color-iceberg); /* Light background for contrast */
}

.brands-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900; /* Extra bold */
    color: var(--color-fun-blue); /* Headline color */
    margin-bottom: 2rem;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.brands-carousel {
    overflow: hidden;
    background-color: var(--color-woodsmoke); /* Dark scrolling bar */
    padding: 1.5rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    width: 100%;
    /* Added subtle gradient for visual interest */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.brands-scroll {
    display: flex;
    width: max-content;
    animation: scroll-left 40s linear infinite; /* Adjusted speed */
    gap: 4rem; /* Increased gap */
    align-items: center;
}

.brand-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-iceberg); /* Light text on dark background */
    white-space: nowrap;
    transition: all 0.3s ease;
    padding: 0 1rem;
    letter-spacing: 0px;
    opacity: 0.75;
    font-family: 'Roboto', sans-serif;
}

.brand-name:hover {
    color: var(--color-java); /* Highlight with Java Green on hover */
    transform: scale(1.05);
    opacity: 1;
}

/* Continuous scroll animation */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.brands-carousel:hover .brands-scroll {
    animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .brands-title { font-size: 2rem; }
    .brands-scroll { gap: 3rem; }
}
@media (max-width: 768px) {
    .brands-title { font-size: 1.75rem; margin-bottom: 1.5rem; }
    .brand-name { font-size: 1.25rem; }
    .brands-scroll { gap: 2.5rem; }
}
/* --- 3D Flip Card Styles (Revised for EvoolveAds Brand Palette) --- */

/* 1. Sets the perspective for 3D effect on the parent container */
.flip-card-container {
    perspective: 1000px;
    height: 100%; 
    /* The min-h-80 from HTML ensures it has space */
}

/* 2. Holds the front and back of the card */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s ease-in-out; /* Added ease-in-out for smoother animation */
    transform-style: preserve-3d;
}

/* 3. The flipped state (triggered on hover/focus) */
.flip-card-container:hover .flip-card-inner,
.flip-card-container:focus-within .flip-card-inner {
    transform: rotateY(180deg);
}

/* 4. Front and Back positioning */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    border-radius: 0.75rem; 
    padding: 1.5rem; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* Added stronger shadow */
    border: 1px solid var(--color-iceberg); /* Subtle border */
}

/* 5. Specific styles for Front (Clean, light background) */
.flip-card-front {
    background-color: var(--color-woodsmoke); /* Dark background to match section */
    color: var(--color-iceberg); /* Light text on dark background */
}

/* Ensure front title (h3) and subheading (p) colors are visible */
.flip-card-front h3 {
    color: var(--color-java); /* Highlight primary title in Java Green */
}
.flip-card-front p {
    color: var(--color-iceberg); /* Use light text for description */
}
.flip-card-front .text-sm { /* For the 'Hover to Flip' text */
    color: var(--color-fun-blue); /* Accent color for instruction */
    font-weight: 700;
}


/* 6. Specific styles for Back (Primary brand accent color) */
.flip-card-back {
    background-color: var(--color-fun-blue); /* Fun Blue primary accent for the back */
    color: var(--color-woodsmoke); /* Dark text on the light blue background */
    transform: rotateY(180deg); 
    text-align: left; 
    border-color: var(--color-java); /* Border highlight in Java Green */
}

/* Styling content on the back */
.flip-card-back h3 {
    color: var(--color-woodsmoke); /* Dark title on light blue background */
    font-size: 1.75rem; /* Larger title */
    margin-bottom: 0.5rem;
}
.flip-card-back p {
    color: var(--color-woodsmoke); /* Main text should be dark */
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.flip-card-back a {
    color: var(--color-java); /* Link in Java Green */
    font-weight: 700;
}
/* Section 4: Sub-Service Cards Hover Effect */
.bg-white.rounded-xl.shadow-xl.border-t-4 {
    transition: all 0.3s ease-in-out; /* Add smooth transition to all cards */
    border: 1px solid transparent; /* Ensure border doesn't jump */
}
/* --- FIX: Services Page Pillar Color Contrast --- */

/* Ensures all headings, paragraphs, and list items within the light (bg-iceberg) sections use DARK text. */
section.bg-iceberg * {
    /* If Tailwind is not working, this forcefully resets text to dark woodsmoke */
    color: var(--color-woodsmoke) !important;
}

/* Exception for the Java Green accent color to remain visible on the light background */
section.bg-iceberg .text-java,
section.bg-iceberg .text-fun-blue {
    color: var(--color-java) !important; /* Keep Java Green for accents */
}

/* Ensures the text in the sub-service cards (Section 4) remains dark on white backgrounds */
.bg-iceberg .bg-white h3, 
.bg-iceberg .bg-white p {
    color: var(--color-woodsmoke) !important;
}

/* Ensure link/button text within the dark block stays correct */
section.bg-woodsmoke a.inline-block {
    color: var(--color-woodsmoke) !important;
}

/* Fix for the list bullets in Pillar 1 (Programmatic) */
section.bg-iceberg ul li {
    /* Set bullet color explicitly if it defaults to white/light */
    color: var(--color-woodsmoke) !important; 
}
/* --- FIX: Custom CTA Button Styling (Start a Brainstorm Session) --- */

.btn-primary {
    /* Base Colors (Explicitly set to Fun Blue background, Dark text) */
    background-color: var(--color-fun-blue) !important;
    color: var(--color-woodsmoke) !important;
    
    /* Remove any default browser focus/active outlines (this might be the highlighted blue box you see) */
    outline: none !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Stronger shadow on the dark background */
}

/* Ensure the hover state is clean Java Green */
.btn-primary:hover {
    background-color: var(--color-java) !important;
    color: var(--color-woodsmoke) !important;
}

/* Ensure the button looks clean when clicked or focused */
.btn-primary:focus, 
.btn-primary:active {
    outline: none !important;
    /* Use a very subtle box-shadow or scale effect on focus instead of a blue outline */
    box-shadow: 0 0 0 3px rgba(0, 135, 248, 0.5) !important; /* Subtle, brand-aligned blue focus ring */
}