/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
	--height: 80vh;
	--half-height: calc(var(--height) / 2);
	--transition: all 1s;
}

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

body {
	overflow-x: hidden;
	color: #fefefe;
	user-select: none;
	font-family: Arial, Helvetica, sans-serif;
}
/*weather*/
#weather {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5rem;
	height: 100vh;
	background-size: cover;
	background-position: center;
	overflow: hidden;
    text-align: center; 
}
.container2 {
	position: relative;
	width: 400px;
	height: 100px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(30px);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	padding: 20px;
	color: #fff;
	transition: height 0.6s ease;
}

@media(max-width:480px){
	.container2{
		margin-top:15%;
		left:10%;
	}
}

@media(min-width:768px){
	.container2{
		left:2%;
	}
}
.search-box {
	position: relative;
	width: 100%;
	height: 55px;
	display: flex;
	align-items: center;
}
.search-box i {
	position: absolute;
	left: 10px;
	font-size: 28px;
}
.search-box input {
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.2);
	outline: none;
	border-radius: 10px;
	font-size: 22px;
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
	padding: 0 48px 0 42px;
}
.search-box input::placeholder {
	color: #fff;
	text-transform: capitalize;
}
.search-box button {
	position: absolute;
	right: 0;
	width: 40px;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	font-size: 28px;
	color: #fff;
	padding: 0 40px 0 5px;
	cursor: pointer;
}
.weather-box {
	text-align: center;
	margin: 40px 0;
}
.weather-box,
.weather-details,
.not-found {
	overflow: hidden;
	visibility: hidden;
}
.weather-box.active,
.weather-details.active,
.not-found.active {
	visibility: visible;
}
.weather-box .box1,
.not-found .box1 {
	transform: translateY(-100%);
}
.weather-box.active .box1,
.not-found.active .box1 {
	transform: translateY(0%);
	transition: transform 1s ease;
	transition-delay: 0.6s;
}
.weather-box .box1 .info-weather {
	transform: translateY(-120%);
}
.container2.active .weather-box .box1 .info-weather,
.container2.active .weather-details .humidity .info-humidity,
.container2.active .weather-details .wind .info-wind {
	transform: translateY(0%);
	transition: transform 1s ease;
}
.weather-box img {
	width: 60%;
}
.weather-box .temperature {
	position: relative;
	font-size: 64px;
	line-height: 1;
	font-weight: 700;
	margin: 20px 0 6px -30px;
}
.weather-box .temperature span {
	position: absolute;
	font-size: 24px;
	margin-left: 4px;
}
.weather-box .description {
	font-size: 22px;
	font-weight: 500;
	text-transform: capitalize;
}
.weather-details {
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	padding: 0 20px;
	display: flex;
}
.weather-details .humidity,
.weather-details .wind {
	display: flex;
	align-items: center;
	width: 50%;
	transform: translateY(-100%);
}
.weather-details.active .humidity,
.weather-details.active .wind {
	transform: translateY(0%);
	transition: transform 1s ease;
	transition-delay: 1.2s;
}
.weather-details .humidity .info-humidity,
.weather-details .wind .info-wind {
	transform: translateY(-100%);
	overflow: hidden;
}
.weather-details .humidity {
	padding-left: 20px;
	justify-content: flex-start;
}
.weather-details .wind {
	padding-right: 20px;
	justify-content: flex-end;
}
.weather-details i {
	font-size: 56px;
	margin-right: 10px;
}
.weather-details span {
	display: inline-block;
	font-size: 22px;
	font-weight: 500;
}
.weather-details p {
	font-size: 14px;
	font-weight: 500;
}
.not-found {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	margin-top: 110px;
}
.not-found img {
	width: 60%;
}
.not-found > p {
	font-size: 22px;
	font-weight: 500;
	margin-top: 12px;
}
.city-hide {
	display: none;
}
#clone-info-weather,
#clone-info-humidity,
#clone-info-wind {
	position: absolute;
	transform: translateY(-100%);
}
#clone-info-weather .weather {
	transform: translateY(120%);
	transition: transform 1s ease, opacity 0s;
	transition-delay: 0s, 2s;
}
.weather-box:not(.active) #clone-info-weather .weather {
	opacity: 0;
	transition-delay: 0s;
}
.active-clone#clone-info-weather .weather {
	transform: translateY(0%);
}
#clone-info-humidity span,
#clone-info-wind span {
	transform: translateY(100%);
	transition: transform 1s ease;
}
.active-clone#clone-info-humidity span,
.active-clone#clone-info-wind span {
	transform: translateY(0%);
}
.search-box button:hover {
	color: #ffcc00;
	transform: scale(1.1);
	transition: transform 0.3s;
}
@media (max-width: 600px) {
    #weather {
			display: inline;
    }
	/* Адаптация контейнера */
	.container2 {
		width: 80%;
		font-size: 14px;
	}

	/* Инпут поиска */
	.search-box input {
		font-size: 18px;
		padding: 0 10px 0 36px;
	}

	.search-box i {
		font-size: 22px;
	}

	.search-box button {
		font-size: 24px;
		padding: 0 10px;
	}

	/* Блок информации о погоде */
	.weather-box img {
		width: 80%; /* Уменьшение размеров изображения */
	}

	.weather-box .temperature {
		font-size: 48px;
	}

	.weather-box .temperature span {
		font-size: 18px;
	}

	.weather-box .description {
		font-size: 18px;
	}

	/* Подробности о погоде */
	.weather-details span {
		font-size: 18px;
	}

	.weather-details p {
		font-size: 12px;
	}

	/* Блок ошибки */
	.not-found img {
		width: 80%;
	}

	.not-found > p {
		font-size: 18px;
	}
	.bx{
		display: none !important;	
	}
}
.container-convertor {
    text-align: center;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    border: 2px solid #4e6377;
}

