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

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

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

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

a {
	text-decoration: none;

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

.anchor {
	cursor: pointer;
}

#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;
			}

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

			li {
				position: relative;

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

				ul {
					position: absolute;
					display: none;

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

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

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

		&#menu-container-1 {
			.level-0 {
				justify-content: space-between;

				> li {
					display: flex;
					align-items: center;

					> a {
						color: $cTxtGray;
						text-transform: uppercase;
					}

					&#link-8 {
						> a {
							color: $cTxtWhite;
							font-weight: 800;
							font-size: 23px;
							padding: 16px 46px 14px 46px;
							background-color: $cBlack;
						}
					}
				}
			}
		}
	}
}

#main-menu-btn {
	height: 70px;
	width: 70px;
	position: fixed;
	bottom: 30px;
	right: 60px;
	color: #fff;
	background: #000;
	display: none;
	z-index: 9999;
	line-height: 50px;
	text-align: center;
	font-size: 35px;
	cursor: pointer;

	@include border-radius(50%);

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

.btn-1 {
	position: relative;
	display: inline-block;
	width: 100%;
	color: $cTxtBlack;
	font-weight: 300;
	font-size: 26px;

	padding: 28px 57px;
	border: 1px solid $cBlack;

	&:hover {
		color: $cTxtBlack;
	}

	&::before {
		content: '';
		position: absolute;
		right: 46px;
		top: 50%;
		transform: translateY(-50%);
		width: 58px;
		height: 2px;
		background-color: $cBlack;
	}

	&::after {
		content: '';
		position: absolute;
		right: 46px;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		width: 14px;
		height: 14px;
		border-right: 2px solid $cBlack;
		border-top: 2px solid $cBlack;
	}
}

//* ~~~~~~~~~~ Components ~~~~~~~~~~ *//
#footer {
	background-color: $cBlack;

	.footer_wrapper {
		color: $cTxtWhite;
		padding-top: 35px;
		padding-bottom: 50px;

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

			.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: 130px;
					margin-bottom: 40px;
				}
			}

			.box-center {
				h4 {
					font-size: 18px;
					font-weight: 700;
				}

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

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

						a {
							color: $cTxtWhite;
							font-size: 14px;
							letter-spacing: 0.01em;
						}
					}
				}
			}

			.box-right {
				position: relative;
				padding-top: 30px;

				&::before {
					content: '';
					position: absolute;
					top: 9px;
					left: 0;
					right: 0;
					height: 1px;
					background: $cWhite;
				}

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

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

						a {
							color: $cTxtWhite;
							font-size: 14px;
							letter-spacing: 0.01em;
						}
					}
				}
			}

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

#contact-mini {
	padding: 60px 0;
	background-color: $cLightGray;

	.left_col {
		text-align: right;

		@include respond-above(md) {
			padding-right: 50px;
		}

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

		h2 {
			font-weight: 700;
			font-size: 32px;
			margin-bottom: 60px;
		}

		p {
			margin-bottom: 0;
		}

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

			&.contact-social {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				gap: 9px;
				margin-bottom: 50px;
				margin-top: 15px;

				&::before {
					content: '';
					position: absolute;
					bottom: -25px;
					height: 1px;
					width: 275px;
					background: $cBlack;
				}

				img {
					max-width: 25px;
				}

				@include respond-below(md) {
					margin-top: 20px;
					justify-content: center;
				}
			}

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

					a {
						color: $cTxtBlack;
						font-weight: 400;
						font-size: 18px;
					}
				}
			}
		}
	}

	.right_col {
		p {
			font-weight: 300;
		}

		.contact-head {
			padding-top: 5px;
		}
	}
}

