:root {
    --Primary-Color: #101222;
    --Secondary-Color: #fec010;
}

@font-face {
    font-family: SpaceGrotesk;
    src: url(SpaceGrotesk-Regular.ttf);
}

body {
    font-family: SpaceGrotesk;
    /* Dark base background */
    background-color: #101222;
    color: #f1f5f9;
    /* Light text */
    overflow-x: hidden;
    /* Prevent horizontal scroll due to animations */
}

p {
    text-align: justify;
}

/* Custom gradient text */
.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #fb923c, #d97706);
    /* orange-400 to amber-600 */
}

/* Gradient button */
.btn-gradient {
    display: inline-block;
    padding: 0.75rem 2rem;
    /* px-8 py-3 */
    font-weight: 600;
    /* font-semibold */
    color: #111827;
    /* text-gray-900 */
    border-radius: 0.5rem;
    /* rounded-lg */
    background-image: linear-gradient(to right, #fb923c, #d97706);
    transition: all 0.3s;
    transform: translateY(0);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-gradient:hover {
    background-image: linear-gradient(to right, #f97316, #b45309);
    /* orange-500 to amber-700 */
    transform: translateY(-0.25rem);
    /* -translate-y-1 */
}

.btn-outline {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid white;
    color: white;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-outline:hover {
    background-color: white;
    color: #111827;
    transform: translateY(-0.25rem);
}

/* Hero Background Animation */
.hero-bg-animated {
    animation: panBackground 20s linear infinite alternate;
}

@keyframes panBackground {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.text-PrimaryDark {
    color: var(--Primary-Color);
}

.bg-PrimaryDark {
    background-color: var(--Primary-Color);
}

/* --- Text Animation Classes --- */
.animated-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* Using data-delay for staggered animation */
}

.animated-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animated-button {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animated-button.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Scroll Animation Classes (New) --- */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.slide-in-up {
    transform: translateY(30px);
}

.slide-in-left {
    transform: translateX(-50px);
}

.slide-in-right {
    transform: translateX(50px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* --- Mobile Nav --- */
.mobile-nav {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-nav.is-open {
    transform: translateX(0);
}

/* Custom SVG Icon for Menu (Hamburger) */
.hamburger-icon {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

/* Custom SVG Icon for Close (X) */
.close-icon {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

/* Custom SVG Icon for Menu (Hamburger) */
.hamburger-icon {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

/* --- NEW: Close Icon --- */
.close-icon {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

/* --- END NEW --- */

/* --- NEW: Dark Card Style --- */
.card-dark-navy {
    background-color: var(--Primary-Color);
    /* A dark navy/purple from the image */
}

/* --- END NEW --- */

.bg-city-overlay {
    position: relative;
    background-image: url('../Images/bg.png');
    /* Placeholder for city image */
    background-size: cover;
    background-position: center;

}

.bg-city-overlay::before {
    background-color: rgba(16, 18, 34, 0.68);
    /* Dark overlay (85% opacity) */
    z-index: 1;
}

@media (max-width: 768px) {
    .bg-city-overlay {
        background-image: none;
        background-color: var(--Primary-Color);
    }

    .bg-city-overlay::before {
        display: none;
    }
}

/* 4. Custom CSS for the angled overlay */
.angled-overlay {
    /* This creates the slanted top edge. 
               It starts at 25% down on the left, goes to 0% down on the right. */
    clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
}

ul li {
    list-style-type: disc;
}

ul li::marker {
    color: var(--Secondary-Color);

}

.golden-text {
    color: var(--Secondary-Color);
}

.card-border {
    border: 2px solid var(--Secondary-Color);
}

.border-white {
    border: 2px solid white;
}

@media screen and (max-width: 600px) {
    .teamcard {
        margin-left: 25px;
        margin-right: 25px;
    }

    .slide-text {
        margin-top: 120px;
    }

    .h-8 {
        height: 4rem
    }
}

/* Smooth transition base for all interactive elements */
.transition-all-300 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Tooltip Animation */
.tooltip-wrapper {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) translateX(-50%);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    /* Prevents tooltip from interfering with hover if it overlaps */
}

.card:hover .tooltip-wrapper,
.group:hover .tooltip-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px) translateX(-50%);
}

/* Card Hover State Logic */
.card:hover .profile-image {
    filter: grayscale(0%);
    transform: scale(1.03);
}

.card:hover .profile-name {
    color: var(--Secondary-Color);
    /* LinkedIn Blue or a Brand Color */
}

.card:hover .linkedin-icon {
    color: var(--Primary-Color);
    transform: scale(1.1);
}

/* --- Interactive Timeline Component --- */
.timeline-wrapper {
    position: relative;
    padding: 2rem 0;
    max-width: 900px;
    margin: 0 auto;
}

.timeline-track {
    position: relative;
    height: 4px;
    background: #334155;
    /* Slate-700 */
    margin-bottom: 3rem;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-progress {
    position: absolute;
    height: 100%;
    background: var(--Secondary-Color);
    width: 0%;
    /* Controlled by JS */
    transition: width 1s ease-in-out;
    border-radius: 2px;
}

.timeline-point {
    width: 16px;
    height: 16px;
    background: #334155;
    border-radius: 50%;
    z-index: 10;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Expand hit area */
.timeline-point::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    z-index: 1;
    /* Sits on top to capture clicks */
}

.timeline-point:not(.active):hover {
    background: #64748b;
    /* Lighter slate */
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.timeline-point.active {
    background: var(--Secondary-Color);
    box-shadow: 0 0 0 4px rgba(254, 192, 16, 0.2);
    transform: scale(1.1);
}

.timeline-point-label {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.875rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    transition: color 0.3s;
    white-space: nowrap;
    cursor: pointer;
    /* Ensure label conveys clickability */
    user-select: none;
    pointer-events: none;
    /* Let clicks pass through to the point (which handles the listener) or the ::before */
}

/* We need pointer-events auto if the point listener is on the point element, 
   but since the label is a child, clicking it bubbles. 
   However, visually, the label is outside the point. 
   If I set pointer-events: none, clicks on label might pass through to... the body? 
   So we MUST keep pointer-events: auto on label and ensure the click bubbles. 
   Or better, attach listener to label? 
   No, the hierarchy is <div point> <span label> </div>. 
   So bubbling works. */

.timeline-point-label {
    pointer-events: auto;
}

.timeline-point:hover .timeline-point-label,
.timeline-point.active .timeline-point-label {
    color: var(--Secondary-Color);
}

/* Moving Indicator (Dot) */
.timeline-indicator {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--Secondary-Color);
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 20;
    box-shadow: 0 0 15px var(--Secondary-Color);
    transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
}

/* Content Area */
.timeline-content-container {
    position: relative;
    /* Removed min-height, managed by JS */
    transition: height 0.3s ease-in-out;
}

.timeline-content-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.timeline-content-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 10;
    /* Do NOT switch to relative. JS handles container height. */
}

/* Mobile Horizontal Timeline (Compact) */
@media (max-width: 768px) {
    .timeline-track {
        flex-direction: row;
        /* Horizontal */
        height: 4px;
        width: 100%;
        /* Or reduced width like 80% for "minimal length" */
        max-width: 300px;
        /* Enforce minimal length visual */
        margin: 0 auto;
        margin-bottom: 3rem;
        /* Space for labels */
        background: #334155;
    }

    .timeline-progress {
        width: 0%;
        height: 100%;
        transition: width 1s ease-in-out;
        bottom: auto;
        top: 0;
    }

    .timeline-indicator {
        left: 0;
        top: 50%;
        /* Reset vertical centering */
        /* JS must update 'left' now, not 'top' */
    }

    .timeline-point {
        margin: 0;
        /* Reset spacing */
    }

    .timeline-point-label {
        /* Reset label to top */
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 0.75rem;
        /* Slightly smaller on mobile */
    }
}