/*
==  THEME DETAILS  ============================================================
   	Theme Name: Verspaning
   	Theme URI: https://www.verspaning.com/
    Description: Stylesheet voor Verspaning
    Version: 1.0
  	Author: Kracht Internet Marketing
	Author URI: https://www.krachtinternetmarketing.nl

===============================================================================
*/

/*----------------------------------------------
	1.1 Basics
------------------------------------------------*/
	@font-face {
		font-family: 'Gunterz';
		src: url('Gunterz-Black.otf') format('opentype');
		font-weight: 400;
		font-display: swap;
	}

	:root {
		--off-white: #F7EFF7;
		--black: #170C16;
		--darker-purple: #231521;
		--dark-purple: #391241;
		--purple: #722381;
		--light-purple: #7E2C8C;
		--lighter-purple: #C9B7DA;
		--white: #FFFFFF;
	}

	html {
		font-size: 20px;
	}

	body {
		margin: 0;
		background: var(--off-white);
		color: var(--black);
		font-family: 'Zalando Sans Expanded', sans-serif;
		font-size: 0.75rem;
		line-height: 1.6rem;
	}

	p {
		margin: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
		transition: color 0.2s, background-color 0.2s, border-color 0.2s;
	}

	a:hover {
		color: var(--lighter-purple);
	}

	img {
		max-width: 100%;
	}

	button {
		font-family: inherit;
	}

	@media (min-width: 1200px) {
		.container {
			max-width: 1150px;
		}
	}

	@media (min-width: 1360px) {
		.container {
			max-width: 1260px;
		}
	}

	@media (min-width: 1500px) {
		.container {
			max-width: 1430px;
		}
	}

	h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
		margin: 0;
		padding: 0;
	}

	h1, h2, .h1, .h2 {
		font-family: 'Gunterz', sans-serif;
		font-weight: 400;
		text-transform: uppercase;
	}

	.box-shadow {
		box-shadow: 0 0.15rem 0.15rem rgba(0,0,0,0.16);
	}

	.grayscale {
		filter: grayscale(1);
	}

	.fs-xs {
		font-size: 0.6rem;
	}

	.fs-sm {
		font-size: 0.7rem;
	}

	.fs-md {
		font-size: 0.9rem;
		line-height: 2rem;
	}

	.fs-1 {
		font-size: 3.25rem !important;
		line-height: 3.75rem;
	}

	.fs-2 {
		font-size: 2.5rem !important;
		line-height: 4.25rem;
	}

	.fs-3 {
		font-size: 2.25rem !important;
		line-height: 2.75rem;
	}

	.fs-4 {
		font-size: 2rem !important;
		line-height: 4.25rem;
	}

	.eyebrow {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		margin-bottom: 0.75rem;
		color: var(--lighter-purple);
		font-size: 1rem;
		font-weight: 700;
		line-height: 2rem;
	}

	.eyebrow::before {
		content: '';
		width: 2rem;
		height: 2px;
		background: var(--lighter-purple);
	}

	.btn-w-220 {
		min-width: 11rem;
	}

	.btn-w-242 {
		min-width: 12.1rem;
	}

	@media (max-width: 991.98px) {
		.fs-1 {
			font-size: 2.5rem !important;
			line-height: 3rem;
		}

		.fs-2, .fs-4 {
			font-size: 2rem !important;
			line-height: 2.5rem;
		}

		.fs-3 {
			font-size: 1.75rem !important;
			line-height: 2.25rem;
		}
	}

