@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/SegUIVar.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
	overflow: auto;
	box-sizing: border-box;
	background: #0C0C12;
	color: #fff;
}

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	
	font-family: "Segoe UI";
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

* {
	padding: 0;
	margin: 0;
}


.m0a {
	margin: 0 auto;
}

body {
	overflow-x: hidden;
	position: relative;
}

main {
	position: relative;
}

/* Базовые стили для шапки */
header {
  width: 100vw;
  position: fixed;
  top: 0; /* Начальное положение за пределами экрана */
  left: 0;
  z-index: 1000;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, #0C0C12 34%, rgba(12, 12, 18, 0) 100%);
  font-size: 2.1vh;
  font-weight: 400;
  opacity: 0; /* Начальная прозрачность */
  transition: all 0.6s ease-in-out; /* Плавное изменение свойств */
}

header.visible {
  top: 0; /* Фиксация в верхней части экрана */
  opacity: 1; /* Полная видимость */
}

.header-wrapper {
	color: #ffffff;
	padding: 3vh 0 2vh 0;
  max-width: 79vw;
  display: grid;
	grid-template-columns: 60px 7fr 260px;
  align-items: center;
  margin: 0 auto;
}

nav {
	padding: 0 7vw;
  display: flex;
	justify-content: flex-start;
  align-items: center;
}

.link-header  {
	color: #ffffff;
	background-image: linear-gradient(to right, #ffffff27, #fff, #ffffff27); /* Параметры градиента */
	background-repeat: no-repeat; /* Фон не повторяется */
	background-size: 0px 2px; /* Линия будет шириной 10px и высотой 2px */
	background-position: left bottom; /* Положение в левом нижнем углу */
	padding: 20px 2.4vw;

	text-decoration: none; /* Убираем подчёркивание */
	transition: 0.3s; /* Время перехода */
	
 }

@media (hover:hover) {
	.link-header:hover {
		filter: drop-shadow(0 0 0.5vh #ffffff);
		background-size: 100% 2px; /* Линия занимает всю ширину */
	}
}

@media (hover:none) {
	.link-header:active{
		filter: drop-shadow(0 0 0.5vh #ffffff);
		background-size: 100% 2px; /* Линия занимает всю ширину */
	}
}

.button-header {
	color: #ffffff;
	text-align: center;
	padding: 20px 10px;
  background: transparent;
  border: 1.8px solid white;
  border-radius: 4px;
  font-size: 2.1vh;
  font-weight: 400;
}

.button-sumbit {
	color: #ffffff;
	height: 6vh;
  background-color: #001FC7;
  border: none;
  border-radius: 4px;
  font-size: 2vh;
  font-weight: 400;cursor: pointer;
}

@media (hover:hover) {
	.button-sumbit:hover {
		padding: 15px 20px;
		background-color: #001FC7;
		border:  none;
		font-size: 1.2rem;
	}

	.hower-eff:hover {
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		text-shadow: 0px 0px 7px #ffffff;
		border: 1px solid transparent;
	}
}

@media (hover:none) {
	.button-sumbit:active {
		padding: 15px 20px;
		background-color: #001FC7;
		border:  none;
		font-size: 1.2rem;
	}

	.hower-eff:active {
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		text-shadow: 0px 0px 7px #ffffff;
		border: 1px solid transparent;
	}
}


/* Стили для мобильного меню */
.mobile-nav {
	justify-content: flex-start;
	grid-column: span 2;
	display: none;
	padding: 10vh 0 0 0;
	align-items: flex-end;
	flex-direction: column;
	gap: 1vh;
	height: calc(100vh - 100px);
	z-index: 1000;
}

.mobile-nav.active {
  display: flex; /* Показываем при активации */
}


.scroll-to-top-btn {
	background-color: rgba(119.04, 131.85, 201.30, 0.1);
	box-shadow: 0px 0px 0px 0px transparent;
	border: none;
	z-index: 10;
  position: fixed; /* Фиксированное положение */
	bottom: 9vh;
	right: 5vw;
	background-image: url(../MEDIA/up.png);
	background-position: center;
	background-size: auto;
	background-repeat: no-repeat;
	border-radius: 4px;
	backdrop-filter: blur(6px);
	width: 50px;
	height: 50px;
	cursor: pointer;
  opacity: 0; /* Скрыта по умолчанию*/ 
 	visibility: hidden;  /* Полностью скрыта */ 
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавное появление */
}

@media (hover:hover) {
	.scroll-to-top-btn:hover {
		background-color: #0027F8; 
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
 	}
}

@media (hover:none) {
	.scroll-to-top-btn:active {
		background-color: #0027F8; 
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
 	}
}

/* @media (hover:hover) {
	.scroll-to-top-btn:hover {
		background-color: #0027F8; 
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
	}
}

@media (hover:none) {
	.scroll-to-top-btn:active {
		background-color: #0027F8; 
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
	}
} */

/* Показываем кнопку при прокрутке */
.scroll-to-top-btn.show {
  opacity: 1;
  visibility: visible;
}

.parallax-hero {
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.bg-p {
	min-height: 110vh;
	z-index: -1;
	position: relative;
	overflow: hidden;
	/* overflow-y: auto; Разрешаем вертикальную прокрутку */
  scroll-behavior: smooth; /* Включаем плавную прокрутку */
}

.bg-p {
	position: relative;
	max-width: 1920px;
}

.parallax-hero .img-parallax {
	position: absolute;
	will-change: transform; 
	transition: transform 1s ease-in-out; /* Плавная анимация за 0.5 секунды */
}
#zatimnenie {
	bottom: 8vh;
	left: 0;
  width: 100vw; /* Ширина на всю ширину экрана */
	transition: transform 0.3s ease-in-out; /* Плавная анимация */
}
#elki-left {
	bottom: 10vh;
  left: -44vw;
}
#elki-right {
	bottom: 4vh;
  right: -30vw;
}
#bg-ground-1 {
	bottom: 10vh;
	right: 0;
}
#bg-ground-2 {
	bottom: 10vh;
	left: 0vw;
}
#bg-ground-3 {
	bottom: 15vh;
	left: 1vw;
}
#bg-home_1 {
	bottom: 20vh;
	left: -3vw;
}
#bg-home_2 {
	bottom: 20vh;
	left: 0.6vw;
}
#bg-home_3 {
	bottom: 20vh;
	right: 5.2vw;
}
#bg-podsvetka {
	bottom: -110vh;
	left: -1vw;
}
#dron-paralax {
	right: 0vw;
	bottom: -50vh;
}
/* #zatimnenie {
	bottom: 8%;
	left: 0;
  width: 100vw; 
	transition: transform 0.3s ease-in-out; 
}
#elki-left {
	bottom: 10%;
  left: -44%;
}
#elki-right {
	bottom: 4%;
  right: -30%;
}
#bg-ground-1 {
	bottom: 10%;
	right: 0;
}
#bg-ground-2 {
	bottom: 10%;
	left: 0;
}
#bg-ground-3 {
	bottom: 15%;
	left: 1%;
}
#bg-home_1 {
	bottom: 20%;
	left: -0.7%
}
#bg-home_2 {
	bottom: 20%;
	left: 0.6%;
}
#bg-home_3 {
	bottom: 20%;
	right: 8.6%;
}
#bg-podsvetka {
	bottom: 25%;
	left: -1%;
}
#dron-paralax {
	right: 0;
	bottom: -50%;
} */

