.custom-button {
  display: inline-block;
  width: 270px; /* Ширина кнопки */
  height: 50px; /* Высота кнопки */
  padding: 0; /* Убираем внутренние отступы, чтобы не мешали высоте */
  font-size: 16px; /* Размер текста */
  font-family: 'Open Sans', sans-serif; /* Шрифт */
  font-weight: 700; /* Жирный текст */
  letter-spacing: 2px; /* Разрежение текста */
  text-align: center; /* Выравнивание текста по горизонтали */
  text-decoration: none; /* Убираем подчёркивание */
  color: #478ac9; /* Цвет текста */
  background-color: transparent; /* Прозрачный фон */
  border: 2px solid #478ac9; /* Рамка */
  border-radius: 10px; /* Закругление углов */
  transition: all 0.3s ease; /* Плавный переход */
  line-height: 50px; /* Выравнивание текста по вертикали */
}

.custom-button:hover {
  background-color: #478ac9; /* Цвет фона при наведении */
  color: #fff; /* Цвет текста при наведении */
}



.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent; /* Прозрачный фон */
    background-image: url('http://bipatterns.ru/images/headers/header_data.jpg'); /* Фоновое изображение */
    background-size: cover; /* Масштабирование изображения */
    background-position: center; /* Позиция изображения */
    background-repeat: no-repeat; /* Запрет повторения */
}


.container-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.container-search {
   margin-left: 20px; /*  Отступ между меню и поиском */

}



/* Отступ для логотипа */
.brand-logo {
    margin-left: 100px !important; /* Отступ от левого края */
}

/* Цвет шрифта для пунктов меню */
.mod-menu.nav li a {

    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) !important; /* Радиальный градиент */
    padding: 8px 12px !important; /* Отступы вокруг текста */
    border-radius: 4px !important; /* Закругленные углы */
    display: inline-block; /* Фон только вокруг текста */
    text-decoration: none; /* Убираем подчеркивание */
    transition: background 0.3s ease; /* Плавное изменение фона */
}

/* Стили при наведении на пункт меню */
.mod-menu.nav li a:hover {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%) !important; /* Темнее градиент при наведении */
}

/* ====== анимация таблицы ===========*/
/* Анимация для левой колонки (слева направо) */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Анимация для правой колонки (справа налево) */
@keyframes slideInFromRight {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Применение анимации к левой колонке */
.slide-left {
    animation: slideInFromLeft 1s ease-out forwards;
}

/* Применение анимации к правой колонке */
.slide-right {
    animation: slideInFromRight 1s ease-out forwards;
}