/* ==================== [ Root CSS Start ] ==================== */
:root {
	/* Project Core */
	--white: #ffffff;
	--white-60: rgba(255, 255, 255, 0.60);
	--white-20: rgba(255, 255, 255, 0.20);
	--white-15: rgba(255, 255, 255, 0.15);
	--white-10: rgba(255, 255, 255, 0.1);
	--white-05: rgba(255, 255, 255, 0.05);
	--black: #000000;
	--transparent: #0000;

	/* Project Root */
	--primary: #4DD0F8;
	--info: #0160E7;
	--body: #020305;
	--dark: #111111;
	--muted: #282828;
	--gray: #C4C4C4;
	--primary-grad: linear-gradient(180deg, var(--primary) 0%, var(--info) 100%);
	/* --text-grad: linear-gradient(270deg, rgba(72, 72, 72, 0.00) -47.42%, var(--white) 98.14%); */
	--text-grad: linear-gradient(268deg, #3D3D3E 26.53%, #FFF 98.19%);
	--icon-grad: linear-gradient(223deg, rgba(72, 72, 72, 0.00) -8.25%, var(--white) 133.67%), var(--white-05);
	--button-grad: linear-gradient(90deg, rgba(115, 115, 115, 0.15) 0%, #C8C8C8 25%, #FFF 50%, #C8C8C8 74.52%, rgba(115, 115, 115, 0.15) 100%);
	--button-shade: linear-gradient(90deg, rgba(115, 115, 115, 0.20) 0%, var(--white) 50%, rgba(115, 115, 115, 0.20) 100%);
	--border: rgba(115, 115, 115, 0.20);


	/* Filter */
	--blur-10: blur(10px);

	/* Font Family */
	--JostLight: 'JostLight', sans-serif;
	--JostMedium: 'JostMedium', sans-serif;
	--JostRegular: 'JostRegular', sans-serif;
	--JostSemiBold: 'JostSemiBold', sans-serif;
	--tt-rg: 'TT Supermolot Neue Trl', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
	color: var(--white);
	font-family: var(--JostLight);
	font-size: 20px;
	font-style: normal;
	line-height: 150%;
	background: var(--body);
	overflow: visible;
	overflow-x: clip !important;
}

/* ==================== [ Root CSS End ] ==================== */

/* ==================== [ Typography Start ] ==================== */
figure {
	margin: 0;
}

strong,
b {
	font-family: var(--JostSemiBold);
}

a,
input,
button,
textarea {
	outline: none !important;
}

a {
	color: var(--white);
	word-break: break-word;
	transition: all 0.3s ease-in-out;
	text-decoration: none;
}

a:hover {
	color: var(--primary);
}

p {
	color: var(--white);
	font-family: var(--JostLight);
	font-size: 20px;
	font-style: normal;
	line-height: 130%;
	margin-bottom: 20px;
}

ol,
ul {
	margin-bottom: 20px;
	padding-left: 20px;
}

ol ol,
ol ul,
ul ol,
ul {
	margin-top: 10px;
	margin-bottom: 10px;
}

ol li,
ul li {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

ol li::marker,
ul li::marker {
	color: var(--white);
}

ul li:has(> ul),
ul li:has(> ol) {
	list-style-type: none;
}

blockquote {
	padding: 16px 16px 16px 24px;
	border-left: 5px solid var(--primary);
	margin-bottom: 20px;
	background-color: var(--white-10);
	backdrop-filter: var(--blur-10);
	font-size: 20px;
	line-height: 150%;
	color: var(--white);
}

pre {
	background-color: var(--white-10);
	backdrop-filter: var(--blur-10);
	padding: 20px;
	overflow: auto;
	font-family: inherit;
	border-radius: 20px;
	position: relative;
	color: var(--white);
}

pre code {
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	font-size: inherit;
}

th,
td {
	border: 1px solid var(--white-20);
	padding: 8px 12px;
	text-align: left;
}

th {
	background-color: var(--white-10);
	font-family: var(--JostSemiBold);
	font-size: inherit;
	color: var(--white);
}

td {
	background-color: var(--white-10);
	font-family: var(--JostRegular);
	font-size: inherit;
	color: var(--white);
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
	font-family: var(--JostRegular);
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h1 {
	color: var(--white);
	font-family: var(--tt-rg);
	font-size: 80px;
	font-style: normal;
	font-weight: normal;
	line-height: 115%;
	text-transform: uppercase;
	margin-bottom: 20px;
}

h2 {
	color: var(--white);
	font-family: var(--tt-rg);
	font-size: 60px;
	font-style: normal;
	font-weight: normal;
	line-height: 115%;
	text-transform: uppercase;
	margin-bottom: 20px;
}

h3 {
	color: var(--white);
	font-family: var(--tt-rg);
	font-size: 50px;
	font-style: normal;
	font-weight: normal;
	line-height: 115%;
	text-transform: uppercase;
	margin-bottom: 20px;
}

h4 {
	color: var(--white);
	font-family: var(--tt-rg);
	font-size: 40px;
	font-style: normal;
	font-weight: normal;
	line-height: 115%;
	text-transform: uppercase;
	margin-bottom: 20px;
}

h5 {
	color: var(--white);
	font-family: var(--tt-rg);
	font-size: 30px;
	font-style: normal;
	font-weight: normal;
	line-height: 115%;
	text-transform: uppercase;
	margin-bottom: 20px;
}

h6 {
	color: var(--white);
	font-family: var(--tt-rg);
	font-size: 20px;
	font-style: normal;
	font-weight: normal;
	line-height: 115%;
	text-transform: uppercase;
	margin-bottom: 20px;
}

hr {
	margin-block: 20px;
	opacity: 1;
	color: var(--white-20);
}

/* ==================== [ Typography End ] ==================== */

/* ==================== [ Common Start ] ==================== */
.container-fluid,
.container {
	padding-inline: 20px;
	margin: 0 auto;
}

.row {
	margin-inline: -12px;
	row-gap: 24px;
}

.row>* {
	padding-inline: 12px;
}

.img-cover * {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==================== [ Common End ] ==================== */

/* ==================== [ Common Heading Start ] ==================== */
.heading .title * {
	color: var(--white);
	font-family: var(--tt-rg);
	font-size: 60px;
	font-style: normal;
	font-weight: normal;
	line-height: 115%;
}

.heading .title a {
	color: var(--white);
}

.heading .title a:hover {
	color: var(--primary);
}

.heading .disc * {
	color: var(--white);
	font-family: var(--JostLight);
	font-size: 20px;
	font-style: normal;
	line-height: 150%;
}

.heading .subtitle * {
	color: var(--white);
	font-family: var(--JostRegular);
	font-size: 30px;
	font-style: normal;
	line-height: 130%;
}

/* ==================== [ Common Heading End ] ==================== */

/* ==================== [ Button Start ] ==================== */
.btn {
	position: relative;
	width: fit-content;
	padding: 10px 12px;
	text-align: center;
	font-family: var(--JostSemiBold);
	font-size: 20px;
	font-style: normal;
	line-height: 150%;
	border-radius: 5px;
	border: 0px;
	outline: 1px solid !important;
	outline-offset: -1px !important;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.btn::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--button-shade);
	transition: all 0.3s ease-in-out;
	opacity: 0.6;
}

.btn::after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--button-shade);
	transition: all 0.3s ease-in-out;
	opacity: 0.6;
}

.btn:hover::before,
.btn:hover::after {
	background: var(--transparent);
}

.btn-primary {
	color: var(--white);
	background: var(--transparent);
	outline-color: var(--border) !important;
}

.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-within,
.btn-primary:focus-visible {
	color: var(--body) !important;
	background: var(--transparent) !important;
	outline-color: var(--transparent) !important;
	box-shadow: none !important;
}

.btn .circle {
	width: 0px;
	aspect-ratio: 1;
	background: var(--button-grad) !important;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	transition: all 0.3s ease-in-out;
}

.btn:hover .circle,
.btn:focus .circle,
.btn:active .circle,
.btn:focus-visible .circle,
.btn:focus-within .circle {
	width: 120%;
	/* border-radius: 0%; */
}

/* ==================== [ Button End ] ==================== */

/* ==================== [ Error 404 Start ] ==================== */
.error-404 {
	margin-top: 102px;
	padding: 150px 0;
}

.error-404 .heading {
	text-align: center;
}

.error-404 .action * {
	width: fit-content;
	margin: 0 auto;
}

/* ==================== [ Error 404 End ] ==================== */

/* ==================== [ Extra Common Start ] ==================== */
.card {
	border: 1px solid var(--white-20);
	border-radius: 20px;
	padding: 20px;
	background-color: var(--white-10);
	backdrop-filter: var(--blur-10);
}

.card .card-icon {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 10px;
	background-color: var(--white-05);
	border: 1px solid var(--white-10);
	padding: 5px;
	margin-bottom: 10px;
}

.card .card-icon .icon-inner {
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: var(--white-05);
	border: 1px solid var(--white-15);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card .card-icon .icon-inner::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(223deg, rgba(72, 72, 72, 0.00) -8.25%, var(--white) 133.67%);
	opacity: 0.6;
}

.card .card-title {
	margin-bottom: 0;
}

.card .card-title * {
	color: var(--white);
	font-size: 20px;
	font-family: var(--JostMedium);
	line-height: 130%;
}

.card .card-disc * {
	margin-bottom: 0;
	font-family: var(--JostLight);
	line-height: 150%;
}

.section-spacing-150 {
	padding: 150px 0;
}

.section-spacing-150-75 {
	padding: 150px 0 75px;
}

.section-spacing-75-150 {
	padding: 75px 0 150px;
}

.slider-btn-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
}

.slider-btn-prev,
.slider-btn-next {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--white-20);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
}

