/*!
Theme Name: PADDAP
Theme URI: http://underscores.me/
Author: PADDAP
Author URI: https://paddap.nl
Description: This is the boilerplate theme of PADDAP Digital Agency
Version: 1.0.0
Tested up to: 6.0.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: paddap
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

PADDAP is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: 'AvenirNextRegular';
	src: url('/wp-content/themes/paddap-custom-theme/fonts/AvenirNextLTPro-Regular.otf') format('opentype');
	font-weight: 400;
}

@font-face {
	font-family: 'AvenirNextMedium';
	src: url('/wp-content/themes/paddap-custom-theme/fonts/AvenirNext-Medium.woff') format('woff');
	font-weight: 500;
}

@font-face {
	font-family: 'AvenirNextDemiBold';
	src: url('/wp-content/themes/paddap-custom-theme/fonts/AvenirNext-DemiBold.woff') format('woff');
	font-weight: 600;
}

@font-face {
	font-family: 'AvenirNextBold';
	src: url('/wp-content/themes/paddap-custom-theme/fonts/AvenirNextLTPro-Bold.otf') format('opentype');
	font-weight: 700;
}

@font-face {
	font-family: 'AvenirNextItalic';
	src: url('/wp-content/themes/paddap-custom-theme/fonts/AvenirNextLTPro-It.otf') format('opentype');
	font-weight: 400;
}

:root {
	/* Typography */
	--body-font: "AvenirNextRegular";
	--header-font: "AvenirNextDemiBold";
	--italic-font: "AvenirNextItalic";

	/* Colors */
	--black: rgb(0,0,0);
	--light-black: rgba(0,0,0,0.1);
	--white: rgb(255, 255, 255);

	--brand-color: rgb(104, 169, 166);
	--light-brand-color: rgb(161, 213, 211);
	--lighter-brand-color: rgb(227, 248, 247);

	--sand: #C8BAAF;
	--light-sand: #EBE4DE;
	--dark-sand: rgb(134, 109, 91);

	--water: rgb(156, 205, 224);
	--light-water: rgb(205, 230, 239);
	--dark-water: rgb(81, 151, 178);

	--green: rgb(176, 201, 150);
	--light-green: rgb(216, 228, 203);
	--dark-green: rgb(102, 153, 47);

	--orange: rgb(204, 159, 118);
	--light-orange: rgb(242, 212, 186);
	--dark-orange: rgb(193, 90, 35);

	/* Utility */
	--container-max-width: 1280px;
	--small-container-max-width: 800px;
	--container-padding: calc((100vw - var(--container-max-width)) / 2);

	--section-padding: 150px;
	--navbar-height: 50px;

	/* Transitions */
	--transition-easing: cubic-bezier(.62,.03,.6,.98);

	--fast-transition: all .075s var(--transition-easing);
	--medium-transition: all .15s var(--transition-easing);
	--slow-transition: all .3s var(--transition-easing);
}

@media (max-width: 768px) {
	:root {
		--section-padding: 96px;
	}
}

@media (min-width: 2561px) {
	:root {
		--container-max-width: 1440px;
		--small-container-max-width: 996px;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	position: relative;
	height: 100%;
}

body,
p,
a,
a:visited,
a:hover {
	font-family: var(--body-font);
	color: var(--black);
	text-decoration: none;
}

p strong {
	font-family: var(--header-font);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font);
}
h1 {
	font-size: 24px;
	line-height: 150%;
	margin: 0;
	text-transform: uppercase;
}

h1.home-hero__subtitle {
	text-transform: none;
}

