/* ======= Загальний контейнер курсу ======= */

.unique-course-container-987 {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px;

    transition: transform 1s ease, box-shadow 0.3s ease;

}

/* ======= Зображення курсу ======= */
.unique-course-image {
    width: 400px;
    height: auto;
    border-radius: 10px;
    margin-right: 5px;

}

/* ======= Деталі курсу ======= */
.course-details {
    flex: 1;
    max-width: 800px;

}


.course-details h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.course-details p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.course-player iframe {
    width: 100%; /* Full width for responsive design */
    aspect-ratio: 16/9; /* Responsive aspect ratio */
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.progress-bar-container {
        position: relative;
        width: 100%;
        height: 30px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 10px;
}

.progress-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Обрізає фрагменти, що виходять за межі */
    border-radius: 10px; /* Скруглення для узгодженості з контейнером */
}


.progress-fragment {
    position: absolute;
    height: 100%;
    background-color: #12486B; /*  #0E8388 */

    border-right: 1px solid #fff;
    box-sizing: border-box; /* Додає облік границь всередині ширини */

}

.progress-markers {
        position: absolute;
        width: 100%;
        height: 100%;


}

.progress-marker {
    position: absolute;
    height: 100%;
    width: 5px;
    background-color: #0E8388 ;
    box-sizing: border-box;
    cursor: pointer; /* Змінює курсор на руку при наведенні */
}



/* ======= Адаптивність для малих екранів ======= */
/* Адаптивність */
@media (max-width: 768px) {
    .unique-course-container-987 {
            flex-direction: column !important;
    }

    .unique-course-image {
        width: 100%; /* Зображення займає всю ширину */
        height: auto;
    }

    .course-details {
        max-width: 100%; /* Текст також розтягується */
    }

    .course-details h2 {
        font-size: 1rem; /* Ще менший розмір заголовків */
    }

    .course-details p {
        font-size: 0.9rem; /* Менший розмір тексту */
    }
}