de.vidok.com/layout/style-scss/style.scss

// out: ../style-css/style.css, compress: true, sourceMap: true
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
@import 'variables';
@import '_mixins';

body {
	font-family: 'URW Form', sans-serif;

	p {
		letter-spacing: 0.05em;
		font-size: 16px;
	}
}

a {
	text-decoration: none;

	&:hover {
		text-decoration: none;
	}
}

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

	&.ul_1 {
		li {
			position: relative;
			padding-left: 25px;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 11px;
				width: 15px;
				height: 1px;
				background: $cDeepDark;
			}
		}
	}
}

// TODO: own container size
.container {
	// @include respond-above(xl) {
	// 	max-width: 1300px;
	// }
	// @media (min-width: 1620px) {
	// 	max-width: 1600px;
	// }
}

.head_txt_1 {
	font-weight: 700;
	font-size: 40px;
	line-height: 1.5;
	margin-bottom: 0;
}

.head_txt_2 {
	font-weight: 700;
	font-size: 36px;
	line-height: 1.5;
	margin-bottom: 0;
}

.head_txt_3 {
	font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	margin-bottom: 0;
}

.head_txt_4 {
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
	margin-bottom: 0;
}

.head_txt_5 {
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 0;
}

.body_txt {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 0;
}

.small_txt {
	font-weight: 300;
	font-size: 15px;
	line-height: 26px;
	margin-bottom: 0;
	letter-spacing: 0.05em;
}

.tiny_txt {
	font-weight: 400;
	font-size: 10.24px;
	line-height: 16px;
	margin-bottom: 0;
}

.btn1 {
	display: inline-block;
	color: $cWhite;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	padding: 12px 30px;
	background: $cDarkNight;
	transition: background 250ms ease-in-out, box-shadow 250ms ease-in-out,
		color 250ms ease-in-out;
	cursor: pointer;

	&:hover {
		color: $cWhite;
		background: linear-gradient(0deg, rgba($cBlack, 0.1), rgba($cBlack, 0.1)),
			$cDarkNight;
		box-shadow: 0px 3px 16px rgba($cBlack, 0.16);
	}

	&:active {
		box-shadow: none !important;
	}
}

.btn2 {
	display: inline-flex;
	align-items: center;
	column-gap: 15px;
	color: $cWhite;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	padding: 12px 30px;
	background: $cDarkNight;
	transition: background 250ms ease-in-out, box-shadow 250ms ease-in-out,
		color 250ms ease-in-out;
	cursor: pointer;

	&::after {
		content: url('/images/icons/fi_repeat_white.svg');
		line-height: 1;
	}

	&:hover {
		color: $cWhite;
		background: linear-gradient(0deg, rgba($cBlack, 0.1), rgba($cBlack, 0.1)),
			$cDarkNight;
		box-shadow: 0px 3px 16px rgba($cBlack, 0.16);
	}

	&:active {
		box-shadow: none !important;
	}
}

.btn3 {
	display: inline-block;
	color: $cTxtDark;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	padding: 10px 30px;
	background: $cWhite;
	border: 2px solid $cYellow;
	transition: background 250ms ease-in-out, box-shadow 250ms ease-in-out,
		border-color 250ms ease-in-out, color 250ms ease-in-out;
	cursor: pointer;

	&:hover {
		color: $cWhite;
		background: linear-gradient(0deg, rgba($cBlack, 0.1), rgba($cBlack, 0.1)),
			$cDarkNight;
		box-shadow: 0px 3px 16px rgba($cBlack, 0.16);
		border-color: $cDarkNight;
	}

	&:active {
		box-shadow: none !important;
	}
}

.btn4 {
	display: inline-flex;
	align-items: center;
	column-gap: 15px;
	color: $cTxtDark;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	padding: 10px 30px;
	background: $cWhite;
	border: 2px solid $cYellow;
	transition: background 250ms ease-in-out, box-shadow 250ms ease-in-out,
		border-color 250ms ease-in-out, color 250ms ease-in-out;
	cursor: pointer;

	&::after {
		content: url('/images/icons/fi_repeat_black.svg');
		line-height: 1;
	}

	&:hover {
		color: $cWhite;
		background: linear-gradient(0deg, rgba($cBlack, 0.1), rgba($cBlack, 0.1)),
			$cDarkNight;
		box-shadow: 0px 3px 16px rgba($cBlack, 0.16);
		border-color: $cDarkNight;

		&::after {
			content: url('/images/icons/fi_repeat_white.svg');
		}
	}

	&:active {
		box-shadow: none !important;
	}
}

.btn5 {
	display: inline-block;
	color: $cTxtDark;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	padding: 6px;
	background: $cWhite;
	cursor: pointer;

	&:hover {
		color: $cTxtDark;
	}
}

.btn6 {
	display: inline-flex;
	align-items: center;
	column-gap: 15px;
	color: $cTxtDark;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	padding: 6px;
	background: $cWhite;
	cursor: pointer;

	&::after {
		content: url('/images/icons/fi_repeat_black.svg');
		line-height: 1;
	}

	&:hover {
		color: $cTxtDark;
	}
}

.btn7 {
	@extend .body_txt;
	display: inline-flex;
	align-items: center;
	column-gap: 15px;
	color: $cTxtDark;
	padding: 6px;
	background: $cWhite;
	transition: all 250ms ease;
	cursor: pointer;

	&::after {
		content: '';
		background-image: url('/upload/filemanager/Icons/arrow_right_black.svg');
		background-size: 19px;
		display: inline-block;
		width: 19px;
		height: 19px;
		line-height: 0;
	}

	&:hover {
		color: $cTxtDark;
		column-gap: 30px;
	}
}

.btn8 {
	@extend .body_txt;
	display: block;
	padding: 16px 90px;
	color: $cTxtDark;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	width: fit-content;
	border: 1px solid $cBlack;
	background: $cWhite;
	transition: color 250ms ease, background 250ms ease;

	cursor: pointer;

	&:hover {
		color: $cTxtWhite !important;
		background: $cBlack !important;
	}
}

.gap_mini {
	padding-top: 60px !important;
	padding-bottom: 60px !important;

	&_top {
		padding-top: 60px !important;
	}

	&_bottom {
		padding-bottom: 60px !important;
	}

	@include respond-below(md) {
		padding-top: 30px;
		padding-bottom: 30px;

		&_top {
			padding-top: 30px;
		}

		&_bottom {
			padding-bottom: 30px;
		}
	}
}

.gap_big {
	padding-top: 100px !important;
	padding-bottom: 100px !important;

	&_top {
		padding-top: 100px !important;
	}

	&_bottom {
		padding-bottom: 100px !important;
	}

	@include respond-below(md) {
		padding-top: 50px;
		padding-bottom: 50px;

		&_top {
			padding-top: 50px;
		}

		&_bottom {
			padding-bottom: 50px;
		}
	}
}

.vertical_nav_list {
	li {
		padding: 17px 0 13px 10px;
		border-bottom: 1px solid #000;

		a {
			color: $cTxtDark;
			font-weight: 400;
			font-size: 16px;
			line-height: 23px;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 15px;
			transition: gap 250ms ease-in-out;
			text-transform: uppercase;
			pointer-events: none;

			&::after {
				content: url('/upload/filemanager/Icons/arrow_right_black.svg');
				display: inline-block;
				line-height: 0;
				display: none;
			}

			&:hover {
				gap: 30px;
			}
		}
	}
}

.checkbox {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	border: 1px solid $cBlack;
	border-radius: 1px;
	cursor: pointer;

	&::before {
		content: url('/upload/filemanager/Icons/check_box.svg');
		line-height: 0;
		visibility: hidden;
		opacity: 0;
		transition: all 150ms ease;
	}

	&:checked {
		&::before {
			visibility: visible;
			opacity: 1;
		}
	}
}

#breadcrumbs {
	display: flex;
	flex-direction: row;
	gap: 30px;

	li {
		position: relative;
		@extend .small_txt;

		&:not(:last-child) {
			&::after {
				content: '>';
				position: absolute;
				right: -15px;
				top: 0;
				bottom: 0;
				transform: translateX(50%);
			}
		}

		a {
			@extend .small_txt;
			color: $cTxtBlack;
		}
	}

	@include respond-below(sm) {
		li {
			a {
				font-size: 12px;
				line-height: 20px;
			}
		}
	}
}

.box_padding {
	padding: 20px;
}

