:root {
	--width: 220px;
	--gap: 1rem;
	--speed: 500ms;
}

* {
	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 {
	height: 100%;
	overflow-x: hidden;
	color: #fefefe;
	user-select: none;
	font-family: Arial, Helvetica, sans-serif;
}

/*Menu*/
.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;
}

/* 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 (max-width: 768px) {
	/* Скрываем меню по умолчанию на мобильных */
	.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;
	}
}

/*Header kartinki*/

.card-card > img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.container-for-card {
	position: relative;
	width: 100%;
	height: 80vh;
	overflow: hidden;
}

.slider-for-card {
	position: absolute;
	top: 5vh;
	width: 100vw;
	height: 80vh;
	overflow: hidden;
	perspective: 300px;
	perspective-origin: 50% 50%;
}

.card-card {
	position: absolute;
	top: 35%;
	left: 50%;
	width: 50%;
	height: 400px;
	border-radius: 10px;
	overflow: hidden;
	transform: translate3d(-50%, -50%, 0);
	background-color: #000;
}

/* Мобильная версия */
@media (max-width: 500px) {
	.slider-for-card {
		top: 15vh; /* Уменьшаем расстояние сверху для мобильных устройств */
		height: 80vh; /* Уменьшаем высоту слайдера на мобильных устройствах */
	}

	.card-card {
		top: 30%; /* Опускаем карточку немного ниже */
		width: 80%; /* Увеличиваем ширину карточки для мобильных устройств */
		height: 250px; /* Уменьшаем высоту карточки */
	}

	.copy {
		top: 30%; /* Понижаем блок с текстом для мобильных */
		width: 90%; /* Увеличиваем ширину блока с текстом */
	}

	.copy > h1 {
		font-size: 8vw; /* Увеличиваем размер шрифта для мобильных устройств */
	}

	/* Уменьшаем прозрачность картинки на мобильных */
	.card-card img {
		opacity: 0.85; /* Меньше прозрачности для улучшения читаемости текста */
	}
}
.card-card img {
	position: absolute;
	opacity: 0.75;
}

.copy {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.copy > h1 {
	position: relative;
	text-align: center;
	font-size: 6vw;
	font-weight: 300;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: #dfe1c8;
}

.copy > h1 span {
	position: relative;
	display: inline-block;
}

/*cards*/
#cards {
	margin: 5rem;
	position: relative;
}
.card--detail > h1,
.card--detail > h2 {
	font-size: 3rem;
	margin: 0 auto 2rem;
	line-height: 1.5;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-color: white;
	width: -moz-max-content;
	width: max-content;
	padding: 0 3rem;
}

.card--detail > h2 {
	font-size: 2rem;
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	margin-bottom: 2rem;
}

.cards--grid {
	width: -moz-max-content;
	width: max-content;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 3rem;
	grid-row-gap: 3rem;
}
@media (min-width: 768px) {
	.cards--grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 5rem;
		grid-row-gap: 5rem;
		transform: scale(1);
	}
}
@media (min-width: 1040px) {
	.cards--grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
	}
}
@media (max-width: 500px) {
	#cards {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.cards--grid {
		grid-template-columns: 1fr;
		grid-column-gap: 1rem;
		grid-row-gap: 2rem;
	}

	.card {
		width: 14rem !important;
		height: 18rem !important;
	}
	.card--figure img {
		max-width: 90%;
		height: 180px !important;
		border-radius: 2rem;
		overflow: hidden;
		box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
	}
	/* Центрируем заголовок h1 */
	#cards > h1 {
		position: absolute;
		top: 0;
		left: 50% !important;
		transform: translateX(-50%) !important;
		white-space: nowrap;
		font-size: 2rem !important;
		text-align: center;
	}
	.card--detail > h1,
	.card--detail > h2 {
		font-size: 2rem;
		margin: 0 auto 1rem;
		line-height: 1;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-color: white;
		width: -moz-max-content;
		width: max-content;
		padding: 0 2rem;
	}
	.button-cities {
		font-size: 1.4em !important; /* Новый размер текста для мобильных */
	}
}

#cards > h1 {
	position: absolute; /* Абсолютное позиционирование */
	top: -5rem;
	left: 34%;
	margin: 0;
	padding: 20px;
	font-size: 3em;
	color: white; /* Цвет заголовка */
	font-weight: bold;
	z-index: 10;
	
}

.card--wrap {
	place-self: start;
}

.rotated {
	transform: rotateY(-180deg);
}

.card {
	margin: 0 auto;
	height: 28rem;
	width: 22rem;
	position: relative;
	transition: all 1s ease;
	transform-style: preserve-3d;
	border-radius: 3rem;
}

