.about-page {
	direction: rtl;
	width: 90%;
	margin: 50px auto 0;

	@media (max-width: 576px) {
		margin-top: 5px;
	}

	h4 {
		font-weight: bold;
		font-size: 25px;
		line-height: 42px;
		color: #455464;
		margin-bottom: 40px;

		@media (max-width: 576px) {
			font-size: 16px;
			margin-bottom: 20px;
		}
	}

	.about-text {
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: 30px;
		color: #455464;
		text-align: justify;

		@media (max-width: 576px) {
			margin-top: 30px;
		}
	}

	.about-content {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 100px;

		@media (max-width: 576px) {
			margin-bottom: 0;
		}
	}

	.about-video {
		position: relative;
		width: 470px;
		height: 299px;

		@media (max-width: 576px) {
			width: 330px;
			height: 218px;
		}

		.cover {
			width: 470px;
			height: 299px;
			position: absolute;
			top: 0;
			left: 0;

			@media (max-width: 576px) {
				width: 330px;
				height: 218px;
			}
		}

		video {
			width: 470px;
			height: 299px;

			@media (max-width: 576px) {
				width: 330px;
				height: 218px;
			}
		}

		.about-play {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 1;
			transform: translateY(-50%) translateX(-50%);
			width: 65px;
			height: 65px;
			border-radius: 50%;
			background-color: #c4c4c4;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			&:hover {
				background-color: #e0e0e0;
			}

			.icon {
				width: 24px;
				height: 24px;
				margin-left: 5px;
			}
		}
	}

	.about-items {
		width: 90%;
		direction: ltr;
		margin: 40px auto 80px;

		@media (max-width: 576px) {
			width: 100%;
		}

		.about-item {
			margin-top: -20px;

			@media (max-width: 576px) {
				padding: 0;
			}

			.about-contact {
				position: relative;
				height: 170px;
				background: #ffffff;
				box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.04);
				border-radius: 28px;
				padding: 40px 85px 0 40px;
				direction: rtl;

				@media (max-width: 576px) {
					margin: 50px auto;
					padding: 60px 20px 0 5px !important;
					height: 180px;
				}

				&:after {
					content: '';

					@media (min-width: 576px) {
						position: absolute;
						background-repeat: no-repeat;
						background-image: url('/assets/images/line-curve.png');
						width: 300px;
						height: 76px;
						top: 75px;
						left: -300px;
					}
					// @media (max-width: 576px) {
					// 	position: relative;
					// 	background-image: url('/assets/images/Line30.png') !important;
					// 	width: 30px;
					// 	height: 50px;

					// 	right: 50%;
					// 	left: 50%;
					// 	transform: translateX(-50%);
					// 	-webkit-transform: translateX(-50%);
					// 	-moz-transform: translateX(-50%);
					// 	-ms-transform: translateX(-50%);
					// 	-o-transform: translateX(-50%);
					// 	margin-top: 10px;
					// }
				}

				.icon {
					position: absolute;
					top: -25px;
					right: -10px;
				}

				h5 {
					font-weight: bold;
					font-size: 18px;

					@media (max-width: 576px) {
						margin-top: 10px;
					}
				}

				p {
					font-style: normal;
					font-weight: 300;
					font-size: 14px;
					text-align: right;
					color: #566e7a;
				}
			}
			.about-item-icon {
				@media (max-width: 576px) {
					position: relative;
					background-image: url('/assets/images/Line30.png') !important;
					width: 3px;
					height: 100px;
					// right: 50%;
					// left: 50%;
					margin: -50px auto;
					// 	transform: translateX(-50%) !important;
					// 	-webkit-transform: translateX(-50%) !important;
					// 	-moz-transform: translateX(-50%) !important;
					// 	-ms-transform: translateX(-50%) !important;
					// 	-o-transform: translateX(-50%) !important;
				}
			}

			&:nth-child(even) {
				.about-contact {
					padding: 40px 40px 0 85px;

					&:after {
						transform: scaleX(-1);
						right: -300px;
						left: auto;
					}

					.icon {
						left: -10px;
						right: auto;
					}
				}
			}

			&:last-child {
				.about-contact {
					&:after {
						display: none;
					}
				}
			}
		}
	}
}