@import 'variables';
@import '_mixins';

html {
	scroll-behavior: smooth;
	scroll-padding-top: 105px;
}

strong {
	font-weight: 700;
}

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

.main-page {
	padding: 0;
	overflow: hidden;
}
.breadcrumbs {
	margin: 14px 0;
}

.section-title {
	position: relative;
	margin-bottom: 0;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 1px;
		background: #878787;
		transform: translateY(-50%);
	}

	span {
		position: relative;
		display: inline-block;
		color: $cTxtBlack;
		font-size: 32px;
		font-family: $font3;
		font-weight: 500;
		letter-spacing: 2px;
		margin-bottom: 0;
		text-transform: uppercase;
		padding-right: 30px;
		padding-top: 3px;
		background: $cWhite;

		@include respond-below(md) {
			font-size: 26px;
		}
	}
}

.box-1 {
	display: flex;
	flex-direction: column;

	@include respond-below(md) {
		margin-top: 30px;
	}

	._row {
		&-1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 30px;

			@include respond-above(md) {
				height: 282px;
			}
			@include respond-above(lg) {
				height: 455px;
			}
			@include respond-below(md) {
				flex-direction: column;
			}

			._col {
				&-1 {
					position: relative;
					width: 100%;
					max-width: 430px;
					height: 100%;
					align-content: center;

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

					@include respond-above(md) {
						&::before {
							content: '';
							position: absolute;
							top: 0;
							bottom: 0;
							right: -30px;
							left: 0;
							background: linear-gradient(
								90deg,
								rgba(244, 244, 244, 0) 0%,
								rgba(244, 244, 244, 1) 100%
							);
						}
					}

					h1 {
						position: relative;
						color: $cTxtBlack;
						font-family: $font3;
						font-size: 64px;
						letter-spacing: 2px;
						line-height: 1.1;
						font-weight: 700;
						text-transform: uppercase;
						margin-bottom: 25px;
						padding-bottom: 15px;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 2px;
							background: $cTxtBlack;

							@include respond-above(md) {
								max-width: 390px;
							}
						}

						@include respond-below(sm) {
							font-size: 44px;
						}
					}
					h2 {
						color: $cTxtBlack;
						font-family: $font3;
						font-size: 30px;
						letter-spacing: 2px;
						line-height: 1.2;
						font-weight: 300;
						text-transform: uppercase;

						@include respond-below(sm) {
							font-size: 24px;
						}
					}
				}

				&-2 {
					line-height: 0;

					video {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		&-2 {
			margin-top: 34px;
			margin-bottom: 72px;

			@include respond-below(sm) {
				font-size: 42px;
			}

			._col {
				&-1 {
					position: relative;
					height: 56px;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 0;
						width: calc(50% - 50px);
						height: 1px;
						background: #878787;
					}
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						right: 0;
						width: calc(50% - 50px);
						height: 1px;
						background: #878787;
					}
					.img_box {
						position: relative;
						width: 56px;
						height: 56px;
						border-radius: 100%;
						box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
						z-index: 1;

						display: flex;
						align-items: center;
						justify-content: center;
						background: $cWhite;
						margin-left: auto;
						margin-right: auto;

						img {
						}
					}
				}
			}
		}
	}
}

