:root {
	--font-family-base: "Orbitron", system-ui, sans-serif;

	--black: #000;
	--white: #fff;
	--gray: #ededed;
	--gray-50: #e6e6e6;
	--gray-100: #d9d9d9;

	--primary: #274054;
	--green: #13c980;

	--bg-gr-main: linear-gradient(112deg, #274054cc 0%, #285048cc 100%);
	--bg-dark-blue: rgba(39, 64, 84, 0.702);
	--bg-circle: linear-gradient(90deg, #274054 0%, #285048 100%);
	--bg-ellipse-green: #285048cc;
	--bg-ellipse-blue: #274054;

	/* Border */
	--border-white: 1px solid var(--white);
	--border-green: 1px solid var(--green);
	--border-primary: 1px solid var(--primary);
	--border-gray-100: 2px solid var(--gray-100);

	--box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
	--box-shadow-card: 0 4px 6px 0 rgba(28, 46, 60, 0.75);
	--box-shadow-circle: 1px 1px 10px 0 rgba(255, 255, 255, 0.15) inset,
		-1px -1px 10px 0 rgba(255, 255, 255, 0.15) inset;

	/* Font Weight */
	--fw-400: 400;
	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;
	--fw-800: 800;

	/* Font Size */
	--text-12: 12px;
	--text-14: 14px;
	--text-16: 16px;
	--text-18: 18px;
	--text-20: 20px;
	--text-22: 22px;
	--text-26: 26px;
	--text-28: 28px;
	--text-30: 30px;
	--text-32: 32px;
	--text-38: 38px;
	--text-42: 42px;
	--text-48: 48px;
	--text-52: 52px;
	--text-64: 64px;
	--text-72: 72px;

	/* Line Height */
	--lh-1: 1;
	--lh-12: 1.2;
	--lh-125: 1.25;
	--lh-14: 1.4;
	--lh-15: 1.5;

	/* Radius */
	--radius-5: 5px;
	--radius-10: 10px;
	--radius-12: 12px;
	--radius-15: 15px;
	--radius-20: 20px;
	--radius-25: 25px;
	--radius-30: 30px;

	/* Transition */
	--transition: 0.3s ease-in-out;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--text-16);
	font-weight: var(--fw-400);
	line-height: var(--lh-12);
	color: var(--white);
	background-color: var(--black);
}

h1,
h2,
h3,
h4 {
	font-weight: var(--fw-800);
}

h1 {
	font-size: var(--text-72);
	text-transform: uppercase;
}

h2 {
	font-size: var(--text-52);
}

h3 {
	font-size: var(--text-42);
}

h4 {
	font-size: var(--text-32);
}

.container {
	max-width: 1284px;
	width: 100%;
	padding-inline: 44px;
	margin-inline: auto;
}

body.menu-open .hero {
	filter: blur(6px);
}
.no-scroll {
	overflow: hidden;
}
.wrapper {
	position: relative;
	overflow: hidden;
}

.highlight {
	color: var(--green);
}

.rotate {
	display: inline-block;
	animation: spin 6s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.visibility-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	border: 0 !important;
	padding: 0 !important;
	white-space: nowrap !important;
	clip-path: inset(100%) !important;
	clip: rect(0 0 0 0) !important;
	overflow: hidden !important;
}

.form-wrapper {
	max-width: 464px;
	width: 100%;
	margin-inline: auto;
}

.modal {
	display: none;
	position: fixed;
	inset: 0;
	padding: 32px;
	background-color: #0000005b;
	align-items: center;
	justify-content: center;
	z-index: 999;
}
.modal-inner {
	max-width: 464px;
	width: 100%;
	border-radius: 16px;
	padding: 20px;
	background: var(--bg-gr-main);
	position: relative;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#close {
	position: absolute;
	top: 0;
	right: 0;
	background: transparent;
	border: none;
	color: var(--white);
	cursor: pointer;
	transition: color var(--transition);

	&:hover {
		color: var(--green);
	}
}

/* #region MEDIA QUERIES */

@media (max-width: 1200px) {
	.container {
		max-width: 1140px;
		padding-inline: 30px;
	}
	h2 {
		font-size: var(--text-42);
	}
	h3 {
		font-size: var(--text-38);
	}

	h1 {
		font-size: var(--text-64);
	}

	h4 {
		font-size: var(--text-22);
	}
}

@media (max-width: 834px) {
	.container {
		max-width: 100%;
		padding-inline: 20px;
	}
	h1 {
		font-size: var(--text-48);
	}
	h2 {
		font-size: var(--text-32);
	}
	h3 {
		font-size: var(--text-28);
	}
}

/* #endregion MEDIA QUERIES */