.blur-box {
	border-radius: 4px;
	backdrop-filter: blur(6px);
	background: radial-gradient(ellipse 50.00% 91.49% at 50.00% 50.00%, rgba(119.04, 131.85, 201.30, 0.09) 0%, rgba(58.72, 65.04, 99.30, 0.09) 100%);
	box-shadow: 0px 0px 15px rgba(119.94, 142.16, 209.64, 0.05) inset;
} 

.hero-au {
	width: 80vw;
	display: flex;
	flex-direction: column;
	gap: 3vh;
	padding: 3vh 5vw 6vh 5vw;
	border-radius: 4px;
	position: absolute;
	top: 50vh;
    left: 50vw; /* Смещение на 50% от ширины родительского контейнера */
  transform: translate(-50%, -50%); /* Корректировка центрирования */
	opacity: 0; /* Начальная прозрачность (невидим) */
  transition: all 0.8s ease-in-out; /* Плавная анимация всех свойств */
}

.h1-hero {
	font-size: min(max(7.5vw, 21px), 120px);
	font-weight: 500;
	line-height: 120%;
	text-transform: uppercase;
}

#hero-au, #hero-au-text {
  opacity: 0; /* Начальная прозрачность */
  transition: transform 0.6s ease-in-out, opacity 1s ease-in-out; /* Плавное движение и проявление */
}

#hero-au.visible, #hero-au-text.visible {
  opacity: 1; /* Полностью видимый */
}

.descryption {
	display: flex;
	gap: 3vw;
}

.line {
	width: 5px;
	background: rgba(255, 255, 255, 0.60);;
	border-radius: 2px;
}

.descryption-text {
	font-size: min(max(2.2vh, 21px), 28px);
	line-height: 140%;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 400;
	max-width: 927px;
}

.hero-botton-text {
	width: 79vw;
	position: absolute;
	top: 91%;
  left: 50%;
  transform: translate(-50%, -50%);
	display: grid;
	grid-template-columns: 0.1fr 0.6fr;
  gap: 4vw;
	transition: transform 0.3s ease-in-out;
	position: absolute;
}

.bottom-text {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 300;
	/* max-width: 300px; */
	font-size: 1.8vh;
	align-self: center;
}

.arrow-down {
	margin: 0 auto;
}

.arrow-down-2 {
	width: 100%;
  display: block;
  text-align: center;
	margin-top: 10%;
	grid-column: span 2;
	opacity: 0.8;
}

/* .documents .arrow-down-2 {
	margin-top: 7%;
}

.services-wrapper .arrow-down-2 {
	margin-top: 7%;
} */
/* 
.content-form, .services-wrapper, .documents  .arrow-down-2 {
	margin-top: 7%;
} */

.content-form .arrow-down-2 {
	margin-top: 4%;
}

/* .button-down {
	width: 100px;
	height: 50px;
	background: url(../MEDIA/arrow-down.png) no-repeat;
	display: inline-block;
	background-size:auto;
	border: 1.8px solid #fff;
	border-radius: 4px;
	background-position: center;
}

.button-down-2 {
	border: none;
	background: url(../MEDIA/ar-4.png) no-repeat;
	background-position: center;
	display: inline-block;
	background-size: contain;
	width: 30px;
	height: 20px;
}
 */

.social-media-hero {
	display: flex;
	gap: 2vw;
	justify-content: right;
	align-self: end;
}

.social-media-1  {
	background-size: contain;
	display: inline-block;
	max-width:50px;
	max-height: 50px;
	width: 2.8vw;
	height: 2.8vw;
}






#vk-1 {
	background-image: url(../MEDIA/social-madia/vk.svg);
}


#tg-1 {
	background-image: url(../MEDIA/social-madia/telegram.svg);
}


@media (hover:hover) {
	.social-media-1:hover {
		filter: drop-shadow(0 0 1vh #0027F8);
	}
	#vk-1:hover {
		background-image: url(../MEDIA/social-madia/basil_vk-solid.svg);
	}
	#tg-1:hover {
		background-image: url(../MEDIA/social-madia/lineicons_telegram.svg);
	}
}

