/* Custom CSS for additional styling and overrides */

/* Ensure smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom underlines for navigation items */
.nav-item {
    position: relative;
    padding-bottom: 5px; /* Space for the underline */
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ef4444; /* red-500 */
    transition: width 0.3s ease-in-out;
}

.nav-item:hover::after, .nav-item.active::after {
    width: 100%;
}

/* Hero text animation */
.hero-text span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    animation: reveal-text 1s forwards;
    animation-delay: var(--delay);
}

@keyframes reveal-text {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

.hero-subtitle,
.hero-button {
    animation: fade-in-up 0.8s forwards;
    animation-delay: var(--delay);
}

@keyframes fade-in-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Override AOS default */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

[data-aos].aos-animate {
    opacity: 1;
}

/* Optional: Custom AOS animations if needed, otherwise rely on AOS defaults */
/* For instance, if you want a custom 'fade-in-up' that's different from AOS default */
/*
[data-aos="custom-fade-up"] {
    transform: translateY(50px);
    opacity: 0;
    transition-duration: 0.8s;
}

[data-aos="custom-fade-up"].aos-animate {
    transform: translateY(0);
    opacity: 1;
}
*/

/* Additional styling for elements if necessary */