.elementor-2749 .elementor-element.elementor-element-eff3285{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-2749 .elementor-element.elementor-element-eff3285{--content-width:100%;}}/* Start custom CSS *//**
 * Single Dienst Shortcode – Extra CSS
 * Voeg toe aan je bestaande latex-spuit-totaal.css
 */

/* ============================================
   CONTENT SECTIONS
   ============================================ */
.content-section {
	padding: 80px 0;
}

.content-section.alt-bg {
	background: var(--gray-50, #f9fafb);
}

.content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.content-grid.no-image {
	grid-template-columns: 1fr;
}

.content-grid.no-image .content-text {
	max-width: 800px;
	margin: 0 auto;
}

.content-image img {
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.content-body {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--gray-600, #4b5563);
}

.content-body p {
	margin-bottom: 1rem;
}

.content-body p:last-child {
	margin-bottom: 0;
}

.center-content {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

/* Content Checklist */
.content-checklist {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: grid;
	gap: 12px;
}

.content-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1rem;
	color: var(--gray-700, #374151);
}

.content-checklist svg {
	flex-shrink: 0;
	color: var(--primary, #f97316);
	margin-top: 2px;
}

/* ============================================
   STEPS GRID
   ============================================ */
.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.step-card {
	background: #fff;
	border-radius: 16px;
	padding: 32px 24px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--gray-100, #f3f4f6);
	text-align: center;
}

.step-number {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, var(--primary, #f97316) 0%, #ea580c 100%);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 auto 20px;
}

.step-card h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--gray-900, #111827);
	margin-bottom: 8px;
}

.step-card p {
	font-size: 0.9375rem;
	color: var(--gray-600, #4b5563);
	line-height: 1.6;
	margin: 0;
}

/* ============================================
   GALLERY
   ============================================ */
.gallery-section {
	padding: 80px 0;
	background: var(--gray-50, #f9fafb);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.gallery-item {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gallery-item:hover img {
	transform: scale(1.05);
}

/* ============================================
   HERO DIENST ADJUSTMENTS
   ============================================ */
.hero-dienst .hero-subtitle {
	font-size: 1.125rem;
}

.hero-dienst .hero-subtitle p {
	margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
	.steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.content-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	
	.content-image {
		order: -1;
	}
	
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.content-section {
		padding: 60px 0;
	}
	
	.steps-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.step-card {
		padding: 24px 20px;
	}
	
	.gallery-grid {
		gap: 16px;
	}
	
	.gallery-section {
		padding: 60px 0;
	}
}

@media (max-width: 480px) {
	.gallery-grid {
		grid-template-columns: 1fr;
	}
}/* End custom CSS */