@media (hover:none) {
	.social-media-1:active {
		filter: drop-shadow(0 0 1vh #0027F8);
	}
	#vk-1:active {
		background-image: url(../MEDIA/social-madia/basil_vk-solid.svg);
	}
	#tg-1:active {
		background-image: url(../MEDIA/social-madia/lineicons_telegram.svg);
	}
}

.section-wrapper {
	max-width: 79vw;
	padding: 360px 0 0 0;
}

.content-form {
	max-width: 79vw;
	padding-bottom: 360px;
}

.about-us-main, .about-us-numbers, .areas-activity{
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	align-items: center;
	gap: 60px;
	
}

.title {
	font-size: 5.7vh;
	font-weight: 400;
	line-height: 120%;
}

.main-text {
	font-size: 2vh;
	font-weight: 400;
	color: rgb(255, 255, 255, 0.80);
	line-height: 140%;
}

.about-us hr {
	margin: 3.75rem 0;
	border: 1px solid rgb(255, 255, 255, 0.30);
}

.about-us-numbers {
	grid-column-end: 2;
}

.number {
	font-size: 4.5rem;
	font-weight: 600;
}

.proch::after {
	content: '%';
}

.anaimation-num-wrapper, .areas-activity-boxes {
	display: grid;
	gap: 7.5rem;
	grid-template-columns: 1fr 1fr;
}

.text-under-num {
	font-size: 2vh;
	font-weight: 400;
	color: rgb(255, 255, 255, 0.80);
	padding-top: 10px;
}

.areas-activity {
	position: relative;
	overflow: visible;
}

.areas-activity h3 {
	padding-bottom: 1.25rem;
}

.areas-activity .light-text {
	padding-top: 1vh;
  padding-bottom: 0.3vh;
  font-size: 2.7vh;
}

.areas-activity-boxes {
	gap: 0.87rem;
}

.areas-activity-text {
    display: flex;
    height: 100%;
}

.area-a {
	border-radius: 4px;
	background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.04) 0%, rgba(42.23, 67.27, 202.95, 0.02) 17%, rgba(42, 67, 203, 0) 100%); 
	box-shadow: 0px 0px 15px rgba(0, 31, 199, 0.05) inset;
	backdrop-filter: blur(10px);
}

#more {
	background-image: linear-gradient(to right, #ffffff27, #fff, #ffffff27); /* Параметры градиента */
	background-repeat: no-repeat; /* Фон не повторяется */
	background-size: 0px 2px; /* Линия будет шириной 10px и высотой 2px */
	background-position: left bottom; /* Положение в левом нижнем углу */
	padding: 10px 0;

	text-decoration: none; /* Убираем подчёркивание */
	transition: 0.3s; /* Время перехода */
}

.more-button {
	margin: 1vh 0 0;
	cursor: pointer;
	display: flex;
	gap: 10px;
	align-items: baseline;
	justify-content: flex-end;
	
}

.more-button img {
	transform: rotate(90deg);
	height: fit-content;
	opacity: 0.8;
}



@media (hover:hover) {
	.more-button:hover #icon-area-2 {
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: 1px solid transparent;
	}

	.more-button:hover #more {
		filter: drop-shadow(0 0 0.5vh #ffffff);
		background-size: 100% 2px; /* Линия занимает всю ширину */
	}
}

@media (hover:none) {
	.more-button:active #icon-area-2 {
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: 1px solid transparent;
	}

	.more-button:active #more {
		filter: drop-shadow(0 0 0.5vh #ffffff);
		background-size: 100% 2px; /* Линия занимает всю ширину */
	}
}

h3 {
	font-size: 4.5vh;
	font-weight: 400;
	line-height: 120%;
}

.light-text {
	color: #fff;
	font-weight: 400;
}

.icon-area {
	width: 3.75rem;
	height: 3.75rem;
	background-position: center;
	background-size: auto;
	background-repeat: no-repeat;
	border: 1px solid #fff;
	border-radius: 4px;
}

#icon-area-1 {
	background-image: url(../MEDIA/carbon_development.png);
}
#icon-area-2 {
	background-image: url(../MEDIA/carbon_drone-video.png);
}

/* .area-a:hover .icon-area {
	background-color: #001FC7;
	box-shadow: 0px 0px 12px 1px #0027F8;
	border: none;
} */

.area-a {
	padding: 2vw;
	background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.04) 0%, rgba(42.23, 67.27, 202.95, 0.02) 17%, rgba(42, 67, 203, 0) 100%);	
}

.decor {
	position: absolute;
	z-index: -1;
	overflow: clip;
	/* max-width: 100vh; */
}

.areas-activity .decor {
	top: -28%;
  left: 24%;
	transform: translate(-50%);
}

.services-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.services-wrapper h3 {
	text-align: center;
	width: 60%;
}

.examples-services {
	width: 100%;
	display: grid;
	grid-template-columns:1fr;
	gap: 4vh;
	padding-top: 5rem;
}

.service-box {
	border: 1px solid transparent;
  position: relative;
	background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.16) 0%, rgba(42.23, 67.27, 202.95, 0.08) 17%, rgba(42, 67, 203, 0) 100%);
  border-radius: 4px;
  overflow: hidden;
}

.service-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0; /* Начальная прозрачность */
  transition: opacity 1s ease-out; /* Анимация прозрачности */
  z-index: -1; /* Размещаем фон за текстом */
	background-position: center;
}

#construction::before {
  background-image: url(../MEDIA/services/construction.png);
}

#monitoring::before {
  background-image: url(../MEDIA/services/monitoring.png);
}

#taxation::before {
  background-image: url(../MEDIA/services/taxation.png);
}

#inventory::before {
  background-image: url(../MEDIA/services/inventory.png);
}

#logistics::before {
  background-image: url(../MEDIA/services/logistics.png);
}

#control-infrastructure::before {
  background-image: url(../MEDIA/services/control-infrastructure.jpg);
}