#main-menu-btn {
	height: 70px;
	width: 70px;
	position: fixed;
	top: 10px;
	right: 10px;
	color: #fff;
	background: #000;
	display: none;
	z-index: 99999;
	line-height: 50px;
	text-align: center;
	font-size: 35px;
	cursor: pointer;
	@include border-radius(50%);

	@include respond-below(lg) {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

//* ~~~~ Component ~~~~ *//
header {
	position: sticky;
	top: 0;
	background: $cWhite;
	z-index: 998;
	transition: box-shadow 150ms linear;

	&.fixed {
		box-shadow: 0px 0px 30px rgba($cBlack, 0.06);
	}

	.container {
		@media (min-width: 1620px) {
			max-width: 1140px;
		}

		@media (min-width: 1360px) {
			max-width: 1140px;
		}

		@media (min-width: 1200px) {
			max-width: 1140px;
		}
	}

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

		@include respond-below(sm) {
			flex-direction: column;
			gap: 10px;
		}

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

		//TODO: Not mine. Need fix
		#main-menu {
			@include respond-below(xs) {
				height: 100%;
				width: 100%;
				position: fixed;
				z-index: 10;
				background: #fff;
				display: none;

				&.visible {
					@include flexbox;
				}
			}

			div[id^='menu-container-'] {
				@include respond-below(xs) {
					width: 100%;
					@include flexbox;
					@include align-items(center);
					@include justify-content(center);
				}

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

					@include respond-above(xs) {
						@include flexbox;
						align-items: center;
						gap: 24px;
					}

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

					li {
						position: relative;

						&.parent {
							> a {
								@include respond-above(xs) {
									pointer-events: none;
								}
							}

							a {
								img {
									margin-left: 7px;
								}
							}

							ul {
								width: max-content;
								padding: 20px;
								background: $cWhite;
								box-shadow: 0px 0px 5px rgba($cBlack, 0.25);

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

						&#link-9 {
							a {
								@extend .btn1;
							}
						}

						a {
							color: $cTxtBlack;
							font-weight: 400;
							font-size: 0.9375rem !important;
							line-height: 32px;
						}

						ul {
							position: absolute;
							display: none;

							@include respond-below(xs) {
								position: static;
							}
						}

						@include respond-above(xs) {
							&:hover {
								ul {
									display: block;
								}
							}
						}

						&.active {
							ul {
								display: block;
							}
						}
					}
				}
			}
		}

		.header_left {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px 45px;
			background-color: $cBlack;

			@include respond-below(xl) {
				width: fit-content;
				margin-right: auto;
			}

			@include respond-between(md, lg) {
				padding: 20px;
			}

			a {
				display: block;
				position: relative;
				z-index: 10;
				max-width: 194px;

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

				img {
					width: 100%;
					max-width: 150px;
				}
			}
		}

		.header_right {
			padding: 20px 0;
			display: grid;
			grid-template-areas:
				'header_right_top header_big_btn header_social_icons'
				'header_right_bottom header_big_btn header_social_icons';
			align-items: center;
			column-gap: 25px;

			@include respond-below(md) {
				flex: 1;
				grid-template-areas:
					'header_right_top header_big_btn'
					'header_right_bottom header_social_icons';
				grid-template-columns: 1fr auto;
				padding: 15px 0;
			}

			@include respond-below(sm) {
				grid-template-areas:
					'header_right_top header_big_btn header_social_icons'
					'header_right_bottom header_big_btn header_social_icons';
				column-gap: 15px;
			}

			.header_right_top {
				grid-area: header_right_top;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				column-gap: 32px;

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

				@include respond-below(sm) {
					display: flex;
					flex-wrap: wrap;

					> * {
						width: 100%;
						margin-bottom: 5px !important;
					}
				}

				p {
					color: $cTxtBlack;
					font-size: 13px;
					margin-bottom: 0;
				}

				a {
					color: $cTxtBlack;
					font-weight: 400;
					font-size: 0.8rem;
					line-height: 20px;
					display: flex;
					align-items: center;
					column-gap: 5px;
				}
			}

			.header_right_bottom {
				grid-area: header_right_bottom;
				padding-top: 10px;
				margin-top: 10px;
				border-top: 0.5px solid $cGray;

				@include respond-below(sm) {
					// display: none;

					padding-top: 0px;
					margin-top: 0px;
					border-top: none;
				}
			}

			.header_social_icons {
				grid-area: header_social_icons;

				display: inline-flex;
				flex-direction: column;
				align-items: center;
				column-gap: 14px;

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

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

				// @include respond-below(xs) {
				// 	display: none !important;
				// }
			}

			.header_big_btn {
				grid-area: header_big_btn;

				a {
					display: inline-block;
					font-weight: 400;
					font-size: 13px;
					line-height: 20px;
					text-align: center;
					letter-spacing: 0.07em;
					text-transform: uppercase;
					color: $cTxtBlack;
					padding: 8px 15px;
					background: $cWhite;
					border: 1px solid $cBlack;
					transition: color 250ms ease, background 250ms ease;
					cursor: pointer;

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

		#advance_menu {
			@include respond-below(lg) {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #fff;
				z-index: 9999;
				display: none;
				align-items: center;
				justify-content: center;

				&.visible {
					display: flex;
				}
			}

			.static_height {
				height: 230px;
			}

			ul {
				background: $cWhite;

				@include respond-above(lg) {
					&:not(.lvl_1) {
						li {
							&.parent {
								&:hover {
									> a {
										&::before {
											width: calc(100% - 23px);
										}
									}
								}

								> a {
									&::after {
										content: url('/upload/filemanager/Icons/mini_arrow_bottom_new.svg');
										display: inline-block;
										margin-left: 7px;
										transition: all 250ms ease;
									}
								}
							}
						}
					}
				}

				@include respond-below(lg) {
					li {
						&.parent {
							> a {
								display: flex;
								flex-direction: row;
								justify-content: space-between;

								&::after {
									content: url('/upload/filemanager/Icons/mini_arrow_bottom_new.svg');
									transform: rotate(-90deg);
									margin-left: 7px;
									transition: all 250ms ease;
								}

								&:hover {
									&::after {
										transform: rotate(0deg);
									}
								}
							}
						}
					}
				}

				li {
					&.parent {
						> a {
							width: fit-content;

							@include respond-above(lg) {
								padding-bottom: 5px;
							}
						}
					}

					&:hover {
						> a {
							&::before {
								width: 100%;
							}
						}
					}

					@include respond-below(lg) {
						&::after {
							content: '';
							position: absolute;
							bottom: -15px;
							left: 0;
							right: 0;
							height: 1px;
							background: $cGray;
						}
					}

					a {
						position: relative;
						color: $cTxtBlack;
						font-weight: 400;
						font-size: 13px;
						width: fit-content;

						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 0;
							height: 1px;
							background: rgba(0, 0, 0, 0.15);
							transition: all 250ms ease;
						}

						&.no-click {
							@include respond-above(lg) {
								pointer-events: none;
							}
						}

						@include respond-below(lg) {
							font-size: 16px;
							display: block;
							width: 100% !important;

							&::before {
								display: none;
							}
						}
					}
				}
			}

			ul.lvl_1 {
				display: flex;
				align-items: center;
				gap: 30px;

				@include respond-between(md, lg) {
					gap: 30px;
				}

				@include respond-below(lg) {
					flex-wrap: wrap;
					gap: 30px;

					width: 100%;
					max-width: 400px;
					padding-left: 15px;
					padding-right: 15px;
				}

				> li {
					position: relative;

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

					&.parent {
						&:hover {
							ul.lvl_2 {
								opacity: 1;
								visibility: visible;
							}
						}

						@include respond-below(lg) {
							&.active {
								ul.lvl_2 {
									display: block;
									opacity: 1;
									visibility: visible;
									width: 100%;
									box-shadow: none;
									background: #f4f4f4;
									height: auto !important;
									padding: 10px 20px;
									margin-top: 10px;

									@include respond-below(lg) {
										padding: 0 0 0 20px;
										background: $cWhite;
									}

									li {
										a {
											margin-left: auto;
											margin-right: auto;
										}
									}

									* {
										color: $cTxtBlack;
									}
								}
							}
						}
					}

					ul.lvl_2 {
						position: absolute;
						left: 0;
						width: max-content;
						opacity: 0;
						visibility: hidden;
						transition: visibility 250ms ease, opacity 250ms ease;
						padding: 20px;
						box-shadow: 0px 0px 30px rgba($cBlack, 0.06);

						@include respond-below(lg) {
							position: static;
							display: none;
						}

						> li {
							@include respond-above(lg) {
								&:hover {
									> a {
										&::after {
											transform: rotate(-90deg);
										}
									}

									ul.lvl_3 {
										opacity: 1;
										visibility: visible;
										transition-delay: 200ms;
									}

									.category_img {
										opacity: 1;
										visibility: visible;
										transition-delay: 200ms;
										display: flex;
										align-items: center;
										justify-content: center;
									}
								}
							}

							@include respond-below(lg) {
								&.active {
									ul.lvl_3 {
										display: block;
										visibility: visible;
										opacity: 1;
										position: static;
										width: 100%;
										background: transparent;
										height: auto;
										padding-top: 0;
										box-shadow: none;
										padding: 10px 0 0 0;

										* {
											color: $cTxtBlack;
										}
									}
								}
							}

							> a {
								padding: 5px 0;
							}

							a {
								font-size: 14px;
							}

							ul.lvl_3 {
								position: absolute;
								left: calc(100% - 20px);
								top: 0;
								bottom: 0;
								padding: 20px;
								width: max-content;
								transition: visibility 250ms ease, opacity 250ms ease;
								opacity: 0;
								visibility: hidden;
								width: 160px;
								box-shadow: 30px 0px 30px rgba($cBlack, 0.06);
								min-height: 100%;
								height: fit-content;

								@include respond-below(lg) {
									transition: none;
								}

								li {
									padding: 0px 10px;

									a {
										padding-bottom: 5px;
									}
								}
							}

							.category_img {
								position: absolute;
								left: calc(100% + 150px - 10px);
								top: 0;
								// background: $cWhite;
								padding: 20px;
								opacity: 0;
								visibility: hidden;
								transition: visibility 250ms ease, opacity 250ms ease;
								// box-shadow: 26px 0px 30px rgba($cBlack, 0.04);

								&::before {
									content: '';
									position: absolute;
									top: 0;
									left: 0;
									width: 50%;
									height: 100%;
									background: $cWhite;
								}

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

#partners_slider {
	.splide__slide {
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			filter: grayscale(100%);
			max-height: 60px;
			@include transition;

			&:hover {
				filter: grayscale(0%);
			}
		}
	}
}

#contact_form {
	button {
		border: 0;
	}

	._row-1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 22px;
		margin-bottom: 12px;

		> div {
			display: flex;
			flex-direction: column;
			gap: 17px;
		}
	}

	._row-2 {
		display: flex;
		flex-direction: column;
		align-items: end;

		.form_group_2 {
			display: flex;
			flex-direction: row;
			gap: 12px;

			label {
				color: $cTxtBlack;
				font-weight: 300;
				font-size: 9px;
				line-height: 15px;
				margin-bottom: 0;
			}
		}

		.btn1 {
			margin-bottom: 0;
			margin-top: 15px;
		}
	}

	.agreement {
		margin-top: 25px;
		margin-bottom: 25px;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		font-size: 11px;
		column-gap: 15px;

		.form_group_2 {
			width: calc(100% - 135px);
		}

		.btn1 {
			margin-top: 0;
			font-weight: 700;
			font-size: 18px;
			line-height: 22px;
			text-transform: uppercase;
			background: $cBlack;
		}

		@include respond-below(sm) {
			flex-direction: column;
			align-items: flex-start;
			row-gap: 20px;

			.form_group_2 {
				width: 100%;
			}

			.btn1 {
				width: 100%;
				margin-left: auto;
				max-width: fit-content;
			}
		}
	}

	.form_group {
		position: relative;
		display: flex;
		flex-direction: column;
		border: 1px solid $cBlack;

		textarea {
			border: 0;
			height: 100px;
			padding: 13px;
			resize: none;

			&::placeholder {
				color: $cTxtCloud;
				font-weight: 400;
				font-size: 12.8px;
				line-height: 20px;
			}
		}

		label {
			position: absolute;
			top: 0;
			margin-bottom: 0;
			transform: translateY(-50%);
			padding: 0 10px;
			margin: 0 10px;
			width: fit-content;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background: $cWhite;
				z-index: -1;
			}
		}

		input {
			border: none;
			padding: 13px;

			&::placeholder {
				color: $cTxtCloud;
				font-weight: 400;
				font-size: 12.8px;
				line-height: 20px;
			}

			&:focus {
				outline: none;
			}
		}
	}

	@include respond-below(sm) {
		.form_group {
			label {
				font-size: 11px;
			}
		}
	}

	@include respond-below(xs) {
		._row-1 {
			grid-template-columns: 1fr;
			gap: 20px;
		}
	}
}

#special_for_you {
	.special_for_you__wrapper {
		position: relative;

		._row_1 {
			position: absolute;

			._row_1_text {
				width: 100%;
				max-width: 420px;

				.head_txt_2 {
					margin-bottom: 30px;
				}
			}
		}

		._row_2 {
			width: 100%;
			margin-left: auto;

			.special_for_you_slider {
				.swiper-wrapper {
					.swiper-slide {
						position: relative;
						width: 100%;
						max-width: 440px;

						.slide_data {
							position: absolute;
							left: 0;
							bottom: 0;
							padding: 20px;
							color: $cTxtWhite;
						}
					}
				}
			}
		}
	}

	@include respond-above(md) {
		.special_for_you__wrapper {
			._row_2 {
				max-width: calc(60% - 110px);
				margin: 0 0 0 auto;
				padding: 0;
			}
		}
	}

	@include respond-below(md) {
		.special_for_you__wrapper {
			._row_1 {
				position: relative;

				._row_1_text {
					max-width: 100%;
				}
			}

			._row_2 {
				margin-top: 50px;
			}
		}
	}
}

#see_our_catalog {
	.see_our_catalog__wrapper {
		.catalog_tiles {
			display: grid;
			grid-template-columns: 614px 1fr;
			gap: 30px;

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

				&__img {
					position: relative;
					height: 590px;

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

					.tile__data {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 122px;

						&::before {
							content: '';
							position: absolute;
							inset: 0;
							background: rgba(58, 58, 58, 0.95);
							mix-blend-mode: multiply;
						}

						h3 {
							position: relative;
							color: $cTxtWhite;
							font-weight: 300;
							font-size: 30px;
							line-height: 36px;
							letter-spacing: 0.07em;
							text-transform: uppercase;
							margin-bottom: 0;
						}

						p {
							position: relative;
							color: $cTxtWhite;
							font-weight: 700;
							font-size: 20px;
							line-height: 32px;
							letter-spacing: 0.05em;
							text-transform: uppercase;
							margin-bottom: 0;
						}
					}
				}

				.btn8 {
					font-weight: 300;
					font-size: 30px;
					letter-spacing: 0.05em;
					line-height: 1;
					width: auto;
					text-align: center;
					padding: 20px;
					text-transform: uppercase;
				}
			}
		}

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

		@include respond-below(lg) {
			.catalog_tiles {
				.tile__img {
					height: 400px;

					.tile__data {
						height: 100px;

						h3 {
							font-size: 22px;
						}

						p {
							font-size: 16px;
						}
					}
				}
			}
		}

		@include respond-below(md) {
			.catalog_tiles {
				.tile__img {
					height: 300px;

					.tile__data {
						height: 80px;

						h3 {
							font-size: 18px;
						}
					}
				}

				.tile {
					.btn8 {
						font-size: 22px;
						padding: 15px 20px;
					}
				}
			}
		}

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

#realizations_box {
	.container {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			bottom: -50px;
			left: 50%;
			right: 0;
			height: 100px;
			background: $cBlack;
			max-width: 1053px;
			transform: translateX(-50%);
			width: 100%;
		}
	}

	.realization_tiles {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: repeat(2, 300px);
		grid-template-areas:
			'tile1 tile2 tile2'
			'tile3 tile4 tile5';
		gap: 30px;

		.tile {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 30px;
			background-color: $cGray;
			color: $cTxtWhite;

			img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				filter: brightness(0.7);
			}

			> * {
				&:not(img) {
					position: relative;
					z-index: 1;
				}
			}

			&_1 {
				grid-area: tile1;
			}

			&_2 {
				grid-area: tile2;
			}

			&_3 {
				grid-area: tile3;
			}

			&_4 {
				grid-area: tile4;
			}

			&_5 {
				grid-area: tile5;
				color: $cTxtBlack;

				p {
					font-weight: 400;
				}
			}
		}
	}

	@include respond-below(md) {
		.realization_tiles {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: repeat(3, 300px);
			grid-template-areas:
				'tile1 tile3'
				'tile2 tile2'
				'tile4 tile5';
		}
	}

	@include respond-below(xs) {
		.realization_tiles {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(5, 300px);
			grid-template-areas:
				'tile1'
				'tile2'
				'tile3'
				'tile4'
				'tile5';
		}
	}
}

