@import '../libs/btn/anim-menu-btn.css';

@import '../css/vars.css';
@import '../css/grid.css';

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

html, body {
	height: 100%;
    font-family: montserrat-g, sans-serif;
	color: var(--white-color);
}

.nav {
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 20px;
  }

  .nav-item {
	position: relative;
  }

  .dropdown-nav {
	color: white;
	text-decoration: none;
	padding: 10px 15px;
	cursor: pointer;
	display: inline-block;
	border-radius: 6px;
  }

  .dropdown-menu {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	background-color: #1c1c1c;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }

  .dropdown.open .dropdown-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 343px;
    font-size: 0.3em;
    gap: 20px;
	margin-left: -30%;
}
#preloader {
    display: none;
  }
  .dropdown-item {
	display: block;
	padding: 10px 16px;
	color: white!important;
	text-decoration: none;
	white-space: nowrap;
	font-size: 1.755em !important;
  }

  .dropdown-item:hover {
	background-color: #2d2d2d;
	color: #ff9e4f;
  }
#bg-video {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	max-height: 100vh; /* пример ограничения */
  }
  
#networkCanvas {
	position: relative;
	z-index: 10; /* Чтобы канвас был выше других слоев */
  }
.burger-menu {
	display: none;
}
canvas {
	display: block;
  }
@font-face {
	font-family: montserrat-g;
	src: url('{{ url_for('static', filename='assets/fonts/Montserrat-Regular.woff2') }}');
	
}

@font-face {
	font-family: montserrat-g;
	src: url('{{ url_for('static', filename='assets/fonts/Montserrat-Bold.woff2') }}');
	font-weight: 700;
}

@font-face {
	font-family: montserrat-g;
	src: url('{{ url_for('static', filename='assets/fonts/Montserrat-Black.woff2') }}');
	font-weight: 900;
}

@font-face {
	font-family: montserrat-g;
	src: url('{{ url_for('static', filename='assets/fonts/Montserrat-SemiBold.woff2') }}');
	font-weight: 600;
}

body {
	font-size: 16px;
	font-family: montserrat-g, sans-serif;
	overflow: hidden;
}
/* Стили для экрана загрузки */
/*  */

canvas {
	width: 100%;
	height: 100vh;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1; 
	/* Канвас будет на заднем плане */
  }
  #waveCanvas {
	width: 100%;
	height: 100vh;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1; 
	pointer-events: none; /* Чтобы не блокировать мышь */
  }
  .slogan {
	
	text-align: center;
	z-index: 1;
  }
  .background {
	width: 100%;
	height: 100vh;
	position: absolute;
	z-index: -2; 
  
  }
  
  
  .background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('https://via.placeholder.com/1500x500'); /* замените на ваше изображение */
	background-size: cover;
	background-position: center;
	filter: blur(8px);
  }
  
  
  .slogan-text {
	font-size: 36px;
	font-weight: bold;
	color: #fff;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
	margin-bottom: 20px;
  }
  
  .slogan-button {
	padding: 12px 24px;
	font-size: 18px;
	background-color: #ff9e4f;
	border: none;
	color: white;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
  
  .slogan-button:hover {
	background-color: #c9732e;
  }
.slider {
	height: 100%;
}

.slider__layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}

.slider__item {
	overflow: hidden;
	transform: scale(1.25)!important;
	transition: 1s ease!important;
	position: relative;
}

.slider__item:not(.swiper-slide-active) {
	transform: scale(1)!important;
}

.slider-ui {
	position: absolute;
	z-index: 10;
	inset: 0;
}

.top-line {
	padding: 3.2em 0;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	width: 100%;
	height: 100px;
}
.top-line.menu-on-slide5 {
	background: rgb(255, 255, 255);
}
.service-item2 {
	background: #ffffff;
	padding: 30px 20px;
	max-width: 280px;
	border-radius: 16px;
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	font-size: 1.2em;
	text-align: center;
}
.background-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: -1; /* За контентом */
	pointer-events: none; /* Чтобы не мешал кликам */
  }
  
  .parallax-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: blur(5px);
	width: 600px; /* Подстрой под нужный размер */
	transition: transform 0.1s ease-out;

  }
  

.logo {
	display: block;
	width: 120px;
	height: 40px;
	background-size: contain;
	margin-bottom: 20px;
	padding-right: 200px;
    margin-top: 10px;
}