/* Фон появляется только при активном состоянии */
.service-box.active-bg::before {
  opacity: 1;
}

.text-services {
  background: transparent;
  backdrop-filter: blur(4px);
	width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  /* gap: 2vh; */
  transition: all 0.5s ease-in-out; /* Плавная анимация */
  overflow: hidden; /* Скрываем переполнение */
}



@media (hover:hover) {
	.text-services:hover {
		backdrop-filter: blur(12px);
		background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.16) 0%, rgba(42.23, 67.27, 202.95, 0.08) 17%, rgba(42, 67, 203, 0) 100%);
	}

	.name-service:hover  {
		filter: drop-shadow(0 0 0.5vh #ffffff);
	}
}

@media (hover:none) {
	.text-services:active {
		backdrop-filter: blur(12px);
		background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.16) 0%, rgba(42.23, 67.27, 202.95, 0.08) 17%, rgba(42, 67, 203, 0) 100%);
	}

	.name-service:active  {
		filter: drop-shadow(0 0 0.5vh #ffffff);
	}
}

.active-bg {
	border: 1px solid #0c0c12;
}

.text-services.active-bg {
	backdrop-filter: blur(4px);
  background: linear-gradient(180deg, rgb(12 12 18 / 20%) 0%, rgb(12 12 18 / 62%) 13%, rgba(12, 12, 18, 0.80) 33%, #0c0c12c9 100%);
}


.name-service {
	cursor: pointer;
	position: relative;
  width: 100%;
	padding: 2vw 2vw 0;
  font-size: 2.6vh;
  font-weight: 500;
}

.icon-toggle {
  position: absolute;
  right: 2vw;
  top: 30%;
  font-size: 4vh;
  width: 1.2lh;
  height: 1.2lh;
  line-height: 1.2lh;
  text-align: center;
  font-weight: bold;
  transition: transform 0.3s ease;
  pointer-events: none;
}

@media (max-width: 768px) {
	.icon-toggle {
		top: 30px;
    right: -20px;
	}

}

/* Поворачиваем минус при открытии */
.name-service.active .icon-toggle,
.name-service[aria-expanded="true"] .icon-toggle {
  content: "×";
  transform: rotate(90deg); /* можно убрать, если не нужен поворот */
}

.name-service.active + .service-description,
.name-service[aria-expanded="true"] + .service-description {
  line-height: 1.5;
  color: currentColor;
  max-height: 100vh; /* Максимальная высота для мобильных устройств */
}


.service-description {
	position: relative;
	transition: max-height 0.5s ease-in-out;
	/* min-height: 116px; */
	font-size: 2vh;
	color: rgb(255, 255, 255, 0.80);
	line-height: 140%;

	font-weight: 400;
	 max-height: 0; /* Добавляем это */
}


/* 
.service-box {
  scroll-margin-top: 25vh; 
} */

.service-description {
  margin: 3vh 0;
    padding-inline: 2vw;
  width: 100%;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  transition: line-height 0.5s ease, color 0.5s ease;
}



.documents {
	position: relative;
}

.documents .decor {
	position: absolute;
	top: -90%;
	z-index: -2;
	left: 47%;
	transform:translate(-50%);
}

/* .documents .decor-2 {
	position: absolute;
  top: 38%;
  opacity: 0.7;
  z-index: -2;
  right: -38%;
	transform: scale(0.5);
} */

.documents-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.875rem;
}

.documents h3 {
	padding-bottom: 5rem;
}

.document-box {
	padding: 1.875rem;
	display: flex;
	gap: 3.125rem;
	align-items: center;
	background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.04) 0%, rgba(42.23, 67.27, 202.95, 0.02) 17%, rgba(42, 67, 203, 0) 100%);
	box-shadow: 0px 0px 15px rgba(0, 31, 199, 0.05) inset;
	border-radius: 4px;
	backdrop-filter: blur(12px);
}

.icon-area-3 {
	background-image: url(../MEDIA/doc-text.png);
	
}



@media (hover:hover) {
	.document-box:hover .icon-area {
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
	}

	.document-box:hover {
		background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.16) 0%, rgba(42.23, 67.27, 202.95, 0.08) 17%, rgba(42, 67, 203, 0) 100%);
	}

	.document-box:hover p {
		filter: drop-shadow(0 0 0.5vh #ffffff);
	}
}

@media (hover:none) {
	.document-box:active .icon-area {
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
	}

	.document-box:active {
		background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.16) 0%, rgba(42.23, 67.27, 202.95, 0.08) 17%, rgba(42, 67, 203, 0) 100%);
	}

	.document-box:active p {
		filter: drop-shadow(0 0 0.5vh #ffffff);
	}
}

.content-form {
	width: 79vw;
	position: relative;
  display: grid;
	grid-template-columns: 0.8fr 1.15fr;
  gap: 7vh;
  justify-items: center;
}

.content-form .decor {
	top: -30%;
	left: 50%;
	transform:translate(-50%);
}

.content-form h3 {
	text-align: left;
	width: 100%;
}

.form-container {
	padding: 0.6vw 2vw 2vw;
	background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.04) 0%, rgba(42.23, 67.27, 202.95, 0.02) 17%, rgba(42, 67, 203, 0) 100%);
	box-shadow: 0px 0px 15px rgba(119.94, 142.16, 209.64, 0.05) inset;
	border-radius: 4px;
	backdrop-filter: blur(2px);
}

.form-wrapper {
	display: flex;
	flex-direction: column;
}

.form_input-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.form_input-box-2 {
	flex-direction: column;
	display: flex;
	gap: 50px;
}

.form_input-box input {
	background: #0000006b;
  color: #fff;
  width: 100%;
  padding: 0 20px;
  height: 7vh;
  font-size: 2vh;
  border: 1px solid #ffffff;
  border-radius: 8px;
}