.home h1 {
	font-size: 48px;
	line-height: 100%;
	padding-bottom: 4px;
}
h2 {
	font-size: 40px;
	line-height: 120%;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h3 {
	font-size: 36px;
	line-height: 150%;
}
h4 {
	font-size: 24px;
	line-height: 150%;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-bottom: 8px;
}
h5 {
	font-size: 18px;
	line-height: 150%;
}

p {
	font-size: 18px;
	line-height: 170%;
}

a {
	font-size: 18px;
	line-height: 150%;
}

@media (max-width: 768px) {
	h3 {
		font-size: 32px;
	}
}

@media (max-width: 768px) { 
	.home h1 {
		font-size: 40px;
		line-height: 140%;
		padding-bottom: 0;
	}
	.animation-container .home-hero__title{
		text-align: center;
		font-size: 40px;
		color: var(--white);
		margin: 0;
		line-height: 140%;
	}
}

section:not(.no-section-margin) {
	margin-top: var(--section-padding);
}


img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

button {
	border: unset;
	border-radius: unset;
	background-color: unset;
	color: unset;
	padding: unset;
	line-height: unset;
	cursor: pointer;
}

svg {
	display: block;
}

/* Utility */
.container {
	width: 90%;
	max-width: var(--container-max-width);
	margin: 0 auto;
}
.small-container {
	width: 80%;
	max-width: var(--small-container-max-width);
	margin: 0 auto;
}

.divider-wrapper {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 64px;
}

.divider {
	height: 1px;
	width: 100%;
	background-color: var(--black);
}

@media (max-width: 768px) {
	.divider-wrapper {
		display: flex;
		gap: 16px;
		align-items: flex-start;
		padding-top: 0px;
		margin-bottom: 64px;
		flex-wrap: wrap;
	}
}
@media (max-width: 375px) {
	.divider-wrapper {
		display: flex;
		gap: 16px;
		align-items: flex-start;
		padding-top: 16px;
		margin-bottom: 32px;
		flex-direction: column-reverse;
	}
	section.project-overview .container .projects-overview__intro .divider-wrapper {
		grid-template-columns: 1fr;
	}
}


.vertical-divider {
	height: 16px;
	width: 1px;
	background-color: var(--brand-color);
}

.hero-padding {
	padding-top: 111px;
}

.mt-auto {
	margin-top: auto;
}

.col-span-1 {
	grid-column: span 1;
}
.col-span-2 {
	grid-column: span 2;
}
.col-span-3 {
	grid-column: span 3;
}
.col-span-4 {
	grid-column: span 4;
}
.col-span-5 {
	grid-column: span 5;
}
.col-span-6 {
	grid-column: span 6;
}
.col-span-7 {
	grid-column: span 7;
}
.col-span-8 {
	grid-column: span 8;
}
.col-span-9 {
	grid-column: span 9;
}
.col-span-10 {
	grid-column: span 10;
}
.col-span-11 {
	grid-column: span 11;
}
.col-span-12 {
	grid-column: span 12;
}

.no-hover,
.no-hover > a {
	cursor: default;
}

.wysiwyg h3 {
	margin-bottom: 16px;
}

.wysiwyg p:last-child {
	margin-bottom: 0;
}

.button-group {
	display: flex;
	gap: 16px;
	margin-top: 24px;
}

/* Knoppen */
.btn {
	border: 1px solid transparent;
	padding: 12px 24px;
	width: fit-content;

	position: relative;
	overflow: clip;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: var(--slow-transition);
}
.btn:before {
	content: "";
	position: absolute;
	aspect-ratio: 1;
	width: 110%;
	height: auto;
	background-color: transparent;
	border-radius: 999px;
	transform: scale(0.01);
	opacity: 0;
	transition: transform 0.3s, opacity 0.3s;
}
.btn:hover:before {
	opacity: 1;
	transform: scale(1);
}

.btn__inner {
	position: relative;
	color: var(--black);
	text-transform: uppercase;
	text-wrap: nowrap;

	display: flex;
	align-items: center;
	gap: 16px;
}
.wa-other-card__title {
	hyphens: auto;
}
.btn__text {
	font-weight: 600;
	font-family: var(--header-font);
	letter-spacing: 1px;
	font-size: 14px;

	transition: var(--slow-transition);
}
.btn__arrow {
	min-width: 12px;
	max-width: 12px;

	transition: var(--slow-transition);
}

.btn:hover .btn__arrow {
	transform: translateX(6px);
}

/* Colored background with black font and without borders */
.btn--primary {
	background-color: var(--brand-color);
}
.btn--primary:before {
	background-color: var(--white);
}
.btn--primary:hover {
	border-color: var(--brand-color);
}
.btn--primary:hover .btn__text {
	color: var(--brand-color);
}
.btn--primary:hover .btn__arrow {
	filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
}

/* Transparent with black font and borders */
.btn--secondary {
	border-color: var(--black);
}
.btn--secondary:hover {
	border-color: var(--brand-color);	
}
.btn--secondary:hover .btn__text {
	color: var(--brand-color);	
}
.btn--secondary:hover .btn__arrow {
	filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
}

/* Transparent with white font and borders */
.btn--tertiary {
	border-color: var(--white);
}
.btn--tertiary .btn__inner {
	color: var(--white);
}
.btn--tertiary .btn__arrow {
	filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(7500%) hue-rotate(97deg) brightness(105%) contrast(106%);
}
.btn--tertiary:before {
	background-color: var(--white);
}
.btn--tertiary:hover .btn__text {
	color: var(--black);
}
.btn--tertiary:hover .btn__arrow {
	filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(0%) hue-rotate(255deg) brightness(96%) contrast(103%);
}

/* Transparent with black font and borders. White background on hover */
.btn--quaternary {
	border-color: var(--black);
}
.btn--quaternary:before {
	background-color: var(--white);
}
.btn--quaternary:hover {
	border-color: var(--brand-color);	
}
.btn--quaternary:hover .btn__text {
	color: var(--brand-color);	
}
.btn--quaternary:hover .btn__arrow {
	filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
}

/* Transparent with green font and borders. Green background */
.btn--quinary {
	border-color: var(--brand-color);
}
.btn--quinary:before {
	background-color: var(--brand-color);
}
.btn--quinary .btn__text {
	color: var(--brand-color);
}
.btn--quinary .btn__arrow {
	filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(515%) hue-rotate(128deg) brightness(90%) contrast(87%);
}
.btn--quinary:hover {
	border-color: var(--black);	
}
.btn--quinary:hover .btn__text {
	color: var(--black);	
}
.btn--quinary:hover .btn__arrow {
	filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(5%) hue-rotate(304deg) brightness(97%) contrast(103%);
}

/* Links */
.link {
	text-transform: uppercase;
	position: relative;
	padding-bottom: 6px;

	display: inline-block;
	width: fit-content;

	font-size: 14px;
	text-transform: uppercase;
}
.link__inner {
	display: flex;
	align-items: center;
	gap: 18px;
}
.link__text {
	transform: translateY(2px);
	font-family: var(--header-font);
	font-weight: 600;
	line-height: 140%;
	letter-spacing: 1px;
}
.link__arrow {
	width: 12px;

	transition: var(--slow-transition);
}
.link:after {
	content: '';
	height: 1px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--black);

	transition: var(--slow-transition);
}
.link:hover .link__arrow {
	transform: translateX(4px);
}

