zaufane.pl/layout/style-scss/nfc.scss

@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;
$cRed: #f30000;
$cBlack: #000;

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

//* ~~~ Global ~~~ *//
.gap-t-160 {
	padding-top: 160px;
}
.gap-b-160 {
	padding-bottom: 160px;
}
.gap-t-120 {
	padding-top: 120px;
}
.gap-b-120 {
	padding-bottom: 120px;
}
.gap-t-90 {
	padding-top: 90px;
}
.gap-b-90 {
	padding-bottom: 90px;
}
.gap-t-60 {
	padding-top: 60px;
}
.gap-b-60 {
	padding-bottom: 60px;
}

.main_content {
	// max-width: 1240px;
	// width: 90%;
	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: 22px 40px;
	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;
		}
	}
}

.big-title {
	font-size: 96px;
	font-family: $fAnton;
	text-transform: uppercase;
	text-align: center;
}
//* ~~~~~~~~~~~~~~ *//

body {
	background-color: $cYellowLight;
}
header {
	.content {
		@extend .main_content;
		display: flex;
		justify-content: space-between;
		padding-top: 40px;
		padding-bottom: 60px;

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

		.logo {
			width: 150px;

			img {
				width: 100%;
			}
		}

		.button {
			.btn {
				display: flex;
				gap: 5px;
				background: $cGreen;
				padding: 0 20px;
				height: 50px;
				align-items: center;
				justify-content: center;
				border-radius: 12px;
				color: #fff;
				font-family: 'Proxima Nova';
				font-size: 14px;
				font-weight: 600;
			}
		}
	}
}

.offer-timer {
	position: relative;
	background-color: $cRed;
	padding: 20px 0;

	&::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1px;
		height: 67px;
		background: $cWhite;
		transform: translate(-50%, -50%);
	}

	.content {
		@extend .main_content;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		column-gap: 90px;
	}

	.wrapper-offer-timer {
		display: flex;
		justify-content: flex-end;

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			column-gap: 5px;

			display: grid;
			grid-template-areas:
				'days-num days-separator hours-num hours-separator minutes-num minutes-separator seconds-num'
				'days-text days-separator hours-text hours-separator minutes-text minutes-separator seconds-text';

			li {
				color: $cWhite;
				display: flex;
				justify-content: center;

				&.days-num {
					grid-area: days-num;
				}
				&.hours-num {
					grid-area: hours-num;
				}
				&.minutes-num {
					grid-area: minutes-num;
				}

				&.days-text {
					grid-area: days-text;
					width: 18px !important;
					margin: 0 auto;
				}
				&.hours-text {
					grid-area: hours-text;
				}
				&.minutes-text {
					grid-area: minutes-text;
				}

				&.days-separator {
					grid-area: days-separator;
				}
				&.hours-separator {
					grid-area: hours-separator;
				}
				&.minutes-separator {
					grid-area: minutes-separator;
				}

				&.days-num,
				&.hours-num,
				&.minutes-num,
				&.seconds-num {
					font-family: $fAnton;
					font-size: 34px;
				}

				&.days-text,
				&.hours-text,
				&.minutes-text,
				&.seconds-text {
					font-family: $fProxima;
					font-size: 12px;
					font-weight: 700;
					width: 33px;
				}

				&.days-separator,
				&.hours-separator,
				&.minutes-separator,
				&.seconds-separator {
					font-family: $fAnton;
					font-size: 34px;
				}
			}
		}
	}
	.offer-data {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		h2 {
			color: $cWhite;
			font-family: $fAnton;
			font-size: 34px;
			margin-bottom: 0;
		}
		p {
			color: $cWhite;
			font-family: $fProxima;
			font-size: 12px;
			margin-bottom: 0;

			strong {
				font-weight: 700;
			}
		}
	}
}