#contact_box {
	h2 {
		color: $cTxtBlack;
		font-family: 'Lato', sans-serif;
		font-weight: 300;
		font-size: 25px;
		line-height: 2;
		margin-bottom: 130px;

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

	.left_col {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 40px;
		padding-top: 230px;

		.contact-data {
			display: flex;
			flex-direction: column;
			row-gap: 10px;

			a {
				color: $cTxtBlack;
				font-weight: 400;
				font-size: 18px;
				line-height: 20px;

				img {
					margin-right: 7px;
				}
			}
		}

		.contact_auth {
			display: flex;
			flex-direction: row;
			gap: 50px;

			@include respond-below(xs) {
				gap: 25px;
			}

			&__data {
				display: flex;
				flex-direction: column;
				gap: 10px;
				justify-content: center;

				.head_txt_4 {
					font-size: 40px;
					line-height: 1.25;
				}

				.body_txt {
					margin-bottom: 30px;
					font-size: 22px;
				}

				a {
					color: $cTxtBlack;
				}

				@include respond-below(xs) {
					.head_txt_4 {
						font-size: 24px;
					}
				}
			}

			&__img {
				@media (max-width: 1360px) {
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						max-width: 154px;
					}
				}

				@include respond-below(xs) {
					img {
						max-width: 110px;
					}
				}
			}
		}
	}

	@include respond-below(lg) {
		.left_col {
			flex-direction: column;
			margin-bottom: 50px;

			.contact_auth__data {
				width: max-content;
			}
		}
	}

	@include respond-below(md) {
		.left_col {
			flex-direction: column;
			align-items: center;
		}
	}
}

