/* ============================================
   CORE SERVICES SECTION
   ============================================ */

.core-services {
	background: white;
	padding: var(--spacing-xl) var(--spacing-lg);
}

.core-services-container {
	max-width: var(--container-lg);
	margin: 0 auto;
	text-align: center;
}

.core-services-title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: var(--primary-color);
	margin-bottom: var(--spacing-sm);
}

.core-services-subtitle {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: var(--text-color);
	margin-bottom: var(--spacing-xl);
	opacity: 0.8;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-lg);
	margin-top: var(--spacing-xl);
}

.service-card {
	background: white;
	border-radius: calc(var(--border-radius) * 2);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: transform var(--transition-normal),
		box-shadow var(--transition-normal);
	cursor: pointer;
}

.service-card:hover {
	transform: translateY(calc(var(--spacing-sm) * -1));
	box-shadow: var(--shadow-xl);
}

.service-image {
	position: relative;
	height: var(--section-height-sm);
	background-size: cover;
	background-position: bottom;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--service-overlay-gradient);
	transition: opacity var(--transition-normal);
}

.service-card:hover .service-overlay {
	opacity: 0.85;
}

.service-icon-wrapper {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-xxl);
	height: var(--icon-xxl);
	background: var(--accent-color);
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	transition: transform var(--transition-normal);
}

.service-icon-wrapper svg {
	width: 60%;
	height: 60%;
	color: var(--primary-text-color);
}

.service-card:hover .service-icon-wrapper {
	transform: scale(1.1);
}

.service-icon {
	color: white;
}

.service-content {
	padding: var(--spacing-lg);
	text-align: center;
}

.service-title {
	font-size: 1.4rem;
	color: var(--primary-color);
	margin: 0 0 var(--spacing-sm);
}

.service-description {
	color: var(--text-color);
	opacity: 0.85;
	line-height: 1.7;
	margin: 0;
}

/* Individual Service Card Background Images */
.service-image.service-contract {
	background-image: var(--service-contract-image);
}

.service-image.service-construction {
	background-image: var(--service-construction-image);
}

.service-image.service-movein {
	background-image: var(--service-movein-image);
	background-position: center;
}