/* #################### BODY ############################## */
*,
::after,
::before {
 box-sizing: border-box
}
html {
  font-family: Arial, sans-serif; /* Основной шрифт для документа */
  -webkit-tap-highlight-color: transparent; /* Убирает подсветку при нажатии на сенсорных устройствах */
  scroll-behavior: smooth; /* Включает плавную прокрутку */
}
body {
 font-family: Arial, sans-serif; /* Основной шрифт */
 line-height: 1.6; /* Оптимальная высота строки */
 background-color: #f5f5f5; /* Светло-серый фон */
 /* min-height: 100vh; /* Высота окна браузера */
 /* display: flex; /* Flex-контейнер для центрирования */
 justify-content: center; /* Центрирование содержимого по горизонтали */
 align-items: center; /* Центрирование содержимого по вертикали */
 margin: 0; /* Сбрасывает внешние отступы */
 padding: 0; /* Сбрасывает внутренние отступы */
 box-sizing: border-box; /* Упрощает расчёт размеров элементов */
}
section {
  /* min-height: 100vh; /* Высота секции — полное окно браузера */
  /* padding: 20px; */
  box-sizing: border-box;
}
/* Заголовки */
h1, h2, h3, h4, h5, h6 {
 margin: 24px 0 12px; /* Универсальный отступ сверху и снизу */
 line-height: 1.2; /* Оптимальная высота строки */
 font-weight: 600; /* Жирное начертание */
 color: #333; /* Цвет текста */
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Сбрасываем базовые отступы для основных элементов */
body, h1, h2, h3, p, ul, li {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

a {
 display: inline-block; /* Сменил на inline-block для логичной работы с текстом */
 text-decoration: none; /* Убирает подчеркивание */
 color: inherit; /* Наследует цвет текста */
 transition: color 0.3s ease; /* Плавный переход цвета */
}

a:hover {
 color: #0055a5; /* Цвет текста при наведении */
}

.small-text {
  font-size: 80%; /* Уменьшает шрифт до 80% от основного */
  color: #777; /* Немного осветляем цвет для меньшей визуальной нагрузки */
}

.logo16 {
 width: 16px; /* Ширина изображения */
 height: 16px; /* Высота изображения */
 object-fit: cover; /* Обеспечивает корректное отображение изображения, чтобы оно не растягивалось */
}

hr {
 border: none; /* Убираем стандартную рамку */
 height: 1px; /* Высота линии */
 background-color: #0044cc; /* Основной цвет */
 margin: 10px 0; /* Отступы сверху и снизу */
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Тень для благородного вида */
 transition: background-color 0.5s ease, box-shadow 0.5s ease; /* Плавный переход */
}

hr:hover {
 background-color: #0055a5; /* Более светлый цвет при наведении */
 box-shadow: 0 4px 8px rgba(0, 85, 165, 0.5); /* Усиленная тень при наведении */
}

.icon-ok {
  color: #16b900; /* Цвет текста (по умолчанию белый) */
 }

.icon-ok:hover {
 transform: scale(1.01); /* Лёгкое увеличение при наведении */
 /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Лёгкая тень при наведении */
}

.icon-ok i {
 color: #16b900; /* Цвет галочки (зелёный) */
}

.icon-ok i:hover {
 color: #0b4d05; /* Более тёмный зелёный цвет галочки при наведении */
}

/* ############## header: ############################################################################ */
.header-area {
  top: 0;
  left: 0;
  right: 0;
  width: 100%; /* Полная ширина */
  padding-top: 0;
  background: linear-gradient(90deg, #0270d1, #0066be); /* Градиентный фон */
  transition: background 0.3s ease; /* Плавный переход для фона */
 position: relative; /* относительное позиционирование */
 z-index: 10; /* Над кнопками */
}

.header-area:hover {
  background: linear-gradient(90deg, #0066be, #0270d1); /* Зеркальный градиент */
  filter: brightness(0.9); /* Лёгкое притемнение */
}



.header-area .main-header-area {
  background-color: transparent; /* Прозрачный фон по умолчанию */
  padding: 8px 0; /* Внутренний верхний отступ: 8px, остальные отступы: 0 */
  transition: background 0.5s ease, padding 0.5s ease; /* Плавный переход для фона и отступов */
  display: flex; /* Flex-контейнер для удобного размещения содержимого */
  align-items: center; /* Выравнивание по вертикали */
  justify-content: center; /* Выравнивание элементов по центру */
}

.header-area .main-header-area.sticky {
  box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.1); /* Тень для липкой шапки */
  position: fixed; /* Фиксированное позиционирование при прокрутке */
  width: 100%; /* Полная ширина */
  top: -70px; /* Начальное скрытие */
  transform: translateY(70px); /* Плавное появление */
  transition: transform 0.5s ease, background 0.5s ease; /* Плавные эффекты при прокрутке */
  background-color: rgba(0, 29, 56, 0.8); /* Полупрозрачный темный фон */
  padding: 10px; /* Уменьшенные отступы */
  /* z-index: 9; /* Высокий приоритет слоя */
 }

/* ########### Логотип: ###################################### */
/* Основной стиль для логотипа */
.logo {
  display: flex; /* Flex-контейнер для удобного размещения содержимого */
  justify-content: flex-start; /* Выравнивает логотип по левому краю */
  align-items: center; /* Центрирует логотип по вертикали */
  max-width: 206px; /* Ограничивает максимальную ширину логотипа */
  /*position: relative; /* Создаёт контекст позиционирования для вложенных элементов (если нужно) */
  top: 5px; /* Сдвиг логотипа вниз на 5px */
  margin-left: 0; /* Убирает любые внешние отступы слева */
}


/* Скрываем логотип для мобильных устройств по умолчанию */
.logo-mobile {
  display: none;
}

/* Для десктопов показываем основной логотип */
.logo-desktop {
  display: inline-block;
}

/* На мобильных устройствах показываем мобильный логотип и скрываем десктопный */
/* На мобильных устройствах скрываем десктопный логотип, показываем мобильный логотип, и разносим элементы по сторонам */
@media (max-width: 768px) {
  .logo-desktop {
    display: none; /* Скрываем десктопный логотип */
  }

  .logo-mobile {
    display: inline-block; /* Показываем мобильный логотип */
  }

  #sticky-header.main-header-area {
    display: flex; /* Устанавливаем flex-контейнер для управления позиционированием */
    align-items: center; /* Выравниваем элементы по вертикали */
    justify-content: space-between; /* Разносим элементы по краям (логотип слева, меню справа) */
    padding: 0 2px; /* Добавляем отступы слева и справа */
  }

  .logo {
    margin-left: 0; /* Гарантируем отсутствие лишнего отступа слева */
  }

  .mobile_menu {
    margin-right: 0; /* Гарантируем отсутствие лишнего отступа справа */
  }
}



.header-area .main-header-area a {
 font-size: 13px;
 font-weight: 400;
 color: #fff; /* Белый текст */
 transition: color 0.3s ease; /* Плавный переход цвета */
}

.header-area .main-header-area a i {
 color: #33d4d6; /* Голубой цвет иконки */
 font-size: 14px;
 margin-right: 7px; /* Отступ справа */
}

.header-area .main-header-area .main-menu {
  display: inline-block; /* в строчно-блочный элемент */
  text-align: center; /* Выравнивание меню по центру */
  position: relative; /* Создаёт контекст позиционирования */
  z-index: 10; /* Высокий приоритет */
}

/* Адаптивные стили для мобильных устройств (ширина экрана ≤ 768px) */
@media (max-width: 768px) {
  .header-area .main-header-area .main-menu {
      display: none;  /* Скрываем десктопное меню */
  }
}

.header-area .main-header-area .main-menu ul li {
 display: inline-block; /* Элементы меню в строку */
 position: relative; /* Для позиционирования подменю */
 margin: 0 14px; /* Отступы между элементами */
}

.header-area .main-header-area .main-menu ul li a {
 color: #fff; /* Белый текст */
 font-size: 13px;
 font-weight: 500; /* Полужирный текст */
 text-transform: capitalize; /* Капитализация текста */
 padding: 35px 0; /* Отступы сверху и снизу */
 transition: color 0.3s ease; /* Плавный переход цвета */
 display: block;
}

.header-area .main-header-area .main-menu ul li a:hover {
 color: #00d363; /* Зеленый цвет при наведении */
}

.header-area .main-header-area .main-menu ul li .submenu {
  display: none; /* Скрыто по умолчанию */
  position: absolute;
 top: 100%;
 left: 0;
 background-color: #fff; /* Белый фон подменю */
 width: 200px;
 z-index: 10; /* Подменю имеет приоритет */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для подменю */
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавный показ подменю */
}

.header-area .main-header-area .main-menu ul li .submenu {
  opacity: 0; /* Скрываем подменю по умолчанию */
  visibility: hidden;
  position: absolute; /* Выводим подменю из основного потока */
  top: 100%; /* Позиция под родительским элементом */
  left: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавная анимация */
}

.header-area .main-header-area .main-menu ul li:hover > .submenu {
  opacity: 1; /* Показываем подменю */
  visibility: visible;
}


.container-fluid {
 width: 100%; /* Полная ширина контейнера */
 padding: 0 0px; /* Отступы внутри контейнера */
 margin: 0 auto; /* Центрирование */
}
.header_bottom_border {
 position: relative;
 padding: 15px 20px; /* Внутренние отступы элемента */
 text-align: center; /* Выравнивание текста по центру */
 font-family: "Roboto", sans-serif; /* Шрифт текста */
 font-size: 18px; /* Размер шрифта */
 font-weight: bold; /* Жирный шрифт для заголовка */
 color: #ffffff; /* Белый цвет текста */
 background-color: linear-gradient(90deg, #0270d1, #0d7de1); /* Градиентный фон */
 border-bottom: 3px solid #0d7de1; /* Нижняя граница */
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Тень под элементом */
}

.header_bottom_border::before {
 content: ""; /* Дополнительный декоративный элемент */
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background-color: linear-gradient(90deg, #0d7de1, #0270d1); /* Верхняя граница с градиентом */
}

.header_bottom_border:hover {
 /* color: #00D363; /* Изменение цвета текста при наведении */
 background-color: linear-gradient(90deg, #0167c1, #0b72cf); /* Изменение фона при наведении */
 border-bottom-color: #0363b8; /* Изменение цвета нижней границы при наведении */
 transition: all 0.3s ease-in-out; /* Плавный переход для изменений */
}
.align-items-center {
 align-items: flex-start; /* Центрирование элементов по верхнему краю */
 display: flex; /* Устанавливает Flexbox */
}



/* #################################################################
/* ################ ГОРИЗОНТАЛЬНОЕ МЕНЮ: ##########################
/* ################################################################# */
/* Треугольничек для раскрывающегося меню */
.triangle {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 5px;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-top: 5px solid #000; /* Чёрный цвет треугольника по умолчанию */
}

/* ################ Основные стили для меню ################################ */
#navigation {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex; /* Горизонтальное расположение */
}

#navigation > li {
 position: relative;
 margin-right: 15px; /* Уменьшено расстояние между элементами */
}

#navigation > li > a {
 text-decoration: none;
 color: #000;
 padding: 10px 15px;
 background-color: #fff; /* Белый цвет фона */
 display: block;
 border-radius: 5px;
 transition: background-color 0.3s ease, color 0.3s ease; /* Плавные переходы */
}

/* При наведении меняем фон на черный и цвет текста на белый */
#navigation > li:hover > a {
 background-color: #0356a0; /* Чёрный фон */
 color: #fff; /* Белый цвет текста */
}

/* Меняем цвет треугольника на белый при наведении */
#navigation > li:hover .triangle {
 border-top-color: #fff; /* Белый цвет треугольника */
 }

