/* hero-slideshow.css */

#hero {
    overflow: hidden; /* Clip slideshow overflow */
    position: relative; /* For positioning slideshow container */
    padding-top: 0; /* Reset default padding */
    padding-bottom: 80px; /* Add padding below the slideshow */
}

.hero-slideshow-container {
    position: relative; /* For positioning hero text */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px; /* Adjust slideshow height */
    perspective: 1000px; /* For 3D effect */
}

.hero-slideshow {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* Enable 3D transformations for children */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Smooth transitions */
    transform: translateX(100%); /* Start off-screen to the right */
    z-index: 0; /* Stack order */
}

.slide.active {
    opacity: 1; /* Make active slide visible */
    transform: translateX(0) rotateY(0deg); /* Center and no rotation for active slide */
    z-index: 1; /* Bring active slide to front */
}

.slide.prev {
    opacity: 0;
    transform: translateX(-100%) rotateY(-45deg); /* Slide from left, slight rotation */
    z-index: 0;
}

.slide.next {
    opacity: 0;
    transform: translateX(100%) rotateY(45deg); /* Slide from right, slight rotation */
    z-index: 0;
}


.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover container, crop if needed */
    border-radius: 0; /* Adjust if you want rounded corners on slides */
    display: block; /* Prevent extra space below image */
}

.hero-text {
    position: absolute; /* Overlay text on slideshow */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; /* Text color on slideshow */
    z-index: 2; /* Ensure text is on top of slides */
    background-color: rgba(0, 0, 0, 0.4); /* Optional background for text readability */
    padding: 30px;
    border-radius: 10px;
    max-width: 80%; /* Limit text width */
}

.hero-text h2, .hero-text p {
    color: white; /* Ensure text inside hero-text is white */
}