.hero {
	.content {
		@extend .main_content;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;

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

	.left {
		h1 {
			color: $cBlack;
			font-family: $fAnton;
			font-weight: 400;
			text-transform: uppercase;
			margin-bottom: 20px;

			.l1 {
				font-size: 83px;
			}
			.l2 {
				font-size: 70px;
			}
		}
		p {
			font-weight: 400;
			font-size: 18px;
			font-family: $fProxima;
			margin-bottom: 50px;
		}
	}
}

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

	.content {
		@extend .main_content;
	}

	.box-big-title {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;

		.big-title {
			color: $cYellow;
		}

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

			strong {
				font-weight: 700;
			}
		}
	}

	.tiles {
		display: flex;
		flex-direction: row;
		width: 100%;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 60px;
		column-gap: 40px;

		.tile {
			flex: 1;
			padding: 0 50px 50px 30px;
			background: $cYellowLight;
			border-radius: 15px;
			display: flex;
			flex-direction: column;

			span {
				display: inline-block;
				color: $cYellow;
				font-size: 96px;
				font-family: $fAnton;
				line-height: 1;
				margin-bottom: 22px;
				margin-top: -45px;
			}

			h3 {
				font-size: 20px;
				font-family: $fProxima;
				font-weight: 700;
				margin-bottom: 18px;
				flex: 1;
			}

			p {
				margin-bottom: 0;
			}

			&-1 {
			}
			&-2 {
			}
			&-3 {
			}
		}
	}
	.btn {
		display: flex;
		margin-left: auto;
		margin-right: auto;
		max-width: fit-content;
	}
}

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

	.content {
		@extend .main_content;
	}

	h2 {
		color: $cBlack;
		font-size: 40px;
		font-family: $fProxima;
		font-weight: 700;
		margin-bottom: 20px;
	}

	ul {
		list-style: none;
		padding: 76px;
		margin: 0;
		border-radius: 10px;
		background: $cYellow;
		position: relative;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;

		row-gap: 36px;
		column-gap: 36px;

		&::before {
			content: '';
			position: absolute;
			width: 540px;
			height: 500px;
			background-image: url('/layout/nfc/trnaparent-big-star.svg');
			background-position: center;
			background-size: cover;
			bottom: 0px;
			right: 75px;
		}
	}
}

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

	.content {
		@extend .main_content;
	}

	.box-big-title {
		margin-bottom: 80px;

		.big-title {
			span {
				position: relative;
				color: $cYellow;

				&::after {
					content: '';
					display: inline-block;
					width: 50px;
					height: 50px;
					background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					transform: rotate(19deg);
					margin: 0 0 10px 15px;
				}
			}
		}
	}

	.c-row {
		display: grid;
		grid-template-columns: 5fr 7fr;
		align-items: center;
		max-width: 1060px;
		margin-left: auto;
		margin-right: auto;
		column-gap: 100px;

		.c-col {
			&-1 {
			}
			&-2 {
				h3 {
					font-family: $fProxima;
					font-size: 40px;
					font-weight: 700;
					margin-bottom: 25px;
				}

				ul {
					list-style: none;
					max-width: 480px;
					padding: 0;
					margin-bottom: 70px;
					display: flex;
					flex-direction: column;
					row-gap: 20px;

					li {
						position: relative;
						color: $cBlack;
						font-size: 18px;
						font-family: $fProxima;
						line-height: 1.8;
						padding-left: 35px;

						&::before {
							content: '';
							position: absolute;
							width: 23px;
							height: 23px;
							background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
							background-position: center;
							background-size: cover;
							background-repeat: no-repeat;
							top: 4px;
							left: 0;
						}
					}
				}
			}
		}
	}
}

.box-4 {
	@extend .gap-t-120;
	@extend .gap-b-120;

	.content {
		@extend .main_content;
	}

	h2 {
		position: relative;
		color: $cBlack;
		font-size: 40px;
		font-family: $fProxima;
		font-weight: 700;
		margin-bottom: 40px;

		&::after {
			content: '';
			display: inline-block;
			width: 26px;
			height: 26px;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			transform: rotate(19deg);
			margin-left: 15px;
		}
	}

	.tiles {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			'tile1 tile2'
			'tile3 tile2';
		gap: 25px;

		.tile {
			border-radius: 30px;
			overflow: hidden;

			&-1 {
				grid-area: tile1;
				padding: 56px 70px;
				background: $cYellow;

				.big-title {
					color: $cBlack;
				}

				ul {
					max-width: 370px;

					li {
						color: $cBlack;

						&::before {
							background-image: url('/layout/nfc/black-star.svg');
						}
					}
				}
			}
			&-2 {
				grid-area: tile2;
				background: $cBlack;
				display: flex;
				flex-direction: row;

				.tile-data {
					padding: 56px 30px 56px 70px;
					display: flex;
					flex-direction: column;
				}

				img {
					width: 220px;
					object-fit: cover;
					object-position: center;
				}

				.big-title {
					color: $cYellow;
				}

				ul {
					max-width: 290px;
					flex: 1;

					li {
						color: $cYellow;

						&::before {
							background-image: url('/layout/nfc/yellow-star.svg');
						}
					}
				}
			}
			&-3 {
				grid-area: tile3;
				img {
					height: 216px;
					width: 100%;
					object-fit: cover;
					object-position: center;
				}
			}

			.big-title {
				line-height: 1;
				text-align: left;
			}

			ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: flex;
				flex-direction: column;
				row-gap: 16px;

				li {
					position: relative;
					font-family: $fProxima;
					font-size: 16px;
					padding-left: 30px;

					&::before {
						content: '';
						position: absolute;
						width: 10px;
						height: 10px;
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						top: 6px;
						left: 0;
					}
				}
			}
		}
	}
}

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

	.content {
		@extend .main_content;
	}

	.box-big-title {
		max-width: 690px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;

		.big-title {
			color: $cYellow;
		}

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

			strong {
				font-weight: 700;
			}
		}
	}

	.tiles {
		display: grid;
		grid-template-areas:
			't1 ta1 t3 ta3 t4 ta5 t6'
			't2 ta2 t3 ta4 t5 ta6 t6';
		gap: 15px;
		margin-bottom: 70px;

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

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			row-gap: 8px;
			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;
			}
			&-4 {
				grid-area: t4;
			}
			&-5 {
				grid-area: t5;
			}
			&-6 {
				grid-area: t6;
			}
		}

		.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;

					&::after {
						content: '';
						display: inline-block;
						width: 15px;
						height: 15px;
						background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						margin-left: 5px;
					}
				}
			}
			&-4 {
				grid-area: ta4;
			}
			&-5 {
				grid-area: ta5;
			}
			&-6 {
				grid-area: ta6;
			}
		}
	}

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

