/* Ensures the theme toggle icons switch correctly */
.dark .fa-sun {
    display: block;
}
.dark .fa-moon {
    display: none;
}
html:not(.dark) .fa-sun {
    display: none;
}
html:not(.dark) .fa-moon {
    display: block;
}

/* Simple fade-in animations for the hero section */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
    animation-delay: 0.2s; /* Stagger the animation */
}