.section {
    margin-top: 40px;
    position: relative;
    padding: 0 15px 50px;
}

.section::after {
    content: '';
    width: 90%;
    height: 2px;
    background-color: #dfdfdf;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
}

#course-info {
    display: flex;
    gap: 30px;
    align-items: center;
}

#course-info .course-logo {
    height: 100%;
    max-height: 200px;
}

#course-info .title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    gap: 5px;
    align-items: center;
}

#course-info .title::before {
    content: '“';
    font-size: 76px;
    font-family: "Sultan Koufi High";
    line-height: 100%;
    height: 50px;
}

#course-info .description {
    font-size: 22px;
    line-height: 35px;
    font-weight: 300;
    text-align: justify;
    margin: 0;
}

span.tike {
    color: #4e6458;
}
span.ouj {
    color: #ff8200;
}
span.ecsir {
    color: #00aeef;
}
span.darage {
    color: #1f7d53;
}

#videos {
    height: 350px;
    padding-bottom: 40px;
    box-sizing: content-box;
    --active-video-width: 633px;
    overflow: hidden;
}

#videos .video-box {
    position: absolute;
    height: 350px;
    width: fit-content;
    transition: 0.4s;
    filter: blur(5px);
}

#videos .video-box video {
    height: 100%;
    width: 100%;
    border-radius: 85px;
    object-fit: cover;
}

#videos .video-box.active {
    right: 50%;
    transform: translateX(50%);
    filter: blur(0px);
}

#videos .video-box.active + .video-box {
    right: 50%;
    transform: translateX(calc(calc(var(--active-video-width) / 2 * -1) - 35px));
}

#videos .video-box.active + .video-box ~ .video-box {
    right: 100%;
    transform: translateX(-100%);
}

#videos .video-box:has(+ .video-box.active) {
    right: 50%;
    transform: translateX(calc(calc(var(--active-video-width) / 2) + 35px + 100%));
}

#videos .video-box {
    width: var(--active-video-width);
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

#videos .panel {
    position: absolute;
    height: auto;
    width: var(--active-video-width);
    max-width: 100%;
    right: 50%;
    aspect-ratio: 16 / 9;
    transform: translateX(50%);
    z-index: 1;
    transition: 0.4s;
    background-image: linear-gradient(-1deg, #1a1a1a 0%, #000000be 30%, #00000000 100%);
    border-radius: 85px;
}

#videos .panel .btn {
    background-color: transparent;
}
#videos .panel .btn.play-btn {
    right: 50%;
    transform: translate(50%, -50%);
}
#videos .panel .btn.play-btn span {
    width: 95px;
    height: 95px;
}
#videos .panel .btn.play-btn span::before {
    background-color: transparent;
}

#videos .panel .btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(25%, -50%);
}

#videos .panel .btn.next-btn {
    right: 100%;
    transform: translate(75%, -50%);
}

#videos .panel .btn span {
    width: 50px;
    height: 50px;
}

#videos .panel .btn span::before {
    background-color: #fff;
}

#images {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

#images::after {
    content: none;
}

#images .image-box,
#images .getImageBtn {
    width: 25%;
    padding: 0 12px;
    margin: 12px 0;
}

#images .image-box .container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
}
#images .image-box .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#images .getImageBtn {
    position: relative;
}

#images .getImageBtn .bg {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(5px);
}

#images .getImageBtn .dots {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    display: flex;
    gap: 4px;
    z-index: 1;
    width: 100%;
    justify-content: center;
}

#images .getImageBtn .dot {
    width: 7%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    background-color: #f3d5af;
}

@media (max-width: 728px) {
    #course-info {
        flex-direction: column;
    }
    
    #images .image-box, #images .getImageBtn {
        width: 50%;
    }
}