.character-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    padding: 80px 0;
    position: relative;
    flex-wrap: wrap;
}

    .character-section:not(:last-of-type)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 5px;
        background-color: var(--secondary-color);
    }

    /* الاتجاه المعاكس */
    .character-section.two {
        flex-direction: row-reverse;
    }

/* -----------------------------
   ميديا رئيسية
------------------------------ */
.media-container {
    width: 50%;
    text-align: center;
}

    .media-container .main-media {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        overflow: hidden;
        margin: auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.3);
        position: relative;
    }

        .media-container .main-media img,
        .media-container .main-media video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 50%;
            transition: 0.5s;
        }

        .media-container .main-media video {
            background-color: black;
        }

/* -----------------------------
   محتوى النصوص
------------------------------ */
.character-section .content {
    width: 45%;
}

    .character-section .content h2 {
        font-size: 3rem;
        font-weight: 700;
        color: var(--secondary-color);
        margin-bottom: 20px;
    }

    .character-section .content p {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    /* -----------------------------
   العناصر المصغرة تحت الوصف
------------------------------ */
    .character-section .content .sub-media {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

        .character-section .content .sub-media img,
        .character-section .content .sub-media video {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 15px;
            cursor: pointer;
            transition: 0.3s;
            border: 2px solid transparent;
        }

            .character-section .content .sub-media img:hover,
            .character-section .content .sub-media video:hover {
                transform: scale(1.05);
                border-color: var(--primary-color);
            }

.active-thumb {
    transform: scale(1.1);
    border: 2px solid var(--primary-color);
}

/* -----------------------------
   استجابة الجوال
------------------------------ */
@media (max-width: 768px) {
    .character-section {
        flex-direction: column;
        text-align: center;
    }

        .character-section.two {
            flex-direction: column;
        }

        .media-container,
        .character-section .content {
            width: 100%;
        }

            .media-container .main-media {
                width: 250px;
                height: 250px;
            }

            .character-section .content .sub-media img,
            .character-section .content .sub-media video {
                width: 70px;
                height: 70px;
            }
}