body {
    background-color: #f4f5f6 !important; /* Светло-серый мягкий фон сайта */
    color: #2d3238;
}

/* 2. Шапка сайта (Header) */
.container-menu-desktop {
    background-color: #1a1a1a !important; /* Насыщенный темно-серый для шапки */
    border-bottom: 3px solid #d92323; /* Красная линия-акцент под шапкой */
}

.logo {
    width: 25% !important;
    height: 25% !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrap-logo {
    background-color: #1a1a1a !important; /* Графитовый блок под логотип */
    padding: 15px 20px;
    border-bottom: 1px solid #40464d;
}


/* Ссылки соцсетей */
.social-btns a {
    color: #a0a6b0 !important;
    transition: all 0.3s ease;
}
.social-btns a:hover {
    color: #d92323 !important; /* Красный при наведении */
    transform: translateY(-2px);
}

/* 3. Главное навигационное меню */
.wrap-main-nav {
    background-color: #1a1a1a !important;
}

.main-menu > li > a {
    color: #000 !important;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 15px 20px;
}

/* Эффект при наведении на пункт меню */
.main-menu > li:hover > a {
    color: #ffffff !important;
    background-color: #d92323 !important; /* Красный маркер-фон элемента */
}

/* Мобильное меню */
.wrap-header-mobile {
    background-color: #1a1a1a !important;
    border-bottom: 2px solid #d92323;
}
.menu-mobile {
    background-color: #2d3238 !important;
}
.menu-mobile a {
    color: #ffffff !important;
}
.menu-mobile a:hover {
    color: #d92323 !important;
}

.how2-cl1::before {
    background-color: #d92323 !important;
}

/* 4. Секция контента (между шапкой и футером) */
section.bg0 {
    background-color: #f4f5f6 !important;
}

/* 5. Подвал сайта (Footer) */
footer {
    border-top: 4px solid #d92323; /* Красная линия над футером */
}

footer .bg2 {
    background-color: #1a1a1a !important; /* Темно-серый подвал */
}

footer h5.f1-m-7 {
    color: #ffffff !important;
    border-right: 3px solid #d92323; /* Красный маркер возле заголовков в футере (для RTL) */
    padding-right: 10px;
    font-weight: bold;
}

/* Ссылки в футере (категории и статьи) */
footer a {
    color: #cbd5e1 !important; /* Светло-серый текст ссылок */
    transition: color 0.2s ease;
}

footer a:hover {
    color: #d92323 !important; /* Красный при наведении */
    text-decoration: none;
}

/* Разделители линий в футере */
footer .how-bor1 {
    border-bottom: 1px solid #2d3238 !important;
}

/* Самая нижняя плашка (Copyright) */
footer .bg11 {
    background-color: #0f1112 !important; 
    border-top: 1px solid #2d3238;
}
footer .bg11 span, footer .bg11 a {
    color: #718096 !important;
}
footer .bg11 a:hover {
    color: #d92323 !important;
}

/* 6. Кнопка "Наверх" (Back to top) */
.btn-back-to-top {
    background-color: #d92323 !important; /* Красная кнопка */
    color: white !important;
    transition: all 0.3s ease;
}
.btn-back-to-top:hover {
    background-color: #1a1a1a !important; /* Темнеет при наведении */
    opacity: 1;
}

/* ==========================================================================
   СТИЛИ ДЛЯ ПЕРВОЙ СЕКЦИИ ГЛАВНОЙ (BREAKING & NEWS GRID)
   ========================================================================== */

/* 1. Блок срочных новостей (Breaking News Bar) */
.container > .bg0.flex-wr-sb-c {
    background-color: #ffffff !important;
    border-right: 5px solid #d92323; /* Красный маркер справа (для RTL) */
    border-left: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Текст срочной новости */
.slide100-txt-item {
    color: #1a1a1a !important;
    font-weight: bold;
    font-family: inherit;
}

/* 2. Общие настройки сетки картинок (News Grid) */
.how1 {
    position: relative;
    overflow: hidden;
    border-radius: 6px; /* Аккуратное скругление углов у плиток */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Тень для объема */
}

/* Тёмный градиент поверх фото, чтобы белый текст всегда легко читался */
.how1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 17, 18, 0.9) 0%, rgba(15, 17, 18, 0.2) 60%, rgba(15, 17, 18, 0) 100%);
    z-index: 1;
    transition: all 0.4s ease;
}

/* 3. Эффект при наведении на плитку новостей (Hover Effect) */
.how1:hover::before {
    background: linear-gradient(to top, rgba(217, 35, 35, 0.85) 0%, rgba(15, 17, 18, 0.4) 70%, rgba(15, 17, 18, 0.1) 100%);
    /* При наведении нижняя часть плитки плавно окрашивается в полупрозрачный красный */
}

