.slider-container {
    position: relative;
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .slider-container img {
        width: 100%;
        height: auto;
        display: block;
        transition: opacity 1s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

        .slider-container img.active {
            opacity: 1;
            position: relative;
        }


.slider-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: rgba(0, 128, 128, 0.7);
    animation: progressSlide 4s linear infinite;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 10;
}

@keyframes progressSlide {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}