.logo img {
	display: block;
	width: 12.5em;
	
	
}
.btn {
	padding: 1.05em 2.6em;
	color: var(--white-color);
	background-color: #ff9e4f;
	border: 1.5px solid transparent;
	border-radius: 10em 0 10em 10em;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: .21em;
	text-transform: uppercase;
	font-size: 1em;
	cursor: pointer;
}
.btn:hover {
	background-color: #c9732e;
}

.main-menu li {
	list-style-type: none;
	display: inline-block;
}

.main-menu li > * {
	color: var(--gray-color);
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	font-size: .755em;
	letter-spacing: .25em;
}

.main-menu li > *::before,
.main-menu li > *::after {
	content: '';
	display: inline-block;
	height: 2px;
	background-color: var(--green-color);
	width: 11.25px;
	vertical-align: middle;
	top: -1px;
	left: -1.5px;
	position: relative;
	border-radius: 10em;
	margin: 0 7.25px;
	visibility: hidden;
}

.main-menu li.active > *,
.main-menu li:hover > * {
	color: var(--white-color);
}

.main-menu li.active > *::before,
.main-menu li:hover > *::before,
.main-menu li.active > *::after,
.main-menu li:hover > *::after {
	visibility: visible;
}
.menu-on-slide5 .main-menu li > * {
	color: #4b4b4b;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	font-size: .755em;
	letter-spacing: .25em;
}

.menu-on-slide5 .main-menu li.active > *,
.menu-on-slide5 .main-menu li:hover > * {
	color: #000000;
}

.menu-on-slide5 .top-line {
	background-color: #000000;
	position: relative;
	z-index: 100;
}



.menu-on-slide5 .main-menu li.active > *::before,
.menu-on-slide5 .main-menu li:hover > *::before,
.menu-on-slide5 .main-menu li.active > *::after,
.menu-on-slide5 .main-menu li:hover > *::after {
	background-color: #ff9e4f;
}

  
/* Стили логотипа и кнопки на 5-м слайде */

  
.menu-on-slide5 .button--top {
	background-color: transparent;
	border-color: #ff9e4f;
	margin: 0 2em 0 3em;
	color: #000000;
	
}
  
.menu-on-slide5 .button--top:hover {
	background-color: #c9732e;
	color: #ffffff;
}
  


.button {
	padding: 1.05em 2.6em;
	color: var(--white-color);
	background-color: #ff9e4f;
	border: 1.5px solid transparent;
	border-radius: 10em 0 10em 10em;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: .21em;
	text-transform: uppercase;
	font-size: .70em;
	cursor: pointer;
}

.button--top {
	background-color: transparent;
	border-color: #ff9e4f;
	margin: 0 2em 0 3em;
}

.button--main {
	margin-top: 3em;
	padding: 1.6em 3.5em;
}

.button:hover {
	background-color: #c9732e;
}

.submenu {
	--anim-menu-btn-color: var(--gray-color);
	--anim-menu-btn-gap: .195em;
	--anim-menu-btn-width: 1.08em;
}

.header-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.header-content {
	flex: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	flex-direction: column;
}

.header-content__slide {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	
}

.header-content h1 {
	font-size: calc(var(--index) * 4);
	font-weight: 600;
	margin-right: auto;
	padding: 0;
	line-height: 1.3;         /* немного больше, чем 1 */
	letter-spacing: 0.55em;   /* чуть раздвинуть буквы */
	
  }
  
  

.header-content p {
	max-width: 560px;
	font-weight: 600;
	line-height: 1.4;
	display: inline-block;
	font-size: 20px;
}

.header-bottom {
	min-height: 120px;
}

.letters .letter {
	text-shadow: 35px 0 35px rgba(0 0 0 / .5);
	position: relative;
	margin-left: calc(var(--index) * -2.65);
	right: calc(var(--index) * -2.65);
	opacity: 0;
	top: -5em;
	transition: opacity var(--transition), top .2;
	transition-delay: calc(var(--index) * 0.01s);
}
.letters2 .letter {
	text-shadow: 25px 0 35px rgba(0 0 0 / .4);
	position: relative;
	margin-left: calc(var(--index) * -2.65);
	right: calc(var(--index) * -2.65);
	opacity: 0;
	top: -5em;
	transition: opacity var(--transition), top .2;
	transition-delay: calc(var(--index) * 0.01s);
	

}
.mobile-main2::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.719);
	z-index: 0;
	height: 96vh;
}

