@font-face {
	font-family: 'Fixel Display';
	font-weight: 300;
	src: url('/FixelAll/FixelDisplay/FixelDisplay-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Fixel Display';
	font-weight: 400;
	src: url('/FixelAll/FixelDisplay/FixelDisplay-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Fixel Display';
	font-weight: 500;
	src: url('/FixelAll/FixelDisplay/FixelDisplay-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Fixel Display';
	font-weight: 600;
	src: url('/FixelAll/FixelDisplay/FixelDisplay-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Fixel Display';
	font-weight: 700;
	src: url('/FixelAll/FixelDisplay/FixelDisplay-Bold.woff2') format('woff2');
}

#overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #000;
	z-index: 1;
	top: 0;
	left: 0;
}
body.loaded #overlay {
	display: none;
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

html * {
	box-sizing: inherit;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	overflow-x: hidden;
	min-height: 100vh;
	background: #131313;
	color: #fff;
	font: 400 20px 'Fixel Display', sans-serif;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: 'liga' on;
	line-height: 1.4;
	text-rendering: optimizeLegibility;
}

#root {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99;
}

h1 {
	font-size: 48px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	color: #f3ebe6;
	/* background-image: linear-gradient(168deg, rgb(255 255 255) 0%, rgb(188 188 188) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
	position: relative;
	text-shadow: 0px 1px 3px black;
}
h2 {
	font-size: 33px;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	background-image: linear-gradient(168deg, rgb(255 255 255) 0%, rgb(188 188 188) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
}

h3 {
	font-size: 38px;
	font-weight: 600;
	margin: 0;
}

img {
	pointer-events: none;
	user-select: none;
}

.page-1-1 {
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}

.page-1 {
	background: linear-gradient(180deg, #611e00 0%, transparent 40%);
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.whatsapp {
	font-weight: 500;
	font-size: 18px;
}
.quick-contact {
	font-size: 16px;
	text-align: center;
	a {
		color: #fff;
	}
}

.page-header {
	max-width: 1620px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32px 0 0;
}

nav a {
	display: block;
}

nav a:not(.button) {
	color: #fff;
	text-decoration: none;
	display: block;
	transition: color 200ms;

	&:hover {
		color: #fa4d00;
	}
}
nav img {
	width: 32px;

	& + span {
		font-size: 0;
	}
}

.logo {
	width: 220px;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	display: flex;
	gap: 32px;
	align-items: center;
}

.button {
	background: #fa4d00;
	box-shadow: rgba(250, 77, 0, 0.63) 0px 0px 0px 0px, rgba(250, 77, 0, 0.58) 0px 0px 0px 0px, rgba(250, 77, 0, 0.35) 0px 0px 0px 0px;
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	transition: background 200ms;
	border: none;
	display: flex;
	align-items: center;

	&:hover {
		background: #fa8000;
	}
}
.button.outline {
	background: #000;
	border: 1px solid rgb(250, 77, 0);

	&:hover {
		background: rgba(250, 77, 0, 0.4);
	}
}

.vyriy-header-text {
	max-width: 1000px;
	width: 100%;
	margin: 90px 0 30px;
	position: relative;
	z-index: 1;
	animation: slide-in 1000ms 600ms ease-out;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes slide-in {
	0% {
		opacity: 0;
		transform: translateY(-80px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.plane-pic {
	position: relative;
	margin: 0 0 32px;
}

.explosion-pic {
	position: absolute;
	max-width: 500px;
	width: 100%;
	top: 50%;
	left: 50%;
	opacity: 0.7;
	transform: translate(-50%, -55%);
	animation: explode 1200ms ease-out;
}
@keyframes explode {
	0% {
		opacity: 0;
		transform: translate(-50%, -55%) scale(0.8);
	}
	100% {
		opacity: 0.7;
		transform: translate(-50%, -55%) scale(1);
	}
}
.vyriy-pic {
	z-index: 1;
	opacity: 0;
	animation: fly-in 500ms 400ms ease-out, fly 7000ms 800ms ease-in-out infinite;
	animation-fill-mode: forwards;
	position: relative;
}
.vyriy-pic-1 {
	max-width: 800px;
	width: 100%;
	position: relative;
}
.vyriy-prop {
	width: 145px;
	aspect-ratio: 1;
	background-image: url('/imgs/prop.webp');
	background-size: 580px 145px;
	background-repeat: no-repeat;
	background-position: 0 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-37%, -12%);
	animation: play-sprite 200ms steps(4) infinite;
}
@keyframes play-sprite {
	100% {
		background-position: -580px;
	}
}
@media (max-width: 740px) {
	.vyriy-prop {
		width: 100px;
		background-size: 400px 100px;
	}
	@keyframes play-sprite {
		100% {
			background-position: -400px;
		}
	}
}
@media (max-width: 500px) {
	.vyriy-prop {
		width: 80px;
		background-size: 320px 80px;
		transform: translate(-37%, -17%);
	}
	@keyframes play-sprite {
		100% {
			background-position: -320px;
		}
	}
}
.page-1 h1,
.page-1 h2 {
	opacity: 0;
	animation: fly-in 500ms 400ms ease-out;
	animation-fill-mode: forwards;
}
.page-1-footer {
	opacity: 0;
	animation: slide-up 500ms 400ms ease-out;
	animation-fill-mode: forwards;
}
@keyframes slide-up {
	0% {
		opacity: 0;
		transform: translateY(80px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fly-in {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes fly {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(16px) rotate(-2deg);
	}
}
.header-bg-video {
	animation: releav 1s ease-out;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.header-bg-video-footer {
	position: absolute;
	left: 0;
	bottom: -100px;
	width: 100vw;
	height: 100px;
	background: linear-gradient(180deg, #000 0%, transparent 100%);
	z-index: 1;
}
.page-1-1 .video-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

@keyframes releav {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.page-1-footer {
	margin: 32px 0 0;
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	gap: 32px;
}

.page-2 {
	max-width: 1320px;
	margin: 0 auto;
	padding: 64px 16px;
	position: relative;
}
.page-2-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80vw;
	opacity: 0.5;
	transform: translate(-50%, -50%);
}
@media (max-width: 960px) {
	.page-2-bg {
		display: none;
	}
}
h3 .highlight {
	color: #fa4d00;
}

.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	margin: 64px auto;
}
h4 {
	font-size: 21px;
	text-transform: uppercase;
	font-weight: 600;
	margin: 4px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
h4 img {
	width: 40px;
	aspect-ratio: 1;
	transition: opacity 200ms;
}
.features .block {
	font-size: 16px;
	font-weight: 400;
	padding: 32px;
	cursor: pointer;
	position: relative;
	opacity: 0.8;
	transition: opacity 200ms;

	/* .inner {
    transform: translateY(64px);
    transition: transform 200ms;
  } */
}
.top-corners {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.bottom-corners {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.top-corners::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	aspect-ratio: 1;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	transition: transform 200ms, border-color 200ms;
}
.top-corners::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	aspect-ratio: 1;
	border-right: 2px solid #fff;
	border-top: 2px solid #fff;
	transition: transform 200ms, border-color 200ms;
}
.bottom-corners::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 16px;
	aspect-ratio: 1;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transition: transform 200ms, border-color 200ms;
}
.bottom-corners::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 16px;
	aspect-ratio: 1;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transition: transform 200ms, border-color 200ms;
}

