.subservices-layout .content > .pk-heading {
	margin-bottom: max(1rem, calc(1.5 * var(--su)));
}

.subservices-layout .diensten-buttons {
	display: flex;
	align-items: center;
	gap: max(0.75rem, calc(0.75 * var(--su)));
	flex-wrap: wrap;
	margin-top: max(1.5rem, calc(2.5 * var(--su)));
}
.subservices-layout .diensten-buttons .dienst-button {
	appearance: none;
	line-height: 1;
	letter-spacing: -2%;
	padding-block: max(1.25rem, calc(1.25 * var(--su)));
	padding-inline: max(1.5rem, calc(1.5 * var(--su)));

}
.subservices-layout .diensten-buttons .dienst-button:not(.active) {
	--button-bg-1: transparent;
	--button-text-color-1: var(--deep-pine-100);
	--button-border-color-1: var(--deep-pine-10);

	--button-bg-1-hover: transparent;
	--button-text-color-1-hover: var(--deep-pine-100);
	--button-border-color-1-hover: var(--deep-pine-100);
}

.subservices-layout .diensten-overview {
	position: relative;
	margin-top: max(1.5rem, calc(2 * var(--su)));
}
.subservices-layout .diensten-overview .dienst-item {
	position: relative;
	display: flex;
	align-items: center;
	padding: max(1.5rem, calc(5 * var(--su)));
	background-color: var(--primary-jade);
	color: #ffffff;
	transition: opacity 0.3s ease;
}

.subservices-layout .diensten-overview .dienst-item .kennis-label {
	margin-bottom: max(1rem, calc(1.5 * var(--su)));
}
.subservices-layout .diensten-overview .dienst-item h1,
.subservices-layout .diensten-overview .dienst-item h2,
.subservices-layout .diensten-overview .dienst-item h3,
.subservices-layout .diensten-overview .dienst-item h4,
.subservices-layout .diensten-overview .dienst-item h5,
.subservices-layout .diensten-overview .dienst-item h6 {
	color: inherit;
	margin-bottom: 0.75em;
}
.subservices-layout .diensten-overview .dienst-item .pk-text ul li {
	padding-left: 0.25em;
}
.subservices-layout .diensten-overview .dienst-item .pk-text ul li::marker {
	content: '\e5ca';
	font-family: 'Material Symbols Outlined';
	font-size: 1.25em;
	color: currentColor;
}
.subservices-layout .diensten-overview .dienst-item .pk-button-group {
	margin-top: max(1rem, calc(2 * var(--su)));
}
.subservices-layout .diensten-overview .dienst-item .pk-button-group .dienst-name {
	color: inherit;
	text-transform: lowercase;
}

.subservices-layout .diensten-overview .dienst-item .dienst-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


@media screen and (min-width: 993px) {
	.subservices-layout .diensten-overview .dienst-item .dienst-content {
		width: 60%;
		padding-right: max(1rem, calc(8.75 * var(--su)));
	}
	.subservices-layout .diensten-overview .dienst-item .dienst-image {
		width: 40%;
	}
}
@media screen and (max-width: 992px) {
	.subservices-layout .diensten-overview .dienst-item {
		flex-direction: column-reverse;
		gap: max(1.5rem, calc(5 * var(--su)));
		padding-top: 0;
	}
	.subservices-layout .diensten-overview .dienst-item .dienst-image {
		margin-inline: min(-1.5rem, calc(-5 * var(--su)));
	}
}