/* View Filter Styling */
.news-filter-wrapper {
	display: none;
}
.filter-button {
	transition: var(--medium-transition);
}
.filter-button.active {
	background-color: var(--light-brand-color);
}

.form-group {
	position: relative;
}
.form-group svg {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.form-group select.form-control {
	appearance: none;
	border: solid 1px var(--black);
	padding: 10px 38px 10px 16px;

	font-family: var(--header-font);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--black);
}
.form-group select.form-control:focus-visible {
	outline: none;
}

.form-group select.form-control option {
	font-family: var(--header-font);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
}

.form-group input[type="text"] {
	font-family: var(--header-font);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 10px 38px 10px 16px;
	border: solid 1px var(--black);
	border-radius: 0;
	color: var(--black);
}
.form-group input[type="text"]::placeholder {
	color: var(--black);
}
.form-group input:focus-visible {
	outline: none;
}
.projects-overview__intro .form-group:last-child {
	display: none;
}

/* Actueel Filter Styling */
.news-overview__intro .form-group {
	display: flex;
	gap: 8px;
}
.news-overview__intro .radio {
	border: 1px solid transparent;
	border-color: var(--black);
	width: fit-content;
	cursor: pointer;

	position: relative;
	overflow: clip;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: var(--medium-transition);
}
.news-overview__intro .radio input {
	display: none;
}
.news-overview__intro .radio label {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--header-font);
	letter-spacing: 1px;
	font-size: 14px;
	text-transform: uppercase;
	padding: 12px 24px;

	transition: var(--medium-transition);
}
.news-overview__intro .radio:hover {
	border-color: var(--brand-color);	
}
.news-overview__intro .radio:hover label {
	color: var(--brand-color);
}
.news-overview__intro .radio.active {
	border-color: var(--brand-color);
}
.news-overview__intro .radio.active label {
	color: var(--brand-color);
}
/* END Actueel filter Styling */
/* END View Filter Styling */

/* Navbar */
#masthead {
	position: fixed;
	z-index: 9999;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 32px var(--container-padding);
	transition: var(--medium-transition);
}

#masthead .site-branding {
	position: relative; 
	z-index: 2;
}