footer {
	.footer__wrapper {
		background: $cBlack;
		color: #fff;

		.footer_top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// padding-bottom: 35px;
			padding-top: 35px;

			.box_left {
				display: flex;
				justify-content: center;
				flex-direction: column;
				font-size: 14px;

				p {
					font-weight: 400;
					line-height: 22px;

					font-size: 14px;
					letter-spacing: 0.01em;
					margin-bottom: 0;
				}

				img {
					max-width: 194px;
					margin-bottom: 65px;
				}

				@include respond-below(md) {
					display: none;
				}
			}

			.box_centr {
				p {
					strong {
						font-size: 14px;
						letter-spacing: 0.1em;
					}
				}

				ul {
					display: grid;
					grid-template-columns: 1fr 1fr;

					li {
						margin-bottom: 15px;

						a {
							color: #fff;
							font-size: 14px;
							letter-spacing: 0.01em;
						}
					}
				}
			}

			.box_right {
				p {
					strong {
						font-size: 14px;
						letter-spacing: 0.1em;
					}
				}

				ul {
					li {
						margin-bottom: 15px;

						a {
							color: #fff;
							font-size: 14px;
							letter-spacing: 0.01em;
						}
					}
				}

				.social_box {
					display: flex;
					flex-direction: row;
					gap: 20px;
				}
			}
		}

		.footer_bottom {
			display: flex;
			flex-direction: column-reverse;
			justify-content: space-between;
			padding-top: 25px;
			padding-bottom: 40px;
			row-gap: 20px;

			.box_left {
				p {
					font-size: 14px;
					letter-spacing: 0.01em;
				}
			}

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

				.box_left {
					width: 100%;
					order: 2;
					text-align: center;
					margin-top: 25px;
				}

				.box_right {
					order: 1;
					text-align: center;

					.level-0 {
						justify-content: center;

						a {
							font-size: 14px !important;
						}
					}
				}
			}

			.box_right {
				margin-top: -2px;

				.level-0 {
					display: flex;
					flex-direction: row;
					gap: 40px;

					li {
						position: relative;

						&:not(:last-child) {
							&::before {
								content: '';
								position: absolute;
								right: -20px;
								top: 0;
								bottom: 0;
								width: 1px;
								background: #fff;
							}
						}

						a {
							color: #fff;
							font-size: 14px;
							letter-spacing: 0.01em;
							text-transform: uppercase;
							font-weight: 400;
						}
					}
				}
			}
		}

		@include respond-below(sm) {
			.footer_top {
				flex-direction: column;
				align-items: center;
				gap: 30px;

				.box_left {
					text-align: center;
				}

				.box_centr {
					text-align: center;

					ul {
						column-gap: 30px;
						row-gap: 10px;
					}
				}

				.box_right {
					text-align: center;
				}
			}

			.footer_bottom {
				flex-direction: column-reverse;

				.box_right {
					padding-bottom: 25px;
					margin-bottom: 25px;
					border-bottom: 1px solid $cBlack;

					.level-0 {
						flex-direction: column;
						gap: 10px;

						li {
							text-align: center;

							&:not(:last-child) {
								&::before {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

#box-scrolling-page {
	position: fixed;
	right: 20px;
	bottom: 50px;
	z-index: 999;

	ul {
		li {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 54px;
			height: 54px;
			border: 1px solid #dadada;
			background: $cWhite;

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

			img {
			}

			&#scroll-anchor {
				display: none;
				cursor: pointer;
			}
		}
	}
}

//* ~~~~ Pages ~~~~ *//
//* home page
#page-1 {
	.box-1 {
		background: #f4f4f4;

		.home_slider {
			width: 100%;
			max-width: 1920px;
			margin-left: auto;
			margin-right: auto;

			.swiper-slide {
				overflow: hidden;

				&:nth-child(1) {
					.slide-data {
						grid-template-columns: 1fr !important;
					}

					.slide-data-left {
						display: none;
					}
					.slide-data-right {
						&::before {
							display: none;
						}

						img {
							object-position: left;
						}
					}

					.slide-data {
						display: grid;
						grid-template-columns: 537px 1fr;
					}
				}

				&:nth-child(2) {
					.slide-data-right {
						&::before {
							display: none;
						}

						img {
							object-position: left;
						}
					}
				}

				&:nth-child(4) {
					.slide-data-right {
						&::before {
							display: none;
						}

						img {
							object-position: right;
						}
					}
				}

				.container-fluid {
					padding: 0;
				}

				.slide-data {
					display: grid;
					grid-template-columns: 577px 1fr;
					align-items: center;
					min-height: 500px;

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

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

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

					@media (min-width: 1900px) {
						grid-template-columns: 645px 1fr;
					}

					&-left {
						padding: 40px;

						@include respond-below(sm) {
							display: none;
						}

						&-texts {
							.title {
								font-weight: 300;
								font-size: 30px;
								line-height: 1.3;
								text-align: right;
								letter-spacing: 0.15em;
								text-transform: uppercase;
								margin-bottom: 22px;
								padding-bottom: 22px;
								width: fit-content;
								margin-left: auto;
								border-bottom: 1px solid $cBlack;

								@include respond-below(sm) {
									margin-left: 0;
									text-align: center;
									width: 100%;
								}

								span {
									font-size: 20px;
								}
							}

							.text {
								font-weight: 300;
								font-size: 22px;
								line-height: 1.5;
								text-align: right;
								letter-spacing: 0.05em;
								margin-bottom: 0;

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

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

					&-right {
						position: relative;
						height: 100%;

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

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							width: 150px;
							background: rgba(244, 244, 244, 0.6);
							z-index: 1;

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

							@include respond-below(sm) {
								display: none;
							}
						}

						img {
							position: absolute;
							inset: 0;
							height: 100%;
							width: 100%;
							object-fit: cover;
						}
					}

					&-4 {
						grid-template-columns: 1fr;
					}
				}

				&.slide-geolan {
					.slide-data {
						background: $cWhite;

						.slide-data-left {
							&-texts {
								.title {
									display: block;
									margin-bottom: 0;
									padding-bottom: 0;
									border-bottom: none;
									text-transform: initial;
									letter-spacing: 0;
									font-size: 42px;
									color: #212529;

									strong {
										color: #395ba6;
									}

									span {
										font-size: 36px;
									}
								}
							}
						}

						.slide-data-right {
							&::before {
								display: none;
							}

							img {
								object-position: right;
							}
						}
					}
				}
			}

			.swiper-pagination {
				position: absolute;
				right: 50px;
				bottom: 50px;
				width: auto;
				display: flex;
				justify-content: flex-end;
				gap: 30px;

				.swiper-pagination-bullet {
					color: #fff;
					background: transparent !important;
					position: relative;
					display: block;
					height: 30px;
					width: 30px;
					opacity: 1 !important;

					&::before {
						display: block;
						height: 30px;
						width: 30px;
						position: absolute;
						top: 0;
						left: 0;
						font-size: 22px;
					}

					&:first-child::before {
						content: '01';
					}

					&:nth-child(2)::before {
						content: '02';
					}

					&:nth-child(3)::before {
						content: '03';
					}

					&:nth-child(4)::before {
						content: '04';
					}

					&:nth-child(5)::before {
						content: '05';
					}

					&:nth-child(6)::before {
						content: '06';
					}

					&.swiper-pagination-bullet-active {
						margin-right: 70px;
						position: relative;

						&::after {
							content: '';
							display: block;
							height: 1px;
							width: 50px;
							background: #fff;
							position: absolute;
							top: 50%;
							right: -75px;
						}

						&:last-child {
							margin-right: 0 !important;
						}

						&:nth-child(4) {
							margin-left: 70px;
							// margin-right: 4px;

							&::after {
								// display: none;
								right: auto;
								left: -80px;
							}
						}
					}
				}
			}
		}
	}

	.box-2 {
		padding: 30px 0;

		@include respond-below(sm) {
			padding: 25px 0 !important;
		}

		#scontainer-2 {
			.scontainer-content {
				text-align: center;

				ul {
					list-style-type: none;
					display: grid;
					grid-template-columns: repeat(5, 1fr);

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

					li {
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-end;
						gap: 20px;
						padding: 0px 5px;
						text-transform: uppercase;
						color: #000;
						@include transition;

						&:not(:last-child) {
							border-right: 1px solid $cBlack;

							@include respond-below(sm) {
								border: 0;
							}
						}

						p {
							font-weight: 400;
							font-size: 13px;
							line-height: 1.1;
							letter-spacing: 0.07em;
							text-transform: uppercase;
							color: $cTxtBlack;
							margin-bottom: 0;
						}
					}
				}
			}
		}

		@include respond-below(lg) {
			#scontainer-2 {
				.scontainer-content {
					grid-template-columns: repeat(2, 1fr);
				}
			}
		}

		@include respond-below(sm) {
			#scontainer-2 {
				.scontainer-content {
					grid-template-columns: 1fr;
				}
			}
		}
	}

	.box-4 {
		#scontainer-3 {
			.row {
				align-items: center;

				> .col-lg-6 {
					height: 100%;
					min-height: 308px;
					position: relative;

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

				.box-head {
					padding: 0 50px;

					@include respond-below(sm) {
						padding-top: 25px;
					}

					p {
						font-weight: 300;
						font-size: 20px;
						line-height: 24px;
						letter-spacing: 0.07em;
						text-transform: uppercase;

						strong {
						}
					}
				}

				h3 {
					margin-bottom: 20px;
					font-weight: 400;
					font-size: 25px;
					line-height: 30px;
					letter-spacing: 0.07em;
					text-transform: uppercase;

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

				.body_txt {
					margin-bottom: 10px;
				}

				&_box_1 {
					max-width: 800px;
					margin-left: auto;
					margin-right: auto;
				}

				&_box_2 {
					.col-lg-6 {
						img {
							height: 100%;
							width: 100%;
							object-fit: cover;
							min-height: 308px;
						}
					}

					> div {
						position: relative;

						.tile {
							position: absolute;
							top: 0;
							background: rgba($cWhite, 0.9);
							padding: 30px;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;

							&_1_data {
								display: flex;
								flex-direction: column;
								justify-content: center;
								right: 15px;
							}

							&_2_data {
								left: 15px;
							}

							.vertical_nav_list {
								border-top: none;
								margin-top: 0;

								li {
									padding: 10px 0 7px;
								}
							}
						}
					}
				}

				&_box_3 {
					max-width: 800px;
					margin-left: auto;
					margin-right: auto;
				}

				&.row_box_4 {
					margin-top: 20px;
					position: relative;
					padding: 0 15px;

					.vertical_nav_list {
						li {
							border-top: 1px solid #000;
							border-bottom: 0;
							padding-left: 0;
						}
					}

					.box_padding {
						max-width: 370px;
						padding-top: 50px;

						@include respond-above(md) {
							position: absolute;
							right: 170px;
							top: 0;
							height: 100%;
							background: rgba(244, 244, 244, 0.9);
							padding: 0 20px;
							width: calc(50% - 15px);
							display: flex;
							justify-content: center;
							flex-direction: column;
						}
					}
				}
			}
		}

		#scontainer-119 {
			margin-bottom: 50px;

			p {
				font-weight: 300;
				font-size: 20px;
				line-height: 24px;
				letter-spacing: 0.07em;
				text-transform: uppercase;
				text-align: center;
				margin-bottom: 0;

				strong {
					font-weight: 700;
				}
			}
		}

		@include respond-below(xl) {
			#scontainer-3 {
				.row {
					img {
						min-height: 320px;
						object-fit: cover;
					}
				}
			}
		}

		@include respond-below(md) {
			#scontainer-3 {
				.row {
					&.row_box_2 {
						> div {
							img {
								display: block;
								margin-left: auto;
								margin-right: auto;
							}

							.tile {
								position: relative;
								padding: 50px;
								right: 0;
								left: 0;
							}
						}
					}
				}
			}
		}
	}

	.box-5 {
		background: #000000;
		padding-top: 50px;
		padding-bottom: 50px;
		margin-top: 150px;
		color: #fff;
		position: relative;
		overflow: hidden;

		p {
			margin-bottom: 0;
		}

		&::after {
			content: '';
			height: 68px;
			background: url('/upload/filemanager/strona-glowna/3-lines.png');
			width: 434px;
			position: absolute;
			top: 50%;
			right: -150px;
			transform: translateY(-50%);

			@media (max-width: 1500px) {
				right: -300px;
			}

			@media (max-width: 1250px) {
				right: -405px;
			}

			@include respond-below(xs) {
				display: none;
			}
		}

		#scontainer-4 {
			.row {
				> .col-lg-6:last-child {
					padding-left: 50px;
					font-size: 20px;
					text-transform: uppercase;
					display: flex;
					// align-items: center;
					max-width: 500px;

					font-weight: 300;
					line-height: 35px;
					font-family: 'URW Form', sans-serif;
					letter-spacing: 0.1em;

					p {
						width: 100%;
						max-width: 300px;
					}

					@include respond-below(md) {
						padding-left: 15px;

						p {
							max-width: unset;
						}
					}
				}

				> .col-lg-6:first-child {
					text-align: right;
					padding-right: 50px;
					font-size: 20px;
					color: #e7dcd0;
					text-transform: uppercase;
					border-right: 1px solid #e7dcd0;
					// padding-top: 20px;
					// padding-bottom: 20px;

					font-weight: 700;
					line-height: 35px;
					font-family: 'URW Form', sans-serif;
					letter-spacing: 0.1em;

					p {
						width: 100%;
						max-width: 350px;
						margin-left: auto;
					}

					@include respond-below(md) {
						border-right: none;
						text-align: left;

						p {
							max-width: unset;
						}
					}
				}
			}
		}
	}

	.box-6 {
		margin-bottom: 130px;

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

		#scontainer-5 {
			.col-12 {
				text-align: right;
			}

			.tiles {
				display: grid;
				grid-template-columns: 1fr 1fr;

				.tile-left {
					display: flex;
					justify-content: center;
					flex-direction: column;

					text-align: left;
					padding: 40px 100px;
					background: rgba(244, 244, 244, 1);
				}

				.tile-right {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						width: 70px;
						background: rgba(244, 244, 244, 0.9);
					}

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

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

					.tile-right {
						grid-row: 1;

						&::before {
							width: 100%;
							height: 70px;
							right: 0;
							top: auto;
						}
					}
				}

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

			h3 {
				padding-bottom: 25px;
				position: relative;
				margin-bottom: 25px;

				&::after {
					content: '';
					display: block;
					height: 1px;
					background: #000000;
					width: 100%;
					position: absolute;
					bottom: 0;
					max-width: 350px;
				}
			}

			a {
				text-transform: uppercase;
				font-size: 18px;
				font-weight: 300;
				color: #000;
				display: inline-flex;
				align-items: center;
				// height: 24px;
				margin-top: 25px;
				padding: 16px 25px;
				background: transparent;

				&::after {
					content: url(/upload/filemanager/Icons/arrow_right_black.svg);
					display: inline-block;
					line-height: 0;
					margin-left: 20px;
					margin-top: -3px;
					transition: all 250ms ease-in-out;
				}

				&:hover {
					&::after {
						filter: invert(1);
					}
				}
			}
		}
	}

	.box-7 {
		margin-top: 70px;
	}

	.box-8 {
		position: relative;
		overflow: hidden;

		.left_col {
			&::before {
				content: '';
				display: block;
				height: 68px;
				width: 813px;
				position: absolute;
				top: 5px;
				right: 0;
				background: url('/upload/filemanager/strona-glowna/3-lines-second.png');

				@include respond-below(md) {
					display: none;
				}
			}

			@include respond-below(md) {
				flex-direction: row !important;
				align-items: flex-start !important;
				padding-top: 0 !important;
			}

			@include respond-below(xs) {
				flex-direction: column !important;
			}
		}

		.right_col {
			h2 {
				margin-bottom: 120px !important;
				line-height: 1.5 !important;
			}

			.contact-head {
				display: none;
			}
		}

		.box-8__wrapper {
			background: rgba($cSand, 0.3);

			#scontainer-14 {
				.numbers {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					gap: 30px;
					padding: 60px 0;

					.number_tile {
						flex-grow: 1;
						text-align: center;

						h3 {
							@extend .head_txt_1;
						}

						p {
							@extend .body_txt;
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}

	.box-9 {
		padding-top: 70px;
		padding-bottom: 120px;

		#scontainer-118 {
			.scontainer-content {
				text-align: center;
				width: 100%;
				max-width: 700px;
				margin-left: auto;
				margin-right: auto;

				ul {
					list-style-type: none;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					@include respond-below(xs) {
						grid-template-columns: 1fr;
						gap: 30px;
					}

					li {
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-end;
						gap: 20px;
						padding: 0px 5px;
						text-transform: uppercase;
						color: #000;
						@include transition;

						&:not(:last-child) {
							border-right: 1px solid $cBlack;

							@include respond-below(xs) {
								border: 0;
							}
						}

						p,
						a {
							font-weight: 400;
							font-size: 13px;
							line-height: 1.1;
							letter-spacing: 0.07em;
							text-transform: uppercase;
							color: $cTxtBlack;
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}

	footer {
		padding-top: 0 !important;
	}
}

//* Über VIDOK
#page-2 {
	.box-3 {
		#scontainer-10 {
			.scontainer-content {
				._row {
					display: flex;
					align-items: center;

					&:nth-child(2n + 1) {
						flex-direction: row;
					}

					&:nth-child(2n) {
						flex-direction: row-reverse;
					}

					.text {
						width: 50%;
						padding: 20px 50px;

						.head_txt_2 {
							margin-bottom: 30px;
						}
					}

					.image {
						width: 50%;
					}
				}
			}
		}
	}

	.box-5 {
		overflow-x: hidden;

		.box-5_head {
			width: 100%;
			max-width: fit-content;
			// filter: grayscale(100%);
		}

		.box-5__wrapper {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				inset: 200px 0 100px 0;
				width: 100vw;
				background: rgba($cSand, 0.3);
				margin-left: 50%;
				transform: translateX(-50%);
				z-index: -1;
			}

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

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

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

				.tile_group {
					display: flex;
					flex-direction: column;
					gap: 24px;
				}

				.tile {
					&_1 {
					}

					&_2 {
					}

					&_3 {
						background: $cSand;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						gap: 80px;

						.head_txt_4 {
							text-align: center;
						}

						img {
							margin-bottom: 30px;
						}
					}

					&_4 {
					}

					&_5 {
					}

					&_6 {
					}

					&_7 {
						flex-grow: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding: 11px;
						background: $cIron;

						img {
							margin-bottom: 20px;
						}

						.head_txt_4 {
							margin-bottom: 6px;
						}
					}

					&_8 {
						flex-grow: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding: 11px;
						background: $cSand;

						img {
							margin-bottom: 20px;
						}

						.head_txt_4 {
							margin-bottom: 6px;
						}
					}

					&_9 {
					}

					&_10 {
						background: $cIron;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						gap: 60px;

						.head_txt_4 {
							text-align: center;
						}

						img {
							margin-bottom: 30px;
						}
					}

					&_11 {
					}
				}
			}
		}
	}

	@include respond-below(md) {
		.box-2 {
			padding-top: 100px;
			margin-top: 0;

			#scontainer-9 {
				.tiles {
					grid-template-columns: repeat(2, 1fr);
				}
			}
		}

		.box-3 {
			#scontainer-10 {
				.scontainer-content {
					._row {
						&:not(:last-child) {
							margin-bottom: 60px;
						}

						&:nth-child(2n + 1) {
							flex-direction: column-reverse;
						}

						&:nth-child(2n) {
							flex-direction: column-reverse;
						}

						.text {
							width: 100%;
							padding: 20px 0;

							.head_txt_2 {
								margin-bottom: 15px;
							}
						}
					}
				}
			}
		}

		.box-5 {
			.box-5__wrapper {
				.tiles {
					._row {
						&_1 {
						}

						&_2 {
						}

						&_3 {
						}

						&_4 {
						}
					}
				}
			}
		}
	}
}

//* Article
.article {
	margin-bottom: 300px;
	overflow-x: hidden;

	.page_hero {
		min-height: 380px;
		display: flex;
		flex-direction: row;
		justify-content: center;

		.page_hero_left {
			padding: 75px 80px 45px 80px;
			width: 100%;
			max-width: 660px;
			background: #f4f4f4;

			.page_hero_left_wrapper {
				position: relative;
				min-height: 100%;

				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: right;
				align-items: flex-end;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 1px;
					height: 70%;
					background: #6c6d70;
				}

				&::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 50%;
					height: 1px;
					background: #6c6d70;
				}

				.breadcrumbs_box {
					margin-bottom: 25px;
				}

				h1 {
					color: $cTxtBlack;
					font-weight: 700;
					font-size: 35px;
					line-height: 37px;
					text-align: right;
					letter-spacing: 0.1em;
					text-transform: uppercase;
					margin-bottom: 20px;
				}

				p {
					color: $cTxtBlack;
					font-size: 20px;
					line-height: 25.6px;
					font-weight: 300;
					letter-spacing: 0.05em;
					margin-bottom: 0;

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

		.page_hero_right {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 95px;
				background: rgba($cWhite, 0.6);
			}

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

		&__wrapper {
			width: 100%;
			max-width: 586px;

			h1 {
				@extend .head_txt_1;
				color: $cTxtWhite;
				margin-top: 20px;
				margin-bottom: 20px;
			}

			h4 {
				font-size: 18px;
				font-weight: 600;
				color: $cTxtBlack;
			}

			p {
				@extend .body_txt;
				color: $cTxtWhite;
			}
		}
	}

	.tab-container {
		.nav.nav-tabs {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: center;
			gap: 15px;
			border-bottom: none;
			margin-bottom: 120px;

			li {
				display: flex;
				align-items: stretch;
				justify-content: center;

				a {
					@extend .head_txt_4;
					color: $cTxtBlack;
					justify-content: center;
					align-items: center;
					text-align: center;
					display: flex;
					width: 230px;
					min-width: fit-content;
					padding: 10px 15px;
					border: 1px solid $cBlack;
					transition: color 250ms ease, background 250ms ease;
					font-weight: 300;
					font-size: 22px;
					white-space: nowrap;
					flex-wrap: wrap;

					&.active {
						background: $cBlack;
						color: $cTxtWhite;
					}

					span {
						@extend .small_txt;
						display: block;
						width: 100%;
					}
				}
			}
		}

		.tab-content {
			.tab-pane {
				.tab-content1 {
					h3 {
						font-weight: 700;
						font-size: 35px;
						line-height: 37px;
						letter-spacing: 0.15em;
						text-transform: uppercase;
						margin-bottom: 25px;
					}

					.tiles {
						padding-bottom: 25px;

						.tile {
							h4 {
								margin-bottom: 5px;
								font-size: 16px;
								line-height: 25px;
								letter-spacing: 0.05em;
								font-weight: 700;
							}

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

						p {
							font-size: 16px;
							line-height: 25px;
							font-weight: 300;
						}
					}

					.btn8 {
						margin-top: 60px;
					}
				}
			}
		}
	}

	.box_tiles {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		column-gap: 140px;
		padding: 20px 0;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			box-shadow: 0px 0px 30px rgba($cBlack, 0.08);
			width: 100vw;
			left: 50%;
			transform: translateX(-50%);
		}

		.box_tile {
			position: relative;
			color: $cTxtDark;
			display: flex;
			flex-direction: column;
			gap: 8px;
			padding: 20px;
			width: 100%;
			max-width: fit-content;

			&:not(:last-child) {
				&::before {
					content: '';
					position: absolute;
					bottom: 0;
					top: 50%;
					right: -70px;
					width: 1px;
					height: 86px;
					background: $cBlack;
					transform: translateY(-50%);
				}
			}

			img {
				filter: invert(1);
			}
		}
	}

	#product-preview {
		position: relative;
		margin-top: 100px;

		span {
			&:nth-child(1) {
				&::before {
					top: 100px;
					background: rgba(#e7dcd0, 0.8);
				}
			}

			&:nth-child(2) {
				&::before {
					top: 120px;
					background: #d8d8d8;
				}
			}

			&:nth-child(3) {
				&::before {
					top: 140px;
					background: #6c6d70;
				}
			}

			&::before {
				content: '';
				position: absolute;
				left: 15px;
				right: 15px;
				height: 9px;
			}
		}

		.product-preview-data {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			column-gap: 50px;

			.product-preview-text {
				padding-top: 27px;

				h4 {
					width: 100%;
					max-width: 310px;
					font-weight: 300;
					font-size: 25px;
					line-height: 35px;
					letter-spacing: 0.15em;
					text-transform: uppercase;
					margin-bottom: 50px;
				}

				p {
					font-weight: 300;
					font-size: 16px;
					line-height: 20px;
					letter-spacing: 0.05em;
					margin-bottom: 0;
				}
			}
		}
	}

	// .color_tiles {
	// 	&.color_tiles_type1 {
	// 		position: relative;
	// 		padding-top: 70px;
	// 		padding-left: 70px;
	// 		margin-bottom: 120px;

	// 		&::before {
	// 			content: '';
	// 			position: absolute;
	// 			left: 0;
	// 			top: 0;
	// 			bottom: 0;
	// 			width: 1px;
	// 			background: #6c6d70;
	// 		}
	// 		&::after {
	// 			content: '';
	// 			position: absolute;
	// 			left: 0;
	// 			top: 0;
	// 			width: 213px;
	// 			height: 1px;
	// 			background: #6c6d70;
	// 		}

	// 		.color_tiles_data {
	// 			display: grid;
	// 			grid-template-columns: repeat(3, 1fr);
	// 			column-gap: 150px;
	// 			row-gap: 17px;

	// 			.tile {
	// 				display: flex;
	// 				flex-direction: row;
	// 				align-items: center;
	// 				column-gap: 17px;

	// 				img {
	// 					width: 100%;
	// 					max-width: fit-content;
	// 				}
	// 				p {
	// 					font-weight: 300;
	// 					font-size: 16px;
	// 					line-height: 20px;
	// 					letter-spacing: 0.15em;
	// 					text-transform: uppercase;
	// 					margin-bottom: 0;
	// 				}
	// 			}
	// 		}
	// 	}
	// 	&.color_tiles_type2 {
	// 		.color_tiles_data {
	// 			display: grid;
	// 			grid-template-columns: 1fr 1fr 1fr;
	// 			column-gap: 50px;
	// 			row-gap: 80px;
	// 			grid-template-areas:
	// 				'box1 box3 box5'
	// 				'box2 box3 box6'
	// 				'box2 box4 box7';

	// 			.color_box {
	// 				position: relative;
	// 				height: fit-content;

	// 				&::before {
	// 					content: '';
	// 					position: absolute;
	// 					left: 0;
	// 					top: 15px;
	// 					bottom: 0;
	// 					width: 1px;
	// 					background: #6c6d70;
	// 				}

	// 				h2 {
	// 					position: relative;
	// 					font-weight: 700;
	// 					font-size: 25px;
	// 					line-height: 35px;
	// 					letter-spacing: 0.15em;
	// 					text-transform: uppercase;
	// 					margin-bottom: 50px;
	// 					padding-left: 150px;

	// 					&::before {
	// 						content: '';
	// 						position: absolute;
	// 						left: 0;
	// 						top: 15px;
	// 						width: 120px;
	// 						height: 1px;
	// 						background: #6c6d70;
	// 						transform: translateY(-50%);
	// 					}
	// 				}

	// 				ul {
	// 					padding-left: 50px;
	// 					display: flex;
	// 					flex-direction: column;
	// 					row-gap: 17px;
	// 					li {
	// 						display: flex;
	// 						flex-direction: row;
	// 						align-items: center;
	// 						column-gap: 17px;
	// 						img {
	// 							width: 100%;
	// 							max-width: 128px;
	// 						}
	// 						p {
	// 							margin-bottom: 0;
	// 							font-weight: 300;
	// 							font-size: 16px;
	// 							line-height: 20px;
	// 							letter-spacing: 0.15em;
	// 							text-transform: uppercase;
	// 						}
	// 					}
	// 				}

	// 				&_1 {
	// 					grid-area: box1;
	// 				}
	// 				&_2 {
	// 					grid-area: box2;
	// 				}
	// 				&_3 {
	// 					grid-area: box3;
	// 				}
	// 				&_4 {
	// 					grid-area: box4;
	// 				}
	// 				&_5 {
	// 					grid-area: box5;

	// 					ul {
	// 						display: grid;
	// 						grid-template-columns: repeat(3, 1fr);
	// 						li {
	// 							flex-direction: column;
	// 							align-items: flex-start;
	// 							row-gap: 7px;
	// 						}
	// 					}
	// 				}
	// 				&_6 {
	// 					grid-area: box6;
	// 				}
	// 				&_7 {
	// 					grid-area: box7;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	// .color_pallet {
	// 	position: relative;

	// 	&::before {
	// 		content: '';
	// 		position: absolute;
	// 		left: 0;
	// 		top: 12px;
	// 		bottom: 0;
	// 		width: 1px;
	// 		background: #6c6d70;
	// 	}

	// 	.color_pallet_title {
	// 		position: relative;
	// 		padding-left: 240px;

	// 		&::before {
	// 			content: '';
	// 			position: absolute;
	// 			left: 0;
	// 			top: 50%;
	// 			width: 213px;
	// 			height: 1px;
	// 			background: #6c6d70;
	// 			transform: translateY(-50%);
	// 		}

	// 		h2 {
	// 			font-weight: 400;
	// 			font-size: 25px;
	// 			line-height: 25px;
	// 			letter-spacing: 0.15em;
	// 			text-transform: uppercase;
	// 		}
	// 	}
	// 	.color_pallet_data {
	// 		padding-left: 60px;
	// 		padding-top: 50px;
	// 	}
	// }

	.illustration_product_slider {
		.swiper-wrapper {
			.swiper-slide {
			}
		}

		.swiper-navigation {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			justify-content: center;
			gap: 60px;

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

			.swiper-slide-next {
				position: relative;
				cursor: pointer;
				transition: opacity 250ms ease-in;

				img {
					width: 50px;
					height: 50px;
				}
			}

			.swiper-slide-prev {
				position: relative;
				cursor: pointer;
				transition: opacity 250ms ease-in;

				img {
					width: 50px;
					height: 50px;
				}
			}
		}
	}

	.product_info_box {
		margin-bottom: 130px;

		.producti_info_img {
			.illustration_product_slider {
				.swiper-wrapper {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.draft_tiles {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 25px;

		.col_left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 25px;
		}

		.col_right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 25px;
		}
	}

	.img_popups {
		position: relative;
		width: fit-content;
		margin: 0 auto;

		.popup_info_tile {
			position: absolute;
			backdrop-filter: blur(10px);
			background: rgba($cWhite, 0.5);
			box-shadow: 0px 0px 30px rgba($cBlack, 0.16);
			overflow: hidden;
			cursor: pointer;
			transition: width 250ms ease, height 250ms ease;
			z-index: 2;

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

			&::after {
				content: '';
				position: absolute;
				top: 8px;
				left: 16px;
				height: 16px;
				width: 1px;
				background: $cBlack;
				transform: translate(-50%, 0);
			}

			&.tile_close {
				width: 32px;
				height: 32px;
				z-index: 1;
			}

			.popup_info {
				@extend .body_txt;
				padding: 30px;
				width: max-content;
				max-width: 400px;
			}
		}
	}

	.doors_slider {
		.swiper-slide {
			height: 400px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;

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

			p {
				@extend .body_txt;
				margin-top: 10px;
			}
		}

		.doors_slider_nav {
			position: relative;
			height: 40px;
			margin-top: 30px;

			.doors_slider_next {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				cursor: pointer;
				display: flex;
				align-items: center;
				z-index: 11;

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

			.doors_slider_prev {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				cursor: pointer;
				display: flex;
				align-items: center;
				z-index: 11;

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

			.swiper-pagination {
				&.swiper-pagination-bullets {
					.swiper-pagination-bullet {
						border-radius: 0;
						width: 43px;
						height: 3px;
						transition: all 250ms ease;

						&-active {
							background: $cBlack;
							width: 86px;
						}
					}
				}
			}
		}
	}

	//* Article num. 3
	&-2 {
		.img_popups {
			.popup_info_tile {
				&_1 {
					top: 1%;
					left: 80%;
				}

				&_2 {
					top: 18%;
					left: 1%;
				}

				&_3 {
					top: 30%;
					left: 90%;
				}

				&_4 {
					top: 44%;
					left: 47%;
				}

				&_5 {
					top: 65%;
					left: 27%;
				}

				&_6 {
					top: 78%;
					left: 2%;
				}

				&_7 {
					top: 80%;
					left: 33%;
				}

				&_8 {
					top: 81%;
					left: 61%;
				}
			}
		}

		.page_hero__wrapper {
			h1 {
				color: $cTxtBlack;
			}

			p {
				color: $cTxtBlack;
			}
		}
	}

	&-3 {
		.img_popups {
			.popup_info_tile {
				&_1 {
					top: 1%;
					left: 53%;
				}

				&_2 {
					top: 13%;
					left: 69%;
				}

				&_3 {
					top: 18%;
					left: 20%;
				}

				&_4 {
					top: 30%;
					left: 80%;
				}

				&_5 {
					top: 48%;
					left: 86%;
				}

				&_6 {
					top: 53%;
					left: 20%;
				}

				&_7 {
					top: 60%;
					left: 79%;
				}

				&_8 {
					top: 71%;
					left: 47%;
				}

				&_9 {
					top: 75%;
					left: 80%;
				}

				&_10 {
					top: 80%;
					left: 4%;
				}

				&_11 {
					top: 95%;
					left: 70%;
				}
			}
		}

		.article_box_2 {
			text-align: center;
			width: 100%;

			.head_txt_2 {
				margin-bottom: 30px;
			}
		}

		.article_box_3_head {
			text-align: center;
			width: 100%;
			margin-bottom: 30px;
		}

		.article_box_3 {
			display: flex;
			flex-direction: row;
			column-gap: 80px;
			justify-content: center;
			width: 100%;

			._col_1,
			._col_2 {
				display: flex;
				flex-direction: column;
				gap: 30px;
				text-align: center;
			}
		}

		.article_box_5 {
			display: flex;
			flex-direction: row;
			column-gap: 110px;
			align-items: center;

			._col_1 {
				.head_txt_2 {
					margin-bottom: 30px;
				}
			}
		}
	}

	&-4 {
		.tab-container {
			.nav.nav-tabs {
				li {
					a {
						width: 265px;
					}
				}
			}
		}

		.box_tiles {
			display: flex;
			flex-direction: row;
			justify-content: center;
			gap: 24px;

			.box_tile {
				background: transparent;
				color: $cTxtBlack;
				margin: 0;
				text-align: center;

				img {
					height: 100%;
				}
			}
		}
	}

	&-5 {
		.tab-container {
			.nav.nav-tabs {
				li {
					a {
						word-break: break-word;
					}
				}
			}
		}
	}

	&-7 {
		.page_hero {
			margin-bottom: -160px;
		}

		.article_box_1 {
			.col-lg-3 {
				margin-bottom: 25px;

				p {
					padding: 20px;
					background: $cWhite;
					box-shadow: 0px 0px 30px rgba($cBlack, 0.16);
					backdrop-filter: blur(5px);
					height: 100%;
				}
			}
		}

		.article_box_2 {
			> .row {
				align-items: center;

				&:nth-child(2n + 1) {
					flex-direction: row-reverse;
				}
			}
		}

		.article_box_3 {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				width: 95vw;
				margin-left: 50%;
				transform: translateX(-60%);
				background: rgba($cSand, 0.3);
				z-index: -1;
			}

			._col_1 {
				position: relative;
				display: flex;
				align-items: flex-end;

				&::before {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 56vw;
					background-image: url('/upload/filemanager/Pages/Produktzusatze/Produktzusatze-4.jpg');
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					z-index: -1;
				}

				.head_txt_2 {
					margin-bottom: 20px;
				}

				._col_1_text {
					padding: 38px 30px;
					margin-bottom: 30px;
					background: $cWhite;
					width: 100%;
					max-width: 600px;
				}
			}

			._col_2 {
				.handles {
					margin-left: 80px;

					.head_txt_2 {
						position: relative;
						padding-bottom: 3px;
						margin-bottom: 20px;

						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 60%;
							height: 1px;
							background: $cBlack;
						}
					}

					.handle_1 {
						margin-bottom: 40px;
					}

					.handle_1,
					.handle_2 {
						.handle_tiles {
							display: flex;
							flex-direction: row;
							gap: 30px;

							.tile {
								display: flex;
								flex-direction: column;
								align-items: center;
								gap: 7px;
							}
						}
					}
				}
			}
		}
	}

	&-8 {
		.img_popups {
			.popup_info_tile {
				&_1 {
					top: 1%;
					left: 80%;
				}

				&_2 {
					top: 18%;
					left: 1%;
				}

				&_3 {
					top: 30%;
					left: 90%;
				}

				&_4 {
					top: 44%;
					left: 47%;
				}

				&_5 {
					top: 65%;
					left: 27%;
				}

				&_6 {
					top: 78%;
					left: 2%;
				}

				&_7 {
					top: 91%;
					left: 33%;
				}

				&_8 {
					top: 82%;
					left: 61%;
				}
			}
		}

		.page_hero__wrapper {
			h1 {
				color: $cTxtBlack;
			}

			p {
				color: $cTxtBlack;
			}
		}
	}

	&-9 {
		.img_popups {
			.popup_info_tile {
				&_1 {
					top: 1%;
					left: 80%;
				}

				&_2 {
					top: 18%;
					left: 1%;
				}

				&_3 {
					top: 30%;
					left: 90%;
				}

				&_4 {
					top: 44%;
					left: 47%;
				}

				&_5 {
					top: 65%;
					left: 27%;
				}

				&_6 {
					top: 78%;
					left: 2%;
				}

				&_7 {
					top: 91%;
					left: 33%;
				}

				&_8 {
					top: 82%;
					left: 61%;
				}
			}
		}

		.page_hero__wrapper {
			h1 {
				color: $cTxtBlack;
			}

			p {
				color: $cTxtBlack;
			}
		}
	}

	&-10 {
		.img_popups {
			.popup_info_tile {
				&_1 {
					top: 1%;
					left: 80%;
				}

				&_2 {
					top: 18%;
					left: 1%;
				}

				&_3 {
					top: 30%;
					left: 90%;
				}

				&_4 {
					top: 44%;
					left: 47%;
				}

				&_5 {
					top: 65%;
					left: 27%;
				}

				&_6 {
					top: 78%;
					left: 2%;
				}

				&_7 {
					top: 91%;
					left: 33%;
				}

				&_8 {
					top: 82%;
					left: 61%;
				}
			}
		}

		.page_hero__wrapper {
			h1 {
				color: $cTxtBlack;
			}

			p {
				color: $cTxtBlack;
			}
		}
	}

	&-11 {
		.img_popups {
			.popup_info_tile {
				&_1 {
					top: 1%;
					left: 80%;
				}

				&_2 {
					top: 18%;
					left: 1%;
				}

				&_3 {
					top: 30%;
					left: 90%;
				}

				&_4 {
					top: 44%;
					left: 47%;
				}

				&_5 {
					top: 65%;
					left: 27%;
				}

				&_6 {
					top: 78%;
					left: 2%;
				}

				&_7 {
					top: 91%;
					left: 33%;
				}

				&_8 {
					top: 82%;
					left: 61%;
				}
			}
		}

		.page_hero__wrapper {
			h1 {
				color: $cTxtBlack;
			}

			p {
				color: $cTxtBlack;
			}
		}
	}

	&-14 {
		.img_popups {
			.popup_info_tile {
				&_1 {
					top: 1%;
					left: 53%;
				}

				&_2 {
					top: 13%;
					left: 69%;
				}

				&_3 {
					top: 18%;
					left: 20%;
				}

				&_4 {
					top: 30%;
					left: 80%;
				}

				&_5 {
					top: 48%;
					left: 86%;
				}

				&_6 {
					top: 53%;
					left: 20%;
				}

				&_7 {
					top: 60%;
					left: 79%;
				}

				&_8 {
					top: 71%;
					left: 47%;
				}

				&_9 {
					top: 75%;
					left: 80%;
				}

				&_10 {
					top: 80%;
					left: 4%;
				}

				&_11 {
					top: 95%;
					left: 70%;
				}
			}
		}

		.article_box_2 {
			text-align: center;

			.head_txt_2 {
				margin-bottom: 30px;
			}
		}

		.color_tiles {
			.color_tiles_data {
				.tile {
					p {
						padding-right: 20px;
					}
				}
			}
		}
	}

	&-15 {
		.text {
			h2 {
				margin-bottom: 30px;
			}
		}
	}

	&-16 {
		.sub_page_1 {
			.box-2 {
				.tiles {
					position: relative;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 24px;

					.tiles_tile {
						background: $cWhite;
						padding: 20px;
						box-shadow: 0px 0px 30px rgba($cBlack, 0.16);

						.head_txt_5 {
							margin-bottom: 10px;
						}
					}
				}
			}
		}
	}
}

#cookie-information {
	display: none;
}

#page-2 {
	#realizations_box {
		padding-top: 75px;
		padding-bottom: 75px;
	}
}

#scontainer-1 {
	.swiper-pagination {
		position: absolute;
		right: 50px;
		bottom: 50px;
		width: auto;
		display: flex;
		justify-content: flex-end;
		gap: 30px;

		.swiper-pagination-bullet {
			color: #fff;
			background: transparent !important;
			position: relative;
			display: block;
			height: 30px;
			width: 30px;
			opacity: 1 !important;

			&::before {
				display: block;
				height: 30px;
				width: 30px;
				position: absolute;
				top: 0;
				left: 0;
				font-size: 22px;
			}

			&:first-child::before {
				content: '01';
			}

			&:nth-child(2)::before {
				content: '02';
			}

			&:nth-child(3)::before {
				content: '03';
			}

			&:nth-child(4)::before {
				content: '04';
			}

			&.swiper-pagination-bullet-active {
				margin-right: 70px;
				position: relative;

				&::after {
					content: '';
					display: block;
					height: 1px;
					width: 50px;
					background: #fff;
					position: absolute;
					top: 50%;
					right: -75px;
				}

				// &:nth-child(4) {
				// 	margin-left: 70px;
				// 	margin-right: 4px;

				// 	&::after {
				// 		right: auto;
				// 		left: -80px;
				// 	}
				// }
				&:last-child {
					margin-right: 0 !important;
				}

				&:nth-child(4) {
					// margin-left: 70px;
					// margin-right: 4px;

					&::after {
						display: none;
						right: auto;
						left: -80px;
					}
				}
			}
		}
	}
}

