@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';

.page-content {
	overflow: hidden;
}

.box-01 {
	#nav_tabs {
		max-width: 635px;
	}
}

.box-03 {
	#product-popup-box {
		.row {
			.box-data {
				ul {
					li {
						@include respond-above(lg) {
							&:nth-child(1) {
								left: 230px;
								top: 15px;
								right: 150px;

								p {
									max-width: 310px;
								}
							}
							&:nth-child(2) {
								left: 120px;
								top: 150px;
								right: 40px;

								p {
									max-width: 380px;
								}
							}
							&:nth-child(3) {
								left: 445px;
								top: 260px;
								right: 100px;
								p {
									max-width: 370px;
								}
							}
							&:nth-child(4) {
								left: 0px;
								top: 340px;
								right: 40px;
								p {
									max-width: 430px;
								}
							}
							&:nth-child(5) {
								left: 440px;
								top: 490px;
								right: 40px;

								p {
									max-width: 270px;
								}
							}
							&:nth-child(6) {
								left: 300px;
								top: 505px;
								right: 200px;

								&::after {
									display: none;
								}

								p {
									max-width: 250px;

									margin-left: 0;
									text-align: left;
									padding-top: 55px;
									padding-left: 25px;
									padding-right: 0;

									&::after {
										left: 9px;
										top: 19px;
										height: calc(100% - 19px);
									}
								}
							}
						}

						@include respond-below(lg) {
							&:nth-child(1) {
								&::before {
									content: '1';
									left: 230px;
									top: 15px;
								}
							}
							&:nth-child(2) {
								&::before {
									content: '2';
									left: 240px;
									top: 65px;
								}
							}
							&:nth-child(3) {
								&::before {
									content: '3';
									left: 120px;
									top: 150px;
								}
							}
							&:nth-child(4) {
								&::before {
									content: '4';
									left: 445px;
									top: 260px;
								}
							}
							&:nth-child(5) {
								&::before {
									content: '5';
									left: 0px;
									top: 340px;
								}
							}
							&:nth-child(6) {
								&::before {
									content: '6';
									left: 440px;
									top: 490px;
								}
							}
							&:nth-child(7) {
								&::before {
									content: '7';
									left: 460px;
									top: 475px;
								}
							}
							&:nth-child(8) {
								&::before {
									content: '8';
									left: 350px;
									top: 495px;
								}
							}
						}

						@include respond-below(xs) {
							&:nth-child(1) {
								&::before {
									left: 140px;
									top: 5px;
								}
							}
							&:nth-child(2) {
								&::before {
									left: 150px;
									top: 60px;
								}
							}
							&:nth-child(3) {
								&::before {
									left: 80px;
									top: 125px;
								}
							}
							&:nth-child(4) {
								&::before {
									left: 280px;
									top: 160px;
								}
							}
							&:nth-child(5) {
								&::before {
									left: 10px;
									top: 185px;
								}
							}
							&:nth-child(6) {
								&::before {
									left: 280px;
									top: 260px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-05 {
	.scontainer-content {
		.row {
			&:nth-child(1) {
				.color-tiles {
					.color-tiles-data {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
						gap: 30px;

						@include respond-below(md) {
						}
					}
				}
			}
			&:nth-child(3) {
				.color-tiles {
					.color-tiles-data {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
						gap: 20px;

						li {
							flex-direction: column;
							align-items: flex-start;
							row-gap: 15px;
						}

						@include respond-below(md) {
						}
					}
				}
			}
		}
	}
}

.box-06 {
	display: none;
	margin-bottom: 100px;

	.color_tiles_head {
		padding: 45px 50px 30px;
		background: #f4f4f4;
		margin-bottom: 45px;

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

	#product-colors {
		.color_tiles {
			> h2 {
				position: relative;
				font-weight: 700;
				font-size: 25px;
				line-height: 30px;
				letter-spacing: 0.15em;
				text-transform: uppercase;
				margin-bottom: 0px;
				padding-left: 220px;

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

			.color_tiles_data {
				position: relative;
				padding-top: 50px;
				padding-left: 60px;

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

				.color_box {
					&:not(:last-child) {
						margin-bottom: 90px;
					}

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

					h2 {
						position: relative;
						font-weight: 700;
						font-size: 25px;
						line-height: 30px;
						letter-spacing: 0.15em;
						text-transform: uppercase;
						margin-bottom: 17px;

						&::before {
							content: '';
							position: absolute;
							top: 15px;
							right: 0;
							width: 100%;
							height: 1px;
							background: #6c6d70;
							z-index: -1;
						}

						span {
							background: $cWhite;
							padding-right: 50px;
						}
					}

					ul {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						gap: 20px;

						li {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							gap: 15px;
							width: calc((100% / 5) - 16px);

							img {
								width: 100%;
								max-width: 163px;
								height: 100%;
								max-height: 44px;
								object-fit: cover;
							}

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

	@include respond-below(xl) {
		#product-colors {
			.color_tiles {
				.color_tiles_data {
					.color_box {
						ul {
							li {
								width: calc(100% / 4 - 15px);
							}
						}
					}
				}
			}
		}
	}

	@include respond-below(lg) {
		#product-colors {
			.color_tiles {
				.color_tiles_data {
					.color_box {
						ul {
							li {
								width: calc(100% / 3 - 15px);
							}
						}
					}
				}
			}
		}
	}

	@include respond-below(md) {
		#product-colors {
			.color_tiles {
				.color_tiles_data {
					.color_box {
						ul {
							li {
								width: calc(100% / 2 - 10px);
							}
						}
					}
				}
			}
		}
	}

	@include respond-below(xs) {
		#product-colors {
			.color_tiles {
				> h2 {
					padding-left: 100px;

					&::before {
						width: 70px;
					}
				}

				.color_tiles_data {
					.color_box {
						ul {
							li {
								width: 100%;
								align-items: center;
							}
						}
					}
				}
			}
		}
	}
}

.box-07 {
	display: none;
	.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;
		}

		@include respond-below(sm) {
			.color_pallet_title {
				padding-left: 150px;

				&::before {
					width: 120px;
				}
			}
		}

		@include respond-below(xs) {
			.color_pallet_title {
				padding-left: 90px;

				&::before {
					width: 60px;
				}
			}
		}
	}
}

.box-09 {
	margin-bottom: 50px;

	.scontainer-content {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 100vw;
			background-color: #f4f4f4;
		}

		.row-first {
			.col-lg-5 {
				position: relative;

				img {
					position: absolute;
					left: 0;
					top: 0;
					max-width: unset !important;
					width: fit-content !important;
					height: 100%;
				}
			}
		}

		.col-7 {
			&-first {
				padding-top: 80px;
				padding-left: 100px;
				margin-bottom: 75px;

				> .tile {
					&:nth-child(1) {
						margin-bottom: 75px;
					}
					&:nth-child(2) {
						.tile-data {
							display: flex;
							flex-direction: row;
							align-items: flex-end;
							gap: 30px;

							p {
								margin-bottom: 0;
							}

							@include respond-below(xs) {
								flex-direction: column;
								align-items: center;
							}
						}
					}
				}
			}
			&-second {
				padding-bottom: 80px;
				padding-left: 100px;

				.tile {
					position: relative;
					padding-left: 50px;
					padding-top: 50px;

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

		.col-5 {
			&-second {
				padding-top: 50px;
				padding-bottom: 50px;

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

						h2 {
							font-weight: 300;
							font-size: 25px;
							line-height: 30px;
							letter-spacing: 0.07em;
							text-transform: uppercase;

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

		.tile {
			&-header {
				position: relative;
				padding-left: 60px;

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

				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					width: 1px;
					height: 100%;
					background: $cBlack;
				}

				h2 {
					font-weight: 700;
					font-size: 25px;
					line-height: 25px;
					letter-spacing: 0.15em;
					text-transform: uppercase;
					margin-bottom: 0;
				}
			}
			&-data {
				position: relative;
				padding-top: 60px;
				padding-left: 60px;
				border-left: 1px solid $cBlack;

				ul {
					&.ul-1 {
						margin-bottom: 75px;

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

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

							@include respond-below(xs) {
								flex-direction: column;
							}
						}
					}
					&.ul-2 {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						gap: 20px;

						li {
							max-width: 225px;

							h3 {
								font-weight: 700;
								font-size: 20px;
								line-height: 24px;
							}
						}

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

					li {
						.tile-data-texts {
							h3 {
								font-weight: 700;
								font-size: 20px;
								line-height: 24px;
							}
							p {
								font-weight: 300;
								font-size: 16px;
								line-height: 25px;
								margin-bottom: 0;
							}
						}
					}
				}

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

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

		@include respond-below(sm) {
			.col-7 {
				&-first {
					padding-left: 30px;
					padding-top: 30px;
					margin-bottom: 30px;
				}
				&-second {
					padding-left: 30px;
					padding-bottom: 30px;

					.tile {
						padding-right: 50px;
					}
				}
			}
			.col-5 {
				&-second {
					padding-left: 80px;
					padding-right: 80px;

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