.slider-btn-prev:hover,
.slider-btn-next:hover {
	background-color: var(--white-10);
	border-color: var(--white-10);
}

/* ==================== [ Extra Common End ] ==================== */


/* ==================== [ Header Start ] ==================== */
.header .moon {
	position: absolute;
	top: 0;
	/* 45px, viewport: 428px -> 0px, viewport: 1920px */
	right: clamp(-15px, -19.30px + 1.01vw, 0px);
	/* -15px, viewport: 428px -> 0px, viewport: 1920px */
	max-width: clamp(182px, 138.68px + 10.12vw, 333px);
	/* 182px, viewport: 428px -> 333px, viewport: 1920px */
	z-index: 2;
}

.header {
	border-bottom: 1px solid var(--white-15);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

.header .navbar {
	position: relative;
	padding-block: 0;
}

.header .navbar-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.header .navbar-collapse {
	flex-shrink: 0;
}

.header .navbar-brand {
	padding: 0;
	max-width: 222px;
}

.header .navbar-brand * {
	width: 100%;
	height: auto;
}

.header .navbar-nav {
	position: relative;
	margin-top: 0;
	margin-right: 100px;
}

/* .header .navbar-nav::after {
	position: absolute;
	content: "";
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: var(--white-20);
	transition: all 0.3s ease-in-out;
} */

.header .nav-item {
	margin-inline: 18px;
}

.header .nav-item:last-child {
	margin-right: 30px;
}

.header .navbar-expand-lg .navbar-nav .nav-link {
	color: var(--white);
	font-family: var(--JostRegular);
	line-height: 130%;
	padding: 38px 0;
	position: relative;
}

.header .navbar-expand-lg .navbar-nav .nav-link:hover,
.header .navbar-expand-lg .navbar-nav .nav-link:active,
.header .navbar-expand-lg .navbar-nav .nav-link:focus,
.header .navbar-expand-lg .navbar-nav .nav-link:focus-visible,
.header .navbar-expand-lg .navbar-nav .nav-link:focus-within,
.header .navbar-expand-lg .navbar-nav .nav-link.active {
	color: var(--white);
}

.header .nav-link::before {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: var(--white);
	transition: all 0.3s ease-in-out;
}

.header .nav-link.active::before,
.header .nav-link:hover::before,
.header .nav-link:focus::before {
	width: 100%;
}


.navbar-toggler {
	width: 27px;
	height: 22px;
	padding: 0;
	box-shadow: none !important;
	border: none;
}

.navbar-toggler .hamburger {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	flex-direction: column;
	justify-content: space-between;
}

.navbar-toggler .hamburger-toggle {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.navbar-toggler .hamburger span {
	width: 100%;
	height: 3px;
	background-color: var(--primary);
	position: relative;
	transition: 0.4s;
	border-radius: 5px;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
}

.navbar-toggler .hamburger span:first-child {
	width: calc(100% - 5px);
	top: 10px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

.navbar-toggler .hamburger span:nth-child(2) {
	opacity: 0;
}

.navbar-toggler .hamburger span:last-child {
	width: calc(100% - 5px);
	margin: 0;
	top: -10px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.navbar-toggler.collapsed .hamburger span {
	opacity: 1 !important;
	top: auto !important;
	transform: none !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-o-transform: none !important;
}

.navbar-toggler:not(.collapsed) .hamburger span {
	width: 100%;
}

/* Header Scroll */
.header.move {
	background: var(--white-15);
	backdrop-filter: var(--blur-10);
}

.header.move .navbar-nav::after {
	opacity: 0;
}

/* ==================== [ Header End ] ==================== */

/* ==================== [ Home Banner Start ] ==================== */
.home-banner {
	position: relative;
	background: url("../images/thumb/home-banner.jpg") no-repeat center bottom;
	background-size: cover;
	padding-top: 102px;
	overflow-x: clip;
}

.home-banner::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 171px;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(2, 3, 5, 0.00) 10.82%, var(--body) 100%);
}

.home-banner .rocket {
	position: absolute;
	bottom: 44px;
	left: 27.3%;
	transform: rotate(-14.986deg);
	max-width: clamp(257px, 195.04px + 14.48vw, 473px);
	/* 257px, viewport: 428px -> 473px, viewport: 1920px */
	margin-bottom: 40px;
	margin-left: 80px;
}

.home-banner .rocket.active {
	animation: bannerRocketMove 1.8s ease-in-out forwards;
}

@keyframes bannerRocketMove {
	from {
		margin-bottom: 40px;
		margin-left: 80px;
	}

	to {
		margin-bottom: 0px;
		margin-left: 0px;
	}
}

.home-banner .rocket * {
	width: 100%;
	height: auto;
}

.home-banner .moon {
	position: absolute;
	top: clamp(0px, 57.91px + -3.02vw, 45px);
	/* 45px, viewport: 428px -> 0px, viewport: 1920px */
	right: clamp(-15px, -19.30px + 1.01vw, 0px);
	/* -15px, viewport: 428px -> 0px, viewport: 1920px */
	max-width: clamp(182px, 138.68px + 10.12vw, 333px);
	/* 182px, viewport: 428px -> 333px, viewport: 1920px */
	scale: 0.9;
	rotate: -20deg;
}

.home-banner .moon.active {
	animation: bannerMoonMove 1.8s ease-in-out forwards;
}

@keyframes bannerMoonMove {
	from {
		scale: 0.9;
		rotate: -20deg;
	}

	to {
		rotate: 0deg;
		scale: 1;
	}
}

.home-banner .moon * {
	width: 100%;
	height: auto;
}

.home-banner .banner-content {
	position: relative;
	z-index: 5;
	padding: 147px 0 65px;
	width: calc(100% - 100px);
	padding-right: 30px;
	margin-right: 100px;
}

/* .home-banner .banner-content::before {
	position: absolute;
	content: "";
	width: 1px;
	height: 100%;
	top: 0;
	right: 0;
	background: linear-gradient(180deg, var(--white-20) 0%, rgba(255, 255, 255, 0.00) 100%);
} */

.home-banner .banner-content .heading {
	max-width: 920px;
	margin-bottom: 175px;
}

.home-banner .banner-content .action {
	text-align: end;
}

.home-banner .banner-content .action .title * {
	font-family: var(--JostRegular);
}

/* ==================== [ Home Banner End ] ==================== */

/* ==================== [ Space Armour Start ] ==================== */
.saturn-container {
	position: relative;
	overflow: visible;
	overflow-x: clip !important;
}

.saturn-container .saturn-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: luminosity;
	z-index: -1;
	opacity: 0.1;
}

.saturn-container .saturn-bg * {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==================== [ Space Armour Start ] ==================== */


/* ==================== [ Space Armour Start ] ==================== */
.space-armour {
	position: relative;
	padding: 150px 0;
	overflow-x: clip;
	overflow: visible;
}

.space-armour .moon {
	position: absolute;
	top: -120px;
	right: 0;
	z-index: -1;
	width: clamp(280px, 257.05px + 5.36vw, 360px);
	height: auto;
	z-index: 2;
}

.space-armour .moon * {
	width: 100%;
	height: auto;
}

.space-armour .space-container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	margin-left: -45px;
	max-width: calc(100% - 75px);
}

.space-armour .space-container .image {
	width: 680px;
	height: 450px;
	border-radius: 20px;
	overflow: hidden;
	flex-shrink: 0;
}

.space-armour .space-container .heading {
	text-align: end;
}

.space-armour .space-container .title * {
	margin-bottom: 80px;
}

.space-armour .space-container .disc * {
	max-width: 725px;
	padding-left: 28px;
	margin-left: auto;
}

/* ==================== [ Space Armour End ] ==================== */

/* ==================== [ The Three Pillars Start ] ==================== */
.three-pillars {
	position: relative;
	overflow-x: clip;
	padding-bottom: 528px;
}

.three-pillars::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(180deg, rgba(2, 3, 5, 0.00) 10.82%, var(--body) 100%);
}

