/* Base styles */
.slider-container {
    max-height: 100vh; /* Limit the container height */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content vertically */
    overflow: hidden;
}


.slider-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    transition: transform 0.5s ease;
    min-height: 200px; /* Ensure height even when empty */
}

.slide {
    flex: 0 0 33.333%; /* Adjust based on the number of slides you want visible on larger screens */
    box-sizing: border-box;
    padding: 10px;
}

.slide img {
    width: 100%;
    max-height: 100vh; /* Ensure the image does not exceed the viewport height */
    object-fit: contain; /* Scale the image to maintain aspect ratio without cropping */
    display: block;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 30px;
    color: #444;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 50%;
}

.left {
    left: 0;
    margin-left: 10px;
}

.right {
    right: 0;
    margin-right: 10px;
}

/* Loading indicator */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 300px;
    font-size: 18px;
    color: #666;
    text-align: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .slide {
        flex: 0 0 100%; /* Makes only 1 image visible on smaller screens */
    }

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 24px; /* Adjust if necessary but keep it small enough to fit within the circle */
    color: #444; /* Arrow color */
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    border-radius: 50%; /* This makes the background circle */
    width: 50px; /* Ensure width and height are equal for a perfect circle */
    height: 50px; /* Ensure width and height are equal for a perfect circle */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0; /* Remove padding to prevent it from affecting the shape */
}
    
     .slide img {
        max-height: 80vh; /* Further adjust for mobile if necessary */
    }

.left, .right {
    /* Ensure any specific positioning does not interfere with the shape */
    margin: 0 10px; /* Adjust margin instead of padding for positioning */
}
}