@media(max-width:480px){
	.container-convertor{
		margin-left:10%;
		margin-top: 2%;
	}
}

@media(min-width:768px){
	.container-convertor{
		margin-right:2%;
	}
}

h1 {
    margin-bottom: 20px;
    color: #913534;
    font-size: 24px;
    font-weight: bold;
}

.converter {
    margin-bottom: 20px;
}

.converter input,
.converter select,
.converter button {
    margin: 10px 0;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    border: 1px solid #4e6377;
    border-radius: 8px;
    background-color: #f4f4f9;
    color: #4e6377;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.converter input:focus,
.converter select:focus {
    outline: none;
    border-color: #913534;
    box-shadow: 0 0 10px rgba(145, 53, 52, 0.5);
}

.converter button {
    background-color: #913534;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
}

.converter button:hover {
    background-color: #4e6377;
    transform: scale(1.05);
}

#result {
    font-size: 20px;
    font-weight: bold;
    color: #4e6377;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .container-convertor {
        padding: 20px;
        border-radius: 15px;
    }

    h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .converter input,
    .converter select,
    .converter button {
        font-size: 14px;
        padding: 10px;
    }

    #result {
        font-size: 18px;
    }
}
@media (max-width: 480px) {
    h1 {
        font-size: 20px;
    }
    .container-convertor{
        width: 80%;
    }
    .converter input,
    .converter select,
    .converter button {
        font-size: 13px;
        padding: 8px;
    }

    #result {
        font-size: 16px;
    }
}
.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%;
	}
}

/*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;
		flex-direction: column;
		position: absolute;
		top: 70px;
		right: 0;
		background: rgba(155, 198, 250, 0.9);
		width: 200px;
		padding: 10px 0;
		border-radius: 0 0 10px 10px;
	}

	.navbar ul.active {
		display: flex;
	}

	.burger-menu {
		display: flex;
	}
}

/* Адаптивные стили для мобильных */
@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;
	}
}

/*main*/

.container {
	display: flex;
	justify-content: center;
}

.article {
	width: 400px;
	min-height: 200px;
	aspect-ratio: 2 / 1.1;
	max-height: calc(100svh - 1rem);
	/*	max-height: 100px;*/
	position: relative;
	overflow: hidden;
	/*	border-radius: 4em;*/
	/*	clip-path: inset(0 0 0 0 round 4em);*/
	max-width: calc(100% - 2rem);
}

@media (orientation: portrait) {
	article {
		min-height: 330px;
	}
}

.assets > img {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	height: 100%;
	width: 660px;
	object-fit: cover;
	object-position: center 43%;
	user-select: none;
	pointer-events: none;
}

.assets > img:first-of-type {
	filter: saturate(1.5) brightness(0.9);
	object-position: calc(-50% + (var(--x) * 30px)) calc(43% + (var(--y) * -20px));
}

.assets > img:last-of-type {
	object-position: calc(-50% + (var(--x) * 40px)) calc(43% + (var(--y) * -40px));
}

.assets h3 {
	position: absolute;
	left: 50%;
	top: 6%;
	margin: 0;
	font-size: 6rem;
	translate: -50% 0;
	text-transform: uppercase;
	color: white;
	translate: calc(-50% + (var(--x) * -30px)) calc(var(--y) * -20px);
}

.content {
	min-height: 32%;
	position: absolute;
	bottom: 0;
	width: 100%;
	color: white;
	display: grid;
	gap: 0.2rem;
	place-items: center;
	align-content: center;
	padding-bottom: 0.5rem;
	z-index: 2;
}

