.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

a {
  text-decoration: none;
  /* Убираем подчеркивание */
  color: inherit;
  /* Цвет текста наследуется от родительского элемента */
}

html,
body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Высота равна 100% высоты видимой области */
}

main {
  flex: 1;
  /* Основной контент занимает всю оставшуюся высоту */
}

body {
  font-family: "Roboto", sans-serif;
  width: 1370px;
  /* Фиксированная ширина документа */
  margin: 0 auto;
  /* Центрирование по горизонтали */
  padding: 0;
  box-sizing: border-box;
}

header {
  /* width: 1080px; */
  /* Фиксированная ширина */
  /* margin: 0 auto; */
  /* Центрирование по горизонтали */
  display: flex;
  /* Для удобной компоновки содержимого */
  align-items: center;
  /* Выравнивание по вертикали */
  justify-content: space-between;
  /* Равномерное распределение содержимого */
  padding: 10px 0;
  /* Отступы сверху и снизу */
  box-sizing: border-box;
  /* Учитывать отступы в ширину */
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

header .logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

header .logo {
  height: 70px;
  width: auto;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 50px;
  margin: 0;
  padding: 0;
}

header nav ul li {
  margin: 0;
}

header nav a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: 16px;
}

/* Контейнер для кнопок */
.button-container {
  display: flex;
  /* Используем Flexbox */
  gap: 20px;
  /* Промежуток между кнопками */
  justify-content: center;
  /* Центрируем кнопки по горизонтали */
  align-items: center;
  /* Центрируем по вертикали */
}

/* Общий стиль кнопок */
.register-button {
  background-color: #007bff;
  /* Синий цвет фона */
  color: white;
  /* Белый текст */
  font-size: 16px;
  /* Размер шрифта */
  font-weight: bold;
  /* Жирное начертание */
  border: none;
  /* Убираем границу */
  border-radius: 50px;
  /* Закругляем углы */
  padding: 10px 20px;
  /* Внутренние отступы */
  display: flex;
  /* Внутренний flex для содержимого кнопки */
  align-items: center;
  /* Центрируем текст и стрелку */
  gap: 5px;
  /* Промежуток между текстом и стрелкой */
  cursor: pointer;
  /* Указатель при наведении */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Тень */
  transition: background-color 0.3s ease;
  /* Плавный переход */
}

.register-button:hover {
  background-color: #0056b3;
  /* Темно-синий при наведении */
}

/* Стиль кружка со стрелкой */
.arrow-circle {
  background-color: white;
  /* Белый фон кружка */
  color: black;
  /* Черная стрелка */
  font-size: 20px;
  /* Размер стрелки */
  width: 24px;
  /* Ширина кружка */
  height: 24px;
  /* Высота кружка */
  display: flex;
  /* Центрируем содержимое */
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* Делаем из элемента круг */
}

.search-bar button {
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
}

.main-banner {
	width: 100%;
	height: auto;
	margin-top: 0;
	background-size: cover;
	background-position: center;
	border-radius: 0;
	color: white;
	position: relative;
	/* Для позиционирования элементов */
}

.banner-image {
	width: 100%;
	height: 300px;
	display: block;
	border-radius: 0;
}

.banner-content {
	position: absolute;
	/* Размещаем контент поверх изображения */
	top: 50%;
	/* Центрирование по вертикали */
	left: 50%;
	/* Центрирование по горизонтали */
	transform: translate(-50%, -50%);
	/* Центрирование по центру */
	text-align: center;
	/* Центрируем текст */
	color: white;
	/* Белый цвет текста */
}

.banner-title {
	font-size: 48px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #0066ff;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 20px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}

.search-button .arrow {
	margin-left: 10px;
	font-size: 18px;
}

.search-button:hover {
	background-color: #0052cc;
}

.services {
  padding: 20px 20px;
  text-align: center;
}

/* Общая стилизация секции */
.full-width-section {
  width: 1370px;
  /* На всю ширину экрана */
  background-color: #f5f5f5;
  /* Светлый фон */
  padding: 50px 0;
  /* Отступы сверху и снизу */
  box-sizing: border-box;
  /* Учитываем padding в ширине */
  margin-top: 30px;
  border-radius: 10px;
}

/* Контент внутри секции */
.section-content {
  display: flex;
  /* Flexbox для расположения контента */
  align-items: flex-start;
  /* Выровнять по верхнему краю */
  justify-content: flex-start;
  /* Начало контента по горизонтали */
  max-width: 1200px;
  /* Максимальная ширина */
  margin: 0 auto;
  /* Центрирование секции */
  gap: 30px;
  /* Отступ между изображением и текстом */
}

/* Стили для изображения */
.section-image {
  width: 45%;
  /* Ширина изображения */
  height: auto;
  /* Сохраняем пропорции */
  border-radius: 10px;
  /* Закругленные углы */
}

/* Текстовый блок */
.section-text {
  width: 55%;
  /* Ширина текстового блока */
  color: #333;
  font-family: "Roboto", sans-serif;
}

/* Заголовок над текстом */
.section-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  text-align: center;
  /* Центрирование заголовка */
  margin-bottom: 20px;
  /* Отступ вниз от заголовка */
}

