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

.container {
	@include respond-above(xl) {
		max-width: 1300px;
	}
}

.page-content {
	overflow: hidden;
}

.box-01 {
	margin-bottom: 180px;
	.box-01-wrapper {
		padding-top: 20px;
		display: grid;
		grid-template-columns: 400px minmax(700px, 1fr);
		column-gap: 150px;
		grid-template-areas:
			's1 s1'
			's4 s4'
			's2 s2'
			's3 s5';

		.section {
			&_1 {
				grid-area: s1;
				margin-bottom: 60px;

				.tiles {
					display: flex;
					flex-direction: row;
					column-gap: 130px;
					row-gap: 50px;
					width: 100%;
					max-width: fit-content;
					margin-left: auto;
					margin-right: auto;

					.tile {
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						row-gap: 28px;
						width: 200px;
						text-align: center;

						&:not(:last-child) {
							&::before {
								content: '';
								position: absolute;
								right: calc(-130px / 2);
								top: 0;
								bottom: 0;
								width: 1px;
								background: $cBlack;
							}
						}

						p {
							margin-bottom: 0;
						}
					}
				}
			}
			&_2 {
				grid-area: s2;
				padding-top: 80px;
				padding-bottom: 80px;

				.scontainer-content {
					h2 {
						font-weight: 400;
						font-size: 30px;
						line-height: 36px;
						letter-spacing: 0.07em;
						text-transform: uppercase;
						margin-bottom: 32px;
					}

					#nav_tabs {
						flex-direction: row;
						flex-wrap: wrap;
						row-gap: 32px;
						column-gap: 50px;
						max-width: unset;
						padding-bottom: 0;
						margin-bottom: 0;
						justify-content: center;

						&::before {
							display: none;
						}

						li {
							width: 100%;
							max-width: 300px;

							a {
								font-size: 18px;
								line-height: 22px;
								padding: 30px;
							}
						}
					}
				}
			}
			&_3 {
				grid-area: s3;

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

						&.active {
							display: block;
						}

						img {
							margin-bottom: 80px;
							width: 100%;
							max-width: fit-content;
						}
						h3 {
							font-weight: 300;
							font-size: 30px;
							line-height: 36px;
							letter-spacing: 0.07em;
							text-transform: uppercase;
							margin-bottom: 22px;
						}

						p {
							font-weight: 400;
							font-size: 16px;
							line-height: 27px;
							letter-spacing: 0.07em;
							margin-bottom: 0;
						}

						ul {
							list-style: initial;
							padding-left: 20px;
						}
					}
				}
			}
			&_4 {
				grid-area: s4;

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

					.tile {
						&_2 {
							position: relative;
							&::before {
								content: '';
								position: absolute;
								top: 0;
								bottom: 0;
								width: 110px;
								background: rgba(#f4f4f4, 0.9);
							}

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

						&_1 {
							padding: 90px;
							display: flex;
							flex-direction: column;
							justify-content: center;
							background: rgba(#f4f4f4, 0.9);
						}

						h2 {
							position: relative;
							font-weight: 400;
							font-size: 30px;
							line-height: 36px;
							letter-spacing: 0.07em;
							text-transform: uppercase;
							padding-bottom: 33px;
							margin-bottom: 40px;

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

						p {
							font-weight: 400;
							font-size: 16px;
							line-height: 27px;
							letter-spacing: 0.07em;
						}
					}

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

						.tile {
							&_1 {
								padding: 30px;
							}
							&_2 {
								grid-row: 1;

								&::before {
									top: auto;
									left: 0;
									right: 0;
									height: 110px;
									width: 100%;
								}
							}
						}
					}
				}
			}
			&_5 {
				grid-area: s5;
				position: relative;
				padding-right: 50px;
				padding-bottom: 15px;

				&::before {
					content: '';
					position: absolute;
					bottom: 0;
					right: 0;
					width: 60%;
					height: 1px;
					background: #6c6d70;
				}
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					right: 0;
					width: 1px;
					height: 90%;
					background: #6c6d70;
				}
				#scontainer-49 {
					height: 100%;
				}

				.scontainer-content {
					height: 100%;
					.row {
						height: 100%;
						display: none;

						&.active {
							display: block;
						}
						.col-12 {
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
						}
						p {
							font-weight: 400;
							font-size: 16px;
							line-height: 27px;
							letter-spacing: 0.07em;
						}
					}
				}
			}
		}
	}

	@include respond-below(xxl) {
		.box-01-wrapper {
			column-gap: 70px;
			grid-template-columns: 350px minmax(600px, 1fr);
		}
	}
	@include respond-below(lg) {
		.box-01-wrapper {
			grid-template-columns: 350px minmax(600px, 1fr);
		}
	}
	@include respond-below(md) {
		.box-01-wrapper {
			grid-template-columns: 1fr;
			grid-template-areas:
				's4'
				's2'
				's3'
				's5';
			row-gap: 60px;

			.section {
				&_1 {
					display: none;
				}
				&_3 {
					.scontainer-content {
						.row {
							img {
								display: block;
								margin-left: auto;
								margin-right: auto;
							}
						}
					}
				}
				&_5 {
					padding-bottom: 50px;
				}
			}
		}
	}
}

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

	.box-02-wrapper {
		.col-left {
			h3 {
				&:not(:first-child) {
					margin-top: 30px;
				}
			}
			ul {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				column-gap: 80px;
				row-gap: 15px;

				li {
					img {
						margin-bottom: 15px;
						width: 190px;
						max-width: 190px;
						height: 65px;
						object-fit: cover;
					}
					p {
						font-weight: 300;
						font-size: 12px;
						line-height: 20px;
						letter-spacing: 0.15em;
						text-transform: uppercase;
						margin-bottom: 0;
					}
				}
			}

			@include respond-below(md) {
				ul {
					column-gap: 55px;
				}
			}
		}

		.col-right {
			h2 {
				font-weight: 400;
				font-size: 30px;
				line-height: 36px;
				letter-spacing: 0.07em;
				text-transform: uppercase;
				padding-bottom: 28px;
				margin-bottom: 75px;
				margin-top: 20px;
				border-bottom: 1px solid $cBlack;
			}

			img {
				display: block;
				margin-left: auto;
			}
		}
	}
	@include respond-below(md) {
		.box-02-wrapper {
			.row {
				flex-direction: column-reverse;
				gap: 60px;
			}
			.col-lg-6 {
				&:nth-child(2) {
					img {
						margin-right: auto;
					}
				}
			}
		}
	}
}

