/* Fonts */
/* @font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
} */
/*
  Brand variables
  --------------------------------------------------
  Centralizes color choices for consistent branding.
  Adjust these to quickly theme the site.
*/
:root {
    /* Primary brand hue (base + darker shade) */
    --brand-primary: #6A5ACD;       /* SlateBlue */
    --brand-primary-dark: #4A3C9E;  /* Darker SlateBlue */

    /* Secondary/gradient stop */
    --brand-secondary: #FF6B6B;     /* Coral Red */

    /* Accents (CTAs, highlights) - can be tied to THEME_COLOR via inline override */
    --brand-accent: #FFD93D;        /* Gold */
    --brand-accent-hover: #FF8C42;  /* Orange */

    /* Surfaces and text */
    --surface: #FFFFFF;
    --text-on-surface: #1C1C1C;
    --text-on-primary: #FFFFFF;

    /* Glass header background */
    --header-glass: rgba(106, 90, 205, 0.5);
    --mobile-menu-bg: rgba(106, 90, 205, 0.8);
}

/* style.css */

body {
    font-family: 'Poppins', 'Inter', sans-serif; /* Poppins for body text, Inter as fallback */
    overflow-x: hidden; /* Prevent horizontal scroll due to animations */
    background-color: var(--brand-primary); /* Match hero start color */
    padding-top: 80px; /* Space for the fixed header */
}

/* Headings using Playfair Display */
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

/* Custom animation classes for scroll effect */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 1.2s ease-out;
}
.fade-in.animate {
    opacity: 1;
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scale-in.animate {
    opacity: 1;
    transform: scale(1);
}

/* General section padding */
section {
    padding: 80px 0; /* Consistent vertical padding */
}

/* Hero section specific styles for visual appeal */
#hero {
    background: linear-gradient(120deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    background-size: 200% 200%;
    animation: hero-gradient 12s ease-in-out infinite alternate;
    color: var(--text-on-primary);
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-top: -80px; /* Pull hero section up to fill space left by body padding */
    will-change: background-position;
}

@keyframes hero-gradient {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Polished hero content surface (glass card) */
#hero .hero-surface {
    /* Slightly darker, less transparent glass for better logo contrast */
    background: linear-gradient(180deg, rgba(74, 60, 158, 0.28), rgba(74, 60, 158, 0.16));
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 24px;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    /* Extra bottom padding to avoid clipping descenders like 'g', 'y' */
    padding-bottom: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* Typographic refinements */
#hero .headline {
    font-weight: 800;
    font-size: clamp(2.25rem, 6vw, 4.25rem);
    /* Slightly taller line-height to prevent descender clipping */
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* Gradient text for headline */
.headline-gradient {
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.85) 45%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#hero .subtitle {
    font-size: clamp(1.05rem, 2.6vw, 1.375rem);
    line-height: 1.6;
    opacity: 0.95;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Animated background elements for hero */
#hero::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: bubble1 15s infinite ease-in-out;
    z-index: 0;
}

#hero::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    animation: bubble2 20s infinite ease-in-out;
    z-index: 0;
}

/* New SVG blob animation */
.hero-bg-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    opacity: 0.6;
}
.hero-bg-svg .blob-1 { fill: var(--brand-secondary); animation: float-a 20s ease-in-out infinite alternate; }
.hero-bg-svg .blob-2 { fill: var(--brand-accent); animation: float-b 24s ease-in-out infinite alternate; }
.hero-bg-svg .blob-3 { fill: var(--brand-primary-dark); animation: float-c 28s ease-in-out infinite alternate; }

@keyframes float-a {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(80px, -40px) rotate(180deg); }
}
@keyframes float-b {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(-60px, 50px) rotate(240deg); }
}
@keyframes float-c {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(40px, 60px) rotate(120deg); }
}

@keyframes bubble1 {
    0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
    50% { transform: scale(1.1) translate(20px, 20px);
opacity: 0.6; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.8; }
}

@keyframes bubble2 {
    0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    50% { transform: scale(1.05) translate(-15px, -15px); opacity: 0.3; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.5; }
}

/* Ensure content is above animated background */
#hero > .container {
    position: relative;
    z-index: 1;
}

/* Soft logo glow */
#hero .logo-glow {
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.25));
}
#hero .logo-glow:hover {
    filter: drop-shadow(0 14px 40px rgba(0,0,0,0.3));
}

