/*--------------------------------------------------------------
# News Section
--------------------------------------------------------------*/
.news .news-item {
    background: var(--surface-color);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.news .news-item .news-img img {
    border-radius: 4px;
    width: 100%; /* Робить зображення адаптивним до ширини колонки */
}

.news .news-item .title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px; /* Зменшений відступ, щоб наблизити дату */
}

.news .news-item .title a {
    color: var(--heading-color);
    transition: 0.3s;
}

.news .news-item .title a:hover {
    color: var(--accent-color);
}

/* Стилі для нового поля дати */
.news .news-item .news-date {
    font-size: 14px;
    color: var(--default-color);
    opacity: 0.7;
    margin-bottom: 15px;
    display: block;
}

.news .news-item .content {
    margin-bottom: 15px;
}

.news .news-item .read-more a {
    color: var(--accent-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.news .news-item .read-more a i {
    margin-left: 8px;
    font-size: 16px;
}

.news .news-item .read-more a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/* Адаптивні стилі для мобільних пристроїв */
@media (max-width: 991.98px) { /* Точка зупину Bootstrap для великих екранів */
    .news .news-item .news-img {
        margin-top: 20px; /* Додає відступ зверху для зображення, коли колонки стають одна під одною */
    }
}