@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@import '_variables';
@import '_mixins';

@font-face {
	font-family: 'Proxima Nova Bl';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Black.eot');
	src: local('Proxima Nova Black'), local('ProximaNova-Black'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot');
	src: local('Proxima Nova Extrabold'), local('ProximaNova-Extrabld'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot');
	src: local('Proxima Nova Semibold Italic'), local('ProximaNova-SemiboldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2')
			format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf')
			format('truetype');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot');
	src: local('Proxima Nova Thin'), local('ProximaNovaT-Thin'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Light.eot');
	src: local('Proxima Nova Light'), local('ProximaNova-Light'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot');
	src: local('Proxima Nova Black Italic'), local('ProximaNova-BlackIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot');
	src: local('Proxima Nova Bold Italic'), local('ProximaNova-BoldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot');
	src: local('Proxima Nova Thin Italic'), local('ProximaNova-ThinIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot');
	src: local('Proxima Nova Bold'), local('ProximaNova-Bold'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot');
	src: local('Proxima Nova Regular Italic'), local('ProximaNova-RegularIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.ttf')
			format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot');
	src: local('Proxima Nova Extrabold Italic'), local('ProximaNova-ExtrabldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff2')
			format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.ttf')
			format('truetype');
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot');
	src: local('Proxima Nova Regular'), local('ProximaNova-Regular'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot');
	src: local('Proxima Nova Light Italic'), local('ProximaNova-LightIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot');
	src: local('Proxima Nova Semibold'), local('ProximaNova-Semibold'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

$cWhite: #f9f9f9;
$cGreen: #2bac25;
$cYellow: #ffc400;
$cYellowLight: #fffbee;
$cBlack: #000;

$fProxima: 'Proxima Nova', sans-serif;
$fAnton: 'Anton', sans-serif;

//* ~~~ Global ~~~ *//
.gap-t-160 {
	padding-top: 160px;

	@include respond-below(sm) {
		padding-top: 100px;
	}
}
.gap-b-160 {
	padding-bottom: 160px;

	@include respond-below(sm) {
		padding-bottom: 100px;
	}
}
.gap-t-120 {
	padding-top: 120px;

	@include respond-below(xs) {
		padding-top: 90px;
	}
}
.gap-b-120 {
	padding-bottom: 120px;

	@include respond-below(xs) {
		padding-bottom: 90px;
	}
}
.gap-t-90 {
	padding-top: 90px;

	@include respond-below(xs) {
		padding-top: 50px;
	}
}
.gap-b-90 {
	padding-bottom: 90px;

	@include respond-below(xs) {
		padding-bottom: 50px;
	}
}
.gap-t-60 {
	padding-top: 60px;
}
.gap-b-60 {
	padding-bottom: 60px;
}

.main_content {
	margin: auto;
	padding-left: 0;
	padding-right: 0;
}

.container {
	@media screen and (min-width: 1300px) {
		max-width: 1240px;
	}
}

.btn {
	display: inline-flex;
	gap: 5px;
	padding: 20px 28px;
	height: 53px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	color: #fff;
	font-family: 'Proxima Nova';
	font-size: 14px;
	font-weight: 600;

	&-green {
		background: $cGreen;

		&:hover {
			color: $cWhite;
		}
	}

	&-transparent {
		color: $cBlack;
		border: 1px solid rgba(0, 0, 0, 0.24);

		&:hover {
			color: $cBlack;
		}
	}
}

.box-title {
	font-size: 40px;
	font-family: $fProxima;
	font-weight: 700;
	line-height: 1;
}
//* ~~~~~~~~~~~~~~ *//

body {
	background: $cYellowLight;

	.page-content {
		overflow: hidden;
	}
}

header {
	z-index: 1;

	@include respond-above(sm) {
		margin-bottom: -93px;
		height: 93px;
	}

	.content {
		@extend .main_content;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40px;

		@include respond-below(sm) {
			padding-bottom: 40px;
		}

		@media (max-width: 500px) {
			flex-direction: column;
			align-items: center;
			gap: 30px;
		}

		.logo {
			width: 150px;

			img {
				width: 100%;
			}
		}
	}
}

.box-1 {
	@extend .gap-b-160;

	.content {
		@extend .main_content;
	}

	.c-row {
		display: grid;
		grid-template-columns: minmax(300px, 580px) minmax(300px, 1fr);
		column-gap: 80px;
		align-items: flex-end;

		@include respond-below(sm) {
			grid-template-columns: 1fr;
			row-gap: 40px;
		}

		.c-col {
			&-1 {
				padding-bottom: 100px;

				@include respond-below(sm) {
					order: 2;
					text-align: center;
					padding-bottom: 0px;
				}

				.title-tag {
					position: relative;
					color: $cWhite;
					padding: 8px 12px;
					border-radius: 7px;
					background: $cBlack;
					display: inline-block;
					margin-bottom: 40px;

					&::after {
						content: '';
						width: 11px;
						height: 11px;
						display: inline-block;
						background-image: url('/layout/images/tuzzer/mini-star.svg');
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
					}

					span {
						font-size: 16px;
						font-family: $fProxima;
						line-height: normal;
						margin: 0;
						text-transform: uppercase;
					}
				}

				h2 {
					color: $cBlack;
					font-size: 53px;
					font-family: $fProxima;
					line-height: 1;
					font-weight: 900;

					@include respond-below(sm) {
						font-size: 46px;
						margin-bottom: 20px;
					}

					@include respond-below(xs) {
						font-size: 32px;
					}

					span {
						color: $cYellow;
					}
				}
				.buttons {
					display: flex;
					flex-direction: row;
					column-gap: 24px;
					row-gap: 10px;
					flex-wrap: wrap;

					@include respond-below(sm) {
						justify-content: center;
					}
				}
			}

			&-2 {
				position: relative;

				@include respond-below(sm) {
					order: 1;
					text-align: center;
				}

				&::before {
					content: '';
					position: absolute;
					top: 130px;
					left: -100px;
					width: 70px;
					height: 70px;
					background-image: url('/layout/images/tuzzer/yellow-star.svg');
					background-position: center;
					background-size: contain;
					background-repeat: no-repeat;
					opacity: 0.5;

					@include respond-below(sm) {
						left: 10%;
						transform: translateX(-50%);
					}
				}
				&::after {
					content: '';
					position: absolute;
					top: 230px;
					left: -70px;
					width: 194px;
					height: 194px;
					background-image: url('/layout/images/tuzzer/yellow-star.svg');
					background-position: center;
					background-size: contain;
					background-repeat: no-repeat;
					opacity: 0.5;

					@include respond-below(sm) {
						top: 200px;
						left: 90%;
						transform: translateX(-50%);
					}
				}

				img {
					@include respond-below(sm) {
						position: relative;
						width: 100%;
						max-width: 300px;
						z-index: 1;
					}
				}
			}
		}
	}
}

.box-2 {
	@extend .gap-b-60;

	.content {
		@extend .main_content;
	}

	.c-row {
		&-1 {
			margin-bottom: 30px;

			.box-title {
				position: relative;

				&::after {
					content: '';
					display: inline-block;
					width: 28px;
					height: 28px;
					margin-left: 10px;
					background-image: url('/layout/images/tuzzer/star-2.svg');
					background-position: center;
					background-size: contain;
					background-repeat: no-repeat;
				}

				@include respond-below(md) {
					text-align: center;
				}
			}
		}

		&-2 {
			display: grid;
			grid-template-columns: 5fr 7fr;
			column-gap: 50px;

			@include respond-below(lg) {
				grid-template-columns: 1fr 1fr;
			}
			@include respond-below(md) {
				display: flex;
				flex-direction: column;
				row-gap: 40px;
			}

			.c-col {
				@include respond-below(md) {
					text-align: center;
				}

				> img {
					margin-bottom: 40px;
				}
				h3 {
					color: $cBlack;
					font-size: 24px;
					font-family: $fProxima;
					font-weight: 700;
					line-height: 1;
					margin-bottom: 34px;
				}

				ul {
					list-style: none;
					padding: 0;
					margin: 0;

					@include respond-below(md) {
						text-align: left;
					}

					li {
						position: relative;
						padding-left: 33px;

						&::before {
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
						}
					}
				}

				&-1 {
					@include respond-below(md) {
						padding: 20px;
					}
					ul {
						li {
							&::before {
								content: '❌';
							}
						}
					}
				}

				&-2 {
					padding: 70px 100px 50px;
					background: #f3f0e0;
					border-radius: 40px;

					@include respond-below(lg) {
						padding: 70px 50px 50px;
					}
					@include respond-below(xs) {
						padding: 40px 20px 30px;
					}

					ul {
						margin-bottom: 40px;
						li {
							&::before {
								content: '✅';
							}
						}
					}

					.buttons {
						display: flex;
						flex-direction: row;
						gap: 24px;
						flex-wrap: wrap;

						@include respond-below(lg) {
							justify-content: center;
						}
					}
				}
			}
		}
	}
}

.box-3 {
	@extend .gap-t-120;
	@extend .gap-b-90;

	.content {
		@extend .main_content;
	}

	.c-row {
		&-1 {
			max-width: 690px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			margin-bottom: 60px;

			h2 {
				margin-bottom: 26px;

				span {
					color: $cYellow;
					display: block;
				}
			}

			p {
				color: $cBlack;
				font-size: 16px;
				font-family: $fProxima;
				text-align: center;

				strong {
					font-weight: 700;
				}
			}
		}

		&-2 {
			.tiles-wrapper {
				margin-bottom: 70px;

				@include respond-below(lg) {
					overflow-x: scroll;
					overflow-y: hidden;
					padding-bottom: 30px;
					margin-right: 20px;
					margin-left: 20px;

					&::-webkit-scrollbar {
						height: 8px;
						background: rgba($cYellow, 0.5);
						border-radius: 4px;
					}
					&::-webkit-scrollbar-thumb {
						background-color: $cBlack;
						border-radius: 4px;
					}
				}
			}

			.tiles {
				display: grid;
				grid-template-areas:
					't1 ta1 t3 ta3 t4'
					't2 ta2 t3 ta4 t5';
				gap: 15px;
				min-width: 1140px;

				.tile {
					background: $cYellow;
					border-radius: 10px;
					padding: 20px 26px;

					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					row-gap: 12px;
					width: 100%;
					max-width: 232px;

					p {
						color: $cBlack;
						font-size: 16px;
						font-family: $fProxima;
						line-height: 1.5;
						font-weight: 700;
						text-align: center;
						margin-bottom: 0;
					}
					.empty-box {
						display: block;
						background: $cWhite;
						border-radius: 10px;
						width: 100%;
						height: 100%;
					}

					&-1 {
						grid-area: t1;
					}
					&-2 {
						grid-area: t2;
					}
					&-3 {
						grid-area: t3;
						max-width: unset;
						padding-bottom: 0;
						overflow: hidden;
						min-width: 225px;

						img {
							box-shadow: -1px 2px 11.4px 0px #0000002b;
						}
					}
					&-4 {
						grid-area: t4;
						max-width: unset;
						align-items: flex-start;
						row-gap: 5px;

						display: flex;
						flex-direction: row;
						align-items: center;
						column-gap: 30px;

						.tile-text {
							p {
								text-align: left;
							}

							span {
								font-size: 13px;
								font-weight: 400;
								line-height: 1;
								margin-bottom: 20px;
								display: inline-block;
							}
						}

						.tile-img {
							img {
								margin-top: -90px;
							}
						}
					}
					&-5 {
						grid-area: t5;
						max-width: unset;
						align-items: center;

						display: flex;
						flex-direction: row;
						column-gap: 28px;

						p {
							text-align: left;
						}

						.tile-img {
							height: 100%;
							padding: 10px 0;
						}
					}
				}

				.tile-arrow {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					row-gap: 5px;

					p {
						color: $cWhite;
						font-family: $fProxima;
						font-size: 16px;
						font-weight: 700;
						margin-bottom: 0;
					}

					&-1 {
						grid-area: ta1;
					}
					&-2 {
						grid-area: ta2;
					}
					&-3 {
						grid-area: ta3;

						p {
							position: relative;
							color: $cBlack;
							text-align: center;
							width: 100%;
						}
					}
					&-4 {
						grid-area: ta4;

						p {
							position: relative;
							color: $cBlack;
							text-align: center;
							width: 100%;
						}
					}
				}
			}

			.btn {
				display: flex;
				margin: 0 auto;
				max-width: fit-content;
			}
		}
	}
}

.box-4 {
	@extend .gap-t-120;
	background: $cBlack;

	.c-row {
		&-1 {
			display: grid;
			grid-template-columns: 5fr 7fr;
			column-gap: 45px;

			@include respond-below(md) {
				grid-template-columns: 1fr;
				row-gap: 40px;
			}

			.c-col {
				&-1 {
					h2 {
						color: $cWhite;
						margin-bottom: 25px;

						span {
							display: block;
							color: $cYellow;
						}
					}

					p {
						color: $cWhite;
						margin-bottom: 30px;
					}

					@include respond-below(md) {
						order: 2;
					}
				}
				&-2 {
					@include respond-below(md) {
						order: 1;
						text-align: center;
						img {
							width: 100%;
							max-width: 500px;
						}
					}
					@include respond-below(sm) {
						img {
							max-width: 300px;
						}
					}
				}
			}
		}
	}
}

.box-5 {
	@extend .gap-t-120;
	@extend .gap-b-120;
	background: $cBlack;

	.c-row {
		&-1 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 30px;

			@include respond-below(sm) {
				grid-template-columns: 1fr;
			}

			.c-col {
				position: relative;
				border-radius: 33px;
				background: #22211e;
				padding: 54px;

				display: flex;
				flex-direction: column;
				justify-content: center;

				@include respond-below(xs) {
					padding: 30px;
				}

				h2 {
					color: $cYellow;
					margin-bottom: 24px;
					font-weight: 400;
					font-size: 83px;
					font-family: $fAnton;
					text-transform: uppercase;

					@include respond-below(xs) {
						font-size: 50px;
					}
				}
				p {
					color: $cWhite;
				}

				img {
					position: absolute;
					top: 30px;
					right: 0;
				}
			}
		}
	}
}

.box-6 {
	@extend .gap-b-120;
	background: $cBlack;

	.c-row {
		&-1 {
			display: grid;
			grid-template-columns: 5fr 7fr;
			column-gap: 45px;
			align-items: center;

			@include respond-below(md) {
				grid-template-columns: 1fr;
				row-gap: 40px;
			}

			.c-col {
				&-1 {
					text-align: center;

					@include respond-below(md) {
						img {
							width: 100%;
							max-width: 500px;
						}
					}
					@include respond-below(sm) {
						img {
							max-width: 300px;
						}
					}
				}

				&-2 {
					h2 {
						color: $cYellow;
						margin-bottom: 25px;

						span {
							color: $cWhite;
						}
					}

					ul {
						padding: 0;
						margin: 0 0 40px 0;
						list-style: none;

						li {
							color: $cWhite;
							position: relative;
							padding-left: 30px;

							&:not(:last-child) {
								margin-bottom: 22px;
							}

							&::before {
								content: '';
								position: absolute;
								top: 3px;
								left: 0;
								width: 17px;
								height: 17px;
								background-image: url('/layout/images/tuzzer/mini-star.svg');
								background-position: center;
								background-size: contain;
								background-repeat: no-repeat;
							}
						}
					}

					.buttons {
						display: flex;
						column-gap: 20px;
						row-gap: 10px;
						flex-wrap: wrap;

						.btn {
							&-transparent {
								border: 1px solid #fffbee;
								color: $cWhite;
							}
						}
					}
				}
			}
		}
	}
}

.box-7 {
	@extend .gap-t-90;
	@extend .gap-b-120;

	@include respond-below(xs) {
		padding-bottom: 40px;
	}

	.c-row {
		&-1 {
			.box-title {
				color: $cBlack;
				text-align: center;
				margin-bottom: 32px;

				span {
					color: $cYellow;
				}
			}

			p {
				margin-bottom: 50px;
				text-align: center;
				max-width: 570px;
				margin-left: auto;
				margin-right: auto;
			}
		}
		&-2 {
			.swiper {
				padding-bottom: 70px;

				.swiper-slide {
					img {
						width: 100%;
					}
				}

				.swiper-button-next {
					top: auto;
					bottom: 10px;
					left: 50%;
					transform: translateX(calc(-50% + 40px));

					&::after {
						content: url('/layout/images/tuzzer/arrow-r.svg');
					}
				}
				.swiper-button-prev {
					top: auto;
					bottom: 10px;
					left: 50%;
					transform: translateX(calc(-50% - 40px));

					&::after {
						content: url('/layout/images/tuzzer/arrow-l.svg');
					}
				}
			}
		}
	}
}

.box-8 {
	@extend .gap-t-90;
	@extend .gap-b-120;

	.c-row {
		&-1 {
			text-align: center;
			margin-bottom: 90px;

			@include respond-below(md) {
				margin-bottom: 20px;
			}

			h2 {
				color: $cBlack;
				font-size: 32px;
				font-weight: 800;
				font-size: $fProxima;

				span {
					color: $cYellow;
					display: block;
				}
			}

			img {
				@include respond-below(md) {
					max-width: 300px;
				}
			}
		}
		&-2 {
			display: grid;
			grid-template-columns: 5fr 7fr;
			column-gap: 80px;
			align-items: center;

			@include respond-below(md) {
				grid-template-columns: 1fr;
				row-gap: 40px;
			}

			.c-col {
				&-1 {
					@include respond-below(md) {
						order: 2;
					}

					.box-title {
						span {
							color: $cYellow;
						}
					}

					ul {
						padding: 0;
						margin: 0 0 40px 0;
						list-style: none;

						li {
							color: $cBlack;
							position: relative;
							padding-left: 30px;

							&:not(:last-child) {
								margin-bottom: 22px;
							}

							&::before {
								content: '';
								position: absolute;
								top: 5px;
								left: 0;
								width: 17px;
								height: 17px;
								background-image: url('/layout/images/tuzzer/mini-star.svg');
								background-position: center;
								background-size: contain;
								background-repeat: no-repeat;
							}
						}
					}
				}
				&-2 {
					@include respond-below(md) {
						order: 1;
						text-align: center;
					}

					img {
						width: 100%;
						max-width: fit-content;

						@include respond-below(md) {
							max-width: 500px;
						}
					}
				}
			}
		}
	}
}

.box-9 {
	@extend .gap-t-90;
	@extend .gap-b-90;
	background: $cBlack;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 378px;
		height: 161px;
		background-image: url('/layout/images/tuzzer/start-2.svg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 205px;
		height: 205px;
		background: $cYellow;
		border-radius: 100%;

		filter: blur(100px);
	}

	.c-row {
		position: relative;
		z-index: 1;

		&-1 {
			margin-bottom: 40px;

			.c-col {
				&-1 {
					.box-title {
						color: $cWhite;

						span {
							color: $cYellow;
						}

						@include respond-below(sm) {
							text-align: center;
						}
					}
				}
			}
		}

		&-2 {
			margin-bottom: 60px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 34px;

			@include respond-below(lg) {
				grid-template-columns: 1fr;
			}

			.c-col {
				ul {
					padding: 0;
					margin: 0;
					list-style: none;

					li {
						position: relative;
						color: $cWhite;
						padding: 16px 24px 16px 48px;
						border-radius: 10px;
						display: block;

						&::before {
							content: '✅';
							position: absolute;
							top: 16px;
							left: 16px;
						}

						&:nth-child(2n + 1) {
							background-color: #22211e;
						}
					}
				}

				&-1 {
				}
				&-2 {
					ul {
						@include respond-below(lg) {
							li {
								&:nth-child(2n + 1) {
									background-color: transparent;
								}

								&:nth-child(2n) {
									background-color: #22211e;
								}
							}
						}
					}
				}
			}
		}

		&-3 {
			margin-bottom: 40px;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 32px;

			@include respond-below(md) {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
			}
			@include respond-below(sm) {
				flex-direction: column;
			}

			.c-col {
				border-radius: 10px;
				padding: 30px;
				background-color: #22211e;

				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;

				@include respond-below(md) {
					width: calc(50% - 16px);
				}
				@include respond-below(sm) {
					width: 100%;
				}

				.col-text {
					> span {
						color: $cYellow;
						font-size: 64px;
						font-family: $fProxima;
						font-weight: 700;
						margin-bottom: 16px;
						line-height: 1;
						display: inline-block;

						sup {
							top: -1.5rem;
							font-size: 24px;
							font-weight: 800;
						}
					}

					p {
						color: #fffbee;
						margin: 0;
					}
				}

				.col-tag {
					display: inline-block;
					color: $cBlack;
					font-size: 14px;
					font-weight: 700;
					padding: 10px 17px;
					border-radius: 5px;
					background: $cYellow;
				}

				&-1 {
				}
				&-2 {
				}
				&-3 {
				}
			}
		}

		&-4 {
			.c-col {
				&-1 {
					text-align: center;
				}
			}
		}
	}
}

.box-10 {
	@extend .gap-t-90;
	@extend .gap-b-90;

	.c-row {
		&-1 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			row-gap: 100px;
			align-items: center;

			@include respond-below(md) {
				grid-template-columns: 1fr;
				row-gap: 40px;
			}

			.c-col {
				&-1 {
					.box-title {
						color: $cBlack;
						margin-bottom: 45px;

						span {
							color: $cYellow;
						}
					}

					img {
						width: 100%;
						max-width: fit-content;
					}

					ul {
						padding: 0;
						margin: 0 0 32px 0;
						list-style: none;

						li {
							color: $cBlack;
							position: relative;
							padding-left: 42px;

							&:not(:last-child) {
								margin-bottom: 10px;
							}

							&::before {
								content: '';
								position: absolute;
								top: 5px;
								left: 0;
								width: 17px;
								height: 17px;
								background-image: url('/layout/images/tuzzer/mini-star.svg');
								background-position: center;
								background-size: contain;
								background-repeat: no-repeat;
							}
						}
					}
				}

				&-2 {
					@include respond-below(md) {
						text-align: center;
					}
					img {
						width: 100%;
						max-width: fit-content;

						@include respond-below(md) {
							width: 100%;
							max-width: 500px;
						}
					}
				}
			}
		}
	}
}

.box-11 {
	@extend .gap-t-120;
	@extend .gap-b-90;
	background: $cWhite;

	.c-row {
		&-1 {
			.c-col {
				&-1 {
					.box-title {
						color: $cBlack;
						margin-bottom: 50px;
						text-align: center;
					}

					ul {
						list-style: none;
						padding: 0;
						margin: 0 0 70px 0;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						gap: 40px 30px;

						li {
							flex: 0 0 calc(20% - 30px);
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					p {
						margin: 0;
						text-align: center;
					}
				}
			}
		}
	}
}

.box-12 {
	@extend .gap-t-90;
	@extend .gap-b-90;

	.content {
		border-radius: 30px;
		padding: 60px 80px;
		background: $cYellow;

		@include respond-below(xs) {
			padding: 40px;
		}
	}
	.c-row {
		&-1 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 50px;

			@include respond-below(md) {
				grid-template-columns: 1fr;
				row-gap: 40px;
			}

			.c-col {
				&-1 {
					display: flex;
					flex-direction: column;

					.box-11-logo {
						flex-direction: 1;
						margin-bottom: 40px;

						span {
							display: inline-block;
							padding: 30px 40px 25px;
							border-radius: 14px;
							background: $cWhite;
						}
					}

					h2 {
						color: $cWhite;
						font-size: 48px;
						font-family: $fProxima;
						font-weight: 800;
						margin-bottom: 40px;

						span {
							display: block;
							color: $cBlack;
						}

						@include respond-below(sm) {
							font-size: 32px;
						}
						@include respond-below(xxxs) {
							font-size: 26px;
						}
					}

					.contact-box {
						display: flex;
						flex-direction: row;
						column-gap: 20px;
						align-items: center;

						@include respond-below(xs) {
							flex-direction: column;
							row-gap: 20px;
						}

						&-img {
							img {
								width: 100%;
								max-width: 137px;
							}
						}
						&-data {
							span {
								display: block;
								color: $cWhite;
								font-weight: 700;
								font-family: $fProxima;
								font-size: 16px;
								line-height: 1;
							}
							p {
								color: $cBlack;
								font-size: 20px;
								font-weight: 800;
								font-family: $fProxima;
								margin-bottom: 10px;
								line-height: 1;
							}
							ul {
								padding: 0;
								margin: 0;
								list-style: none;
								display: flex;
								flex-direction: row;
								column-gap: 20px;
								flex-wrap: wrap;

								li {
									font-size: 14px;

									a {
										color: $cBlack;
									}
								}
							}
						}
					}

					@include respond-below(xs) {
						text-align: center;
					}
				}
				&-2 {
					.form-box {
						border-radius: 24px;
						padding: 40px;
						background: $cWhite;

						h3 {
							font-size: 30px;
							font-family: $fProxima;
							font-weight: 700;
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}

footer {
	padding: 20px 0;
	background: $cBlack;

	.c-row {
		&-1 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.c-col {
				span,
				a {
					color: rgba(#fffbee, 0.7);
					font-size: 12px;
					line-height: 1;
					font-weight: 400;
				}
				&-1 {
					display: flex;
					flex-direction: row;
					align-items: center;
					column-gap: 25px;
				}
			}
		}
	}
}