.content svg {
	width: 20px;
}

.content p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.2rem;
	position: relative;
}

.content p:first-of-type::after {
	content: '';
	position: absolute;
	bottom: calc(100% + 1rem);
	left: 50%;
	width: 6ch;
	background: white;
	height: 1px;
	translate: -50% 0;
}

.content p:last-of-type {
	opacity: 0.8;
}

/* Blurring */
.blur {
	--layers: 5;
	position: absolute;
	inset: 0;
}

.blur .layer {
	--blur: calc(
		sin(((var(--layers) - var(--index)) / var(--layers)) * 90deg) * 30
	);
	--stop: calc(sin(((var(--index)) / var(--layers)) * 90deg) * 15);
	position: absolute;
	inset: 0;
	background: hsl(0 0% 60% / 0.05);
	backdrop-filter: blur(calc(var(--blur) * 1px));
	mask: radial-gradient(
		150% 130% at 45% 90%,
		#fff 15%,
		#0000 calc((15 + var(--stop)) * 1%)
	);
}

.assets {
	position: absolute;
	inset: 0;
	border-radius: 4em;
	overflow: hidden;
}

.text1 {
	display: flex;
	flex-direction: column; /* Стилизация по вертикали */
	justify-content: flex-start; /* Выравнивание по верхнему краю */
	align-items: flex-start; /* Выравнивание по левому краю */
	gap: 1rem; /* Расстояние между элементами */
	padding: 2rem; /* Отступы вокруг текста */
	max-width: 600px; /* Максимальная ширина для улучшения читаемости */
	background: rgba(
		255,
		255,
		255,
		0.8
	); /* Полупрозрачный фон для контраста с изображением */
	border-radius: 10px; /* Скругленные углы */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Легкая тень для эффекта */
	text-align: justify;
}

.text1 > h1 {
	font-size: 2.5rem;
	font-family: 'Bebas Neue', sans-serif;
	color: #333; /* Темный цвет для заголовка */
	margin-bottom: 0.5rem;
}

.text1 > p {
	font-size: 1.1rem;
	font-weight: 400;
	color: #444; /* Чуть светлее цвет для основного текста */
	line-height: 1.6; /* Увеличиваем межстрочное расстояние */
	text-align: justify; /* Выравнивание текста по ширине */
}

/* Общий стиль для мобильных устройств */
@media (max-width: 480px) {
	.information .container {
		display: flex;
		flex-direction: column; /* Размещаем элементы по вертикали */
		align-items: center; /* Центрируем содержимое по горизонтали */
		justify-content: flex-start; /* Располагаем элементы сверху вниз */
		padding: 20px; /* Добавляем внутренние отступы */
	}
	.information h3 {
		width: 100%; /* Заголовок займет всю ширину контейнера */
		text-align: center; /* Центрируем текст */
		margin: 0; /* Убираем внешние отступы */
		padding: 10px 0; /* Добавляем отступы сверху и снизу для улучшения внешнего вида */
		font-size: 3.2em;
		margin-left: -5rem; /* Можно настроить размер шрифта */
		overflow: hidden;
	}
	.information .img {
		order: 1; /* Устанавливаем порядок для отображения первым */
		width: 100%; /* На всю ширину экрана */
		text-align: center; /* Центрируем содержимое */
	}

	.information .article {
		margin: 20px 0; /* Отступы сверху и снизу для удобного расстояния */
		display: flex;
		flex-direction: column; /* Располагаем изображения и текст по вертикали */
		align-items: center; /* Центрируем элементы по горизонтали */
		gap: 10px; /* Разрыв между элементами */
	}

	.information .article img {
		width: 100%; /* Оптимальная ширина для мобильного */
		max-width: 300px; /* Ограничиваем максимальную ширину */
		height: auto; /* Сохраняем пропорции */
		border-radius: 10px; /* Мягкие скругления */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень */
	}

	.information .text1 {
		order: 2; /* Устанавливаем порядок для отображения вторым */
		width: 90%; /* Почти на всю ширину экрана */
		text-align: center; /* Центрируем текст */
		margin-top: 20px; /* Отступ сверху */
		font-size: 14px; /* Уменьшаем размер текста для удобства чтения */
	}

	.information .text1 h1 {
		font-size: 1.5em; /* Размер заголовка */
		margin-bottom: 10px; /* Отступ снизу */
	}

	.information .text1 p {
		line-height: 1em; /* Оптимальная высота строки для читаемости */
	}
}

