.hero_werken_bij-layout {
	--global-row-spacing: 0px;

    position: relative;
    color: #ffffff;
    overflow: hidden;
    min-height: calc(100vh - var(--pk-header-height));
    display: flex;
    flex-direction: column;
    justify-content: end;
    isolation: isolate;
	background-color: var(--primary-jade);
	padding-bottom: max(3rem, calc(3 * var(--su)));
}
.hero_werken_bij-layout .pk-grid-container {
	align-items: end;
}

.hero_werken_bij-layout .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	pointer-events: none;
    z-index: -1;
}

.hero_werken_bij-layout::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
	background: linear-gradient(75deg, rgba(1, 35, 80, 0.30) -5.82%, rgba(1, 35, 80, 0.00) 100%);
	pointer-events: none;
}

.hero_werken_bij-layout .pk-col {
    position: relative;
    z-index: 2;
}

.hero_werken_bij-layout .pk-heading {
    color: inherit;
}

.hero_werken_bij-layout .pk-text {
	font-size: var(--desktop-body-xl);
}
.hero_werken_bij-layout .pk-text {
    margin-top: calc(2 * var(--su));
}

.hero_werken_bij-layout .form-col {
	position: relative;
	z-index: 10;
	padding: max(1.5rem, calc(2.5 * var(--su)));
	background-color: #ffffff;
	color: var(--text-color);
	margin-top: max(3rem, calc(3 * var(--su)));
	display: flex;
	align-items: center;
	gap: 1em;
}
.hero_werken_bij-layout .form-col .input-group {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 1em;
}
.hero_werken_bij-layout .form-col .input-group .input-wrapper {
	width: 100%;
}
.hero_werken_bij-layout .pk-grid-container .form-col .input-group select {
	width: max(220px, calc(14 * var(--su)));
}
.hero_werken_bij-layout .form-col .pk-button-group {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}
.hero_werken_bij-layout .form-col .pk-button-group a,
.hero_werken_bij-layout .form-col .pk-button-group button {
	appearance: none;
	border: 1px solid var(--deep-pine-20);
	text-decoration: none;
	border-radius: 100px;
	background: transparent;
	font-size: var(--desktop-body-sm);
	color: var(--text-color);
	padding: max(0.5rem, calc(0.75 * var(--su)))
	max(1.25rem, calc(1.25 * var(--su)));
	cursor: pointer;
	transition: background-color 0.3s ease,
	border-color 0.3s ease,
	color 0.3s ease;
}
.hero_werken_bij-layout .form-col .pk-button-group button:first-child {
	background-color: var(--primary-yellow);
	border-color: var(--primary-yellow);
}
.hero_werken_bij-layout .form-col .pk-button-group a:hover,
.hero_werken_bij-layout .form-col .pk-button-group button:hover {
	background-color: var(--deep-pine-100);
	border-color: var(--deep-pine-100);
	color: #ffffff;
}

.hero_werken_bij-layout .button-col .pk-button-group .pk-button:nth-child(1) {
	padding: 0; 
	border: 0;
	--button-icon-bg-1: #ffffff;
}

@media screen and (min-width: 993px) {
	.hero_werken_bij-layout .button-col .pk-button-group {
		justify-content: end;
	}
}

@media screen and (max-width: 992px) {
	.hero_werken_bij-layout .form-col {
		flex-direction: column;
		align-items: start;
		justify-content: flex-start;
	}
	.hero_werken_bij-layout .button-col {
		margin-top: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.hero_werken_bij-layout {
		justify-content: end;
	}
	.hero_werken_bij-layout .pk-col {
		display: flex; flex-direction: column;
	}

	.hero_werken_bij-layout .pk-grid-container .form-col .input-group select {
		width: 100%;
	}

	.hero_werken_bij-layout .pk-button-group .pk-button:nth-child(2) {
		display: none;
	}

	.hero_werken_bij-layout .form-col .input-group {
		flex-direction: column;
		width: 100%;
	}
	.hero_werken_bij-layout .form-col .pk-button-group {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.hero_werken_bij-layout .form-col .pk-button-group button,
	.hero_werken_bij-layout .form-col .pk-button-group a {
		width: 100%;
		text-align: center;
	}
}