body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb; /* Light gray background */
}
/* Style for the navigation active state (optional, for JS if added) */
.nav-link.active {
    font-weight: bold;
    color: #4f46e5; /* Indigo-700 */
}

/* Animation for sections appearing on scroll */
.section-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for hero elements */
.hero-title-animate,
.hero-subtitle-animate,
.hero-button-animate {
    opacity: 0; /* Start hidden, JS will trigger animation */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-hidden {
        opacity: 1;
        transform: translateY(0);
        transition: none;
    }
    .hero-title-animate,
    .hero-subtitle-animate,
    .hero-button-animate {
        animation: none !important; /* Important to override inline animation property */
        opacity: 1; /* Ensure visible if animation is disabled */
    }
    /* Hover effects can also be toned down if necessary */
    /* e.g., .transform.hover\:scale-105:hover { transform: none; } */
}

/* Style for the "Back to Top" button when visible */
.back-to-top-visible {
    opacity: 1 !important; /* Use !important to override Tailwind's opacity-0 if needed */
    pointer-events: auto !important;
}