* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.animated-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: linear-gradient(130deg, #fff, #4e6377, #9bc6fa);
	background-size: 400% 400%;
	animation: gradientAnimation 15s ease infinite;
	opacity: 0.8;
}

@keyframes gradientAnimation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
body {
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	color: #fefefe;
	user-select: none;
}

/*Menu*/
/* Стили для header */
.header {
	height: 70px;
	position: fixed;
	top: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	background: rgba(155, 198, 250, 0.3); /* Полупрозрачный фон */
	z-index: 1000;
	transition: background 0.5s ease; /* Плавный переход для фона */
}

.logo {
	margin-left: 5%;
}

.logo img {
	height: 50px;
	position: relative; /* Для использования z-index */
	z-index: 10; /* Исправлено */
}

/* Navbar стили */
.navbar {
	margin: 0;
}

.navbar ul {
	display: flex;
	justify-content: space-around;
	list-style: none;
	gap: 2rem;
	margin-top: 1%;
	margin-right: 20px;
}

.navbar li {
	margin: 0;
}

.navbar a {
	text-decoration: none;
	color: white;
	font-weight: 500;
	transition: color 0.3s;
	font-size: 20px;
}

.navbar a:hover {
	color: #913534;
}

/* Стили для бургер-меню */
.burger-menu {
	display: none;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
}

.burger-line {
	width: 30px;
	height: 4px;
	background-color: white;
	border-radius: 5px;
}

/* Адаптивные стили для мобильных */
@media (min-width: 650px) and (max-width: 900px) {
	.header {
		width: 38.3%;
		position: fixed;
	}

	/* Скрываем меню по умолчанию на мобильных */
	.navbar ul {
		display: none;
		width: 100%;
		position: absolute;
		top: 65px; /* Высота header */
		left: 0;
		background: rgba(155, 198, 250, 0.3); /* Полупрозрачный фон */
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		padding: 1rem 0;
	}

	.navbar ul.active {
		display: flex; /* Показываем меню, когда класс active добавлен */
	}

	/* Показываем бургер-меню */
	.burger-menu {
		display: flex; /* Показываем кнопку бургер-меню на мобильных */
	}

	.navbar a {
		font-size: 18px;
	}
}

@media (max-width: 650px) {
	.header {
		width: 100%;
		position: fixed;
	}

	/* Скрываем меню по умолчанию на мобильных */
	.navbar ul {
		display: none;
		width: 100%;
		position: absolute;
		top: 65px; /* Высота header */
		left: 0;
		background: rgba(155, 198, 250, 0.8); /* Полупрозрачный фон */
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		padding: 1rem 0;
	}

	.navbar ul.active {
		display: flex; /* Показываем меню, когда класс active добавлен */
	}

	/* Показываем бургер-меню */
	.burger-menu {
		display: flex; /* Показываем кнопку бургер-меню на мобильных */
	}

	.navbar a {
		font-size: 18px;
	}
}
.img {
	position: relative;
	width: 100%;
	height: 90vh; /* Высота контейнера на весь экран */
	margin: 0 auto;
	overflow: hidden; /* Прячет части изображения, выходящие за пределы контейнера */
}

.img img {
	width: 100%;
	height: 100%; /* Задаем высоту 100% для картинки */
	object-fit: cover; /* Изображение обрезается, но сохраняет пропорции */
}

.centered-heading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 5rem;
	font-weight: bold;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Для улучшения видимости текста на фоне */
	text-align: center;
}

/* Адаптивность */
@media (max-width: 768px) {
	.centered-heading {
		font-size: 3rem; /* Уменьшение шрифта на мобильных устройствах */
	}
}

@media (max-width: 480px) {
	.centered-heading {
		font-size: 2rem; /* Еще меньше шрифт для маленьких экранов */
	}
}

/* Класс для скрытия меню */
.navbar.hidden {
	display: none; /* Скрывает меню */
}

section {
	margin: 0;
	padding: 0;
	perspective: 1px;
	transform-style: preserve-3d;
	height: 100%;
	overflow-x: hidden;
}
.text {
	text-align: center; /* Выравнивание по центру по горизонтали */
	font-size: 5rem; /* Размер шрифта */
	color: white; /* Цвет текста */
	font-weight: bold;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Тень для контраста на фоне */
	margin: 0; /* Убираем отступы, если нужно */
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
}

h1 {
	font-size: 220%;
}

p {
	font-size: 100%;
	line-height: 150%;
	color: #333;
}

.slide {
	position: relative;
	box-sizing: border-box;
	transform-style: inherit;
	margin: 5% 5%;
}

.images > img {
	position: absolute;
	top: 50%;
	left: 35%;
	width: 620px;
	height: 420px;
	transform: translateZ(0.25px) scale(0.75) translateX(-94%) translateY(-100%)
		rotate(2deg);
	padding: 10px;
	border-radius: 5px;
	background: rgba(240, 230, 220, 0.7);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
	  object-fit: cover; /* Сохраняет пропорции внутри заданных размеров */

}