/* Убираем горизонтальное выравнивание для подменю */
#navigation .submenu {
 display: block; /* Делаем подменю блочным */
 position: absolute; /* Абсолютное позиционирование */
 top: 100%; /* Располагаем подменю под родителем */
 left: 0; /* Выравниваем по левому краю родителя */
 list-style: none; /* Убираем маркеры списка */
 background-color: #fff; /* Белый фон */
 border: 1px solid #ddd; /* Светло-серая рамка */
 border-radius: 5px; /* Закругленные углы */
 padding: 10px 0; /* Отступы внутри подменю */
 width: 200px; /* Устанавливаем фиксированную ширину */
 /* z-index: 10; /* Поверх остальных элементов */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
}

/* Обеспечиваем вертикальное выравнивание пунктов */
#navigation .submenu li {
 display: block; /* Каждый элемент подменю занимает всю строку */
 margin: 0; /* Убираем отступы */
 padding: 0; /* Убираем внутренние отступы */
 text-align: left; /* Ориентируем текст по левому краю */
}

/* Стили для ссылок подменю */
#navigation .submenu li a {
 display: block; /* Каждая ссылка занимает всю строку */
 padding: 10px 15px; /* Отступы внутри ссылки */
 color: #000; /* Чёрный текст */
 font-size: 14px; /* Размер текста */
 text-decoration: none; /* Убираем подчеркивание */
 transition: background-color 0.3s ease, color 0.3s ease; /* Плавные переходы */
}

/* Меняем фон и цвет текста при наведении */
#navigation .submenu li a:hover {
 background-color: #0356a0; /* Синий фон */
 color: #fff; /* Белый текст */
}

/* Отображение подменю при наведении */
#navigation > li:hover .submenu {
 display: block; /* Показывает подменю */
}
/* Устанавливаем фиксированную ширину и убираем горизонтальный перенос */
#navigation .submenu {
 width: 200px; /* Устанавливаем фиксированную ширину подменю */
 text-align: left; /* Выравниваем содержимое по левому краю */
}

/* Убираем горизонтальное поведение для ссылок */
#navigation .submenu li {
 white-space: nowrap; /* Запрещаем перенос строк внутри ссылки */
}
/* ########## ГОРИЗОНТАЛЬНОЕ МЕНЮ КОНЕЦ #################### */

.publication-date {
 font-size: 0.875rem; /* Уменьшенный размер шрифта (14px) */
 color: #6c757d; /* Сероватый цвет текста */
 margin-top: -10px; /* Отступ сверху для приближения к заголовку */
 margin-bottom: 20px; /* Отступ снизу для разделения с основным текстом */
 text-align: left; /* Выравнивание текста по левому краю */
 font-style: italic; /* Курсив для более утончённого вида */
}
figure {
  margin: 20px 0;
  text-align: center;
}
figure img {
  max-width: 100%; /* Ограничивает ширину изображения размером родителя */
  height: auto; /* Сохраняет пропорции изображения */
  border-radius: 8px; /* При необходимости можно добавить закругление */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень для улучшения восприятия */
}
figcaption {
  font-size: 0.875rem; /* Немного меньше основного шрифта */
  color: #6c757d; /* Приглушённый цвет */
  margin-top: 8px;
  text-align: center; /* Центрируем подпись */
}

/* Для мобильных устройств */
@media (max-width: 768px) {
  figure img {
    margin: 0 auto; /* Центрируем изображение */
  }

  article {
    padding: 15px; /* Уменьшенные внутренние отступы */
  }
}