#contact_form {
	button {
		border: 0;
	}

	.agreement {
		font-size: 10px;

		.agreement-container {
			margin-bottom: 10px;

			.form_group_2 {
				display: flex;
				align-items: center;
				gap: 10px;

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

				input[type='checkbox'] {
					position: relative;
					appearance: none;
					width: 26px;
					min-width: 26px;
					height: 26px;
					background: $cBlack;
					cursor: pointer;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: -20px;
						left: 35px;
						width: 3px;
						height: 17px;
						background: $cWhite;
						transform: rotate(35deg);
						border-top-left-radius: 5px;
						border-top-right-radius: 5px;
						border-bottom-right-radius: 5px;
						transition: top 250ms ease-in-out, left 250ms ease-in-out;
					}

					&::after {
						content: '';
						position: absolute;
						top: -7px;
						left: -16px;
						width: 3px;
						height: 11px;
						background: $cWhite;
						transform: rotate(-45deg);
						border-top-left-radius: 5px;
						border-top-right-radius: 5px;
						border-bottom-left-radius: 5px;
						border-bottom-right-radius: 5px;
						transition: top 250ms ease-in-out, left 250ms ease-in-out;
					}

					&:checked {
						&::before {
							top: 6px;
							left: 14px;
						}

						&::after {
							top: 12px;
							left: 7px;
						}
					}
				}

				label {
					margin-bottom: 0;
					line-height: 1.5;
					cursor: pointer;

					&.label_form_check2 {
						max-width: 240px;
					}
				}
			}
		}

		.btn.btn-send {
			position: relative;
			color: $cTxtWhite;
			font-weight: 700;
			font-size: 16px;
			text-transform: uppercase;
			padding: 16px 60px 16px 20px;
			background: $cBlack;
			border-radius: 0;

			display: block;
			margin-left: auto;

			// @include respond-above(xs) {
			// 	margin-top: -35px;
			// }

			&::before {
				content: '';
				position: absolute;
				right: 16px;
				top: 50%;
				height: 2px;
				width: 30px;
				background: $cWhite;
				transform: translateY(-50%);
			}

			&::after {
				content: '';
				position: absolute;
				right: 16px;
				top: 50%;
				height: 12px;
				width: 12px;
				border-right: 2px solid $cWhite;
				border-bottom: 2px solid $cWhite;
				transform: translateY(-50%) rotate(-45deg);
			}
		}
	}

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

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

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

			&:focus {
				outline: none;
			}
		}

		input,
		select {
			border: none;
			padding: 13px;

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

			&:focus {
				outline: none;
			}
		}
	}
}

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

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

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

	.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(md) {
			column-gap: 25px;
		}

		.header_left {
			display: flex;
			align-items: center;
			justify-content: center;

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

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

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

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

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

		.header_right {
			padding: 30px 0;

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

			.header_big_btn {
				a {
					display: inline-block;
					font-weight: 800 !important;
					font-size: 23px !important;
					color: $cTxtWhite !important;
					padding: 12px 25px 7px 25px;
					background: $cBlack;
					cursor: pointer;

					@include respond-below(lg) {
						font-size: 20px !important;
						padding: 12px 20px 7px 20px;
					}
				}
			}
		}

		#advance_menu {
			@include respond-below(md) {
				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(md) {
					&: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(md) {
					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(md) {
								padding-bottom: 5px;
							}
						}
					}

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

					@include respond-below(md) {
						&:not(:last-child) {
							&::after {
								content: '';
								position: absolute;
								bottom: -15px;
								left: 0;
								right: 0;
								height: 1px;
								background: $cSandDarker;
							}
						}
					}

					a {
						position: relative;
						color: $cTxtBlack;
						font-weight: 400;
						font-size: 15px;
						width: fit-content;
						text-transform: uppercase;

						&::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(md) {
								pointer-events: none;
							}
						}

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

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

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

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

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

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

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

				> li {
					position: relative;

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

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

						@include respond-below(md) {
							&.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(md) {
										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(md) {
							position: static;
							display: none;
						}

						> li {
							@include respond-above(md) {
								&: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(md) {
								&.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: 200px;
								box-shadow: 30px 0px 30px rgba($cBlack, 0.06);
								min-height: fit-content;

								@include respond-below(md) {
									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;
								}
							}
						}
					}
				}
			}
		}
	}
}

