/* ==========================================================================
   MONTSERRAT
   ========================================================================== */

/* Regular */
@font-face {
  font-family: 'Montserrat';
  src: url('./../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Montserrat';
  src: url('./../fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: 'Montserrat';
  src: url('./../fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Montserrat';
  src: url('./../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Black */
@font-face {
  font-family: 'Montserrat';
  src: url('./../fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   ROBOTO
   ========================================================================== */

/* Regular */
@font-face {
  font-family: 'Roboto';
  src: url('./../fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Roboto';
  src: url('./../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: 'Roboto';
  src: url('./../fonts/Roboto-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Roboto';
  src: url('./../fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*------ BLOG --------*/

.blog-container {
    display: grid;
    grid-template-columns: 70% 30%; /* Соотношение сторон */
    /* gap: 40px; */
    max-width: 1500px;
    margin: 15px auto;
    /* padding: 0 20px; */
    font-family: 'Montserrat', sans-serif;
}

h3 a {
  color: black;
}
h3 p {
  font-family: 'Roboto', sans-serif;
  color:#000;
}
p {
    font-size: 16px;
}
/* Статьи слева */
.articles-list {
    max-width: 1300px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
}

.article-row {
    display: flex;
    align-items: flex-start;
    /* gap: 40px; */
    /* margin-bottom: 60px; */
    padding-bottom: 25px; 
}

/* Чередование: каждый второй пост картинка слева (если нужно как в журналах) 
.article-row:nth-child(even) {
    flex-direction: row-reverse;
} */

.article-body {
    flex: 1; /* Текст занимает оставшееся место */
}

.article-image {
    flex: 0 0 45%; /* Картинка занимает 45% ширины */
}

.article-image img {
    width: 100%;
    height: auto;
    border-radius: 4px; /* Легкое скругление как на макете */
    display: block;
}

.article-title {
    display: none !important;
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase; /* Как в заголовке про клипсатор */
}

.article-title a {
    text-decoration: none;
    color: #1a1a1a;
}

.article-content {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    /* margin-bottom: 15px; */
}

.article-meta {
    font-size: 12px;
    color: #888;
    font-style: italic;
}

/* Адаптивность для телефонов */
@media (max-width: 768px) {
    .article-row {
        flex-direction: column !important;
    }
    .article-image {
        order: -1; /* Картинка всегда сверху на мобильных */
        flex: 0 0 100%;
    }
}

/* Новости справа */
.sidebar-news {
    /* max-width: 350px; */
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    padding: 0px 20px 0 20px;
}

.sidebar-section {
    margin-bottom: 30px;
}

/* Заголовок секции с синей линией */
.section-title {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    text-transform: none;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; /* Длина синей линии */
    height: 3px;
    background-color: #00704E; /* Голубой цвет из макета */
}

/* Список постов */
.posts-list {
    background-color: #f8f9fa; /* Светло-серый фон блока из макета */
    padding: 15px;
    border-radius: 4px;
}

.mini-post {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eef0f2;
}

.mini-post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.mini-post-title {
font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.mini-post-title a {
    text-decoration: none;
    color: #222;
    transition: color 0.2s;
}

.mini-post-title a:hover {
    color: #00704E;
}

/* Дата с иконкой */
.mini-post-date {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-post-date i {
    font-size: 12px;
}

/* Адаптив */
@media (max-width: 900px) {
    .blog-container { grid-template-columns: 1fr; }
}

.search-wrapper {
    display: flex;
    width: 100%;
    max-width: 400px; /* Можно настроить под ширину сайдбара */
    height: 45px;
    border: 1px solid #00704E; /* Темно-синяя рамка в цвет кнопки */
    border-radius: 4px;
    overflow: hidden; /* Чтобы углы кнопки не вылезали за рамку */
}

/* Поле ввода */
.search-wrapper input {
    flex: 1;
    border: none;
    padding: 0 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #333;
    outline: none;
}

.search-wrapper input::placeholder {
    color: #999;
}

/* Кнопка "Найти" */
.search-wrapper button {
    background-color: #00704E; /* Фирменный синий Рутекс */
    color: #ffffff;
    border: none;
    padding: 0 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-wrapper button:hover {
    background-color: #00704E; /* Затемнение при наведении */
}

/* Убираем стандартные отступы формы в WP */
.searchform-rutex {
    margin: 0 0 20px 0;
}

/* --- АДАПТИВНАЯ СЕТКА --- */

/* 1200px — Переходное состояние для ноутбуков */
@media (max-width: 1200px) {
    .blog-container {
        grid-template-columns: 65% 35%; /* Чуть расширяем сайдбар */
        gap: 30px;
    }
    .article-image {
        flex: 0 0 40%; /* Немного уменьшаем картинку */
    }
}

/* 900px - 800px — Сайдбар уходит вниз */
@media (max-width: 900px) {
    .blog-container {
        grid-template-columns: 1fr; /* Одна колонка */
        margin: 20px auto;
    }
    .sidebar-news {
        max-width: 100%; /* Сайдбар на всю ширину */
        padding: 20px 0;
        border-top: 2px solid #f0f0f0;
    }
    .search-wrapper {
        max-width: 100%; /* Поиск на всю ширину */
    }
}

/* 800px — Планшеты (горизонтальные) */
@media (max-width: 800px) {
    .article-row {
        gap: 20px;
        margin-bottom: 40px;
    }
    .article-title {
        font-size: 24px;
    }
}

/* 480px — Смартфоны (вертикальные) */
@media (max-width: 480px) {
    .blog-container {
        padding: 0 15px;
    }
    .article-row {
        flex-direction: column !important; /* Текст под картинку */
        gap: 15px;
    }
    .article-image {
        flex: 0 0 100%;
        order: -1; /* Картинка всегда первая */
    }
    .article-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .article-content {
        font-size: 14px;
    }
    .section-title {
        font-size: 18px;
    }
}

/* 320px — Маленькие смартфоны */
@media (max-width: 320px) {
    .article-title {
        font-size: 18px;
    }
    .search-wrapper button {
        padding: 0 15px; /* Уменьшаем кнопку поиска, чтобы влезла */
        font-size: 13px;
    }
    .mini-post-title {
        font-size: 13px;
    }
}

/*----- single blog ------*/
/* Базовые стили контейнера */
.rutex-layout {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    color: #333;
    line-height: 1.4;
/*     padding: 20px; */
}

/* Общие стили для строк (статьи) */
.rutex-row {
    display: flex;
/*     gap: 30px; */
/*     margin-bottom: 40px; */
    align-items: flex-start;
}

.rutex-text {
    flex: 1;
    text-align: left;
    padding: 10px
}

.rutex-text h3 {
		font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 600;
/*     text-transform: uppercase; */
    margin-top: 0;
    margin-bottom: 15px;
    color: #000;
}

.gutentor-single-item-desc {
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
}

.read-time {
    font-size: 12px;
    color: #888;
    font-style: italic;
}

.rutex-image {
    flex: 0 0 50%;
}

.rutex-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Специфические стили для промо-блока (Блок 2) */
.special-promo {
/*     background-color: #f8f8f8; */
/*     padding: 40px; */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.special-promo .rutex-text {
    text-align: center;
    width: 100%;
}

.special-promo img {
    max-width: 100%;
    height: auto;
}

/* Адаптивность */

/* 1200px (Desktop) - Стили выше */

/* 800px (Tablets) */
@media (max-width: 800px) {
    .rutex-text h3 { font-size: 20px; }
/*     .rutex-row { gap: 20px; } */
}

/* 640px (Small Tablets) */
@media (max-width: 640px) {
    .rutex-row {
        flex-direction: column;
    }
    .rutex-image {
        flex: none;
        width: 100%;
        order: -1; /* Картинка сверху для мобильных */
    }
/*     .special-promo { padding: 20px; } */
}

/* 480px (Smartphones) */
@media (max-width: 480px) {
    .rutex-text h3 { font-size: 18px; }
    .gutentor-single-item-desc { font-size: 13px; }
}

/* 320px (Small Smartphones) */
@media (max-width: 320px) {
    .rutex-layout { padding: 10px; }
    .rutex-text h3 { font-size: 16px; }
}
/* Вспомогательные классы без изменений */
.post-content { font-weight: 800; text-align: center; min-width: 100%; }
.gutentor-single-item-desc { font-family: Roboto, sans-serif; font-size: 16px; font-weight: normal; line-height: normal; }


.single-post-container {
    max-width: 800px; /* Оптимальная ширина для чтения текста */
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Montserrat', sans-serif;
    color: #333;
}

.post-header {
    text-align: left;
    /* margin-bottom: 40px; */
    color: #999999;
    text-decoration:none;
}

.post-header a{
    color: #999999;
    text-decoration:none;

}

.post-category-tag {
    display: inline-block;
    background: #f3f4f6;
    color: #6b7280;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.post-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin: 10px 0 20px;
    color: #111;
}

.post-meta {
    font-size: 14px;
    color: #9ca3af;
}

.meta-item { margin: 0 10px; }

.post-featured-image {
    margin-bottom: 40px;
}

.post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Оформление текста внутри the_content() */
.post-content {
    font-size: 18px;
    line-height: 1.8;
    color: #374151;
}

.post-content p { margin-bottom: 25px; }

.post-content h2, .post-content h3 {
    margin: 40px 0 20px;
    color: #111;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

/* Навигация */
.rutex-simple-nav {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    padding: 20px 0;
    font-family: 'Montserrat', sans-serif;
}

.mini-post-content {
  font-weight: 800;
}

.red-btn {
    display: inline-block;
    background-color: #e41d24; /* Тот самый красный из логотипа */
    color: #ffffff;
    padding: 14px 35px;
    font-weight: 800;
    font-style: italic; /* Наклон как у надписи Рутекс */
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 4px 15px; /* Скошенные углы */
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    border: none;
    margin: 20px;
}

/* Эффект при наведении */
.red-btn:hover {
    background-color: #c4191f; /* Чуть темнее при наведении */
    box-shadow: 0 4px 15px rgba(228, 29, 36, 0.4);
    transform: translateY(-2px);
}

.red-btn:active {
    transform: translateY(0);
}

/* Убираем подчеркивание ссылок WordPress */
.rutex-simple-nav a {
    text-decoration: none !important;
}

/* Адаптив для мобильных телефонов */
/* 1200px+ (Большие экраны) */
@media (min-width: 1200px) {
    .single-post-container {
        max-width: 900px; /* Чуть шире для лучшего восприятия на десктопах */
        margin: 60px auto;
    }
}

/* 800px (Планшеты в альбомной ориентации) */
@media (max-width: 800px) {
    .single-post-container {
        margin: 30px auto;
        padding: 0 30px;
    }
    .post-title {
        font-size: 32px;
    }
}

/* 640px (Планшеты в портретной ориентации) */
@media (max-width: 640px) {
    .post-title {
        font-size: 28px;
    }
    .post-content {
        font-size: 17px;
        line-height: 1.7;
    }
    .post-featured-image {
        margin-bottom: 25px;
    }
    .rutex-simple-nav {
        margin-top: 30px;
    }
}

/* 480px (Смартфоны) */
@media (max-width: 480px) {
    .single-post-container {
        padding: 0 15px;
    }
    .post-header {
        margin-bottom: 25px;
    }
    .post-title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .post-meta {
        font-size: 13px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    /* Кнопки навигации в стек */
    .rutex-simple-nav {
        flex-direction: column;
        align-items: center;
        gap: 0; /* Убираем gap, так как у кнопок есть margin 20px */
    }
    .red-btn {
        width: 100%;
        margin: 10px 0; /* Уменьшаем боковые отступы для мобилок */
        padding: 12px 20px;
        text-align: center;
    }
}

/* 320px (Малые смартфоны) */
@media (max-width: 320px) {
    .post-title {
        font-size: 20px;
        word-wrap: break-word; /* Чтобы длинные слова не ломали верстку */
    }
    .post-content {
        font-size: 16px;
    }
    .post-category-tag {
        font-size: 10px;
        padding: 4px 10px;
    }
    .red-btn {
        font-size: 12px;
        padding: 10px 15px;
    }
    .meta-item {
        margin: 0;
    }
}

/*--- meat - no-meat---*/
.product-grid-container2 {
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 15px;
    font-family: sans-serif;
}

.section-title2 {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    text-transform: none;
}
.section-title2::after {
  content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #00704E;
}

.posts-grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки в ряд */
    gap: 20px;
    margin-bottom: 40px;
}

.post-card2 {
    display: flex;
    flex-direction: column;
}

.post-thumbnail2 img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Чтобы картинки были одинаковой высоты */
    border-radius: 4px;
}

.post-title2 {
    font-size: 16px;
    line-height: 1.4;
    margin: 15px 0 10px;
}

.post-title2 a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

.reading-time2 {
    font-size: 12px;
    color: #888;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .posts-grid2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .posts-grid2 { grid-template-columns: 1fr; }
}
/* Базовые стили контейнера */
.product-grid-container2 {
    max-width: 1500px;
    margin: 0 auto;
    /* padding: 15px; */
    box-sizing: border-box;
}

/* Сетка по умолчанию (Desktop > 1200px) */
.posts-grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.post-thumbnail2 img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10; /* Поддерживает пропорции как на картинке */
    object-fit: cover;
    display: block;
}

.post-title2 {
    font-size: 16px;
    margin: 12px 0 8px;
    line-height: 1.3;
}

/* --- АДАПТИВНАЯ ВЕРСТКА --- */

/* 1. Планшеты и небольшие ноутбуки (до 1200px) */
@media screen and (max-width: 1200px) {
    .product-grid-container2 {
        max-width: 800px;
    }
    .posts-grid2 {
        grid-template-columns: repeat(2, 1fr); /* Переходим на 2 колонки */
        gap: 20px;
    }
}

/* 2. Крупные телефоны и мини-планшеты (до 800px) */
@media screen and (max-width: 800px) {
    .product-grid-container2 {
        max-width: 480px;
    }
    .posts-grid2 {
        grid-template-columns: repeat(2, 1fr); /* Все еще 2 колонки, но плотнее */
        gap: 15px;
    }
    .post-title2 {
        font-size: 14px;
    }
}

/* 3. Средние телефоны (до 480px) */
@media screen and (max-width: 480px) {
    .posts-grid2 {
        grid-template-columns: 1fr; /* Одна колонка в ряд */
    }
    .section-title2 {
        font-size: 20px;
    }
}

/* 4. Маленькие телефоны (до 320px) */
@media screen and (max-width: 320px) {
    .product-grid-container2 {
        padding: 10px;
    }
    .post-title2 {
        font-size: 13px;
    }
    .reading-time2 {
        font-size: 11px;
    }
}


/*-------- Search ---------*/
.search-results-page {
    padding: 40px 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #f9fafb;
}

section {
    padding: 0;
}

.container2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container3 {
    margin: 0 auto;
    padding: 0 20px;

}

.page-header {
    margin-bottom: 40px;
    text-align: center;
}

.page-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
}

.page-title span {
    color: #e41d24; /* Выделяем запрос красным Рутекс */
}

/* Сетка карточек */
.cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
       background-color: #FBFAF6; /* Очень светлый серый фон для всей секции */

}

/* Стили карточки */
.custom-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-image img {
    width: 100%;
    /* height: 180px; */
    /* object-fit: cover; */
}

.card-content {
    padding: 20px;
    flex-grow: 1;
}

.post-date {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
}

.entry-title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 700;
}

.entry-title a {
    text-decoration: none;
    color: #111;
}

.read-more-link {
    color: #e41d24;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

/* Адаптив */
@media (max-width: 1024px) { .cards-container { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .cards-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { 
    .cards-container { grid-template-columns: 1fr; }
    .page-title { font-size: 20px; }
}
/**--------page-news---------**/
/* Базовая сетка (Десктоп) */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-bottom: 50px;
}

.news-item {
    display: flex;
    flex-direction: column;
}

.news-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Чтобы все картинки были одной высоты */
    border-radius: 4px;
}

/* Стили пагинации */
.pagination {
    grid-column: 1 / -1; /* Растягиваем на всю ширину сетки */
    text-align: center;
    margin-top: 40px;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 4px;
    background: #f4f4f4;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}

.pagination .page-numbers.current {
    background: #00704E; /* Цвет как у тегов */
    color: #fff;
}

/* --- Адаптивность --- */

/* Планшеты (до 992px) - 2 колонки */
@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобильные устройства (до 600px) - 1 колонка */
@media (max-width: 600px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .news-item-title {
        font-size: 1.1rem;
    }

    .page-title {
        font-size: 1.5rem;
        text-align: center;
    }
}

h2 a{
    color: black;
    text-decoration: none;
}

.breadcrumbs-container, .breadcrumbs-container p a{
    max-width: 1500px;
    margin:0 auto;
    color: #999999;
    text-decoration: none;
}

.news-excerpt{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
.news-item-title{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
}

.news__footer-blog {
    max-width: 1500px;
    margin: 0 auto;
    text-align: left;
    margin-top: 30px;
}

.hero-portal {
    max-width: 1500px;
    height: 350px;
    margin: 0 auto;       /* Центрирует блок на странице */
    position: relative;   /* База для позиционирования текста */
    width: 100%;
    overflow: hidden;
    color: #fff !important;          /* Цвет текста для контраста с фоном */
}

.hero-portal a{
  color:#fff !important;
}

.hero-image {
    width: 100%;
    /* height: 500px;        /* Можно задать фиксированную высоту или auto */
    /* object-fit: cover;    Чтобы фото не растягивалось некрасиво */ 
    display: block;
}

/* Контейнер с текстом поверх фото */
.hero-content {
    position: absolute;
    color: #fff !important;
    top: 50%;             /* Сдвиг на середину высоты */
    left: 50%;            /* Сдвиг на середину ширины */
    transform: translate(-50%, -50%); /* Точное центрирование по осям */
    text-align: center;
    width: 90%;           /* Чтобы текст не прилипал к краям фото */
    z-index: 2;
}

/* Добавим легкое затемнение фото, чтобы текст лучше читался */
.hero-portal::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный слой */
    z-index: 1;
}

h1.hero-title, p.hero-subtitle {
    color: #fff !important;
}