.box-2 {
	background-image: url('/upload/filemanager/Pages/O-nas/box-bg-1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 86px 0 90px;
	margin-bottom: 100px;

	@include respond-below(sm) {
		padding: 50px 0 90px;
	}

	._row {
		&-1 {
			margin-bottom: 80px;
			._col {
				&-1 {
					display: flex;
					flex-direction: row;
					column-gap: 70px;
					align-items: flex-end;

					@include respond-below(md) {
						flex-direction: column;
						align-items: center;
						gap: 15px;
					}

					._col-img {
						img {
							width: 100%;
							max-width: 200px;
						}
					}

					._col-data {
						padding-top: 20px;
						padding-bottom: 15px;

						@include respond-above(md) {
							border-left: 2px solid #181c1d;
							padding-left: 40px;
						}
						@include respond-below(md) {
							text-align: center;
						}
						p {
							color: $cTxtBlack;
							font-family: $font3;
							font-size: 20px;
							font-weight: 500;
							letter-spacing: 2px;
							line-height: 1;
							text-transform: uppercase;
							margin-bottom: 15px;

							@include respond-below(md) {
								font-size: 18px;
							}
						}
						h3 {
							color: $cTxtBlack;
							font-size: 32px;
							font-family: $font3;
							font-weight: 400;
							letter-spacing: 2px;
							line-height: 1;
							margin-bottom: 0;
							text-transform: uppercase;

							display: inline-block;

							strong {
								font-weight: 700;
							}

							@include respond-below(md) {
								font-size: 24px;
								line-height: 1.3;
							}
							@include respond-below(sm) {
								font-size: 18px;
							}
						}
					}
				}
			}
		}
		&-2 {
			margin-bottom: 80px;

			._col {
				&-1 {
					width: 100%;
					max-width: 763px;

					p {
						color: $cTxtBlack;
						font-family: $font3;
						font-size: 22px;
						font-weight: 300;
						letter-spacing: -0.04px;
						line-height: 1.5;

						strong {
							font-weight: 600;
						}

						@include respond-below(md) {
							font-size: 20px;
						}
						@include respond-below(sm) {
							font-size: 18px;
						}
					}
				}
			}
		}
		&-3 {
			._col {
				&-1 {
					ol {
						list-style: none;
						padding: 0;
						margin: 0;
						display: flex;
						flex-direction: row;
						gap: 32px;

						@include respond-below(md) {
							flex-wrap: wrap;
						}

						li {
							border-radius: 20px;
							background: $cWhite;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding: 20px 10px;
							box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25);

							width: calc(100% / 4);

							@include respond-below(md) {
								width: calc(100% / 2 - (32px / 2));
							}

							img {
								width: 100%;
								max-width: fit-content;
								margin-bottom: 17px;
							}

							h3 {
								color: $cTxtBlack;
								font-size: 18px;
								font-family: $font3;
								font-weight: 600;
								margin-bottom: 3px;
								text-transform: uppercase;

								@include respond-below(md) {
									font-size: 16px;
								}
							}

							p {
								color: $cTxtBlack;
								font-size: 18px;
								font-family: $font3;
								font-weight: 300;
								text-transform: uppercase;

								@include respond-below(md) {
									font-size: 16px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-4 {
	margin-bottom: 100px;

	@include respond-below(sm) {
		margin-bottom: 60px;
	}
}

.box-5 {
	padding-bottom: 75px;
	margin-bottom: 100px;
	border-bottom: 1px solid #878787;

	._row {
		&-1 {
			margin-bottom: 70px;
			@include respond-below(sm) {
				margin-bottom: 40px;
			}
		}
		&-2 {
			width: 100%;
			max-width: 1070px;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 70px;

			._col {
				&-1 {
					p {
						color: #1d1d1e;
						font-size: 20px;
						font-family: $font3;
						font-weight: 300;

						@include respond-below(md) {
							font-size: 18px;
						}

						strong {
							font-weight: 600;
						}
					}
				}
			}
		}
		&-3 {
			._col {
				&-1 {
					.offer-tiles {
						display: flex;
						flex-direction: row;
						column-gap: 30px;

						@include respond-below(md) {
							flex-wrap: wrap;
							justify-content: center;
							row-gap: 30px;
						}

						.offer-tile {
							width: calc(100% / 5 - (30px - (30px / 5)));

							@include respond-below(md) {
								width: calc(100% / 2 - (30px - (30px / 2)));
								max-width: 240px;
							}
							@include respond-below(xs) {
								width: 100%;
								max-width: 300;
								text-align: center;
							}

							img {
								display: block;
								margin-left: auto;
								margin-right: auto;
								margin-bottom: 70px;
							}
							h3 {
								color: #181c1d;
								font-size: 25px;
								font-family: $font3;
								font-weight: 400;
								letter-spacing: 2px;
								text-align: center;
								text-transform: uppercase;
								margin-bottom: 20px;

								@include respond-between(md, lg) {
									font-size: 19px;
								}
							}

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

								li {
									color: #878787;
									font-size: 18px;
									font-family: $font3;
									font-weight: 400;
									letter-spacing: 2px;
									line-height: 1.5;
								}
							}

							.offer-color-line {
								position: relative;
								display: block;
								height: 11px;
								width: 100%;
								max-width: 228px;
								margin-left: auto;
								margin-right: auto;
								margin-bottom: 35px;

								&-1 {
									background: #e2e2e2;
								}
								&-2 {
									background: #d5c1a9;
								}
								&-3 {
									background: linear-gradient(90deg, #d5c1a9 70%, #9ba9b7 70%);
								}
								&-4 {
									background: #9ba9b7;
								}
								&-5 {
									background: linear-gradient(90deg, #e2e2e2 70%, #9ba9b7 70%);
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-6 {
	position: relative;
	margin-bottom: 120px;

	@include respond-below(xs) {
		margin-bottom: 100px;
	}

	&::before {
		content: '';
		position: absolute;
		top: 60px;
		bottom: 60px;
		left: 0;
		right: 0;
		background: #f4f4f4;
	}

	._row {
		position: relative;
		z-index: 1;

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

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

			._col {
				width: 50%;

				@include respond-below(xs) {
					width: 100%;
				}

				&-1 {
					position: relative;

					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: -100px;
						background-image: url('/upload/filemanager/icon/Group.svg');
						background-position: center;
						background-size: contain;
						background-repeat: no-repeat;
						width: 440px;
						height: 420px;
						transform: translate(-50%, -50%);
					}

					* {
						position: relative;
						z-index: 1;
					}
					h3 {
						color: #181c1d;
						font-size: 25px;
						font-family: $font3;
						letter-spacing: 2px;
						font-weight: 300;
						text-transform: uppercase;
						margin-bottom: 40px;

						@include respond-below(md) {
							font-size: 23px;
						}

						strong {
							font-weight: 800;
							display: block;
						}
					}
					p {
						color: #181c1d;
						font-size: 20px;
						font-family: $font3;
						font-weight: 300;
						max-width: 370px;

						@include respond-below(md) {
							font-size: 18px;
						}
					}
				}

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

						li {
							padding: 19px 40px 14px;
							background: #2e2d2c;
							border-radius: 5px;
							box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

							color: $cWhite;
							font-size: 18px;
							font-weight: 400;
							font-family: $font3;
							line-height: 26px;
							text-transform: uppercase;
							transition: all 250ms ease-in-out;

							@include respond-below(md) {
								font-size: 14px;
								padding: 16px 30px 11px;
							}

							&:hover {
								color: $cTxtBlack;
								background: #ffed00;
							}

							strong {
								display: block;
								font-size: 25px;
								font-weight: 700;

								@include respond-below(md) {
									font-size: 20px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-7 {
	margin-bottom: 145px;

	@include respond-below(sm) {
		margin-bottom: 100px;
	}

	._row {
		&-1 {
			margin-bottom: 70px;

			@include respond-below(xs) {
				margin-bottom: 40px;
			}
		}
		&-2 {
			width: 100%;
			// max-width: 1070px;
			// margin-left: auto;
			// margin-right: auto;
			margin-bottom: 70px;

			._col {
				&-1 {
					p {
						color: #1d1d1e;
						font-size: 20px;
						font-family: $font3;
						font-weight: 300;

						@include respond-below(md) {
							font-size: 18px;
						}

						strong {
							font-weight: 600;
						}
					}
				}
			}
		}
		&-3 {
			width: 100%;
			max-width: 1220px;
			margin-left: auto;
			margin-right: auto;

			display: flex;
			flex-direction: row;
			gap: 26px;

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

			._col {
				&-1 {
				}

				&:nth-child(2n + 1) {
					@include respond-below(xs) {
						ul.img-tiles {
							li.img-tile {
								&:nth-child(1) {
									width: 70%;
								}
								&:nth-child(2) {
									width: 30%;
								}
							}
						}
					}
				}
				&:nth-child(2n) {
					@include respond-below(xs) {
						ul.img-tiles {
							li.img-tile {
								&:nth-child(1) {
									width: 30%;
								}
								&:nth-child(2) {
									width: 70%;
								}
							}
						}
					}
				}

				ul.img-tiles {
					list-style: none;
					padding: 0;
					margin: 0;

					display: flex;
					flex-direction: column;
					gap: 26px;

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

					li.img-tile {
						position: relative;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;

							@include respond-below(xs) {
								height: 300px;
							}
						}

						p {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);

							color: $cWhite;
							font-size: 25px;
							font-family: $font3;
							font-weight: 400;
							letter-spacing: 2px;
							text-align: center;
							text-transform: uppercase;

							@include respond-below(md) {
								font-size: 20px;
							}

							@include respond-below(sm) {
								font-size: 18px;
							}

							strong {
								display: block;
								font-size: 35px;
								font-weight: 700;

								@include respond-below(md) {
									font-size: 25px;
								}
								@include respond-below(sm) {
									font-size: 20px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-8 {
	padding-bottom: 150px;

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

	._row {
		&-1 {
			margin-bottom: 70px;
		}
		&-2 {
			width: 100%;
			// max-width: 1070px;
			// margin-left: auto;
			// margin-right: auto;
			margin-bottom: 100px;

			._col {
				&-1 {
					p {
						color: #1d1d1e;
						font-size: 20px;
						font-family: $font3;
						font-weight: 300;

						@include respond-below(md) {
							font-size: 18px;
						}

						strong {
							font-weight: 600;
						}
					}
				}
			}
		}
		&-3 {
			.partners-icons {
				.swiper-wrapper {
					align-items: center;
				}
				.swiper-slide {
					width: fit-content;

					img {
						max-height: 70px;
						max-width: 100px;
					}
				}

				&:hover {
					.swiper-button-next,
					.swiper-button-prev {
						opacity: 1;
						visibility: visible;
					}
				}
				.swiper-button-next,
				.swiper-button-prev {
					opacity: 0;
					visibility: hidden;
				}
			}
		}
	}
}

.box-9 {
	margin-bottom: 70px;
}

.box-10 {
	padding: 70px 0;
	background: #eeeeee;

	._row {
		&-1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 40px;

			@include respond-below(md) {
				flex-direction: column;
			}

			._col {
				width: 100%;

				&-1 {
					max-width: 540px;

					img {
						width: 100%;
						max-width: 540px;

						@include respond-below(md) {
							display: block;
							max-width: 300px;
							margin-left: auto;
							margin-right: auto;
						}
					}
				}
				&-2 {
					h2 {
						color: $cTxtBlack;
						font-size: 34px;
						font-family: $font3;
						font-weight: 300;
						text-transform: uppercase;
						margin-bottom: 25px;

						@include respond-below(md) {
							font-size: 26px;
							text-align: center;
						}

						strong {
							display: block;
						}
					}
					p {
						text-align: justify;
						color: $cTxtBlack;
						font-size: 18px;
						font-family: $font3;
						font-weight: 300;
						line-height: 2;

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

						@include respond-below(md) {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}

.box-11 {
	margin-top: -20px;
	margin-bottom: 150px;

	@include respond-below(mb) {
		margin-bottom: 100px;
	}

	._row {
		&-1 {
			._col {
				&-1 {
					ol {
						list-style: none;
						padding: 0;
						margin: 0;
						display: flex;
						flex-direction: row;
						gap: 32px;

						@include respond-below(md) {
							flex-wrap: wrap;
						}

						li {
							border-radius: 20px;
							background: #2e2d2c;
							display: flex;
							flex-direction: column;
							align-items: center;
							// justify-content: center;
							padding: 20px 10px 10px;
							box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25);

							width: calc(100% / 4);

							@include respond-below(md) {
								width: calc(100% / 2 - (32px - (32px / 2)));
							}

							img {
								width: 100%;
								max-width: fit-content;
								margin-bottom: 17px;
							}

							h3 {
								color: $cWhite;
								font-size: 18px;
								font-family: $font3;
								font-weight: 600;
								margin-bottom: 3px;
								text-transform: uppercase;

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

							p {
								color: $cWhite;
								font-size: 18px;
								font-family: $font3;
								font-weight: 300;
								text-transform: uppercase;
								text-align: center;

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

.box-12 {
	margin-bottom: 120px;

	._row {
		&-1 {
			display: flex;
			flex-direction: row;
			gap: 60px;

			@include respond-below(md) {
				flex-direction: column-reverse;
			}

			._col {
				&-1 {
					h3 {
						color: #1d1d1e;
						font-size: 20px;
						font-family: $font3;
						font-weight: 600;
						letter-spacing: 2px;
						margin-bottom: 15px;
						text-transform: uppercase;

						@include respond-above(md) {
							margin-right: 45px;
						}
						@include respond-below(md) {
							text-align: center;
						}
					}
					h2 {
						position: relative;
						color: #fff;
						font-size: 32px;
						font-family: $font3;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 2px;
						text-transform: uppercase;

						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 20px;
						padding: 18px 45px 14px;
						margin-bottom: 50px;
						width: fit-content;

						&::after {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							width: 100vw;

							background: #2e2d2c;
							border-radius: 100px;
						}

						span {
							position: relative;
							z-index: 1;
						}

						@include respond-below(md) {
							font-size: 26px;
							margin-right: auto;
						}
						@include respond-below(xs) {
							font-size: 20px;
							text-align: center;
							line-height: 1.2;
						}
					}

					.texts {
						p {
							font-size: 18px;
							font-weight: 300;
							font-family: $font3;
							line-height: 1;
						}
						ul {
							padding: 0;
							margin: 0;
							list-style: none;

							li {
								font-size: 18px;
								font-weight: 300;
								font-family: $font3;

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

								@include respond-below(md) {
									font-size: 16px;
								}

								strong {
									font-weight: 700;
								}
							}
						}
					}
				}
				&-2 {
					position: relative;
					z-index: 1;

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

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

						li {
							&:not(:last-child) {
								@include respond-above(md) {
									margin-bottom: 20px;
								}
							}
							@include respond-below(md) {
								width: calc(100% / 2 - (20px - (20px / 2)));
							}

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

.box-13 {
	margin-bottom: 100px;

	._row {
		&-1 {
			margin-bottom: 70px;

			._col {
				&-1 {
				}
			}
		}
		&-2 {
			display: flex;
			flex-direction: row;
			gap: 25px;

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

			._col {
				width: 50%;

				@include respond-below(xs) {
					width: 100%;
					text-align: center;
				}

				&-1 {
				}
				&-2 {
				}

				.preview_box {
					.preview_img {
						margin-bottom: 50px;

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

						img {
							width: 100%;
							max-width: fit-content;
							height: 400px;
							object-fit: cover;

							@include respond-below(md) {
								height: 240px;
							}
						}
					}
					.preview_data {
						h3 {
							color: $cTxtBlack;
							font-size: 24px;
							font-family: $font3;
							font-weight: 300;
							letter-spacing: 2px;
							text-transform: uppercase;

							position: relative;
							margin-bottom: 45px;
							padding-bottom: 45px;

							&::before {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 90%;
								height: 1px;
								background-color: #000000;

								@include respond-below(xs) {
									width: 50%;
									left: 50%;
									transform: translateX(-50%);
								}
							}

							@include respond-below(md) {
								font-size: 18px;
								margin-bottom: 35px;
								padding-bottom: 25px;
							}
						}

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

							li {
								&.mini {
									font-size: 16px;
									text-transform: uppercase;

									@include respond-below(md) {
										font-size: 15px;
									}
								}
								color: $cTxtBlack;
								font-size: 20px;
								font-family: $font3;
								font-weight: 300;

								@include respond-below(md) {
									font-size: 16px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-14 {
	margin-bottom: 150px;

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

	._row {
		&-1 {
			margin-bottom: 70px;
		}
		&-2 {
			._col {
				&-1 {
					ul {
						list-style: none;
						padding: 0;
						margin: 0;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						flex-wrap: wrap;
						column-gap: 60px;
						row-gap: 30px;

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

								@include respond-below(sm) {
									max-width: 50px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-15 {
	margin-bottom: 150px;

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

	._row {
		&-1 {
			._col {
				&-1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: -180px;
					position: relative;

					@include respond-below(lg) {
						margin-bottom: -90px;
					}
					@include respond-below(md) {
						margin-bottom: -30px;
					}

					.blur-text {
						text-align: center;
						padding: 64px 115px;
						border-radius: 100px;
						box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, 0.25);
						max-width: fit-content;
						backdrop-filter: blur(15px);

						@include respond-below(lg) {
							padding: 34px 55px;
						}

						h3 {
							color: $cTxtBlack;
							font-size: 43px;
							font-family: $font3;
							font-weight: 400;
							letter-spacing: 5px;
							line-height: 1;
							margin-bottom: 5px;
							text-transform: uppercase;

							@include respond-below(lg) {
								font-size: 33px;
							}
						}
						h4 {
							position: relative;
							display: inline-block;
							padding: 0 50px;

							color: $cTxtBlack;
							font-size: 27px;
							font-family: $font3;
							font-weight: 400;
							letter-spacing: 4px;
							line-height: 1;
							margin-bottom: 0;
							text-transform: uppercase;

							@include respond-below(lg) {
								font-size: 17px;
							}

							&::before,
							&::after {
								content: '';
								position: absolute;
								top: 50%;
								width: 34px;
								height: 1px;
								background: $cBlack;
								transform: translateY(-50%);
							}
							&::before {
								left: 0;
							}
							&::after {
								right: 0;
							}
						}
					}
				}
			}
		}
		&-2 {
			display: flex;
			flex-direction: row;
			column-gap: 110px;
			align-items: flex-end;

			@include respond-below(lg) {
				column-gap: 60px;
			}

			@include respond-below(md) {
				flex-direction: column;
				align-items: center;
				row-gap: 50px;
			}

			._col {
				&-1 {
					img {
						@include respond-below(lg) {
							max-width: 400px;
						}
					}
				}
				&-2 {
					@include respond-above(lg) {
						margin-bottom: 50px;
					}

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

					h3 {
						color: $cTxtBlack;
						font-size: 34px;
						font-family: $font3;
						font-weight: 300;
						letter-spacing: 2px;
						line-height: 1.4;
						margin-bottom: 40px;
						text-transform: uppercase;

						@include respond-below(lg) {
							font-size: 24px;
						}
					}
					p {
						color: $cTxtBlack;
						font-size: 16px;
						font-family: $font3;
						font-weight: 300;
						line-height: 1.4;
					}

					ul {
						list-style: none;
						padding: 0;
						margin: 40px 0 0 0;
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 14px;
						flex-wrap: wrap;

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

						li {
							&:nth-child(1) {
								a {
									color: #ffffff;
									background: #1d1d1e;
								}
							}
							&:nth-child(2) {
								a {
									color: #1d1d1e;
									background: #fff246;
								}
							}
							a {
								font-family: $font3;
								font-weight: 700;
								font-size: 14px;
								letter-spacing: 1px;
								padding: 20px 36px 16px;
								line-height: 1;
								text-transform: uppercase;

								display: flex;
								flex-direction: row;
								align-items: end;
								justify-content: center;
								gap: 10px;
							}
						}
					}
				}
			}
		}
	}
}

.box-16 {
	padding-top: 120px;
	border-top: 1px solid $cBlack;
	margin-bottom: 80px;

	@include respond-below(md) {
		padding-top: 100px;
	}

	._row {
		&-1 {
			._col {
				&-1 {
					h2 {
						color: $cTxtBlack;
						font-family: $font3;
						font-weight: 300;
						font-size: 34px;
						letter-spacing: 2px;
						margin-bottom: 40px;
						text-transform: uppercase;

						@include respond-below(xs) {
							font-size: 28px;
						}
					}
					p {
						color: $cTxtBlack;
						font-size: 20px;
						font-family: $font3;
						font-weight: 300;
						margin-bottom: 40px;

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

					a {
						color: $cTxtBlack;
						font-size: 14px;
						font-family: $font3;
						font-weight: 700;
						letter-spacing: 2px;
						text-transform: uppercase;
						text-decoration: underline;
					}
				}
			}
		}
	}
}

.box-17 {
	margin-bottom: 100px;

	._row {
		&-1 {
			margin-bottom: 10px;

			._col {
				&-1 {
				}
			}
		}
		&-2 {
			._col {
				&-1 {
					position: relative;
					padding-top: 30px;

					.feedback-slider {
						position: relative;
						padding-right: 15px;
						padding-bottom: 20px;

						.feedback-tile {
							padding: 47px 40px;
							border-top-left-radius: 50px;
							border-bottom-right-radius: 50px;
							background: $cWhite;
							box-shadow: 8px 8px 20px -5px rgba(0, 0, 0, 0.1);

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

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

								li {
									img {
										width: 24px;
										height: 24px;
										object-fit: contain;
									}
								}
							}

							p {
								color: #1d1d1e;
								font-size: 18px;
								font-family: $font3;
								font-weight: 300;
								line-height: 1.5;
								margin-bottom: 40px;
							}

							span.author {
								color: #1d1d1e;
								font-size: 14px;
								font-family: $font3;
								font-weight: 300;
								line-height: 1.5;
								letter-spacing: 19%;
								text-transform: uppercase;
							}
						}
					}

					.feedback-arrows {
						position: absolute;
						top: 0;
						right: 15px;
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 30px;

						> div {
							cursor: pointer;
						}

						.swiper-button-disabled {
							opacity: 0.5;
						}
					}
				}
			}
		}
	}
}