.box-03 {
	.box-03-wrapper {
		.scontainer-content {
			.row {
				&:nth-child(1) {
					margin-bottom: 35px;

					.tiles {
						.tile {
							&_1 {
								grid-column: 2;
								grid-row: 1;
							}
							&_2 {
								grid-column: 1;
								grid-row: 1;
							}
						}
					}
				}
				&:nth-child(2) {
					.tiles {
						.tile {
							&_1 {
								&::before {
									right: 0;
								}
							}
							&_2 {
							}
						}
					}
				}
			}
		}
		.tiles {
			display: grid;
			grid-template-columns: 1fr 1fr;

			.tile {
				&_1 {
					position: relative;
					&::before {
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						width: 110px;
						background: rgba(#f4f4f4, 0.9);
					}

					img {
						height: 100%;
						object-fit: cover;
					}
				}
				&_2 {
					padding: 90px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					background: rgba(#f4f4f4, 0.9);
				}
				img {
				}

				h2 {
					position: relative;
					font-weight: 400;
					font-size: 30px;
					line-height: 36px;
					letter-spacing: 0.07em;
					text-transform: uppercase;
					padding-bottom: 33px;
					margin-bottom: 40px;

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

				h4 {
					font-weight: 400;
					font-size: 18px;
					line-height: 22px;
					margin-bottom: 30px;
				}
				p {
					font-weight: 400;
					font-size: 16px;
					line-height: 27px;
					letter-spacing: 0.07em;
				}
			}
		}
	}

	@include respond-below(md) {
		.box-03-wrapper {
			.row {
				&:first-child {
					.tiles {
						grid-template-columns: 1fr;
						.tile {
							&_1 {
								grid-row: auto !important;
								grid-column: auto !important;

								&::before {
									height: 110px;
									width: 100%;
									left: 0;
									right: 0;
									top: auto;
								}
							}
							&_2 {
								grid-row: auto !important;
								grid-column: auto !important;
							}
						}
					}
				}
				&:last-child {
					.tiles {
						grid-template-columns: 1fr;

						.tile {
							&_1 {
								&::before {
									height: 110px;
									width: 100%;
									left: 0;
									right: 0;
									top: auto;
								}
							}
						}
					}
				}
			}
		}
	}
	@include respond-below(xs) {
		.box-03-wrapper {
			&:first-child {
				.tiles {
					.tile {
						&_2 {
							padding: 30px;
						}
					}
				}
			}
		}
	}
}

.box-04 {
	&#our-catalog {
		.scontainer-content {
			& > .row {
				&:nth-child(1) {
					.col-12 {
						&::before {
							content: '';
							position: absolute;
							inset: 0 15px;
							background-color: $cBlack;
						}

						img {
							position: relative;
						}
					}
				}
				&:nth-child(2) {
					a {
						font-size: 17px;
						letter-spacing: 0.05em;
						line-height: 20px;
					}

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

						&:nth-child(1) {
							&::before {
								bottom: 45px;
								background: rgba(231, 220, 208, 0.8);
							}
						}
						&:nth-child(2) {
							&::before {
								bottom: 25px;
								background: #d8d8d8;
							}
						}
						&:nth-child(3) {
							&::before {
								bottom: 5px;
								background: #6c6d70;
							}
						}
					}
				}
			}
		}
	}
}