/* .features .block p {
  opacity: 0;
  transition: opacity 200ms;
} */
.shield {
	width: 38px;
	height: 44px;
	background: url('/imgs/shield_light.svg');
}

.features .block:hover {
	& {
		opacity: 1;
	}
	.shield {
		background: url('/imgs/shield_highlight.svg');
	}
	p {
		opacity: 1;
	}
	h4 img {
		opacity: 0;
	}
	.inner {
		transform: translateY(0);
	}
	.top-corners::before,
	.top-corners::after,
	.bottom-corners::before,
	.bottom-corners::after {
		transform: rotate(180deg);
		border-color: #fa4d00;
	}
}
h2.heading {
	font-size: 48px;
	font-weight: 700;
	text-transform: uppercase;
}
.page-3 {
	max-width: 1320px;
	padding: 64px 16px 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;

	header {
		max-width: 600px;
		align-self: flex-start;

		h2 {
			text-align: left;
		}
	}
}
.page-3 .video {
	max-width: 1000px;
	position: relative;
}
.page-3 .bg-pic {
	position: absolute;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: -1;
}
.intro-video {
	max-width: 1000px;
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	margin: 64px auto 32px;
}
.drone-features {
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: center;
	color: #efefef;

	.title {
		font-size: 48px;
		font-weight: 700;
	}
	.label {
		font-size: 22px;
		font-weight: 400;
	}
	.divider {
		width: 1px;
		height: 44px;
		background: #fff;
	}
}

.page-4 {
	margin: 128px auto 0;
	max-width: 1320px;
	padding: 0 16px;
}