.three-pillars .moon {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: clamp(220px, 179.84px + 9.38vw, 360px);
	/* 220px, viewport: 428px -> 360px, viewport: 1920px */
	height: auto;
	transform: rotate(180deg);
}

.three-pillars .moon * {
	width: 100%;
	height: auto;
}

.three-pillars .heading .title>* {
	margin-bottom: 30px;
}

.three-pillars .pillars-container {
	position: relative;
	overflow: visible;
}

.three-pillars .pillars-container .ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.three-pillars .pillars-container .rocket {
	position: absolute;
	top: 50%;
	left: 47%;
	transform: translate(-50%, -50%);
	/* transform: translate(-50%, -50%); */
	width: clamp(256px, 158.75px + 22.72vw, 595px);
	scale: 0.9;
	rotate: 20deg;
}

.three-pillars .pillars-container .rocket.active {
	animation: threeRocketMove 1.8s ease-in-out forwards;
}

@keyframes threeRocketMove {
	from {
		scale: 0.9;
		rotate: 20deg;
	}

	to {
		rotate: 0deg;
		scale: 1;
	}
}

.three-pillars .card-container {
	position: relative;
}

.three-pillars .card {
	position: relative;
	max-width: 330px;
	width: 100%;
	z-index: 2px;
	display: flex;
	flex-direction: column;
}