.header-content__slide.active .letter {
	opacity: 1;
	top: 0;
}

.header-content__slide.active + * .letter {
	top: 5em;
}

.header-content__info {
	top: -18em;
	position: relative;
	opacity: 0;
	transition: opacity 1s ease, top 0.25s ease;
}

.header-content__slide.active .header-content__info {
	opacity: 1;
	top: 0;
}

.header-content__slide:has(* + .active .header-content__info),
.header-content__slide.active + * .header-content__info {
	top: 18em;
}

.slider-ui {
	pointer-events: none;
}

.logo, .main-menu, .button, .submenu {
	pointer-events: auto;
}
/* Обертка для дополнительного контента */
.additional-content {
	text-align: center;
	color: #000000;
	padding: 100px 20px; /* Добавили отступы для вертикального центрирования */
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
  }
  
  /* Заголовок */
  .additional-content h2 {
	font-size: 2rem;     /* Размер заголовка */
	margin-bottom: 10px;
  }
  
  /* Параграф */
  .additional-content p {
	font-size: 1.2rem;   /* Размер текста */
	margin-bottom: 20px;
  }
  
  .full-center-wrapper {
	display: flex;
	justify-content: center;  /* Центрирование по горизонтали */
	align-items: center;   
	height: 100px; 
  }
  
  .additional-content2 {
	text-align: center;
	color: #ffffff;
	padding: 100px 20px;
	max-width: 600px;
	width: 100%;
  }

  .additional-content2 h2 {
	font-size: 2rem;     /* Размер заголовка */
  }
  
  /* Параграф */
  .additional-content2 p {
	font-size: 1.2rem;   /* Размер текста */
  }
  .why-us-full {
	padding: 80px 20px;
	background-color: #fefefe;
	text-align: center;
	margin-top: 50px;

  }
  
  .why-us-full h2 {
	font-size: 2.6em;
	margin-bottom: 30px;
	color: #000000;
  }
  
  .why-us-full .subtext {
	font-size: 1.4em;
	color: #666;
	margin-bottom: 40px;
  }
  
  .service-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;
  }
  
  .service-item {
	background: #ffffff;
	padding: 30px 20px;
	max-width: 280px;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
  }
  .check-icon {
    width: 50px;
    height: 50px;
    display: flex;
    position: relative;
    left: 9vh;
    justify-content: center;
    align-items: center;
    margin-bottom: 13px;
}
  .service-item:hover {
	transform: scale(1.05); /* Увеличиваем блок */
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Немного сильнее тень */
	z-index: 1;
  }
  .service-item2:hover {
	transform: scale(1.05); /* Увеличиваем блок */
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Немного сильнее тень */
	z-index: 1;
  }
  
  .service-item img {
	width: 60px;
	height: auto;
	margin-bottom: 20px;
  }
  
  .service-item h3 {
	font-size: 1.2em;
	margin-bottom: 10px;
	color: #000000;
  }
  
  .service-item p {
	font-size: 1.05em;
	color: #000000;
	text-align: center;
	pointer-events: none;
  }
  
  .footer {
	background-color: #1a1a1a;
	color: #fff;
	padding: 40px 20px;
	font-family: sans-serif;
  }
  
  .footer-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
  }
  .footer-section {
	margin: 20px;
  }
  
  .footer-section h4 {
	margin-bottom: 15px;
	font-size: 1.2em;
	color: #ffffff;
	text-decoration: underline;
  }
  
  .footer-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30px;
  }

  .footer-logo img {
	max-width: 180px;
  }
  
  .footer-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
  }
  
  .footer-menu li {
	margin-bottom: 10px;
  }
  
  .footer-menu a {
	color: #fff;
	text-decoration: none;
	transition: color 0.3s;
  }
  
  .footer-menu a:hover {
	color: #ddd;
  }
  
  .footer-contacts p {
	margin: 5px 0;
  }
  
  .footer-contacts a {
	color: #fff;
	text-decoration: none;
  }
  
  .footer-contacts a:hover {
	text-decoration: underline;
  }
  .footer-socials {
	margin-top: 15px;
	display: flex;
	gap: 15px;
	justify-content: center;
  }
  
  .footer-socials .social-icon img {
	width: 48px;
	height: 48px;
	transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  .footer-socials .social-icon:hover img {
	transform: scale(1.2);
  }
  /* Контейнер формы */
/* Затемнённый фон */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.719);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease;
  }
  
  /* Модальное окно */
  .modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	width: 90%;
	max-width: 600px;
	background: #fff;
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	color:black
  }
  
  /* Когда открыто */
  .modal.show,
  .modal-overlay.show {
	display: block;
	opacity: 1;
  }
  
  .modal.show {
	transform: translate(-50%, -50%) scale(1);
  }
  
  /* Контент */
  .modal-content {
	position: relative;
  }
  
  /* Крестик (кнопка закрытия) */
  .close-button {
	position: absolute;
	right: 16px;
	font-size: 24px;
	color: #666;
	cursor: pointer;
	transition: color 0.3s;
	font-weight: bold;

  }
  .close-button:hover {
	color: #000;
  }
  
  /* Формы */
  .modal form .form-group {
	margin-bottom: 15px;
  }
  .modal form label {
	font-weight: 500;
	margin-bottom: 5px;
	display: block;
  }
  .modal form input,
  .modal form textarea,
  .modal form select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 15px;
  }
  .service-page {
	margin: 0 auto;
	font-family: sans-serif;
	color: #333;
    align-items: center;
    height: 100vh;
	position: relative;
  }
  
  .service-page h1 {
	color: #ffffff;
    margin-bottom: 1rem;
    margin-top: 30px;
    text-align: center;
    position: relative;
    top: 40%;
	font-size: 3.2rem;
  }
  .service-header {
	width: 100%;
	height: 98vh;
    text-align: center;
	margin-top: -50px;
  }
  
  .service-page .slogan {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 1rem;
    margin-top: 30px;
    text-align: center;
    position: relative;
    top: 40%;
  }

  
  .service-page .description {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 2rem;
	
  }
  
  .image-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
	justify-content: center;
  }
  
  .image-gallery img {
	width: calc(33.333% - 1rem);
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  .description {
	font-size: 1.4rem;
	line-height: 1.6;
	color: #000000;
	margin-top: 60px;
	padding: 100px;
	width: 100%;
	text-align: center;
  }
  .overflow-auto {
	overflow: auto;
  }
  .back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: none;
	z-index: 1000;
	padding: 10px;
	transition: opacity 0.3s ease;
  }
  
  .back-to-top:hover {
	opacity: 0.8;
  }
  .what_we {
	font-size: 1.4em;
	margin: 30px;
        font-weight: bold;
}
.services-list {
	list-style: none;
	padding: 0;
	max-width: 800px;
	margin: 0 auto;
  }
  
  .services-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 30px;
    list-style: none;
    max-width: 800px;
    margin: 0 auto;
    color: #000000;
    position: relative;
    justify-content: center;
    padding: 0px;
  }
  .image-gallery-service {
	margin-top: 100px;
  }
  
  .check-icon {
	color: #4CAF50;
	margin-right: 10px;
	font-weight: bold;
  }
	
  
  /* Адаптивность */
  @media (max-width: 768px) {
	#contacts .container {
	  padding: 20px;
	}
  
	#contacts h2 {
	  font-size: 1.5rem;
	}

	.footer-container {
	  flex-direction: column;
	  align-items: center;
	  text-align: center;
	}
  
	.footer-logo,
	.footer-menu,
	.footer-contacts {
	  margin-bottom: 20px;
	}
  }
  @media (max-width: 1080px) {
	body {
		overflow: auto;
		overflow-x: hidden;
	  }
	  .services-list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		width: 70%;
	  }
    
	#bg-video {
		height: 100vh; /* Пример ограничения */
	  }
	  .header-content h1 {
		font-size: calc(var(--index) * 3);
		letter-spacing: 0.78em;
	  }
	  .header-content p {
		font-size: 20px;
	}
	.header-content__slide {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}
	.burger-menu {
		display: flex;
		align-items: center;
	}
	.menu:not(.show) {
		display: none;
	}
	.menu {
		display: flex;
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		min-height: 30vh;
		background-color: rgba(0, 0, 0, 0.966);
		z-index: 9999;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		padding-bottom: 20px;
		padding: 20px;
	}
	#preloader {
		position: fixed;
		z-index: 9999;
		background: #000000;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity 0.3s ease;
	  }
	  
	  /* Анимация логотипа */
	  #preloader-logo {
		width: 200px;
		height: auto;
		animation: pulse 1.5s infinite;
	  }
	  
	  @keyframes pulse {
		0% { transform: scale(1); opacity: 1; }
		50% { transform: scale(1.1); opacity: 0.7; }
		100% { transform: scale(1); opacity: 1; }
	  }
	  
	.menu ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
	}

	.dropdown-item{
		font-size: 0.755em !important;
	}
	.nav-item .dropdown {
		display: none;
	}
	.nav-item .dropdown .open{
		left: 20%!important;
	}
	.main-menu li {
		font-size: 1.6em;
	}
	.menu .button {
		font-size: 1.2em;
	}
	.menu ul .dropdown-menu{
		display: none;
	}
	
	.top-menu {
		justify-content: space-between;
		width: 100vw;
		padding: 0 20px;
	}
	.top-line {
		width: auto;

	}
    .slogan {
        position: absolute;
		margin-top: 100px;
	  }
	.top-line.menu-on-slide5 {
		width: auto
	}
	.btn {
	font-size: 0.9em;
	}
	.call {
		display: flex!important;
	}
	.modal {
		top: 30%;
		left: 0;
		transform: translate(0, -30%) !important;
		width: 100vw;
		min-height: 33vh;
		max-width: none;
	}
	.what_we {
		font-size: 1.4em;
		margin: 30px;
	}
	.porfolio-wrapper {
		position: relative;
		min-height: 100%;
		padding: 20px 0;
	}
	.porfolio-wrapper .wrapper {
		height: 100%;
	}
	.row {
		display: flex
	;
		margin: 0 calc(var(--grid-gutter) * 1);
	}
	.menu-on-slide5 .main-menu li > * {
		color: #000000
		text-transform: uppercase;
		font-weight: 700;
		text-decoration: none;
		font-size: .755em;
		letter-spacing: .25em;	
        align-items: center;
	}
	
	.menu-on-slide5 .main-menu li.active > *,
	.menu-on-slide5 .main-menu li:hover > * {
		color: #ffffff;
	}
	
	.menu-on-slide5 .top-line {
		background-color: #000000;
		position: relative;
		z-index: 100;
	}
	
	.menu-on-slide5 .main-menu li.active > *::before,
	.menu-on-slide5 .main-menu li:hover > *::before,
	.menu-on-slide5 .main-menu li.active > *::after,
	.menu-on-slide5 .main-menu li:hover > *::after {
		background-color: #ff9e4f;
	}
	.menu-on-slide5 .button--top {
		background-color: transparent;
		border-color: #ff9e4f;
		margin: 0 2em 0 3em;
		color: #ffffff;
		
	}
	  
	.menu-on-slide5 .button--top:hover {
		background-color: #c9732e;
		color: #ffffff;
	}
	.image-gallery img {
		width: calc(50% - 1rem);
	  }
	  .description {
		padding: 50px;
	}
	.image-gallery {
		display: block;
		flex-wrap: wrap;
		gap: 1rem;
		margin-bottom: 30rem;
		justify-content: center;
		width: 100%;
		position: relative;
	}
	.mobile-main {
		background-size: cover;
		width: 100%;
		height: 100vh;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		padding: 40px;
		display: flex;
	}
	.mobile-main::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.719); /* черный полупрозрачный слой */
		z-index: 0;
	  }
	  .mobile-main2 {
		background-size: cover;
		width: 100%;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		padding: 40px;
	}
	.mobile-main2::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.719); /* черный полупрозрачный слой */
		z-index: 0;
		height: 98vh;
	  }
	.letters {
		z-index: 1;
		position: absolute;
                margin-bottom: 30px;
	}
	.button--main{
		z-index: 1;
		position: absolute;
		margin-top: 30vh;
	}
	
    #waveCanvas {
		width: 49vh;
	}
	#sphereCanvas {
		filter: brightness(0.7);
	}
	.service-item2 {
		background: #ffffff;
		padding: 30px 20px;
		max-width: 280px;
		border-radius: 16px;
		box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
		font-size: 1.2em;
        text-align: center;
	}
	.check-icon {
		left: 11vh;
	}

	.service-page h1 {
		font-size: 2.7rem;
	}
	.footer-logo {
		margin-right: -15px;
	  }

	@media (max-width: 480px) {
	  .image-gallery img {
		width: 100%;
	  }
	  .video-block {
		position: relative;
		padding-top: 56.25%; /* 16:9 */
		margin-bottom: 2rem;
	  }
	  
	  .video-block video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 12px;
		object-fit: cover;
		box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	  }
}