.box-6 {
	@extend .gap-t-160;
	@extend .gap-b-160;
	background: $cYellow;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		width: 500px;
		height: 500px;
		background-image: url('/layout/nfc/trnaparent-big-star-2.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		top: 70px;
		right: -70px;
	}

	.content {
		@extend .main_content;
	}

	.box-big-title {
		margin-bottom: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.big-title {
			color: $cWhite;
			text-align: left;
		}
	}

	.slider-nav {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 40px;

		.swiper-button-prev,
		.swiper-button-next {
			position: relative;
			inset: inherit !important;
			display: block;
			height: auto;
			margin: 0;
		}
		.swiper-button-prev {
			&::after {
				display: none !important;
			}
		}
		.swiper-button-next {
			&::after {
				display: none !important;
			}
		}
	}

	.reviews-slider {
		.swiper-slide {
			background: $cWhite;
			border-radius: 10px;
			padding: 35px 40px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			> img {
				margin-bottom: 30px;
			}
			> p {
				color: $cBlack;
				font-family: $fProxima;
				font-size: 14px;
				line-height: 2;
				flex: 1;

				&:not(:last-child) {
					margin-bottom: 0;
				}
			}
			.reviews-author {
				display: flex;
				flex-direction: row;
				align-items: center;
				column-gap: 15px;
				margin-top: 60px;

				.author-img {
					img {
					}
				}

				.author-data {
					p {
						color: $cBlack;
						font-family: $fProxima;
						font-size: 14px;
						margin-bottom: 0;

						strong {
							font-weight: 700;
						}
					}
				}
			}
		}
	}
}

