@font-face {
	font-family: 'Comfortaa-Bold';
	src: url(.fonts/Comfortaa-Bold.eot);
	src: url(.fonts/Comfortaa-Bold.eot?#iefix) format('embedded-opentype'),
		url(.fonts/Comfortaa-Bold.otf) format('otf'),
		url(.fonts/Comfortaa-Bold.svg#Comfortaa-Bold) format('svg'),
		url(.fonts/Comfortaa-Bold.woff) format('woff'),
		url(.fonts/Comfortaa-Bold.woff2) format('woff2');
}
@font-face {
	font-family: 'Comfortaa';
	src: url('fontsComfortaa-Regular.woff2') format('woff2')
		url('Comfortaa-Regular.woff') format('woff');
	font-weight: 1;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('Comfortaa-Light.woff2') format('woff2') url('Comfortaa-Light.woff')
		format('woff');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('Comfortaa-Regular.woff2') format('woff2')
		url('Comfortaa-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('Comfortaa-Medium.woff2') format('woff2')
		url('Comfortaa-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('Comfortaa-SemiBold.woff2') format('woff2')
		url('Comfortaa-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Comfortaa';
	src: url('Comfortaa-Bold.woff2') format('woff2') url('Comfortaa-Bold.woff')
		format('woff');
	font-weight: 700;
	font-style: normal;
}

body {
	font-family: 'Comfortaa';
	margin: 0;
	padding: 0;
	background-color: #0f044d;

	/* Темно-синий фон страницы */
	color: #ffffff;
	/* Белый цвет текста для контраста */
}

header {
	background-color: #180231;
	/* Темный синий фон для заголовка */
	color: #ffffff;
	/* Белый текст для заголовка */
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	/* Для размещения поверх контента */
	opacity: 0.8;
}

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
	font-weight: 900;
}

.logo a {
	text-decoration: none;
	font-size: 48px;
}

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.main-nav ul li {
	margin: 0 15px;
}

.main-nav ul li a {
	color: #00a2ff;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

.main-nav ul li a:hover {
	color: #ae00ff;
	/* Цвет при наведении */
}

/* video 1 экран утп */
.fullscreen-video {
	position: relative;
	margin-top: auto;
	width: 100%;
	height: 100vh;
	/* Полноэкранная высота */
	overflow: hidden;
	z-index: -1;
}

.background-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	/* Убираем элементы управления и зацикливаем видео */
	pointer-events: none;
	/* Отключаем взаимодействие с видео */
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.text-overlay {
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 1;
	/* Поверх видеофона и оверлея */
	/* padding: 20px; */
}

.text-overlay h1 {
	font-size: 160px;
	font-weight: 900;
	margin: 0;
	color: #ffffff;
	opacity: 0.3;
}

.text-overlay p {
	font-size: 36px;
	font-weight: 900;
	margin: 10px 0;
	color: #e3600fe6;
}

.text-overlay img {
	max-width: 100%;
	height: auto;
	margin-top: 20px;
}

.container {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.video-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 3 колонки одинаковой ширины */
	gap: 0px;
}

.video {
	position: relative;
	padding-top: 50%;
	/* Соотношение сторон 16:9 */
	overflow: hidden;
	opacity: 0.5;
	/* Прозрачность для неактивных плиток */
	transition: opacity 0.3s ease, transform 0.3s ease;
	/* Плавный переход для прозрачности и трансформации */
}

/* Стили для видео */
.video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

/* Псевдоэлемент для неоновой границы */
.video::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid rgba(136, 0, 255, 0.8);
	/* Начальная граница неонового цвета */
	box-sizing: border-box;
	pointer-events: none;
	/* Чтобы псевдоэлемент не мешал взаимодействию с видео */
	z-index: 1;
	/* Поместить псевдоэлемент поверх видео */
	border-radius: 4px;
	/* Углы границы закруглены, если нужно */
	opacity: 0;
	/* Скрыть границу по умолчанию */
	transition: opacity 0.3s ease;
}

/* Анимация неоновой границы при наведении */
.video:hover::before {
	animation: neonBorder 1.5s ease-in-out infinite alternate;
	opacity: 1;
	/* Показать псевдоэлемент при наведении */
	z-index: 2;
	/* Поместить псевдоэлемент поверх видео при наведении */
}

/* Ключевые кадры для анимации неоновой границы */
@keyframes neonBorder {
	0% {
		box-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 255, 255, 0.8);
		border-color: rgba(97, 49, 255, 0.8);
	}

	100% {
		box-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 0 0 30px rgba(0, 255, 255, 0.8);
		border-color: rgb(255, 0, 238);
	}
}

/* При наведении плитка становится полностью видимой и увеличивается */
.video:hover {
	opacity: 1;
	/* Полная видимость для активной плитки */
	transform: scale(1.2);
	/* Увеличение плитки на 20% */
	z-index: 2;
	/* Поверх других элементов */
}

/* _____________________________________________________________________ */

/* Адаптивность */
@media (max-width: 1024px) {
	.video-grid {
		grid-template-columns: repeat(2, 1fr);
		/* 2 колонки при средней ширине экрана */
	}
}

@media (max-width: 768px) {
	.video-grid {
		grid-template-columns: 1fr;
		/* 1 колонка при узкой ширине экрана */
	}
}

/* Стили для секции "Мои услуги" */

.services-section {
	width: calc(
		100vw - 138px
	); /* Ширина секции с отступами 69px с каждой стороны */
	height: calc(
		100vh - 138px
	); /* Высота секции с отступами 69px сверху и снизу */
	background-color: #2e064b; /* Фон секции */
	color: #fff; /* Цвет текста */
	display: flex; /* Используем Flexbox для выравнивания содержимого */
	align-items: center; /* Центрируем по вертикали */
	justify-content: center; /* Центрируем по горизонтали */
	margin: 69px; /* Отступы от края экрана */
	border-radius: 20px; /* Скругленные углы */
	box-sizing: border-box; /* Учитываем отступы и границы в ширине и высоте */
}

.services-content {
	width: 160%; /* Ширина родительского блока относительно ширины секции */
	max-width: 1400px; /* Максимальная ширина родительского блока */
	background-color: #4b064a; /* фон для содержимого */
	border: 3px solid #e100ff; /* Обводка 2px  */
	border-radius: 20px; /* Скругленные углы обводки */
	box-sizing: border-box; /* Учитываем обводку и паддинг в общей ширине и высоте */
	padding: 20px; /* Отступы внутри родительского блока */
	margin: auto; /* Автоматические отступы для центрирования */
}

/* Стили для блока с форматами выходных файлов */
.formats-output {
	background-color: #6407b6; /* Сиреневый фон для блока */
	padding: 20px; /* Отступы внутри блока */
	border-radius: 8px; /* Закругленные углы */
	text-align: center; /* Выравнивание текста по центру */
	margin-bottom: 20px; /* Отступ снизу */
}

/* Стили для заголовка блока с форматами выходных файлов */
.formats-output h2 {
	margin-top: 0; /* Убираем верхний отступ */
	font-size: 1.8em; /* Размер шрифта */
	color: #ff0000; /* Красный цвет текста */
}

/* Стили для элементов форматов выходных файлов */
.formats-output span {
	display: inline-block; /* Отображаем элементы в строку */
	font-size: 1.2em; /* Размер шрифта */
	color: #ffa200; /* Черный цвет текста */
	margin: 5px 10px; /* Отступы между форматами */
	padding: 10px; /* Отступы внутри элемента */
	border-radius: 4px; /* Закругленные углы */
	background-color: #400c76; /* Светлый фон для каждого элемента */
}

/* Стили для блока с компетенциями */
.service-block {
	background-color: #dab4f2; /* Сиреневый фон для блоков */
	padding: 20px; /* Отступы внутри блока */
	border-radius: 8px; /* Закругленные углы */
	margin-bottom: 20px; /* Отступ снизу */
	color: #000; /* Черный цвет текста */
	text-align: center; /* Выравнивание текста по центру */
}

/* Стили для заголовка внутри блоков услуг */
.service-block h2 {
	margin-top: 0; /* Убираем верхний отступ */
	font-size: 1.8em; /* Размер шрифта */
	margin-bottom: 10px; /* Отступ снизу */
}

/* Стили для параграфов внутри блоков услуг */
.service-block p {
	font-size: 1.2em; /* Размер шрифта */
	line-height: 1.5; /* Междустрочный интервал */
}

/* Стили для блока "Мои компетенции" */
.competency-block {
	background-color: #9d01ff; /* Сиреневый фон для блоков */
	padding: 20px; /* Отступы внутри блока */
	border-radius: 8px; /* Закругленные углы */
}

/* Стили для сетки компетенций */
.competency-grid {
	display: grid; /* Используем Grid для размещения элементов */
	grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */
	gap: 10px; /* Расстояние между элементами */
}

/* Стили для элементов компетенций */
.competency-item {
	background-color: #450388; /* Фон элементов */
	padding: 10px; /* Отступы внутри элемента */
	border-radius: 8px; /* Закругленные углы */
	text-align: center; /* Выравнивание текста по центру */
	font-size: 1.2em; /* Размер шрифта */
	color: #ff872c; /* Белый цвет текста */
	transition: background-color 0.3s; /* Плавное изменение фона при наведении */
}

/* Стили для изменения цвета элемента при наведении */
.competency-item:hover {
	background-color: #d501ff; /* Изменение цвета при наведении */
}

/* Медиа-запросы для адаптивности */

@media (max-width: 1024px) {
	.video-grid {
		grid-template-columns: repeat(2, 1fr);
		/* 2 колонки при средней ширине экрана */
	}
}

@media (max-width: 768px) {
	.video-grid {
		grid-template-columns: 1fr;
		/* 1 колонка при узкой ширине экрана */
	}
}