.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.hero-slider {
    position: relative;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.hero-slide.active {
    opacity: 1;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.open {
    transform: translateX(0);
}