/* Buttons --------------------------------------- */
	.btn {
		--bs-btn-padding-x: 1.5rem;
		--bs-btn-padding-y: 0;
		--bs-btn-font-size: 0.7rem;
		--bs-btn-font-weight: 700;
		--bs-btn-line-height: 2rem;
		--bs-btn-border-width: 1px;
		--bs-btn-border-radius: 0.25rem;
		--bs-btn-focus-shadow-rgb: 114, 35, 129;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		height: 2.25rem;
		position: relative;
		overflow: hidden;
		white-space: nowrap;
	}

	.btn::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -75%;
		width: 50%;
		background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.5) 50%, rgba(255,255,255,0));
		transform: skewX(-25deg);
		pointer-events: none;
	}

	.btn:hover::after {
		animation: sheen 0.8s ease-in-out forwards;
	}

	@keyframes sheen {
		100% {
			left: 125%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.btn:hover::after ,
		.footer__social a:hover::after {
			animation: none;
		}
	}

	.btn--icon {
		--bs-btn-padding-x: 1rem;
		gap: 0.4rem;
	}

	.btn-lg {
		--bs-btn-padding-x: 1.5rem;
		--bs-btn-font-size: 0.8rem;
		height: 2.75rem;
		gap: 0.6rem;
	}

	.btn-primary {
		--bs-btn-color: var(--off-white);
		--bs-btn-bg: transparent;
		--bs-btn-border-color: var(--off-white);
		--bs-btn-hover-color: var(--off-white);
		--bs-btn-hover-bg: rgba(247,239,247,0.15);
		--bs-btn-hover-border-color: var(--off-white);
		--bs-btn-active-color: var(--off-white);
		--bs-btn-active-bg: rgba(247,239,247,0.15);
		--bs-btn-active-border-color: var(--off-white);
	}

	.btn-secondary {
		--bs-btn-color: var(--off-white);
		--bs-btn-bg: var(--purple);
		--bs-btn-border-color: var(--purple);
		--bs-btn-hover-color: var(--off-white);
		--bs-btn-hover-bg: var(--light-purple);
		--bs-btn-hover-border-color: var(--light-purple);
		--bs-btn-active-color: var(--off-white);
		--bs-btn-active-bg: var(--light-purple);
		--bs-btn-active-border-color: var(--light-purple);
	}

	.btn-secondary i {
		font-size: 0.75rem;
	}

	.btn-tertiary {
		--bs-btn-color: var(--purple);
		--bs-btn-bg: var(--off-white);
		--bs-btn-border-color: var(--off-white);
		--bs-btn-hover-color: var(--purple);
		--bs-btn-hover-bg: var(--white);
		--bs-btn-hover-border-color: var(--white);
		--bs-btn-active-color: var(--purple);
		--bs-btn-active-bg: var(--white);
		--bs-btn-active-border-color: var(--white);
	}

	.btn-tertiary::after {
		background: linear-gradient(to right, rgba(114,35,129,0), rgba(114,35,129,0.15) 50%, rgba(114,35,129,0));
	}

	.btn-quaternary {
		--bs-btn-color: var(--purple);
		--bs-btn-bg: transparent;
		--bs-btn-border-color: var(--purple);
		--bs-btn-hover-color: var(--off-white);
		--bs-btn-hover-bg: var(--purple);
		--bs-btn-hover-border-color: var(--purple);
		--bs-btn-active-color: var(--off-white);
		--bs-btn-active-bg: var(--purple);
		--bs-btn-active-border-color: var(--purple);
	}

	.btn-quaternary i {
		color: var(--lighter-purple);
	}

	.link-arrow {
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		color: var(--lighter-purple);
		font-size: 0.7rem;
		font-weight: 700;
	}

	.link-arrow i {
		color: var(--black);
		font-size: 1rem;
		transition: all 0.3s ease-in-out;
	}

	.link-arrow--white i {
		color: var(--white);
	}

	.link-arrow:hover {
		color: var(--purple);
	}

	.link-arrow:hover i {
		transform: translateX(0.25rem);
	}

	.link-arrow--external:hover i {
		transform: translate(0.15rem, -0.15rem);
	}

/*----------------------------------------------
	1.2 Content Block
------------------------------------------------*/
	.content-block p + p ,
	.content-block p + h2 ,
	.content-block p + h3 ,
	.content-block p + h4 ,
	.content-block p + h5 ,
	.content-block p + ul ,
	.content-block h3 + ul ,
	.content-block h4 + ul ,
	.content-block ul + p ,
	.content-block ul + h3 {
		margin-top: 1.75rem !important;
	}

	.content-block h2 ,
	.content-block h3 {
		margin-bottom: 1.25rem;
	}

	.content-block ul {
		padding-left: 0;
		list-style: none;
	}

	.content-block ul li {
		position: relative;
		padding-left: 1.5rem;
		font-weight: 600;
		line-height: 2rem;
	}

	.content-block ul li::before {
		position: absolute;
		left: 0;
		content: '\f058';
		color: var(--purple);
		font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Free';
		font-weight: 900;
	}

	.content-block img.aligncenter {
		display: block;
		margin: 0 auto;
	}

/*----------------------------------------------
	1.3 Colors
------------------------------------------------*/
	.text-off-white {
		color: var(--off-white);
	}

	.text-purple {
		color: var(--purple);
	}

	.text-lighter-purple {
		color: var(--lighter-purple);
	}

	.bg-black {
		background-color: var(--black) !important;
	}

	.bg-purple {
		background-color: var(--purple);
	}

	.bg-purple-gradient {
		background: linear-gradient(22deg, var(--purple) 62%, var(--dark-purple) 100%);
	}

	.border-top-purple {
		border-top: 1px solid rgba(114,35,129,0.3);
	}

/*----------------------------------------------
	1.4 Spacing
------------------------------------------------*/
	.pt-70 {
		padding-top: 3.5rem;
	}

	.pt-80 {
		padding-top: 4rem;
	}

	.pt-100 {
		padding-top: 5rem;
	}

	.pt-110 {
		padding-top: 5.5rem;
	}

	.pt-120 {
		padding-top: 6rem;
	}

	.pt-130 {
		padding-top: 6.5rem;
	}

	.pt-160 {
		padding-top: 8rem;
	}

	.pt-220 {
		padding-top: 11rem;
	}

	.pb-40 {
		padding-bottom: 2rem;
	}

	.pb-70 {
		padding-bottom: 3.5rem;
	}

	.pb-90 {
		padding-bottom: 4.5rem;
	}

	.pb-100 {
		padding-bottom: 5rem;
	}

	.pb-110 {
		padding-bottom: 5.5rem;
	}

	.pb-120 {
		padding-bottom: 6rem;
	}

	.pb-140 {
		padding-bottom: 7rem;
	}

	.pb-160 {
		padding-bottom: 8rem;
	}

	.pb-190 {
		padding-bottom: 9.5rem;
	}

	.mt-40 {
		margin-top: 2rem !important;
	}

	.mt-50 {
		margin-top: 2.5rem !important;
	}

	.mb-70 {
		margin-bottom: 3.5rem !important;
	}

	@media (min-width: 992px) {
		.ps-lg-40 {
			padding-left: 2rem !important;
		}
	}

/*----------------------------------------------
	1.5 USP Card
------------------------------------------------*/
	.usp-card {
		--bs-card-spacer-y: 1.9rem;
		--bs-card-spacer-x: 2rem;
		--bs-card-title-spacer-y: 0;
		--bs-card-border-color: rgba(255,255,255,0.1);
		--bs-card-border-radius: 0.5rem;
		--bs-card-color: var(--off-white);
		--bs-card-bg: var(--darker-purple);
		min-height: 13rem;
	}

	.usp-card--purple {
		--bs-card-border-color: rgba(255,255,255,0.04);
		--bs-card-bg: rgba(126,44,140,0.4);
	}

/*----------------------------------------------
	2. Header
------------------------------------------------*/
/* Topbar ---------------------------------------- */
	.topbar {
		height: 2.5rem;
	}

	.topbar__dot {
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 50%;
		background: var(--off-white);
		box-shadow: 0 0 0 0.1rem rgba(247,239,247,0.11);
		animation: topbar-pulse 2s ease-out infinite;
	}

	@keyframes topbar-pulse {
		0% {
			box-shadow: 0 0 0 0.1rem rgba(247,239,247,0.5);
		}

		70% {
			box-shadow: 0 0 0 0.5rem rgba(247,239,247,0);
		}

		100% {
			box-shadow: 0 0 0 0.1rem rgba(247,239,247,0.11);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.topbar__dot {
			animation: none;
		}
	}

	.topbar__link:hover {
		color: var(--off-white);
	}

/* Header ---------------------------------------- */
	.header__brand img ,
	.footer__brand {
		display: block;
		width: 12.15rem;
		height: auto;
	}

/*----------------------------------------------
	2.1 Navigation
------------------------------------------------*/
	.navigation__menu {
		gap: 0.7rem;
	}

	.navigation__menu .nav-link {
		position: relative;
		padding: 0 0.45rem;
		border: 1px solid transparent;
		border-radius: 0.25rem;
		color: var(--off-white);
		font-size: 0.8rem;
		font-weight: 700;
		line-height: 1.45rem;
	}

	.navigation__menu .nav-link:hover {
		color: var(--lighter-purple);
	}

	.navigation__menu .active .nav-link {
		background: rgba(247,239,247,0.15);
		border-color: rgba(247,239,247,0.6);
		box-shadow: 0 0.15rem 0.15rem rgba(0,0,0,0.16);
	}

	.navigation__badge {
		position: absolute;
		top: -0.25rem;
		right: -0.25rem;
		width: 0.75rem;
		height: 0.75rem;
		border-radius: 0.25rem;
		background: var(--purple);
		color: var(--white);
		font-size: 0.45rem;
		font-weight: 600;
		line-height: 0.75rem;
		text-align: center;
	}

/*----------------------------------------------
	3. Hero
------------------------------------------------*/
	.frontpage-top ,
	.page-top {
		position: relative;
		overflow: hidden;
	}

	.frontpage-top {
		background: radial-gradient(34.5% 34.5% at 0 50%, var(--purple) 0%, var(--black) 100%);
		background-color: var(--black);
	}

	.page-top {
		background: radial-gradient(34.5% 80% at 0 50%, var(--purple) 0%, var(--black) 100%);
		background-color: var(--black);
	}

	.frontpage-top__shape {
		position: absolute;
		top: 2.5rem;
		left: 6.5rem;
		width: 77.45rem;
		margin: 0;
		opacity: 0.3;
		pointer-events: none;
	}

	.frontpage-top__shape img {
		display: block;
		width: 100%;
		max-width: none;
	}

	.frontpage-hero__title {
		font-size: 4rem;
		line-height: 1.1;
	}

	.frontpage-hero__image ,
	.subhero__visual img {
		display: block;
		width: 100%;
		aspect-ratio: 679 / 504;
		object-fit: cover;
		object-position: center;
		-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 679 504%22%3E%3Cpath transform=%22translate%28-1.07 -1.09%29%22 d=%22M 24.41 1.97 C 7.31 1.97 -3.96 19.77 3.32 35.23 L 214.44 482.99 C 218.28 491.15 226.50 496.37 235.52 496.37 L 417.06 496.37 C 434.16 496.37 445.45 478.57 438.15 463.11 L 227.04 15.34 C 223.20 7.19 214.98 1.97 205.96 1.97 L 24.41 1.97 Z M 467.48 1.08 C 458.45 1.08 450.24 6.29 446.39 14.45 L 351.83 215.02 C 344.54 230.49 355.82 248.28 372.91 248.28 L 554.45 248.28 C 563.48 248.28 571.70 243.06 575.54 234.90 L 670.11 34.33 C 677.40 18.87 666.12 1.08 649.02 1.08 L 467.48 1.08 Z%22%3E%3C/path%3E%3C/svg%3E') center / 100% 100% no-repeat;
		mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 679 504%22%3E%3Cpath transform=%22translate%28-1.07 -1.09%29%22 d=%22M 24.41 1.97 C 7.31 1.97 -3.96 19.77 3.32 35.23 L 214.44 482.99 C 218.28 491.15 226.50 496.37 235.52 496.37 L 417.06 496.37 C 434.16 496.37 445.45 478.57 438.15 463.11 L 227.04 15.34 C 223.20 7.19 214.98 1.97 205.96 1.97 L 24.41 1.97 Z M 467.48 1.08 C 458.45 1.08 450.24 6.29 446.39 14.45 L 351.83 215.02 C 344.54 230.49 355.82 248.28 372.91 248.28 L 554.45 248.28 C 563.48 248.28 571.70 243.06 575.54 234.90 L 670.11 34.33 C 677.40 18.87 666.12 1.08 649.02 1.08 L 467.48 1.08 Z%22%3E%3C/path%3E%3C/svg%3E') center / 100% 100% no-repeat;
		filter: grayscale(1);
	}

	.frontpage-hero__button {
		position: absolute;
		left: 4rem;
		bottom: -0.3rem;
	}

	@media (max-width: 1399.98px) {
		.frontpage-top__shape {
			left: 0;
		}
	}

	@media (max-width: 991.98px) {
		.frontpage-hero__title {
			font-size: 3rem;
		}
	}

/* Subhero --------------------------------------- */
	.subhero__title {
		font-size: 3rem;
		line-height: 4.25rem;
	}

	.subhero__image {
		max-width: 31.8rem;
	}

	.subhero__visual {
		max-width: 32.15rem;
		margin-left: auto;
		margin-top: -1.85rem;
	}

	@media (max-width: 991.98px) {
		.subhero__title {
			font-size: 2.5rem;
			line-height: 3rem;
		}

		.subhero__visual {
			margin: 2.5rem 0 0;
		}
	}

	.contact-tile {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 10.4rem;
		height: 4.75rem;
		padding: 0 1rem;
		border: 1px solid rgba(255,255,255,0.1);
		border-radius: 0.5rem;
		background: var(--darker-purple);
		color: var(--off-white);
	}

	.contact-tile:hover {
		color: var(--off-white);
		border-color: var(--lighter-purple);
	}

	.contact-tile--purple {
		background: var(--purple);
	}

/*----------------------------------------------
	4.2 Frontpage Spoedwerk
------------------------------------------------*/
	.frontpage-spoedwerk__shape ,
	.module-cta__shape {
		position: absolute;
		left: 2.5rem;
		bottom: -4.6rem;
		width: 16.5rem;
		margin: 0;
		opacity: 0.2;
		pointer-events: none;
	}

	.frontpage-spoedwerk__shape img ,
	.module-cta__shape img {
		display: block;
		width: 100%;
	}

	.frontpage-spoedwerk__text {
		max-width: 27.9rem;
	}

	.frontpage-spoedwerk__steps {
		gap: 2.4rem;
	}

	.frontpage-spoedwerk__steps span {
		display: grid;
		place-items: center;
		width: 1.5rem;
		height: 1.5rem;
		border: 1px solid rgba(247,239,247,0.6);
		border-radius: 50%;
		font-size: 0.7rem;
		font-weight: 700;
		line-height: 1.5rem;
	}

	.frontpage-spoedwerk__panel {
		padding: 1.6rem 1.5rem 3.35rem;
		border-radius: 0.5rem;
		background: rgba(23,12,22,0.45);
	}

	.frontpage-spoedwerk__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.frontpage-spoedwerk__tabs {
		--bs-nav-tabs-border-width: 0;
		--bs-focus-ring-color: rgba(247,239,247,0.25);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.frontpage-spoedwerk__tabs .nav-link {
		height: 2.5rem;
		padding: 0 0.95rem;
		border: 1px solid rgba(247,239,247,0.6);
		border-radius: 0.5rem;
		background: transparent;
		color: var(--off-white);
	}

	.frontpage-spoedwerk__tabs .nav-link:hover ,
	.frontpage-spoedwerk__tabs .nav-link.active {
		border-color: rgba(247,239,247,0.6);
		background: rgba(247,239,247,0.15);
		color: var(--off-white);
	}

	.frontpage-spoedwerk__pills li {
		height: 1.5rem;
		padding: 0 0.75rem;
		border: 1px solid rgba(247,239,247,0.6);
		border-radius: 1.5rem;
		background: rgba(247,239,247,0.15);
		font-size: 0.6rem;
		line-height: 1.5rem;
	}

	@media (max-width: 575.98px) {
		.frontpage-spoedwerk__grid ,
		.frontpage-spoedwerk__tabs {
			grid-template-columns: 1fr;
		}
	}

/*----------------------------------------------
	4.3 Frontpage Diensten
------------------------------------------------*/
	.frontpage-diensten__title {
		max-width: 31.45rem;
	}

	.frontpage-diensten__accordion {
		--bs-accordion-color: var(--black);
		--bs-accordion-bg: transparent;
		--bs-accordion-border-width: 0;
		--bs-accordion-border-radius: 0;
		--bs-accordion-inner-border-radius: 0;
		--bs-accordion-btn-padding-x: 0;
		--bs-accordion-btn-padding-y: 1rem;
		--bs-accordion-btn-color: var(--black);
		--bs-accordion-btn-bg: transparent;
		--bs-accordion-btn-focus-box-shadow: none;
		--bs-accordion-active-color: var(--black);
		--bs-accordion-active-bg: transparent;
		--bs-accordion-body-padding-x: 0;
		--bs-accordion-body-padding-y: 0;
	}

	.frontpage-diensten__accordion .accordion-item {
		border-top: 1px solid rgba(114,35,129,0.3);
	}

	.frontpage-diensten__accordion .accordion-button {
		line-height: 2.25rem;
	}

	.frontpage-diensten__accordion .accordion-button::after {
		display: none;
	}

	.frontpage-diensten__nr {
		width: 2.75rem;
		flex: none;
	}

	.frontpage-diensten__accordion .accordion-button:not(.collapsed) .frontpage-diensten__icon::before {
		content: '\f068';
	}

	.frontpage-diensten__body {
		padding: 0 0 0.5rem 2.75rem;
	}

/*----------------------------------------------
	4.4 Frontpage Projecten
------------------------------------------------*/
	.project-card {
		--bs-card-spacer-y: 1.5rem;
		--bs-card-spacer-x: 1.5rem;
		--bs-card-title-spacer-y: 0;
		--bs-card-border-color: rgba(255,255,255,0.1);
		--bs-card-border-radius: 0.75rem;
		--bs-card-color: var(--off-white);
		--bs-card-bg: var(--darker-purple);
		overflow: hidden;
	}

/*----------------------------------------------
	5.1 Module Content Uitgelicht
------------------------------------------------*/
	.module-content-uitgelicht__image {
		width: 15.1rem;
	}

/*----------------------------------------------
	5.2 Module Medewerkers
------------------------------------------------*/
	.medewerker-card {
		--bs-card-spacer-y: 0;
		--bs-card-spacer-x: 0;
		--bs-card-title-spacer-y: 0;
		--bs-card-border-width: 0;
		--bs-card-color: var(--black);
		--bs-card-bg: transparent;
	}

/*----------------------------------------------
	5.3 Module Vacatures
------------------------------------------------*/
	.module-vacatures__accordion {
		--bs-accordion-color: var(--black);
		--bs-accordion-bg: var(--white);
		--bs-accordion-border-width: 0;
		--bs-accordion-border-radius: 0.5rem;
		--bs-accordion-inner-border-radius: 0.5rem;
		--bs-accordion-btn-color: var(--black);
		--bs-accordion-btn-bg: transparent;
		--bs-accordion-btn-focus-box-shadow: none;
		--bs-accordion-active-color: var(--black);
		--bs-accordion-active-bg: transparent;
		--bs-accordion-body-padding-x: 0;
		--bs-accordion-body-padding-y: 0;
	}

	.module-vacatures__accordion .accordion-button::after {
		display: none;
	}

	.vacature-card {
		display: block;
		border-radius: 0.5rem;
		background: var(--white);
		color: var(--black);
	}

	.vacature-card--open {
		background: transparent;
		border: 1px solid rgba(114,35,129,0.2);
	}

	.vacature-card--open:hover {
		color: var(--black);
		border-color: var(--purple);
	}

	.vacature-card__head {
		min-height: 6.25rem;
		padding: 1.2rem 2rem;
		color: inherit;
		font-size: 0.75rem;
		line-height: 1.6rem;
	}

	.vacature-card__toggle {
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		flex: none;
		border: 1px solid var(--purple);
		border-radius: 50%;
		color: var(--purple);
		font-size: 0.9rem;
	}

	.vacature-card__head[aria-expanded='true'] .vacature-card__toggle i::before {
		content: '\f068';
	}

	.vacature-card__body {
		gap: 1rem 1.05rem;
		margin: 0 2rem;
		padding: 1.1rem 0.1rem 2rem;
	}

	.vacature-card__col {
		width: 19.75rem;
	}

	@media (max-width: 991.98px) {
		.vacature-card__col {
			width: 100%;
		}
	}

/*----------------------------------------------
	5.4 Module Contact
------------------------------------------------*/
	.module-contact__form {
		padding: 1.5rem 1.5rem 1.4rem;
		border-radius: 0.5rem;
		background: var(--white);
	}

	.module-contact__type {
		height: 2rem;
		padding: 0 0.75rem;
		border: 1px solid var(--lighter-purple);
		border-radius: 0.25rem;
		background: transparent;
		color: var(--purple);
		font-size: 0.7rem;
		font-weight: 600;
	}

	.module-contact__type:hover ,
	.module-contact__type--active {
		background: var(--purple);
		border-color: var(--purple);
		color: var(--off-white);
	}

	.module-contact__input {
		display: block;
		width: 100%;
		height: 2.5rem;
		padding: 0 0.75rem;
		border: 1px solid rgba(114,35,129,0.3);
		border-radius: 0.25rem;
		background: var(--off-white);
		font-size: 0.75rem;
	}

	.module-contact__input:focus {
		outline: 2px solid var(--purple);
		outline-offset: 0;
	}

	.module-contact__input--area {
		height: 7.55rem;
		padding: 0.5rem 0.75rem;
		resize: vertical;
	}

	.module-contact__map img {
		border: 1px solid rgba(114,35,129,0.3);
	}

	.module-contact__day {
		display: inline-block;
		width: 9.45rem;
	}

	.module-contact__key {
		display: inline-block;
		width: 6.5rem;
	}

/*----------------------------------------------
	7.1 Footer
------------------------------------------------*/
	.footer {
		background: radial-gradient(20% 45% at 0 100%, var(--purple) 0%, var(--black) 100%);
		background-color: var(--black);
	}

	.footer__menu ,
	.footer__contactgegevens {
		font-size: 0.8rem;
		line-height: 1.75rem;
	}

	.footer__social a {
		position: relative;
		overflow: hidden;
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border: 1px solid rgba(255,255,255,0.1);
		border-radius: 0.25rem;
		background: var(--darker-purple);
		font-size: 1rem;
	}

	.footer__social a:hover {
		background: var(--dark-purple);
		color: var(--off-white);
	}

	.footer__social a::after {
		content: '';
		position: absolute;
		inset: -50%;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%);
		transform: rotateZ(60deg) translate(0, 2.5rem);
		pointer-events: none;
	}

	.footer__social a:hover::after {
		animation: sheen-icon 0.8s ease-in-out forwards;
	}

	@keyframes sheen-icon {
		100% {
			transform: rotateZ(60deg) translate(0, -2.5rem);
		}
	}

	.footer__legal {
		margin-left: 2.45rem;
	}

	@media (max-width: 575.98px) {
		.footer__legal {
			display: block;
			margin-left: 0;
		}
	}