@font-face {
	font-family: "Geist Black";
	src: url("Geist-Black.woff2") format("woff2");
}
@font-face {
	font-family: "Geist Medium";
	src: url("Geist-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Geist Regular";
	src: url("Geist-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Geist SemiBold";
	src: url("Geist-SemiBold.woff2") format("woff2");
}
@font-face {
	font-family: "Geist UltraBlack";
	src: url("Geist-UltraBlack.woff2") format("woff2");
}

*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
* {
	font-family: "Geist Regular";
	color: #c3c9ca;
	box-sizing: border-box;
}

.medium {
	font-family: "Geist Medium";
}

h1,
h2,
h3 {
	font-family: "Geist Black";
	color: #fff;
	line-height: 1;
}

h1 {
	font-size: 4.5rem;
}
/* h1 {
	font-size: 5rem;
} */

h2 {
	font-size: 3rem;
}

h4 {
	font-family: "Geist SemiBold";
	text-align: center;
	color: #fff;
	line-height: 4rem;
	font-size: 2.5rem;
	margin: 1rem 0;
}

html {
	scroll-behavior: smooth;
	background-color: #010101;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb {
	background: #010101;
}
::-webkit-scrollbar-track {
	background: #333;
}

.btn {
	outline: none;
	position: relative;
	display: inline-block;
	background-image: linear-gradient(
		97.14deg,
		#000a2c -1.83%,
		#00234b 24.24%,
		#003a69 50.31%,
		#005283 76.38%,
		#006c96 102.45%,
		#0086a2 128.51%,
		#00a1a4 154.58%,
		#00bb9d 180.65%,
		#00d48f 206.72%,
		#00ec7a 232.79%
	);
	border-radius: 20rem;
	border: none;
	font-family: "Geist Medium";
	cursor: pointer;
	font-size: 1.25rem;
	font-weight: 500;
	outline: none;
	padding: 1.56rem 2.87rem;
	text-align: center;
	text-transform: uppercase;
	/* transition: background 0.3s ease-in-out; */
	transition: 0.7s;
}

.btn:after {
	content: "";
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: inherit;
	transition: opacity 0.7s;
	background-image: linear-gradient(
		95.43deg,
		#000a2c -1.42%,
		#00234b 9.85%,
		#003a69 21.11%,
		#005283 32.38%,
		#006c96 43.65%,
		#0086a2 54.92%,
		#00a1a4 66.19%,
		#00bb9d 77.46%,
		#00d48f 88.73%,
		#00ec7a 100%
	);
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.btn:hover:after {
	opacity: 1;
	background-size: 120%;
	animation: gradient 3s ease infinite;
}
.btn > span {
	color: #fff;
	position: relative;
	z-index: 2;
}

.content {
	width: 100%;
	position: relative;
	margin: 0 auto;
	max-width: 1440px;
	padding: 0 120px;
}

/* HEADER */
.navigation {
	height: 6rem;
	position: absolute;
	z-index: 10;
	width: 100%;
}
.nav-brand {
	font-family: "Geist UltraBlack";
	padding-left: 20px;
	width: calc(100% / 3);
	line-height: 6rem;
	text-transform: uppercase;
	font-size: 1.4em;
}
.nav-brand a,
.nav-brand a:visited {
	font-family: "Geist Black";
	color: #ffffff;
	text-decoration: none;
}
.nav-container {
	display: flex;
	justify-content: flex-start;
	max-width: 1200px;
	margin: 0 auto;
}
nav {
	width: calc(100% / 3 * 2);
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul li {
	float: left;
	position: relative;
}

nav ul li a,
nav ul li a:visited {
	display: block;
	padding: 0 20px;
	line-height: 6rem;
	color: #fff;
	background: transparent;
	text-decoration: none;
}
nav ul li a.btn-sm,
nav ul li .select-dropdown {
	margin: 1.5rem 0;
	font-size: 1rem;
}
nav .btn-group {
	display: flex;
	gap: 1rem;
}
nav .select-dropdown__button {
	padding: 1rem;
}
nav .chevron-down::before {
	top: 1rem;
}
nav .select-dropdown__list-item {
	float: none;
}
nav ul li a.btn-sm {
	padding: 0.95rem 1rem;
	line-height: 1;
	text-transform: none;
}

nav ul li a {
	color: #fff;
}
nav ul li a:hover,
nav ul li a:visited:hover {
	opacity: 0.9;
}

nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
	padding-left: 4px;
	content: " \025BE";
}

/* Mobile navigation */
.nav-mobile {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	background: transparent;
	height: 55px;
	width: 70px;
}

#navbar-toggle {
	position: absolute;
	right: 2rem;
	top: 2.2rem;
	cursor: pointer;
	padding: 10px 15px 6px 0px;
}

#navbar-toggle span:before,
#navbar-toggle span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 1px;
	width: 15px;
	background: #ffffff;
	position: absolute;
	display: block;
	content: "";
	transition: all 300ms ease-in-out;
}

#navbar-toggle span:after {
	bottom: 0;
}
#navbar-toggle.active span {
	background-color: transparent;
}
#navbar-toggle.active span:before,
#navbar-toggle.active span:after {
	top: 10px;
}
#navbar-toggle.active span:before {
	transform: rotate(-45deg);
}
#navbar-toggle.active span:after {
	transform: rotate(45deg);
}

