/* Service detail page styles (keeps your main theme) */
/* The HTML pages include an inline script before paint that sets data-lang-filter; no CSS changes needed here */

.service-detail {
	padding: var(--section-pad-y) var(--section-pad-x);
	color: #fff;
}

.service-hero {
	text-align: center;
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.service-hero h1 {
	font-size: 2.2rem;
	margin: 0 0 0.5rem 0;
}

.service-hero .intro {
	margin: 0.5rem auto 0;
}

.service-content {
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
}

.service-content h2 {
	font-size: 1.6rem;
}

.points {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 10px;
}

.points li {
	padding: 12px 14px;
	list-style: none;
}

.points li .af {
	color: var(--af-blue);
	display: block;
}

.points li .en {
	color: var(--en-green);
	display: block;
	margin-top: 4px;
}

.cta-text {
	padding: 12px 14px;
}

/* CTA button reuse */
.hero-link {
	display: inline-block;
	margin-top: 10px;
}

/* Card CTA style aligned with homepage */
/* Removed duplicate .card-cta styles (defined globally in styles.css) */

.text-center {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Force black text on hover for bilingual spans inside hero-link */
.hero-link:hover .af,
.hero-link:hover .en {
	color: #0f2233 !important;
}