.box-7 {
	@extend .gap-t-160;
	@extend .gap-b-160;
	background: $cBlack;

	.content {
		@extend .main_content;
	}

	.c-row {
		display: grid;
		grid-template-columns: 3fr 9fr;
		column-gap: 110px;

		.c-col-1 {
			.big-title {
				color: $cYellow;
				text-align: left;
				margin-bottom: 30px;
			}

			.author-box {
				background: $cYellowLight;
				border-radius: 10px;
				padding: 28px;

				> p {
					color: $cBlack;
					font-size: 16px;
					font-family: $fProxima;
					margin-bottom: 20px;

					strong {
						font-weight: 700;
					}
				}

				.author-info {
					display: flex;
					flex-direction: row;
					align-items: center;
					column-gap: 14px;

					.author-img {
						position: relative;

						&::before {
							content: '';
							position: absolute;
							width: 24px;
							height: 24px;
							background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
							background-position: center;
							background-size: cover;
							background-repeat: no-repeat;
							left: -10px;
							bottom: -5px;
							transform: rotate(330deg);
						}
						img {
							width: 100%;
							max-width: 44px;
							border-radius: 100%;
						}
					}

					.author-data {
						p {
							color: $cBlack;
							font-size: 14px;
							font-family: $fProxima;
							margin-bottom: 0px;

							strong {
								font-weight: 700;
							}
						}

						a {
							color: $cBlack;
							font-size: 14px;
							font-family: $fProxima;
						}
					}
				}
			}
		}
	}

	ul.accordion {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		row-gap: 15px;

		li {
			position: relative;
			padding: 28px 45px;
			border: 1px dashed rgba($cWhite, 0.43);
			border-radius: 10px;

			&.active {
				border: 1px solid $cYellow;

				.accordion-title {
					.arrow {
						transform: scale(-1);

						&::before {
							background: $cYellow;
						}

						&::after {
							border-left: 1px solid #ffc400;
							border-bottom: 1px solid #ffc400;
						}
					}
				}
			}

			.accordion-title {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;

				h3 {
					color: $cWhite;
					font-family: $fProxima;
					font-size: 16px;
					font-weight: 700;
					margin-bottom: 0;
				}
				.arrow {
					position: relative;
					width: 19px;
					height: 19px;
					display: inline-block;
					transition: all 0.25s ease;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 1px;
						height: 18px;
						background: $cWhite;
						border-radius: 1px;
						transform: translate(-50%, -50%);
					}
					&::after {
						content: '';
						position: absolute;
						bottom: 1px;
						left: 50%;
						width: 8px;
						height: 8px;
						border-bottom: 1px solid $cWhite;
						border-left: 1px solid $cWhite;
						border-top: 1px solid transparent;
						border-right: 1px solid transparent;
						border-radius: 1px;
						transform: translate(-50%, 0) rotate(-45deg);
					}
				}
			}
			.accordion-content {
				padding-top: 20px;
				display: none;

				p {
					color: $cWhite;
					font-family: $fProxima;
					font-size: 14px;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

.box-8 {
	@extend .gap-t-120;
	@extend .gap-b-120;
	position: relative;
	background: $cYellow;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		width: 500px;
		height: 500px;
		background-image: url('/layout/nfc/trnaparent-big-star-2.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		bottom: -100px;
		left: -170px;
	}

	.content {
		@extend .main_content;
	}

	.tiles {
		display: flex;
		flex-direction: row;
		column-gap: 30px;

		.tile {
			border-radius: 10px;
			background: #fffbee;
			padding: 50px 50px 60px 50px;
			text-align: center;
			flex: 1;

			&-1 {
				.title-tag {
					color: $cWhite;
					background: $cBlack;
				}
			}
			&-2 {
				.title-tag {
					position: relative;
					color: $cBlack;
					background: $cYellow;

					&::after {
						content: '';
						position: absolute;
						top: -15px;
						right: -15px;
						width: 18px;
						height: 18px;
						background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						transform: rotate(340deg);
					}
					&::before {
						content: '';
						position: absolute;
						top: 10px;
						right: -16px;
						width: 9px;
						height: 9px;
						background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						transform: rotate(340deg);
					}
				}
			}

			.title-tag {
				font-size: 14px;
				font-family: $fProxima;
				font-weight: 700;
				margin: 0;
				line-height: 2;
				padding: 4px 16px;
				border-radius: 50px;
				display: inline-block;
				margin-bottom: 25px;
			}

			p {
				color: $cBlack;
				font-size: 18px;
				font-family: $fProxima;
				margin-bottom: 0;
				max-width: 330px;
				margin-left: auto;
				margin-right: auto;

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

			h3 {
				color: #2e3034;
				font-size: 96px;
				font-family: $fAnton;
				margin-bottom: 20px;
			}

			.btn {
				margin-top: 30px;
			}
		}
	}
}

footer {
	.content {
		@extend .main_content;
	}

	.footer-box-1 {
		padding: 50px 0 30px;
		background: $cYellowLight;
		overflow: hidden;

		.c-row {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.c-col-1 {
				position: relative;
				display: flex;
				flex-direction: row;
				column-gap: 120px;
				padding-left: 120px;

				&::after {
					content: '';
					position: absolute;
					top: -35px;
					left: 35px;
					width: 36px;
					height: 36px;
					background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					transform: rotate(20deg);
				}
				&::before {
					content: '';
					position: absolute;
					bottom: -65px;
					left: 0;
					width: 58px;
					height: 58px;
					background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					transform: rotate(330deg);
				}

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

					li {
						line-height: 1;

						&:not(:last-child) {
							margin-bottom: 15px;
						}
						a {
							color: $cBlack;
							font-family: 'Inter', sans-serif;
							font-size: 14px;
						}
					}
				}
			}
		}
	}
	.footer-box-2 {
		background: $cBlack;

		.content {
			padding: 18px 0;

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		span {
			color: rgba($cWhite, 0.7);
			font-family: 'Inter', sans-serif;
			font-size: 12px;
		}
	}
}