#page-hero {
	height: 475px;
	position: relative;
	display: flex;
	align-items: center;

	@include respond-below(md) {
		height: 400px;
	}

	> div {
		width: 100%;
	}

	.hero-bg {
		position: absolute;
		inset: 0;
		overflow: hidden;

		.row {
			height: 100%;
			margin: 0;

			.col-12 {
				height: 100%;
				padding: 0;
			}
		}

		img {
			min-width: 100%;
			width: 100%;
			max-width: fit-content;
			filter: brightness(0.7);
			height: 100%;
			object-fit: cover;
		}

		video {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			min-width: 100% !important;
			min-height: 100%;
			width: auto !important;
			// height: auto;
			height: 100%;
			z-index: 1;
			overflow: hidden;
			background-color: $cBlack;
		}
	}

	.hero-data {
		position: relative;
		z-index: 1;

		ul {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 0;
			padding: 0;
			list-style: none;
			gap: 30px;
			margin-bottom: 60px;
			width: fit-content;

			&::before {
				content: '';
				position: absolute;
				bottom: -30px;
				height: 2px;
				right: 0;
				left: -50%;
				background-color: $cWhite;
			}

			li {
				position: relative;
				color: $cTxtWhite;
				font-weight: 200;
				font-size: 25px;

				&:not(:last-child) {
					&::before {
						content: '>';
						position: absolute;
						top: 50%;
						right: -30px;
						color: $cTxtWhite;
						transform: translate(-50%, -50%);
					}
				}

				a {
					color: $cTxtWhite;
					font-weight: 200;
					font-size: 25px;
				}

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

					a {
						font-size: 22px;
					}
				}

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

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

		h2 {
			color: $cTxtWhite;
			font-weight: 700;
			font-size: 40px;
			margin-bottom: 0;

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

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

#catalog-box {
	.catalog-box-1 {
		background-color: $cSand;

		@include respond-below(md) {
			padding: 40px 0 60px 0;
		}

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

			li {
				a {
					width: 100%;
					display: block;
					color: $cTxtWhite;
					font-weight: 200;
					font-size: 26px;
					padding: 24px 120px 20px 45px;
					background-color: $cBlack;

					&.download-catalog {
						position: relative;

						&::before {
							content: '';
							position: absolute;
							right: 45px;
							top: 50%;
							width: 60px;
							height: 40px;
							background-image: url('/upload/filemanager/Icons/icon-download-file.svg');
							background-size: cover;
							background-repeat: no-repeat;
							transform: translateY(-50%);
						}
					}
				}
			}
		}
	}

	.catalog-box-2 {
		margin: 100px 0;

		a.btn-1 {
			padding: 28px 110px 28px 57px;
		}

		@include respond-below(md) {
			margin: 60px 0;
		}
	}
}

#nav_tabs {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 17px;
	max-width: 400px;
	padding: 10px 0 10px 40px;
	list-style: none;
	border-left: 2px solid $cBlack;
	margin-bottom: 0;

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

		&.new {
			&::before {
				// content: url("/upload/filemanager/Icons/new-icon.png");
				content: '';
				position: absolute;
				top: -10px;
				right: -15px;
				width: 37px;
				height: 28px;
				background-image: url('/upload/filemanager/Icons/new-icon.png');
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
		}

		&.active {
			background: $cCloud;
		}

		a {
			display: inline-block;
			color: $cTxtBlack;
			font-weight: 300;
			font-size: 19px;
			line-height: 1;
			font-family: $fontNewOrder;
			margin-bottom: 0;
			text-decoration: none;

			padding: 14px 22px;
			cursor: pointer;
		}
	}

	@include respond-below(md) {
		max-width: unset;
		justify-content: center;
		border-top: 2px solid $cBlack;
		border-left: none;
		padding: 40px 10px 10px 10px;
	}
}