.form_input-box textarea{
	background: #0000006b;
  color: #fff;
  width: 100%;
  padding: 20px;
  height: 14vh;
  font-size: 2vh;
  border: 1px solid #ffffff;
  border-radius: 8px;
	resize: none;
}

.form_input-box textarea:focus {
	box-shadow: 0 0 8px white;
	outline: none;
}

select {
	width: 100%; /* Ограничиваем ширину до 100% от родительского элемента */
	background: #ffffff;
	color: #0C0C12;
	padding:  0 20px;
	height: 6vh;
	font-size: 2vh;
	appearance: none;
}

select option {
	max-width: 100vw;
  color: #0C0C12;
  font-size: 2vh;
	white-space: normal; /* Разрешает перенос текста */
  word-wrap: break-word; /* Переносит длинные слова */
  overflow-wrap: break-word; /* Аналогично word-wrap */
  padding: 5px; /* Добавьте отступы для удобства чтения */
}

footer {
	width: 79vw;
	padding-bottom: 100px;
}

.footer-cont-wrapper{
	gap: 5vw;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
}

.name-institution {
	font-size: 2.25rem;
	font-weight: 400;
}

.contacts {
	display: flex;
  flex-direction: column;
	gap: 2.5rem;
}

.footer-t {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 2.7rem;
}

.icon__contact {
	display: flex;
	align-items: baseline;
	gap: 1.875rem;
	padding: 10px;
}

.icon__contact img {
	width: 26px;
	opacity: 0.6;
}


@media (hover:hover) {
	.icon__contact:hover img {
		opacity: 1;
	}
}

@media (hover:none) {
	.icon__contact:active img {
		opacity: 1;
	}
}

.footer-contacts {
	gap: 4vw;
	display: flex;
	justify-content: space-between;
}

.cont {
	color: #fff;
	font-size: 1.31rem;
	font-weight: 300;
	max-width: 458px;
	color: #ffffff;
	padding: 0 0 5px 0;
}

 .cont-h {
	cursor: pointer;
	background-image: linear-gradient(to right, #ffffff27, #fff, #ffffff27); /* Параметры градиента */
	background-repeat: no-repeat; /* Фон не повторяется */
	background-size: 0px 2px; /* Линия будет шириной 10px и высотой 2px */
	background-position: left bottom; /* Положение в левом нижнем углу */
	

	text-decoration: none; /* Убираем подчёркивание */
	transition: 0.3s; /* Время перехода */
}



.social-media{
	display: flex;
	gap: 1.85rem;
}

.icon-area-4 {
	width: 3.125rem;
	height: 3.125rem;
	background-size: 60%;
	background-image: url(../MEDIA/social-madia/vk-1.png);
}
.icon-area-5 {
	width: 3.125rem;
	height: 3.125rem;
	background-size: 60%;
	background-image: url(../MEDIA/social-madia/tg-1.png);
}



@media (hover:hover) {
	.icon__contact:hover .cont-h {
		filter: drop-shadow(0 0 0.5vh #ffffff);
		background-size: 100% 2px; /* Линия занимает всю ширину */
	}
	.social-media a:hover .icon-area{
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
	}
}

@media (hover:none) {
	.icon__contact:active .cont-h {
		filter: drop-shadow(0 0 0.5vh #ffffff);
		background-size: 100% 2px; /* Линия занимает всю ширину */
	}
	.social-media a:active .icon-area{
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		border: none;
}
}

footer hr {
	margin: 3.75rem 0;
  border: 1px solid rgb(255, 255, 255, 0.30);
}

.c {
	color: rgb(255, 255, 255, 0.30);
	font-size: 1.25rem;
	text-align: center;
	width: 100%;
	font-weight: 400;
}

.cont-1 {
	display: flex;
	flex-direction: column;
	gap: 2vh;
}

.map-wrapper {
	filter: hue-rotate(-120deg);
}

#agreement {
	cursor: pointer;
	accent-color: #2546ff;
  margin-right: 1vw;
	width: 20px;
  height: 20px;
}

.user-agreement {
	font-size: 2vh;
  font-weight: 300;
	margin-bottom: 3vh;
}

.user-agreement-a {
	text-decoration: underline;
	font-weight: 500;
	color: #ffffff;
}


@media (hover:hover) {
	.user-agreement-a:hover {
		color: #2546ff;
	}
}

@media (hover:none) {
	.user-agreement-a:active {
		color: #2546ff;
	}
}

.form_input-box input:focus {
	box-shadow: 0 0 8px white;
	outline: none;
}


#map {
  width: 100%;
  height: 100%;
	filter: invert(1);
}

.f-b-2 {
    display: flex;
  flex-direction: column;
  justify-content: space-between;
}

label p {
	display: none;
	padding-bottom: 1vh;
}

/* Стиль для динамического лейбла */
.dynamic-label {
    position: absolute;
    left: 2vh;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2vh;
    color: #fff;
    pointer-events: none;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 4px;
}

.main-text-textarea .dynamic-label {
	top: 10%;
	transform: translateY(0);
}

.main-text-textarea .dynamic-label-active {
	top: -10%;
}

/* Активный стиль (при фокусе) */
.dynamic-label-active {
  top: -5%;
  font-size: 1.8vh;
	background: #001fc7;
	box-shadow: 0px 0px 12px 1px #0027F8;
  text-shadow: 0px 0px 7px #ffffff;
  color: #ffffff !important;
}

.pdf-controls {
	display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
  justify-content: center;
}

.pdf-btn {
  background-color: #001FC7;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.6vh;
}

@media (hover:hover) {
	.pdf-btn:hover {
		background-color: #0027F8;
	}
}

@media (hover:none) {
	.pdf-btn:active {
		background-color: #0027F8;
	}
}


#zoomSelector {
	cursor: pointer;
  padding: 9px 12px;
  font-size: 1.6vh;
	border: 1px solid white;
  background: transparent;
  color: white;
  border-radius: 4px;
  height: 100%;
	width: auto;
}


