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

@import "_mixins";
@import "_variables";

.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(123px / 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;

			&.contact-us {
				width: 100%;
				max-width: 123px;
				height: 123px;
				background: $cWhite;
				border: 1px solid $cBlack;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				a {
					position: relative;
					color: $cTxtBlack;
					padding-bottom: 10px;

					&::before {
						content: "";
						position: absolute;
						bottom: 0;
						left: 50%;
						width: 42px;
						height: 2px;
						background: $cBlack;
						transform: translateX(-50%);
					}

					&::after {
						content: "";
						position: absolute;
						bottom: -5px;
						left: calc(50% + 15px);
						width: 12px;
						height: 12px;
						border-right: 2px solid $cBlack;
						border-bottom: 2px solid $cBlack;
						transform: translateX(-50%) rotate(-45deg);
					}
				}
			}

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

		@include respond-below(md) {
			flex-wrap: wrap;
			row-gap: 40px;
		}
	}
}

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

	.scontainer-content {
		max-width: 790px;
		margin: 0 auto;

		.row {
			@include respond-above(md) {
				background-image: url("/upload/filemanager/Pages/About-us/img-1.jpg");
				background-repeat: no-repeat;
				background-size: cover;
			}

			.col-left {
				@include respond-above(md) {
					img {
						display: none;
					}
				}
				@include respond-below(md) {
					order: 1;
				}
			}
			.col-right {
				padding: 60px;
				background-color: rgba($cWhite, 0.7);

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

			p {
				font-size: 12px;

				&:nth-child(1) {
					margin-bottom: 60px;
				}
				&:nth-child(2) {
					margin-bottom: 0;
				}

				strong {
					display: block;
					text-align: right;
					font-weight: 700;
				}

				@include respond-below(md) {
					text-align: center;
					&:nth-child(1) {
						margin-bottom: 20px;
					}

					strong {
						text-align: center;
					}
				}
			}
		}
	}
}

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

	h2 {
		font-weight: 400;
		font-size: 30px;
		letter-spacing: 1px;
		text-transform: uppercase;
		margin-bottom: 0px;
		padding-right: 35px;
		text-align: right;

		@include respond-below(md) {
			padding-right: 0;
			text-align: center;
		}
	}
	.row {
		&.row_1 {
			padding: 60px;

			.col-left {
				position: relative;

				@include respond-above(md) {
					&::before {
						content: "";
						position: absolute;
						right: 0;
						top: 0;
						width: 2px;
						height: 170px;
						background: $cBlack;
					}
				}
			}
			.col-right {
				p {
					font-size: 14px;
					padding-left: 35px;
					line-height: 2;
					margin-bottom: 0;

					@include respond-below(md) {
						text-align: center;
						padding-left: 0;
					}
				}
			}
			@include respond-below(md) {
				padding: 0;
				margin-bottom: 50px;
			}
		}
		&.row_2 {
			@include respond-below(md) {
				gap: 30px;
				text-align: center;
			}
		}
	}
}

.box-04 {
	margin-bottom: 90px;
	background: $cLightGray;

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

	h2 {
		font-weight: 400;
		font-size: 32px;
		letter-spacing: 1px;
		text-transform: uppercase;
		margin-bottom: 0px;
		padding: 65px 0;
	}

	p {
		font-size: 14px;
		line-height: 2;
		margin-bottom: 0;
	}

	.col-left {
		position: relative;

		h2 {
			text-align: right;
		}

		p {
			width: 100%;
			max-width: 330px;
			margin-left: auto;
			text-align: right;
			padding-top: 110px;
		}

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

			&::before {
				content: "";
				position: absolute;
				top: 80px;
				bottom: 80px;
				right: 0;
				width: 2px;
				background: $cBlack;
			}
		}
		@include respond-below(md) {
			display: flex;
			flex-direction: column;
			margin-bottom: 80px;

			h2 {
				order: 2;
				text-align: center;
				padding: 40px 0 30px;
			}
			p {
				order: 3;
				text-align: center;
				max-width: unset;
				padding-top: 0px;
			}
			img {
				order: 1;
				display: block;
				margin: 0 auto;
			}
		}
	}

	.col-right {
		padding-left: 50px;

		h2 {
			text-align: left;
		}

		p {
			width: 100%;
			max-width: 330px;
			text-align: left;
		}

		@include respond-below(md) {
			h2 {
				text-align: center;
				padding: 40px 0 30px;
			}
			p {
				text-align: center;
				max-width: unset;
			}
			img {
				display: block;
				margin: 0 auto;
			}
		}
	}
}

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

	.row {
		max-width: 800px;
		margin: 0 auto;
		border: 1px solid $cSandDarker;
	}

	.col-right {
		padding: 0 50px !important;
	}

	h2 {
		font-weight: 300;
		font-size: 32px;
		letter-spacing: 1px;
		text-transform: uppercase;
		margin-bottom: 30px;
	}
	p {
		font-size: 12px;
		line-height: 2;
		margin-bottom: 0;
	}

	@include respond-below(md) {
		.row {
			text-align: center;
			border: none;

			.col-left {
				margin-bottom: 50px;
			}
		}
	}
}

.box-06 {
	padding: 75px 0;
	.download-catalog {
		position: relative;
		width: 100%;
		max-width: 600px;
		display: block;
		color: $cTxtWhite;
		font-weight: 200;
		font-size: 26px;
		padding: 24px 120px 20px 45px;
		background-color: $cBlack;
		margin: 0 auto;

		&::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%);
		}
	}
}