.images > img:last-of-type {
	transform: translateZ(0.4px) scale(0.6) translateX(-104%) translateY(-40%)
		rotate(-5deg);
}

.slide:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.title {
	width: 50%;
	padding: 5%;
	border-radius: 2%;
	background: rgba(240, 230, 220, 0.7);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
	text-align: justify;
	color: black;
}

.title > h1{
	margin-bottom: 20px;
}

.slide:nth-child(2n) .title {
	margin-left: 0;
	margin-right: auto;
}

.slide:nth-child(2n + 1) .title {
	margin-left: auto;
	margin-right: 0;
}

.slide,
.slide:before {
	background: 50% 50% / cover;
}

@media (max-width: 480px) {
	.slide {
		padding: 0px 2%;
	}

	.title > h1 {
		font-size: 1.5em; /* Пропорциональная единица для адаптивности */
		text-align: center; /* Центрируем заголовок */
		margin-bottom: 10px;/* Отступ снизу */
	}

	p {
		font-size: 0.8em; /* Универсальный размер для мобильных */
		text-align: justify; /* Удобочитаемость текста */
		margin: 0 10px; /* Отступы по бокам */
	}

	.text {
		visibility: hidden; /* Скрытие текста, если нужно */
	}

	.images > img {
		position: fixed; /* Фиксируем изображения относительно окна */
		top: 17%; /* Центрируем по вертикали */
		left: 50%; /* Центрируем по горизонтали */
		width: 100%; /* Оптимальный размер изображения */
		height: 250px; /*Сохраняем пропорции */
		transform: translate(-50%, -50%) scale(1) rotate(5deg); /* Центровка и трансформация */
		border-radius: 10px; /* Добавляем мягкие скругления */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Лёгкая тень для визуального эффекта */
		z-index: -1; /* Располагаем изображения за другими элементами */
		object-fit: cover;
	}
	.images{
		margin-bottom: 25vh;
		margin-top:0px;
		padding-bottom: 10vh;
		height: 0px !important;
	}

	.title {
		margin-top: 100%;
		width: 100%; /* Делаем заголовок на всю ширину */
		height: auto;
		padding: 5%; /* Оптимальные отступы */
		text-align: center; /* Центрируем заголовок */
	}
}

/* From Uiverse.io by satyamchaudharydev */
/* Контейнер для кнопки */
#apply {
	display: flex;
	justify-content: flex-end; /* Выровнять по правой стороне */
	padding: 20px; /* Отступ от края */
}

/* Основной стиль кнопки */
.button-apply {
	position: relative;
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
	padding-block: 0.5rem;
	padding-inline: 1.25rem;
	background-color: #9bc6fa;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffff;
	gap: 10px;
	font-weight: bold;
	border: 3px solid #ffffff4d;
	outline: none;
	overflow: hidden;
	font-size: 25px;
	cursor: pointer;
}

.icon {
	width: 28px;
	height: 26px;
	transition: all 0.3s ease-in-out;
}

.button-apply:hover {
	transform: scale(1.05);
	border-color: #fff9;
}

.button-apply:hover .icon {
	transform: translate(4px);
}

.button-apply:hover::before {
	animation: shine 1.5s ease-out infinite;
}

.button-apply::before {
	content: '';
	position: absolute;
	width: 100px;
	height: 100%;
	background-image: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.8),
		rgba(255, 255, 255, 0) 70%
	);
	top: 0;
	left: -100px;
	opacity: 0.6;
}

@keyframes shine {
	0% {
		left: -100px;
	}
	60% {
		left: 100%;
	}
	to {
		left: 100%;
	}
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
	#apply {
		justify-content: center; /* Центрировать кнопку на мобильных */
	}

	.button-apply {
		font-size: 24px; /* Уменьшение шрифта для мобильных */
		padding-inline: 1rem; /* Меньше отступов */
	}

	.icon {
		width: 22px; /* Меньший размер иконки */
		height: 22px;
	}
}

/*footer*/
footer {
	background: #111;
}

.new_footer_area {
	background: #9bc6fa;
}

.new_footer_top {
	padding: 50px 0px 270px;
	position: relative;
	overflow-x: hidden;
}
.new_footer_area .footer_bottom {
	padding-top: 5px;
	padding-bottom: 50px;
}
.footer_bottom {
	font-size: 14px; /**/
	font-weight: 300;
	line-height: 20px;
	color: #7f88a6;
	padding: 27px 0px;
}
.new_footer_top .company_widget p {
	font-size: 16px; /**/
	font-weight: 300;
	line-height: 28px;
	color: #6a7695;
	margin-bottom: 20px;
}

a:hover,
a:focus,
.btn:hover,
.btn:focus,
button-apply:hover,
button-apply:focus {
	text-decoration: none;
	outline: none;
}

