/* Style/services.css */
html { scroll-behavior: smooth; }

.services-section {
	max-width: 1200px;
	margin: 80px auto;
	padding: 48px 40px;
	background-color: var(--nav-bg);
	border-radius: 16px;
	box-shadow: 0 12px 48px rgba(128, 0, 128, 0.25);
	border: 1.8px solid var(--primary-color);
	color: var(--text-color);
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeSlideUp 0.9s ease forwards;
}

.services-title {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 28px;
	text-align: center;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.service-card {
	background-color: var(--bg-color);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(40, 16, 80, 0.08), 0 1.5px 6px rgba(128, 0, 128, 0.08);
	padding: 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: 1px solid rgba(128, 0, 128, 0.1);
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(128, 0, 128, 0.22); }

.service-card h3 { margin: 0 0 10px 0; font-size: 1.25rem; color: var(--primary-color); }
.service-card p { margin: 0; line-height: 1.5; }

@keyframes fadeSlideUp { to { opacity: 1; transform: translateY(0);} }

@media (max-width: 900px) {
	.services-section { padding: 40px 20px; margin: 60px 12px; }
	.services-title { font-size: 2rem; }
}