@font-face {
    font-family: 'farhang';
    src: url('farhang.ttf') format('truetype');
}

body {
    font-family: 'Farhang', sans-serif;
    font-feature-settings: "lnum" 0, "tnum" 0;
    background-image: url(/img/newsbg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    backdrop-filter: blur(5px);
    color: #ffffff;
}

.news-item {
    background-color: #495057;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.news-image {
    max-width: 400px;
    height: auto;
    border-radius: 8px;
    margin: 10px;
}
.modal-body {
    max-height: 70vh; /* محدودیت ارتفاع برای محتوای مودال */
    overflow-y: auto; /* فعال کردن اسکرول عمودی */
}

.continue-link {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

.date, .author {
    color: #adb5bd;
}

.header-section {
    height: 33vh;
    background-image: url('~/img/header-bg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

/* استایل‌های موبایل */
@media (max-width: 768px) {
    body {
   
        background-position: center; /* قرار دادن بک‌گراند در مرکز */
        backdrop-filter: none; /* غیرفعال کردن افکت بلور در موبایل */
        background-color: rgba(0, 0, 0, 0.7); /* رنگ پس‌زمینه با شفافیت */

    }.news-item {
        flex-direction: column; /* نمایش عمودی در موبایل */
        padding: 10px;
        margin-bottom: 10px;
    }

    .news-image {
        width: 100%;
        max-width: 100%;
        margin: 0 0 10px 0;
    }

    .news-item.flex-row-reverse {
        flex-direction: column !important; /* اعمال flex-row-reverse فقط در دسکتاپ */
    }

    .news-item .ms-3 {
        margin-left: 0 !important;
    }

    .header-section {
        height: 20vh; /* کاهش ارتفاع هدر در موبایل */
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    p {
        font-size: 0.9rem;
    }

    .date {
        font-size: 0.8rem;
    }
   
}