/* استایل کلی ردیف‌ها */
    .row {
        display: flex;
        flex-wrap: wrap;
        margin: -10px; /* برای جبران margin عناصر داخلی */
    }

    /* استایل لایت‌باکس‌های بالا */
    .top-news {
        display: flex;
        margin-bottom: 20px;
    }

    .top-news-item {
        flex: 1;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        height: 300px;
        margin: 10px; /* ایجاد فاصله بین لایت‌باکس‌های بالا */
    }

    .top-news-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.8); /* افکت دودی */
    }

    .top-news-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
        padding: 20px;
        color: #fff;
        text-align: right;
    }

    .top-news-overlay h4 {
        font-size: 1rem; /* کاهش اندازه فونت */
        margin-bottom: 10px;
        position: relative;
    }

    .top-news-overlay h4::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #cd2122; /* خط قرمز */
        transition: width 0.3s ease;
    }

    .top-news-item:hover .top-news-overlay h4::after {
        width: 100%; /* نمایش خط قرمز هنگام hover */
    }

    .top-news-overlay p {
        font-size: 0.8rem; /* کاهش اندازه فونت */
        color: #ddd;
    }

    /* استایل لایت‌باکس‌های پایین */
    .news-item {
        flex: 1 1 calc(25% - 20px); /* محاسبه عرض با احتساب margin */
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        height: 200px;
        margin: 10px; /* ایجاد فاصله بین لایت‌باکس‌های پایین */
    }

    .news-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.8); /* افکت دودی */
    }

    .news-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
        padding: 20px;
        color: #fff;
        text-align: right;
    }

    .news-overlay h4 {
        font-size: 0.9rem; /* کاهش اندازه فونت */
        margin-bottom: 10px;
        position: relative;
    }

    .news-overlay h4::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #cd2122; /* خط قرمز */
        transition: width 0.3s ease;
    }

    .news-item:hover .news-overlay h4::after {
        width: 100%; /* نمایش خط قرمز هنگام hover */
    }

    .news-overlay p {
        font-size: 0.9rem; /* کاهش اندازه فونت */
        color: #ddd;
    }