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

body {
	overflow-x: hidden;
}

.box-01 {
	padding: 100px 0;
	overflow: hidden;

	ul {
		position: relative;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		column-gap: 50px;

		@include respond-above(md) {
			&::before {
				content: '';
				position: absolute;
				top: calc(144px / 2);
				height: 1px;
				left: 50%;
				width: 100vw;
				transform: translate(-50%, -50%);
				background: $cBlack;
			}
		}

		li {
			position: relative;
			display: flex;
			flex-direction: column;
			row-gap: 25px;
			z-index: 1;
			background: $cWhite;

			img {
				width: 144px;
				height: 144px;
				border-radius: 100%;
				border: 1px solid $cBlack;
				object-fit: none;
				background-color: $cWhite;
			}
			p {
				color: $cTxtBlack;
				font-size: 16px;
				margin-bottom: 0;
				text-align: center;
			}
		}

		@include respond-below(md) {
			flex-direction: column;
			align-items: center;
			row-gap: 40px;

			li {
				&::before {
					content: '';
					position: absolute;
					top: calc(144px / 2);
					height: 1px;
					left: 50%;
					width: 100vw;
					transform: translate(-50%, -50%);
					background: $cBlack;
					z-index: -1;
				}
			}
		}
	}
}

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

	.section {
		&.section_1 {
			#scontainer-38 {
				.row {
					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;
					}

					.col-left {
						text-align: right;
						h3 {
							font-size: 22px;
							font-weight: 300;
							text-transform: uppercase;
							max-width: 200px;
							margin-left: auto;
							margin-bottom: 0;
							padding: 50px 20px 50px 0;
						}

						@include respond-below(md) {
							h3 {
								max-width: unset;
								text-align: center;
								padding: 30px 0;
							}
						}
					}
					.col-right {
					}
				}
			}
		}

		&.section_2 {
			display: grid;
			grid-template-columns: 450px minmax(430px, 1fr);
			column-gap: 140px;
			row-gap: 50px;
			grid-template-areas:
				's1 s3'
				's2 s4';

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

			@include respond-below(md) {
				grid-template-columns: 1fr;
				grid-template-areas:
					's1'
					's2'
					's3'
					's4';
			}

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

					&.active {
						display: block;
					}
				}
			}

			#scontainer-39 {
				grid-area: s1;

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

			#scontainer-40 {
				grid-area: s2;

				h3 {
					display: block;
					color: $cTxtWhite;
					font-size: 25px;
					font-weight: 200;
					margin-bottom: 3px;
					padding: 12px 20px 8px;
					background: $cBlack;
				}

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

				@include respond-below(md) {
					text-align: center;
					width: fit-content;
					max-width: 451px;
					margin: 0 auto;
				}
			}

			#scontainer-41 {
				grid-area: s3;

				h2 {
					color: $cTxtBlack;
					font-size: 25px;
					font-weight: 200;
					margin-bottom: 30px;
				}

				p {
					font-size: 14px;
					font-weight: 300;
					line-height: 2;
					padding-bottom: 0;
				}

				@include respond-below(md) {
					text-align: center;
					width: fit-content;
					max-width: 451px;
					margin: 0 auto;
				}
			}

			#scontainer-42 {
				grid-area: s4;

				p {
					font-size: 14px;
					font-weight: 300;
					margin-bottom: 0;
					line-height: 2;
				}
				ul {
					margin-bottom: 0;
					padding-left: 15px;
				}

				@include respond-below(md) {
					text-align: center;
					width: fit-content;
					max-width: 451px;
					margin: 0 auto;
				}
			}
		}
	}
}

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

	.row_1 {
		margin-bottom: 60px;

		.col-left {
			h3 {
				color: $cTxtWhite;
				font-size: 40px;
				font-weight: 200;
				margin-bottom: 0;
				background: $cBlack;

				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			@include respond-below(md) {
				h3 {
					max-width: 600px;
					margin: 0 auto;
					padding: 60px 20px;
				}
			}
		}
		.col-right {
			@include respond-below(md) {
				text-align: center;
			}
		}
	}
	.row_2 {
		position: relative;
		padding-bottom: 70px;

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

		ul {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
			column-gap: 80px;
			row-gap: 25px;
			// max-width: 1000px;
			margin: 0 auto;
			padding: 0;
			list-style: none;

			li {
				display: flex;
				flex-direction: column;
				// align-items: center;
				row-gap: 10px;
				width: fit-content;

				img {
					max-height: 65px;
					width: 185px !important;
					object-fit: cover;
				}

				p {
					color: $cTxtBlack;
					font-size: 14px;
					font-weight: 300;
					margin-bottom: 0;
					text-align: center;
				}
			}
		}

		h3 {
			&:not(:first-child) {
				margin-top: 30px;
			}
		}
	}
}

.box-05 {
	margin-bottom: 140px;

	.row_1 {
		.col-img {
			@include respond-below(md) {
				margin-bottom: 40px;
			}
		}
		.col-text {
			text-align: right;

			.col-data {
				border-top: 2px solid black;
				margin-left: auto;
				margin-right: 80px;
			}

			@include respond-below(md) {
				text-align: center;
				order: 1;

				.col-data {
					border: none;
					margin-right: auto;
				}
			}
		}
	}

	.row_2 {
		h2 {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 90px 20px 80px;

			color: $cTxtBlack;
			font-size: 40px;
			font-weight: 200;
			margin-bottom: 0;
			background: $cLightGray;
		}

		@include respond-below(md) {
			h2 {
				padding: 50px 20px 40px;
			}
		}
	}

	.row_3 {
		.col-text {
			text-align: left;

			.col-data {
				border-bottom: 2px solid black;
				margin-left: 80px;
			}
			@include respond-below(md) {
				text-align: center;

				.col-data {
					border: none;
					margin-left: auto;
				}
			}
		}
		.col-img {
			display: flex;
			justify-content: flex-end;

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

	.col-text {
		h3 {
			color: $cTxtBlack;
			font-size: 25px;
			font-weight: 200;
			margin-bottom: 30px;
		}
		p {
			color: $cTxtBlack;
			font-size: 14px;
			font-weight: 300;
			margin-bottom: 0;
			line-height: 2;
		}

		.col-data {
			max-width: 420px;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			@include respond-below(md) {
				max-width: unset;
			}
		}
	}

	.col-img {
		img {
			width: 50vw !important;
		}

		@include respond-above(md) {
			min-height: 470px;
			img {
				height: 100%;
				object-fit: cover;
			}
		}
		@include respond-below(md) {
			img {
				width: 100% !important;
			}
		}
	}
}