/**
 * Mission Section
 * Layout: mission
 *
 * Ported from HTML/about.html lines 300-308 (.mission / .creed / .tagline).
 */

.mission-section .mission-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.mission-section .eyebrow {
	display: block;
	margin-bottom: 5px;
}

.mission-section .mission-heading {
	margin-bottom: 14px;
	color: var(--color-blue-deep);
}

.mission-section .mission-heading em {
	color: var(--color-green-deep);
	font-style: normal;
}

.mission-section .mission-body p {
	color: #4a4f57;
	font-size: var(--font-size-18px);
}

.mission-section .mission-body p:last-child {
	margin-bottom: 0;
}

/* Creed card */
.mission-section .creed {
	background: var(--color-blue);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 60px 38px 42px;
  box-shadow: var(--shadow);
}

.mission-section .creed .qmark {
	font-size: 58px;
  color: var(--color-green);
  line-height: 29px;
  display: block;
  height: 29px;
  font-weight: 800;
}

.mission-section .creed blockquote {
	font-size: 26px;
	font-size: clamp(1.25rem, 0.9327rem + 0.5769vw, 1.625rem);
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 16px;
	color: #ffffff;
}

.mission-section .creed .tagline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.mission-section .creed .tagline span {
	background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  padding: 7px 15px;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 1200px) {
	.mission-section .creed{
		padding: 50px 30px 35px;
	}
}

@media (max-width: 820px) {
	.mission-section .mission-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.mission-section .creed .tagline span{
		font-size: 16px;
	}

}

@media (max-width: 480px) {
	.mission-section .creed {
		padding: 40px 20px 25px 20px;
	}
	.mission-section .creed .tagline span{
		font-size: 14px;
	}

}