@font-face {
  font-family: 'Knile';
  src: url('Knile-Thin.woff2') format('woff2'), url('Knile-Thin.woff') format('woff');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Knile';
  src: url('Knile.woff2') format('woff2'), url('Knile.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Knile';
  src: url('Knile-SemiBold.woff2') format('woff2'), url('Knile-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Knile';
  src: url('Knile-Black.woff2') format('woff2'), url('Knile-Black.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

a {
	text-decoration: none;
}
.red, .red a {
	color: #ff4500;
}
.desktop {
	display: block;
}
.mobile {
	display: none;
}

body {
	margin: 0;
	paddding: 0;
	font-family: 'Knile', sans-serif;
	background-color: #000;
	color: #fff;
	font-weight: 400;
}
.header {
	position: relative;
	background-size: cover;
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 20px;
}
.header h1 {
	font-size: clamp(20px, 4vw, 70px);
	margin: 0;
}
.header h1 span {
	font-size: clamp(35px, 6.25vw, 100px);
	display: block;
}
.header h2 {
	font-size: clamp(25px, 4vw, 70px);
	font-weight: 100;
	margin: 0;
}
.header h2 span {
	display: block;
}
.header .phone {
	font-size: clamp(25px, 4.5vw, 55px);
	font-weight: 900;
}
.header .mail {
	font-size: clamp(12px, 2.35vw, 29px);
}
.header .video {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.header .video video {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.sections {
	display: flex;
	justify-content: space-between;
	padding: 40px 20px;
	flex-wrap: wrap;
	gap: 20px;
}
.section h3 {
	font-size: clamp(20px, 3vw, 45px);
	color: #666;
	margin: 0;
	font-weight: 100;
}
.section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.section ul li {
	font-weight: 900;
	padding: 2px 0;
}
.section ul li a {
	color: #777;
	font-weight: 600;
	font-size: clamp(15px, 2vw, 25px);
}
.section ul li a:hover {
	color: #ff4500;
}
.description {
	margin: 0 auto;
	padding: 20px;
	color: #888;
	line-height: 1.5;
}
.description .inner {
	max-width: calc(50% - 20px);
	margin: 0 auto;
	text-align: center;
}
.description .inner h2 {
	font-size: clamp(15px, 3vw, 30px);
	color: #666;
	margin: 0;
	font-weight: 100;
	text-align: center;
}

@media (max-width: 1023px) {
	.section {
		width: calc(25% - 20px);
	}
}
@media (max-width: 767px) {
	.desktop {
		display: none;
	}
	.mobile {
		display: block;
	}

	.header {
		flex-direction: column;
	}
	.header .left {
		margin-bottom: 24px;
	}
	.section {
		width: calc(50% - 20px);
	}
	.section ul {
		margin-bottom: 12px;
	}
	.description .inner {
		max-width: 100%;
	}
}