@media (max-width: 768px) {
	#masthead {
		align-items: center;
	}
}

#masthead.header--scrolled {
	background-color: var(--white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

	padding: 12px var(--container-padding);
}
#masthead.header--scrolled #site-navigation:not(.mobile-navigation) .menu-main-menu-container,
.home #masthead.header--scrolled #site-navigation:not(.mobile-navigation) .menu-main-menu-container {
	top: -50%;
	transform: translateY(50%);
}
#masthead.header--scrolled .site-header-image,
.home #masthead.header--scrolled .site-header-image,
#masthead.header--scrolled.header--white .site-header-image {
	filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%);
	height: 26px;
}
#masthead.header--scrolled .main-navigation .menu .menu-item a,
.home #masthead.header--scrolled .main-navigation .menu .menu-item a,
#masthead.header--scrolled.header--white .main-navigation .menu .menu-item a {
	color: var(--black);
	font-size: 14px;
}

#masthead.open .site-header-image,
.home #masthead.open .site-header-image,
#masthead.header--white.open .site-header-image {
	filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%);	
}
#masthead.open #hamburger-menu.hamburger-menu .bar,
.home #masthead.open #hamburger-menu.hamburger-menu .bar,
#masthead.header--white.open #hamburger-menu.hamburger-menu .bar {
	background-color: var(--black);
}

#masthead.open #hamburger-menu.hamburger-menu .bar--1 {
	transform: rotate(45deg) translateY(7.5px);
	left: 25%;
}
#masthead.open #hamburger-menu.hamburger-menu .bar--2 {
	transform: rotate(-45deg) translateY(-7.5px);
	left: 25%;
}
#masthead.open #hamburger-menu.hamburger-menu .bar--3 {
	height: 2px;
	width: 40px;
	transform: translateY(4px);
}

#masthead .menu-language-menu-container .sub-menu .menu-item a {
	width: fit-content;
	line-height: 1;
	transform: translateY(2px);
}


#masthead.header--scrolled #hamburger-menu.hamburger-menu .bar {
	background-color: var(--black);
}

#masthead .site-header-image {
	display: block;
	height: 47px;
	width: 168px;
	object-fit: contain;
	object-position: left;

	transition: var(--medium-transition);
}
.home #masthead .site-header-image,
#masthead.header--white .site-header-image {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(295deg) brightness(104%) contrast(101%);
}

#masthead .main-navigation {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

#masthead .mobile-navigation {
	display: none;

	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100dvh;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--white);
	overflow: hidden;
	padding: 80px 20px;
	transform: translateX(-100%);

	transition: var(--medium-transition);
}

#masthead .menu-main-menu-container {
	position: relative;
	top: 0%;
	transform: translateY(0%);
	transition: var(--medium-transition);
}

#masthead .menu {
	gap: 24px;
}

#masthead .menu .menu-item a {
	color: var(--black);
	transition: var(--medium-transition);
	position: relative;
}

#masthead .menu .menu-item {
	position: relative;
}

#masthead .menu .menu-item:not(.no-hover) a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1px;
	background-color: var(--black);
	transition: var(--medium-transition);
}
#masthead.header--scrolled .menu .menu-item:not(.no-hover) a:after {
	background-color: var(--black);
}

#masthead .menu .menu-item a:hover:after {
	width: 100%;
}

.home #masthead .menu .menu-item a:after,
#masthead.header--white .menu .menu-item a:after {
	background-color: var(--white);
}
#masthead .menu .menu-item .sub-menu .menu-item a:after {
	background-color: var(--black);
}

#masthead .menu .menu-item.current-menu-item > a:after {
	width: 100%;
}
#masthead .menu .menu-item.current-page-ancestor > a:after {
	width: 100%;

	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: var(--black);
	transition: var(--medium-transition);
}
#masthead.header--white .menu .menu-item.current-page-ancestor > a:after {
	background-color: var(--white);
}
#masthead.header--white.header--scrolled .menu .menu-item.current-page-ancestor > a:after {
	background-color: var(--black);
}

#masthead ul.menu ul.sub-menu {
	left: 50%;
	top: 100%;
	float: unset;
	box-shadow: unset;
	flex-direction: column;
	gap: 8px;

	transform: translateX(-50%);
	padding: 28px 16px 16px;

	opacity: 0;
	pointer-events: none;

	translate: 0 8px;

	transition: var(--medium-transition);
}
#masthead ul.menu ul.sub-menu:before {
	content: '';
	position: absolute;
	top: 14px;
	right: 0;
	left: 0;
	bottom:0;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

	background-color: var(--white);
}