article {
 margin-top: 25px; /* Верхний отступ внутри <article> */
 margin-bottom: 100px; /* Нижний отступ внутри <article> */
 padding: 20px 20px 50px 30px; /* Внутренние отступы */
 font-size: 16px; /* Размер шрифта */
 line-height: 1.6; /* Высота строки для удобочитаемости */
 color: #4a4a4a; /* Приглушённый тёмно-серый цвет текста */
 background-color: #ffffff; /* Белый фон для контраста */
 border: 1px solid #d3d3d3; /* Лёгкая сероватая рамка */
 border-radius: 10px; /* Закругление углов */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Мягкая тень для глубины */
 transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавные эффекты при наведении */
}

article:hover {
 border-color: #0055a5; /* Насыщенный цвет рамки при наведении */
 box-shadow: 0 6px 12px rgba(0, 85, 165, 0.3); /* Усиленная тень при наведении */
}

article h1, article h2, article h3 {
 margin-top: 30px;
 margin-bottom: 10px; /* Отступ снизу у заголовков */
 color: #003366; /* Темно-синий цвет заголовков для акцента */
}

article p {
 margin-bottom: 20px; /* Отступ снизу для абзацев */
}

article a {
 color: #0055a5; /* Цвет ссылок */
 text-decoration: none; /* Убираем подчеркивание */
 transition: color 0.3s ease; /* Плавный переход для цвета ссылок */
}

article a:hover {
 color: #003366; /* Цвет ссылок при наведении */
 text-decoration: underline; /* Подчеркивание при наведении */
}

/* ################# Таблица ############################ */
.table {
  display: grid; /* Устанавливает контейнер как grid */
  border: 1px solid gray; /* Серый цвет рамки */
  border-radius: 10px; /* Закруглённые углы */
  overflow: hidden; /* Скрывает выходящее за рамки содержимое */
}
.t2 {
 grid-template-columns: repeat(2, 1fr); /* Создаёт две равные колонки (каждая занимает 1 часть доступного пространства) */
 }
.t3 {
  grid-template-columns: repeat(3, 1fr); /* Три равные колонки */
 }
.t4 {
  grid-template-columns: repeat(4, 1fr); /* 4-ре равные колонки */
  }
.t5 {
  grid-template-columns: repeat(5, 1fr); /* 4-ре равные колонки */
    }
.t6 {
 grid-template-columns: repeat(6, 1fr); /* 4-ре равные колонки */
 }
/* Стили для ячеек */
.cell {
  padding: 10px; /* Внутренний отступ */
  border: 1px solid lightgray; /* Светло-серая рамка */
  text-align: center; /* Выравнивание текста по центру */
}
/* Первая строка (заголовки) */
.cell.header {
  font-weight: bold; /* Жирный шрифт */
  background-color: #f0f0f0; /* Светло-серый фон */
  color: #333; /* Исходный цвет текста */
  transition: background 0.3s ease, color 0.3s ease; /* Плавный переход цветов */
}

/* Эффект при наведении */
.cell.header:hover {
  background-color: #d8e9f3; /* Голубовато-серый фон при наведении */
  color: #2a5d8a; /* Осветлённый синий оттенок текста */
}

/* Первая колонка */
.cell.first-column {
  font-weight: bold; /* Жирный шрифт */
  text-align: left; /* Выравниваем по левому краю */
  padding-left: 15px; /* Добавляем немного отступа слева */
  background-color: #fafafa; /* Едва заметный фон для первой колонки */
}
/* Адаптация таблицы для мобильных устройств */
@media (max-width: 768px) {
  .table3 {
    grid-template-columns: repeat(3, 1fr); /* Сохраняем три колонки */
    margin: 0 0px; /* Минимальный внешний отступ */
    border-width: 0.5px; /* Уменьшаем толщину рамки */
  }

  .cell {
    padding: 3px; /* Уменьшаем внутренние отступы */
    font-size: 13px; /* Уменьшаем размер шрифта */
    border-width: 0.5px; /* Уменьшаем толщину рамки */
  }

  .cell.header {
    font-size: 14px; /* Немного увеличиваем размер шрифта заголовков */
  }
}
/* ################# / Таблица ############################ */

/* ################# Хлебные крошки: ############################ */
.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  font-size: 14px; /* Размер шрифта */
  color: #6c757d; /* Цвет текста */
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "";
  display: inline-block;
  margin: 0 8px;
  width: 16px;
  height: 16px;
  background: url('/img/arrow_right_20dp.svg') no-repeat center center;
  background-size: contain;
}


.breadcrumb-item a {
  color: #0073e6;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #6c757d;
  pointer-events: none;
}

/* ################# / Хлебные крошки ############################ */

/* Стили для кнопок */
.button {
  display: inline-block;
  padding: 6px 6px 10px 6px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s ease;
  cursor: pointer;
  margin: 5px;
  text-align: center;
  line-height: 1.5;
  overflow: hidden; /* Скрываем элементы за границами кнопки */
  position: relative;  /* Для внутренних эффектов */
  z-index: 0; /* кнопки находятся под меню */
}

/* Эффект нажатия кнопок */
.button:active {
  transform: scale(0.98) translateY(2px); /* Лёгкое уменьшение и смещение вниз */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Уменьшенная тень */
  /* z-index: 0; /* кнопки находятся под меню */
}

