.about-main-wrapper {
	display: flex;
	gap: 134px;

	@media (max-width: 1440px) {
		gap: 100px;
	}

	@media (max-width: 1024px) {
		gap: 70px;
	}

	@media (max-width: 992px) {
		flex-direction: column;
		gap: 40px;
	}

	.about-content-wrapper {
		flex: 0 0 calc(55% - 67px);
		display: flex;
		flex-direction: column;

		@media (max-width: 1440px) {
			flex: 0 0 calc(55% - 50px);
		}

		@media (max-width: 1024px) {
			flex: 0 0 calc(55% - 35px);
		}

		@media (max-width: 992px) {
			flex: 0 0 100%;
		}

		.about-sub-title {
			margin-bottom: 15px;
		}

		.about-main-title {
			margin-bottom: 30px;
		}

		.about-button-wrapper {
			margin-top: 30px;

			@media (max-width: 1024px) {
				margin-top: 20px;
			}
		}
	}

	.about-right-wrapper {
		display: flex;
		flex-direction: column;
		gap: 24px;
		flex: 0 0 calc(45% - 67px);

		@media (max-width: 1440px) {
			flex: 0 0 calc(45% - 50px);
		}

		@media (max-width: 1024px) {
			flex: 0 0 calc(45% - 35px);
		}

		@media (max-width: 992px) {
			flex: 0 0 100%;
		}

		.about-image-wrapper {
			height: 50%;

			@media (max-width: 1440px) {
				height: 60%;
			}

			img {
				border-radius: 20px;
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}

		.about-graph-wrapper {
			padding: 45px 35px;
			background-color: var(--primary-color);
			border-radius: 20px;
			height: 50%;
			display: flex;

			@media (max-width: 1440px) {
				padding: 35px 25px;
				height: 40%;
			}
		}

		/* Graph css start */
		:root {
			--chart-teal: #05AAAD;
			--chart-dark-teal: #2E6F7F;
			--chart-olive: #91B300;
		}

		.graph-wrapper {
			display: flex;
			align-items: center;
			gap: 31px;
			height: 100%;
			width: 100%;

			@media (max-width: 1440px) {
				gap: 18px;
			}

			@media (max-width: 992px) {
				gap: 16px;
				flex-direction: column;
				align-items: flex-start;
			}

			@media (max-width: 576px) {
				gap: 24px;
			}

			[dir="rtl"] & {
				flex-direction: row-reverse;
			}

			[dir="rtl"] &.graph-wrapper {
				flex-direction: row-reverse;
			}

			.graph-donut-container {
				width: 182px;
				display: flex;
				height: auto;

				@media (max-width: 1440px) {
					width: 150px;
				}

				@media (max-width: 1200px) {
					width: 120px;
				}

				@media (max-width: 992px) {
					width: 100%;
					justify-content: center;
				}
			}

			.graph-legend {
				display: flex;
				flex-direction: column;
				gap: 30px;
				flex: 1;

				@media (max-width: 1440px) {
					gap: 22px;
				}

				@media (max-width: 1200px) {
					gap: 18px;
				}

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

				@media (max-width: 576px) {
					gap: 14px;
				}

				.graph-legend-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 10px;

					[dir="rtl"] & {
						flex-direction: row-reverse;
					}

					.legend-item-country {
						display: flex;
						align-items: center;
						gap: 10px;

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

						[dir="rtl"] & {
							flex-direction: row-reverse;
						}



						.legend-country-name {
							color: var(--grey);
							font-size: 14px;
							font-weight: 300;
							line-height: 23px;

							@media (max-width: 1200px) {
								font-size: 12px;
								line-height: 18px;
							}
						}
					}

					.legend-percentage {

						.legend-pct-num {
							color: var(--grey);
							font-size: 24px;
							font-weight: 700;

							@media (max-width: 1200px) {
								font-size: 20px;
							}

							@media (max-width: 992px) {
								font-size: 18px;
							}
						}

						.legend-pct-sign {
							color: var(--grey);
							font-family: var(--font-type1);
							font-size: 14px;
							font-weight: 400;

							@media (max-width: 1200px) {
								font-size: 12px;
							}
						}
					}
				}
			}
		}

		/* Graph css end */
	}
}