.hiw-vid {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video {
	position: relative;
	cursor: pointer;
	width: 100%;

	/* &::after {
		content: '';
		position: absolute;
		width: 48px;
		aspect-ratio: 1;
		background-image: url('/imgs/play.svg');
		background-size: contain;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	} */
}
.page-3 .video::after {
	width: 96px;
}
.video.playing {
	&::after {
		display: none;
	}
	:hover::after {
		display: block;
	}
}

.how-it-works {
	font-size: 16px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 64px;
	margin: 64px 0 0;

	.block {
		position: relative;
		padding: 8px;
	}

	video {
		width: 100%;
	}

	.top-corners::before,
	.top-corners::after,
	.bottom-corners::before,
	.bottom-corners::after {
		border-color: #fa4d00;
	}
}

.page-5 {
	margin: 128px auto 0;
	padding: 0 16px;
	max-width: 1320px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;

	p {
		max-width: 900px;
	}

	.bg-pic {
		position: absolute;
		z-index: -1;
		max-width: 90vw;
		left: 30%;
		top: -100%;
	}
}

.page-6 {
	margin: 128px auto 0;
	padding: 0 16px;
	max-width: 1320px;
}
.faq {
	font-size: 16px;
	margin: 64px auto;
	padding: 0;
	list-style: none;
	max-width: 800px;

	.question {
		padding: 16px;
		border-bottom: 1px solid #fff;
	}
	.answer {
		padding: 16px;
	}
}

summary {
	list-style: none;
	cursor: pointer;
	transition: background 200ms;
	display: flex;
	justify-content: space-between;
	align-items: center;

	&:hover {
		background: rgba(250, 77, 0, 0.4);
	}
}
details {
	.cross {
		transform: rotate(45deg);
		transition: transform 200ms;
	}
	&[open] {
		background: rgba(250, 77, 0, 0.8);
		.cross {
			transform: rotate(0deg);
		}
	}
}
.cross {
	min-width: 24px;
	max-width: 24px;
	aspect-ratio: 1;
	background: url('/imgs/cross.svg');
}

.page-7 {
	margin: 128px auto 0;
	padding: 0 16px;
	max-width: 1320px;
	display: flex;
	gap: 96px;

	.banner {
		background: #ededed;
		color: #000;
		flex: 0.8;
		padding: 64px 32px;
		text-align: center;

		h2 {
			background: none;
			color: #000;
			-webkit-text-fill-color: #000;
		}
	}
	.logo-vert {
		width: 200px;
		margin: 128px 0 0;
	}
	.form {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		label {
			color: #ededed;
			font-size: 16px;
		}
		input,
		textarea {
			background: #ededed;
			padding: 8px 12px;
			border: 1px solid #fff;
			border-radius: 5px;
			font-size: 18px;
			width: 100%;
			margin: 0 0 16px;
			font-family: 'Fixel Display', sans-serif;
			font-weight: 500;
		}
		textarea {
			min-height: 180px;
		}
		button {
			margin: 32px 0 0;
			align-self: flex-start;
		}
	}
	.row {
		display: flex;
		gap: 32px;
	}
}

.privacy-policy {
	label {
		cursor: pointer;
	}
	a {
		color: #fa4d00;
	}
	input[type='checkbox'] {
		margin: 0;
		width: unset;
	}
}

.page-footer {
	display: flex;
	justify-content: space-between;
	padding: 64px 0 64px;
	max-width: 1320px;
	margin: 0 auto;

	.logo {
		height: 50px;
	}
	small {
		font-size: 14px;
	}
}

section {
	width: 100vw;
}

.form-message {
	opacity: 0;
	font-size: 14px;
	margin: 16px 0 0;
	transition: opacity 200ms;
}

.bg-pic-footer {
	max-width: 900px;
	width: 100%;
	margin: 64px auto 0;
	display: block;
}

#vid-view {
	padding: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 1200px;
	aspect-ratio: 16 / 11;
	outline: none;
	border: none;

	&:not([open]) {
		display: none;
	}

	video {
		display: block;
		width: 100%;
		outline: none;
	}

	&::backdrop {
		background: radial-gradient(#2f84a7 10%, #000000c9 95%);
	}
}

.cross-btn {
	border: none;
	background: none;
	width: 50px;
	cursor: pointer;
	outline: none;

	img {
		display: block;
		width: 100%;
	}
}

#donate {
	font-size: 16px;
}
.donate-value {
	color: #fff;
}
.donate-title,
.donate-value {
	font-weight: 600;
}
.donate-row {
	margin: 16px 0;
}

@media (max-width: 900px) {
	.page-header {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 16px 0 0;

		nav ul {
			flex-direction: column;
			gap: 16px;
		}
	}
	.page-footer nav ul {
		flex-wrap: wrap;
		justify-content: center;
	}
	.vyriy-header-text {
		margin: 32px 0 32px;
	}
	h1 {
		font-size: 28px;
	}
	h2 {
		font-size: 20px;
	}
	h2.heading {
		font-size: 28px;
	}
	.drone-features {
		flex-direction: column;
		.divider {
			display: none;
		}
	}
	.page-3 {
		overflow-x: hidden;
	}
	.page-5 {
		overflow-x: hidden;
		.bg-pic {
			position: relative;
			z-index: -1;
			max-width: 80vw;
			left: 0;
			top: 0;
		}
	}
	.page-7 {
		flex-direction: column;
		gap: 32px;
	}
	.page-footer {
		margin: 64px 0 0;
		padding: 32px 16px;
		flex-direction: column-reverse;
		align-items: center;
		gap: 32px;
	}
	.page-7 .row {
		flex-direction: column;
		gap: 0;
	}
	.explosion-pic {
		max-width: 400px;
	}
	.plane-pic {
		margin: 0 0 16px;
	}
	.lang {
		position: absolute;
		right: 32px;
		top: 24px;
	}
}