/* Два столбца с текстом */
.text-columns {
  display: grid;
  /* Используем Grid Layout */
  grid-template-columns: 1fr 1fr;
  /* Два равных столбца */
  gap: 15px;
  /* Отступ между столбцами */
}

.text-columns p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.about-image {
  display: block;
  max-width: 100%;
  /* Картинка не будет больше ширины контейнера */
  height: auto;
  /* Автоматическое сохранение пропорций */
}

.slider-container {
  /* Светлый фон */
  background-color: #f9f9f9;
  /* Отступы сверху, снизу, слева и справа */
  padding: 50px 20px;
  /* Опционально, скругление углов */
  border-radius: 10px;
  max-width: 1370px;
  margin-top: 30px;
  text-align: center;
}

.slider-title {
  font-size: 36px;
  /* Размер текста */
  font-weight: bold;
  /* Жирность */
  text-align: left;
  /* Выравнивание влево */
  margin: 0 0 20px 0;
  /* Убираем отступы сверху и добавляем отступ снизу */
  color: #000;
  /* Цвет текста */
}

.slider-underline {
  width: 80px;
  height: 3px;
  background-color: #007bff;
  /* Синий цвет */
  margin: 0 auto 20px;
  border: none;
}

.slider {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.slider-wrapper {
  overflow: hidden;
  flex-grow: 1;
}

.slider-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slider-item {
  min-width: 300px;
  margin: 0 15px;
  text-align: center;
  background-color: #f8f9fa;
  /* Светло-серый */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.slider-item img {
  width: 50%;
  height: auto;
  border-radius: 8px 8px 0 0;
}

.slider-item p {
  font-family: "Arial", sans-serif;
  font-size: 16px;
  margin: 10px 0;
  color: #000;
}

.slider-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  color: #007bff;
}

.slider-btn:hover {
  color: #0056b3;
}

.footer {
  background-color: #e3f2fd;
  /* Светло-голубой фон */
  border-top: 2px solid #bbdefb;
  /* Граница вверху */
  padding: 5px 0;
  /* Отступ сверху */
  margin-top: 30px;
}

.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* max-width: 1080px; */
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
  height: 50px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.footer-logo img {
  height: 70px;
}

.footer-logo p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
}

.footer-info,
.footer-address {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #000;
}

/* .footer-info strong,
.footer-address strong {
	display: block;
	font-size: 14px;
	margin-bottom: 5px;
} */

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #555;
}

.services-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* Для переноса элементов при ограниченной ширине */
	justify-content: center;
	gap: 30px;
	margin-top: 40px;
}

.services-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 250px;
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	transition: transform 0.3s, background-color 0.3s;
}

.services-button:hover {
	transform: scale(1.05);
	background-color: #eef2f7;
}

.services-button img {
	width: 100%;
	height: auto;
	max-height: 150px;
	margin-bottom: 10px;
}

.services-text {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}


.registration-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 90vh;
}

/* Заголовок */
header h1 {
	font-size: 24px;
	font-weight: bold;
	margin: 20px 0;
	text-align: center;
}

/* Контейнер формы */
.registration-container {
	background-color: #fff;
	padding: 20px 30px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	width: 100%;
	max-width: 400px;
}

.registration-container h2 {
	font-size: 20px;
	margin-bottom: 20px;
	color: #333;
}

/* Форма */
.registration-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.registration-form label {
	text-align: left;
	font-size: 14px;
	color: #333;
}

.registration-form input {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
}

.registration-form button {
	background-color: #007bff;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 5px;
	padding: 10px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.registration-form button:hover {
	background-color: #0056b3;
}

.esia-button {
  margin-top: 15px;
  /* Добавляем отступ сверху */
  background-color: #007bff;
  /* Синий фон */
  color: white;
  /* Белый текст */
  font-size: 16px;
  /* Размер шрифта */
  font-weight: bold;
  /* Жирное начертание */
  border: none;
  /* Убираем границу */
  border-radius: 5px;
  /* Закругляем углы */
  padding: 10px;
  /* Внутренние отступы */
  cursor: pointer;
  /* Указатель при наведении */
  transition: background-color 0.3s ease;
  /* Плавный переход */
  width: 400px;
}

.esia-button:hover {
  background-color: #0056b3;
  /* Темно-синий при наведении */
}