/* Плавное легкое увеличение картинки при наведении */
.bg-img1 {
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.how1:hover .bg-img1 {
    transform: scale(1.03);
}

/* 4. Контент внутри плиток (Заголовки и Категории) */
.flex-col-e-s {
    position: relative;
    z-index: 2; /* Поднимаем текст над градиентом-подложкой */
}

/* Бейджи категорий (например: Политика, Спорт) */
.how1-child2.f1-s-2 {
    background-color: #d92323 !important; /* Наш фирменный красный */
    color: #ffffff !important;
    border: none !important; /* Убираем стандартную рамку */
    border-radius: 3px;
    padding: 3px 10px !important;
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.how1-child2.f1-s-2:hover {
    background-color: #ffffff !important;
    color: #d92323 !important; /* Инверсия при наведении на саму категорию */
}

/* Заголовки новостей на плитках */
.how-txt1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.4 !important;
    transition: color 0.3s ease;
}

/* Подсветка заголовка при наведении */
.how1:hover .how-txt1 {
    color: #ffffff !important; /* Остается белым, так как фон станет красноватым */
    text-decoration: none;
}

/* Небольшие отступы между колонками сетки */
.p-rl-1 {
    padding-left: 3px !important;
    padding-right: 3px !important;
}
.p-b-2 {
    padding-bottom: 6px !important;
}

/* ==========================================================================
   КОРРЕКЦИЯ ОТОБРАЖЕНИЯ ТЕКСТА ВНУТРИ ПЛИТОК НОВОСТЕЙ
   ========================================================================== */

/* 1. Увеличиваем безопасные отступы внутри всех блоков новостей */
.flex-col-e-s {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Прижимает к низу, но с учетом padding */
    padding-bottom: 30px !important; /* Приподнимаем текст повыше от самого края */
    padding-right: 20px !important;  /* Отступ справа для арабского текста */
    padding-left: 20px !important;   /* Отступ слева */
    box-sizing: border-box !important;
}

/* 2. Настройки для заголовков, чтобы они не выпадали за пределы картинок */
.how-txt1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3; /* Максимум 3 строки для больших заголовков, дальше троеточие */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
}

/* Специфичное ограничение для маленьких плиток (снизу слева), где места еще меньше */
.size-a-5 .how-txt1 {
    -webkit-line-clamp: 2; /* В маленьких плитках показываем строго максимум 2 строки */
    font-size: 16px !important; /* Немного уменьшаем шрифт для идеальной посадки */
}

/* 3. Делаем небольшой зазор между бейджем категории и заголовком */
.how1-child2.f1-s-2 {
    margin-bottom: 12px !important;
    display: inline-block !important;
}

/* ==========================================================================
   СТИЛИ ДЛЯ ВИДЕО-СЕКЦИИ (VIDEO NEWS BLOCK)
   ========================================================================== */