/*photo*/
.wrapper {
	--_gap: 0.5rem;
	--_offset: 10%;
	--_offset-1: calc(var(--_offset) * 1);
	--_offset-2: calc(var(--_offset) * 2);
	--_offset-3: calc(var(--_offset) * 3);
	--_offset-7: calc(var(--_offset) * 7);
	--_offset-8: calc(var(--_offset) * 8);
	--_offset-9: calc(var(--_offset) * 9);

	width: calc(100% - 4rem);
	max-width: 1000px;
	margin: 2rem auto;
	color: white;
	font-family: system-ui;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 var(--_gap);
	pointer-events: none;
	transform-style: preserve-3d;
}
.wrapper > div {
	position: relative;
	pointer-events: auto;
	aspect-ratio: 1;
	transition: scale 500ms ease-in-out, filter 500ms ease-in-out,
		clip-path 500ms ease-in-out 500ms;
	clip-path: polygon(var(--_clip-path));
	transform: translate3d(0, 0, 0);
}
.wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wrapper > div:nth-child(n + 4) {
	margin-top: calc(var(--_offset-3) * -1 + var(--_gap));
}
/* define clip-path custom properties */
.wrapper > div:nth-child(1) {
	--_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%;
}
.wrapper > div:nth-child(2) {
	--_clip-path: 0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9);
}
.wrapper > div:nth-child(3) {
	--_clip-path: 0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8);
}

.wrapper > div:nth-child(4) {
	--_clip-path: 0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8),
		0 var(--_offset-7);
}
.wrapper > div:nth-child(5) {
	--_clip-path: 0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9),
		0 var(--_offset-8);
}
.wrapper > div:nth-child(6) {
	--_clip-path: 0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9);
}

.wrapper > div:nth-child(7) {
	--_clip-path: 0 0%, 100% var(--_offset-1), 100% 100%, 0 100%;
}
.wrapper > div:nth-child(8) {
	--_clip-path: 0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%;
}
.wrapper > div:nth-child(9) {
	--_clip-path: 0 var(--_offset-2), 100% var(--_offset-3), 100% 100%, 0 100%;
}

.wrapper > div:hover {
	transition: scale 500ms ease-in-out, filter 500ms ease-in-out,
		clip-path 500ms ease-in-out 500ms;
	scale: 1.3;
	--_clip-path: 0 0, 100% 0, 100% 100%, 0 100%;
	z-index: 100;
	opacity: 1;
}

.wrapper:has(:hover) > div:not(:hover) {
	filter: grayscale(1) blur(3px);
	opacity: 0.5;
	scale: 0.9;
}
.wrapper > div:not(:hover) {
	/*animation: zIndexHack 1000ms;*/
}

@keyframes zIndexHack {
	0%,
	100% {
		z-index: 100;
	}
}

.photo {
	min-height: 100svh;
	color: var(--clr-primary);
	padding: 1rem;
}
.photo::after {
	content: '';
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 32px;
	height: 32px;
	background-size: cover;
}
.photo>h1 {
	font-size: 2rem;
	font-weight: 500;
	margin-block-end: 1rem;
	text-align: center;
}

/* Адаптивный дизайн для маленьких экранов */
@media (max-width: 768px) {
.wrapper {
    grid-template-columns: repeat(2, 1fr); /* 2 столбца в строке */
    gap: 0.5rem; /* Уменьшаем расстояние между фотографиями */
  }

  .wrapper > div {
    aspect-ratio: auto; /* Убираем фиксированное соотношение сторон */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  h1 {
    font-size: 1.5rem; /* Уменьшаем размер заголовка */
  }
}

/* Адаптивный дизайн для очень маленьких экранов */
@media (max-width: 480px) {
.wrapper {
    grid-template-columns: 1fr;
		gap: 0.5rem; /* Уменьшаем расстояние между фотографиями */
  }

  h1 {
    font-size: 1.2rem; /* Еще меньше заголовок */
    margin-block-end: 0.5rem;
  }
}

#photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 карточки в строке */
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1200px;
  margin: auto;
}

.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out; /* Анимация увеличения */
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.photo-card:hover {
  transform: scale(1.1); /* Увеличение карточки при наведении */
}

.photo-card:hover .photo-overlay {
  opacity: 1; /* Появляется текст при наведении */
}


    /* Адаптивный дизайн для экранов до 768px */
    @media (max-width: 768px) {
      #photo-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 карточки в строке */
      }

      .photo-overlay {
        opacity: 1; /* Текст всегда видим */
        background: rgba(0, 0, 0, 0.5); /* Добавляем затемнённый фон */
        padding: 0.5rem;
        border-radius: 4px;
      }
    }

    /* Адаптивный дизайн для экранов до 480px */
    @media (max-width: 480px) {
      #photo-grid {
        grid-template-columns: 1fr; /* 1 карточка в строке */
      }
    }
#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%;
	}
}

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

.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);
	}
}