.rotated {
	transform: rotateY(-180deg);
}

.card--contents {
	border-radius: 3rem;
	width: 100%;
	height: 100%;
	display: grid;
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
}

.card--depth {
	transform: translateZ(100px);
	perspective: inherit;
}

.card--figure {
	width: 90%;
	margin: 5%;
	display: flex;
	justify-content: center;
}
.card--figure img {
	width: 80%;
	height: 250px;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
	object-fit: cover;
}

.card--front {
	transform-style: preserve-3d;
	background: #fff;
}

.card--back {
	transform: rotateY(180deg);
	transform-style: preserve-3d;
	background: #fff;
	display: flex;
	flex-direction: column;
	place-content: center;
}
.card--back .retro {
	width: -moz-max-content;
	width: max-content;
	text-align: left;
	margin: 0 auto;
}

.card--detail {
	width: 90%;
	height: 10rem;
	margin: 5%;
	display: flex;
	flex-direction: column;
	align-content: center;
}

.card--detail > h1{
	font-size: 2rem;
}

@media (max-width:480px){
	.card--detail > h1{
		font-size: 1rem;
	}
}

@media(max-width:768px){
	.card--detail > h1{
		font-size: 1.5rem;
	}
}

.hues {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}
.hue--gradient--1--back {
	background-image: linear-gradient(120deg, #e5c5b4, #2cb2bf, #105a75);
}

.button-cities {
	margin: 0;
	height: auto;
	background: transparent;
	padding: 0;
	border: none;
	cursor: pointer;
}


.button-cities {
	--border-right: 6px;
	--text-stroke-color: rgba(255, 255, 255, 0.6);
	--animation-color: #000;
	font-size: 2em;
	letter-spacing: 3px;
	text-decoration: none;
	position: relative;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px var(--text-stroke-color);
}

.hover-text {
	position: absolute;
	box-sizing: border-box;
	content: attr(data-text);
	color: var(--animation-color);
	width: 0%;
	inset: 0;
	border-right: var(--border-right) solid var(--animation-color);
	overflow: hidden;
	transition: 0.5s;
	-webkit-text-stroke: 1px var(--animation-color);
}

.button-cities:hover .hover-text {
	width: 100%;
	filter: drop-shadow(0 0 23px var(--animation-color));
}

.pamyatka {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end; /* Сдвигает элементы в правую сторону */
	margin-right: 30px;
	margin-bottom: 30px; /* Отступ справа */
}

.pamyatka label {
	font-weight: bold;
	color: white;
	font-size: 2em; /* Размер шрифта для label */
	margin-right: 10px; /* Отступ между label и кнопкой */
}

.custom-btn {
	cursor: pointer;
	background-color: #9bc6fa; /* Цвет кнопки */
	padding: 8px 12px;
	border-radius: 6px;
	color: black;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	animation: bounce 1s infinite;
	border: none;
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s;
}

.custom-btn:hover {
	animation: none;
	transform: translateY(-2px);
}

.icon {
	width: 40px;
	height: 40px;
}
@media (max-width: 768px) {
	.pamyatka {
		margin-right: 10px; /* Уменьшаем отступы на мобильных устройствах */
		margin-bottom: 20px;
		justify-content: flex-start; /* Сдвигаем влево, чтобы кнопка не была слишком близко к краю */
		flex-direction: column; /* Вертикальное расположение элементов */
		align-items: flex-start; /* Выравниваем элементы по левому краю */
	}

	.pamyatka label {
		font-size: 1.5em; /* Уменьшаем размер шрифта для мобильных */
		margin-bottom: 8px; /* Добавляем отступ между меткой и кнопкой */
	}

	.custom-btn {
		padding: 6px 10px; /* Уменьшаем размеры кнопки */
	}

	.icon {
		width: 30px; /* Уменьшаем иконку */
		height: 30px;
	}
}

@media (max-width: 480px) {
	.pamyatka {
		display: flex;
		align-items: center;
		gap: 10px;
		justify-content: flex-end; /* Сдвигает элементы в правую сторону */
		margin-right: 0px;
		margin-bottom: 30px;
		width: 100%; /* Отступ справа */
	}
	.pamyatka label {
		font-size: 1.2em; /* Еще меньше шрифт на маленьких экранах */
	}

	.custom-btn {
		padding: 5px 8px; /* Еще уменьшить размер кнопки */
	}

	.icon {
		width: 35px; /* Еще уменьшаем иконку */
		height: 35px;
	}
}
/* Bounce Animation */
@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/*fp*/
footer {
	background: #111;
	height: 100%;
}

.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-cities:hover,
button-cities: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.png') 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-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 */
}