.box_stats {
	padding-bottom: 125px;

	#scontainer-15 {
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			row-gap: 20px;

			li + li {
				&:before {
					content: '';
					display: block;
					height: 90%;
					width: 1px;
					background: #000;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			li {
				flex: 1 1 auto;
				display: block;
				text-align: center;
				text-transform: uppercase;
				font-size: 15px;
				position: relative;

				&:first-child {
					padding-left: 0;
				}

				&:last-child {
					padding-right: 0;
				}

				strong {
					font-size: 64px;
					font-weight: 600;
					color: #e7dcd0;
					display: block;
					margin-bottom: -20px;
				}
			}
		}

		@include respond-below(md) {
			ul {
				li {
					width: calc(100% / 2);

					&:nth-child(2n) {
						&::before {
							height: 100%;
						}
					}

					&:nth-child(2n + 1) {
						&::before {
							display: none;
						}
					}
				}
			}
		}

		@include respond-below(sm) {
			ul {
				li {
					font-size: 13px;

					strong {
						font-size: 46px;
						margin-bottom: -10px;
					}
				}
			}
		}

		@include respond-below(xxs) {
			ul {
				row-gap: 40px;

				li {
					width: 100%;

					&::before {
						display: none !important;
					}
				}
			}
		}
	}
}

