* {margin: 0;padding: 0;font-family: 'Gilroy', sans-serif;}
body {background-color: rgba(27, 28, 45, 1);}
a {text-decoration: none;}

@font-face {
	font-family: 'Gilroy';
	src: url('./font/Gilroy-Medium.woff') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GilroyBold';
	src: url('./font/Gilroy-Bold.woff') format('opentype');
	font-weight: normal;
	font-style: normal;
}
.container {max-width: 1440px;width: 100%;margin: 0 auto;}
.main {
	background-image: url(./img/animation/desk.gif);
	width: 100%;
	height: 100%;
	padding-bottom: 70px;
	background-repeat: no-repeat;
	overflow: hidden;
	background-position-x: 140px;
	background-position-y: 45px;
}
.logo {padding-left: 100px;padding-top: 43px;width: 164px;}
.h2_tittle {
	font-family: 'GilroyBold';
	max-width: 700px;
	width: 100%;
	color: white;
	font-size: 70px;
	line-height: 74px;
	margin-top: 74px;
	padding-left: 100px;
	padding-bottom: 50px;
	font-weight: 700;
}
.steps_line_box {width: fit-content;}
.line {
	max-width: 390px;
	width: 100%;
	height: 0;
	margin-left: 100px;
	border: solid 2px;
	border-image: linear-gradient(
			to right,
			rgba(74, 76, 116, 1) 0%,
			rgba(74, 76, 116, 1) 60%,
			rgba(253, 173, 30, 1) 100%
		)
		1;
	position: relative;
	top: 20px;
	left: 25px;
}

.steps_box {margin-left: 100px;display: flex;max-width: 386px;width: 100%;}
.steps_box .steps_box_content:nth-child(1) .steps_p {width: 86px;}
.steps_box .steps_box_content:nth-child(2) {margin-left: 99px;}
.steps_box .steps_box_content:nth-child(2) .steps_p {width: 146px;}
.steps_box .steps_box_content:nth-child(3) {margin-left: 81px;}
.steps_box .steps_box_content:nth-child(3) .steps_p {width: 186px;}
.steps_box .steps_box_content:nth-child(3) .circle {background: rgba(233, 163, 40, 1);}
.circle {
	width: 35px;
	height: 35px;
	color: white;
	font-size: 20px;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(74, 76, 116, 1);
	border-radius: 100px;
	position: relative;
	margin-left: 5px;
}
.steps_p {margin-top: 10px;color: white;font-weight: 500;font-size: 22px;}
svg {background: none;}
.a_collect {
	width: 290px;
	height: 64px;
	border-radius: 30px;
	background-color: rgba(255, 199, 0, 1);
	font-size: 24px;
	color: rgba(27, 28, 45, 1);
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 100px;
	margin-top: 50px;
	transition: 0.55s;
	position: relative;
	overflow: hidden;
	z-index: 2;
}
.a_collect p {position: relative;z-index: 3;}
.a_collect .flare {
	position: absolute;
	top: -60px;
	height: 100%;
	left: -150%;
	animation: flareAnimation 3s infinite linear;
	z-index: 1;
}

