@font-face {
	font-family: Gantari;
	src: url('../fonts/Gantari-Regular.ttf');
	src: url('../fonts/Gantari-Regular.ttf?') format('ttf'),
		url('../fonts/Gantari-Regular.woff') format('woff'),
		url('../fonts/Gantari-Regular.otf') format('otf'),
		url('../fonts/Gantari-Regular.svg') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: Gantari;
	src: url('../fonts/Gantari-Bold.ttf');
	src: url('../fonts/Gantari-Bold.ttf?') format('ttf'),
		url('../fonts/Gantari-Bold.woff') format('woff'),
		url('../fonts/Gantari-Bold.otf') format('otf'),
		url('../fonts/Gantari-Bold.svg') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Cheltenham LT Ultra';
	src: url('../fonts/CheltenhamStd-Ultra.ttf');
	src: url('../fonts/CheltenhamStd-Ultra.ttf?') format('ttf'),
		url('../fonts/CheltenhamStd-Ultra.woff') format('woff'),
		url('../fonts/CheltenhamStd-Ultra.otf') format('otf'),
		url('../fonts/CheltenhamStd-Ultra.svg') format('svg'),
		url('../fonts/CheltenhamStd-Ultra.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
}


body {
	font-family: Gantari;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	color: #ffffff;
}


.wrapper {
	background: radial-gradient(77.62% 26.31% at 50% 100%, #BD002F 0%, rgba(47, 0, 0, 0) 100%),
		radial-gradient(104.38% 23.5% at 50% 0%, #BD002F 0%, rgba(47, 0, 0, 0) 100%),
		#2F0000;
	padding: 59px calc((100% - 1440px) / 2) 60px;
}

.wrapper .wrapper-background {
	inset: -50px;
	-webkit-mask-image: url(../images/pattern.png);
	-webkit-mask-position: top left;
	-webkit-mask-size: auto;
	-webkit-mask-repeat: repeat;
	mask-image: url(../images/pattern.png);
	mask-position: top left;
	mask-size: auto;
	mask-repeat: repeat;
	z-index: 1;
	animation: starsMove 3s linear infinite backwards, startsFlicking 2.1s ease alternate infinite backwards;
}

@keyframes starsMove {
	from {
		transform: translateY(50px);
	}
	to {
		transform: translateY(-50px);
	}
}

@keyframes startsFlicking {
	from {
		background: rgba(0, 0, 0, .17);
	}
	to {
		background: rgba(0, 0, 0, 0.4);
	}
}

.wrapper > *:not(.wrapper-background):not(.formBorder):not(.formBackground) {
	z-index: 2;
}

.wrapper header {
	height: 102px;
}

.wrapper header .left {
	column-gap: 50px;
}

.wrapper header a {
	font-size: 18px;
	line-height: 22px;
	letter-spacing: -0.02em;
	color: #FFFFFF;
}

.wrapper header a.active {
	position: relative;
	top: 0;
	left: 0;
	font-weight: 700;
}

.wrapper header a.active::after {
	content: url(../images/marker.png);
	position: absolute;
	left: 50%;
	bottom: -1px;
	transform: translate(-50%, 100%)
}

.wrapper header .logo {
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	height: 123px;
	background: url(../images/logo.png) center center / 100% no-repeat;
}


.wrapper main {
	padding: 110px 0 616px;
	row-gap: 30px;
}

.wrapper main h1 {
	font-size: 40px;
	line-height: 49px;
	letter-spacing: -0.015em;
}

.wrapper main p {
	font-size: 18px;
	line-height: 22px;
}


.wrapper footer .left {
	line-height: 20px;
	letter-spacing: -0.02em;
}

.wrapper footer .right {
	column-gap: 30px;
}

.wrapper footer .right p {
	font-size: 18px;
	line-height: 22px;
	color: #FFFFFF;
}

.wrapper footer .right a {
	width: 140px;
	height: 42px;
}

.wrapper footer .right .google-play-button {
	background: url(../images/google-play-button.png) center / 100% no-repeat;
}

.wrapper footer .right .app-store-button {
	background: url(../images/app-store-button.png) center / 100% no-repeat;
}


.wrapper main .carusel-wrapper .carusel {
	column-gap: 24px;
	top: 369px;
	left: 0;
}

.wrapper main .carusel-wrapper .carusel.first {
	left: -6120px;
	animation: caruselFirstVisible .8s ease forwards, caruselSliding 10s cubic-bezier(0.6, 1.43, 0.49, -0.4) .8s infinite;
}

.wrapper main .carusel-wrapper .carusel.second {
	animation: caruselSecondVisible .8s ease forwards, caruselSliding 10s cubic-bezier(0.6, 1.43, 0.49, -0.4) .8s infinite;
}

.wrapper main .carusel-wrapper .carusel img {
	filter: drop-shadow(1.58416px 6.33663px 4.75248px rgba(0, 0, 0, 0.5));
}

@keyframes caruselSliding {
	from {
		transform: translate(0)
	}
	to {
		transform: translate(3060px)
	}
}

@keyframes caruselFirstVisible {
	from {
		transform: translateX(-300px);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes caruselSecondVisible {
	from {
		transform: translateX(1800px);
	}
	to {
		transform: translateX(0);
	}
}


.wrapper main .carusel-wrapper .phone {
	width: 201px;
	height: 365px;
	top: 270px;
	left: 50%;
	transform: translateX(-50%) scale(.001);
	background: url(../images/phone.png) center / 100% no-repeat;
	animation: phoneVisible .7s ease .4s forwards, phonePulse 2.2s ease-in-out 1.1s alternate infinite;
}

@keyframes phoneVisible {
	from {
		transform: translateX(-50%) rotate(-560deg) scale(.001);
	}
	to {
		transform: translateX(-50%) rotate(6.58deg) scale(1.04);
	}
}

@keyframes phonePulse {
	from {
		transform: translateX(-50%) rotate(6.58deg) scale(1.04);
	}
	to {
		transform: translateX(-50%) rotate(-6.58deg) scale(.9);
	}
}

.wrapper .gradient-pulsar {
	z-index: 1;
	bottom: 216px;
	left: 50%;
	transform: translateX(-50%) scale(.001);
	width: 472px;
	height: 472px;
	background: radial-gradient(50% 50% at 50% 50%, #FF0037 0%, rgba(142, 0, 21, 0) 100%);
	mix-blend-mode: color-dodge;
	animation: pulsarVisible .7s ease .4s forwards, pulsarPulse 4.2s ease-in-out 1.1s alternate infinite;
}

@keyframes pulsarVisible {
	from {
		transform: translateX(-50%) scale(.001);
	}
	to {
		transform: translateX(-50%) scale(1);
	}
}

@keyframes pulsarPulse {
	from {
		transform: translateX(-50%) scale(1);
	}
	to {
		transform: translateX(-50%) scale(.7);
	}
}

.wrapper .contact {
	row-gap: 20px;
	padding: 30px 0 95px;
}

.wrapper .contact::after {
	content: '';
	position: absolute;
	width: 747px;
	height: 62px;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}

.wrapper .contact h2 {
	align-self: start;
	font-size: 30px;
	line-height: 36px;
}

.wrapper .contact form {
	padding: 25px;
	row-gap: 20px;
	max-width: 550px;
}

.wrapper .contact form p {
	max-width: 500px;
	font-size: 20px;
	line-height: 24px;
	padding-bottom: 22px;
}

.wrapper .contact .text-field {
	row-gap: 10px;
}

.wrapper .contact .text-field label {
	font-size: 18px;
	line-height: 22px;
}

.wrapper .contact .text-field label span {
	color: #F6FF00;
}


.wrapper .contact .text-field .input-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(161deg, #FFEC9C 34%, #FFD527 42%, #FFAC26 60%, #FFEC9C 71%, #CC7700 79%),
		linear-gradient(-85deg, #00000000 0%, #000000 100%);
	padding: 2px;
	mask-image: linear-gradient(#000 0 0),
		linear-gradient(#000 0 0);
	-webkit-mask-image: linear-gradient(#000 0 0),
		linear-gradient(#000 0 0);
	mask-clip: content-box, padding-box;
	-webkit-mask-clip: content-box, padding-box;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	border-radius: 30px;
}

.wrapper .contact .text-field.captcha .input-wrapper::before {
	background: linear-gradient(194deg, #FF9CBE 25%, #FF2797 36%, #FFAED4 46%, #FF267D 60%, #FF9CE0 71%, #CC005C 79%),
		linear-gradient(-85deg, #00000000 0%, #000000 100%);
}

.wrapper .contact .text-field input,
.wrapper .contact .text-field textarea {
	width: 100%;
	line-height: 19px;
	color: #FFFFFF;
	background: transparent;
	font-size: 16px;
	padding: 15px 20px;
	resize: none;
	overflow: hidden;
}

.wrapper .contact .text-field textarea {
	min-height: 99px;
}

.wrapper .contact .text-field input::placeholder,
.wrapper .contact .text-field textarea::placeholder {
	line-height: 19px;
	color: #FFFFFF;
	font-size: 16px;
}


.wrapper .formBorder {
	z-index: 1;
	border-radius: 20px;
	background: linear-gradient(-27deg, #ffffff 0%, #656565 16%, #FFFFFF 29%, #3C3C3C 43%, #FFFFFF 59%, #404040 77%, #DBDBDB 92%);
	padding: 1px;
	mask-image: linear-gradient(#000 0 0),
		linear-gradient(#000 0 0);
	-webkit-mask-image: linear-gradient(#000 0 0),
		linear-gradient(#000 0 0);

	mask-clip: content-box, padding-box;
	-webkit-mask-clip: content-box, padding-box;

	-webkit-mask-composite: xor;
	mask-composite: exclude;
	mix-blend-mode: overlay;
}

.wrapper .formBackground {
	z-index: 1;
	border-radius: 20px;
	background: linear-gradient(180deg, #7E7E7E 0%, #5B5B5B 48.56%, #949494 100%) content-box;
	mix-blend-mode: overlay;
	backdrop-filter: blur(2px);
	padding: 1px;
}

.wrapper .contact .captcha-view {
	column-gap: 30px;
}

.wrapper .contact .captcha-view img {
	cursor: pointer;
}

.wrapper .contact button {
	width: 200px;
	height: 50px;
	background: #4A050B content-box;
	border-radius: 70px;
	padding: 2px;
	margin: 30px 0 10px;
}

.wrapper .contact button::before {
	content: '';
	background: linear-gradient(#9D242F 32%, #9D242F00 100%);
	position: absolute;
	border-radius: 70px;
	inset: 0;
	padding: 2px;
	mask-image: linear-gradient(#000 0 0),
		linear-gradient(#000 0 0);
	-webkit-mask-image: linear-gradient(#000 0 0),
		linear-gradient(#000 0 0);

	mask-clip: content-box, padding-box;
	-webkit-mask-clip: content-box, padding-box;

	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.wrapper .contact button span {
	font-size: 19px;
	line-height: 23px;
	text-align: center;
	letter-spacing: -0.015em;
	background: linear-gradient(96.39deg, #FFA517 13.52%, #C56C06 28.62%, #FFD857 46.52%, #C56C06 49.32%, #FFE479 60.5%, #FFA517 71.69%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}


.wrapper .info {
	row-gap: 30px;
	padding: 30px 0 70px;
}

.wrapper .info h2 {
	font-size: 30px;
	line-height: 36px;
}

.wrapper .info .content {
	row-gap: 30px;
}

.wrapper .info .content .block {
	row-gap: 20px;
}

.wrapper .info .content .block p {
	line-height: 20px;
	letter-spacing: -0.02em;
}

.wrapper .info .content .block h3 {
	font-size: 18px;
	line-height: 20px;
	letter-spacing: -0.02em;
}

.wrapper .info .content .block h4 {
	line-height: 20px;
}

.wrapper .info .content .block .list .row {
	line-height: 19px;
	letter-spacing: -0.02em;
	column-gap: 10px;
	padding: 7px 15px;
}

.wrapper .info .content .block .list .row::before {
	content: url(../images/list-marker.png)
}


@media (max-width: 1500px) {
	
	.wrapper {
		padding: 59px 30px 60px;
	}

}

@media (max-width: 1300px) {

	.wrapper main {
		padding: 70px 0 607px;
	}

}

@media (max-width: 1100px) {

	.wrapper main {
		padding: 70px 0 475px;
	}

	.wrapper .gradient-pulsar {
		bottom: 193px;
		width: 354px;
		height: 354px;
	}

	.wrapper main .carusel-wrapper .carusel {
		column-gap: 18px;
		top: 336px;
	}

	.wrapper main .carusel-wrapper .carusel.first {
		left: -4560px;
		animation: caruselFirstVisible .8s ease forwards, caruselSliding 10s cubic-bezier(0.6, 1.43, 0.49, -0.4) .8s infinite;
	}

	.wrapper main .carusel-wrapper .carusel img {
		width: 96px;
	}

	@keyframes caruselSliding {
		from {
			transform: translate(0)
		}
		to {
			transform: translate(2262px)
		}
	}


	@keyframes caruselSecondVisible {
		from {
			transform: translateX(1100px);
		}
		to {
			transform: translateX(0);
		}
	}

	.wrapper main .carusel-wrapper .phone {
		width: 151px;
		height: 273px;
		top: 262px;
	}

}

@media (max-width: 940px) {

	.wrapper main {
        padding: 70px 0 393px;
    }

	.wrapper footer {
		flex-direction: column;
		row-gap: 70px;
	}
	
	.wrapper footer .right {
		order: 1;
		flex-direction: column;
		row-gap: 20px;
	}

	.wrapper footer .right p {
		margin-top: 10px;
		order: 1;
		font-size: 16px;
		line-height: 19px;
	}

	.wrapper footer .left {
		order: 2;
		align-self: flex-start;
	}

	.wrapper .gradient-pulsar {
        bottom: 321px;
    }

}

@media (max-width: 768px) {

	.wrapper {
		padding: 49px 20px 55px;
	}

	.wrapper footer .left {
		font-size: 14px;
		line-height: 18px;
	}

	.wrapper main h1 {
		font-size: 30px;
		line-height: 36px;
	}

	.wrapper main p {
		font-size: 16px;
		line-height: 19px;
	}

}

@media (max-width: 720px) {
	
	.wrapper {
		padding: 40px 20px 55px;
	}

	.wrapper header {
		height: 255px;
		padding-top: 153px;
	}

	.wrapper header .logo {
		width: 160px;
		height: 123px;
	}

	.wrapper header .left {
		width: 100%;
		justify-content: space-between;
	}

	.wrapper header .right {
		position: absolute;
		top: 153px;
		left: 50%;
		height: 102px;
		transform: translateX(calc(-50% - 8px));
	}

	.wrapper footer .left {
		width: 100%;
		text-align: center;
	}

	.wrapper .contact form {
		padding: 20px;
	}

	.wrapper .contact::after {
		width: 568px;
	}

	.wrapper main {
        padding: 40px 0 389px;
    }

}

@media (max-width: 410px) {

	.wrapper main {
        padding: 30px 0 399px;
    }

	.wrapper footer {
        row-gap: 40px;
    }

	.wrapper .gradient-pulsar {
        bottom: 311px;
    }

	.wrapper main .carusel-wrapper .carusel img {
        width: 64px;
    }

	.wrapper main .carusel-wrapper .carusel {
		column-gap: 10px;
		top: 431px;
	}

	.wrapper main .carusel-wrapper .carusel.first {
		left: -2960px;
		animation: caruselFirstVisible .8s ease forwards, caruselSliding 10s cubic-bezier(0.6, 1.43, 0.49, -0.4) .8s infinite;
	}

	@keyframes caruselSliding {
		from {
			transform: translate(0)
		}
		to {
			transform: translate(1470px)
		}
	}


	@keyframes caruselSecondVisible {
		from {
			transform: translateX(500px);
		}
		to {
			transform: translateX(0);
		}
	}

	.wrapper main .carusel-wrapper .phone {
		top: 337px;
	}

}

@media (max-width: 380px) {
	
	.wrapper {
		padding: 40px 10px 55px;
	}

	.wrapper .info h2 {
		font-size: 24px;
		line-height: 36px;
	}

	.wrapper .contact h2 {
		font-size: 24px;
		line-height: 36px;
	}

	.wrapper .contact form p {
		font-size: 16px;
		line-height: 19px;
		padding-bottom: 20px;
	}

	.wrapper .contact .captcha-view {
		justify-content: center;
	}

	.wrapper .contact .text-field textarea {
		min-height: 127px;
	}

	.wrapper .contact::after {
		width: 350px;
	}

}