.modal {
  display: none; /* Скрыт по умолчанию */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
}

.modal-content {
  background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.04) 0%, rgba(42.23, 67.27, 202.95, 0.02) 17%, rgba(42, 67, 203, 0) 100%);
  margin: 3vh auto;
	height: 1080px;
  max-height: 94vh;
  padding: 3vw 2vw;
  border-radius: 8px;
  max-width: 80%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.close-modal {
  display: block;
  width: 100%;
  height: 36px;
  text-align: right;
  color: #ffffffb3;
  /* float: right; */
  font-size: 4vh;
  font-weight: bold;
  cursor: pointer;
}



@media (hover:hover) {
	.close-modal:hover,
	.close-modal:focus {
		color: #0027F8;
		text-decoration: none;
	}
}

@media (hover:none) {
	.close-modal:active,
	.close-modal:focus {
		color: #0027F8;
		text-decoration: none;
	}
}

@media (max-width: 768px) {
  .pdf-controls {
    align-items: flex-start;
  }

  .pdf-btn, #zoomSelector {
    /* width: 100%; */
    margin-bottom: 0.5rem;
  }

  canvas {
    max-width: 100%;
    height: auto !important;
  }

	.modal-content {
		margin: 20% auto;
		max-width: 90%;
	}

	/* #pdfViewerContainer {
		height: auto;
	} */
	.document-box .main-text{
		  width: 80%;
	}
}


/* Стили для скрытого текста */
	.hidden {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
	}

	/* Стили для показанного текста */
	.shown {
			max-height: fit-content; /* Установите высоту, достаточную для вашего текста */
			padding: 3vh 0;
			transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
	}

@media screen and (max-width: 575px) {
	.arrow-down-2  {
		grid-column: span 1;
		display: none;
	}

	#dron-paralax {
		height: 135vw;
		right: -61vw;
		bottom: -32vh;
	}
	#zatimnenie {
    height: 30vh;
    bottom: 8vh;
    left: 0;
    width: 100vw;
    transition: transform 0.3s ease-in-out;
	}
	#elki-left {
		bottom: 0vh;
		left: -143vw;
		height: 70vh;
	}
	#elki-right {
		height: 60vh;
		bottom: 1vh;
		right: -80vw;
	}
	#bg-ground-1 {
		height: 50vh;
		bottom: 14vh;
		right: -11vw;
	}
	#bg-ground-2 {
		height: 40vh;
		bottom: 20vh;
		left: -18vw;
	}
	#bg-ground-3 {
		height: 30vw;
		bottom: 40vh;
		left: -63vw;
	}
	#bg-home_1 {
		height: 100vw;
		min-height: 450px;
		bottom: 45svh;
		left: -152vw;
}
	#bg-home_2 {
		height: 100vw;
		min-height: 450px;
		bottom: 54vh;
		left: -73vw;
	}
	#bg-home_3 {
		height: 100vw;
		min-height: 450px;
		bottom: 62vh;
		right: -89vw;
	}
	#bg-podsvetka {
		bottom: 47vh;
		left: -117vw;
	}
	.anaimation-num-wrapper, .areas-activity-boxes {
			grid-template-columns: 1fr;
	}
	.services-wrapper h3 {
		text-align: left;
	}
}


@media screen and (min-width: 575px) and (max-width: 1200px) {
		.services-wrapper h3 {
		text-align: left;
	}
	.service-box::before {
		opacity: 1;
	}
	.services-wrapper h3 {
		width: 100%;
	}
	.about-us-main, .about-us-numbers, .areas-activity {
    grid-template-columns: 1fr;
	}

	.text-services {
		background:  linear-gradient(180deg, rgba(12, 12, 18, 0) 0%, rgba(12, 12, 18, 0.41) 13%, rgba(12, 12, 18, 0.80) 33%, #0C0C12 100%);
    min-height: 100%;
		transition: all 0.5s ease-in-out; /* Плавная анимация */
	}

	.content-form {
    grid-template-columns: 1fr;
		max-width: none;
	}

	#dron-paralax {
		height: 77vh;
		right: calc(-33vw - 20px);
		bottom: -41vh;
	}
	#zatimnenie {
    height: 30vh;
    bottom: 8vh;
    left: 0;
    width: 100vw;
    transition: transform 0.3s ease-in-out;
	}
	#elki-left {
		bottom: -1vh;
		left: -73vw;
		height: 67vh;
	}
	#elki-right {
		height: 60vh;
		bottom: -1vh;
		right: -45vw;
	}
	#bg-ground-1 {
		height: 50vh;
		bottom: 3vh;
		right: -7vw;
	}
	#bg-ground-2 {
		height: 40vh;
		bottom: 12vh;
		left: -10vw;
	}
	#bg-ground-3 {
		height: 28vw;
		bottom: 17vh;
		left: -61vw;
	}
	#bg-home_1 {
		height: 70vw;
		bottom: 27vh;
		left: calc(-27vw - 24px);
	}
	#bg-home_2 {
		height: 60vw;
		bottom: 27vh;
		left: -46vw;
	}
	#bg-home_3 {
		height: 60vw;
		bottom: 27vh;
		right: -35vw;
	}
	#bg-podsvetka {
		bottom: 25vh;
		left: -51vw;
		}
}

@media screen and (max-width: 900px) {

	#map {
		width: 79vw;
    height: 40vh;
	}

	.anaimation-num-wrapper, .areas-activity-boxes {
    gap: 7.5rem;
    grid-template-columns: 1fr;
	}


	.service-box {
			position: relative;
			display: flex;
			border-radius: 4px;
			height: 300px;
			align-items: flex-end;
			overflow: hidden;
			cursor: pointer; /* Добавляем курсор "pointer" для указания на кликабельность */
	}
	.service-description {
     min-height: 0px;
		}
}