/* Card styling */
.card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Image styling */
.img-placeholder {
    border-radius: 8px;
    overflow: hidden;
}
.img-placeholder img {
    width: 100%;
    height: auto; /* Changed to auto to allow responsive scaling */
    object-fit: cover;
    border-radius: 8px;
}

/* Responsive button styling for hero section */
.btn-primary {
    /* Responsive padding and text size for better mobile view */
    @apply inline-block px-8 py-4 text-lg sm:px-12 sm:py-5 sm:text-xl md:px-16 md:py-6 md:text-2xl rounded-full font-semibold transition duration-300 ease-in-out;
    background: var(--brand-accent);
    color: var(--text-on-surface);
    box-shadow: 0 10px 35px rgba(106, 90, 205, 0.6); /* Uses primary hue for depth */
}
.btn-primary:hover {
    background: var(--brand-accent-hover);
    transform: translateY(-5px) scale(1.05); /* More lift and scale */
    box-shadow: 0 15px 50px rgba(255, 107, 107, 0.8); /* Even more prominent shadow on hover */
}

.btn-secondary {
    /* Responsive padding and text size for better mobile view */
    @apply inline-block px-8 py-4 text-lg sm:px-12 sm:py-5 sm:text-xl md:px-16 md:py-6 md:text-2xl rounded-full font-semibold transition duration-300 ease-in-out;
    background: var(--brand-accent);
    color: var(--text-on-surface);
    box-shadow: 0 10px 35px rgba(106, 90, 205, 0.6);
}
.btn-secondary:hover {
    background: var(--brand-accent-hover);
    transform: translateY(-5px) scale(1.05); /* More lift and scale */
    box-shadow: 0 15px 50px rgba(255, 107, 107, 0.8); /* Even more prominent shadow on hover */
}


/* Testimonial styling */
.testimonial-card {
    background-color: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0; /* Prevent cards from shrinking */
    width: 90%; /* Adjust width for mobile view to show one card at a time with peek */
    max-width: 400px; /* Max width for larger screens */
    scroll-snap-align: start; /* Snap to start of cards when scrolling */
}

/* Testimonial container for horizontal scrolling */
.testimonials-carousel {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    scroll-snap-type: x mandatory; /* Smooth snapping effect */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    gap: 2rem; /* Gap between testimonial cards */
    padding-bottom: 1rem; /* Padding for scrollbar */
}

/* Hide scrollbar for aesthetic purposes, but keep functionality */
.testimonials-carousel::-webkit-scrollbar {
    display: none;
}
.testimonials-carousel {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.testimonial-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.footer {
    background-color: var(--brand-primary-dark);
    color: var(--text-on-primary);
    padding: 40px 0;
}

/* Glassmorphism effect for header */
.glass-header {
    background-color: var(--header-glass);
    backdrop-filter: blur(10px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.15); /* Increased shadow from 0.1 to 0.15, spread from 32px to 40px */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle border */
    border-radius: 0 0 16px 16px; /* Rounded corners only at the bottom for flush top */
    position: fixed; /* Ensure it stays at the top */
    top: 0;
    left: 0;
    width: 100%; /* Make it full width */
    height: 80px; /* Fixed height for the header */
    padding-top: 0; /* No vertical padding directly on header */
    padding-bottom: 0; /* No vertical padding directly on header */
    z-index: 50; /* Ensure header is on top */
}

/* Styles for the nav container within the header */
.glass-header nav {
    height: 100%; /* Make nav take full height of header */
    /* Removed explicit padding: 0 24px; here as px-6 on nav handles horizontal padding */
}

/* Mobile Menu styles */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
    position: absolute; /* Position relative to the header */
    top: 80px; /* Position right below the header's fixed height */
    left: 0;
    width: 100%;
    background-color: var(--mobile-menu-bg); /* Matches glass-header transparency */
    backdrop-filter: blur(10px); /* Blurs content behind it */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px; /* Applied rounded corners to all sides for floating effect */
    z-index: 40; /* Lower than header but above content */
    padding-bottom: 1rem; /* Add some padding at the bottom for content */
}