/* 1. Заголовок секции (Плитка / Лента рубрики) */
.how2.how2-cl1 {
    border-bottom: 2px solid #2d3238 !important; /* Темная линия во всю ширину */
    display: flex !important;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.how2.how2-cl1 a {
    color: #1a1a1a !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    position: relative;
    padding-right: 15px; /* Отступ для RTL под маркер */
    text-decoration: none;
}

/* Красный вертикальный маркер справа от названия секции (для RTL) */
.how2.how2-cl1 a::before {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 4px;
    background-color: #d92323; /* Наш фирменный красный */
    border-radius: 2px;
}

/* 2. Обёртка карточки видео и скругление углов */
.m-b-45.rounded {
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Легкая тень */
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    border-radius: 8px !important; /* Форсируем скругление всей карточки */
}

.m-b-45.rounded:hover {
    box-shadow: 0 8px 25px rgba(217, 35, 35, 0.15); /* Красненькая тень при наведении */
    transform: translateY(-4px); /* Карточка слегка приподнимается */
}

/* 3. Кнопка воспроизведения YouTube (Play Button Overlay) */
.wrap-pic-w.pos-relative button {
    background-color: rgba(0, 0, 0, 0.4) !important; /* Полупрозрачный темный фон на картинке */
    transition: all 0.3s ease !important;
}

.wrap-pic-w.pos-relative button span.fa-youtube {
    color: #ffffff !important;
    font-size: 48px !important; /* Делаем иконку YouTube крупнее и заметнее */
    background: #d92323; /* Красный фирменный фон для кнопки */
    padding: 10px 18px;
    border-radius: 50%; /* Превращаем в идеальный круг */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Эффект при наведении на карточку — кнопка YouTube реагирует */
.m-b-45.rounded:hover .wrap-pic-w.pos-relative button {
    background-color: rgba(217, 35, 35, 0.2) !important; /* Картинка слегка заливается красным */
}

.m-b-45.rounded:hover .wrap-pic-w.pos-relative button span.fa-youtube {
    background: #ffffff !important;
    color: #d92323 !important; /* Инверсия цветов кнопки при наведении */
    transform: scale(1.1); /* Кнопка слегка увеличивается */
}

/* 4. Нижняя текстовая подложка под видео (`bg3`) */
.p-tb-16.p-rl-25.bg3 {
    background-color: #2d3238 !important; /* Перекрашиваем в строгий графитовый цвет */
    padding: 18px 20px !important;
}

.p-tb-16.p-rl-25.bg3 h5 a {
    color: #ffffff !important; /* Белый читаемый текст заголовка видео */
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничиваем название видео двумя строками */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.p-tb-16.p-rl-25.bg3 h5 a:hover {
    color: #ff4d4d !important; /* Светло-красный ховер на темном фоне */
    text-decoration: none;
}

/* ==========================================================================
   ОСНОВНАЯ СЕКЦИЯ: ЛЕНТЫ КАТЕГОРИЙ И САЙДБАР (MAIN CONTENT & SIDEBAR)
   ========================================================================== */

/* 1. Общие заголовки блоков (how2) */
.how2.how2-cl1 {
    border-bottom: 2px solid #2d3238 !important; /* Строгая графитовая линия */
    padding-bottom: 8px;
    margin-bottom: 25px;
}

.how2.how2-cl1 h3, 
.how2.how2-cl1 h3 a {
    color: #1a1a1a !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    position: relative;
    padding-right: 15px; /* Отступ справа под красный маркер для RTL */
    text-decoration: none;
}


/* 2. Левая часть: Сетка новостей в категориях */
.blocks .m-b-30 {
    background: #ffffff;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.blocks .m-b-30:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}

/* Заголовки новостей в категориях */
.blocks h5 a.f1-m-2 {
    color: #2d3238 !important;
    font-weight: 700 !important;
    transition: color 0.2s ease;
}

.blocks h5 a.f1-m-2:hover {
    color: #d92323 !important; /* Красный при наведении */
    text-decoration: none;
}

/* Мета-данные (Категория и Дата) */
.blocks .cl8, .blocks .cl8 a {
    color: #718096 !important;
    font-size: 13px;
}
.blocks .cl8 a:hover {
    color: #d92323 !important;
}

/* Картинки-превью */
.blocks img.rounded {
    border-radius: 4px !important;
    object-fit: cover;
}

/* 3. Сайдбар: Облако тегов (أهم الأحداث) */
.flex-wr-s-s a.bo-1-rad-20 {
    background-color: #e2e8f0 !important; /* Светло-серый нейтральный фон */
    color: #4a5568 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important; /* Делаем аккуратные прямоугольные теги вместо овалов */
    font-weight: 600;
    font-size: 13px !important;
    transition: all 0.2s ease;
}

.flex-wr-s-s a.bo-1-rad-20:hover {
    background-color: #d92323 !important; /* Красный фон при наведении */
    color: #ffffff !important;
    border-color: #d92323 !important;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(217, 35, 35, 0.2);
}

/* 4. Сайдбар: Лента топ-новостей (شريط الأخبار) */
.p-t-35 li.flex-wr-sb-s {
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 12px !important;
    margin-bottom: 12px;
}
.p-t-35 li.flex-wr-sb-s:last-child {
    border-bottom: none;
}

/* Стилизация кубиков с цифрами (1, 2, 3...) */
.size-a-8.bg9 {
    background-color: #d92323 !important; /* Красный цвет для цифр популярного */
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
}

/* Ссылки на новости в ленте */
li.flex-wr-sb-s a.size-w-3 {
    color: #2d3238 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.4;
    transition: color 0.2s ease;
}
li.flex-wr-sb-s a.size-w-3:hover {
    color: #d92323 !important;
    text-decoration: none;
}

/* 5. Сайдбар: Виджеты соцсетей (تابعونا على) */
.bg-facebook { background-color: #1877f2 !important; }
.bg-twitter { background-color: #1da1f2 !important; }

/* Кнопки-иконки соцсетей */
.p-t-50 li .size-a-8 {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    transition: transform 0.2s ease;
}
.p-t-50 li:hover .size-a-8 {
    transform: scale(1.08);
}

/* Текст количества подписчиков */
.f1-s-8.cl3 {
    color: #4a5568 !important;
    font-weight: 600;
}

/* Ссылка-кнопка "Читать / Подписаться" (تابع) */
.p-t-50 size-w-3 a.fs-20 {
    font-size: 15px !important;
    font-weight: 700;
    color: #d92323 !important; /* Красная текстовая кнопка */
    border-bottom: 1px dashed #d92323;
    padding-bottom: 2px;
}
.p-t-50 size-w-3 a.fs-20:hover {
    color: #1a1a1a !important;
    border-bottom-color: #1a1a1a;
    text-decoration: none;
}


/* ==========================================================================
   ФИНАЛЬНАЯ СЕКЦИЯ: САМОЕ ЧИТАЕМОЕ (MOST READ LOWER BLOCK)
   ========================================================================== */

/* 1. Обёртка каждой карточки в нижней сетке */
.col-sm-3 .m-b-45 {
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

/* Эффект при наведении на карточку */
.col-sm-3 .m-b-45:hover {
    transform: translateY(-5px); /* Карточка плавно идет вверх */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

/* 2. Настройка изображений */
.col-sm-3 .wrap-pic-w img.rounded {
    border-radius: 6px !important; /* Красивое скругление картинок */
    object-fit: cover;
    width: 100%;
    height: 160px; /* Фиксированная высота для картинок, чтобы сетка была строго в одну линию */
}

/* 3. Заголовки самых читаемых новостей */
.col-sm-3 .p-t-16 h5 a.f1-m-3 {
    color: #2d3238 !important; /* Строгий графитовый */
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-top: 5px;
    
    /* Обрезаем длинные заголовки, чтобы карточки не прыгали по высоте */
    display: -webkit-box !important;
    -webkit-line-clamp: 3; /* Строго максимум 3 строки */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    
    transition: color 0.2s ease;
}

/* Ховер на заголовок */
.col-sm-3 .p-t-16 h5 a.f1-m-3:hover {
    color: #d92323 !important; /* Наш фирменный красный */
    text-decoration: none;
}

/* 4. Мета-данные под заголовком (Категория и Дата) */
.col-sm-3 .cl8 {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #718096 !important;
}

.col-sm-3 .cl8 a {
    color: #d92323 !important; /* Делаем название категории красным и заметным */
    font-weight: 600;
    transition: color 0.2s ease;
}

.col-sm-3 .cl8 a:hover {
    color: #1a1a1a !important; /* Затемнение при наведении на категорию */
    text-decoration: none;
}

.col-sm-3 .f1-s-3 {
    color: #a0aec0 !important; /* Приглушенный цвет для даты */
}

/* ==========================================================================
   СТИЛИ ДЛЯ СЕРО-КРАСНОЙ ПАГИНАЦИИ (CUSTOM LARAVEL PAGINATION)
   ========================================================================== */

/* Контейнер пагинации */
.flex-wr-s-c.m-rl--7.p-t-15 {
    display: flex !important;
    justify-content: center !important; /* Центрируем пагинацию по центру ленты новостей */
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    gap: 5px; /* Небольшой фиксированный зазор между кнопками */
}

/* Базовый стиль для каждого элемента пагинации */
.pagi-item {
    width: 40px !important;
    height: 40px !important;
    background-color: #ffffff !important; /* Белый фон в обычном состоянии */
    color: #2d3238 !important; /* Графитовый цвет цифр */
    border: 1px solid #cbd5e1 !important; /* Легкая серая рамка */
    border-radius: 6px !important; /* Современное аккуратное скругление */
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Эффект при наведении на обычную цифру (Hover) */
.pagi-item:hover:not(.disabled):not([disabled]) {
    background-color: #2d3238 !important; /* Перекрашивается в графитовый */
    color: #ffffff !important; /* Цифра становится белой */
    border-color: #2d3238 !important;
    transform: translateY(-2px); /* Легкий интерактивный подъем */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Активная страница или активные стрелки навигации (.pagi-active) */
.pagi-item.pagi-active:not(.disabled):not([disabled]) {
    background-color: #d92323 !important; /* Наш фирменный ярко-красный цвет */
    color: #ffffff !important;
    border-color: #d92323 !important;
    cursor: default;
}

/* Отдельный ховер для активной страницы, чтобы она не прыгала */
.pagi-item.pagi-active:not(.disabled):not([disabled]):hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(217, 35, 35, 0.2);
}

/* Иконки-стрелки внутри кнопок Bootstrap Icons */
.pagi-item i {
    font-size: 16px !important;
    stroke-width: 2px; /* Делаем стрелочки чуть толще и заметнее */
}

/* Состояние заблокированной кнопки (первая или последняя страница) */
.pagi-item.disabled, 
.pagi-item[disabled],
.pagi-item(disabled="disabled") {
    background-color: #f1f5f9 !important; /* Мягкий светло-серый фон */
    color: #94a3b8 !important; /* Блеклые серые стрелки */
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important; /* Указатель мыши в виде запрещающего знака */
    pointer-events: none; /* Полностью отключаем кликабельность */
    box-shadow: none !important;
    transform: none !important;
}