@media screen and (min-width: 1000px) and (max-width: 1600px) {
	#dron-paralax {
			height: 77vh;
			right: -6vw;
			bottom: -41vh;
	}

}

@media screen and (min-width: 1600px) {
	.form_input-box-2 {
			flex-direction: row;
	}
}

@media screen	 and (min-width: 1600px) {
	.mobile-nav {
    display: none !important; /* Принудительно скрываем мобильное меню */
  }
	.form-container {
    max-width: 90vw;
		width: 100%;
	}
}

@media screen	 and (max-width: 1600px) {
	.services-wrapper h3 {
		width: 80%;
	}
	.button-sumbit {
    border: none;
    height: 6vh;
		background-color: #001FC7;
		box-shadow: 0px 0px 5px 1px #0027F8;
    border-radius: 4px;
    font-size: 2vh;
    font-weight: 400;
	}
  .button-header {
    display: none; /* Скрываем кнопку "Оставить запрос" в десктопной версии */
  }
  .burger-menu {
		display: flex;
		flex-direction: column;
		gap: 1vh;	
		cursor: pointer;
		align-items: flex-end;
  }
  .burger-menu span {
		max-width: 40px;
		width: 10vw;
		height: 0.2vh;
    background-color: white;
    transition: transform 0.3s ease;
  }
  .mobile-link {
		width: 100%;
    color: white;
    text-decoration: none;
    font-size: 2vh;
		padding: 1.6vh;
		text-align: right;
  }
  .mobile-button {
		display: block; /* Показываем кнопку в мобильной версии */
		padding: 1.6vh;
    border: 1px solid white;
    border-radius: 4px;
    font-size: 2vh;
    font-weight: 400;
    color: white;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
		width: fit-content;
  }
	.logo {
		width: 5vh;
		max-width: 60px;
		min-width: 40px;
	}
	.nav-links {
    display: none; /* Скрываем горизонтальное меню на мобильных */
  }
  .button-header {
    display: none; /* Скрываем кнопку "Оставить запрос" на мобильных */
  }

	header {
    font-size: 1rem; /* Уменьшаем размер шрифта */
  }
  .header-wrapper {
		max-width: 79vw;
    grid-template-columns: 1fr 1fr; /* Одна колонка для мобильных */
    gap: 15px; /* Расстояние между элементами */
  }
  nav {
    top: 80px; /* Под шапкой */
  }
}

@media screen	 and (max-width: 1200px) {

	.scroll-to-top-btn {
    bottom: 7vh;
		right: 7vw;
		/* background-color: rgba(119.04, 131.85, 201.30, 0.1);
		box-shadow: 0px 0px 0px 0px transparent;
		border: none; */
	}

	.h1-hero {	
		font-weight: 600;	
	}
	.line {
    width: 10px;
    background: #D9D9D9;
    border-radius: 2px;
	}
	.hero-au {
    gap: 4vh;
    padding: 3vh 5vw 3vh
	}

	.arrow-down {
		display: none;
	}
	.hero-botton-text {
		max-width: 90vw;
    grid-template-columns: 1fr auto;
	}

	.bottom-text {
		grid-column: 1;
    grid-row: 1;
	}
	.social-media-hero {
    grid-column: 2;
    justify-content: left;
    flex-direction: column;
	}
	.social-media-1 {
    width: 40px;
    height: 40px;
		opacity: 0.8;
	}
	
	/* .scroll-to-top-btn:hover {
		box-shadow: 0px 0px 0px 0px transparent;
		background-color: rgb(255, 255, 255, 0.25);
 	} */
	 
	




	.about-us-main, .about-us-numbers, .areas-activity, .content-form {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.about-us-numbers {
		gap: 0;
	}
	.about-us{
		padding: 240px 0 120px;
	}
	.content-form {
    padding: 120px 0 240px;
	}
	 .areas-activity, .services-wrapper{
    padding: 120px 0;
	}
	.title  {
		font-size: 4.5vh;
	}
	.anaimation-num-wrapper, .areas-activity-boxes {
    display: grid;
    gap: 2.5rem;
	}
	.number {
    font-size: 3rem;
	}
	.text-under-num {
    font-size: 1rem;
		text-align: right;
	}
	.anim-num {
		display: flex;
    flex-direction: column;
    align-items: flex-end;
	}

	.area-a {
		min-height: 210px;
		padding: 2vh;

		background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.16) 0%, rgba(42.23, 67.27, 202.95, 0.08) 17%, rgba(42, 67, 203, 0) 100%);
	}
	.area-a .main-text {
		text-align: left;
	}
	.icon-area {
    width: 5vh;
    height: 5vh;
	}
	.icon-area-3 {
		background-size: 60%;
	}
	.user-agreement {
    font-size: 1.8vh;
		margin-bottom: 30px;
	}
	.areas-activity .light-text {
    padding-top: 2vh;
	}
	.areas-activity .decor {
    top: -60%;
    left: 90%;
    width: 1230px;
	}
	.services-wrapper {
		align-items: flex-start;
	}
	.services-wrapper h3 {
    width: 100%;
		font-size: 3.5vh;
		line-height: 120%;
	}
	.examples-services {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 5rem;
	}
	.service-box:hover .text-services {
    min-height: 0;
	}
	.service-box {
		height: min-content;
	}
	.service-box::before {
		opacity: 1;
	}
	.text-services {
  	background: linear-gradient(180deg, rgb(12 12 18 / 67%) 0%, rgb(12 12 18 / 65%) 13%, rgb(12 12 18 / 67%) 33%, #0c0c12e3 100%);
    min-height: 100%;
    gap: 0;
	}
	.name-service {
		padding: 2vh 2vh 0;
		width: 90%;
    font-size: 2.6vh;
    font-weight: 500;
	}
	.service-description {
		font-size: 2.1vh;
		line-height: 140%;
	}
	.documents .decor {
		width: 210%;
		height: 200%;
		position: absolute;
		top: -40%;
		z-index: -2;
		left: 47%;
		transform: translate(-50%);
	}
	.documents-wrapper {
    display: grid;
		grid-template-columns: 1fr;
		gap: 1.875rem;
	}
	.document-box {
    padding: 3vh;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(38.83, 67.73, 224.35, 0.16) 0%, rgba(42.23, 67.27, 202.95, 0.08) 17%, rgba(42, 67, 203, 0) 100%);
	}
	.documents {
		padding: 120px 0;
	}
	
	.form-container {
    padding: 2vh 3vh 4vh 3vh;
    max-width: 79vw;
    width: 100%;
  }
	.form-wrapper {
    gap: 0px;
	}
	.form_input-box input {
		width: 100%;
	}
	.form_input-box-2 {
    gap: 30px;
    flex-direction: column;
	}
	select {
    width: 100%;
    height: 3.5rem;
	}
	.button-header {
    padding: 15px 20px;
		background-color: #001FC7;
		border:  none;
    font-size: 1.2rem;
	}

	.footer-cont-wrapper {
		grid-template-columns: 1fr;
	}
	.footer-contacts {
    flex-direction: column;
		gap: 50px;
	}
	.name-institution {
    font-size: 1.5rem;
		padding-bottom: 50px;
	}
	.contacts {
    flex-direction: column;
    gap: 1.25rem;
	}
	footer hr {
    margin: 3rem 0;
	}
	.cont {
    font-size: 1rem;
	}
	.icon__contact img {
    width: 20px;
	}
	.footer-t {
    font-size: 1.25rem;
    font-weight: 400;
	}
	.icon-area-4, .icon-area-5 {
    width: 2.5rem;
    height: 2.5rem;
	}
	.content-form .decor {
		top: 0%;
		left: 110%;
		transform: translate(-50%);
		width: 440%;
		height: 150%;
	}
	.c {
    font-size: 1rem;
	}
	#app {
		width: 100%;
	}
}