.new_footer_top .f_widget.about-widget .f_list li a {
	display: inline-block; /* Ensure it behaves like a block for transform */
	transition: color 0.2s ease-out, transform 0.2s ease-out,
		font-size 0.2s ease-out;
	min-height: 30px;
}

.new_footer_top .f_widget.about-widget .f_list li a:hover {
	color: #913534;
	transform: translate(5%, -5%) scale(1.1); /* Change translate to (0, -50%) */
	font-size: 1.2em; /* Adjust the size as needed */
}

.new_footer_top .f_widget.about-widget .f_list li {
	margin-bottom: 11px;
}
.f_widget.about-widget .f_list li:last-child {
	margin-bottom: 0px;
}
.f_widget.about-widget .f_list li {
	margin-bottom: 15px;
}
.f_widget.about-widget .f_list {
	margin-bottom: 0px;
}

.ti-facebook:before {
	content: '\e741';
}
.ti-twitter-alt:before {
	content: '\e74b';
}
.ti-vimeo-alt:before {
	content: '\e74a';
}
.ti-pinterest:before {
	content: '\e731';
}

.bi {
	color: #000;
	padding: 3%;
	font-size: 25px;
	display: inline-block; /* Ensure it behaves like a block for transform */
	transition: color 0.2s ease-out, transform 0.2s ease-out,
		font-size 0.2s ease-out;
	min-height: 30px;
}

.bi:hover {
	color: #913534;
	color: #913534;
	transform: translate(5%, -5%) scale(1.1);
}

.new_footer_top .f_social_icon a:hover {
	background: #913534;
	border-color: #913534;
	color: white;
}
.new_footer_top .f_social_icon a + a {
	margin-left: 4px;
}
.new_footer_top .f-title {
	margin-bottom: 30px;
	color: black;
}
.f_600 {
	font-weight: 700;
}
.f_size_18 {
	font-size: 28px; /**/
}

.new_footer_top .f_widget.about-widget .f_list li a {
	color: black;
}

.new_footer_top .footer_bg {
	position: absolute;
	bottom: 0;
	background: url('./footer_bg.webp') no-repeat scroll center 0;
	width: 100%;
	height: 266px;
}

.new_footer_top .footer_bg .footer_bg_one {
	background: url('./volks.gif') no-repeat center center;
	width: 330px;
	height: 105px;
	background-size: 100%;
	position: absolute;
	bottom: 0;
	left: 30%;
	-webkit-animation: myfirst 22s linear infinite;
	animation: myfirst 22s linear infinite;
}

.new_footer_top .footer_bg .footer_bg_two {
	background: url('./cyclist.gif') no-repeat center center;
	width: 88px;
	height: 100px;
	background-size: 100%;
	bottom: 0;
	left: 38%;
	position: absolute;
	-webkit-animation: myfirst 30s linear infinite;
	animation: myfirst 30s linear infinite;
}
.f_list a {
	text-decoration: none;
}

@-moz-keyframes myfirst {
	0% {
		left: -25%;
	}
	100% {
		left: 100%;
	}
}

@-webkit-keyframes myfirst {
	0% {
		left: -25%;
	}
	100% {
		left: 100%;
	}
}

@keyframes myfirst {
	0% {
		left: -25%;
	}
	100% {
		left: 100%;
	}
}
.new_footer_area {
	background-color: #9bc6fa; /* Light background color */
	color: #343a40; /* Dark text color */
	padding: 50px 0; /* Vertical padding */
}

.footer-container {
	width: 100%; /* Full width */
	margin: auto; /* Center the container */
	display: flex; /* Flexbox layout */
	flex-direction: column; /* Stack items vertically by default */
	align-items: center; /* Center items */
}

.row {
	display: flex; /* Flexbox layout */
	flex-wrap: wrap; /* Allow wrapping for mobile screens */
	justify-content: center; /* Center columns */
	width: 100%; /* Full width for the row */
}

.col-lg-4,
.col-md-6 {
	flex: 1; /* Equal width for all columns */
	max-width: 33%; /* Max width for large screens */
	min-width: 250px; /* Minimum width to avoid too narrow columns */
	padding: 0 15px; /* Horizontal padding */
	box-sizing: border-box; /* Include padding in width */
}

.footer_bg {
	position: relative; /* For background elements */
}

/* Responsive Styles */
@media (max-width: 768px) {
	.col-lg-4,
	.col-md-6 {
		max-width: 100%; /* Full width for each column on mobile */
		flex: 1 0 100%; /* Allow full width and prevent shrink */
	}
}

.f_list a {
	text-decoration: none; /* Remove underline from links */
	transition: color 0.3s; /* Smooth transition for hover effect */
}

.f_list {
	list-style-type: none; /* Remove default list item dots */
	padding: 0; /* Remove default padding */
	margin: 0; /* Remove default margin */
}

/* WebKit browsers */
::-webkit-scrollbar {
	width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
	background: black; /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
	background: #4e6377; /* Color of the scrollbar thumb */
	border-radius: 10px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
	background: #9bc6fa; /* Color on hover */
}