#slider-container {
    width: 100%; /* Полная ширина экрана */
    height: 100%; /* Задай нужную высоту */
    overflow: hidden; /* Скрываем элементы за пределами контейнера */
    position: relative;
}

/* для слайдов с аудио */
.slider-wrapper {
    display: flex; /* Все слайды располагаются в ряд */
    transition: transform 0.3s ease-in-out; /* Анимация пролистывания */
    overflow: hidden; /* Скрываем элементы за пределами контейнера */
    position: relative;
    width: calc(100% * 3); /* Общее расстояние для всех слайдов в одной строке */
}

.slide1, .slide2, .slide3 {
    flex-shrink: 0; /* Элементы не сжимаются */
    width: 100%; /* Каждый слайд занимает всю ширину контейнера */
    height: 100%; /* Задай высоту для слайдов */
    overflow: hidden; /* Скрываем элементы за пределами контейнера */
    position: relative;
}

/* точки для слайдов */
.dots, .dots2, .dots3, .dots4 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.dot, .dot2, .dot3, .dot4 {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #727272;
    margin: 0 5px;
    cursor: pointer;
}

.dot.active, .dot2.active, .dot3.active, .dot4.active {
    background-color: #F4CFE1;
}


/* для слайдов Как мы создаем вашу аудиозапись */
.slider-wrapper2 {
    display: flex; /* Все слайды располагаются в ряд */
    transition: transform 0.3s ease-in-out; /* Анимация пролистывания */
    overflow: hidden; /* Скрываем элементы за пределами контейнера */
    position: relative;
    width: calc(100% * 5); /* Общее расстояние для всех слайдов в одной строке */
}

.cart1, .cart2, .cart3, .cart4 {
    flex-shrink: 0; /* Элементы не сжимаются */
    width: 100%; /* Каждый слайд занимает всю ширину контейнера */
    height: 100%; /* Задай высоту для слайдов */
    overflow: hidden; /* Скрываем элементы за пределами контейнера */
    position: relative;
}

/* для слайдов Как мы создаем вашу аудиозапись */
.slider-wrapper3, .slider-wrapper4, .slider-wrapper5 {
    display: flex; /* Все слайды располагаются в ряд */
    transition: transform 0.3s ease-in-out; /* Анимация пролистывания */
    overflow: hidden; /* Скрываем элементы за пределами контейнера */
    position: relative;
    width: calc(100% * 5); /* Общее расстояние для всех слайдов в одной строке */
}

.price1, .price2, .review5, .review6, .review7, .review9, .review10, .review20, .review30, .review40, .review50, .review60, .review70, .review80 {
    flex-shrink: 0; /* Элементы не сжимаются */
    width: 100%; /* Каждый слайд занимает всю ширину контейнера */
    height: 100%; /* Задай высоту для слайдов */
    overflow: hidden; /* Скрываем элементы за пределами контейнера */
    position: relative;
}





.review-container {
    display: flex;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    position: relative;
    width: calc(100% * 5); /* Общее расстояние для всех слайдов в одной строке */
    cursor: grab;
}

.review-track {
    display: flex;
    gap: 20px;
    animation: marquee 70s linear infinite;
    will-change: transform;
    overflow-x: auto;
}

.review1, .review2, .review3, .review4, .review5, .review6, .review7, .review8 {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

@keyframes marquee {
    from {
        transform: translateX(100% * 5);
    }
    to {
        transform: translateX(-100%);
    }
}

.review-container.dragging .review-track {
    animation-play-state: paused;
    cursor: grabbing;
}