@font-face {
	font-family: 'SF Pro Text';
	src: url('https://govshades-assets.s3.us-east-2.amazonaws.com/fonts/SFProText-Regular.woff') format('woff2'),
		url('https://govshades-assets.s3.us-east-2.amazonaws.com/fonts/SFProText-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SF Pro Text';
	src: url('https://govshades-assets.s3.us-east-2.amazonaws.com/fonts/SFProText-Medium.woff2') format('woff2'),
		url('https://govshades-assets.s3.us-east-2.amazonaws.com/fonts/SFProText-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SF Pro Text';
	src: url('https://govshades-assets.s3.us-east-2.amazonaws.com/fonts/SFProText-Bold.woff2') format('woff2'),
		url('https://govshades-assets.s3.us-east-2.amazonaws.com/fonts/SFProText-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

html {
	font-size: 62.5%;
	font-family: 'SF Pro Text';
}

* {
	margin: 0;
	padding: 0;
}

ul, li {
	list-style-type: none;
}


body {
	position: relative;

	margin: 0;
	padding: 36px 0;
	/* min-height: 100dvh; */

	background: #031628;


	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;

		width: 100%;
		height: 100%;

		background-image: url('https://govshades-assets.s3.us-east-2.amazonaws.com/img/reg/govshades-bg2.png');
		background-size: cover;
		background-position: 88% 0;
	}
}

main {
	/* max-width: 768px; */
	/* margin: 0 auto; */

	.container {
		padding: 0 16px;
	}

	.banner {
		.banner__image {
			position: relative;
			height: 70px;
			max-width: 820px;

			margin: 0 auto;
			border-radius: 4px;

			overflow: hidden;

			img {
				width: 100%;
				height: 100%;

				object-position: center;
				object-fit: cover;
			}

			.label--image {
				position: absolute;
				top: 50%;
				left: 50%;
				translate: -50% -50%;

				height: 60px;
				width: 60px;

			}
		}
	}

	.registration--form__wrapper {
		padding-top: 12px;
		padding-bottom: 16px;

		.registration--form__head {
			display: flex;
			align-items: center;
			column-gap: 8px;

			max-width: 820px;
			margin: 0 auto;
			margin-bottom: 8px;

			.main--logo {
				min-width: 74px;
				width: 74px;
				height: 84px;

				img {
					width: 100%;
					height: 100%;

					object-fit: contain;
					object-position: center;
				}
			}

			.registration--form__title {
				font-size: 2rem;
				line-height: 1.2;
				font-weight: 700;
				color: white;
				text-transform: uppercase;
			}
		}

		.feature__list {
			display: flex;
			flex-direction: column;
			row-gap: 4px;

			padding-left: 16px;

			li {
				position: relative;
				font-size: 1.4rem;
				line-height: 1.43;
				color: white;

				&::before {
					content: "";

					position: absolute;
					left: -16px;
					top: 0;
					translate: 0 6px;

					display: inline-block;

					width: 8px;
					height: 8px;
					border-radius: 50%;
					background-color: white;
				}
			}
		}

		.registration--form {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			width: 100%;
			max-width: 648px;
			margin: 0 auto;

			overflow: hidden;

			.name__inputs {
				display: flex;
				flex-direction: column;
				width: 100%;
			}

			label {
				margin-top: 8px;

				font-size: 1.6rem;
				line-height: 1.25;
				font-weight: 700;
				color: white;
			}

			input {
				width: calc(100% - 26px);
				height: 22px;

				margin-top: 2px;
				padding: 4px 12px;
				border: 1px solid #D9D6C7;
				border-radius: 6px;

				background-color: white;
			}

			.input_sign {
				margin-top: 2px;

				font-size: 1.2rem;
				line-height: 1.33;
				color: white;
				font-weight: 400;
			}

			.agree--checkbox__label {
				display: flex;
				align-items: flex-start;
				column-gap: 8px;

				margin-top: 24px;
				margin-bottom: 16px;

				cursor: pointer;

				input {
					appearance: none;
					position: relative;

					display: inline-flex;
					align-items: center;
					justify-content: center;

					min-width: 2.4rem;
					width: 2.4rem;
					height: 2.4rem;

					padding: 0;
					border: none;
					border-radius: 3px;

					background-color: white;
					overflow: hidden;

					&:checked::after {
						content: "✔";

						font-size: 1.6rem;
					}
				}

				span {
					font-size: 1.2rem;
					line-height: 1.33;
					font-weight: 400;
				}
			}

			.registration--form__submit--button {
				width: 100%;
				max-width: 375px;

				padding: 12px;
				margin: 0 auto;
				border-radius: 8px;
				border: none;

				font-size: 2rem;
				line-height: 1.4;
				font-weight: 500;
				color: white;

				background-color: #165FA1;
				cursor: pointer;

				&:hover,
				&:focus {
					opacity: 0.8;
				}
			}
		}

		.registration--form__login--option {
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: 8px;

			margin-top: 12px;

			font-size: 1.4rem;
			line-height: 1.43;
			color: white;

			span {
				color: #E9E8E3;
			}

			a {
				color: inherit;
				text-decoration: underline;
			}
		}
	}

	.brands {

		.brand__list {
			display: flex;
			align-items: center;
			justify-content: space-between;

			padding: 7px 5px;
			border-top: 1px solid white;
			border-bottom: 1px solid white;

			.brand__item {
				height: 17px;

				overflow: hidden;

				img {
					width: 100%;
					height: 100%;

					object-fit: contain;
					object-position: center;
				}
			}
		}
	}

	.benefits {
		padding: 16px;

		.benefits__list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			column-gap: 8px;

			max-width: 944px;
			margin: 0 auto;

			.benefit {
				display: flex;
				flex-direction: column;
				align-items: center;

				max-width: 200px;
				width: calc((100% - 8px * 3)/4);

				.benefit__image {
					height: 28px;
					width: 28px;

					img {
						width: 100%;
						height: 100%;

						object-position: center;
						object-fit: contain;
					}
				}

				span {
					font-size: 0.8rem;
					line-height: 1.5;
					color: white;
					text-align: center;
					text-wrap: pretty;
				}
			}
		}
	}

	.reviews {

		.review__list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			row-gap: 12px;
			column-gap: 80px;

			margin: 0 auto;
			padding: 0 16px;

			.review {
				display: flex;
				flex-direction: column;
				row-gap: 8px;

				max-width: 322px;
				padding: 6px 12px;
				border-radius: 6px;
				border: 1px solid white;


				color: white;

				* {
					color: inherit;
					font-size: 1.2rem;
					line-height: 1.33;
				}

				.review__head {
					display: flex;
					align-items: center;
					justify-content: center;
					column-gap: 28px;

					&.reverse {
						flex-direction: row-reverse;
					}

					.review__image {
						height: 36px;

						img {
							width: 100%;
							height: 100%;

							object-position: center;
							object-fit: contain;
						}
					}

					.review__object {
						display: flex;
						flex-direction: column;
						row-gap: 8px;

						span {
							font-weight: 500;
						}
					}
				}

				.review__text {
					display: flex;
					column-gap: 6px;

					&::before {
						content: '';

						display: inline-block;

						min-width: 12px;
						width: 12px;
						height: 8px;
						margin-top: auto;

						background: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.90186%200H5.63589L4.15389%208H0.5L2.90186%200ZM8.76597%200H11.5L10.2096%208H6.55575L8.76597%200Z%22%20fill%3D%22white%22/%3E%3C/svg%3E') no-repeat center;
						background-size: contain;
					}

					&::after {
						content: '';
						display: inline-block;
						min-width: 12px;
						width: 12px;
						height: 8px;
						background: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.90186%200H5.63589L4.15389%208H0.5L2.90186%200ZM8.76597%200H11.5L10.2096%208H6.55575L8.76597%200Z%22%20fill%3D%22white%22/%3E%3C/svg%3E') no-repeat center;
						background-size: contain;
					}
				}

				.rewiewer__name {
					margin-left: auto;
				}

			}
		}
	}
}

@media (width < 1024px) {
	.desctop {
		display: none !important;
	}
}

@media (width >=1024px) {
	.mobile {
		display: none !important;
	}

	main {

		.banner {
			.banner__image {
				height: 320px;
				border-radius: 16px;

				.label--image {
					height: 270px;
					width: 270px;
				}
			}
		}

		.registration--form__wrapper {
			padding-top: 4px;
			padding-bottom: 124px;

			.registration--form__head {
				column-gap: 32px;

				.main--logo {
					min-width: 162px;
					width: 162px;
					height: 162px;
				}

				.registration--form__title {
					font-size: 3.2rem;
					line-height: 1.44;
				}
			}

			.feature__list {
				padding-left: 24px;

				li {
					font-size: 2rem;
					line-height: 1.4;

					&::before {
						left: -24px;
						translate: 0 10px;

						width: 12px;
						height: 12px;
					}
				}
			}

			.registration--form {
				padding-top: 24px;

				.name__inputs {
					flex-direction: row;
					column-gap: 18px;

					label {
						width: 50%;
						margin-top: 0;
					}
				}

				label {
					margin-top: 12px;
					margin-bottom: 4px;

					font-size: 2rem;
					line-height: 1.4;
					font-weight: 500;
				}

				input {
					height: 38px;
				}

				.input_sign {
					margin-top: 4px;
					margin-bottom: 12px;

					font-size: 1.4rem;
					line-height: 1.43;
				}

				.agree--checkbox__label {
					margin-bottom: 24px;

					span {
						font-size: 1.6rem;
						line-height: 1.5;
					}
				}

				.registration--form__submit--button {
					max-width: 144px;
				}

				.registration--form__login--option {
					column-gap: 16px;

					font-size: 2rem;
					line-height: 1.4;
				}
			}
		}

		.brands {
			.brand__list {
				padding: 17px 50px;

				.brand__item {
					height: 38px;
					max-width: 107px;
				}
			}
		}

		.benefits {
			padding: 46px 0;

			.benefits__list {
				.benefit {
					padding: 0 25px;

					.benefit__image {
						width: 64px;
						height: 64px;
					}

					span {
						font-size: 1.6rem;
					}
				}
			}
		}

		.reviews {
			.review__list {
				row-gap: 48px;

				.review {
					justify-content: center;
					max-width: 535px;
					height: 232px;
					padding: 0 16px;

					* {
						font-size: 1.6rem;
						line-height: 1.5;
					}

					.review__head {

						.review__image {
							height: 70px;
						}

						.review__object {
							img {
								height: 24px;
							}
						}
					}

					.review__text {
						display: flex;
						column-gap: 8px;

						&::before {
							min-width: 19px;
							width: 19px;
							height: 14px;

						}

						&::after {
							min-width: 19px;
							width: 19px;
							height: 14px;
						}
					}
				}
			}
		}
	}
}