/* Оранжевая кнопка */
 .orange {
    background: linear-gradient(145deg, #ff9800, #ff5722); /* Градиент кнопки */
    overflow: hidden; /* Прячем выходящие за границы элементы */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    /* position: relative; /* Для внутреннего контекста */
   /* z-index: 0; /* Кнопки остаются ниже меню */
 } 

/* Анимация при наведении */
  .orange::before {
  content: attr(data-hover); /* Текст для анимации */
    top: 100%; /* Начальная позиция вне кнопки */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #fd5e2d, #fda724); /* Градиент анимации */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Закруглённые края */
    transform: translateY(-100%); /* Прячем псевдоэлемент за пределы кнопки */
    transition: transform 0.3s ease-in-out; /* Плавное появление */
    position: absolute; /* Абсолютное позиционирование */
   /* position: relative; /* Для внутреннего контекста */
    /* z-index: 0; /* Кнопки остаются ниже меню */
 } 

/* Появление текста при наведении */
.orange:hover::before {
  transform: translateY(0); /* Перемещаем псевдоэлемент внутрь кнопки */
  /* position: absolute; /* Абсолютное позиционирование */
  /* position: relative; /* Для внутреннего контекста */
  /* z-index: 0; /* Кнопки остаются ниже меню */
}

.orange:hover {
  background: linear-gradient(145deg, #fd5e2d, #fda724);
  transform: scale(1.01); /* Лёгкое увеличение */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Более яркая тень */
  color: #fff;
/* z-index: 0; /* кнопки находятся под меню */
}



/* Зелёная кнопка */
.green {
  background: linear-gradient(145deg, #16b900, #0b4d05);
  position: relative; /* Для эффекта текста */
}

.green::before {
  content: attr(data-hover); /* Текст для анимации */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #0b4d05, #16b900); /* Новый градиент */
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.green:hover::before {
  transform: translateY(0); /* Текст появляется сверху */
}

.green:hover {
  background: linear-gradient(145deg, #0b4d05, #16b900);
  transform: scale(1.01); /* Лёгкое увеличение */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Более яркая тень */
  color: #fff;
}

.greentxt {
  color: #0f9103;
}
.redtxt {
  color: #c70000;
}
/* ########################################################################################## */


.header {
 background-color: #003399; /* Основной фон */
 color: #fff; /* Цвет текста */
 padding: 20px 0; /* Внутренние отступы сверху и снизу */
 transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Плавный переход для фона и тени */
 position: relative; /* относительное позиционирование */
 z-index: 10; /* Над кнопками */
}

.header:hover {
 background-color: #0044cc; /* Немного более светлый оттенок синего при наведении */
 box-shadow: 0 0 10px 1px rgba(83, 177, 253, 0.5); /* Подсвечивающий контур */
}

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative; /* относительное позиционирование */
 z-index: 10; /* Над кнопками */
}

.navbar .menu {
 display: flex;
 list-style: none;
 position: relative; /* относительное позиционирование */
 z-index: 10; /* Над кнопками */
}
.navbar .menu li {
 margin: 0 15px;
 position: relative; /* относительное позиционирование */
 z-index: 10; /* Над кнопками */
}

.navbar .menu a {
 color: #fff;
 text-decoration: none;
 font-size: 18px;
 position: relative; /* относительное позиционирование */
 z-index: 10; /* Над кнопками */
}

.container {
 width: 96%;
 max-width: 1200px;
 margin: 0 auto; /* Центрирование содержимого */
 padding-top: 30px; /* Внутренние отступы сверху */
 padding-bottom: 30px; /* Внутренние отступы снизу */
}

/* ################# Символы из шрифтов ############################################################################### */
@font-face {
 font-family: 'fontello';
 src: url('../font/fontello.eot?40179783');
 src: url('../font/fontello.eot?40179783#iefix') format('embedded-opentype'),
 url('../font/fontello.woff?40179783') format('woff'),
 url('../font/fontello.ttf?40179783') format('truetype'),
 url('../font/fontello.svg?40179783#fontello') format('svg');
 font-weight: normal;
 font-style: normal;
}

.icon {
 font-family: "fontello"; /* Название шрифта для иконок */
 font-style: normal; /* Убирает курсив */
 font-weight: normal; /* Убирает жирность */
 display: inline-block; /* Элемент в строку с возможностью изменения размеров */
 text-decoration: inherit; /* Наследует оформление текста от родителя */
 width: 1em; /* Устанавливает ширину элемента равной высоте шрифта */
 margin-right: 0.2em; /* Отступ справа */
 margin-left: 0.2em; /* Отступ слева */
 text-align: center; /* Центрирует содержимое */
 line-height: 1em; /* Высота строки равна размеру шрифта */
 font-variant: normal; /* Убирает альтернативные варианты шрифта */
 text-transform: none; /* Убирает изменения регистра текста */
 -webkit-font-smoothing: antialiased; /* Сглаживание текста для Webkit-браузеров */
 -moz-osx-font-smoothing: grayscale; /* Сглаживание текста для macOS */
 transition: transform 0.3s ease, color 0.3s ease; /* Добавляет анимацию при изменении цвета или размера */
}

.icon:hover {
 transform: scale(1.1); /* Легкое увеличение при наведении */
 color: #0360ac; /* Изменение цвета иконки при наведении */
}

/* ################# / Символы из шрифтов ############################################################################### */

/* ###################### Hero Section ##################################### */
.hero {
 background-color: #0066cc; /* Основной цвет фона */
 color: #fff; /* Белый цвет текста для всего содержимого */
 text-align: center; /* Центрирование текста по горизонтали */
 padding: 20px 0; /* Внутренние отступы сверху и снизу */
 transition: background-color 0.5s ease; /* Плавный переход при изменении фона */
 position: static; /* Контекст позиционирования */
 z-index: 0; /* Низкий приоритет */
}

.hero:hover {
 background-color: #0055a5; /* Более тёмный синий при наведении */
 transition: background-color 0.5s ease; /* Плавный переход для изменения фона */
}

.hero h1 {
 font-size: 36px; /* Размер шрифта заголовка */
 margin-bottom: 10px; /* Отступ снизу */
 color: #fff; /* Белый цвет текста */
 font-weight: bold; /* Жирный текст */
 /* text-transform: uppercase; /* Заглавные буквы */
 animation: fadeInUp 1s ease-in-out; /* Анимация появления заголовка */
}
.hero h2 {
 font-size: 30px; /* Размер шрифта заголовка */
 margin-bottom: 10px; /* Отступ снизу */
 color: #fff; /* Белый цвет текста */
 font-weight: bold; /* Жирный текст */
 /* text-transform: uppercase; /* Заглавные буквы */
 animation: fadeInUp 1s ease-in-out; /* Анимация появления заголовка */
}
.hero p {
 font-size: 20px; /* Размер текста для параграфа */
 margin-bottom: 10px; /* Отступ снизу */
 line-height: 1.6; /* Межстрочный интервал для удобства чтения */
 color: #e0f5ff; /* Светлый оттенок белого для текста параграфа */
 animation: fadeInUp 1.2s ease-in-out; /* Анимация появления текста */
}

.hero p:hover {
 color: #ffffff; /* Белый цвет текста при наведении */
 transition: color 0.3s ease; /* Плавный переход для изменения цвета текста */
}
.hero .button:hover {
 color: #e0f5ff;
}
/* Анимация плавного появления текста */
@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px); /* Начальная позиция ниже */
 }
 to {
 opacity: 1;
 transform: translateY(0); /* Конечная позиция */
 }
}



/* ########## Самые популярные запросы поиска / category_area ######################## */
.category_area {
  display: flex; /* Устанавливает элемент как flex-контейнер для упрощённого расположения дочерних элементов */
  align-items: center; /* Центрирует дочерние элементы по вертикали внутри контейнера */
  justify-content: space-between; /* Распределяет дочерние элементы равномерно, с максимальным расстоянием между ними */
  background-color: #f5f5f5; /* Задаёт светло-серый цвет фона для контейнера */
  padding: 30px; /* Добавляет внутренние отступы со всех сторон (по 30px) */
  margin-bottom: 10px; /* Добавляет внешний отступ снизу контейнера (10px) */
}


@media (max-width: 768px) { /* Адаптация для мобильных устройств */
 .category_area {
 padding: 15px 0; /* Уменьшенные отступы */
 }
}
/* ########## / Самые популярные запросы поиска / category_area ######################## */

/* ########## Для форм / category_area ######################## */
.category_area input {
 height: 50px; /* Высота поля ввода */
 border: 1px solid #E8E8E8; /* Светло-серая рамка */
 padding: 20px; /* Внутренние отступы */
 border-radius: 5px; /* Закруглённые углы */
 width: 100%; /* Полная ширина */
 margin-bottom: 20px; /* Отступ снизу */
}

.category_area input::placeholder {
 color: #7A838B; /* Цвет плейсхолдера */
 font-size: 16px; /* Размер текста */
 font-weight: 400; /* Нормальная жирность */
}

.category_area input:focus {
 outline: none; /* Убирает обводку при фокусе */
}

.category_area a {
 display: block; /* Блочное отображение */
}
/* ########## / Для форм / category_area ######################## */


/* ########### / popular-cards ####################################################################### */
/* Popular Cards Section */
/* Контейнер для популярных карт */
.popular-cards {
 padding: 10px 0; /* Внутренние отступы сверху и снизу */
 background-color: #f4f4f4; /* Светло-серый фон */
 text-align: left; /* Центровка текста */
}

/* Заголовок */
.popular-cards h2 {
 font-size: 28px; /* Размер шрифта */
 margin-bottom: 20px; /* Отступ снизу */
 color: #00274d; /* Благородный синий цвет текста */
 transition: color 0.3s ease-in-out; /* Плавный переход цвета */
}

.popular-cards h2:hover {
 color: #0066cc; /* Изменение цвета при наведении */
}

/* Сетка для карточек */
.cards-grid {
 display: grid; /* Сетка */
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Автоматическая подстройка колонок */
 gap: 20px; /* Расстояние между элементами */
 padding: 0 20px; /* Отступы слева и справа для мобильных устройств */
 /* background-color: #E6F3FF; /* Светло-голубой фон */
}
.cards-grid p span {
 background-color: #E6F3FF; /* Светло-голубой фон */
 color: #0A8CFF; /* Голубой текст */
 font-size: 16px; /* Размер текста */
 font-weight: 400; /* Нормальная жирность текста */
 padding: 6px 17px; /* Внутренние отступы */
 border-radius: 5px; /* Закруглённые углы */
 margin: 10px 10px 10px 0; /* Отступ справа */
}
/* Карточка */
.card {
 background-color: #fff; /* Белый фон */
 padding: 10px; /* Внутренние отступы */
 border: 1px solid #ddd; /* Светло-серая рамка */
 border-radius: 15px; /* Закругленные углы */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень для эффекта объема */
 transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные эффекты */
}

.card:hover {
 transform: translateY(-10px); /* Подъем карточки при наведении */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Усиление тени при наведении */
}

/* Заголовок внутри карточки */
.card h3 {
 font-size: 22px; /* Размер шрифта */
 margin-bottom: 10px; /* Отступ снизу */
 color: #003366; /* Темно-синий цвет */
 transition: color 0.3s ease-in-out; /* Плавный переход цвета */
}

.card h3:hover {
 color: #0066cc; /* Изменение цвета при наведении */
}

/* Текст внутри карточки */
.card p {
 margin-bottom: 15px; /* Отступ снизу */
 color: #353535; /* Серый цвет текста */
 line-height: 1.5; /* Удобочитаемый межстрочный интервал */
}

/* Кнопка */
.card .button {
 background-color: #0066cc; /* Синий фон */
 color: #fff; /* Белый цвет текста */
 padding: 10px 15px; /* Внутренние отступы */
 text-decoration: none; /* Убираем подчеркивание */
 border-radius: 5px; /* Закругленные углы */
 display: inline-block; /* Блочное отображение */
 transition: background-color 0.3s ease, transform 0.3s ease; /* Плавные переходы */
}

.card .button:hover {
 background-color: #004a99; /* Темно-синий фон при наведении */
 transform: scale(1.05); /* Увеличение кнопки при наведении */
}

/* Адаптация для мобильных устройств */
@media (max-width: 767px) {
 .popular-cards h2 {
 font-size: 24px; /* Уменьшение размера шрифта на мобильных устройствах */
 }

 .card {
 padding: 15px; /* Уменьшение внутренних отступов */
 }

 .card h3 {
 font-size: 20px; /* Уменьшение размера шрифта */
 }

 .card .button {
 padding: 8px 12px; /* Уменьшение внутренних отступов кнопки */
 }
}


/* #################### Банковские продукты / top_companies_area #################################### */
.top_companies_area {
 padding: 20px 0; /* Внутренние отступы сверху и снизу */
 background-color: #F5F7FA; /* Светло-серый фон */
 text-align: left; /* Центровка текста */
 padding-bottom: 10px; /* Отступ снизу */
}

.top_companies_area h2 {
 font-size: 28px; /* Размер шрифта */
 margin-bottom: 20px; /* Отступ снизу */
 color: #00274d; /* Благородный синий цвет текста */
 transition: color 0.3s ease-in-out; /* Плавный переход цвета */
}

.top_companies_area h2:hover {
 color: #0066cc; /* Изменение цвета при наведении */
}

@media (max-width: 767px) { /* Адаптация для мобильных устройств */
 .top_companies_area {
 margin-bottom: 40px; /* Дополнительный отступ снизу для мобильных устройств */
 }
}

.top_companies_area .single_company {
 background-color: #ffffff; /* Белый фон для каждого блока компании */
 padding: 15px; /* Внутренние отступы */
 border-radius: 15px; /* Закругленные углы */
 margin-bottom: 10px; /* Отступ снизу между блоками */
 padding: 15px; /* Внутренние отступы */
 border: 1px solid transparent; /* Прозрачная рамка для эффекта при наведении */
 transition: border-color 0.3s, color 0.3s, text-decoration 0.3s; /* Плавные переходы для рамки, цвета текста и подчеркивания */
 flex: 1 1 calc(33.333% - 20px); /* Адаптивная ширина карточки */
 box-sizing: border-box; /* Учитывать отступы и границы в размерах */
 }

 .top_companies_area .single_company p span {
 background-color: #E6F3FF; /* Светло-голубой фон */
 color: #0A8CFF; /* Голубой текст */
 font-size: 16px; /* Размер текста */
 font-weight: 400; /* Нормальная жирность текста */
 padding: 6px 17px; /* Внутренние отступы */
 border-radius: 5px; /* Закруглённые углы */
 margin-right: 10px; /* Отступ справа */
}
/* #################### Банковские продукты / top_companies_area #################################### */



/* #################### Отзывы / testimonial / Reviews Section ################################# */
/* Основной контейнер для секции отзывов */
.reviews {
 padding: 50px 0 20px; /* Отступы сверху, снизу */
 background-color: #f5f7fa; /* Светло-серый фон */
 text-align: left; /* Текст по левому краю */
}

/* Заголовок секции отзывов */
.reviews h2 {
 font-size: 28px; /* Размер шрифта */
 margin-bottom: 20px; /* Отступ снизу */
 color: #00274d; /* Темно-синий цвет */
 transition: color 0.3s ease-in-out; /* Плавное изменение цвета */
}

/* Эффект при наведении на заголовок */
.reviews h2:hover {
 color: #0066cc; /* Ярко-синий цвет при наведении */
}

/* Основной контейнер для отзыва */
.testimonial-container {
 position: relative;
 width: 100%;
 /* text-align: center; /* Центровка содержимого */
 background-color: #ffffff; /* Белый фон */
 padding: 20px;
 border-radius: 10px; /* Закругленные углы */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
}

/* Каждый отдельный отзыв */
.testimonial {
 display: none; /* Скрыт по умолчанию */
 animation: fadeIn 0.5s ease-in-out; /* Добавляем анимацию появления */
}

/* Радиокнопка: показать выбранный отзыв */
input[type="radio"]:checked + .testimonial {
 display: block; /* Отображает активный отзыв */
}

/* Заголовок отзыва */
.testimonial h3 {
 font-size: 22px;
 margin-bottom: 15px;
 color: #005092; /* Синий цвет заголовка */
}

/* Текст отзыва */
.testimonial p {
 font-size: 16px;
 line-height: 1.8; /* Высота строки для читабельности */
 color: #353535;
 margin-bottom: 20px;
}

/* Кнопки навигации для переключения отзывов */
.nav-buttons label {
 cursor: pointer;
 font-size: 24px; /* Размер стрелок */
 color: #005092; /* Цвет стрелок */
 transition: color 0.3s ease;
}

.nav-buttons label:hover {
 color: #0066cc; /* Более яркий синий цвет при наведении */
}

/* Карточка отзыва: горизонтальная структура */
.single_testmonial {
 display: flex; /* Горизонтальное расположение элементов */
 flex-direction: row; /* Направление расположения по горизонтали */
 /* align-items: center; /* Выравнивание по вертикали */
 gap: 20px; /* Промежуток между изображением и текстом */
 width: 100%;
}

/* Изображение пользователя в отзыве */
.single_testmonial .thumb {
 width: 150px; /* Размер изображения */
 height: 150px;
 border-radius: 50%; /* Круглое изображение */
 /* overflow: hidden; /* Обрезка содержимого за границей */
 /* border: 3px solid #005092; /* Синяя рамка */
 display: flex; /* Устанавливает элемент как flex-контейнер, позволяя удобно управлять расположением дочерних элементов. */
 align-items: center; /* Выравнивает дочерние элементы по вертикали, относительно центра контейнера. */
 justify-content: center; /* Выравнивает дочерние элементы по горизонтали, помещая их в центр контейнера. */
 /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень вокруг изображения */
 }

/* Текстовая часть отзыва */
.testimonial_area .single_testmonial .info {
 display: flex; /* Устанавливаем flex-контейнер */
 flex-direction: row; /* Размещаем текст по левому краю */
 justify-content: space-between; /* Распределяем текст равномерно */
 align-items: stretch; /* Тянем текст на всю ширину */
 padding-left: 20px; /* Отступ слева */
 padding-right: 15px; /* Отступ справа */
}

/* Текст отзыва */
.testimonial_area .single_testmonial .info p {
 margin: 0; /* Убираем отступы */
 text-align: left; /* Выравнивание текста по левому краю */
 line-height: 1.6; /* Высота строки */
}

.author {
 margin-top: 0px; /* Отступ сверху */
 padding: 0px 0; /* Внутренние отступы сверху и снизу */
 width: 100%; /* Полная ширина контейнера */
 /* background-color: #00d363; /* Зеленый фон */
 display: flex; /* Устанавливаем контейнер как Flexbox */
 justify-content: flex-end; /* Выравниваем содержимое по правому краю */
 align-items: center; /* Центрируем элементы по вертикали */
}

/* Автор отзыва */
.testimonial_area .single_testmonial .info cite {
 margin-top: 5px; /* Отступ сверху */
 /* font-style: normal; /* Отключаем наклонный шрифт */
 color: #333; /* Цвет текста */
 font-size: 14px; /* Размер текста */
 align-self: flex-end; /* Выравнивание элемента по правому краю */
 flex-direction: row-reverse; /* Размещаем текст по левому краю */
 text-align: right; /* Выравнивание содержимого вправо */
 transition: color 0.3s ease; /* Плавный переход цвета */
}

/* Эффект при наведении на автора отзыва */
.testimonial_area .single_testmonial .info cite:hover {
 color: #0066cc; /* Ярко-синий цвет */
 text-decoration: underline; /* Подчёркивание при наведении */
}

/* Анимация для отзывов */
@keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(-10px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* #################### Отзывы / testimonial / Reviews Section ################################# */


/* #################### Навигация / nav ################################# */
 .nav-buttons {
 display: flex;
 justify-content: space-between;
 margin-top: 20px;
 }

 .nav-buttons label {
 cursor: pointer;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 50%;
 padding: 10px;
 font-size: 16px;
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: background-color 0.3s;
 }

 .nav-buttons label:hover {
 background-color: #0056b3;
 color: #ffffff;
 }

/* Проверка завершена */
 input[type="radio"] {
 display: none;
 }


/* ############ Самые выгодные и популярные кредитные карты / popular_category_area ############# */
.popular_category_area {
 background-color: #f5f5f5; /* Нейтральный фон */
 padding: 15px; /* Внутренние отступы */
 box-sizing: border-box; /* Учитывать отступы и границы */
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
 border: 1px solid #dfe7f2; /* Тонкая рамка */
 border-radius: 10px; /* Лёгкое закругление углов */
}

/* Для небольших смартфонов */
@media (max-width: 480px) {
 .popular_category_area {
 padding: 5px; /* Сокращение отступов для очень узких экранов */
 }
}

/* Для смартфонов и планшетов */
@media (max-width: 768px) {
 .popular_category_area {
 padding: 6px; /* Оптимизация для экранов средней ширины */
 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); /* Более мягкая тень для мобильных */
 }
}

/* Для планшетов и небольших ноутбуков */
@media (max-width: 1024px) {
 .popular_category_area {
 padding: 8px; /* Компромисс между компактностью и эстетикой */
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Лёгкая тень для устройств побольше */
 }
}

.popular_category_area .single_category {
 background-color: #FFFFFF; /* Белый фон карточки */
 border-radius: 15px; /* Закруглённые углы */
 padding: 15px; /* Внутренние отступы */
 border: 1px solid transparent; /* Прозрачная рамка для эффекта при наведении */
 transition: border-color 0.3s, color 0.3s, text-decoration 0.3s; /* Плавные переходы для рамки, цвета текста и подчеркивания */
 flex: 1 1 calc(33.333% - 20px); /* Адаптивная ширина карточки */
 box-sizing: border-box; /* Учитывать отступы и границы в размерах */
}

.section_title {
 margin-bottom: 10px;
}

.popular_category_area .single_category p {
 font-size: 16px; /* Размер текста */
 color: #353535; /* Светло-серый цвет текста */
 margin-bottom: 0; /* Отсутствие внешнего отступа */
 font-weight: 400; /* Нормальная жирность текста */
}

.popular_category_area .single_category p span {
 background-color: #E6F3FF; /* Светло-голубой фон */
 color: #0A8CFF; /* Голубой текст */
 font-size: 16px; /* Размер текста */
 font-weight: 400; /* Нормальная жирность текста */
 padding: 6px 17px; /* Внутренние отступы */
 border-radius: 5px; /* Закруглённые углы */
/* margin: 10px 10px 10px 0; /* Отступ справа */
margin-top: 20px;
}

.pspan {
 margin: 10px 10px 10px 0; /* Отступ справа */
/* margin-top: 20px; */
}

.popular_category_area .single_category:hover {
 border-color: #8cf7be; /* Изменение цвета рамки при наведении */
 background-color: #FFFFFF; /* Белый фон */
}

.popular_category_area .single_category a {
 font-size: 20px; /* Размер заголовка */
 font-weight: 400; /* Нормальная жирность текста */
 margin-bottom: 15px; /* Отступ снизу */
 /* color: #0686ee; /* Цвет заголовка */
 transition: color 0.3s, transform 0.2s, box-shadow 0.2s; /* Плавный переход для всех свойств */
}

.popular_category_area .single_category a h4 {
 font-size: 20px; /* Размер заголовка */
 font-weight: 400; /* Нормальная жирность текста */
 margin-bottom: 15px; /* Отступ снизу */
 transition: color 0.3s; /* Плавный переход для цвета текста */
 color: #0686ee; /* Цвет заголовка */
}

.popular_category_area .single_category h4:hover {
 background-color: #FFFFFF; /* Белый фон */
 color: #0360ac; /* Цвет заголовка при наведении */
 transition: color 0.3s; /* Плавный переход для цвета текста */
 text-decoration: none; /* Подчеркивание текста при наведении */
}

.row {
 display: flex; /* Устанавливает Flexbox для размещения дочерних элементов */
 flex-wrap: wrap; /* Позволяет перенос строк для дочерних элементов */
 justify-content: space-between; /* Распределяет элементы по краям контейнера */
 align-items: stretch; /* Растягивает элементы по высоте контейнера */
 gap: 20px; /* Расстояние между карточками */
}

/* Для мобильных устройств */
@media (max-width: 768px) {
 .row {
 flex-direction: column; /* Устанавливает вертикальное расположение элементов */
 align-items: stretch; /* Устанавливает одинаковую ширину для элементов */
 gap: 15px; /* Уменьшает расстояние между элементами */
 }
 
 .row .single_category,
 .row .single_bank {
 width: 100%; /* Обеспечивает полную ширину для каждого элемента */
 }
}



/* ##################### Популярные карты банков / popular_bank_cards ########################### */
.popular_bank_cards {
 background-color: #f5f5f5; /* Светло-серый фон для визуального разделения секции */
 padding: 15px; /* Унифицированные отступы со всех сторон */
 width: 100%; /* Полная ширина секции */
 margin-top: 25px;
 margin-bottom: 10px; /* Отступ снизу для разделения с другими элементами */
 color: #40484e; /* Цвет текста по умолчанию */
 font-size: 16px; /* Размер шрифта для общих текстовых элементов */
 line-height: 1.5; /* Удобочитаемость текста */
}

.popular_bank_cards h3 {
 font-size: 20px; /* Размер заголовка */
 margin-bottom: 25px; /* Отступ снизу для разделения с последующим контентом */
 color: #001D38; /* Тёмный цвет текста заголовка для контраста */
 font-weight: 400; /* Нормальная жирность для аккуратного отображения */
}

.popular_bank_cards input {
 height: 60px; /* Высота поля ввода для удобства использования */
 border: 1px solid #E8E8E8; /* Светло-серая рамка для выделения поля */
 padding: 20px; /* Внутренние отступы для удобного размещения текста */
 border-radius: 5px; /* Закруглённые углы для улучшения визуального восприятия */
 width: 100%; /* Полная ширина поля ввода */
 margin-bottom: 20px; /* Отступ снизу для разделения с другими элементами */
}

.popular_bank_cards input::placeholder {
 color: #7A838B; /* Цвет текста-заполнителя для подсказки */
 font-size: 16px; /* Размер текста-заполнителя */
 font-weight: 400; /* Нормальная жирность для читаемости */
}

.popular_bank_cards input:focus {
 outline: none; /* Убирает стандартное обрамление браузера при фокусе */
}

.popular_bank_cards :focus {
 outline: none; /* Убирает фокусную обводку для всех дочерних элементов */
}

.justify-content-between {
  display: flex; /* Устанавливает Flexbox для контейнера */
  flex-direction: column; /* Распределение элементов по вертикали */
  justify-content: space-between; /* Распределение пространства между элементами */
  align-items: stretch; /* Элементы растягиваются по ширине контейнера */
}

.justify-content-between figure {
 margin: 0px 0 0 0;
 text-align: left;
}

.justify-content-between figcaption {
 font-size: 0.875rem; /* Немного меньше основного шрифта */
 color: #6c757d; /* Приглушённый цвет */
 margin-top: 0px;
}

/* ##################### / Популярные карты банков / popular_bank_cards ########################### */


.text-right {
 text-align: right; /* Выравнивание текста по правому краю */
}

.boxed-btn4 {
 display: inline-block; /* Элемент в строку с возможностью задавать размеры */
 padding: 10px 10px; /* Внутренние отступы для удобного клика */
 font-family: "Roboto", sans-serif; /* Стандартный шрифт */
 font-size: 16px; /* Размер текста */
 font-weight: 500; /* Полужирный текст */
 border-radius: 10px; /* Закруглённые углы для визуальной мягкости */
 text-align: center; /* Выравнивание текста по центру */
 text-transform: capitalize; /* Преобразование первой буквы в заглавную */
 color: #00D363; /* Основной цвет текста */
 border: 1px solid #00D363; /* Зелёная рамка */
 background-color: transparent; /* Прозрачный фон */
 transition: all 0.3s ease; /* Плавный переход для всех изменений */
 cursor: pointer; /* Курсор указателя при наведении */
}

.boxed-btn4:hover {
 color: #fff; /* Белый текст при наведении */
 background-color: #00D363; /* Зелёный фон при наведении */
 border: 1px solid transparent; /* Убирает рамку при наведении */
}

.boxed-btn4:focus {
 outline: none; /* Убирает стандартное обрамление браузера при фокусе */
}


.list_of_banks {
 margin-top: 15px; /* Отступ сверху для списка банков */
}

.list_of_banks .single_bank {
 display: flex; /* Flex-контейнер для выравнивания элементов */
 padding: 30px; /* Внутренние отступы */
 margin-bottom: 12px; /* Отступ снизу */
 border: 1px solid transparent; /* Прозрачная рамка */
 transition: border-color 0.3s; /* Плавное изменение цвета рамки */
 border-radius: 15px; /* Закругленные углы */
 background-color: #ffffff; /* Белый фон */
 border-color: #b9b9b9; /* Цвет рамки при наведении */
}

.list_of_banks .single_bank:hover {
 border-color: #B2F2D0; /* Цвет рамки при наведении */
}

.list_of_banks .single_bank .bank_left {
 display: flex; /* Flex-контейнер для выравнивания элементов */
 gap: 25px; /* Расстояние между дочерними элементами */
 align-items: center; /* Центрирование по вертикали */
}

.list_of_banks .single_bank .bank_left .thumb {
 width: 82px; /* Ширина изображения */
 height: 82px; /* Высота изображения */
 border-radius: 5px; /* Закругленные углы */
 padding: 15px; /* Внутренние отступы */
 background-color: #F5F7FA; /* Цвет фона */
 border: 1px solid #F0F0F0; /* Светло-серая рамка */
}

.list_of_banks .single_bank .bank_left .bank_content h4 {
 font-size: 24px; /* Размер шрифта заголовка */
 margin-bottom: 10px; /* Отступ снизу */
 font-weight: 400; /* Нормальная жирность текста */
 transition: color 0.3s; /* Плавное изменение цвета текста */
}

.list_of_banks .single_bank .bank_left .bank_content h4:hover {
 color: #00D363; /* Цвет текста при наведении */
}

.list_of_banks .single_bank .bank_left .bank_content .location p {
 margin-bottom: 0; /* Убирает отступ снизу */
 font-size: 16px; /* Размер шрифта */
 color: #2f3438; /* Цвет текста */
}


/* ############### Кнопка / Получить карту ################################### */
/* Контейнер для кнопок */
.get_card_button {
 display: flex; /* Flexbox для удобного размещения дочерних элементов */
 flex-direction: column; /* Размещает дочерние элементы в колонку */
 align-items: flex-end; /* Выравнивает элементы по правому краю */
 /* gap: 10px; /* Отступы между элементами */
 }

/* Внешний вид кнопки */
.apply_now {
 margin: 20px 0; /* Отступы сверху и снизу */
}

/* Кнопка "сердечко" */
.get_card_button .apply_now a.heart_mark {
 width: 40px; /* Ширина элемента */
 height: 40px; /* Высота элемента */
 border-radius: 10px; /* Закругленные углы */
 background-color: #EFFDF5; /* Светло-зеленый фон */
 color: #00D363; /* Зеленый текст */
 font-size: 14px; /* Размер текста */
 line-height: 40px; /* Центрирование текста по вертикали */
 text-align: center; /* Выравнивание текста */
 display: inline-block; /* Элемент в строке */
 transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Анимация для фона, текста и трансформации */
}

.get_card_button .apply_now a.heart_mark:hover {
 background-color: #00D363; /* Зеленый фон при наведении */
 color: #fff; /* Белый текст при наведении */
 transform: scale(1.1); /* Легкое увеличение при наведении */
}

.get_card_button .date {
 text-align: right; /* Выравнивание текста по правому краю */
 margin-top: 10px; /* Отступ сверху */
}

.get_card_button .date p {
 margin-bottom: 0; /* Убирает отступ снизу */
 font-size: 14px; /* Размер шрифта */
 font-style: italic; /* Курсив */
 color: #7A838B; /* Цвет текста */
}
.popular_bank_cards .list_of_banks .single_bank .bank_left .bank_content,
.bank_details_area .single_bank .bank_left .bank_content {
 display: inline-block; /* Устанавливает элементы в одну строку */
 vertical-align: top; /* Выравнивание по верхнему краю */
}

@media (max-width: 767px) {
 .popular_bank_cards .list_of_banks .single_bank .bank_left .bank_content,
 .bank_details_area .single_bank .bank_left .bank_content {
 display: block; /* Устанавливает блочное отображение для элементов */
 }
}

.popular_bank_cards .list_of_banks .single_bank .bank_left .bank_content .location,
.bank_details_area .single_bank .bank_left .bank_content .location {
 margin-right: 50px; /* Отступ справа для больших экранов */
}

@media (max-width: 767px) {
 .popular_bank_cards .list_of_banks .single_bank .bank_left .bank_content .location,
 .bank_details_area .single_bank .bank_left .bank_content .location {
 margin-right: 10px; /* Уменьшенный отступ справа для мобильных устройств */
 }
}

.read_more {
 color: #005092; /* Основной синий цвет текста */
 text-decoration: underline; /* Подчеркивание текста */
 font-weight: 500; /* Полужирный шрифт для красоты */
 transition: color 0.3s ease, text-decoration 0.3s ease; /* Плавный переход цвета и стиля */
}

.read_more:hover {
 color: #0360ac; /* Цвет при наведении */
 text-decoration: none; /* Убирает подчеркивание при наведении */
 /* transform: scale(1.05); /* Легкое увеличение ссылки */
}

.read_more:active {
 transform: scale(0.96); /* Легкий эффект "нажатия" */
}

.get_card_button {
 display: flex; /* Устанавливает контейнер как Flexbox для удобного размещения дочерних элементов */
 flex-direction: column; /* Размещает дочерние элементы по вертикали (в колонку) */
 align-items: flex-end; /* Выравнивает дочерние элементы по правому краю (по горизонтали) */
}

.get_card_button .apply_now {
 margin: 10px 0; /* Отступы сверху и снизу */
}

.get_card_button .apply_now a.heart_mark {
 width: 40px; /* Ширина кнопки */
 height: 40px; /* Высота кнопки */
 border-radius: 5px; /* Закругленные углы */
 color: #00D363; /* Основной цвет текста */
 font-size: 14px; /* Размер шрифта */
 line-height: 40px; /* Вертикальное выравнивание текста */
 text-align: center; /* Текст по центру */
 display: inline-block; /* Блочный элемент в строке */
 background-color: #EFFDF5; /* Светлый фон */
 transition: background 0.3s, color 0.3s; /* Плавный переход при наведении */
}

.get_card_button .apply_now a.heart_mark:hover {
 background-color: #00D363; /* Изменение фона при наведении */
 color: #fff; /* Белый текст при наведении */
}

.get_card_button .date {
 text-align: right; /* Выравнивание текста по правому краю */
 margin-top: 10px; /* Отступ сверху */
}

@media (max-width: 768px) { /* Адаптация для мобильных устройств */
 .get_card_button {
 align-items: flex-start; /* Выравнивание кнопок по левому краю */
 }

 .get_card_button .date {
 text-align: left; /* Выравнивание текста по левому краю */
 }
}
/* ############### / Кнопка / Получить карту ################################### */


/* ######## Footer ######################################################## */
.footer_logo {
 margin-bottom: 20px; /* Нижний отступ */
}

.footer_logo img {
 display: block; /* Убирает пробелы между изображениями */
 margin: 0; /* Сбрасывает отступы вокруг изображения */
}

.footer {
 background-color: #001d38; /* Темный фон */
 color: #fff; /* Белый текст */
 /* text-align: center; /* Центровка текста */
 padding: 20px 0; /* Внутренние отступы */
 font-size: 16px; /* Размер шрифта */
 background-repeat: no-repeat; /* Без повторения фона */
 background-position: center; /* Центрирование фона */
 background-size: cover; /* Растягивание фона по контейнеру */
}

.footer p {
 font-family: "Roboto", sans-serif; /* Шрифт */
 color: #AAB1B7; /* Светло-серый текст */
 font-size: 14px; /* Размер текста */
 font-weight: 400; /* Нормальная жирность */
 line-height: 24px; /* Высота строки */
}

.footer p a {
 color: #AAB1B7; /* Цвет ссылки */
 transition: color 0.3s; /* Плавный переход цвета */
}

.footer p a:hover {
 color: #FFFFFF; /* Белый цвет при наведении */
}

.footer ul li {
 display: inline-block; /* Элементы в строку */
 transition: 0.3s; /* Плавный переход для всех изменений */
}

.footer ul li a {
 font-size: 1em; /* Размер шрифта */
 padding: 0.5em 1.2em; /* Внутренние отступы */
 display: inline-block; /* Блочный элемент в строке */
 text-align: center; /* Центровка текста */
 border-radius: 15px; /* Закругленные углы */
 margin: 0 10px 10px 0; /* Отступы между элементами */
 color: #91afcc; /* Цвет текста */
 border: 1px solid #334A60; /* Граница */
 transition: background 0.3s, color 0.3s, border-color 0.3s; /* Плавные переходы */
 min-width: min-content; /* Минимальная ширина для корректного отображения текста */
}

.footer ul li a:hover {
 background-color: #00D363; /* Зеленый фон при наведении */
 color: #fff; /* Белый текст при наведении */
 border-color: transparent; /* Убираем границу */
}
.footer .footer_top {
 padding-top: 15px;
 padding-bottom: 30px;
}
.divb {
 border-left: 1px solid rgba(128, 128, 128, 0.5); /* Левая граница со светлым цветом */
 padding-left: 12px; /* Отступ слева для внутреннего содержания блока */
 margin-bottom: 25px;
}

/* ##### [ ↥ Вернуться в начало страницы ] ####### */
/* Контейнер для кнопки */
.back-to-top-container {
  width: 100%; /* Полная ширина контейнера */
  display: flex; /* Flexbox для выравнивания */
  justify-content: flex-end; /* Выравнивание вправо */
  margin-top: 20px; /* Отступ сверху */
  padding: 10px; /* Внутренние отступы */
  background-color: #f9f9f9; /* Светлый фон для выделения */
  border-top: 1px solid #e0e0e0; /* Верхняя граница */
}

/* Кнопка "Вернуться в начало страницы" */
.back-to-top {
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  color: #ffffff;
  background-color: #0073e6;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-align: center; /* Выравнивание текста */
}

.back-to-top:hover {
  background-color: #005bb5;
  transform: scale(1.02);
  color: #ffffff;
}

.back-to-top::before {
  content: '↥'; /* Значок для ссылки */
  margin-right: 8px;
  font-size: 18px;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .back-to-top-container {
    padding: 8px;
  }

  .back-to-top {
    padding: 8px 12px; /* Уменьшаем размеры кнопки */
    font-size: 12px; /* Уменьшаем размер текста */
  }
}
/* #####  / [ ↥ Вернуться в начало страницы ] ####### */

/* ######## Footer navigation ######################################################## */
/* Общий стиль для навигации */
.blog-pagination {
  display: flex;
  justify-content: center;
  margin: 10px 0; /* Отступ сверху и снизу */
}

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 3px; /* Промежуток между элементами */
}

.page-item {
  display: inline-block;
}

.page-link {
  display: block;
  padding: 6px 10px; /* Внутренние отступы для кнопки */
  font-size: 14px;
  color: #0073e6;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.page-link:hover {
  background-color: #e9ecef;
  color: #005bb5;
}

.page-item.active .page-link {
  background-color: #007bff;
  color: #ffffff;
  border-color: #007bff;
  pointer-events: none;
}

.page-link[aria-label="Previous"],
.page-link[aria-label="Next"] {
  font-size: 16px; /* Увеличенный размер для стрелок */
  font-weight: bold;
}
/* ######## / Footer navigation ######################################################## */

.footer_hr {
    border: 0;
    height: 1px;
    background: #383838; /* Dark blue color */
}

.footer_title {
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;
  text-transform: capitalize;
  margin-bottom: 4px;
  font-family: "Roboto", sans-serif;
}
@media (max-width: 767px) {
 .footer_title {
    margin-bottom: 0px;
  }
}