/* MAIN SECTION */

.home {
	min-height: 100svh;
	position: relative;
	overflow: hidden;
}

.home .content {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	position: relative;
	z-index: 1;
}
.home__bg {
	position: absolute;
	min-height: 100svh;
	width: 100%;
	object-fit: cover;
	background-position-y: top;
	left: 0;
	top: 0;
}
.home__title {
	margin: 11rem auto 0 auto;
	text-align: center;
	font-weight: 800;
	background: -webkit-linear-gradient(270deg, #91edfb 0%, #ffffff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* .home__title {
	margin: 13rem auto 0 auto;
	text-align: center;
	font-weight: 800;
	background: -webkit-linear-gradient(270deg, #91edfb 0%, #ffffff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
} */

.home__btn {
	text-align: center;
}
.home__btn .btn {
	padding: 1.326rem 2.43rem;
}

.home__crystall {
	width: calc(100vw / 3);
	margin: 0 auto 6rem auto;
}
/* .home__crystall {
	width: calc(100vw / 3.5);
	margin: 0 auto 6rem auto;
} */

.home__crystall--mobile {
	display: none;
}

/* Audience */
.audience .content {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding-top: 4.5rem;
}

.titles-container {
	width: 100%;
	height: 600px;
	overflow-y: auto;
	display: flex;
}
.titles-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	scroll-behavior: smooth;
}

.titles-list div {
	font-family: "Geist SemiBold";
	height: 200px;
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	opacity: 0.3;
	cursor: pointer;
}
.titles-list div.highlight {
	color: #fff;
	opacity: 1;
}

.audience-slider {
	display: flex;
	gap: 7.3rem;
	margin: 0 auto;
	flex-direction: row-reverse;
}

.audience-slider.reorder {
	flex-direction: row;
}
.audience-slider ::-webkit-scrollbar {
	display: none;
}
.image-container {
	display: flex;
	align-items: center;
	width: 50%;
}
.image-container img {
	width: 100%;
}
.direction-label {
	font-family: "Geist Medium";
	color: #fff;
	text-transform: uppercase;
	padding: 1rem;
	border-radius: 50px;
	margin-bottom: 2rem;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #011033 70.2%);
}

.section-wrapper {
	display: block;
	background-image: url(../img/bg-2.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	background-position: bottom;
	/* overflow: hidden; */
}

.audience-mobile {
	display: none;
	position: relative;
}

.audience-mobile .directions {
	display: flex;
	justify-content: space-between;
	background-color: #002826cf;
	border-radius: 50px;
	padding: 2px;
	position: sticky;
	top: 0;
	z-index: 20;
	margin-bottom: 20px;
}

.audience-mobile .d-label {
	width: 50%;
	font-family: "Geist Medium";
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem;
	text-align: center;
	border-radius: 50px;
	margin: 0;
}
.audience-mobile .d-label.active {
	background: linear-gradient(
		97.14deg,
		#000a2c -1.83%,
		#00234b 24.24%,
		#003a69 50.31%,
		#005283 76.38%,
		#006c96 102.45%,
		#0086a2 128.51%,
		#00a1a4 154.58%,
		#00bb9d 180.65%,
		#00d48f 206.72%,
		#00ec7a 232.79%
	);
}
.audience-items {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.audience-item {
	position: relative;
}
.audience-item__img {
	width: 100%;
}

.audience-item__title {
	position: absolute;
	color: #fff;
	font-size: 1.375rem;
	padding: 1rem;
	text-transform: none;
}

/* about */
.about {
	padding-top: 4.5rem;
	position: relative;
}
.about .content {
	padding: 0 180px;
}
.about h2 {
	padding-bottom: 1.5rem;
}

.about__video,
.about__video--mobile {
	object-fit: cover;
	position: absolute;
	background-position: top;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	max-height: 1800px;
	overflow: hidden;
}

.about__video--mobile {
	display: none;
}
.about-slider {
	position: relative;
	max-width: 430px;
}

.slider-nav {
	display: flex;
	gap: 0.75rem;
}

.slider-nav .nav-next {
	transform: rotate(180deg);
}
.slider-nav .nav-prev,
.slider-nav .nav-next {
	cursor: pointer;
	background: url("../img/chevron.png");
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	border: none;
	background-color: rgba(80, 88, 99, 0.16);
	backdrop-filter: blur(16px);
}

.slick-slide {
	padding: 0 0 40px;
	font-size: 1.25rem;
	line-height: 1.875rem;
}

.slick-prev:before,
.slick-next:before {
	color: black;
}

.slick-dots {
	bottom: -30px;
}

.progressBarContainer {
	position: absolute;
	bottom: 20px;
	width: 300px;
}

.progressBarContainer div {
	display: block;
	width: 30%;
	padding: 0;
	cursor: pointer;
	margin-right: 5%;
	float: left;
	color: white;
}

.progressBarContainer div:last-child {
	margin-right: 0;
}

.progressBarContainer div span.progressBar {
	width: 100%;
	height: 0.5rem;
	background-color: #50586352;
	border-radius: 50px;
	display: block;
}

.progressBarContainer div span.progressBar .inProgress {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50px;
	width: 0%;
	height: 0.5rem;
}

.affiliates {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 4.5rem;
}

.affiliates__item {
	max-width: 225px;
}

/* COLLABS */
.partners {
	position: relative;
}
.partners__title {
	text-align: center;
	padding-bottom: 3.5rem;
	padding-top: 4.5rem;
}

/* contact us */
.contact {
	padding-bottom: 0;
	padding-top: 4.5rem;
	position: relative;
}
.contact .content,
.contact-info {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.contact-info {
	flex-direction: column;
	gap: 2rem;
}
.contact__title {
	line-height: 1.2;
}

.contact__text {
	font-family: "Geist Medium";
	color: #fff;
	line-height: 1.6rem;
	font-size: 1.125rem;
}
.contact .chat-icon {
	width: 80px;
	height: 80px;
}
.contact .contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.contact .inputs-group {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.contact input {
	height: 56px;
	outline: none;
	border-radius: 0.5rem;
}
.contact input,
.contact textarea {
	padding: 1rem;
	background-color: #414e4852;
	border: 1px solid transparent;
	outline: none;
	border-radius: 0.5rem;
	transition: 0.5s;
}
.contact textarea {
	min-height: 5.5rem;
	resize: none;
}

.contact input:focus,
.contact textarea:focus {
	border: 1px solid #4de7ffcc;
}
.contact .submit-btn {
	margin-top: 1rem;
	width: 100%;
	text-decoration: none;
	text-transform: uppercase;
}

.contact .agreement {
	text-align: left;
	font-size: 0.75rem;
}
.contact .agreement-link {
	cursor: pointer;
	color: #4dffa9cc;
}

/* FOOTER */

.footer-logo {
	font-family: "Geist UltraBlack";
	line-height: 6rem;
	text-transform: uppercase;
	font-size: 1.4rem;
	color: #fff;
}

.footer .content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 0;
	padding-bottom: 3.5rem;
	position: relative;
}

.footer .footer-col {
	width: calc(100% / 3);
	gap: 1rem;
}

.footer-col.brand {
	display: flex;
	flex-direction: column;
	gap: 4.95rem;
}
.footer-col.brand p {
	font-family: "Geist Medium";
	color: #656565;
}
.footer-logo {
	max-width: 6.35rem;
}

.footer-col.meta {
	display: flex;
	flex-direction: column;
	/* IF languages switcher active */
	/* justify-content: space-between; */
	justify-content: flex-end;
	align-items: flex-end;
}

.footer-mobile {
	display: none;
}
.footer-mobile .content {
	display: flex;
}
.footer-mobile .footer-col {
	width: calc(100% / 2);
	gap: 1rem;
}
.footer-mobile .footer-col.right {
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	align-items: flex-end;
	gap: 2.625rem;
}
.footer-mobile .footer-col.left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.footer-mobile .footer-logo {
	margin-top: 1.656rem;
	max-width: 3.3rem;
}

.footer-mobile .copyright {
	color: #656565;
	text-align: center;
	margin-bottom: 1.5rem;
}

.footer-mobile .socials-wrapper img {
	max-width: 1.5rem;
}

.select-dropdown {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.chevron-down::before {
	position: absolute;
	rotate: 270deg;
	right: 1rem;
	top: 1.5rem;
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: url(chevron.png);
}
.select-dropdown__button {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 1.5rem;
	background-color: #00282652;
	border: 2px transparent;
	border-radius: 50px;
	cursor: pointer;
	width: 5.625rem;
	text-align: left;
}
.select-dropdown__button:focus {
	outline: 2px solid #4de7ff80;
}

.select-dropdown__list {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	max-height: 200px;
	overflow: auto;
	margin-top: 2px;
	padding: 0;
	list-style-type: none;
	opacity: 0;
	pointer-events: none;
	transform-origin: top left;
	transform: scale(1, 0);
	transition: all ease-in-out 0.3s;
	z-index: 2;
	border-radius: 25px;
}
.select-dropdown__list.active {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1, 1);
}
.select-dropdown__list-item {
	display: block;
	list-style-type: none;
	padding: 10px 15px;
	background-color: #1f2c2b;

	cursor: pointer;
	text-align: center;
	transition: all ease-in-out 0.3s;
}

/* AGREEMENT MODAL */
.modal {
	display: none;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #010101;
}
/* Modal Content */
.modal-content {
	padding: 2rem;
	position: relative;
	width: 100%;
	height: 100vh;
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

/* The Close Button */
.close {
	color: #ff9191db;
	float: right;
	font-size: 28px;
	font-weight: bold;
	line-height: 3rem;
	opacity: 0.8;
}

.close:hover,
.close:focus {
	opacity: 1;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	font-family: "Geist Black";
	text-align: center;
}

.modal-body {
	padding: 1rem;
	line-height: 1.5rem;
}

.modal-body p {
	font-size: 1rem;
	line-height: 1.75rem;
	color: #fff;
}

/* responsive */

@media (max-width: 1024px) {
	html {
		font-size: 14px;
	}
	.content,
	.about .content {
		padding: 2.5rem;
	}
	.btn {
		padding: 1.25rem 2.87rem;
	}

	.affiliates {
		padding-bottom: 4.2rem;
	}

	.affiliates img {
		width: calc(100% / 3);
	}

	.contact {
		padding-top: 0;
	}
	.contact .contact-form {
		width: 100%;
	}
	.contact__text {
		line-height: 2.14rem;
		font-size: 1.425rem;
	}
	.contact .inputs-group {
		flex-direction: column-reverse;
	}
	.contact .agreement {
		text-align: center;
	}
	.contact .chat-icon {
		display: none;
	}

	.footer {
		display: none;
	}

	.footer-mobile {
		display: block;
	}
}

@media only screen and (min-width: 1800px) {
	.about__video {
		max-height: 1600px;
	}
}

@media only screen and (max-width: 950px) {
	.home {
		background: none;
		height: 100svh;
	}

	.home .content {
		gap: 2rem;
		padding: 2rem;
	}

	.home__title {
		font-family: "Geist Medium";
		margin: 5rem auto 0 auto;
		text-align: center;
	}

	.home__crystall {
		display: none;
	}

	.nav-mobile,
	.home__crystall--mobile {
		display: block;
	}

	.home__crystall--mobile {
		position: absolute;
		top: 0;
	}

	.home__crystall--mobile video {
		object-fit: cover;
		height: 100svh;
	}
	.nav-container {
		display: block;
		transition: background-color 800ms linear;
	}
	.nav-container.active {
		transition: background-color 800ms linear;
		background: #010101;
	}
	.nav-list {
		text-align: center;
	}
	nav {
		width: 100%;
		font-size: 2rem;
	}
	nav .select-dropdown__button {
		color: #fff;
		font-size: 2rem;
		width: 8rem;
	}
	nav .chevron-down::before {
		top: 2rem;
	}
	nav ul.nav-list {
		display: none;
		height: 100dvh;

		background-color: #010101;
	}
	nav ul li {
		float: none;
	}
	nav ul {
		padding: 15px;
		line-height: 20px;
	}
	.btn-group {
		flex-direction: column;
	}
	nav ul li a.btn-sm {
		padding: 1.5rem;
	}
	.audience-slider {
		display: none;
	}
	.audience-mobile {
		display: block;
	}

	.about__video {
		display: none;
	}
	.about__video--mobile {
		display: block;
	}
	.section-wrapper {
		background-position-y: 160px;
	}
}

@media only screen and (max-width: 600px) {
	h1 {
		font-size: 3rem;
		line-height: 4rem;
	}
}
@media screen and (min-width: 950px) {
	.nav-list {
		display: flex !important;
		justify-content: space-between;
	}
}

@media screen and (max-height: 800px) {
	.home__title {
		margin: 6rem auto 0 auto;
		text-align: center;
		line-height: 1.1;
	}

	.home__crystall {
		width: calc(100vw / 4.2);
		margin: 0 auto 6rem auto;
	}
}

@media screen and (max-height: 700px) {
	.home__title {
		font-family: "Geist Medium";
		margin: 3rem auto 0 auto;
		text-align: center;
		line-height: 1.1;
	}

	.home__crystall {
		width: calc(100vw / 4.2);
		margin: 0 auto 6rem auto;
	}
}

@media screen and (max-height: 680px) {
	.home__title {
		margin: 2rem auto 0 auto;
	}
}