@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Loading Spinner */
#loading-overlay {
    position: fixed;
    inset: 0;
    background-color: #0f172a; /* slate-900 */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out;
}
#loading-overlay.hidden-fade {
    opacity: 0;
    pointer-events: none;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #f59e0b; /* amber-500 */
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.tab-active {
    background-color: #f59e0b;
    color: #0f172a;
}

.tab-inactive {
    color: #94a3b8;
}

/* Navigation Styles */
/* Initial State: handled by Tailwind classes in HTML (fixed w-full z-50 transition-all duration-300 bg-transparent py-6) */

/* Scrolled State - Updated to Dark Background */
.nav-scrolled {
    background-color: rgba(15, 23, 42, 0.95) !important; /* slate-900 with slight transparency */
    backdrop-filter: blur(10px);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

/* Text colors in scrolled state remain WHITE/Light because bg is dark */
.nav-scrolled .logo-text {
    color: #ffffff !important;
}

.nav-scrolled .nav-link {
    color: #e2e8f0 !important; /* slate-200 */
}

.nav-scrolled .nav-link:hover {
    color: #f59e0b !important; /* amber-500 */
}

.nav-scrolled .menu-btn {
    color: #ffffff !important;
}

/* Slider Animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideContent {
    opacity: 0;
    animation: slideUpFade 1s forwards 0.5s;
}

/* Slide Transitions */
.slide {
    position: absolute;
    inset: 0;
    transition: transform 0.8s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
    transform: translateX(100%);
    z-index: 0;
}

.slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 20;
}

.slide.prev {
    opacity: 0;
    transform: translateX(-100%);
    z-index: 10;
}

.indicator {
    transition: all 0.3s ease;
}

.indicator.active {
    background-color: #f59e0b;
    width: 3rem;
}