body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #121a25
}

.main {
	width: 1440px;
	background: #121a25;
	overflow: hidden;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex
}

.topBar {
	align-self: stretch;
	padding-left: 120px;
	padding-right: 120px;
	padding-top: 16px;
	padding-bottom: 16px;
	background: #0f1621;
	justify-content: space-between;
	align-items: center;
	display: flex
}

.topBarLink {
	width: 224px;
	height: 32px;
	position: relative;
	overflow: hidden
}

.topBarContent {
	justify-content: flex-start;
	align-items: center;
	gap: 13px;
	display: flex
}

.header {
	width: 100%;
	align-self: stretch;
	position: relative;
	background: linear-gradient(225deg, rgba(12, 67, 149, 0) 0, rgba(11.78, 66.57, 148.75, 0.64) 100%);
	background-blend-mode: screen, overlay, normal, normal, normal;
	overflow: hidden;
	background-image: url(../images/LP3_Banner_Desktop.png); 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 32px;
	display: flex;
}

.headerWrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 700px;
	margin: 100px 0 106px 75px;
}

.headerTC {
	color: #ebebeb;
	font-size: 14px;
	font-family: Poppins;
	font-weight: 500;
	text-decoration: underline;
	line-height: 20px;
	word-wrap: break-word
}

.headerItem {
	width: 56px;
	height: 56px;
}

.headerTxtWrapper {
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
	font-size: 48px;
	font-family: Poppins;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	line-height: 60px;
	word-wrap: break-word;
}

.headerWrapper > .btn {
	width: 25%;
}