#product-preview-box {
	.product-preview-box {
		.scontainer-content {
			.product-nav {
				position: relative;
				margin-top: 50px;
				padding-bottom: 80px;

				&::before {
					content: '';
					position: absolute;
					bottom: calc(80px / 2);
					left: 0;
					right: 0;
					height: 1px;
					background-color: $cSandDarker;
				}

				> .row {
					align-items: center;
				}

				.col-left {
					text-align: right;

					h3 {
						font-size: 30px;
						font-weight: 600;
						text-transform: uppercase;
						max-width: 200px;
						margin-left: auto;
						margin-bottom: 0;
						padding: 30px 20px 30px 0;
					}
				}

				.col-right {
				}

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

					.col-left {
						text-align: center;

						h3 {
							padding: 30px 20px;
							max-width: unset;
						}
					}
				}
			}

			.product-preview {
				display: none;

				&.active {
					display: block;
				}

				.product_info_img {
					padding-top: 15px;

					.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;
							margin-top: 40px;

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

							.swiper-slide-next,
							.swiper-slide-prev {
								position: relative;
								cursor: pointer;
								width: 52px;
								height: 52px;
								border: 1px solid $cSandDarker;
								transition: background 250ms ease-in-out;

								&::before {
									content: '';
									position: absolute;
									top: 50%;
									left: 50%;
									width: 22px;
									height: 22px;
									border-top: 4px solid $cSandDarker;
									border-right: 4px solid $cSandDarker;
									transition: border-color 250ms ease-in-out;
								}

								&:not(.swiper-button-disabled) {
									background: $cSandDarker;

									&::before {
										border-color: $cWhite;
									}
								}

								&.swiper-slide-next {
									&::before {
										transform: translate(calc(-50% - 4px), -50%) rotate(45deg);
									}
								}

								&.swiper-slide-prev {
									&::before {
										transform: translate(calc(-50% + 4px), -50%) rotate(-135deg);
									}
								}
							}
						}
					}

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

				.product_info_text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-top: 50px;

					ul {
						list-style: none;
						margin-bottom: 0;
						padding: 10px 0px 10px 20px;
						height: 100%;
						border-left: 2px solid #010101;
						direction: rtl;

						/* 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 {
							display: grid;
							grid-template-columns: 120px 1fr;
							column-gap: 40px;
							direction: ltr;

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

							h4 {
								font-weight: 700;
								font-size: 18px;
								margin-bottom: 0;
								text-align: right;
							}

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

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

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

						.btn8 {
							font-weight: 700;
							font-size: 22px;
							text-transform: uppercase;
							padding: 20px 80px;
							border: 3px solid $cBlack;
							margin-bottom: 0;
						}

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

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

							.btn8 {
								order: 1;
							}

							img {
								margin: 0 auto;
							}
						}
					}

					@include respond-below(md) {
						padding-top: 0;
						margin-bottom: 0;

						ul {
							padding: 0;

							li {
								grid-template-columns: 1fr;

								h4 {
									text-align: left;
								}
							}
						}
					}

					@include respond-below(sm) {
						.btn8 {
							margin-top: 40px;
							margin-left: auto;
							margin-right: auto;
						}
					}
				}

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

#product-description-box {
	margin-bottom: 200px;

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

	.col-right {
		position: relative;
		margin-top: 30px;
		height: fit-content;

		&::before {
			content: '';
			position: absolute;
			left: 48px;
			right: 15px;
			bottom: 0;
			height: 2px;
			background: $cBlack;
		}

		ul {
			margin: 0 0 80px 0;
			padding: 0;
			list-style: none;
			overflow: hidden;
			transition: height 250ms ease-in-out;

			p {
				font-weight: 300;
				font-size: 14px;
				hyphens: auto;

				strong {
					font-weight: 800;
				}

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

		@include respond-below(md) {
			&::before {
				left: 15px;
			}
		}
	}
}

.action-btn {
	position: absolute;
	width: 42px;
	height: 42px;
	background-color: $cSandDarker;
	bottom: 20px;
	right: 15px;
	cursor: pointer;
	border: 2px solid $cSandDarker;
	transition: background 250ms ease-in-out;

	&.active {
		background: $cWhite;

		&::after {
			height: 0;
		}

		&::before {
			background: $cSandDarker;
		}
	}

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 29px;
		height: 2px;
		background: $cWhite;
		transform: translate(-50%, -50%);
		transition: background 250ms ease-in-out;
	}

	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2px;
		height: 29px;
		background: $cWhite;
		transform: translate(-50%, -50%);
		transition: height 250ms ease-in-out;
	}
}

#product-colors {
	.product-colors {
		display: none;

		&.active {
			display: block;
		}
	}

	.col-left {
		text-align: right;

		h2 {
			font-weight: 400;
			font-size: 40px;
			letter-spacing: 1px;
			text-transform: uppercase;
			margin-bottom: 50px;
		}

		@include respond-below(md) {
			text-align: left;
			margin-bottom: 50px;

			h2 {
				margin-bottom: 30px;

				br {
					display: none;
				}
			}
		}
	}

	.col-right {
		border-left: 2px solid $cBlack;

		.color-tiles-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 50px;
			row-gap: 40px;
		}

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

		.color-tiles {
			.color-tiles-title {
				h2 {
					font-weight: 300;
					font-size: 20px;
					margin-bottom: 25px;

					&.color-tiles-title-big {
						font-size: 32px;
						font-weight: 400;
					}
				}
			}

			.color-tiles-data {
				display: flex;
				flex-direction: column;
				row-gap: 17px;
				overflow: hidden;

				li {
					display: flex;
					flex-direction: row;
					align-items: center;
					column-gap: 17px;

					img {
						max-height: 30px;
						width: 170px !important;
						object-fit: cover;
					}

					p {
						font-weight: 400;
						font-size: 13px;
						margin-bottom: 0;
					}
				}
			}

			.action-btn {
				position: relative;
				bottom: 0;
				left: 0;
				right: auto;
				margin-top: 17px;
			}
		}

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

.accordion-box {
	list-style: none;
	padding: 70px 30px 70px 70px;
	margin: 0;

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

		h3 {
			font-size: 25px;
			font-weight: 200;
			margin-bottom: 12px;

			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			justify-content: flex-end;
			column-gap: 16px;

			cursor: pointer;
		}

		p {
			display: none;
			font-size: 14px;
			font-weight: 300;
			margin-bottom: 0;
		}
	}

	.accordion-btn {
		position: relative;
		width: 46px;
		height: 46px;
		background: $cBlack;
		border: 1px solid $cBlack;
		transition: background 250ms ease-in-out;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 29px;
			height: 2px;
			background: $cWhite;
			transform: translate(-50%, -50%);
			transition: background 250ms ease-in-out;
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 2px;
			height: 29px;
			background: $cWhite;
			transform: translate(-50%, -50%);
			transition: height 250ms ease-in-out;
		}

		&.active {
			background: $cWhite;

			&::before {
				background: $cBlack;
			}

			&::after {
				height: 0;
			}
		}
	}
}

#our-projects {
	.our-projects-head {
		h2 {
			color: $cTxtCloud;
			text-align: center;
			font-size: 50px;
			margin-bottom: 40px;
		}
	}

	.our-projects-data {
		background: $cLightGray;

		.slider-our-projects {
			.swiper-slide {
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: center;

				.slide-data {
					text-align: right;
					max-width: 250px;
					margin-left: auto;
					margin-right: 60px;

					h2 {
						font-weight: 300;
						font-size: 32px;
						letter-spacing: 1px;
						text-transform: uppercase;
						margin-bottom: 20px;
					}

					p {
						font-size: 12px;
						line-height: 2;

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

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

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

					.slide-img {
						order: 1;
						text-align: center;
					}

					.slide-data {
						order: 2;
						margin-right: 0;
						margin-left: 0;
						max-width: unset;
						text-align: center;
						padding-bottom: 30px;
					}
				}
			}
		}

		.slider-navidation {
			.swiper-button {
				width: 90px;
				height: 90px;
				border-radius: 100%;
				background: $cWhite;

				&-next {
					&::after {
						right: 17px;
						transform: translate(-50%, -50%) rotate(45deg);
					}

					@include respond-above(md) {
						right: 15px;
						transform: translateX(50%);
					}
				}

				&-prev {
					&::after {
						left: 30px;
						transform: translate(-50%, -50%) rotate(225deg);
					}

					@include respond-above(md) {
						left: 15px;
						transform: translateX(50%);
					}
				}

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

				&::after {
					content: '';
					position: absolute;
					// right: 17px;
					top: 50%;
					// transform: translate(-50%, -50%) rotate(45deg);
					width: 14px;
					height: 14px;
					border-right: 2px solid $cBlack;
					border-top: 2px solid $cBlack;
				}
			}
		}
	}
}

#cookie-information {
	font-size: 14px;
}

.main-content {
	padding-top: 75px;
	padding-bottom: 75px;
}

.files {
	list-style: none;
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	margin: 0;

	li {
		background-color: #ebebeb;
		border-radius: 3px;
		transition: background-color 0.3s;

		a {
			margin: 0;
			padding: 20px;
			display: block;
			color: #000;

			i {
				font-size: 22px;
				margin-right: 10px;
				top: 5px;
				position: relative;
			}
		}

		&:hover {
			background-color: lighten($color: #ebebeb, $amount: 5%);

			a {
				color: lighten($color: black, $amount: 50%);
			}
		}
	}
}

.article-password {
	width: 500px;
	margin: 0 auto;
	padding: 50px 50px 40px;
	box-shadow: 0 0px 4px 0 #00000040;

	p {
		color: #000;
		font-size: 15px;
		text-transform: uppercase;
		margin-bottom: 0;
	}

	form {
		display: flex;
		flex-direction: column;
		row-gap: 12px;

		input[type='password'],
		input[type='email'] {
			height: 46px;
			border: 1px solid #000;
			border-radius: 0;
		}

		input[type='submit'] {
			height: 46px;
			font-size: 15px;
			padding: 13px 30px 15px;
			background: #000;
			border: none;
			border-radius: 0;
			text-transform: uppercase;
		}
	}
}