/* ===========================
   SERVICES PAGE (services2.html)
   =========================== */

#services-body
{
	background:
		radial-gradient(circle at 20% 10%, rgba(62, 196, 204, 0.16), transparent 55%),
		radial-gradient(circle at 80% 90%, rgba(255, 140, 0, 0.18), transparent 55%),
		radial-gradient(circle at 5% 80%, rgba(255, 60, 90, 0.16), transparent 55%),
		linear-gradient(135deg, #171621 0%, #120f18 35%, #101a27 70%, #151e33 100%);
	background-attachment: fixed;
	background-size: cover;
	color: var(--milk-white);
}

/* Page title + intro */

#service-header
{
	margin-top: 80px;
	margin-bottom: 0.5rem;
	color: var(--milk-white);
	padding: 0;
	font-kerning: auto;
}

#service-subheader
{
	max-width: 46rem;
	margin: 0 auto 2.5rem auto;
	text-align: center;
	font-family: var(--body-font);
	line-height: 1.7;
	color: rgba(245, 250, 255, 0.86);
	letter-spacing: 0.04em;
}

.header-container
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.services-wrapper
{
	min-width: 90%;
	min-height: 100%;
	margin: 0 auto 4rem 25rem;
	padding: 0 1.5rem 3rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

/* Tall glassy cards in a responsive grid */

.services-grid
{
	display: grid;
	grid-template-columns: repeat(2, 800px);
	width: 950px;
	gap: 5rem;
}

/* Base service card */

.service-card
{
	position: relative;
	max-height: 560px;
	padding: 2.4rem 2.2rem;
	border-radius: 26px;

	background: linear-gradient(145deg,
			rgba(255, 255, 255, 0.96),
			rgba(235, 244, 252, 0.97));

	box-shadow:
		0 22px 48px rgba(0, 0, 0, 0.38),
		0 0 26px rgba(80, 180, 255, 0.18);

	border: 1px solid rgba(210, 220, 238, 0.92);

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1.4rem;

	color: rgba(12, 9, 10, 1);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease,
		background 0.18s ease;
}

.service-card:hover
{
	transform: translateY(-6px);
	box-shadow:
		0 26px 65px rgba(0, 0, 0, 0.48),
		0 0 26px rgba(80, 200, 255, 0.28);
	border-color: rgba(80, 170, 255, 0.9);
	background:
		radial-gradient(circle at top left, rgba(99, 205, 209, 0.16), transparent 55%),
		linear-gradient(145deg,
			rgba(255, 255, 255, 0.98),
			rgba(235, 244, 252, 0.98));
}

/* Little label at the top of each card */

.service-kicker
{
	font-family: var(--body-font);
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: rgba(12, 9, 10, 0.55);
}

/* Card heading & text */

.service-card h3
{
	margin: 0.25rem 0 0.5rem 0;
	font-family: var(--header-font);
	font-size: 1.8rem;
	font-weight: 400;
	text-align: left;
	color: var(--night);
}

.service-card p
{
	margin: 0;
	font-family: var(--body-font);
	font-size: var(--paragraph-text-size);
	line-height: 2;
	letter-spacing: 0.02em;
	color: rgba(12, 9, 10, 0.86);
	text-align: left;
	font-kerning: auto;
}

/* Mobile tweaks */

@media (max-width: 600px)
{
	#service-header
	{
		font-size: 2.3rem;
		margin-top: 70px;
	}

	#service-subheader
	{
		font-size: 0.98rem;
		margin-bottom: 2rem;
	}

	.service-card
	{
		min-height: 0;
		padding: 1.5rem 1.4rem 1.8rem;
		border-radius: 20px;
	}

	.services-wrapper
	{
		margin: 0 auto 2rem auto;
		min-width: 100%;
	}

	.services-grid
	{
		grid-template-columns: 1fr;
		width: 100%;
		gap: 2rem;
	}
}