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

#nav_tabs {
	li {
		a {
			font-weight: 400;
			font-size: 31.3px;
			line-height: 38px;
			letter-spacing: 0.07em;
			text-transform: uppercase;
		}
	}
}

.box-01 {
	.turen-info {
		display: none;

		&.active {
			display: block;
		}
		.tiles {
			display: flex;
			flex-direction: row;
			.tile {
				&-1 {
					position: relative;
					padding: 120px 120px 520px 120px;
					background: rgba(244, 244, 244, 0.6);

					h2 {
						font-weight: 400;
						font-size: 30px;
						line-height: 36px;
						letter-spacing: 0.07em;
						text-transform: uppercase;
						margin-bottom: 35px;
						padding-bottom: 35px;
						border-bottom: 1px solid $cBlack;
					}
					h4 {
						font-weight: 400;
						font-size: 18px;
						line-height: 22px;
					}
					p {
						font-weight: 400;
						font-size: 16px;
						line-height: 27px;
						letter-spacing: 0.07em;
					}
				}
				&-2 {
					position: relative;
					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						width: 150px;
						background: rgba(244, 244, 244, 0.6);
					}
				}
			}
		}
	}
}

.box-02 {
	margin-top: -250px;
	margin-bottom: 120px;

	.box-data {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		ul {
			position: absolute;
			width: 100%;
			li {
				position: relative;
				margin-top: 150px;

				&::before {
					content: "";
					position: absolute;
					width: 19px;
					height: 19px;
					background: rgba(255, 255, 255, 0.3);
					border: 1px solid #000;
					border-radius: 100%;
					right: 150px;
				}
				&::after {
					content: "";
					position: absolute;
					top: calc(19px / 2);
					right: 169px;
					left: 0;
					height: 1px;
					background: #000;
				}

				p {
					position: relative;
					font-weight: 300;
					font-size: 16px;
					line-height: 22px;
					letter-spacing: 0.05em;
					margin-bottom: 0;
					max-width: 720px;
					padding: 50px 0 0 50px;

					&::before {
						content: "";
						position: absolute;
						top: 10px;
						bottom: 0;
						left: 0;
						width: 1px;
						background: #000;
					}
				}
			}
		}
	}
}

.box-03 {
	margin-bottom: 60px;

	.tiles {
		.tile {
			&-1 {
				position: absolute;
				height: 100%;
				z-index: -1;
				img {
					height: 100%;
					object-fit: cover;
				}
			}
			&-2 {
				display: flex;
				flex-direction: column;
				row-gap: 25px;
				width: 100%;
				max-width: 1000px;
				margin-left: auto;
				padding: 40px 80px 90px 80px;
				background: rgba(244, 244, 244, 0.9);
				.row {
					position: relative;
					padding-bottom: 25px;

					&::before {
						content: "";
						position: absolute;
						bottom: 0;
						left: 15px;
						right: 0;
						width: calc(100% - 30px);
						height: 1px;
						background: $cBlack;
					}
					&:not(:last-child) {
						.col-12 {
							.mini-tile {
								grid-template-areas:
									"img1 img2"
									"img1 text1";
								column-gap: 15px;
								img {
									max-width: 120px;
									&:nth-child(1) {
										grid-area: img1;
									}
									&:nth-child(2) {
										grid-area: img2;
									}
								}
								p {
									grid-area: text1;
									font-weight: 300;
									font-size: 19.795px;
									line-height: 1;
									color: #1d1d1b;
									margin-bottom: 0;
									margin-top: -50px;
									text-align: right;
									width: fit-content;
									padding-left: 30px;

									strong {
										display: block;
										font-weight: 700;
									}
								}
							}
						}
					}
					&:last-child {
						.col-12 {
							.mini-tile {
								position: relative;
								grid-template-areas:
									"img1 img2"
									"img1 text1"
									"img1 text3"
									"img1 text2";
								column-gap: 15px;

								&::before {
									content: "";
									position: absolute;
									top: 10px;
									left: 118px;
									width: 50px;
									height: 50px;
									background-image: url("/images/icons/custom-arrow-1.svg");
									background-repeat: no-repeat;
								}
								&::after {
									content: "";
									position: absolute;
									bottom: 35px;
									left: 118px;
									width: 30px;
									height: 10px;
									background-image: url("/images/icons/custom-arrow-2.svg");
									background-repeat: no-repeat;
								}
								img {
									&:nth-child(1) {
										grid-area: img1;
										min-width: 120px;
										max-width: 120px;
									}
									&:nth-child(2) {
										grid-area: img2;
									}
									&:nth-child(3) {
										grid-area: img3;
									}
								}
								p {
									font-weight: 300;
									font-size: 19.795px;
									line-height: 1;
									color: #1d1d1b;
									margin-bottom: 0;
									text-align: right;
									padding-right: 15px;
									margin-top: 7px;

									&:nth-child(3) {
										grid-area: text1;
										margin-bottom: 20px;
									}
									&:nth-child(5) {
										grid-area: text2;
										font-weight: 700;
									}
								}
							}
						}
					}
					.col-12 {
						display: flex;
						align-items: center;
						justify-content: space-between;
						> p {
							font-weight: 400;
							font-size: 18px;
							line-height: 22px;
							color: #343431;
							width: 100%;
							max-width: 390px;
						}

						.mini-tile {
							display: grid;
							grid-template-columns: 1fr 1fr;
						}
					}
				}
			}
		}
	}
}

.box-04 {
	margin-bottom: 115px;

	.tiles {
		display: flex;
		flex-direction: row;
		.tile {
			&-1 {
				padding: 70px 30px 70px 80px;
				background: rgba(244, 244, 244, 0.6);
			}
			&-2 {
				position: relative;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					width: 150px;
					background: rgba(244, 244, 244, 0.6);
				}
				img {
					height: 100%;
					width: 100%;
					max-width: fit-content;
					object-fit: cover;
				}
			}
		}
	}
}

.box-05 {
	margin-bottom: 300px;
	h2 {
		position: relative;
		font-weight: 400;
		font-size: 30px;
		line-height: 1;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		padding-left: 250px;
		margin-bottom: 95px;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 15px;
			height: 1px;
			width: 210px;
			background: $cBlack;
		}
	}

	.tiles {
		position: relative;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		padding-left: 100px;
		gap: 160px;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			top: -110px;
			width: 1px;
			background: $cBlack;
		}
		.tile {
			width: 100%;
			max-width: 320px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			h3 {
				color: $cTxtBlack;
				font-weight: 400;
				font-size: 31.3px;
				line-height: 38px;
				letter-spacing: 0.07em;
				text-transform: uppercase;
				margin-bottom: 35px;
			}
			ul {
				li {
					padding-bottom: 12px;
					margin-bottom: 12px;
					border-bottom: 1px solid $cBlack;
					a {
						position: relative;
						color: $cTxtBlack;
						font-weight: 400;
						font-size: 18px;
						line-height: 22px;
						text-align: center;
						text-transform: uppercase;
						padding-right: 30px;

						&::before {
							content: "";
							position: absolute;
							right: 0;
							width: 19px;
							height: 19px;
							background-image: url("/upload/filemanager/Icons/arrow_right_black.svg");
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
							transition: all 150ms ease-in;
						}
					}
				}
			}
		}
	}
}