html {
    scroll-behavior: smooth;
}

/* Header styling for solid background */
#main-header.is-scrolled {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#main-header.is-scrolled .nav-link {
    color: #374151; /* text-gray-700 */
}
#main-header.is-scrolled .nav-link:hover {
    color: #2563eb; /* text-blue-600 */
}

/* Base styles for fade-in animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}