.initial-content {
	  width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
		gap: 2vh;
		position: absolute;
    z-index: 100;
    background: #0000005c;
		backdrop-filter: blur(6px);
		opacity: 0;
}


#app {
		max-width: 79vw;
		max-height: 40vh;
		height: 400px;
	}

@media screen and (min-width: 1200px) {
	#app {
		width: 560px;
	}
}

.initial-content p {
	font-size: min(max(4vw, 16px), 28px);
	text-align: center;
}

.toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } 
.toolbar a { padding: 16px; }  

/* loader styles */
#loader {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2vh;
  position: fixed; /* Важно: фиксируем поверх всего */
  top: 0;
  left: 0;
  z-index: 9999;
  background: #0C0C12;
  color: white;
  font-size: 3.6vh;
  text-align: center;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#loader h1 {
  font-size: min(max(6vw, 21px), 64px);
  text-transform: uppercase;
  margin-bottom: 1vh;
	text-align: center;
	display: none;
}

#loader img {
	height: 10vh;
}

.spinner {
  display: none;
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.annotation {
	font-size: 1.6vh;
	color: rgba(255, 255, 255, 0.6);
}

.about-us-main .annotation {
	padding: 4vh 0 0;
}

@media screen and (max-width: 1200px) {
	.about-us-main .annotation {
		padding: 0;
	}
}

.cookie-banner-wrapper {
	width: 70vw;
	border-radius: 8px;
	position: fixed;
  bottom: 3vh;
  left: 50%;
	transform: translate(-50%);
	z-index: 1000;
	background: radial-gradient(50% 91.49% at 50% 50%, rgba(119, 132, 201, 0.09) 0%, rgba(59, 65, 99, 0.09) 100%);
	backdrop-filter: blur(12px);
	display: flex;
	justify-content: center;
	padding: 2vh;
}

.cookie-banner-items {
	position: relative;
	justify-content: space-between;
  width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 3vh;
	align-items: center;
}

.img-cookie-banner {
	height: 120px;
	width: 120px;
	background-image: url(../MEDIA/carbon_cookie.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.text-cookie-banner {
	display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1vh;
}

.text-cookie-banner .light-text {
	font-size: 2.3vh;
}

.text-cookie-banner .main-text .cont-h {
	color: #fff;
	text-decoration: underline;
}

.text-cookie-banner .main-text .cont-h:hover {
	color: #2546ff;
}

.button-cookie-banner {
	display: flex;
	flex-direction: column;
	gap: 1vh;
	height: 100%;
}

.button-cookie-banner input[type="button"] {
	margin: auto 0 0 0;
	cursor: pointer;
	color: #ffffff;
	text-align: center;
	padding: 10px 40px;
  background: transparent;
  border: 1.8px solid white;
  border-radius: 4px;
  font-size: 1.8vh;
  font-weight: 400;
}

@media (hover:hover) {
	.button-cookie-banner input[type="button"]:hover {
		font-weight: 600;
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		text-shadow: 0px 0px 7px #ffffff;
		border: 1px solid transparent;
	}
}

@media (hover:none) {
	.button-cookie-banner input[type="button"]:active {
		font-weight: 600;
		background-color: #001FC7;
		box-shadow: 0px 0px 12px 1px #0027F8;
		text-shadow: 0px 0px 7px #ffffff;
		border: 1px solid transparent;
	}
}

.close-banner {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.cookie-banner-wrapper.hidden {
  display: none;
}


@media screen and (max-width: 575px) {
	.cookie-banner-wrapper {
		width: 89vw;
	}
	.cookie-banner-items {
    grid-template-columns: 1fr;
}
}