.video-gallery {
    margin: 0 auto;
    margin-top: 30px;
    width: 940px; /* Фиксированная ширина контейнера */
    height: 560px; /* Фиксированная высота контейнера */
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000; /* Фоновый цвет контейнера */
    margin-bottom: 30px;
}

.video-gallery video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Весь контент видео будет виден */
}

.video-controls {
    position: absolute;
    bottom: 0; /* Положение управления теперь внизу контейнера */
    width: calc(100% - 20px); /* С учетом отступов */
    background: rgba(0, 0, 0, 0.7); /* Сделаем фон немного темнее */
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Оптимизация расстояния */
    padding: 10px; /* Внутренний отступ */
    height: 40px; /* Высота панели управления */
}

.video-controls.hidden {
    display: none;
}

.video-controls button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 10px; /* Добавим немного отступа по бокам кнопок */
}

.progress-container {
    flex-grow: 1; /* Заставляет контейнер растягиваться и занимать все доступное пространство */
    padding: 0 15px; /* Отступы справа и слева от полосы прогресса, если они нужны */
    margin-bottom: 8px;
}
.video-controls svg {
    fill: white; /* Цвет иконок */
    width: 20px; /* Уменьшенный размер иконок */
    height: 20px;
}
.play-pause__container{
    display: flex;
    align-items: center;
}
.voice-and-screen__button{
    display: flex;
    align-items: center;
}

/* Адаптация размеров и расстояний для мобильных устройств */
@media screen and (max-width: 640px) {
    .video-gallery {
        width: calc(100% - 5px); /* Фиксированная ширина контейнера */
        height: 320px; /* Фиксированная высота контейнера */
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000; /* Фоновый цвет контейнера */
    }
    .video-gallery {
        height: auto;
        border-radius: 10px; /* Меньше радиус для мобильных */
    }

    .video-controls {
        margin: 0 0 !important;
        width: 100%;
        padding: 0 !important;
    }

    .video-controls svg {
        width: 16px; /* Уменьшенный размер иконок для мобильных */
        height: 16px;
    }

    .progress-container,
    .voice-and-screen__button {
        padding: 0 5px; /* Уменьшенные отступы для мобильных */
    }

    #volumeControl {
        width: 40px !important;
    }
}


#progressBar, #volumeControl {
    -webkit-appearance: none; /* Убираем стандартное оформление */
    appearance: none;
    height: 4px; /* Тонкая полоса прогресса */
    border-radius: 2px; /* Скругленные края для полосы прогресса */
}
#progressBar, #volumeControl {
    /* Общие стили для полосы прогресса и контроля громкости */
    width: 100%; /* Теперь занимает весь доступный размер контейнера */
    margin: 0 10px; /* Добавляем отступы с обеих сторон */
}

#progressBar {
    /* Стили для полосы прогресса */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    height: 4px; /* Ширина полосы прогресса */
    cursor: pointer;
}

#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
}

#progressBar::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: red;
    cursor: pointer;
}

#progressBar::-ms-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
}


#progressBar::-webkit-slider-runnable-track,
#progressBar::-moz-range-track,
#progressBar::-ms-track {
    background-color: #aaa;
}

#volumeControl {
    /* Стили для контроля громкости */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 80px; /* Фиксированная ширина для ползунка громкости */
    height: 4px;
    cursor: pointer;
}

#volumeControl::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

#volumeControl::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

#volumeControl::-ms-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

#progressBar::-webkit-slider-thumb, #volumeControl::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; /* Размер бегунка */
    height: 12px; /* Размер бегунка */
    border-radius: 50%; /* Круглый бегунок */
    background: red; /* Цвет бегунка */
}

#progressBar::-moz-range-thumb, #volumeControl::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: red;
}




#volumeControl {
    width: 80px; /* Фиксированная ширина для ползунка громкости */
}