#masthead .menu > .menu-item:hover .sub-menu {
	opacity: 1;
	pointer-events: all;

	translate: 0 0;
}

.home #masthead .menu .menu-item a,
#masthead.header--white .menu .menu-item a {
	color: var(--white);
}

.home #masthead .menu .menu-item .sub-menu .menu-item a,
#masthead.header--white .menu .menu-item .sub-menu .menu-item a {
	color: var(--black);
}

.home-text.second img {
	object-fit: contain;
}

#masthead .mobile-navigation .menu .menu-item.current-menu-item > span a:after {
	width: 100%;
}
/* Eind Navigatie Bar */

/* Hamburger Menu */
#masthead .mobile-navigation .menu {
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	gap: 16px;
}

#masthead .mobile-navigation .menu .menu-item a {
	color: var(--black);
}
#masthead .mobile-navigation .menu .menu-item a:after {
	background-color: var(--black);
}
#masthead .mobile-navigation li.menu-item-has-children ul.sub-menu {
	max-height: 0;
	overflow: hidden;
	display: flex;
	flex-flow: column;
	gap: 8px;

	transform: unset;
	padding: 0;
	opacity: 1;
	translate: unset;

	transition: max-height 0.2s ease-out;
}
#masthead .mobile-navigation li.menu-item-has-children ul.sub-menu .menu-item {
	padding: 8px 0 0;
}

#masthead .mobile-navigation ul.menu ul.sub-menu:before {
	content: none;
}

#masthead .mobile-navigation .menu .menu-item.current-page-ancestor span a:after{
	width: 100%;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: var(--black);
	transition: var(--medium-transition);
}

#masthead .mobile-navigation li.menu-item-has-children > span div {
	transition: var(--medium-transition);
}
#masthead .mobile-navigation li.menu-item-has-children > span.active div {
	transform: rotate(45deg);
}

/* Standaard menu, zichtbaar op grotere schermen */
.main-navigation .menu {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-left: 32px;
}



/* Hamburger menu icoon (standaard verborgen op grotere schermen) */
#hamburger-menu {
	display: none;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	height: 24px;
	position: relative;
}

#hamburger-menu .bar {
	height: 3px;
	width: 32px;
	background-color: var(--black);
	position: relative;

	transition: all 0.3s ease;
}

.home #masthead #hamburger-menu .bar,
#masthead.header--white #hamburger-menu .bar {
	background-color: var(--white);
}

/* Responsive Styles */
@media (max-width: 768px) {
	#hamburger-menu {
		display: flex;
	}

	div.wa-selector__buttons {
		overflow-x: scroll;
		overflow-y: unset;
	}

	#masthead .main-navigation {
		display: none;
	}



	/* Full-screen menu styles */
	#masthead .mobile-navigation {
		display: flex;
	}
	#masthead.open .mobile-navigation {
		transform: translateX(0%);
	}

	.menu-item-has-children > span {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		cursor: pointer;
	}

	.menu-item-has-children > span a {
		margin: 0 !important;
		padding: 0 !important;
	}

	.menu-item-has-children > span div {
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		transition: transform 0.3s ease;
		position: relative;
		color: var(--black); /* Ensure visibility */
	}

	.menu-item-has-children > span div::before {
		content: '+';
		position: absolute;
		font-weight: bold; /* Make it stand out */
	}

	.menu-item-has-children.active > span div::before {
		content: '-';
	}

	.menu-item-has-children.active > .sub-menu {
		max-height: 500px; /* Adjust based on your needs */
		padding: 16px 0;
	}

	/* Submenu Items */
	#site-navigation.open .sub-menu .menu-item a {
		font-size: 18px;
		color: var(--black) !important;
		opacity: 0.8;
	}

	/* Hamburger Animation */
	#site-navigation.open #hamburger-menu .bar {
		background-color: var(--black);
	}

	#site-navigation.open #hamburger-menu .bar:nth-child(1) {
		top: 9px;
		transform: rotate(45deg);
	}

	#site-navigation.open #hamburger-menu .bar:nth-child(2) {
		opacity: 0;
	}

	#site-navigation.open #hamburger-menu .bar:nth-child(3) {
		top: 9px;
		transform: rotate(-45deg);
	}

	/* Ensure proper spacing and alignment */
	#site-navigation.open .menu > .menu-item:not(:last-child) {
		margin-bottom: 8px;
	}

	/* Animation for submenu items */
	.menu-item-has-children.active > .sub-menu .menu-item {
		animation: fadeInSubmenu 0.3s ease forwards;
	}

	@keyframes fadeInSubmenu {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}