.three-pillars .card .card-disc {
	margin-top: auto;
}

.three-pillars .card:first-child {
	left: 63.75%;
	margin-bottom: 65px;
}

.three-pillars .card:nth-child(2) {
	left: 0;
}

.three-pillars .card:last-child {
	left: calc(100% - 330px);
	right: 0;
	margin-top: -45px;
}

/* .three-pillars .card .card-title * {
	margin-bottom: 45px;
} */

/* ==================== [ The Three Pillars End ] ==================== */

/* ==================== [ The Technology Start ] ==================== */
.technology {
	position: relative;
	padding-inline: 20px;
	margin-top: -377px;
	overflow-x: clip;
}

.technology .technology-container {
	max-width: 1720px;
	margin: 0 auto;
	background-color: var(--dark);
	border-radius: 50px;
	padding-block: 70px;
}

.technology .heading {
	text-align: center;
}

.technology .heading .title>* {
	margin-bottom: 50px;
}

.technology .technology-inner-container {
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.technology .contnent {
	max-width: 555px;
}

.technology .contnent .title * {
	font-size: 30px;
	font-family: var(--JostRegular);
	line-height: 115%;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	margin-bottom: 30px;
}

.technology .contnent .disc * {
	font-family: var(--JostRegular);
}

.technology .contnent .disc *:last-child {
	margin-bottom: 0;
}

.technology .technology-table {
	max-width: 784px;
	width: 100%;
}

.technology .technology-table * {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ==================== [ The Technology End ] ==================== */

/* ==================== [ Enterprise Grade Start ] ==================== */
.enterprise-grade {
	position: relative;
	overflow-x: clip;
}

.enterprise-grade .moon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	scale: 0.9;
}

.enterprise-grade .moon.active {
	animation: enterpriseMoonMove 1.8s ease-in-out forwards;
	transform-origin: top center;
}

@keyframes enterpriseMoonMove {
	from {
		scale: 0.9;
	}

	to {
		scale: 1;
	}
}


.enterprise-grade .moon>*:first-child {
	mix-blend-mode: luminosity;
	opacity: 0.2;
	object-fit: contain;
	width: 100%;
}

.enterprise-grade .moon>*:last-child {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* height: 100%; */
}

.enterprise-grade .rocket {
	position: absolute;
	left: 72.34%;
	top: -10px;
	width: clamp(104px, 38.88px + 15.21vw, 331px);
	height: auto;
	/* margin-top: -10px;
	margin-left: 20px; */
}

/* 
.enterprise-grade .rocket.active {
	animation: enterpriseRocketMove 0.3s ease-in-out forwards;
}

@keyframes enterpriseRocketMove {
	from {
		margin-top: -10px;
		margin-left: 20px;
	}

	to {
		margin-top: 0px;
		margin-left: 0px;
	}
} */


.enterprise-grade .rocket * {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.enterprise-grade .enterprise-container {
	padding-top: 144px;
	position: relative;
	z-index: 2;
}

.enterprise-grade .heading {
	max-width: 994px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.enterprise-grade .heading .title *,
.enterprise-grade .heading .disc * {
	margin-bottom: 30px;
}

.enterprise-grade .card {
	max-width: 330px;
	width: 100%;
}

.enterprise-grade .card .card-title * {
	margin-bottom: 0;
}

.enterprise-grade .card-container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto 30px;
}

.enterprise-grade .card-container:first-child {
	max-width: 100%;
	margin-top: -22px;
}

.enterprise-grade .card-container:nth-child(2) {
	max-width: 73%;
}

.enterprise-grade .card-container:last-child {
	max-width: 100%;
	justify-content: center;
	margin-bottom: 0;
}

.enterprise-grade .enterprise-slider {
	margin-top: 30px;
}

.enterprise-grade .enterprise-tools {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
}

.enterprise-grade .enterprise-prev,
.enterprise-grade .enterprise-next {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--white-20);
	border-radius: 50%;
}

.enterprise-slider .swiper-wrapper {
	display: flex;
}

.enterprise-slider .swiper-slide {
	height: auto;
}

.enterprise-slider .swiper-slide .card {
	height: 100%;
}

/* ==================== [ Enterprise Grade End ] ==================== */

/* ==================== [ Powered by Start ] ==================== */
.powered-by {
	position: relative;
	padding-top: 150px;
	padding-inline: 20px;
}

.powered-by .powered-container {
	position: relative;
	max-width: 1720px;
	margin: 0 auto;
	background-color: var(--dark);
	border-radius: 50px;
	padding-block: 70px;
}

.powered-by .powered-container {
	position: relative;
	max-width: 1720px;
	margin: 0 auto;
	background-color: var(--dark);
	border-radius: 50px;
	padding-block: 70px;
}

.powered-by .powered-container .moon {
	position: absolute;
	right: 0;
	top: 90px;
	max-width: clamp(115px, 67.67px + 11.06vw, 280px);
	width: 100%;
	height: auto;
	transform: rotate(180deg);
	margin-bottom: 40px;
	margin-left: 80px;
	scale: 0.9;
	rotate: -20deg;
}

.powered-by .powered-container .moon.active {
	animation: bannerMoonMove 1.8s ease-in-out forwards;
}

@keyframes bannerMoonMove {
	from {
		scale: 0.9;
		rotate: -20deg;
	}

	to {
		rotate: 0deg;
		scale: 1;
	}
}

.powered-by .powered-container .moon * {
	width: 100%;
	height: auto;
}

.powered-by .heading .title>* {
	margin-bottom: 26px;
}

.powered-by .heading .title br {
	display: none;
}

.powered-by .content {
	display: flex;
	align-items: center;
	gap: 22px;
}

.powered-by .content .image-container {
	flex-shrink: 0;
	max-width: 264px;
	width: 100%;
	padding: 30px 0;
	border-block: 1px solid var(--white-15);
}

.powered-by .content .image-container .image-card {
	position: relative;
	padding: 16px;
	width: 100%;
	height: 259px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--muted);
}