@keyframes flareAnimation {
	0% {left: -150%;}
	100% {left: 150%;}
}
.a_collect:hover {box-shadow: 0px 4px 20px 0px rgba(255, 201, 8, 0.5);transition: 0.15s;}
.banners_block {margin-top: 10px;}
.banners_block_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 100px;
	padding-right: 100px;
	margin: 0 auto;
}
.banners_block_row p {font-size: 40px;color: white;}
.banners_block_row p span {margin-left: 7px;font-size: 30px;color: rgba(49, 50, 79, 1);}
.banners_block_row a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 106px;
	height: 44px;
	color: black;
	background-color: rgba(255, 199, 0, 1);
	border-radius: 30px;
	font-weight: 700;
}
.banners_animations {margin-top: 50px;}
.items-wrap {position: relative;display: flex;overflow: hidden;user-select: none;gap: 20px;}
.items-wrap:before,
.items-wrap:after {
	content: '';
	height: 100%;
	top: 0;
	width: 10%;
	position: absolute;
	z-index: 1;
	pointer-events: none;
}
.items-wrap:before {left: 0;}
.items-wrap:after {right: 0;}
.items {flex-shrink: 0;display: flex;gap: 20px;counter-reset: item;justify-content: space-around;min-width: 100%;}
.item {
	flex: 0 0 auto;
	counter-increment: item;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	font-weight: bold;
	color: #fff;
	margin: 10px 0;
	transition: all 0.1s ease-in-out;
}
.marquee {animation: scroll 80s linear infinite;}
.reverce {animation-direction: reverse;}
.items-wrap:hover .marquee {animation-play-state: paused;}
.perfscan {margin: 20px 0;text-align: center;bottom: 0;background: #fff;padding: 5px;}
.perfscan hr {
	border: solid #999;
	border-width: 1px 0 0 0;
	max-width: 50%;
	margin: 0 auto 20px;
}
.perfscan a {
	color: #000;
	font-weight: bold;
}

@keyframes scroll {
	from {transform: translateX(0);}
	to {transform: translateX(calc(-100% - 20px));}
}
.items {gap: 0px;}
.item img {padding-left: 70px;padding-right: 70px;}

@media (max-width: 1365px) {
	.main {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}

@media (max-width: 805px) {
	.h2_tittle {
		font-size: 38px;
		line-height: 40px;
		width: 345px;
	}
	.main {
		background-position: -250px;
	}
	.logo {
		display: flex;
		justify-content: center;
	}

	/* .banners_block {
		display: none;
	}
	footer {
		display: none;
	} */
}

@media (max-width: 700px) {
	.main {
		background-image: url(./img/animation/mobile.gif);
		background-position: center;
		background-size: 375px;
	}

	.logo a img {
		width: 201px;
		height: 28px;
	}

	.logo {
		margin: 0 auto;
		padding-top: 23px;
		padding-left: 0;
	}

	.h2_tittle {
		text-align: center;
		margin: 0 auto;
		padding: 0;
		margin-top: 28px;
		padding-bottom: 35px;
	}

	.circle {
		width: 38px;
		height: 38px;
		margin-left: 0;
	}
	.steps_box {
		margin-left: 0;
		width: 345px;
	}
	.line {
		width: 300px;
		margin: 0;
	}

	.steps_p {
		font-size: 14px;
	}
	.steps_box .steps_box_content:nth-child(2) {
		margin-left: 0;
		margin-left: 70px;
	}

	.steps_box .steps_box_content:nth-child(3) {
		margin-left: 0px;
	}
	.steps_box .steps_box_content:nth-child(3) .steps_p {
		width: 100px;
	}
	.steps_line_box {
		margin: 0 auto;
	}
	.steps_box .steps_box_content:nth-child(2) .steps_p {
		position: relative;
		right: 25px;
	}
	.steps_box .steps_box_content:nth-child(3) .steps_p {
		position: relative;
		right: 50px;
	}
	.a_collect {
		width: 261px;
		height: 56px;
		margin: 0 auto;
		margin-top: 362px;
	}
}

footer {
	max-width: 1440px;
	width: 100%;
	height: 121px;
	background-color: rgba(26, 29, 32, 1);
	margin-top: 100px;
	border-top-right-radius: 70px;
	border-top-left-radius: 70px;
}

.payment_methods {
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	box-sizing: border-box;
	padding-top: 25px;
}

@media (max-width: 1050px) and (min-height: 800px) {
	footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
}

@media (max-width: 1000px) {
	.main {
		background-position: -250px;
	}
	.payment_methods img {
		width: 75px;
	}
	footer {
		height: 100px;
	}
}

@media (max-width: 900px) {
	.main {
		background-position: -300px;
	}
}
@media (max-width: 800px) {
	footer {height: 75px;border-top-right-radius: 40px;border-top-left-radius: 40px;}
    .payment_methods {padding-top: 20px;}
    .main{padding-bottom: 50px;}
}
@media (max-width: 750px){
    footer{display: none;}
    .banners_block{display: none;}
}
@media (max-width: 700px) {
	.main {background-position: center;}
	body {overflow: hidden;}
	.h2_tittle {margin-top: 18px;padding-bottom: 18px;}
	.main {background-position-y: 250px;}
	.a_collect {margin-top: 340px;position: relative;top: -20px;}
}
@media (max-width: 375px) {
	.main {background-size: 275px;background-position-y: 255px;}
	.a_collect {margin-top: 260px;position: relative;top: -25px;}
}