/* Hamburger Menu Eind */

/* Hero Over Ons */
.hero-over {
	max-height: 100dvh;
	overflow: hidden;
}

.hero-over__inner {
	display: flex;
	min-height: calc(100dvh - 111px); 
}

.hero-over__left {
	width: 45%;
	margin-top: 146px;
}

.hero-over__content {
	padding: 64px 64px 64px var(--container-padding);
	height: 100%;
}

.hero-over__intro-title {
	margin-bottom: 8px;
}

.hero-over__intro-text {
	margin-top: 32px;
	margin-bottom: 0;
}

.hero-over__right {
	width: 55%;
	aspect-ratio: 407 / 301;
	position: relative;
}
.hero-over__image {
	position: absolute;
	top: 0;
	left: 0;
}
.hero-over__video {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
@media (max-width: 768px) {
	.hero-over {
		max-height: unset;
	}	
}
@media (min-width: 2560px) {
	.hero-over {
		max-height: unset;
	}	
	.hero-over__inner {
		min-height: unset;
	}
	.hero-over__right {
		max-height: 960px;
	}
}
/* END Hero Over Ons */

/* Grid of 4 */
.grid-of-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 64px 96px;
}

.grid-element {
	display: block;
}
.grid-element:nth-child(odd) {
	grid-column: 1;
}
.grid-element:nth-child(even) {
	grid-column: 2;
}

.grid-element:nth-child(4n) {
	margin-top: calc(-19% + 1px);
}

.grid-of-4 .grid-element:nth-child(4n + 1) .image-wrapper,
.grid-of-4 .grid-element:nth-child(4n) .image-wrapper {
	aspect-ratio: 4/3;
}
.grid-of-4 .grid-element:nth-child(4n + 2) .image-wrapper,
.grid-of-4 .grid-element:nth-child(4n + 3) .image-wrapper {
	aspect-ratio: 16/9;	
}

@media (max-width: 768px) {
	.grid-of-4 .grid-element:nth-child(4n + 2) .image-wrapper,
	.grid-of-4 .grid-element:nth-child(4n + 3) .image-wrapper {
		aspect-ratio: 4/3;	
	}
}

@media (max-width: 1240px) {
	.grid-element:nth-child(4n) {
		margin-top: unset;
	}
	div.wa-other__inner {
		display: grid;
	}
}


/* Swiper */
.swiper-pagination {

}

/* Form styling */
.wpcf7 .wpcf7-form div p {
	margin-bottom: 14px;
}
.wpcf7 br {
	display: none;
}
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.wpcf7-form-control-wrap .wpcf7-form-control {
	padding: 12px 16px;
	border-radius: 0;
	border: none;
	width: 100%;
	font-family: var(--body-font);
	font-size: 16px;
}
.wpcf7-form-control-wrap .wpcf7-form-control::placeholder {
	font-family: var(--body-font);
	color: var(--black);
	font-size: 16px;
}

.wpcf7-form-control.wpcf7-submit {
	margin-top: 32px;
}

.wpcf7-not-valid-tip {
	font-size: 14px;
	font-family: var(--body-font);
	margin-top: 4px;
}
.wpcf7 form .wpcf7-response-output {
	margin: 0;
}

.wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
}

.wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
	margin: 0;
}

.wpcf7 label {
	display: block;
	font-family: var(--header-font);
	margin-bottom: 16px;
}
/* End Form styling */


/* Mailchimp Styling */
.mc4wp-form input {
	padding: 12px 16px;
	border-radius: 0;
	border: none;
	width: 100%;
	font-family: var(--body-font);
	font-size: 16px;
}
.mc4wp-form input::placeholder {
	color: var(--black);
}
.mc4wp-form input:focus-visible {
	outline: none;
}
.mc4wp-form p {
	margin-bottom: 14px;
}
.mc4wp-form p:last-child {
	margin-bottom: 0;
}

.mc4wp-form .btn {
	margin-top: 32px;
}
/* END Mailchimp Styling */