.btn {
	padding-left: 52px;
	padding-right: 52px;
	padding-top: 14px;
	padding-bottom: 12px;
	background: radial-gradient(ellipse 63.81% 87.00% at 50.00% 50.00%, #dc7911 0, rgba(255, 226.16, 73.31, 0.20) 100%), #fbc30d;
	box-shadow: 0 0 10px #fc9020;
	border-radius: 16px;
	outline: 2px #f49a1a solid;
	outline-offset: -2px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	display: inline-flex;
	transition: .3s
}

.btnJoin {
	color: white;
	font-size: 24px;
	font-family: Poppins;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 32px;
	letter-spacing: .96px;
	word-wrap: break-word;
	text-shadow: 0 4px 4px rgba(232, 132, 29, 0.24);
	text-decoration: none
}

.btnLogin {
	opacity: 0.8;
	transition: .3s;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 8px;
	padding-bottom: 8px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	display: flex;
}

.btnRegister {
	opacity: 0.8;
	transition: .3s;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 8px;
	padding-bottom: 8px;
	background: linear-gradient(45deg, #4b6fc7 0, #1046ca 100%), #09bbf6;
	border-radius: 12px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	display: flex;
}

.btnTxtHeader {
	color: white;
	font-size: 16px;
	font-family: Poppins;
	font-weight: 700;
	line-height: 24px;
	word-wrap: break-word;
	text-decoration: none;
}

.btnLogin:hover, .btnRegister:hover {
	opacity: 1;
	transition: .3s;
}

.btn:hover {
	background-color: #ff4500;
	transition: .3s;
	cursor: pointer
}

.cardsMain {
	align-self: stretch;
	padding: 100px 0 100px 0;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 100px;
	display: flex
}

.cardsWrapper {
	width: 100%;
	text-align: center;
}

.cardsTitle {
	color: white;
	font-size: 56px;
	font-family: Poppins;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 66px;
	word-wrap: break-word
}

.cardsTitleSmall {
	color: white;
	padding-top: 50px;
	font-size: 30px;
	font-family: Poppins;
	font-weight: 400;
	text-transform: capitalize;
	line-height: 64px;
	word-wrap: break-word
}

.cardsList {
	align-self: center;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	display: flex;
	flex-direction: row
}

.cardsItem {
	width: 384px;
	padding-bottom: 40px;
	padding-left: 24px;
	padding-right: 24px;
	background: radial-gradient(ellipse 109.44% 109.46% at 96.35% 51.24%, rgba(22, 24, 40, 0) 26%, rgba(22, 24, 40, 0.05) 62%, rgba(22, 24, 40, 0.22) 75%, rgba(22, 24, 40, 0.51) 84%, rgba(22, 24, 40, 0.93) 92%, #161828 93%), #121a25;
	border-radius: 36px;
	outline: 2px #2c3746 solid;
	outline-offset: -2px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	display: inline-flex
}

.cardsItemImg {
	position: relative;
	top: -50px;
	width: 105px;
	height: 105px;
	background: transparent
}

.cardsTxtWrapper {
	align-self: stretch;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 12px;
	display: flex
}

.cardsTxtTitle {
	align-self: stretch;
	text-align: center;
	color: white;
	font-size: 32px;
	font-family: Poppins;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 40px;
	letter-spacing: .40px;
	word-wrap: break-word
}

.cardsTxtContent {
	align-self: stretch;
	height: 112px;
	text-align: center
}

.cardsTxt {
	font-size: 18px;
	font-family: Poppins;
	font-weight: 500;
	line-height: 28px;
	word-wrap: break-word;
	color: white
}

.coinLeft {
	width: 131.50px;
	height: 123.50px;
	left: -80px;
	top: 115px;
	position: absolute
}

.coinRight {
	width: 142.50px;
	height: 174.50px;
	left: 1005px;
	top: -60px;
	position: absolute
}

.welcome {
	text-align: center;
	align-self: stretch;
	height: 900px;
	background: linear-gradient(180deg, #121a25 0, rgba(16.14, 23.31, 33.17, 0.90) 17%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(13.33, 19.26, 27.40, 0.74) 49%, #121a25 100%);
	background-image: url(../images/bg_welcome_section.png)
}

.welcomeWrapper {
	width: 996px;
	position: relative;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 68px;
	padding-bottom: 68px;
	background: radial-gradient(ellipse 109.44% 109.46% at 96.35% 51.24%, rgba(38, 39, 61, 0) 26%, rgba(37, 38, 60, 0.05) 62%, rgba(35, 36, 56, 0.22) 75%, rgba(30, 31, 50, 0.51) 84%, rgba(23, 25, 42, 0.93) 92%, #161828 93%), #121a25;
	background-blend-mode: overlay, normal, normal;
	border-radius: 40px;
	outline: 3px #25303f solid;
	outline-offset: -3px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 32px;
	display: inline-flex
}

.welcomeTitle {
	align-self: stretch;
	text-align: center;
	color: #fbc30d;
	font-size: 72px;
	font-family: Poppins;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 72px;
	word-wrap: break-word;
	text-shadow: 0 2px 0 rgba(191, 121, 22, 1.00)
}

.welcomeTitleSmall {
	align-self: stretch;
	text-align: center;
	color: white;
	font-size: 32px;
	font-family: Poppins;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 32px;
	word-wrap: break-word;
}

.welcomeTxtContent {
	width: 588px;
	text-align: center
}

.welcomeTxt {
	font-size: 18px;
	font-family: Poppins;
	font-weight: 500;
	line-height: 28px;
	word-wrap: break-word;
	color: white
}

.terms {
	align-self: stretch;
	padding: 50px 0px 50px 0px;
	background: linear-gradient(180deg, rgba(15, 22, 33, 0) 0, #0f1621 100%);
	background-image: url(../images/bg_terms&conditions.png);
	background-repeat: no-repeat;
	background-size: cover;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 64px;
	display: flex
}

.termsWrapper {
	width: 500px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	display: flex
}

.termsTitle {
	width: 792px;
	text-align: center;
	color: white;
	font-size: 56px;
	font-family: Poppins;
	font-weight: 700;
	line-height: 64px;
	word-wrap: break-word
}

.termsTxtWrapper {
	width: 587px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
	display: flex
}

.termsTxtContent {
	align-self: stretch;
	justify-content: center;
	align-items: center;
	gap: 12px;
	display: inline-flex
}

.termsTxtImg {
	align-self: stretch;
	padding-bottom: 6px;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4px;
	display: flex
}

.termsTxt {
	flex: 1 1 0;
	color: white;
	font-size: 16px;
	font-family: Poppins;
	font-weight: 500;
	line-height: 28px;
	word-wrap: break-word
}

.termsLink {
	color: white;
}

.footer {
	align-self: stretch;
	padding-top: 16px;
	padding-bottom: 40px;
	padding-left: 120px;
	padding-right: 120px;
	background: #0f1621;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;
	display: flex
}

.footerWrapper {
	align-self: stretch;
	justify-content: space-between;
	align-items: center;
	display: inline-flex
}

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

.footerPayments {
	color: #9399a1;
	font-size: 12px;
	font-family: Poppins;
	font-weight: 400;
	line-height: 16px;
	word-wrap: break-word
}

.footerImgs {
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	display: flex
}

.footerImgsPay {
	width: 24px;
	height: 24px;
	position: relative;
	background: #23292f;
	border-radius: 20px
}

.footerImgsCrypto {
	width: 28px;
	height: 20px;
	position: relative;
	background: #23292f;
	border-radius: 5px;
	outline: 1px rgba(47, 43, 67, 0.10) solid;
	outline-offset: -1px
}

.footerUtils {
	align-self: stretch;
	justify-content: center;
	align-items: center;
	gap: 8px;
	display: inline-flex
}

.footerTxtUtils {
	color: #9399a1;
	font-size: 12px;
	font-family: Poppins;
	font-weight: 400;
	line-height: 16px;
	word-wrap: break-word
}

.separator,
.separator2 {
	color: #9399a1;
	font-size: 12px;
	font-family: Poppins;
	font-weight: 400;
	line-height: 16px;
	word-wrap: break-word
}

@media only screen and (min-width:375px) and (max-width:599px) {
	.main {
		width: auto
	}

	.topBar {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.topBarLink {
		width: 150px;
	}
	
	.header {
		background-image: url(../images/LP3_Banner_Mobile.png);
		background-size: 100%;
		background-position: top;
		justify-content: center;
        align-items: center;
	}
	
	.headerWrapper {
		width: 350px;
		margin: 70% 10px 0 10px;
	}
	
	.headerWrapper > .btn {
		width: auto;
		margin: 0;
	}
	
	.headerTxtWrapper {
		width: 100%;
		font-size: 26px;
		line-height: 50px;
		margin: 0 0 0 0;
	}
	
	.headerTC {
		margin: 0 0 10px 0;
	}

	.cardsList {
		flex-direction: column;
	}

	.cardsItem {
		width: 305px;
		margin-top: 50px;
	}

	.cardsTitle {
		font-size: 28px;
	}
	
	.cardsTitleSmall {
		font-size: 19px;
	}

	.cardsTxtTitle {
		font-size: 30px;
		line-height: 32px
	}

	.cardsTxt {
		font-size: 14px;
	}
	
	.welcome {
		height: 820px;
	}
	
	.welcomeWrapper {
		width: 290px;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.welcomeTitle {
		font-size: 32px;
		line-height: 15px
	}
	
	.welcomeTitleSmall {
		font-size: 20px;
		line-height: 23px
	}
	
	.welcomeTxtContent {
		width: auto
	}

	.welcomeTxt {
		font-size: 13px
	}

	.coinLeft,
	.coinRight {
		display: none
	}

	.termsTitle {
		width: 100%;
		font-size: 26px
	}

	.termsTxtWrapper {
		width: 300px
	}

	.termsTxt {
		font-size: 9px;
		line-height: 9px
	}

	.footer {
		padding-left: 20px;
		padding-right: 20px
	}

	.footerWrapper {
		flex-direction: column
	}

	.footerContent {
		flex-direction: column;
		margin-top: 30px;
		text-align: center
	}

	.separator {
		display: none
	}
}

@media only screen and (min-width:600px) and (max-width:767px) {
	.main {
		width: auto
	}

	.topBar {
		padding-left: 10px;
		padding-right: 10px
	}

	.header {
		background-image: url(../images/LP3_Banner_Mobile.png);
		background-size: 100%;
		background-position: top;
	}
	
	.headerWrapper {
		margin: 70% 0 0 20px;
	}
	
	.headerTxtWrapper {
		width: 600px;
		font-size: 40px;
		line-height: 65px
	}

	.cardsList {
		flex-direction: column
	}

	.cardsItem {
		margin-top: 50px
	}
	
	.cardsTitle {
		font-size: 40px
	}
	
	.cardsTxtTitle {
		font-size: 35px
		line-height: 43px;
	}
	
	.welcomeWrapper {
		width: 500px
	}

	.welcomeTitle {
		font-size: 42px;
		line-height: 42px
	}

	.welcomeTxtContent {
		width: auto
	}

	.welcomeTxt {
		font-size: 16px
	}

	.coinLeft,
	.coinRight {
		display: none
	}

	.termsTitle {
		width: 100%;
		font-size: 36px
	}

	.termsTxtWrapper {
		width: 300px
	}

	.termsTxt {
		font-size: 14px;
		line-height: 14px
	}

	.footerWrapper {
		flex-direction: column
	}

	.footerContent {
		flex-direction: column;
		margin-top: 30px;
		text-align: center
	}

	.separator {
		display: none
	}
}

@media only screen and (min-width:768px) and (max-width:991px) {
	.main {
		width: auto
	}

	.topBar {
		padding-left: 10px;
		padding-right: 10px
	}
	
	.headerWrapper > .btn {
		width: 25%;
	}
	
	.headerTxtWrapper {
		font-size: 30px;
		line-height: 45px
	}

	.cardsList {
		flex-direction: column
	}

	.cardsItem {
		margin-top: 50px
	}
	
	.welcomeWrapper {
		width: 600px
	}

	.welcomeTxtContent {
		width: 588px
	}

	.coinLeft,
	.coinRight {
		display: none
	}

	.footerWrapper {
		flex-direction: column
	}

	.footerContent {
		margin-top: 30px
	}
}

@media only screen and (min-width:992px) and (max-width:1199px) {
	.headerWrapper > .btn {
		width: 25%;
	}

	.cardsList {
		flex-direction: column
	}

	.cardsItem {
		margin-top: 50px
	}

	.welcomeWrapper {
		width: 768px
	}

	.welcomeTxtContent {
		width: 588px
	}

	.coinLeft,
	.coinRight {
		display: none
	}

	.footer {
		padding-left: 30px;
		padding-right: 30px
	}
}

@media only screen and (min-width:1200px) and (max-width:1375px) {
	.cardsList {
		flex-direction: column
	}

	.cardsItem {
		margin-top: 50px
	}
}