/* ================================================
   About Us Page Styles
   Mission, Vision, Core Values, Why Choose Us
================================================ */

/* ================================================
   1. MISSION SECTION
================================================ */
.ads-mission-section {
	background: var(--themeht-bg-light-color);
	padding: 80px 0;
	position: relative;
}

.ads-mission-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}

.ads-mission-content h3 {
	font-size: 36px;
	line-height: 46px;
	margin-bottom: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--themeht-text-color);
}

.ads-mission-content p {
	font-size: 16px;
	line-height: 26px;
	color: var(--themeht-body-color);
	margin-bottom: 20px;
	letter-spacing: 1px;
	font-weight: 500;
}

.ads-mission-icon {
	width: 80px;
	height: 80px;
	background: var(--themeht-primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color: var(--themeht-text-color);
	margin-bottom: 20px;
}

.ads-mission-image img {
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ================================================
   2. VISION SECTION
================================================ */
.ads-vision-section {
	padding: 80px 0;
	position: relative;
}

.ads-vision-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}

.ads-vision-image {
	order: -1;
}

.ads-vision-image img {
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.ads-vision-content h3 {
	font-size: 36px;
	line-height: 46px;
	letter-spacing: 1px;
	font-weight: 600;
	margin-bottom: 20px;
	color: var(--themeht-white-color);
}

.ads-vision-content p {
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--themeht-body-color);
	margin-bottom: 20px;
}

.ads-vision-icon {
	width: 80px;
	height: 80px;
	background: var(--themeht-primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color: var(--themeht-text-color);
	margin-bottom: 20px;
}

/* ================================================
   3. CORE VALUES SECTION
================================================ */
.ads-values-section {
	background: var(--themeht-bg-light-color);
	padding: 80px 0;
	position: relative;
}

.ads-values-header {
	text-align: center;
	margin-bottom: 60px;
}

.ads-values-header h2 {
	font-size: 50px;
	letter-spacing: 1px;
	font-weight: 600;
	line-height: 60px;
	color: var(--themeht-text-color);
	margin-bottom: 15px;
}

.ads-values-header p {
	font-size: 16px;
	line-height: 26px;
	color: var(--themeht-body-color);
	max-width: 600px;
	margin: 0 auto;
	letter-spacing: 1px;
	font-weight: 500;
}

.ads-values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
}

.ads-value-card {
	background: var(--themeht-white-color);
	padding: 25px;
	border-radius: 15px;
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.ads-value-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.ads-value-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, var(--themeht-primary-color), #7ec904);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35px;
	color: var(--themeht-text-color);
	margin: 0 auto 20px;
}

.ads-value-title {
	font-size: 18px;
	letter-spacing: 1px;
	font-weight: 600;
	color: var(--themeht-text-color);
	margin-bottom: 5px;
	font-family: var(--themeht-typography-secondary-font-family);
}

.ads-value-desc {
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 1px;
	color: var(--themeht-body-color);
}

/* ================================================
   4. WHY CHOOSE US SECTION
================================================ */
.ads-choose-section {
	padding: 80px 0;
	position: relative;
}

.ads-choose-header {
	text-align: center;
	margin-bottom: 60px;
}

.ads-choose-header h2 {
	font-size: 50px;
	line-height: 60px;
	letter-spacing: 1px;
	color: var(--themeht-white-color);
	margin-bottom: 15px;
	font-weight: 600;
}

.ads-choose-header p {
	font-size: 16px;
	line-height: 26px;
	color: var(--themeht-body-color);
	max-width: 600px;
	margin: 0 auto;
	letter-spacing: 1px;
	font-weight: 500;
}

.ads-choose-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}

.ads-choose-image img {
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.ads-choose-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ads-choose-item {
	display: flex;
	gap: 20px;
	margin-bottom: 25px;
	align-items: flex-start;
}

.ads-choose-item:last-child {
	margin-bottom: 0;
}

.ads-choose-icon {
	width: 50px;
	height: 50px;
	background: var(--themeht-primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--themeht-text-color);
	flex-shrink: 0;
	margin-top: 3px;
}

.ads-choose-content h4 {
	font-size: 18px;
	font-weight: 600;
	color: var(--themeht-white-color);
	margin-bottom: 8px;
	letter-spacing: 1px;
	font-family: var(--themeht-typography-secondary-font-family);
}

.ads-choose-content p {
	font-size: 14px;
	line-height: 22px;
	color: var(--themeht-body-color);
	margin: 0;
	letter-spacing: 1px;
	font-weight: 500;
}

/* ================================================
   RESPONSIVE STYLES
================================================ */

@media (max-width: 992px) {
	.ads-mission-wrapper,
	.ads-vision-wrapper,
	.ads-choose-wrapper {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.ads-vision-image {
		order: 0;
	}

	.ads-mission-section,
	.ads-vision-section,
	.ads-values-section,
	.ads-choose-section {
		padding: 60px 0;
	}

	.ads-mission-content h3,
	.ads-vision-content h3,
	.ads-choose-header h2,
	.ads-values-header h2 {
		font-size: 32px;
		line-height: 42px;
	}
}

@media (max-width: 767px) {
	.ads-mission-section,
	.ads-vision-section,
	.ads-values-section,
	.ads-choose-section {
		padding: 40px 0;
	}

	.ads-mission-content h3,
	.ads-vision-content h3,
	.ads-choose-header h2,
	.ads-values-header h2 {
		font-size: 28px;
		line-height: 38px;
	}

	.ads-values-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ads-value-card {
		padding: 30px 20px;
	}

	.ads-choose-wrapper {
		grid-template-columns: 1fr;
	}

	.ads-choose-item {
		margin-bottom: 20px;
	}

	.ads-mission-content p,
	.ads-vision-content p,
	.ads-choose-content p,
	.ads-values-header p,
	.ads-choose-header p {
		font-size: 14px;
		line-height: 24px;
	}
}

@media (max-width: 576px) {
	.ads-mission-section,
	.ads-vision-section,
	.ads-values-section,
	.ads-choose-section {
		padding: 30px 0;
	}

	.ads-mission-wrapper,
	.ads-vision-wrapper,
	.ads-choose-wrapper {
		gap: 20px;
	}

	.ads-mission-content h3,
	.ads-vision-content h3,
	.ads-choose-header h2,
	.ads-values-header h2 {
		font-size: 24px;
		line-height: 34px;
	}

	.ads-mission-icon,
	.ads-vision-icon,
	.ads-choose-icon {
		width: 60px;
		height: 60px;
		font-size: 28px;
	}

	.ads-value-icon {
		width: 60px;
		height: 60px;
		font-size: 28px;
	}

	.ads-value-card {
		padding: 25px 15px;
	}

	.ads-value-title {
		font-size: 16px;
	}

	.ads-value-desc {
		font-size: 12px;
		line-height: 20px;
	}

	.ads-choose-content h4 {
		font-size: 16px;
	}
}