/*-------------------
        Fonts
-------------------*/
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

:root {
	--primary-color: #14a5de;
	--secondary-color: #305782;
	--feature-color: #0ba6d9;
	--main-bg: linear-gradient(#00000c, #14a5de);
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	color: #fff;
}

body {
	background-color: #300143;
}

* {
	font-family: "Lexend", sans-serif;
	box-sizing: border-box;
}

.headContent {
	min-height: 80vh;
	background-color: #344b57;
	background-image: linear-gradient(
		215deg,
		#d02ca288,
		#e018ec88,
		#1e3eea88,
		#24109388
	);
	position: relative;
}

.headContent::after {
	content: "";
	background-image: url("/assets/brands/mob/images/hero-right.png");
	position: absolute;
	right: 0;
	width: 50%;
	height: 100%;
	bottom: 2%;
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index: 8;
}

nav {
	display: flex;
	position: relative;
	width: 100%;
	height: 55px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9;
}

.navContainer {
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: transparent;
	color: #fff;
	max-width: 1200px;
	width: 100%;
}

.sectionContainer {
	padding: 10px 20px;
	max-width: 1200px;
	width: 100%;
	margin: auto;
}

.navContainer img {
	max-width: 200px;
	filter: brightness(0) invert(1);
}

.navContainer a {
	color: #fff;
	text-decoration: none;
}

.navLeft, .navCenter, .navRight, .footerLeft, .footerCenter, .footerRight {
	width: 33.33%;
}

.navLeft {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	gap: 10px;
}

.navCenter {
	display: flex;
	justify-content: center;
}

.navRight {
	display: flex;
	justify-content: end;
}

.page-title {
	font-size: 1.5em;
	text-align: center;
}

.mobBtn {
	background-color: transparent;
	color: #fff;
	padding: 0.3em 1em;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: inset 0 0 10px #fff, 0 0 2px rgba(255, 255, 255);
	transition: all 0.6s ease;
	background-image: linear-gradient(
		90deg,
		#d02ca200,
		#d02ca244,
		#e018ec88,
		#d02ca244,
		#d02ca200
	);
	background-size: 0% 100%;
	background-repeat: no-repeat;
}

.mobBtn:hover {
	text-decoration: none;
	color: white;
	background-size: 200% 100%;
}

.mobBtn.colorful {
	background-image: linear-gradient(
		90deg,
		#d02ca200,
		#2c60d044,
		#1894ec88,
		#2c66d044,
		#d02ca200
	);
}

.mobBtn.colorful:hover {
	background-size: 200% 100%;
	opacity: 1;
}

.sectionContainer .mobBtn {
	margin-top: 20px;
	display: block;
	width: 300px;
	height: 55px;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}

.heroContainer {
	min-height: calc(80vh - 55px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.heroContent {
	padding-top: 60px;
	display: flex;
	flex-direction: row;
}

.heroSuper {
	font-size: 4em;
	font-weight: bold;
	line-height: 1em;
}

.heroTitle {
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 20px;
}

.heroLeft {
	width: 45%;
}

.heroRight {
	width: 55%;
}

.heroPara {
	font-size: 1.2em;
	line-height: 1.2em;
}

#aboutBlock {
	background: #300143;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#aboutContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.aboutSuper {
	font-size: 1.8em;
	line-height: 1em;
	margin: 0;
}

.aboutTitle {
	font-size: 4em;
	font-weight: bold;
	line-height: 1em;
	margin-bottom: 20px;
}

.aboutPara {
	text-align: center;
	margin-bottom: 20px;
	font-size: 18px;
}

#contentBlock {
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #344b57;
	background-image: linear-gradient(
		215deg,
		#d02ca288,
		#e018ec88,
		#1e3eea88,
		#24109388
	);
}

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

.contentTitle {
	font-size: 4em;
	font-weight: bold;
	line-height: 1em;
	text-align: center;
}

.contentPara {
	text-align: center;
	margin-bottom: 20px;
}

.contentCards {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}

.contentCard {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #300143;
	border: 2px solid #893895;
	padding: 2px;
	width: 19%;
}

.contentCardImage {
	border-radius: 15px 15px 0 0;
	width: 100%;
}

.contentCardTitle {
	width: 100%;
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.4em;
	text-align: center;
}

#joinBlock {
	background: #300143;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#contactBlock {
	min-height: 80vh;
	background-color: #344b57;
	background-image: linear-gradient(
		215deg,
		#d02ca288,
		#e018ec88,
		#1e3eea88,
		#24109388
	);
	position: relative;
	padding: 30px 0;
}

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

#contact-form {
	background: #300143;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	border-radius: 20px;
	box-shadow: inset 0 0 15px #fff;
}

.form-group {
	width: 80%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.formField {
	display: flex;
	flex-direction: column;
}

input[type=text], input[type=email] {
	height: 50px;
}

form input, form textarea {
	background: transparent;
	color: white;
	box-shadow: inset 0 0 15px #fff;
	border-radius: 10px;
	border: none;
	padding: 10px;
}

form .mobBtn {
	width: 100%;
	height: 50px;
}

footer {
	background: #300143;
	display: flex;
	flex-direction: column;
	padding: 20px 0;
}

.footerLogo {
	max-width: 200px;
	margin-bottom: 50px;
}

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

.footerContentContainer {
	max-width: 1200px;
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: end;
	text-align: center;
}

.footerLeft {
	text-align: left;
}

.footerRight {
	display: flex;
	flex-direction: column;
	justify-content: end;
	text-align: right;
}

footer a {
	color: white;
	text-decoration: none;
}

footer a:hover {
	text-decoration: none;
	color: white;
	opacity: 0.8;
}

.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}

.darker.curved {
    background-image: linear-gradient(215deg, #d02ca255, #e018ec55, #1e3eea55, #24109355);
    padding: 40px 0;
    background-color: black;
}

#recaptchapopup {
	display: flex;
	position: fixed;
	height: 100%;
	width: 100%;
	background: rgba(119, 117, 117, 0.639);
	align-items: center;
	justify-content: center;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 999;
}

@media screen and (max-width: 768px) {
	.navLeft, .navRight {
		display: none;
	}

	.navContainer {
		justify-content: center;
	}

	.headContent::after {
		display: none;
	}

	.heroLeft {
		width: 100%;
	}

	.heroRight {
		display: none;
	}

	.sectionContainer .mobBtn {
		margin-left: auto;
		margin-right: auto;
	}

	.heroContent {
		padding-top: 20px;
		padding-bottom: 40px;
	}

	.sectionContainer {
		padding: 60px 20px;
	}

	.aboutTitle {
		text-align: center;
	}

	.heroLeft * {
		text-align: center;
	}

	.contentCards {
		flex-wrap: wrap;
		gap: 1%;
	}

	.contentCard {
		flex: 0 0 49%;
		margin-bottom: 20px;
	}

	.contentCardTitle {
		font-size: 1.4em;
	}

	.contentCard:last-of-type {
		margin: auto;
	}

	.aboutSuper {
		text-align: center;
	}

	.footerContentContainer {
		width: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.footerLeft, .footerCenter, .footerRight {
		width: 100%;
	}

	.footerLeft, .footerRight {
		text-align: center;
	}

	.footerLeft {
		position: relative;
		top: 40px;
	}

	.footerLogo {
		margin-bottom: 0;
		position: relative;
		bottom: 30px;
	}
}

@media screen and (min-width: 1400px) {
	.headContent::after {
		background-size: contain;
	}
}