:root {
	--font-family-base: "Poppins", sans-serif;
	--font-jost: "Jost", sans-serif;

	--black: #000;
	--white: #fff;

	--gray: #545454;
	--gray-50: rgba(30, 31, 32, 0.5);
	--gray-100: #92949f;
	--gray-150: #eaeaec;

	--primary: #fafafa;
	--dark: #1e1f20;

	--green: #1a6820;
	--orange: #fddc8b;
	--blue: #28d0e8;

	--bg-main: #141414;
	--bg-grey: #45474f;

	--gradient: linear-gradient(90deg, var(--orange) 0%, var(--blue) 100%);

	/* Border */
	--border-white: 1px solid var(--primary);
	--border-gray: 1px solid var(--bg-grey);
	--border-orange: 1px solid var(--orange);

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

	/* Font Size */
	--text-10: 10px;
	--text-13: 13px;
	--text-14: 14px;
	--text-15: 15px;
	--text-22: 22px;
	--text-27: 27px;
	--text-33: 33px;
	--text-40: 40px;
	--text-42: 42px;
	--text-60: 60px;
	--text-75: 75px;
	--text-96: 96px;

	/* Line Height */
	--lh-085: 0.85;
	--lh-1: 1;
	--lh-12: 1.2;
	--lh-14: 1.4;
	--lh-15: 1.5;
	--lh-17: 1.7;
	--lh-18: 1.8;
	--lh-225: 2.25;

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

body {
	font-family: var(--font-family-base);
	font-size: clamp(15px, 0.938vw, 21px);
	font-weight: var(--fw-400);
	line-height: var(--lh-15);
	color: var(--primary);
	background-color: var(--bg-main);
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

main {
	overflow-x: clip;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-jost);
}

h1 {
	font-size: var(--text-96);
	font-weight: var(--fw-700);
	line-height: var(--lh-085);
	letter-spacing: -3.9px;
}

h2,
h3,
h4 {
	font-weight: var(--fw-500);
	line-height: var(--lh-12);
}

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

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

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

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

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

.gr-highlight {
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 3px transparent;
	color: var(--bg-main);
}

.btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 260px;
	width: 100%;
	padding: 12px 20px;
	font-size: var(--text-14);
	font-weight: var(--fw-600);
	line-height: var(--lh-17);
	text-transform: uppercase;
	color: currentColor;
	overflow: hidden;
	cursor: pointer;
}

.btn-gradient {
	background: var(--primary);
	color: var(--dark);

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--gradient);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.5s ease-in-out;
		z-index: 0;
	}

	&:hover {
		&::before {
			transform: scaleX(1);
		}
	}

	span {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 3px;
	}
}

.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: 630px;
	width: 100%;
	margin-inline: auto;
}

.arrow-animate .arrow {
	display: flex;
	animation: arrow-move 1.5s infinite ease-in-out;
	transition: transform 0.3s ease;
}

@keyframes arrow-move {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(4px);
	}
}

@keyframes animateGradient {
	0% {
		border-image-source: linear-gradient(
			0deg,
			var(--orange) 0%,
			var(--blue) 100%
		);
	}
	25% {
		border-image-source: linear-gradient(
			90deg,
			var(--orange) 0%,
			var(--blue) 100%
		);
	}
	50% {
		border-image-source: linear-gradient(
			180deg,
			var(--orange) 0%,
			var(--blue) 100%
		);
	}
	75% {
		border-image-source: linear-gradient(
			270deg,
			var(--orange) 0%,
			var(--blue) 100%
		);
	}
	100% {
		border-image-source: linear-gradient(
			360deg,
			var(--orange) 0%,
			var(--blue) 100%
		);
	}
}

/* #region MEDIA QUERIES */

@media (max-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media (max-width: 745px) {
	.container {
		max-width: 100%;
		padding-inline: 16px;
	}
	h1 {
		font-size: var(--text-60);
		line-height: var(--lh-1);
	}
	h2 {
		font-size: var(--text-40);
		line-height: var(--lh-14);
	}
	h3 {
		font-size: var(--text-27);
	}
}

/* #endregion MEDIA QUERIES */