.box_stats_text {
	font-size: 22px;
	text-transform: uppercase;

	p {
		margin-bottom: 0;
	}
}

#scontainer-17 {
	font-size: 32px;
	font-weight: 100;
	text-transform: uppercase;
}

#page-2 {
	.box-5 {
		display: none !important;
	}
}

.splide__arrow,
.splide__pagination {
	visibility: hidden !important;
}

.box-katalog-download {
	padding-bottom: 0 !important;
	overflow: hidden;

	.row {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100vw;
			height: 350px;
			background-image: url('/upload/filemanager/katalog/box-katalog-download-bg.jpg');
			background-position: center;
			transform: translate(-50%, -50%);
		}

		&::after {
			content: url('/upload/filemanager/katalog/three-lines.svg');
			position: absolute;
			bottom: 120px;
			left: 0;
			transform: translateX(-50%);
		}

		.box-katalog-download-wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;

			h2 {
				color: $cTxtWhite;
				font-weight: 300;
				font-size: 35px;
				line-height: 45px;
				letter-spacing: 0.07em;
				text-transform: uppercase;
				margin-bottom: 0;
				width: 100%;
				max-width: 380px;
				text-align: right;

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

	img {
		max-width: 100%;
		margin-right: 75px;

		@include respond-below(xs) {
			margin-right: 0;
		}
	}

	a {
		// background: #393939;
		border: 1px solid #ffffff;
		// height: 70px;
		display: inline-block;
		width: 275px;
		color: #fff;

		font-weight: 300;
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 0.05em;
		padding: 20px;

		text-transform: uppercase;
		align-items: center;
		@include transition;

		@include respond-below(xs) {
			margin: auto;
			display: flex;
		}

		&::after {
			content: '';
			display: inline-block;
			height: 18px;
			width: 24px;
			background-image: url('/upload/filemanager/Icons/arrow-right-white.svg');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			margin-left: 10px;
		}

		&:hover {
			background: #000;
		}
	}

	@include respond-below(lg) {
		.row {
			&::before {
				background-size: cover;
				height: 280px;
			}

			&::after {
				display: none;
			}

			.box-katalog-download-wrapper {
				display: grid;
				grid-template-columns: 1fr auto;
				grid-template-areas: 'title img' 'link img';
				column-gap: 50px;

				img {
					grid-area: img;
					margin-right: 0;
				}

				h2 {
					grid-area: title;
					max-width: unset;
				}

				a {
					grid-area: link;
					width: fit-content;
					height: auto;
					margin-left: auto;
				}
			}
		}

		img {
			max-width: 290px;
		}

		a {
			font-size: 22px;
			width: 150px;
			height: 50px;
		}
	}

	@include respond-below(md) {
		.row {
			&::before {
				height: 100%;
			}
		}
	}

	@include respond-below(sm) {
		img {
			max-width: 200px;
			margin: 0 auto !important;
		}

		h2 {
			text-align: center !important;
			font-size: 24px !important;
		}

		.row {
			.box-katalog-download-wrapper {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-areas: 'img' 'title' 'link';
				row-gap: 30px;
				padding-top: 40px;
				padding-bottom: 40px;
			}
		}
	}

	@include respond-below(xs) {
		// .row {
		// 	&::before {
		// 		height: 190px;
		// 	}
		// }

		img {
			max-width: 200px;
		}

		a {
			display: inline-flex;
		}
	}

	@media (max-width: 400px) {
		.row {
			&::before {
				height: 130px;
			}
		}

		img {
			max-width: 130px;
		}

		a {
			font-size: 16px;
			width: 120px;
			height: 40px;
		}
	}
}

.box-realizations {
	position: relative;
	background: #f4f4f4;

	.swiper {
		width: 100%;
		height: 100%;
		max-height: 1100px;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper-slide {
		height: calc((100% - 10px) / 2) !important;
		max-height: fit-content;
	}

	.realization {
		width: 100%;
		height: 100%;
		background: $cWhite;

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

		.caption {
			background: $cWhite;
			padding: 40px 50px;

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

			.text {
				border-left: 1px solid #6c6d70;
				padding-left: 30px;

				@include respond-below(sm) {
					padding-left: 20px;
				}

				h3 {
					font-style: normal;
					font-weight: 400;
					font-size: 20px;
					line-height: 1.2;
					letter-spacing: 0.07em;
					text-transform: uppercase;
					color: #000000;
					margin-bottom: 10px;

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

				p {
					font-weight: 300;
					font-size: 13px;
					line-height: 20px;
					letter-spacing: 0.05em;
					margin-bottom: 0;

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

		.image {
			position: relative;
			height: 313px;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 70px;
				background: rgba($cWhite, 0.6);
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center top;
			}
		}
	}

	.container {
		> .row {
			> .col-xl-3 {
				display: flex;
				justify-content: flex-end;

				@include respond-below(xs) {
					padding: 0 25px;
					justify-content: center;
				}
			}

			// > .col-xl-9 {
			// 	display: flex;
			// 	flex-wrap: wrap;
			// 	gap: 40px;
			// }
		}

		.col-xl-3 {
			align-items: center;
		}
	}

	#scontainer-23 {
		position: relative;
		text-align: right;
		max-width: 300px;
		padding-bottom: 300px;

		&::before {
			content: '';
			position: absolute;
			top: -10px;
			right: 0;
			height: 68px;
			background: url('/upload/filemanager/realizations/realizations-stripes.png')
				no-repeat center;
			width: 900px;
			transform: translateY(-100%);
		}

		h2 {
			font-weight: 400;
			font-size: 20px;
			line-height: 24px;
			letter-spacing: 0.07em;
			text-transform: uppercase;

			margin-bottom: 20px;
		}

		p {
			font-weight: 300;
			font-size: 15px;
			line-height: 26px;
			text-align: right;
			letter-spacing: 0.05em;
		}

		@include respond-below(lg) {
			text-align: start;

			&::before {
				top: 0;
				right: 100%;
				transform: none;
			}

			p {
				text-align: left;
			}
		}

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

	@include respond-below(lg) {
		padding: 20px 0;

		#scontainer-23 {
			max-width: unset;
			padding-bottom: 20px;
		}
	}

	@include respond-below(md) {
		&::before {
			display: none;
		}
	}
}

//* ~~~~~~~ Global CSS components ~~~~~~~ *//
//* New components for single pages
#page_hero {
	margin-bottom: 100px;
	width: 100%;
	background: #f4f4f4;

	.scontainer-content {
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-template-columns: 577px 1fr;
		align-items: center;
		min-height: 400px;

		@media (min-width: 1900px) {
			grid-template-columns: 645px 1fr;
		}

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

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

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

		.left-data {
			position: relative;
			padding: 40px;
			margin-left: auto;

			width: fit-content;

			> * {
				max-width: 410px;
			}

			&::before {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 1px;
				height: 70%;
				background: #6c6d70;
			}

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 50%;
				height: 1px;
				background: #6c6d70;
			}

			#breadcrumbs {
				margin-bottom: 25px;
				justify-content: flex-end;
			}

			h1 {
				color: $cTxtBlack;
				font-weight: 700;
				font-size: 32px;
				line-height: 37px;
				text-align: right;
				letter-spacing: 0.1em;
				text-transform: uppercase;
				margin-bottom: 20px;
			}

			p {
				color: $cTxtBlack;
				font-size: 20px;
				line-height: 25.6px;
				font-weight: 300;
				letter-spacing: 0.05em;
				margin-bottom: 0;
				text-align: right;

				strong {
					font-weight: 700;
				}
			}
		}

		.right-data {
			position: relative;
			height: 100%;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 95px;
				background: rgba($cWhite, 0.6);
				z-index: 1;
			}

			img {
				position: absolute;
				inset: 0;
				height: 100%;
				width: 100%;
				object-fit: cover;

				// width: 100%;
				// object-fit: cover;
				// height: 100%;
				// max-width: fit-content;
			}
		}
	}

	@include respond-below(md) {
		.scontainer-content {
			.left-data {
				// margin: 30px 60px;

				#breadcrumbs {
					margin-bottom: 20px;
				}

				h1 {
					font-size: 30px;
					line-height: 32px;
					margin-bottom: 15px;
				}

				p {
					font-size: 16px;
					line-height: 24px;

					strong {
					}
				}
			}
		}
	}

	@include respond-below(xs) {
		.scontainer-content {
			.left-data {
				padding: 30px;

				#breadcrumbs {
					margin-bottom: 20px;
				}

				h1 {
					font-size: 24px;
					line-height: 28px;
					margin-bottom: 15px;
				}

				p {
					font-size: 14px;
					line-height: 20px;

					strong {
					}
				}
			}
		}
	}
}