.powered-by .content .image-container .image-card * {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.powered-by .content .disc * {
	font-size: 30px;
	line-height: 150%;
	margin-bottom: 0;
	max-width: 1184px;
}

/* ==================== [ Powered by End ] ==================== */

/* ==================== [ The Edge of Space Start ] ==================== */
.edge-space {
	position: relative;
	padding-block: 150px 90px;
	overflow-x: clip;
	overflow: hidden;
	margin-bottom: 50px;
}

.edge-space .space-image {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

.edge-space .space-image * {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

.edge-space .space-rocket {
	position: absolute;
	bottom: 11.93%;
	left: 50%;
	transform: translateX(-50%);
	max-width: clamp(428px, 362.60px + 15.28vw, 656px);
	width: 100%;
	margin-bottom: 80px;
	margin-left: 40px;
}

.edge-space .space-rocket.active {
	animation: edgeRocketMove 1.8s ease-in-out forwards;
}

@keyframes edgeRocketMove {
	from {
		margin-bottom: 80px;
		margin-left: 40px;
	}

	to {
		margin-bottom: 0px;
		margin-left: 0px;
	}
}

.edge-space .space-rocket * {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.edge-space .heading {
	text-align: center;
	position: relative;
	z-index: 2;
}

.edge-space .heading .title>* {
	margin-bottom: 30px;
}

.edge-space .heading .disc {
	max-width: 786px;
	margin: 0 auto;
}

.edge-space .heading .disc>* {
	margin-bottom: 56px;
}


.edge-space .card {
	max-width: 470px;
	width: 100%;
}

.edge-space .card-container {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	margin: 0 auto 90px;
	gap: 20px;
}

.edge-space .card-container:first-child {
	max-width: 100%;
}

.edge-space .card-container:last-child {
	max-width: 89.47%;
	margin-bottom: 0;
}

.edge-space .enterprise-slider {
	margin-top: 30px;
}

.edge-space .enterprise-tools {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
}

.edge-space .enterprise-prev,
.edge-space .enterprise-next {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--white-20);
	border-radius: 50%;
}

/* ==================== [ The Edge of Space End ] ==================== */

/* ==================== [ Select Use Cases Start ] ==================== */
.use-cases {
	position: relative;
	overflow: visible;
	overflow-x: clip !important;
	margin-bottom: 150px;
}

.use-cases .moon {
	position: absolute;
	top: clamp(-120px, -125.74px + 1.34vw, -100px);
	/* -100px to -120px (1920 to 428) */
	right: clamp(-70px, -90.08px + 4.69vw, 0px);
	/* 0 to -70px (1920 to 428) */
	width: clamp(220px, 179.84px + 9.38vw, 360px);
	/* 360px to 220px (1920 to 428) */
	height: auto;
	z-index: -1;
}

.use-cases .moon * {
	width: 100%;
	height: auto;
}


.use-cases .heading {
	text-align: center;
}

.use-cases .card-container {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.use-cases .card-container>*:nth-child(1) {
	width: calc(67% - 12px);
}

.use-cases .card-container>*:nth-child(2) {
	width: calc(33% - 12px);
}

.use-cases .card-container>*:nth-child(3),
.use-cases .card-container>*:nth-child(4),
.use-cases .card-container>*:nth-child(5) {
	width: calc(33.33% - 16px);
}

.use-cases .card .card-icon {
	margin-bottom: 70px;
}

.use-cases .card .card-title {
	margin-top: auto;
}

.use-cases .card .card-title * {
	margin-bottom: 0;
}

.use-cases .heading .title * {
	margin-bottom: 50px;
	text-wrap: balance;
}

/* ==================== [ Select Use Cases End ] ==================== */

/* ==================== [ The Briefing Center Start ] ==================== */
.briefing-center {
	position: relative;
	overflow: visible;
	overflow-x: clip;
	width: 100%;
}

.briefing-center .briefing-inner {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	overflow: visible;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

.briefing-center .briefing-inner::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #020305 0%, rgba(2, 3, 5, 0.00) 25.54%, #020305 100%);
	z-index: 1;
}

.briefing-center .briefing-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.briefing-center .briefing-bg * {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.briefing-center .briefing-rocket {
	position: absolute;
	top: 50%;
	/* transform: translateY(calc(-50% + 30px)); */
	transform: translateY(calc(-50% + 27px));
	/* top: clamp(-16px, -3.59px + -0.65vw, -10px); */
	/* -10px, viewport: 992px -> -16px, viewport: 1920px */
	left: clamp(-102px, -0.62px + -5.28vw, -53px);
	/* -53px, viewport: 992px -> -102px, viewport: 1920px */
	width: 83.6%;
	max-width: 1615px;
	aspect-ratio: 1615 / 1019;
	height: auto;
	z-index: 1;
}


.briefing-center .briefing-rocket * {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.briefing-center .briefing-container {
	max-width: 550px;
	padding: 30px;
	margin-left: auto;
}

.briefing-center .briefing-main {
	position: relative;
	z-index: 1;
	padding: 190px 0 180px;
}

.briefing-center .heading .title * {
	margin-bottom: 70px;
	text-align: end;
}

.briefing-center .card {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 0;
}

.briefing-center .card .card-content {
	padding: 20px;
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
}

.briefing-center .card .card-content:nth-child(1) {
	padding-top: 0;
	padding-left: 0;
	border-right: 1px solid var(--white-10);
	border-bottom: 1px solid var(--white-10);
}

.briefing-center .card .card-content:nth-child(2) {
	padding-top: 0;
	padding-right: 0;
	border-bottom: 1px solid var(--white-10);
	align-items: flex-end;
	text-align: end;
}

.briefing-center .card .card-content:nth-child(3) {
	padding-bottom: 0;
	padding-left: 0;
	border-right: 1px solid var(--white-10);
}

.briefing-center .card .card-content:nth-child(4) {
	padding-bottom: 0;
	padding-right: 0;
	align-items: flex-end;
	text-align: end;
}

.briefing-center .card .card-icon {
	margin-bottom: 70px;
	transition: all 0.3s ease-in-out;
}

.briefing-center .card .card-icon:hover {
	opacity: 0.8;
}

.briefing-center .card .card-title {
	margin-top: auto;
}

.briefing-center .card .card-title * {
	margin-bottom: 0;
	transition: all 0.3s ease-in-out;
}

.briefing-center .card .card-title *:hover {
	color: var(--primary);
}

/* ==================== [ The Briefing Center End ] ==================== */


/* ==================== [ Working Together Start ] ==================== */
.working-together {
	overflow-x: clip;
}

.working-together .slider-btn-container {
	margin-top: 5px;
}

.working-together .heading .title * {
	margin-bottom: 50px;
}

.working-together .swiper {
	width: 100%;
	height: 100%;
	overflow: visible;
	padding-top: 50px;
}

.working-together .swiper-slide {
	max-width: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: margin-top .8s ease;
	-webkit-transition: margin-top .4s ease;
	-moz-transition: margin-top .4s ease;
	-ms-transition: margin-top .4s ease;
	-o-transition: margin-top .4s ease;
}

.working-together .swiper-slide .card {
	width: 100%;
	width: 100%;
}

.working-together .card {
	padding: 52px 20px;
}

.working-together .card .partner-logo {
	height: 100%;
	width: 100%;
}

.working-together .card .partner-logo * {
	height: 94px;
	width: 100%;
	object-fit: contain;
	object-position: center;
}

.working-together .card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	opacity: .69;
	transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
}

.working-together .swiper-slide-active {
	margin-top: -50px;
}

.working-together .swiper-slide-active .card img {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	opacity: 1;
}

/* ==================== [ Working Together End ] ==================== */

/* ==================== [ Footer Start ] ==================== */
.footer {
	padding-inline: 50px;
}

.footer .container {
	padding-inline: 100px;
}

.footer .w-1720 {
	max-width: 1720px;
	width: 100%;
	margin-inline: auto;
	background: var(--white-10);
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

.footer .w-1354 {
	max-width: 1354px;
	width: 100%;
	margin-inline: auto;
}

.footer .f-top {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.footer .f-location-block {
	display: flex;
	align-items: center;
}

.footer .f-location-inner>* {
	border-bottom: 1px solid var(--white-20);
	padding-block: 30px;
	padding-inline: 10px;
}

.footer .f-location-inner>*:last-child {
	border-bottom: unset;
}

.footer .f-bottom {
	padding: 30px 20px;
	text-align: center;
	border-top: 1px solid var(--white-20);
}

.footer .f-bottom * {
	color: var(--white-60);
	font-size: 20px;
	line-height: 150%;
	font-family: var(--JostRegular);
	margin-bottom: 0;
	text-wrap: balance;
}

.footer .f-info-block {
	max-width: 585px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 76px 0;
}

.footer .f-info-block .f-logo * {
	display: block;
	max-width: 222px;
	width: 100%;
}

.footer .f-info-block .f-text * {
	color: var(--white-60);
	font-size: 20px;
	line-height: 130%;
	font-family: var(--JostMedium);
	margin-bottom: 0;
}

.footer .f-info-block .social-links ul {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.footer .f-info-block .social-links ul li img:hover {
	filter: brightness(0) invert(1);
	-webkit-filter: brightness(0) invert(1);
}



.footer .f-link-block {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 50px 0;
}

.footer .f-link-block ul {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-left: 16px;
	margin: 0;
}

.footer .f-link-block ul li * {
	font-size: 20px;
	line-height: 150%;
	font-family: var(--JostRegular);
	color: var(--white-60);
}

.footer .f-link-block ul li *:hover {
	color: var(--primary);
}

.footer .f-link-block ul li::marker {
	color: var(--white-60);
}


.footer .f-location-block {
	max-width: 323px;
	width: 100%;
	border-left: 1px solid var(--white-20);
	border-right: 1px solid var(--white-20);
	display: flex;
	height: auto;
	flex-shrink: 0;
}

.footer .f-location-block .details-block {
	text-align: center;
}

.footer .f-location-block .title * {
	color: var(--gray);
	line-height: 150%;
	margin-bottom: 10px;
}

.footer .f-location-block .detail * {
	font-size: 20px;
	font-family: var(--JostMedium);
	line-height: 130%;
	margin-bottom: 0;
}

/* ==================== [ Footer End ] ==================== */