.s-slider-container {
    width: 100%;
    max-width: 600px;
       height: 500px;
    overflow: hidden;
    
    position: relative;
}

.s-slider-wrapper {
    position: relative;
}

.s-slide {
    min-width: 100%;
    height: 500px;
    opacity: 0; /* Initially all slides are transparent */
    position: absolute; /* Position slides absolutely to stack them */
    transition: transform 2s ease, opacity 2s ease; /* Smooth transition for fade and zoom */
    transform: scale(1); /* Start with a zoom-out effect */
}

.s-slide-active {
    opacity: 1; /* Active slide is fully visible */
    transform: scale(1); /* Zoom in effect */
}

.s-product-image {
    width: 100%;
    height: 500px;
    object-fit: cover; /* Make images cover the slide area */
}


        .s-slider-prev, .s-slider-next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(235, 229, 229, 0.49);
            color: #23a728;
            border: none;
            padding: 5px;
            z-index: 10;
        }

        .s-slider-next {
            right: 0;
        }

        /* Style for navigation dots */
        .s-dot-container {
            text-align: center;
            padding-top: 10px;
        }

        .s-dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .s-active, .s-dot:hover {
            background-color: #717171;
        }