/* News section: home page "Latest News", /Home/News and /Home/NewsDetails.
   Same card, colors and list style as the original News page; logical properties so it also works in Arabic (rtl). */

.news-heading {
    color: #4B085B;
    font-size: 40px;
}

.Media-Content {
    border: 1px solid #e0e0e0;
    background: #fafaff;
    height: 100%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .Media-Content .Img-content {
        position: relative;
        aspect-ratio: 1920 / 700;
        overflow: hidden;
    }

        .Media-Content .Img-content img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease-in;
        }

    .Media-Content:hover .Img-content img {
        transform: scale(1.05);
    }

    .Media-Content .Img-content .Date {
        clip-path: polygon(0 24%, 100% 0, 100% 100%, 0% 100%);
        background-color: #66007d;
        position: absolute;
        inset-inline-end: 0;
        bottom: 0;
    }

        .Media-Content .Img-content .Date span {
            display: block;
            color: #fff;
            font-weight: bold;
            font-size: 14px;
            padding: 12px 14px 8px;
        }

    .Media-Content .content-card {
        padding: 14px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

        .Media-Content .content-card h3 {
            color: #66007d;
            font-size: 20px;
            margin-bottom: 8px;
        }

        .Media-Content .content-card p {
            color: #555;
            font-size: 14px;
            margin-bottom: 12px;
        }

        .Media-Content .content-card a {
            text-decoration: none;
            transition: 0.3s ease-in;
            color: #66007d !important;
        }

            .Media-Content .content-card a:hover {
                color: #1fae67f7 !important;
                cursor: pointer;
            }

        .Media-Content .content-card .Media-Text {
            margin-top: auto;
            font-size: 14px;
            font-weight: bold;
        }

.news-btn {
    display: inline-block;
    background: #66007d;
    color: #fff !important;
    padding: 10px 28px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s ease-in;
}

    .news-btn:hover {
        background: #1fae67f7;
    }

.news-empty {
    color: #666;
    font-size: 18px;
}

.news-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .news-pagination a, .news-pagination span {
        min-width: 38px;
        padding: 6px 10px;
        border-radius: 6px;
        border: 1px solid #66007d;
        color: #66007d;
        text-decoration: none;
        text-align: center;
    }

        .news-pagination a:hover, .news-pagination .active {
            background: #66007d;
            color: #fff;
        }

.multi-News {
    text-align: start;
}

    .multi-News h2 {
        color: #66007d;
    }

    .multi-News a {
        text-decoration: none;
    }

    .multi-News .New {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #66007d;
        padding: 12px 18px;
        margin: 6px 0;
        border-radius: 10px;
        transition: 0.3s ease-in;
    }

        .multi-News .New h3 {
            color: #fff;
            font-size: 20px;
            margin: 0;
        }

        .multi-News .New .New-date {
            color: #e3d3ea;
            font-size: 13px;
        }

        .multi-News .New i {
            font-size: 28px;
            color: #fff;
        }

        .multi-News .New:hover {
            background: #1fae67f7;
        }

[dir="rtl"] .multi-News .New i, [dir="rtl"] .news-arrow {
    transform: scaleX(-1);
}

.news-details h1 {
    color: #66007d;
}

.news-details .news-breadcrumb {
    font-size: 14px;
    color: #888;
}

    .news-details .news-breadcrumb a {
        color: #66007d;
        text-decoration: none;
    }

.news-details .news-date {
    color: #1fae67;
    font-size: 15px;
}

.news-details .news-image {
    border-radius: 15px;
}

.Text-Details p {
    color: #333333;
}