.mobile-menu-item {
    display: block; /* Ensure it's a block-level element */
    padding: 12px 24px; /* Adjust padding for mobile links for better touch target */
    color: white;
    font-size: 1.125rem; /* text-lg */
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.mobile-menu-item:last-child {
    border-bottom: none;
}
/* Highlight for active mobile menu item (on scroll) */
.mobile-menu-item.active-nav-link {
    background-color: rgba(255, 255, 255, 0.3); /* Stronger highlight for active mobile link */
    font-weight: 600;
}


/* Desktop Navigation links specific styles */
@media (min-width: 768px) {
    nav .md\:flex {
        height: 100%; /* Make this div take full height of nav */
        display: flex; /* Use flexbox to align children */
        align-items: stretch; /* Make children stretch to full height */
        /* Tailwind's space-x-4 from HTML will create the gap */
    }

    nav .md\:flex > a { /* Target desktop nav links directly */
        height: 100%; /* Make links fill the height of their parent flex container */
        display: flex; /* Use flexbox for centering content vertically within the link */
        align-items: center; /* Vertically center the text */
        /* Tailwind's px-4 py-2 from HTML will handle padding */
        color: white; /* Ensure text is white */
        transition: background-color 0s, color 0.3s ease-in-out; /* Instant background change, smooth color change */
    }

    /* Hover effect for desktop navigation links (now instant full highlight) */
    nav .md\:flex > a:hover {
        background-color: rgba(255, 255, 255, 0.2); /* Instantly appears */
    }

    /* Style for active desktop navigation link (on scroll - now instant full highlight) */
    .active-nav-link {
        color: white; /* Ensure text is white */
        font-weight: 600; /* Slightly bolder */
        background-color: rgba(255, 255, 255, 0.3); /* Slightly stronger highlight for active, instant */
    }
}

/* Override hover effect for the brand link (applies to all screen sizes) */
#brand-link {
    /* No specific height/display/align-items here; default inline-block behavior is fine for brand */
    /* Padding is handled by its default styling or can be set as needed */
}

#brand-link:hover {
    background-color: transparent; /* No background color change on hover for brand link */
}


/* Horizontal Timeline Styles (Revised) */
.timeline-outer-wrapper {
    position: relative;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrollbar */
    scroll-snap-type: x mandatory; /* Snap to items */
    padding-top: 120px; /* Increased space for years and content above the line */
    padding-bottom: 270px; /* Increased space for content below the line */
}

.timeline-outer-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari */
}
.timeline-outer-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.timeline-flex-container {
    display: flex;
    position: relative; /* For absolute positioning of the line */
    min-height: 450px; /* Increased height to accommodate expanding content */
    align-items: center; /* Vertically center the dots on the line */
    justify-content: space-between; /* Distribute items evenly */
    /* Removed horizontal padding here so the line can span full width */
}

.timeline-main-line {
    position: absolute;
    top: 50%;
    left: 0; /* Stretches from left edge */
    right: 0; /* Stretches to right edge */
    height: 4px;
    background-color: #6A5ACD; /* Main line color */
    z-index: 0; /* Changed z-index to 0 */
    /* Removed translateY to align center with dots */
}

.timeline-event {
    flex-shrink: 0; /* Prevent items from shrinking */
    width: 250px; /* Fixed width for each event block/card */
    position: relative;
    text-align: center;
    scroll-snap-align: center; /* Snap each item to the center */
    margin: 0 40px; /* Horizontal spacing between events */
    padding-top: 20px; /* Space for the year above the dot */
    padding-bottom: 20px; /* Space below the dot for content connection */
    display: flex; /* Make event a flex container to center its internal elements */
    flex-direction: column;
    align-items: center; /* Center year and dot horizontally */
    justify-content: center;
}

.timeline-year {
    position: absolute; /* Position relative to .timeline-event */
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #333;
    font-size: 1.125rem; /* text-lg */
    z-index: 4; /* Ensure it's above other elements */
}

/* Year for events with content below the line (odd children) */
.timeline-event:nth-child(odd) .timeline-year {
    top: -50px; /* Position above the dot/event */
}

/* Year for events with content above the line (even children) */
.timeline-event:nth-child(even) .timeline-year {
    bottom: -50px; /* Position below the dot/event, opposite the content */
}

.timeline-dot {
    width: 48px; /* Increased size */
    height: 48px; /* Increased size */
    border-radius: 50%;
    background-color: white; /* Dot background */
    border: 4px solid; /* Border color will vary by type */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Position relative to .timeline-flex-container's vertical center */
    top: 50%;
    left: 50%; /* Center horizontally within its timeline-event */
    transform: translate(-50%, -50%); /* Center dot exactly */
    z-index: 99; /* Increased z-index significantly */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* Stronger shadow for more lift */
}