.swiper-pagination .swiper-pagination-bullet {
	width: 48px;
	height: 4px;
	background-color: var(--white);
	opacity: 0.6;
	border-radius: 0;

	transition: var(--fast-transition);
}

.swiper-pagination .swiper-pagination-bullet-active {
	opacity: 1;
}

/* Footer Styling */
#colophon {
	padding: 64px 0 0;
	background-color: var(--black);
}
#colophon .site-info {
	display: grid;
	grid-template-columns: 200px 1fr 1fr 1fr;
	grid-gap: 56px;
}

.footer__image {
	filter: brightness(0) saturate(100%) invert(71%) sepia(7%) saturate(1787%) hue-rotate(128deg) brightness(88%) contrast(85%);
	object-fit: contain;
	height: auto;
}

div.wa-selector__image-slider {
	width: 55%;
}

.footer__column-title {
	color: var(--brand-color);
	height: 48px;
	margin-left: 32px;
}
.footer__column-title-2 {
	color: var(--brand-color);
}
.footer__column-title.lm-0 {
	margin-left: 0;
}
.footer__column .footer__column-subtitle {
	font-family: var(--header-font);
	color: var(--brand-color);
	margin-bottom: 8px;
	margin-left: 32px;
}

.footer__column p {
	color: var(--white);
}

.footer__text-wrapper {
	display: flex;
	gap: 8px;
}
.footer__text-wrapper p {
	color: var(--white);
	margin-bottom: 8px;
}

.footer__link p {
	position: relative;
}
.footer__link p:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1px;
	background-color: var(--white);

	transition: var(--slow-transition);
}

.footer__link:hover p:after {
	width: 100%;
}

.footer__bar {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--brand-color);
	padding: 32px 0;
	margin-top: 64px;
}

.footer__bar a, 
.footer__bar p {
	color: var(--brand-color);
	margin: 0;
}

.footer__links {
	display: flex;
	align-items: center;
	gap: 8px;
}
.footer__links a {
	position: relative;
}
.footer__links a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1px;
	background-color: var(--brand-color);

	transition: var(--slow-transition);
}
.footer__links a:hover:after {
	width: 100%;
}

.footer__social-media {
	display: flex;
	gap: 16px;
}

.footer__social-media-link {
	transition: var(--medium-transition);
}
.footer__social-media-link:hover {
	scale: 1.1;
}

.footer__social-media-link svg {
	width: 20px;
	height: 20px;
}

.footer__social-media-link svg path {
	fill: var(--brand-color);
}
.footer__column a.btn.btn--footer {
	margin-top: 30px;
}
.btn--mobile {
	display:none;
}
@media (max-width: 768px) { 
	.btn--mobile {
		display:block;
		margin-bottom: 30px;
	}
	.btn--desktop {
		display:none;
	}

}

/* Page Work Area Styling */
/* End Page Work Area Styling*/

/* Animation styling */
.animation-container {
	overflow: hidden;
}

.home .site-branding,
.home .main-navigation {
	transform: translateY(-200%);
}

.home-hero__title,
.home-hero__subtitle {
	transform: translateY(100%);
}
.home-hero__scroll-down {
	opacity: 0;
}

.hero-2 {
	opacity: 0;
	transform: translateY(24px);
}

.project-card-animation {
	opacity: 0;	
}
.project-card-animation.show {
	opacity: 1;
	transition: var(--medium-transition);
}

.news-card {
	opacity: 0;	
}
.news-card.show {
	opacity: 1;
	transition: var(--medium-transition);
}

.contact-form,
.contact-form__title,
.contact-form__top .divider, 
.contact-form__top .divider-wrapper > p,
.wpcf7-form-control-wrap {
	opacity: 0;
	transform: translateY(24px);
}

.services-overview {
	opacity: 0;
	transform: translateY(24px);
}

.contact-form__top .divider-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.hero-over__content h1, 
.hero-over__content .hero-over__intro-text,
.hero-over__content .divider,
.news-hero__date {
	transform: translateY(24px);
	opacity: 0;
}

.partner-slider__slide-inner img {
	height: 40px;
	width: 100%;
	object-fit: contain;
}

.hero-over__video,
.hero-over__image {
	transform: translateY(24px);
	opacity: 0;
}

.news-overview__intro, 
.news-overview__grid {
	transform: translateY(24px);
	opacity: 0;
}