//* navigation to 'product-preview-box' component

#nav_tabs {
	max-width: 980px;
	padding-bottom: 120px;
	margin-bottom: 90px;
	margin-left: auto;
	margin-right: auto;

	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1px;
		width: 100vw;
		background-color: $cBlack;
	}
}

#nav_tabs,
#nav_tabs_colors {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 17px;
	// width: fit-content;

	li {
		position: relative;
		min-width: fit-content;
		width: 200px;
		border: 1px solid $cBlack;
		background: $cWhite;
		transition: background 250ms ease;

		&.new {
			&::before {
				content: url('/upload/filemanager/Icons/new-icon.png');
				position: absolute;
				top: -10px;
				right: -15px;
			}
		}

		&.active {
			background: $cBlack;

			a {
				color: $cTxtWhite;
			}
		}

		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			row-gap: 7px;

			color: $cTxtBlack;
			font-weight: 300;
			font-size: 18px;
			line-height: 1;
			margin-bottom: 0;

			padding: 12px 20px;
			cursor: pointer;
			transition: color 250ms ease;

			u {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-weight: 300;
				font-size: 14px;
				line-height: 1.3;
				margin-bottom: 0;
				letter-spacing: 0.05em;
				text-decoration: none;

				span {
					margin-top: -4px;
					font-size: 14px;
				}
			}
		}
	}
}

#product-preview-box {
	margin-bottom: 70px;

	.product-preview-box {
		.scontainer-content {
			// padding-left: 250px;

			.product-preview {
				display: none;
				padding-left: 250px;

				&.active {
					display: block;
				}

				.product_info_img {
					padding-top: 15px;

					.product-emblem {
						position: absolute;
						left: 0;
						transform: translateX(-95%);
						z-index: 3;

						width: 240px;
						height: 240px;
						text-align: center;
						padding: 15px;
						background: $cWhite;
						border: 5px solid #d8d8d8;
						border-radius: 100%;

						&::before {
							content: '';
							position: absolute;
							inset: -10px;
							border: 5px solid #e6e6e6;
							border-radius: 100%;
						}

						&::after {
							content: '';
							position: absolute;
							inset: -15px;
							border: 5px solid #f4f4f4;
							border-radius: 100%;
							box-shadow: 0 0 0px 5px #fbfbfb;
						}

						img {
							margin-bottom: 14px;
						}

						p {
							font-weight: 300;
							font-size: 18px;
							line-height: 20px;
							letter-spacing: 0.05em;
							margin-bottom: 0;

							strong {
								display: block;
								position: relative;
								font-weight: 700;
								font-size: 16px;
								line-height: 20px;
								text-align: center;
								letter-spacing: 0.05em;
								text-transform: uppercase;
								color: $cTxtLightBlue;
								margin-bottom: 14px;

								&::before {
									content: '';
									position: absolute;
									bottom: -6px;
									left: 50%;
									height: 1px;
									width: 100%;
									max-width: 110px;
									background: $cLightBlue;
									transform: translateX(-50%);
								}
							}
						}

						@include respond-below(md) {
							transform: translateX(0);
							left: 15px;
						}

						@include respond-below(xs) {
							display: none;
						}
					}

					.illustration_product_slider {
						.swiper-wrapper {
							.swiper-slide {
								text-align: center;
							}
						}

						.swiper-navigation {
							display: flex;
							flex-direction: row-reverse;
							align-items: center;
							justify-content: center;
							gap: 60px;

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

							.swiper-slide-next {
								position: relative;
								cursor: pointer;
								transition: opacity 250ms ease-in;

								img {
									width: 50px;
									height: 50px;
								}
							}

							.swiper-slide-prev {
								position: relative;
								cursor: pointer;
								transition: opacity 250ms ease-in;

								img {
									width: 50px;
									height: 50px;
								}
							}
						}
					}

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

				.product_info_text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					h3 {
						font-weight: 700;
						font-size: 35px;
						line-height: 37px;
						letter-spacing: 0.15em;
						text-transform: uppercase;
						margin-bottom: 25px;
					}

					ul {
						border: 1px solid #f4f4f4;
						padding: 15px 20px;

						/* width */
						&::-webkit-scrollbar {
							width: 3px;
						}

						/* Handle */
						&::-webkit-scrollbar-thumb {
							background: #dadada;
							border-radius: 0px;
						}

						/* Track */
						&::-webkit-scrollbar-track {
							box-shadow: inset 0 0 5px rgba(grey, 0.1);
							border-radius: 0px;
						}

						/* Handle on hover */
						&::-webkit-scrollbar-thumb:hover {
							background: #000000;
						}

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

							h4 {
								font-weight: 700;
								font-size: 16px;
								line-height: 26px;
								letter-spacing: 0.05em;
								margin-bottom: 0;
							}

							p {
								font-weight: 300;
								font-size: 16px;
								line-height: 26px;
								letter-spacing: 0.05em;
								margin-bottom: 0;
							}
						}
					}

					&__footer {
						display: grid;
						grid-template-columns: 1fr 1fr;
						align-items: center;
						column-gap: 55px;
						row-gap: 15px;
						padding-top: 45px;
						padding-left: 20px;

						.btn8 {
						}

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

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

						.btn8 {
							margin-top: 40px;
							margin-left: auto;
							margin-right: auto;
						}
					}
				}

				@include respond-below(md) {
					padding-left: 0;
				}
			}
		}
	}

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

#characteristics-box {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		box-shadow: 0px 0px 30px rgba($cBlack, 0.08);
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
	}

	.scontainer-content {
		.row {
			display: none;

			&.active {
				display: flex;
			}

			ul {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				column-gap: 50px;
				padding: 60px 0 30px 0;

				li {
					position: relative;
					color: $cTxtDark;
					display: flex;
					flex-direction: row;
					align-items: center;
					column-gap: 15px;
					row-gap: 8px;
					padding: 20px;
					width: 100%;
					// max-width: fit-content;
					max-width: 300px;
					flex: 1;
					justify-content: space-between;

					&:not(:last-child) {
						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							top: 50%;
							right: -25px;
							width: 1px;
							height: 86px;
							background: $cBlack;
							transform: translateY(-50%);
						}
					}

					img {
						filter: invert(1);
					}

					h2 {
						font-weight: 700;
						font-size: 18px;
						line-height: 26px;
						margin-bottom: 0;
					}

					p {
						font-weight: 400;
						font-size: 16px;
						line-height: 1.5;
						margin-bottom: 0;
					}
				}
			}

			.col-12 {
				> p {
					width: 100%;
					max-width: 960px;
					margin-bottom: 20px;
					margin-left: auto;
					margin-right: auto;

					font-weight: 300;
					font-size: 10px;
					line-height: 12px;
					letter-spacing: 0.05em;
				}
			}
		}

		@include respond-below(md) {
			.row {
				ul {
					flex-direction: column;
					row-gap: 30px;

					li {
						align-items: center;

						&:not(:last-child) {
							&::before {
								top: auto;
								bottom: -15px;
								left: 50%;
								width: calc(100% - 30px);
								height: 1px;
								transform: translateX(-50%);
							}
						}
					}
				}
			}
		}
	}
}

#product-360 {
	position: relative;
	margin-top: 100px;
	width: 100%;
	max-width: 1260px;
	margin-left: auto;
	margin-right: auto;

	span {
		&:nth-child(1) {
			&::before {
				top: 100px;
				background: rgba(#e7dcd0, 0.8);
			}
		}

		&:nth-child(2) {
			&::before {
				top: 120px;
				background: #d8d8d8;
			}
		}

		&:nth-child(3) {
			&::before {
				top: 140px;
				background: #6c6d70;
			}
		}

		&::before {
			content: '';
			position: absolute;
			left: 15px;
			right: 15px;
			height: 9px;
		}
	}

	.product-preview-data {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		column-gap: 50px;

		> img {
			transition: all 250ms ease-in-out;

			&:hover {
				animation: tilt-n-move-shaking 1s infinite;
			}
		}

		@keyframes tilt-n-move-shaking {
			0% {
				transform: scale(1) rotate(0deg);
			}

			25% {
				transform: scale(1.1) rotate(15deg);
			}

			50% {
				transform: scale(1.1) rotate(0deg);
			}

			75% {
				transform: scale(1.1) rotate(-15deg);
			}

			100% {
				transform: scale(1) rotate(0deg);
			}
		}

		.product-preview-text {
			h4 {
				width: 100%;
				max-width: 310px;
				font-weight: 300;
				font-size: 20px;
				line-height: 35px;
				letter-spacing: 0.15em;
				text-transform: uppercase;
			}

			p {
				font-weight: 700;
				font-size: 15px;
				line-height: 35px;
				letter-spacing: 0.15em;
				margin-bottom: 0;
			}
		}
	}
}