/* Individual dot border colors */
.timeline-dot.data-engineer { border-color: #FFD93D; }
.timeline-dot.software-qc { border-color: #00C4B0; }
.timeline-dot.business-analyst { border-color: #FF8C42; }
.timeline-dot.reporting-analyst { border-color: #6A5ACD; }
.timeline-dot.operations-supervisor { border-color: #FFD93D; }
.timeline-dot.subject-matter-expert { border-color: #00C4B0; }
.timeline-dot.customer-service { border-color: #FF8C42; }

.timeline-dot svg {
    width: 28px; /* Adjusted icon size */
    height: 28px; /* Adjusted icon size */
    color: #333; /* Icon color inside dot */
}

.timeline-content-wrapper {
    position: absolute;
    width: 100%; /* Take full width of parent event */
    left: 0;
    white-space: normal; /* Allow text wrapping */
    text-align: left;
    padding: 1rem; /* Padding inside the content card */
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2; /* Content above line but below dot for connection */
}

/* Position content wrappers alternating top/bottom */
.timeline-event:nth-child(odd) .timeline-content-wrapper {
    top: calc(50% + 60px); /* Increased offset for more clearance */
}

.timeline-event:nth-child(even) .timeline-content-wrapper {
    bottom: calc(50% + 60px); /* Increased offset for more clearance */
}

.timeline-content-wrapper::before { /* Vertical line from dot to content */
    content: '';
    position: absolute;
    width: 2px;
    background-color: #6A5ACD; /* Connector line color */
    left: 50%;
    transform: translateX(-50%);
    z-index: -1; /* Behind the content card */
}

.timeline-event:nth-child(odd) .timeline-content-wrapper::before {
    height: 50px; /* Length of the connecting line */
    top: -50px; /* Connects from top of content wrapper to dot */
}

.timeline-event:nth-child(even) .timeline-content-wrapper::before {
    height: 50px;
    bottom: -50px; /* Connects from bottom of content wrapper to dot */
}

.timeline-content-wrapper::after { /* Triangle pointer */
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.timeline-event:nth-child(odd) .timeline-content-wrapper::after {
    border-bottom: 8px solid white; /* Arrow pointing up */
    top: -8px; /* Position at the top of the content wrapper */
}

.timeline-event:nth-child(even) .timeline-content-wrapper::after {
    border-top: 8px solid white; /* Arrow pointing down */
    bottom: -8px; /* Position at the bottom of the content wrapper */
}

/* Adjustments for smaller screens */
@media (max-width: 767px) {
    .timeline-outer-wrapper {
        padding-top: 40px; /* Less space needed for year */
        padding-bottom: 180px; /* Adjust spacing for mobile content */
        margin: 0; /* Remove horizontal margin as it's handled by padding in container */
    }
    .timeline-flex-container {
        padding: 0 20px; /* Smaller padding at edges for mobile */
    }

    .timeline-main-line {
        top: 50%; /* Re-center line relative to smaller dot/content */
        /* No translateY here either */
    }

    .timeline-event {
        width: 220px; /* Smaller width for mobile cards */
        margin: 0 20px; /* Closer spacing on mobile */
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .timeline-year {
        font-size: 1rem; /* Smaller year text */
    }
    /* Mobile adjustments for year positioning */
    .timeline-event:nth-child(odd) .timeline-year {
        top: -40px;
    }
    .timeline-event:nth-child(even) .timeline-year {
        bottom: -40px;
    }
}

/* Custom logo filter */
.logo-white {
    filter: brightness(0) invert(1);
}

/*
  Inline spinner used on the Coming Soon page
  --------------------------------------------------
*/
.spinner-container { display: inline-block; }
.spinner { width: 56px; height: 56px; animation: spin-rotate 2s linear infinite; }
.spinner .path { stroke: var(--brand-accent, #FFFFFF); stroke-linecap: round; animation: spin-dash 1.5s ease-in-out infinite; }
@keyframes spin-rotate { 100% { transform: rotate(360deg); } }
@keyframes spin-dash {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* Reduced motion: limit to decorative effects, keep essentials like spinners */
@media (prefers-reduced-motion: reduce) {
  /* Disable decorative hero/background animations */
  #hero,
  #hero .blob-1,
  #hero .blob-2,
  #hero .blob-3,
  #hero::before,
  #hero::after {
    animation: none !important;
  }

  /* Make scroll-triggered content visible without transitions */
  .fade-in-up,
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in,
  .fade-in-up.animate,
  .fade-in.animate,
  .slide-in-left.animate,
  .slide-in-right.animate,
  .scale-in.animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Avoid smooth scrolling to reduce motion */
  html { scroll-behavior: auto !important; }
}