.news-overview__intro.show, 
.news-overview__grid.show {
	opacity: 1;
}

.hero-3__title,
.hero-3 .animation-wrapper {
	transform: translateY(100%);
}
/* End animation styling */


@media (max-width: 1440px) {
	:root {
		--container-padding: calc((100vw - 90vw) / 2);
	}
	h3 {
		font-size: 28px;
		line-height: 140%;
	}
}

@media (max-width: 1280px) {
	div.wa-selector__image-slider {
		width: 100%;
	}
	.wa-selector__buttons {
		overflow-x: scroll;
	}
}

@media (max-width: 1160px) {
	#colophon .site-info {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer__image-wrapper {
		order: 4;
	}
	.footer__image {
		width: 200px;
	}
}

@media (max-width: 1024px) {
	.footer__bar {
		flex-direction: column;
		gap: 32px;
	}
	div.wa-other__inner {
		display: flex;
	}

	.wa-selector__buttons {
		overflow-x: scroll;
	}
}

@media (max-width: 768px) {
	.small-container {
		width: 90%;
	}
	.contact-form__top .divider-wrapper {
		display: flex;
	}
	#colophon .site-info {
		grid-template-columns: 1fr;
	}
	.footer__image-wrapper {
		order: -1;
	}

	.footer__column-title {
		height: unset;
		margin-bottom: 24px;
	}

	.footer__links {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer__links .vertical-divider {
		display: none;
	}
	.menu-item a {
		font-size: 20px;
	}
	.hero-over__content {
		padding: 64px var(--container-padding);
	}
}

/* Animations */
@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

@keyframes opacity-animation {
	0%, 100% {
		opacity: .4;
	}
	50% {
		opacity: 1;
	}
}
/* End Animations */

html {
	scroll-behavior: smooth;
}

/* cookie banner en recaptcha */

.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
	display: none;
}
.grecaptcha-badge {
	display: none !important;
}

/* Onderdelen card */
.onderdeel {
	min-height: calc(100dvh - var(--navbar-height));

	position: sticky;
	top: var(--navbar-height);
}
.onderdeel:last-child {
	position: relative;
	top: unset;
}

.onderdeel--white {
	background-color: var(--white);
}
.onderdeel--infra {
	background-color: var(--light-sand);
}
.onderdeel--water {
	background-color: var(--light-water);
}
.onderdeel--green {
	background-color: var(--light-brand-color);
}

.onderdeel__wrapper {
	padding: 64px 0;
}

.onderdeel__link {
	position: relative;
}
.onderdeel__link:after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 1px;
	width: 0;
	background-color: var(--black);

	transition: var(--slow-transition);
}
.onderdeel__link-inner {
	display: flex;
	align-items: center;
	gap: 8px;
}
.onderdeel__link-text {
	text-wrap: nowrap;
}
.onderdeel__link-arrow {
	min-width: 12px;
	max-width: 12px;

	transition: var(--slow-transition);
}
.onderdeel__link:hover .onderdeel__link-arrow {
	transform: translateX(6px);
}
.onderdeel__link:hover:after {
	width: 100%;
}

.onderdeel__top-title-index {
	margin-right: 32px;
}

.onderdeel__inner-wrapper {
	overflow: hidden;
}

.onderdeel__inner {
	display: flex;
	gap: 64px;
}

.onderdeel__left,
.onderdeel__right {
	width: 50%;
	display: flex;
	flex-direction: column;
}
.onderdeel__left {
	align-items: flex-start;
}

.onderdeel__image-wrapper {
	aspect-ratio: 586 / 450;
	width: 100%;
}
.onderdeel__logo-wrapper {
	width: 208px;
	height: auto;
	margin-top: 24px;
}
.onderdeel__logo {
	object-fit: contain;
}

.onderdeel__content {
	aspect-ratio: 586 / 450;
}

.onderdeel__content-title {
	margin-bottom: 16px;
}

.onderdeel__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

@media (max-width: 768px) {
	.onderdeel__wrapper {
		padding: 32px 0 64px;
	}
	.onderdeel .divider-wrapper {
		margin-bottom: 0;
		padding-bottom: 16px;
	}
	.onderdeel__inner {
		display: flex;
		gap: 24px;
		flex-direction: column;
	}
	.onderdeel__left, .onderdeel__right {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.onderdeel__left {
		align-items: flex-start;
	}
	.onderdeel__content {
		aspect-ratio: unset;
	}
}