#product-colors {
	> .col-12 {
		display: none;

		&.active {
			display: block;
		}
	}
}

#product-popup-box {
	.product-popup-box-list {
		display: none;

		&.active {
			display: block !important;
		}
	}

	.scontainer-content {
		position: relative;
		margin-bottom: 110px;
		height: 875px;

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

	.row {
		&:first-child {
			position: absolute;
			top: 0;
			right: 50%;
			height: 100%;

			img {
				width: auto !important;
				max-width: none !important;
				height: 100%;
			}

			@include respond-above(xl) {
				transform: translateX(-41%);
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				height: 100%;
				width: 100%;
				background: rgba(244, 244, 244, 0.6);
			}
		}

		&:last-child {
			position: relative;
			height: 100%;
			align-items: center;

			// @include respond-above(xl) {
			// 	margin-left: 15%;
			// }
		}

		.box-data {
			position: relative;
			width: 100%;

			@include respond-below(lg) {
				width: fit-content;
				margin: 0 auto;

				img {
					margin: 0 auto;
					display: block;

					@include respond-below(xs) {
						max-width: 300px !important;
					}
				}
			}

			ul {
				position: absolute;
				top: 0;
				left: 15px;
				width: calc(100% - 15px);
				height: 100%;

				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;

				li {
					position: absolute;
					width: -webkit-fill-available;

					@include respond-above(lg) {
						&::after {
							content: '';
							position: absolute;
							top: calc(19px / 2);
							right: 0;
							width: calc(100% - 19px);
							height: 1px;
							background: $cBlack;
						}
					}

					&::before {
						content: '';
						position: absolute;
						width: 19px;
						height: 19px;
						background: rgba($cWhite, 0.3);
						border: 1px solid $cBlack;
						border-radius: 100%;

						font-weight: 700;
						font-size: 25px;
						line-height: 20px;
						text-align: center;
						letter-spacing: 0.05em;

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

					@include respond-below(lg) {
						position: initial;
						width: 19px;
						height: 19px;

						&::before {
							cursor: pointer;
							width: 49px;
							height: 49px;
							transform: translate(-50%, -50%);
						}
					}

					p {
						position: relative;
						color: $cTxtBlack;
						font-weight: 300;
						font-size: 16px;
						line-height: 20px;
						letter-spacing: 0.05em;
						text-align: right;
						margin-bottom: 0;
						width: 100%;
						margin-left: auto;

						@include respond-above(lg) {
							padding: 25px 15px 0 0;

							&::after {
								content: '';
								position: absolute;
								top: calc(19px / 2);
								right: 0;
								height: 100%;
								width: 1px;
								background: $cBlack;
							}
						}

						@include respond-below(lg) {
							text-align: center;
							position: absolute;
							left: 50%;
							top: 50%;
							width: max-content;
							max-width: 400px;
							transform: translate(-50%, -50%);
							background: $cWhite;
							padding: 40px 20px 20px;
							z-index: 1;
							cursor: pointer;

							opacity: 0;
							visibility: hidden;
							transition: opacity 150ms ease-in, visibility 150ms ease-in;

							&::before {
								content: '';
								position: absolute;
								top: 20px;
								right: 15px;
								width: 15px;
								height: 1px;
								transform: rotate(45deg);
								background: $cBlack;
							}

							&::after {
								content: '';
								position: absolute;
								top: 20px;
								right: 15px;
								width: 15px;
								height: 1px;
								transform: rotate(-45deg);
								background: $cBlack;
							}

							&.active {
								opacity: 1;
								visibility: visible;
							}
						}

						@include respond-below(xs) {
							max-width: 290px;
						}
					}
				}
			}
		}
	}
}

//* Product colors

.colors-box-head {
	&-wrapper {
		padding: 45px 50px 30px;
		background: #f4f4f4;

		h2 {
			font-size: 30px;
			font-weight: 300;
			line-height: 25px;
			letter-spacing: 0.15em;
		}

		p {
			font-size: 16px;
			font-weight: 300;
			line-height: 25px;
			letter-spacing: 0.05em;
			margin-bottom: 0;
		}
	}
}

.color-tiles {
	position: relative;
	height: fit-content;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 12px;
		bottom: 0;
		width: 1px;
		background: #6c6d70;
	}

	&-title {
		position: relative;
		padding-left: 240px;
		min-height: 30px;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 12px;
			width: 213px;
			height: 1px;
			background: #6c6d70;
		}

		h2 {
			font-weight: 700;
			font-size: 20px;
			line-height: 25px;
			letter-spacing: 0.07em;
			text-transform: uppercase;
			margin-bottom: 0;
		}

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

			&::before {
				width: 60px;
			}
		}
	}

	&-data {
		padding-left: 60px;
		padding-top: 50px;
		max-height: unset;

		li {
			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 17px;

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

			p {
				font-weight: 300;
				font-size: 13px;
				line-height: 15px;
				letter-spacing: 0.05em;
				text-transform: uppercase;
				margin-bottom: 0;
			}
		}

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

	&[status='true'] {
		button {
			span {
				&::after {
					width: 0;
				}
			}
		}
	}

	button {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 250px;
		min-height: 38px;
		background: $cWhite;
		border: 1px solid $cBlack;
		margin-left: 60px;
		margin-top: 19px;
		padding: 0 20px;
		outline: none !important;
		background: $cWhite;
		transition: background 250ms ease-in-out;
		cursor: pointer;

		&:hover {
			background: $cBlack;

			p {
				color: $cTxtWhite;
			}

			span {
				border-color: $cWhite;

				&::before,
				&::after {
					background: $cWhite;
				}
			}
		}

		p {
			font-weight: 300;
			font-size: 16px;
			line-height: 20px;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			margin-bottom: 0;
			transition: color 250ms ease-in;
		}

		span {
			position: relative;
			width: 20px;
			height: 20px;
			border-radius: 100%;
			border: 1px solid $cBlack;
			transition: border 250ms ease-in;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				width: 10px;
				height: 1px;
				background: $cBlack;
				border-radius: 3px;
				transform: translate(-50%, -50%);
				transition: background 250ms ease-in;
			}

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				width: 10px;
				height: 1px;
				background: $cBlack;
				border-radius: 3px;
				transform: translate(-50%, -50%) rotate(90deg);
				transition: width 250ms ease-in, background 250ms ease-in;
			}
		}

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

#our-catalog {
	.scontainer-content {
		h2 {
			font-weight: 300;
			font-size: 25px;
			line-height: 40px;
			text-align: right;
			letter-spacing: 0.07em;
			text-transform: uppercase;
			text-align: right;

			strong {
				font-weight: 700;
			}
		}

		a {
			display: block;
			text-align: center;
			padding: 15px;
			border: 1px solid $cBlack;
			margin-top: 20px;
			width: 100%;

			color: $cTxtBlack;
			font-weight: 300;
			font-size: 25px;
			line-height: 30px;
			letter-spacing: 0.05em;
			text-transform: uppercase;
		}

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

			a {
				font-size: 20px;
			}
		}

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

		.our-catalog-img {
			position: relative;

			h2 {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(58, 58, 58, 1);
				mix-blend-mode: hard-light;
				padding: 25px;
				margin-bottom: 0;

				color: $cTxtWhite;
				font-weight: 300;
				font-size: 25px;
				line-height: 32px;
				text-align: center;
				letter-spacing: 0.05em;
				text-transform: uppercase;
			}

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

		.our-catalog-footer {
			position: relative;

			span.line {
				&::before {
					content: '';
					position: absolute;
					right: calc(100% + 30px);
					height: 11px;
					width: 100vw;
				}

				&:nth-child(2) {
					&::before {
						top: 0;
						background: rgba(231, 220, 208, 0.8);
					}
				}

				&:nth-child(3) {
					&::before {
						top: 50%;
						background: #d8d8d8;
						transform: translateY(-50%);
					}
				}

				&:nth-child(4) {
					&::before {
						bottom: 0;
						background: #6c6d70;
					}
				}
			}
		}
	}
}

.article-17 {
	margin-bottom: 0;

	ul {
		list-style: initial;
		padding-left: 36px;
		margin-bottom: 0;

		li {
			margin-bottom: 10px;

			> ul {
				list-style: circle;
			}
		}
	}
}

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

	._title {
		font-weight: 600;
		margin-bottom: 10px;
	}

	._text {
		font-size: 0.95rem;

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

	._icon {
		margin-bottom: 15px;

		img {
			height: 70px;

			&[src='/upload/filemanager/Pages/Turen/VEKAMOTION-82/Vielzahl-an-Anpassungsmoglichkeiten.svg'] {
				height: 50px;
				margin-top: 10px;
				margin-bottom: 10px;
			}
		}
	}
}

#page-8 {
	.box-katalog-download {
		padding-bottom: 125px !important;

		@include respond-below(sm) {
			padding-bottom: 90px !important;
		}

		.row::before {
			@media (max-width: 400px) {
				height: 100%;
			}
		}
	}
}

#scontainer-48,
#scontainer-51,
#scontainer-74 {
	a {
		text-transform: uppercase;
		font-size: 18px;
		font-weight: 300;
		color: #000;
		display: inline-flex;
		align-items: center;
		// height: 24px;
		margin-top: 25px;
		padding: 16px 25px;
		background: transparent;

		&::after {
			content: url('/upload/filemanager/Icons/arrow_right_black.svg');
			display: inline-block;
			line-height: 0;
			margin-left: 20px;
			margin-top: -3px;
			transition: all 250ms ease-in-out;
		}

		&:hover {
			&::after {
				filter: invert(1);
			}
		}
	}
}

#product-colors-preview-box {
	margin-bottom: 70px;

	.scontainer-content {
		.colors-box-header {
			padding: 45px 50px 30px;
			margin-bottom: 50px;
			background: #f4f4f4;

			h2 {
				font-size: 30px;
				font-weight: 300;
				line-height: 25px;
				letter-spacing: 0.15em;
			}

			p {
				font-size: 16px;
				font-weight: 300;
				line-height: 25px;
				letter-spacing: 0.05em;
				margin-bottom: 0;
			}

			.c-row {
				display: flex;
				flex-direction: row;
				column-gap: 40px;

				.c-col {
					&-2 {
						display: flex;
						justify-content: center;
						flex: 1;
					}
				}
			}
		}

		.colors-preview {
			display: none;

			&.active {
				display: block;
			}

			.color-tiles-rows {
				.color-tiles {
					&:not(:last-child) {
						margin-bottom: 130px;
					}

					.color-tiles-title {
					}
					.color-tiles-data {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						column-gap: 17px;
						row-gap: 17px;
						align-items: flex-start;
						overflow: hidden;

						li {
							flex: 0 0 calc(100% / 3 - (17px * 2 / 3));

							@include respond-below(md) {
								flex: 0 0 calc(100% / 2 - (17px / 2));

								&.empty {
									display: none;
								}
							}
							@include respond-below(sm) {
								flex: 0 0 100%;
							}
						}
					}
				}
			}
		}
	}
}

button.c-button {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 250px;
	min-height: 38px;
	background: $cWhite;
	border: 1px solid $cBlack;
	padding: 0 20px;
	outline: none !important;
	background: $cWhite;
	transition: background 250ms ease-in-out;
	cursor: pointer;

	&:hover {
		background: $cBlack;

		p {
			color: $cTxtWhite;
		}

		span {
			border-color: $cWhite;

			&::before,
			&::after {
				background: $cWhite;
			}
		}
	}

	p {
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		margin-bottom: 0;
		transition: color 250ms ease-in;
	}

	span {
		position: relative;
		width: 20px;
		height: 20px;
		border-radius: 100%;
		border: 1px solid $cBlack;
		transition: border 250ms ease-in;

		&::before {
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			width: 10px;
			height: 1px;
			background: $cBlack;
			border-radius: 3px;
			transform: translate(-50%, -50%);
			transition: background 250ms ease-in;
		}

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			width: 10px;
			height: 1px;
			background: $cBlack;
			border-radius: 3px;
			transform: translate(-50%, -50%) rotate(90deg);
			transition: width 250ms ease-in, background 250ms ease-in;
		}
	}

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