/*!
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: 'Gilroy';
	src: url('/wp-content/themes/paddap-custom-theme/dist/fonts/Gilroy-Black.ttf') format('truetype');
	font-style: normal;
	font-weight: 900;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/themes/paddap-custom-theme/dist/fonts/Gilroy-Bold.ttf') format('truetype');
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/themes/paddap-custom-theme/dist/fonts/Gilroy-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
}

:root {
	--heading-font: "Gilroy", sans-serif;
	--body-font: "Gilroy", sans-serif;
	--primaryColor: #ee3333;

	/* Colors */
	--blue: #3884fc;
	--light-blue:#cbdcf3;
	--black: #111;
	--white: #fff;
	--orange: #ff9900;
	--green: #c8f43c;
	--light-orange: #fff3e0;
	--light-green:#e4f8bb;
	--black-header:rgba(0, 0, 0, 0.5);
	--dark-grey:#201c1c;
	--light-grey: rgba(239, 239, 239, 1);
	--light-grey-detail: rgba(162, 162, 162);
	--grey:#d9d9d9;
	--yellow:yellow;
	--red:red;
	--beige:beige;


	--hero-filter-default: var(--orange);
	--page-bg-default: var(--beige);

	/* Utility */
	--container-width: 1280px;
	--medium-container-width: 960px;
	--small-container-width: 770px;

	--header-width:1280px;
	--footer-width:1280px;
	--hero-width:1280px;
	--section-padding: 96px;

	--container-padding: calc((100vw - var(--container-width)) / 2);

	/* link colors */
	.text__linkjes-B2B { --strook-kleur: var(--orange); }
	.text__linkjes-communicatie { --strook-kleur: var(--blue); }
	.text__linkjes-branding { --strook-kleur: var(--green); }
	.text__linkjes-evenementen { --strook-kleur: var(--black); }
}
body.branch-b2b-marketing {
	--hero-filter: var(--orange);
	--page-bg: #fff3e0; /* zacht oranje */
}
/* Communicatie → blauw */
body.branch-communicatie {
	--hero-filter: var(--blue);
	--page-bg: var(--light-blue); /* zacht blauw */
}
/* Employer Branding → groen */
body.branch-employer-branding {
	--hero-filter: var(--green);
	--page-bg: var(--light-green); /* zacht groen */
}
/* Zakelijke evenementen → zwart */
body.branch-zakelijke-evenementen {
	--hero-filter: var(--black);
	--page-bg: var(--light-grey-detail); /* licht grijs */
}

body.branch-b2b-marketing .quote__text p strong {
	background-color: var(--orange);
}
body.branch-communicatie .quote__text p strong {
	background-color: var(--blue);
	color: var(--white);
}
body.branch-employer-branding .quote__text p strong {
	background-color: var(--green);
}
body.branch-zakelijke-evenementen .quote__text p strong {
	background-color: var(--black);
	color: var(--white);
}


body,
p {
	font-family: var(--body-font);
	font-size: 21px;
}

a, button {
	font-family: var(--body-font);
	font-size: 16px;
}

.container {
	width: 90%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
}

.medium-container {
	width: 90%;
	max-width: var(--medium-container-width);
	margin-left: auto;
	margin-right: auto;
}

.small-container {
	width: 90%;
	max-width: var(--small-container-width);
	margin-left: auto;
	margin-right: auto;
}

.uppercase {
	text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font);
	color: var(--black);
	font-weight: 900;
	line-height: 1;
}

h1 {
	font-size: 100px;
	text-transform: uppercase;
}

h2 {
	font-size: 61px;
	text-transform: uppercase;
}

h3 {
	font-size: 30px;
	font-weight: 700;
}

h4 {
	font-size: 23px;
}

@media (max-width: 600px) {
	body,
	p {
		font-size: 16px;
	}
	h1 {
		font-size: 50px;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 24px;
	}

	h4 {
		font-size: 21px;
	}
}

.wysiwyg p:first-child {
	margin-top: 0;
}
.wysiwyg p:last-child {
	margin-bottom: 0;
}
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3 {
	margin-top: 0;
	text-transform: uppercase;
	margin-bottom: 24px;
}

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

img, svg, video, iframe {
	display: block;
}


/* Buttons */
.btn-group {
	display: flex;
	gap: 16px;
}

.btn,
.btn:visited {
	cursor: pointer;
	font-weight: 700;
	border-radius: 999px;
	padding: 12px 30px 10px;
	border: 2px solid var(--black);
	font-size: 16px;
	color: var(--black);
	text-transform: uppercase;
	display: inline-flex;
	gap: 16px;
	align-items: center;
	white-space: nowrap;

	text-decoration: none;
	transition: all 0.3s ease;
}
.btn svg {
	transform: translate(0, -1px);
	transition: all .2s ease;
	pointer-events: none;
}
.btn:hover svg path {
	transition: all .2s ease;
}
.btn:hover {
	background: var(--black);
	color: var(--white);
}
.btn:hover svg {
	transform: translate(6px, -1px);
}
.btn:hover svg path {
	fill: var(--white);
}

.btn-outline{
	background:var(--white);
	border:1px solid rgba(0,0,0,0.08);
}

.btn-outline:hover {
	border:1px solid rgba(0,0,0,0.08);
	background-color: rgba(0,0,0,0.08);
}

.btn--2,
.btn--2:visited {
	border: 2px solid var(--white);
	color: var(--white);
}
.btn--2:hover,
.bttn--2:visited:hover {
	background: var(--white);
	color: var(--blue);
}


/*===========================================================================================================================HEADER 
==========================================================================================================================*/
.site-branding {
	display: flex;
	align-items: center;
}
.site-branding img {
	display: block;  /* overschrijft eventuele eerdere display:flex */
	margin: 0;                   /* verwijdert ongewenste marge */
	height: 60px;                /* match met jouw menu-hoogte */
	box-sizing: border-box;
	padding: 4px 24px 4px 16px;                /* behoud van je zwarte rand/ruimte indien gewenst */
	background-color:var(--black-header);
	backdrop-filter: blur(10px);           /* wazig maken van de achtergrond */
	-webkit-backdrop-filter: blur(10px);   /* voor Safari */
	border-radius:30px;
	object-fit: contain;
}
.site-header {
	display: flex;
	justify-content: space-between; 
	align-items: center;        
	width: 90%;
	max-width: var(--header-width);
	position: fixed;
	left: 50%;
	top: 32px;
	z-index: 999;
	transform:translatex(-50%);
	
	transition: all .25s ease;
}


.main-navigation {
	display:flex;
	justify-content:flex-end;
}

#primary-menu {
	list-style: none;
	display: flex; /* menu-items in een rij */
	height:60px;
	align-items:center;
	margin: 0;
	padding-right: 20px;

}

#primary-menu li {
	margin-left: 20px; 
}

#primary-menu a {
	color: var(--white);
	text-decoration: none;
	font-weight: bold;
	transition:0.3s;
	padding-right:20px;
	padding-left:20px;

}

#primary-menu a:hover {
	color:var(--orange);
	transition:0.3s;
}
.menu-wrapper {
	background-color:var(--black-header);
	border-radius: 30px;
	display: inline-block;  
	backdrop-filter: blur(10px);           /* wazig maken van de achtergrond */
	-webkit-backdrop-filter: blur(10px);   /* voor Safari */
}
/* Hamburger knop - standaard verbergen op desktop */
/* Hamburger knop - alleen mobiel */
/* Hamburger knop alleen mobiel */
.menu-toggle {
	display: none;
	font-size: 30px;
	color: var(--white);
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10001;
}
#overlay-menu,
.close-overlay {
	display: none;
}

@media screen and (max-width: 960px) {
	.site-header {
		top: 16px;
	}

	.menu-toggle {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10001;
		color:var(--orange);
	}
	.menu-toggle.hidden{
		display:none;
	}

	/* Verberg desktop menu */
	.main-navigation .menu-wrapper {
		display: none;
	}

	/* Fullscreen overlay */
	#overlay-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		background-color: var(--dark-grey);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease, visibility 0.3s;
		z-index: 10000;
		overflow: hidden;
	}

	#overlay-menu.active {
		visibility: visible;
		opacity: 1;
	}

	/* Sluitknop */
	.close-overlay {
		display: block;
		position: fixed;
		top: 20px;
		right: 20px;
		font-size: 40px;
		color: var(--white);
		background: none;
		border: none;
		cursor: pointer;
		z-index: 10001;
	}

	#overlay-primary-menu {
		list-style: none;       /* verwijder bullets */
		padding: 0;             /* verwijder padding */
		margin: 0;              /* verwijder margin */
		display: flex;
		flex-direction: column; /* items onder elkaar */
		justify-content: center; 
		align-items: center;    /* horizontaal centreren */
		width: 100%;
		height: 100%;           /* vul hele overlay */
		text-align: center;     /* tekst centreren */
	}
	#overlay-menu ul,
	#overlay-menu li {
		list-style: none; /* forceer weg */
		padding: 0; 
		margin: 0;
	}

	#overlay-primary-menu li {
		margin: 20px 0;         /* afstand tussen links */
	}

	#overlay-primary-menu a {
		color: var(--white);
		text-decoration: none;  /* verwijder onderstreping */
		font-size: 28px;
		font-weight: bold;
		transition: color 0.3s;
	}
}

/*===========================================================================================================================FOOTTER
==========================================================================================================================*/
.site-footer {
	background-color: var(--dark-grey);
	color: var(--white);
	padding: 60px 20px;
	font-family: sans-serif;
	position:relative;
	overflow:hidden;

}
.footer-container{
	width:90%;
	max-width:var(--footer-width);
	margin-left: auto;
	margin-right: auto;
}

.footer-title {
	color: var(--white);
	margin-bottom: 40px;
	font-weight: 400;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 kolommen bovenste rij */
	grid-template-rows: auto auto;        /* 2 rijen */
	gap: 40px 60px;                       /* afstand tussen rijen en kolommen */
}

/* Plaatsing van kolommen */
.bezoek {
	grid-column: 1;
	grid-row: 1;
}

.contact {
	grid-column: 2;
	grid-row: 1;
}

.kennis {
	grid-column: 3;
	grid-row: 1;
}

.volg {
	grid-column: 2;
	grid-row: 2;
}

.versterken {
	grid-column: 3;
	grid-row: 2;
}

.footer-col h3 {
	margin-bottom: 10px;
	color: var(--white);
}

.footer-col p, .footer-col a {
	margin: 0 0 10px 0;
	color: var(--white);
	text-decoration: none;
}

.site-footer .socials {
	display: flex;
	gap: 8px;
}
.site-footer .socials a {
	background-color: rgba(71, 71, 71, 1);
	width: 55px;
	height: 55px;
	display: flex;
	justify-content:center;
	align-items:center;
}

.footer-col a:hover {
	color: var(--orange);
}

.footer-col a {
	font-size: 21px;
}

.socials a img {
	width: 30px;
	margin-right: 10px;
}
.socials {
	display: flex;
	gap: 16px;          /* ruimte tussen de iconen */
	align-items: center;
}

.socials a svg {
	width: 32px;        /* grootte van het icoon */
	height: 32px;
	fill: var(--white); /* kleur van het icoon */
	transition: transform 0.3s, fill 0.3s;
}

.socials a:hover svg {
	transform: scale(1.1);
	fill: var(--orange); /* kleur verandert op hover */
}


.site-footer .trustoo a {
	color: var(--white);
	font-size: 21px;
}

.copyright{
	color:var(--orange);

}
.footer-bottom{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	width:100%;
	margin-top:64px;
	margin-bottom:96px;
}
.footer-bigtext {
	position: absolute;
	bottom: -13%; /* laat het deels buiten de footer vallen */
	left: 50%;
	transform: translateX(-50%);
	font-size: 19vw; /* schaal mee met schermbreedte */
	color: rgba(255, 255, 255, 0.4); /* subtiele transparantie */
	white-space: nowrap;
	line-height: 1;
	pointer-events: none; /* niet aanklikbaar */
	z-index: 0;
	font-weight:1000;
}
.footer-bigtext bold {
	font-family: var(--heading-font);
	font-weight: 900;
}

@media screen and (max-width: 768px) {

	/* Footer container smaller en padding */
	.site-footer {
		padding: 40px 20px;
	}

	.footer-container {
		width: 95%;
		max-width: 100%;
		margin: 0 auto;
	}

	/* Grid wordt 1 kolom */
	.footer-grid {
		display: flex;
		flex-direction: column;
		gap: 30px; /* ruimte tussen de rijen */
	}

	.footer-col {
		grid-column: auto;
		grid-row: auto;
	}

	/* Socials onder elkaar of in rij */
	.socials {
		display: flex;
		justify-content: flex-start; /* links uitlijnen, kan ook center */
		gap: 10px;
		flex-wrap: wrap;
	}

	.socials a img {
		width: 40px; /* iets groter icoontjes voor mobiel */
		height: auto;
	}

	/* Footer bottom - kolommen onder elkaar */
	.footer-bottom {
		flex-direction: column;
		align-items: flex-start; /* kan ook center */
		gap: 10px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	/* Grote achtergrondtekst kleiner en niet overlappen */
	.footer-bigtext {
		font-size: 12vw;
		bottom: -5%;
		left: 50%;
		transform: translateX(-50%);
	}

	/* Titels en tekst wat groter op mobiel */
	.footer-title {
		font-size: 2.5em;
		text-align: center;
	}

	.footer-col h3 {
		font-size: 1.2em;
		margin-bottom: 10px;
		text-align: left; /* kan ook center */
	}

	.footer-col p, 
	.footer-col a {
		font-size: 1em;
		text-align: left; /* kan ook center */
	}

	.footer-col a:hover {
		text-decoration: underline;
	}

}


/*===========================================================================================================================HOMEPAGE
==========================================================================================================================*/
.hero,
.hero-photo {
	width: 100%;
	min-height: 80svh;
	height: 80svh;
	display: flex;
	justify-content: center;
	position: relative;
	top: 0;
	margin-top: 0;
	background: var(--dark-grey);
	text-align: center;
	box-sizing: border-box;
	overflow: hidden;
}

.hero {
	padding: 96px;
	height: unset;
}

.hero-photo {
	background: none;
	padding-top: 0;
}

.hero.home-hero {
	min-height: 100svh;
}

/* hero text */
.hero__omschrijving {
	width: 70%;
	color: var(--white);
	margin: 0;
}

.hero-photo .container {
	width: 100%;
	max-width: 100vw;
	height: 100%;
	margin-left: 0;
	margin-right: 0;
}

.hero__inner {
	height: 100%;
}

.hero__inner,
.hero-photo__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-photo__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center; /* dit zet alles verticaal in het midden */
	align-items: center;
}
.hero-photo__color-filter {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--hero-filter, var(--hero-filter-default));
	opacity: 0.7;
	pointer-events: none;
	z-index: 1; /* komt boven de img */
}

.hero-photo__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0; /* blijft achter de overlay */
}
.hero-photo__image-wrapper {
	position: relative; /* BELANGRIJK: maakt het de 'parent' voor absolute positioning */
	width: 100%;
	height: 100%;
	overflow: hidden; /* zorgt dat img en filter niet ernaast uitsteken */
	z-index: 0; /* dit zorgt dat wrapper achter de tekst blijft */
}

.hero__title {
	text-transform: uppercase;
}

.hero__title,
.hero__title-detail {
	color: var(--white);
}

.hero__title-detail {
	margin: 0;
	font-size: 51px;
	text-transform: none;
	margin-bottom: 12px;
}

@media (max-width: 600px) {
	.hero__title-detail {
		font-size: 30px;
	}
}

.hero__taxonimy {
	color: var(--white);
	border: solid;
	border-color: var(--white);
	border-radius: 32px;
	padding: 6px;
	z-index: 5;
	position:absolute;
	margin-bottom:15%;
}

.hero__title-rainbow {
	background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--blue));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* slider */
.hero__slider {
	position: relative;
}
.hero__slider .swiper {
	width: 100%;
}

.hero__slider .hero__swiper-slide {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;   /* alle slides dezelfde hoogte */
	border-radius: 30px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero__slider .hero__swiper-slide video,
.hero__slider .hero__swiper-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

/* slider buttons */
.hero__bttn-next,
.hero__bttn-prev {
	height: 48px;
	width: 48px;
	border: 2px solid var(--white);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 40px;
	cursor: pointer;
	z-index: 10;
	background: transparent;
	font-size: 28px;
	color: var(--white);
	font-weight: bold;
}

.hero__bttn-next {
	right: 60px;
}

.hero__bttn-prev {
	right: 120px;
}

.hero__bttn-next::after {
	transform: rotate(-45deg);
}

.hero__bttn-prev::after {
	transform: rotate(135deg);
}

/* color bars */
.hero__colors,
.hero-photo__colors {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
}

.hero__color,
.hero-photo__color {
	flex: 1;
}

.hero__color--orange,
.hero-photo__color--orange {
	background: var(--orange); 
}

.hero__color--blue,
.hero-photo__color--blue {
	background: var(--blue); 
}

.hero__color--green,
.hero-photo__color--green {
	background: var(--green);
}

.hero__color--black,
.hero-photo__color--black { 
	background: var(--black);
}

/* responsive */


@media screen and (max-width: 768px) {

	.hero__taxonimy {
		font-size: 0.9em;
		padding: 3px 8px;
		text-align: center;
	}

	/* Hero Photo wordt kleiner en flex-column */
	.hero-photo {
		height: 60svh;
		min-height: 50svh;
		flex-direction: column;
	}
	.hero {
		padding: var(--section-padding) 0 calc(var(--section-padding) + 16px);
	}

	.hero-photo__img {
		height: 50vh; /* afbeelding neemt helft van schermhoogte op mobiel */
	}

	/* Hero colors stapelen onder elkaar in plaats van horizontaal */
	.hero__color,
	.hero-photo__color {
		width: 100%;
		height: 50px; /* hoogte van kleurblokken aanpassen voor mobiel */
	}


	.hero__omschrijving {
		width: 95%;
	}
}


/* Section styling */
.text__inner {
	text-align: left;
	color: var(--black);
}

/* Titel + knop wrapper */
.text__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 40px;
}

.text__header .wysiwyg {
	width: 75%;
}

@media (max-width: 768px) {
	.text__header {
		flex-direction: column;
	}
	.text__header .wysiwyg {
		width: 100%;
	}
}

/* Titel */
.text__title {
	margin: 0;
}


/* Content tekst */
.text__content {
	margin-bottom: 40px;
	max-width: 768px;
	width: 100%;
}
.text__content p {
	margin: 0;
}

/* Linkjes grid */
.text__linkjes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.text__linkjes div {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 9/13;
}
.text__linkjes div::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	z-index: 1;
	background: var(--strook-kleur); /* kleur via variabele */
}
.text__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;   /* zorgt dat img mooi schaalt */
	z-index: 0;          /* onder de tekst */
	filter: brightness(.8);
}

.text__kaart {
	transition: all .2s ease;
}
.text__kaart:hover {
	transform: translateY(-4px);
}
.text__kaart:hover .text__arrow {
	transform: translate(4px, -4px);
}


.text__linkjes a {
	position: relative;
	z-index: 2;          /* boven de img */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 40px 0;
	text-decoration: none;
	font-size: 21px;
	font-weight: 900;
	color: var(--white);
	white-space: nowrap;
}
.text__arrow {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 50px;
	height: 50px;
	z-index: 3; /* boven alles */
	pointer-events: none;
	transition: all .2s ease;
}


section.video {
	background-color: var(--orange);
	padding: var(--section-padding) 0;
}

.video__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 32px;
}

.video__inner .wysiwyg {
	width: 90%;
	text-align: center;
}

.video__title {
	margin-top: 0;
}

.video__content {
	color: var(--black);
	margin-bottom: 40px;
	text-align: center;
	max-width: 60%;
}

.video__video {
	border-radius: 16px;
	overflow: hidden;
	width: 70vw; /* breedte van de container */
	max-width: 100%; /* voorkom overflow */
	margin: 0 auto; /* centreer */
}

.video__video video {
	width: 100%;
	height: 100%;
}

.text2__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.text2__title {
	margin-top: 0;
}

.text2__opsomming {
	display: flex;
	justify-content: center;
	gap: 32px;
	width: 100%;
}

.text2__opsomming1,
.text2__opsomming2,
.text2__opsomming3 {
	color: var(--black);
	border-radius: 10px;
	height: 120px;
	width: 33%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 26px;
	text-transform: uppercase;
}

.text2__opsomming1 {
	background-color: var(--orange);
}

.text2__opsomming2 {
	background-color: var(--blue);
}

.text2__opsomming3 {
	background-color: var(--green);
}

.text2__content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	max-width: 60vw;

	margin-top: var(--section-padding);
}

.text2__content-title {
	margin-top: 0;
}

.text2__content-text {
	font-weight: bold;
	margin-bottom: 30px;
}

.text2__content-text2 {
	margin-bottom: 60px;
}

.text2__content-text p,
.text2__content-text2 p {
	margin: 0;
}


.text2__content-werkwijze {
	font-weight: bold;
	margin-top: 16px;
}

.text2__content .wysiwyg {
	width: 80%;
}

@media (max-width: 768px) {
	.text2__content .wysiwyg {
		width: 100%;
	}
}

.text2__arrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 21px;
}

.text2__arrow,
.text2__arrow:visited {
	text-decoration:none;
	color:var(--black);
}
.text2__arrow:hover,
.text2__arrow:visited:hover {
	color: var(--black);
}

.text2__arrow svg {
	transition: all .2s ease;
}
.text2__arrow:hover svg {
	transform: translateX(4px);	
}

.text3 {
	background-color: var(--green);
	padding: var(--section-padding) 0;
}

.text3__title {
	margin-bottom: 20px;
}

.text3__text {
	max-width: 700px;
	margin: 0 0 40px 0;
	text-align: left;
}

.text3__services {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	margin-top: 40px;
}

.text3__inner .wysiwyg {
	width: 70%;	
}

@media (max-width: 768px) {
	.text3__inner .wysiwyg {
		width: 100%;	
	}
}

/* Hover effect voor service tekst */
.text3__service {
	position: relative;
	overflow: hidden;
}

.text3__service-text {
	opacity: 0;
	max-height: 0;
	transition: all 0.4s ease;
}

.text3__service:hover .text3__service-text {
	opacity: 1;
	max-height: 200px; /* ruimte voor de tekst */
}

/* Responsief: op tablets en mobiel breekt hij naar 2 of 1 kolom */
@media (max-width: 1024px) {
	.text3__services {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.text3__service-text {
		opacity: 1;
		max-height: unset;
	}
}

@media (max-width: 600px) {
	.text3__services {
		grid-template-columns: 1fr;
	}
}

.text3__service {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	text-align: left;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	height:300px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	cursor: pointer;
}
.text3__service:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.text3__service:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.text3__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none; /* klikbare content eroverheen mogelijk */
}

.text3__service-title,
.text3__service-text {
	position: relative;
	z-index: 1; /* boven de afbeelding */
	color: var(--white); /* optioneel, afhankelijk van het plaatje */
}

.text3__service-title {
	font-size: 21px;
	font-weight: 600;
	margin: 15px 15px 8px 15px;
}

.text3__service-text {
	font-size: 19px;
	margin: 0 15px 20px 15px;
	line-height: 1.1;
}

.text3__service-content {
	position: relative;
}

/* "Meer over onze diensten" knop */
.text3__more {
	margin-top: 50px;
	display: flex;
	justify-content: center;
}

.text3__services p {
	display: none;
	margin: 0;
	padding: 0;
}
section.logos {
	margin-top: 0;
}
.logos__slider {
	overflow: hidden;
	border-bottom: 1px solid var(--black);
}
.logos__slider-wrapper{
	display:flex;
	flex-direction:row;
	height:100%;
	width: max-content;
}
.logos__slider-track {
	display: flex;
}

.logos__image {
	width:250px;
	height:180px;
	object-fit: contain;
}
/* Testimonial slider */
/* ---------- Testimonial Swiper (aanvulling) ---------- */
.testimonial {
	margin: 80px 0;
}
.testimonial .testimonial__swiper {
	padding: 0 var(--container-padding);
}
.testimonial__inner { position: relative; } /* nodig voor absolute nav */
.testimonial__swiper .swiper-wrapper { align-items: stretch; } /* maak slides even hoog */
.testimonial__swiper .swiper-slide { display: flex; height: auto; }

.testimonial__card {
	background: #f7f7f7;
	border-radius: 0;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	height: 100%;
}

.testimonial__text {
	font-size: 1.05rem;
	line-height: 1.6;
	color: #111;
	margin-bottom: 18px;
}

.testimonial__author { 
	display:flex; gap:14px; align-items:center; 
}
.testimonial__avatar { 
	width:56px; height:56px; border-radius:50%; background:#ddd; flex-shrink:0; 
}
.testimonial__name { 
	font-weight:700; margin:0;
}
.testimonial__role { 
	font-size:18px; 
	margin: 0;
}

/* custom nav buttons */
.testimonial-button-prev,
.testimonial-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 40;
	padding: 0;
}
.testimonial-button-prev { 
	left: var(--container-padding); 
}  /* schuif iets buiten de container */
.testimonial-button-next {
	right: var(--container-padding); 
}
.testimonial-button-prev svg,
.testimonial-button-next svg {
	width: 18px;
}

/* responsive: fewer slides */
@media (max-width: 1280px) {
	.testimonial-button-prev { left: 60px; }
	.testimonial-button-next { right: 60px; }
}
@media (max-width: 768px) {
	.testimonial-button-prev { left: 12px; }
	.testimonial-button-next { right: 12px; }

	.testimonial .testimonial__swiper {
		padding: 0 5%;
	}
}
@media (max-width: 640px) {
	.testimonial__card { padding: 22px; min-height: 260px; }
	.testimonial-button-prev, .testimonial-button-next { width:40px; height:40px; }
}

.wij {
	background-color: var(--blue);
	padding: var(--section-padding) 0;
}

.wij__text {
	margin-bottom: 48px;
	display: flex;
	justify-content: center;
}
.wij__text .wysiwyg {
	max-width: 768px;
	width: 100%;
}
.wij__text .btn-group {
	justify-content: center;
}

.wij__text h2 {
	margin: 0;
	margin-bottom: 20px;
}
.wij__text h2,
.wij__text p {
	color: var(--white);
	text-align: center;
}

/* Swiper styling */
.swiper.wij__swiper {
	padding: 0 calc(var(--container-padding) * 2);
}
@media (min-width: 1600px) {
	.swiper.wij__swiper {
		padding: 0 calc(var(--container-padding) * 1.2);
	}
	.wij__swiper .wij-button-prev {
		left: calc(var(--container-padding) * 1.2);
	}
	.wij__swiper .wij-button-next {
		right: calc(var(--container-padding) * 1.2);
	}
}
@media (max-width: 1280px) {
	.swiper.wij__swiper {
		padding: 0 5%;
	}
	.wij__swiper .wij-button-prev {
		left: 5%;
	}
	.wij__swiper .wij-button-next {
		right: 5%;
	}
}
@media (max-width: 768px) {
	.wij__swiper .wij-button-prev,
	.wij__swiper .wij-button-next {
		translate: 0 0;
	}
}

.wij__swiper .swiper-slide {
	display: flex;
	justify-content: center;
}

.wij__swiper img {
	width: 100%;
	height: auto;
	display: block;
	height: 500px;
	object-fit: cover;
}
.wij__swiper .swiper-slide {
	transition: all .3s ease;
}
.wij__swiper .swiper-slide-next,
.wij__swiper .swiper-slide-prev {
	opacity: 0.5;
}

/* Custom navigatie */
.wij-button-next,
.wij-button-prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--white);
	cursor: pointer;
	z-index: 10;
}
.wij-button-next { 
	right: calc(var(--container-padding) * 2);
	translate: 75% 0;
}
.wij-button-prev {
	left: calc(var(--container-padding) * 2); 
	translate: -75% 0;
}

.wij-button-next svg,
.wij-button-prev svg {
	width: 18px;
}


.text4 {
	margin: calc(var(--section-padding) + 75px) 0;
}

.text4__inner {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: var(--light-grey);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	overflow: visible;
	position: relative;
}

/* Gradient achter de afbeelding */
.text4__inner::before {
	content: "";
	position: absolute;
	right: 0;           
	top: 0;
	bottom: 0;
	width: 100%;
	pointer-events: none;
	background: linear-gradient(
		to left top,
		rgba(237,44,65,0.32) 0%,  
		rgba(237,44,65,0.20) 30%, 
		rgba(255,255,255,0) 40%
	);
	border-radius: 0 16px 16px 0;            
	z-index: 0;
}

/* Tekstblok links */
.text4__content {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	padding: 60px;
	max-width: 50%;
	position: relative;
	z-index: 2;
}

.text4__title {
	margin: 0 0 20px 0;
	color: var(--black);
}

.text4__text1 {
	font-weight: 600;
	margin-bottom: 20px;
}
.text4__text2,
.text4__text3 {
	margin-bottom: 20px;
	max-width: 600px;
}
.text4__text1 p,
.text4__text2 p,
.text4__text3 p {
	margin: 0;
}

/* Knop */
.text4__more {
	margin-top: 20px;
}
.text4__more-bttn {
	display: inline-block;
	padding: 12px 30px;
	border: 2px solid var(--black);
	border-radius: 30px;
	font-weight: 600;
	text-decoration: none;
	color: var(--black);
	transition: all 0.3s ease;
}
.text4__more-bttn:visited {
	color: var(--black);
}
.text4__more-bttn:hover {
	background: var(--black);
	color: var(--white);
}

.text4__portrait {
	overflow: hidden;
	margin-top: -75px;   
	margin-left: -225px;  
	border-radius: 16px;
	z-index: 1;
}

.text4__portrait img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 100% 100%;
}

@media (max-width: 1200px) {
	.text4__content {
		max-width: 100%;	
		width: 100%;
		flex: unset;
	}

	.text4__portrait {
		position: absolute;
		inset: 0;
		margin-left: 0;
		opacity: .35;
	}
}
@media (max-width: 768px) {
	.text4 {
		margin: var(--section-padding) 0;
	}
	.text4__content {
		padding: 24px 32px 32px;
	}
	.text4__portrait {
		margin-top: 0;
	}
}

/* Section text5 */
.text5__inner {
	display: flex;
	flex-direction: column; /* eerst teksten + studio link, dan locaties eronder */
	gap: 40px;
}

/* Teksten + studio link wrapper */
.text5__top {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 100px;
}

/* Linkerkant: title + texts */
.text5__texts {
	display: flex;
	flex-direction: column;
	max-width: 65%; /* ongeveer 2/3 van breedte */
}

.text5__title {
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--black);
}

.text5__text,
.text5__text2 {
	margin-bottom: 20px;
}
.text5__text p,
.text5__text2 p {
	margin: 0;
}

/* Rechterkant: studio link */
.text5__studio-link {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top:50px;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.text5__studio-link img {
	max-width: 200px;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	animation: spin 8s linear infinite; /* 8s = duur van 1 rondje */
}

/* Locaties grid onder */
.text5__locaties {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 naast elkaar */
	gap: 20px;
}

/* Elke locatie */
.text5__locatie1,
.text5__locatie2,
.text5__locatie3,
.text5__locatie4 {
	position: relative;
	overflow: hidden;
}


.text5__bg {
	height: 100%; 
	width: 100%;
	display: block;
	object-fit: cover;       /* essentieel: vult en snijdt af */
	object-position: center;
	z-index: 0;              /* onder de tekst */
	filter: brightness(.8);
}


/* Tekst over de locatie afbeelding */
.text5__locatie-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 20px;
	z-index: 2;              
	color: var(--white);             
	box-sizing: border-box;
}

.text5__locatie-title {
	font-size: 55px;
	color: var(--white);
	margin: 0;
}

.text5__locatie-text {
	font-size: 21px;
}

/* Responsive */
@media (max-width: 992px) {
	.text5__top {
		flex-direction: column;
		gap:10px;
	}

	.text5__texts {
		max-width: 100%;
	}

	.text5__studio-link {
		justify-content: flex-start;
	}
	.text5__locaties {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.text5__locaties {
		grid-template-columns: 1fr;
	}
}
.text5__locaties p {
	display: none;
	margin: 0;
	padding: 0;
}
.organization__content p {
	margin: 0;
	text-align: center;
}
.organization__logos{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px; /* grid-gap is verouderd, beter 'gap' gebruiken */
	margin-top: 64px;
}

.organization__logos img {
	max-width: 200px;       /* breedte past zich aan */
	height: auto;     /* uniforme hoogte voor alle logos */
	object-fit: contain; /* zorgt dat aspect ratio behouden blijft */
	background-color: rgba(250, 250, 250, 1);
	display: block;     /* voorkomt inline spacing issues */
}

.project-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px; /* afstand tussen items */
	border-top: 3px solid var(--black); /* alleen top border */
	margin-top: 60px;
}

.project-bottom__slider-wrapper {
	display: flex;
	width: max-content;
	animation-name: project-slider;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 40s;
}
.project-bottom__slider:hover .project-bottom__slider-wrapper {
	animation-play-state: paused;
}

.project-bottom__slider-track {
	display: flex;
}

.project {
	display: flex;
	align-items: center;
}

.project a {
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	letter-spacing: 6px;
}
.project1 a{
	color: var(--orange); /* rood */
}
.project2 a{
	color: var(--blue); /* blauw */
}
.project3 a{
	color: var(--green); /* groen */
}
.project4 a{
	color: var(--black);
}
.project1 a:visited{
	color: var(--orange); /* rood */
}
.project2 a:visited {
	color: var(--blue); /* blauw */
}
.project3 a:visited {
	color: var(--green); /* groen */
}
.project4 a:visited {
	color: var(--black);
}

.project .dot {
	color: var(--black);
	font-size: 1.5rem;
	line-height: 1;
	margin: 0 32px;
}

@media (max-width: 768px) {
	.text__linkjes {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.text__linkjes div {
		height: auto; /* afbeelding bepaalt hoogte */
	}
	.text__linkjes a {
		padding: 20px;
		font-size: 16px;
	}
}

/* Video section */
@media (max-width: 768px) {
	.video__content {
		max-width: 100%;
		width: 100%;
	}
	.video__video {
		width: 100%;
		height: auto;
	}
}

/* Text2 opsomming */
@media (max-width: 768px) {
	.text2__opsomming {
		flex-direction: column;
		gap: 20px;
		align-items:center;
	}
	.text2__opsomming1,
	.text2__opsomming2,
	.text2__opsomming3 {
		width: 100%;
		height: auto;
		padding: 20px;
	}

	.text2__content {
		max-width: 100%;
		width: 100%;
	}
}



/* Wij swiper */
@media (max-width: 768px) {
	.wij__swiper {
		width: 100%;
		margin-left: 0;
	}
	.wij__swiper img {
		height: auto;
		max-height: 400px;
	}
}

/* Text5 locaties grid */
@media (max-width: 992px) {
	.text5__locaties {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
}
@media (max-width: 600px) {
	.text5__locaties {
		grid-template-columns: 1fr;
	}
}

/* Organisatie logos */
@media (max-width: 768px) {
	.organization__logos {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
	.organization__logos img {
		width: 150px;
	}
}


@media (max-width: 768px) {
	.logos__top,
	.logos__bottom {
		width: 95%;
		flex-direction: column;     /* stapelen op mobiel */
		align-items: center;
	}

	.logos__top-1,
	.logos__top-2,
	.logos__top-3,
	.logos__top-4,
	.logos__top-5 {
		width: 80%;                 /* smaller voor mobiel */
		margin-bottom: 20px;
	}
}

/* Project bottom responsive */
@media (max-width: 768px) {
	.project-bottom {
		flex-direction: column;      /* stapelen in plaats van naast elkaar */
		gap: 20px;                   /* afstand tussen links */
		border-top-width: 2px;       /* smaller border */
	}

	.project-bottom a {
		font-size: 0.7em;             /* kleiner lettertype */
	}
}
/*===========================================================================================================================ABOUT US 
==========================================================================================================================*/ 
.project-bottom__inner{
	display:flex;
	width:100%;
	justify-content:space-between;
	align-items:center;
	height:64px;
	overflow: clip;
}
.we-are__top {
	display: flex;
	justify-content: space-between; /* ruimte tussen tekst en slider */
	align-items: flex-start; /* zet beide blokken bovenaan gelijk */
	gap: 40px; /* ruimte ertussen */
	width: 100%;
}

.we-are__top-text {
	flex: 1; /* neemt beschikbare ruimte */
	max-width: 50%; /* tekstblok neemt max. helft */
}
.we-are__top-text p:first-child {
	margin-top: 0;
}

.we-are__title{
	text-align:center;
	font-weight:900;
	margin-top: 0;
	text-transform: uppercase;
}
/* Swiper container */
.we-are__swiper {
	position: relative; /* Belangrijk: hiermee zijn knoppen absoluut ten opzichte van de slider */
	width: 100%;
	max-width: 600px; /* slider breedte naar wens */
	margin: 0 auto;
	flex: 1;
	max-width: 50%; /
}
.we-are__swiper .swiper-slide {
	height: auto;
}

/* Slides */
.we-are__card {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
}

.we-are__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Navigatieknoppen */
.we-are-button-prev:focus,
.we-are-button-next:focus,
.we-are-button-prev,
.we-are-button-next {
	position: absolute;
	bottom: 20px; /* onderkant van de slider */
	z-index: 10;
	width: 40px;
	height: 40px;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: transparent;
	color: var(--white);
	cursor: pointer;
	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}

/* Hover effect */
.we-are-button-prev:hover,
.we-are-button-next:hover {
	background: var(--white);
	color: var(--black);
	border-color: var(--white);
}

.we-are-button-prev svg path,
.we-are-button-next svg path {
	transition: all .2s ease;
}

.we-are-button-prev:hover svg path,
.we-are-button-next:hover svg path {
	fill: var(--black);
}

/* Pijltjes in de knoppen */


/* Positie knoppen naast elkaar rechts onderin */
.we-are-button-prev {
	right: 70px; /* iets links van next knop */
}

.we-are-button-next {
	right: 20px; /* helemaal rechts */
}
.we-are__bottom{
	display:flex;
	flex-direction:row;
	gap:40px;
	margin-top:64px;
}
.we-are__bottom-text{
	border-top:solid;
}
.we-are__bottom-text h3 {
	margin: 24px 0;
}
.we-are__bottom-text p:last-child {
	margin-bottom: 0;
}
.photo-circle {
	display: flex;
	justify-content: center;
	align-items: center;
}

.photo-circle__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	grid-gap: 16px 0;
}

.photo-circle__text {
	grid-column: 8 / 18;
	grid-row: 2;
	text-align: center;
	margin: 40px 0;
}

.photo-circle__text h2 {
	font-size: 54px;
	margin: 0;
	margin-bottom: 8px;
}

.photo-circle__text p {
	font-size: 19px;
	margin: 0;
}
@media (max-width: 600px) {
	.photo-circle__text p {
		font-size: 16px;
	}
}

.item {
	grid-column: span 6;
	border-radius: 8px;
	box-shadow: 0px 4px 16px rgba(0,0,0,0.1);
	width: 100%;
}

.item1 {
	grid-column: 2 / 10;
	grid-row: 1;
	margin-top: 16px;
}
.item2 {
	grid-column: 16 / 24;
	grid-row: 1
}
.item3 {
	grid-column: 1 / 6;
	grid-row: 2;
	margin: auto 0;
}
.item4 {
	grid-column: 20 / 25;
	grid-row: 2;
	margin: auto 0;
}
.item5 {
	grid-column: 4 / 11;
	grid-row: 3;
	margin-top: 16px;
}
.item6 {
	grid-column: 15 / 22;
	grid-row: 3;
	margin-bottom: 16px;
}

@media (max-width: 960px) {
	.photo-circle__text {
		grid-column: 3 / 23;
		grid-row: 3;
		margin: 0;
	}
	.item3 {
		grid-column: 9 / 17;
		grid-row: 2;
	}
	.item4 {
		grid-column: 9 / 17;
		grid-row: 4;
	}
	.item5 {
		grid-column: 4 / 11;
		grid-row: 5;
		margin-top: 16px;
	}
	.item6 {
		grid-column: 15 / 22;
		grid-row: 5;
	}
}

@media screen and (max-width: 768px) {
	.photo-circle__text {
		grid-column: 1 / 25;
		grid-row: 1;
	}
	.item1 {
		grid-column: 1 / 12;
		margin: 0;
		grid-row: 2;
	}
	.item2 {
		grid-column: 14 / 25;
		grid-row: 2;
	}
	.item3 {
		grid-column: 1 / 12;
		grid-row: 4;
	}
	.item4 {
		grid-column: 14 / 25;
		grid-row: 4;
	}
	.item5 {
		grid-column: 1 / 12;
		grid-row: 5;
		margin: 0;
	}
	.item6 {
		grid-column: 14 / 25;
		grid-row: 5;
		margin: 0;
	}
}

@media screen and (max-width: 600px) {
	.photo-circle__text {
		grid-column: 1 / 25;
		grid-row: 1;
		text-align: start;
	}
	.item1 {
		grid-column: 1 / 25;
		grid-row: 2;
	}
	.item2 {
		grid-column: 1 / 25;
		grid-row: 3;		
	}
	.item3 {
		grid-column: 1 / 25;
		grid-row: 4;
	}
	.item4 {
		grid-column: 1 / 25;
		grid-row: 5;
	}
	.item5 {
		grid-column: 1 / 25;
		grid-row: 6;
	}
	.item6 {
		grid-column: 1 / 25;
		grid-row: 7;
	}
}



.banner__inner{
	background-color:var(--blue);
	width:100%;
	display:flex;
	color:var(--white);
	justify-content:space-between;
	margin-bottom:64px;
	position: relative;
	margin-top: calc(var(--section-padding) + 75px);
}

@media (max-width: 768px) {
	.banner__inner {
		margin-top: var(--section-padding);
	}	
}
.banner__title {
	color:var(--white);
	margin: 0;
}
.banner__text {
	display:flex;
	flex-direction:column;
	width: 60%;
	padding: 48px 0 48px 48px;
	position: relative;
	z-index: 4;
}
.banner__text .wysiwyg h2 {
	color: var(--white);
	font-size: 40px;
}
.banner__image-wrapper {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	margin-top: -75px;
	pointer-events: none;
}
.banner__img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 100% 100%;
}
.banner__bttn {
	width: fit-content;
	margin-top: 24px;
}
@media (max-width: 1200px) {
	.banner__text {
		width: 100%;
		padding: 24px 32px 32px;
	}
	.banner__image-wrapper {
		opacity: .35;
	}
}
@media screen and (max-width: 768px) {
}

section.portraits {
	margin-bottom: 96px;
}

.portraits__title {
	text-align: center;
	margin-bottom: 40px;
}

.portraits__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.portrait {
	cursor: pointer;
}

.portrait__images {
	position: relative;
}

.portrait__bg {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
	visibility:hidden;
}

.portrait__img {
	object-fit: contain;
}

.portrait__info {
	text-align: left;
}

.portrait__name {
	font-weight: bold;
	margin: 0;
	line-height: 1;
	margin-top: 16px;
	font-size: 25px;
}

.portrait__role {
	margin: 0;
	font-size: 23px;
}

.portrait-card {
	transition: all .2s ease;
}
.portrait-card:hover {
	transform: translateY(-4px);
}

/* Modal */
.portrait-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	justify-content: center;
	align-items: center;
	padding: 64px 0;
	z-index: 1000;

	opacity: 0;
	pointer-events: none;

	transition: all .2s ease;
}

.portrait-modal.show {
	opacity: 1;
	pointer-events: all;
}

.portrait-modal .container {
	height: 100%;
}

.portrait-modal__wrapper {
	height: 100%;
	display: flex;
	align-items: center;
}

.portrait-modal__content {
	background: #fff;
	width: 100%;
	border-radius: 8px;
	padding: 32px 64px 32px 32px;
	position: relative;
}
.portrait-modal__inner .portrait-modal__text-title {
	margin-top: 0;
	font-weight: 800;
}
.portrait-modal__inner .portrait-modal__specialties-title {
	margin-top: 32px;
	font-weight: 800;	
}

.portrait-modal__close {
	position: absolute;
	top: 12px;
	right: 24px;
	font-size: 64px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.modal__title, .modal__sub {
	font-weight: 800;
}
.portrait-modal__inner {
	display: flex;
	gap: 32px;
}
.portrait-modal__inner .modal__sub {
	margin-top: 24px;
}

.portrait-modal__inner .tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.portrait-modal__inner .tags .tag {
	border: 2px solid var(--black);
	display: inline-block;
	padding: 8px 24px;
}

.portrait-modal__inner h3 {
	margin: 0;
}
.portrait-modal__inner p {
	margin: 10px 0;
}

.portrait-modal__right {
	aspect-ratio: 9/16;
}
.portrait-modal__right-video,
.portrait-modal__right-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portrait-modal__specialties {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 12px;
}
.teamlid-specialty {
	padding: 12px 12px 8px 12px;
	border: 2px solid var(--black);
}

.voor-wie__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.voor-wie__inner .wysiwyg {
	width: 75%;
}

.voor-wie__title {
	margin: 0;
	margin-bottom: 30px;
	text-align: center;
	text-transform: uppercase;
}

.voor-wie__text {
	max-width: 50vw;
	width: 100%;
	margin-bottom: 20px;
}

.voor-wie__tussen-title {
	max-width: 50vw;
	width: 100%;
}
@media (max-width:768px) {
	.voor-wie__inner .wysiwyg {
		width: 100%;
		max-width: 100%;
	}
}


/* === Branches sectie === */
.branches__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 60px;
}

.branches__left {
	width: 65%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.branches__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--black-header);
	padding: 24px 0;
	cursor: pointer;
	gap: 16px;
	transition: color 0.3s ease;
	text-decoration:none;
}
.branches__item:last-child {
	border-bottom: none;
}

.branches__item svg {
	opacity: 0;
	transition: all .15s ease;
}
.branches__item:hover svg {
	opacity: 1;
}

.branches__title {
	font-weight: 600;
	color: var(--black-header);
	margin: 0;
	margin-bottom: 12px;
	transition: all .15s ease;
}

.branches__item p {
	color: var(--black-header);
	margin: 0;
	line-height: 1.4;
	transition: all .15s ease;
}

.branches__item:hover p {
	color: var(--black);
}

.branches__item:nth-child(1):hover .branches__title {
	color: var(--orange);	
}
.branches__item:nth-child(2):hover .branches__title {
	color: var(--blue);	
}
.branches__item:nth-child(3):hover .branches__title {
	color: var(--green);	
}
.branches__item:nth-child(4):hover .branches__title {
	color: var(--black);	
}

.branches__right {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35%;
}

.branches__img {
	width: 100%;
	max-width: 520px;
	max-height:600px;
	border-radius: 8px;
	object-fit: cover;
	transition: opacity 0.4s ease;
	object-position:top;
}

/* === Responsive === */
@media (max-width: 992px) {
	.branches__inner {
		flex-direction: column;
		gap: 40px;
	}

	.branches__left {
		max-width: 100%;
	}

	.branches__right {
		width: 100%;
	}

	.branches__img {
		max-width: 100%;
	}
	.branches__item svg {
		rotate: 45deg;
	}
}

/* === WE-ARE SECTIE MOBIEL === */
@media screen and (max-width: 768px) {
	.we-are__top {
		flex-direction: column;
		gap: 20px;
	}

	.we-are__top-text {
		max-width: 100%;
	}

	.we-are__swiper {
		max-width: 100%;
		width: 100%;
		flex: none;
	}

	/* Slider pijltjes */
	.we-are-button-prev,
	.we-are-button-next {
		position: relative;
		bottom: 80px;
		left: auto;
		right: auto;
		transform: none;
		margin: 10px 5px 0;
		display: inline-flex;
	}

	.we-are__bottom {
		flex-direction: column;
		gap: 20px;
	}

	.we-are__bottom-text {
		border-top: none;
		padding-top: 0;
	}
}

/* === PORTRAITS GRID MOBIEL === */
@media screen and (max-width: 768px) {
	.portraits__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.portrait__img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.portrait__bg {
		height: 140px;
	}

	.portrait__info {
		margin-top: 30px;
	}
}
@media screen and (max-width: 450px) {
	.portraits__grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* === BRANCHES SECTIE MOBIEL === */
@media screen and (max-width: 768px) {
	.branches__inner {
		flex-direction: column;
		gap: 20px;
	}

	.branches__left, 
	.branches__right {
		width: 100%;
		max-width: 100%;
	}

	.branches__img {
		max-width: 100%;
		height: auto;
	}
}



/*===========================================================================================================================DETAIL PAGINA
===========================================================================================================================*/




.hero-photo__inner {
	position: relative;
	z-index: 3;
}

.hero-photo__image-wrapper {
	position: relative;
	z-index: 0;
}

.hero-photo__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero-photo__color-filter {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--hero-filter, var(--hero-filter-default));
	opacity: 0.7;
	pointer-events: none;
	z-index: 1;
}

/* =================== */
/* Who section         */
/* =================== */

.who {
	background-color: var(--page-bg, var(--page-bg-default));
	margin-top: 0;
}

.who__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: var(--section-padding) 0;
}
.who__text {
	width: 50%;
}
.who__title {
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 5px;
	color: var(--dark-grey);
}
.who__photo {
	width: 50%;
}

/* =================== */
/* Samenwerking        */
/* =================== */
.collab__title {
	font-size: 21px;
	letter-spacing: 5px;
	font-family: gilroy;
	color: var(--black);
	font-weight: 600;
}

.collab__inner {
	display: flex;
	gap: 40px;
	align-items: center;
}

.collab__texts,
.challenge__texts {
	width: 50%;
}
.collab__photo {
	width: 50%;
}
.collab__photo img {
	width: 100%;
	object-fit: cover;
}

/* =================== */
/* Aanpak              */
/* =================== */
.aanpak__title {
	text-align: center;
	font-size: 21px;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 24px;
}
.aanpak__card {
	background-color: var(--page-bg, var(--page-bg-default));
	text-align: center;
	padding: 32px;
}
.aanpak__card-col {
	display: flex;
	justify-content: center;
	line-height: 2.5;
}
.aanpak__card-col p {
	text-align: left;
}
.aanpak__card-title {
	font-weight: 400;
}
.aanpak__card-title strong {
	font-weight: 900;
}

/* =================== */
/* Maken               */
/* =================== */
.maken__title {
	font-size: 21px;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0;
}
.maken__inner {
	display: flex;
	border-top: solid;
	justify-content: space-between;
	padding: 32px 0;
}
.maken__items {
	display: flex;
	flex-direction: column; 
	gap: 24px;
}

@media (max-width: 768px) {
	.maken__inner {
		flex-direction: column;
		gap: 24px;
	}
}

/* =================== */
/* Uitgelicht          */
/* =================== */
.uitgelicht__inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.uitgelicht__title {
	font-size: 21px;
	margin-bottom: 16px;
	margin-top: 0;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-weight: 600;
}
.uitgelicht__video {
	width: 100%;
	margin-top: 20px;
	aspect-ratio: 16/9;
}
.uitgelicht__inner p {
	width: 80%;
	text-align: center;
	margin-top: 0;
}

@media(max-width: 768px) {
	.uitgelicht__inner p {
		width: 100%;
	}	
}

/* =================== */
/* Quote               */
/* =================== */
.quote {
	background: #fff;
	text-align: center;
}
.quote__text {
	line-height: 2;
	width: 90%;
	margin: 0 auto 40px;
}
.quote__text p {
	font-size: 41px;
}
.quote__text p strong {
	background: var(--orange);
	padding: 12px 2px;
	font-weight: 400;
}
.quote__profile {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
}
.quote__profile img {
	min-width: 124px;
	width: 124px;
	max-width: 124px;
	min-height: 124px;
	height: 124px;
	max-height: 124px;
	border-radius: 999px;
}
.quote__profile-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.quote__name {
	font-weight: bold;
	color: var(--dark-grey);
	text-align: left;
}
.quote__bio {
	font-size: 21px;
	text-align: start;
}

@media (max-width: 768px) {
	.quote__text {
		width: 100%;
	}
	.quote__text p {
		font-size: 21px;
	}
	.quote__bio {
		font-size: 16px;
	}
	.quote__profile img {
		min-width: 100px;
		width: 100px;
		max-width: 100px;
		min-height: 100px;
		height: 100px;
		max-height: 100px;
	}
}

/* =================== */
/* Grid foto's         */
/* =================== */
.grid__row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--grid-gap);
	margin-bottom: 24px;
	align-items: stretch;
	grid-gap: 24px;
}
.grid__row.reverse {
	grid-template-columns: 1fr 2fr;
}
.grid__item {
	position: relative;
	overflow: hidden;
	height: var(--row-height-desktop);
}
.grid__item > img,
.grid__item img,
.grid__item > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Responsive grid */
@media (max-width: 992px) {
	.grid__item {
		height: var(--row-height-tablet);
	}
}
@media (max-width: 768px) {
	.grid__row {
		grid-template-columns: 1fr;
	}
	.grid__row.reverse {
		grid-template-columns: 1fr;
	}
	.grid__item {
		height: var(--row-height-mobile);
	}
}

/* =================== */
/* Impact              */
/* =================== */
.impact__title {
	font-size: 21px;
	margin-bottom: 20px;
	color: var(--dark-grey);
	text-align: center;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
}
.impact__cards {
	display: flex;
	gap: 20px;
	justify-content: center;
}
.impact__card {
	background-color: var(--page-bg, var(--page-bg-default));
	padding: 24px;
	aspect-ratio: 4/3;
	display: flex;
	align-items: flex-end;
	position: relative;
}
.impact__emoji {
	font-size: 72px;
	position: absolute;
	top: 16px;
	right: 40px;
	transform: rotate(-20deg);
}
.impact__text p {
	margin: 0;
}

.impact__card--2 .impact__emoji {
	top: 50%;
	right: 40px;
	transform: rotate(20deg) translate(-50%, -75%);
}
@media (max-width: 768px) {
	.impact__cards {
		flex-direction: column;
	}
	.impact__card {
		aspect-ratio: unset;
	}
	.impact__text {
		margin-top: 120px;
	}
}

/* =================== */
/* Wat we maken        */
/* =================== */
.wat-maken {
	background: var(--page-bg, var(--page-bg-default));
	padding: 60px 0;
}
.wat-maken__title {
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 40px;
	color: var(--black);
}
.wat-maken__producten {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wat-maken__product {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 0;
	text-decoration: none;
	border-bottom: 1px solid var(--dark-grey);
	color: var(--black);
	transition: color 0.3s ease;
}
.wat-maken__product:hover .product__title {
	color: var(--blue);
}
.wat-maken__product-type {
	flex: 0 0 120px;
	font-size: 14px;
	color: var(--dark-grey);
}
.wat-maken__product-title {
	flex: 1;
	font-weight: bold;
	font-size: 16px;
	color: var(--black);
}
.wat-maken__product-arrow {
	flex: 0 0 20px;
	font-size: 18px;
	color: var(--black);
	transition: transform 0.3s ease;
}
.wat-maken__product:hover .wat-maken__product-arrow {
	transform: translateX(5px);
}

/* =================== */
/* Responsive          */
/* =================== */
@media (max-width: 992px) {
	.grid__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.who__inner {
		flex-direction: column-reverse;
	}
	.collab__inner {
		flex-direction: column;
	}
	.who__photo,
	.who__text {
		width: 100%;
	}
	.collab__texts,
	.collab__photo {
		width: 100%;
	}
}
/*===========================================================================================================================DIENSTEN PAGINA'S
=========================================================================================================================*/
.diensten__title {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 1.5rem;
}

.diensten__wrapper {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.diensten__dienst {
	border: 1px solid var(--black);
	border-radius: 99px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px 24px;
	width: fit-content;
}
.klantcases__case{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.klant-cases__item {
	display: block;
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	transition: all .2s ease;
}

.klant-cases__img {
	position: relative;
}

.klant-cases__img img {
	width: 100%;
	height: 400px;
	display: block;
	object-fit: cover;

}

/* Titel links onder in de foto */
.klant-cases__title {
	position: absolute;
	bottom: 16px;
	left: 24px;
	margin: 0;
	color: var(--white);
	z-index: 2;
	line-height: 1;
	transition: all .2s ease;
}

/* overlay voor leesbaarheid */
.klant-cases__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 70%);
}

.klant-cases__item:hover,
.klant-cases__item:hover .klant-cases__title {
	transform: translateY(-4px);
}
/* Responsive: op mobiel 1 kolom */
@media (max-width: 768px) {
	.klant-cases {
		grid-template-columns: 1fr;
	}
	.klantcases__case {
		grid-template-columns: 1fr;
	}
}


.mid-diensten,
.mid-diensten-blue,
.mid-diensten-green,
.mid-diensten-black{
	position: relative;
	overflow: hidden;
	padding: 2rem 0;
	text-align: center;
}
.mid-diensten{
	background-color:var(--orange);
}
.mid-diensten-blue{
	background-color:var(--blue);
}
.mid-diensten-green{
	background-color:var(--green);
}
.mid-diensten-black{
	background-color:var(--black);
}

/* Algemene titelstijl */
.mid-diensten__background-text,
.mid-diensten__title,
.mid-diensten__background-text-green
{
	font-size: 12rem;
	font-weight: 900;
	white-space: nowrap;
	margin: 0;
	line-height: .8;
	user-select: none;
	position: relative;
}

.mid-diensten__background-text {
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
	z-index: 0;
}
.mid-diensten__background-text-green {
	color: transparent;
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.2);
	z-index: 0;
}

.mid-diensten__title {
	color: #fff;
	z-index: 2; /* titel boven rechterfoto, maar onder linkerfoto */
}

.mid-diensten__background-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Afbeeldingen zwevend */
.mid-diensten__image {
	max-width:400px;
	height: auto;
	position: absolute;
}

/* Linkerfoto overlapt midden-titel */
.mid-diensten__image--left {
	top: 50%;
	left: 20%;
	transform: translate(-50%, -50%);
	z-index: 3;
}

/* Rechterfoto zit achter midden-titel, maar boven achtergrond */
.mid-diensten__image--right {
	top: 50%;
	right: 20%;
	transform: translate(50%, -50%);
	z-index: 1;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
	.mid-diensten__background-text,
	.mid-diensten__title {
		font-size: 8rem; /* iets kleiner */
	}

	.mid-diensten__image {
		width: 200px; /* verkleinen */
	}
}

@media (max-width: 768px) {
	/* Titels compacter */
	.mid-diensten__background-text,
	.mid-diensten__title {
		font-size: 4rem;
	}

	.mid-diensten__background-group {
		gap: 0.25rem;
	}

	/* Afbeeldingen niet meer absolute */
	.mid-diensten__image {
		position: static;
		display: block;
		margin: 1rem auto;
		transform: none;
		z-index: 2;
		width: 70%; /* schaalt mee */
		max-width: 250px;
	}

	/* Wrapper met 1 kolom */
	.diensten__wrapper {
		grid-template-columns: 1fr;
	}
}
/*===========================================================================================================================WERKWIJZE
==========================================================================================================================*/

/* Container */

/* Titel en intro */
.werkwijze__title{
	margin: 0;
	margin-bottom: 0;
	text-align: center;
}

/* Tabs */
.werkwijze__tabs{
	display:flex;
	gap:16px;
	justify-content:center;
	margin: 32px 0 46px;
	flex-wrap:wrap;
}

.tab,
.tab:visited {
	display:inline-block;
	padding:12px 20px;
	border-radius:999px;
	text-decoration:none;
	color:#111;
	font-weight:600;
	background-color: var(--light-grey);
	transition:transform .15s ease, background .15s ease;
}
.tab:hover {
	background-color: var(--green);	
}
.tab--active{
	background:var(--green);
	color:var(--black);
}

/* Panels */
.werkwijze__panel:nth-child(odd) {
	background-color: var(--light-grey);
	padding: var(--section-padding) 0;
}
.werkwijze__panel:nth-child(even) {
	padding: var(--section-padding) 0 0;
	margin-top: 0;
}
.panel__title{
	font-weight:800;
	margin:8px 0 18px;
}
.panel__badges{
	display:flex;
	gap:14px;
	margin-bottom:18px;
	flex-wrap:wrap;
}
.badge{
	display: inline-block;
	background: var(--white);
	padding: 14px 32px;
	border-radius: 99px;
	color: var(--black);
	box-shadow: 3px 8px 17px 0px rgba(0, 0, 0, 0.07);
}
.panel__lead {
	max-width: 720px;
	width: 100%;
	color: var(--black);
	margin-bottom: 18px;
}
.panel__lead p {
	font-weight: 600;
}

/* expandable area */
.panel__more {
	max-width: 720px;
	width: 100%;
	overflow:hidden;

	height: 0;
	opacity: 0;

	interpolate-size: allow-keywords;

	transition: all .2s ease;
}
.panel__more p:first-child {
	margin-top: 0;
}

.werkwijze__panel.show .panel__more {
	opacity: 1;
	height: auto;
}

/* Image */
.panel__image-wrap{
	margin-top: 48px;
	overflow: hidden;
	display: block;
	max-width: 100%;
}
.panel__image{
	width:100%;
	height:auto;
	display:block;
	object-fit:cover;
}

section.contact-person {
	margin-bottom: var(--section-padding);
}
.contact-person__title{
	text-align:center;
	font-size:3em;
	text-transform: uppercase;
}
.contact-person__texten{
	display:flex;
	justify-content:center;
	flex-direction:column;
	width: 65%;
	margin: 0 auto;
}

.werkwijze__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.werkwijze__intro > * {
	width: 80%;
	text-align: center;
}
.werkwijze__intro p:last-child {
	margin-bottom: 0;
}

/* Responsive */
@media (max-width:800px){
	.werkwijze__title{
		font-size:32px; text-align:center;
	}
	.werkwijze__intro{
		text-align:center; padding:0 6px;
	}
	.panel__title{
		font-size:24px;
	}
	.badge{
		padding:10px 14px; font-size:13px;
	}
	.contact-person__title{
		font-size:1.5em;
	}
	.werkwijze__intro > * {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.contact-person__texten {
		width: 100%;
		margin: 0;
	}
}


/*===========================================================================================================================
ONS WERK
===========================================================================================================================*/
.cases-filter__title,
.nieuws-filter__title {
	margin:0 0 48px;
	text-align:center;
}


/* Flexbox container */
.form-group{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 8px 0;
	margin-bottom:64px;
}

/* verberg standaard radio-bolletjes */
.form-group input[type="radio"]{
	display:none;
}

/* basis look voor labels + reset link */
.form-group label,
.form-group .reset_bttn,
.form-group .wpv-filter-reset a {
	display: inline-block;
	padding: 10px 24px 8px;
	border-radius: 999px;
	background: var(--light-grey);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: all .2s ease;
	border: none;
	font-size: 21px;
	line-height: 1.2;
	height: 100%;
	display: flex;
	align-items: center;
}
.form-group .reset_bttn{
	padding:11px 20px;
}

/* hover & focus */
.form-group label:hover,
.form-group .reset_bttn:hover,
.form-group .wpv-filter-reset a:hover,
.form-group label:focus {
	background: var(--green);
	color: var(--black);
}

/* zichtbare focus (accessibility) */
.form-group label:focus-visible,
.form-group .reset_bttn:focus,
.form-group .wpv-filter-reset a:focus {
	outline: 3px solid rgba(40,167,69,0.18);
	outline-offset: 3px;
}


.werken-item {
	display: flex;
	align-items: stretch; /* zorgt dat content en image even hoog zijn */
	gap: 2rem; 
	text-decoration: none;
	color: var(--black);
	margin-bottom: 64px;
}
.werken-item:visited,
.werken-item:visited:hover,
.werken-item:hover {
	color: var(--black);
}
.werken-item:nth-child(odd) {
	flex-direction: row;
}
.werken-item:nth-child(even) {
	flex-direction: row-reverse;
}

.werken__employer {
	font-weight: 600;
	font-size: 25px;
}

/* Verdeling 45% / 55% */
.werken-content {
	width: 45%;
}
.werken__image-wrapper {
	width: 55%;
	aspect-ratio: 16 / 9; /* zorgt dat alle afbeeldingen dezelfde hoogte krijgen */
}

.werken__image {
	width: 100%;
	height: 100%;
	object-fit: cover; /* vult de wrapper, bijsnijden mogelijk */
}

.bttn_center{
	width:100%;
	text-align:center;
}
.meer-laden__bttn{
	border:solid;
	background-color:transparent;
	color:var(--black);
	border-radius:64px;
	padding:16px 20px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: ease 0.3s;
}
.meer-laden__bttn:hover{
	background-color:var(--black);
	color:var(--white);
	border-color:var(--black);
	transition: ease 0.3s;
}

@media (max-width: 768px) {
	.werken-item {
		flex-direction: column !important;
		height: auto; /* hoogte wordt automatisch aangepast op mobiel */
	}
	.werken-content,
	.werken-image {
		width: 100%;
		flex: none;
	}
	.werken-image img {
		height: 250px; /* of auto */
	}
}
@media (max-width: 1024px) {
	.werken-item {
		flex-direction: column !important; /* stapel afbeelding boven tekst */
		height: auto; /* hoogte automatisch */
		margin-bottom: 48px;
		align-items:center;
	}

	.werken__image-wrapper {
		height: 260px;
		width: 100%;
	}

	.werken-content,
	.werken-image {
		width: 100%;
		flex: none;
		text-align:center;
	}

	.werken-image img {
		width: 100%;
		height: 250px; /* of pas aan naar wens */
		object-fit: cover;
	}
}
/*===========================================================================================================================
KENNIS EN NIEUWS 
===========================================================================================================================*/
.nieuws-filter__nieuws {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 80px 40px;
}

.grid-item {
	display: block;
	text-decoration: none;
	color: inherit;
	position: relative;
	color: var(--black);
	transition: all .2s ease;
}
.grid-item:visited {
	color: var(--black);
}
.grid-item:hover {
	color: var(--black);
	transform: translateY(-4px);
}

.grid-item__img-wrapper {
	aspect-ratio: 630 / 400;
}
.grid-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.grid-item__title {
	text-align: left;
	margin: 0;
	margin-top: 6px;
	line-height: 1;
}
.grid-item__content {
	margin-top: 12px;	
}
.grid-item__date {
	margin: 0;
	font-size: 20px;
	color: var(--grey);
	font-weight: 300;
}

.nieuws-filter__inner {
	margin-bottom: 96px;
}

.custom-post-grid h3 {
	margin-top: 10px;
	font-size: 1.1em;
}

/* ========== MEDIA QUERIES ========== */

/* Tablet (tot ±900px) → 2 kolommen */
@media (max-width: 900px) {
	.nieuws-filter__nieuws {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.grid-item__img img {
		max-height: 250px;
	}
}

/* Mobiel (tot ±600px) → 1 kolom */
@media (max-width: 600px) {
	.nieuws-filter__nieuws {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.grid-item__img img {
		max-height: 220px;
	}
}

/*===========================================================================================================================CONTACT PAGINA
===========================================================================================================================*/
.gegevens__title {
	text-align: center;
	margin-top: 0;
	margin-bottom: 40px;
}

/* Wrapper */
.gegevens__wrapper {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	align-items: center;
}

/* Contact info links */
.gegevens__contact {
	flex: 1;
}

.gegevens__contact h3 {
	margin-top: 0;	
	margin-bottom: 15px;
}

/* Info blokken */
.gegevens__contact-info {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.gegevens__contact-info-item {
	padding: 4px;
	font-weight: 600;
	font-size: 16px;
	box-sizing: border-box;
	border: 1px solid var(--black);
	display: flex;
	color: var(--black);
	text-decoration: none;
}
.gegevens__contact-info-item:hover {
	color: var(--black);
}
.gegevens__contact-info-item:hover svg {
	rotate: -15deg;
}

.gegevens__contact-info-item-decal {
	background-color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 77px;
	height: 77px;
}
.gegevens__contact-info-item svg {
	width: 50%;
	height: 50%;
	transition: all .2s ease;
}

.gegevens__contact-info-item span {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
}

/* Locatie (map) */
.gegevens__locatie img {
	max-width: 500px;
	border-radius: 12px;
	width: 100%;
	height: auto;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

/* Tablet */
@media (max-width: 992px) {
	.gegevens__wrapper {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.gegevens__contact-info {
		grid-template-columns: repeat(2, 1fr); /* 2 kolommen op tablet */
	}

	.gegevens__locatie img {
		max-width: 100%;
	}
}

/* Mobiel */
@media (max-width: 600px) {
	.gegevens__title {
		font-size: 32px;
	}

	.gegevens__contact-info {
		grid-template-columns: 1fr; /* 1 kolom op mobiel */
	}

	.gegevens__contact h3 {
		font-size: 18px;
	}
}
.kennismaking__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.kennismaking__title {
	margin-top: 0;
	text-align: center;
}

/* video wrapper (responsieve aspect ratio) */
.kennismaking__video .video-wrap{
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 90vh;
}
.video-wrap iframe,
.video-wrap video {
	width: 100%; 
	height: 100%;
	object-fit: cover;
}

/* subtitle */
.kennismaking__subtitle {
	text-align: center;
	margin-top: var(--section-padding);
	margin-bottom: 24px;
}

/* Form */
.wpcf7 br {
	display: none;
}
.kennismaking__form {
	display: block;
	margin-top: 6px;
}

.kennismaking__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 12px;
}

.kennismaking__field {
	display: flex;
	flex-direction: column;
}
.kennismaking__field > p {
	margin: 0;
}

.kennismaking__field .wpcf7-form-control-wrap {
	display: block;
}

.kennismaking__field label{
	font-size: 12px;
	color: var(--orange);
	margin-bottom: 6px;
	font-weight: 700;
	text-transform: none;
}

.kennismaking__field input,
.kennismaking__field textarea {
	background: var(--light-grey);
	padding: 8px 16px;
	font-size: 19px;
	color: var(--text-color);
	box-sizing: border-box;
	border-radius: 0;
	outline: none;
	border: none;
	border-bottom: 1px solid var(--black);
	display: block;
	width: 100%;
}

.kennismaking__field input:focus,
.kennismaking__field textarea:focus {
	border-radius: 0;
	border-color: var(--orange);
}

.kennismaking__field--full { grid-column: 1 / -1; }

.kennismaking__actions {
	display:flex;
	justify-content:center;
	margin-top: 32px;
}

.kennismaking__btn {
	background: var(--orange);
	color: var(--black);
	border: solid;
	border-width:2px;
	border-color:var(--orange);
	padding: 16px 48px;
	border-radius: 99px;
	font-weight: 600;
	font-size: 19px;
	cursor: pointer;
	min-width: 220px;
	transition: color 0.3s ease,background 0.3s ease ; 
}

.kennismaking__btn:hover {
	color:var(--orange);
	background:var(--white);
	border-color:var(--orange);

}


/* =========================
KANTOOR SECTION
grid met wisselende groottes
========================= */
.kantoor__inner { display: flex; flex-direction: column; gap: 14px; }
.kantoor__title {
	margin-top: 0;
	margin-bottom: 0;
}
.kantoor__inner {
	margin-bottom: 96px;
}
.kantoor__lead {
	color: var(--black);
	max-width: 720px;
	margin: 0;
}

/* grid: 3 kolommen om in eerste rij links groter te maken (span 2),
en in tweede rij rechts groter (span 2) */
.kantoor__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 18px;
	align-items: stretch;
}

.kantoor__item{
	background: #e6e6e6;
	min-height: 300px;
	max-height: 350px;
	overflow: hidden;
}

/* positie en grootte */
.kantoor__item--1 { grid-column: 1 / span 2; }
.kantoor__item--2 { grid-column: 3; }
.kantoor__item--3 { grid-column: 1; }
.kantoor__item--4 { grid-column: 2 / span 2; }

/* voorbeeld achtergrond images (vervang door echte img of background-image) */
.kantoor__item img { width:100%; height:100%; object-fit:cover; display:block; }

/* =========================
RESPONSIVE
========================= */

/* Tablet: kleinere schermen -> grid 2 kolommen; video wat hoger */
@media (max-width: 992px) {
	.kennismaking__title { font-size: 18px; }
	.kennismaking__row { 
		grid-template-columns: repeat(2, 1fr); 
	}
	/* kantoor grid -> 2 kolommen. Pas spanning zodat layout logisch blijft */
	.kantoor__grid { 
		grid-template-columns: 1fr 1fr; 
	}
	.kantoor__item--1, .kantoor__item--2 { 
		min-height: 200px; 
	}
	.kantoor__item--3, .kantoor__item--4 { 
		min-height: 160px; 
	}

	.kantoor__item--1 { grid-column: 1 / 2; } /* eerste rij: a links */
	.kantoor__item--2 { grid-column: 2 / 3; } /* eerste rij: b rechts */
	.kantoor__item--3 { grid-column: 1 / 2; } /* tweede rij: c links */
	.kantoor__item--4 { grid-column: 2 / 3; } /* tweede rij: d rechts (groter door min-height) */
}

/* Mobiel: alles 1 kolom */
@media (max-width: 600px) {
	.kennismaking__title { font-size: 16px; }
	.kennismaking__row { grid-template-columns: 1fr; }
	.kennismaking__field--full { grid-column: 1 / -1; }
	.kennismaking__btn { width: 85%; max-width: 320px; }

	.kantoor__grid { grid-template-columns: 1fr; }
	.kantoor__item--1,
	.kantoor__item--2,
	.kantoor__item--3,
	.kantoor__item--4 { grid-column: 1; min-height: 160px; }
}

/* kleine styling tweaks */
label { cursor: text; }
textarea { resize: vertical; min-height: 84px; }
/*===========================================================================================================================
DIENSTEN PAGINA 
===========================================================================================================================*/
.services {

}

.services__header {
	text-align: center;
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 80%;
	margin: 0 auto;
}

.services__title {
	margin-bottom: 20px;
	margin-top: 0;
}

.services__intro {
	max-width: 800px;
	margin: 0;
}

.services__subintro {
	font-weight: 600;
	margin-bottom: 0;
	margin-top: 24px;
}

/* Grid met 3 kaarten */
.services__grid {
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

.services__card {
	position: relative;
	flex: 1;
	overflow: hidden;
}
.services__card:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
}


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

.services__card-title {
	position: absolute;
	left: 24px;
	bottom: 16px;
	color: var(--white);
	font-weight: 600;
	line-height: 1;
	z-index: 3;
	margin: 0;
}

/* Content gedeelte */
.services__content {
	margin: var(--section-padding) auto 0;
}
.services__content .wysiwyg {
	width: 50%;
}
@media (max-width: 768px) {
	.services__content .wysiwyg {
		width: 100%;
	}
}

.services__content-title {
	margin-top: 0;
	margin-bottom: 20px;
}

.services__content p {
	margin-bottom: 20px;
	line-height: 1.6;
}

.services__list {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.services__list-item {
	font-size: 41px;
	font-weight: 600;
	margin-bottom: 0;
	border-bottom:solid;
	padding: 24px 0;
}
@media (max-width: 786px) {
	.services__grid {
		flex-direction: column;
	}
}
@media (max-width: 600px) {
	.services__list-item {
		font-size: 31px;	
	}
}


.creatie {
	padding: var(--section-padding) 0;
	background-color: var(--light-grey);
}
.creatie__header{
	text-align:left;
}
.creatie__header p{
	max-width:500px;
}
.creatie__header h2 {
	margin-top: 0;
}
.creatie__title {
	margin-top: 0;
}
.creatie__intro{
	margin: 0;
}

/* controls (knoppen) */
.creatie__controls{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:flex-start;
	margin:28px 0 24px;
}
.creatie__tab {
	-webkit-appearance:none;
	appearance:none;
	border:1px solid #e6e6e6;
	background:var(--white);
	padding:10px 16px 8px;
	border-radius: 999px;
	cursor:pointer;
	font-weight:600;
	color:var(--text);
	transition:all .18s ease;
	box-shadow: none;
	border: none;
}
.creatie__tab:hover{ transform:translateY(-2px); }
.creatie__tab--active{
	background:var(--green);
	border-color:var(--green);
	color:var(--black);
}

/* panel area onder knoppen */
.creatie__panel {
	display: block;
}

.creatie__content {
	display:flex;
	gap: 48px;
	align-items: center;
	padding:6px 0;
	min-height:220px;
	flex-direction: row-reverse;
	margin-top: 64px;
}
.creatie__media{
	flex: 0 0 42%;
	max-width: 48%;
	overflow:hidden;
	aspect-ratio: 16/12;
}
.creatie__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.creatie__body{
	flex:1;
}
.creatie__heading{
	margin:0 0 10px;
	font-weight: 600;
}
.creatie__text{
	margin:0;
}

/* hide non-active panels */
.creatie__content{ display:none; }
.creatie__content--active{ display:flex; }

/* -------------------------
Sectie: DISTRIBUTIE (split + features)
------------------------- */
.distributie {
	padding:56px 0;
}
.distributie__grid{
	display:flex;

	gap:40px;
	align-items:start;
}

.distributie__left {
	flex: 1;
}

.distributie__left h2{
	margin-top: 0;
}
.distributie__left p{
	margin-top:0;
	margin-bottom:18px;
	max-width: 700px;
}

.distributie__list {
	margin-top:18px;
	padding-top:18px;
	width:100%;
}
.distributie__item {
	padding: 18px 0;
	border-bottom: 1px solid #f2f2f2;
	display:flex;
	gap:16px;
	align-items:flex-start;
	justify-content: space-between;
	margin-bottom:32px;
}
.distributie__item:last-child {
	border-bottom: none;
}
.distributie__item-title {
	font-weight: 600;
	min-width:160px;
	font-size:36px;
}
.distributie__item-text {
	margin:0;
	width: 50%;
}
@media (max-width: 768px) {
	.distributie__item {
		flex-direction: column;
	}
	.distributie__item-text {
		width: 100%;
	}
}

/* rechterpaneel donker met features (4 items) */
.distributie__right {
	background: var(--bg-dark);
	color:var(--white);
	padding:26px;
	border-radius:8px;
	min-height:320px;
}

.distributie__features {
	grid-template-columns: 1fr 1fr;
	gap:18px;
}
.feature {
	display:block;
}
.feature__title{
	font-size:14px;
	font-weight:700;
	margin:0 0 6px;
}
.feature__text{
	margin:0;
	color:rgba(255,255,255,0.8);
	font-size:13px;
	line-height:1.45;
}

/* -------------------------
Responsiveness
------------------------- */
@media (max-width:900px){
	.creatie__content{ flex-direction:column; }
	.creatie__media{ max-width:100%; flex-basis:auto; }
	.distributie__grid{ grid-template-columns:1fr; }
	.distributie__right{ order:2; margin-top:20px; }
}
@media (max-width:520px){
	.creatie__controls{ gap:8px; }
	.creatie__tab{ padding:7px 10px; }
	.feature__title{ font-size:13px; }
}

@keyframes project-slider {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}



/* CONTENT MODULES */
.page-content section:first-child,
.page-news section:first-child {
	margin-top: calc(var(--section-padding) * 2);
}

.page-content section.text .bg,
.page-news section.text .bg {
	background-color: var(--orange);
	padding: 64px 0;
}

.page-content section.image .fullwidth,
.page-news section.image .fullwidth {
	max-width: 100%;
	width: 100%;
}

.page-content section.image img,
.page-news section.image img {
	width: 100%;
	height: auto;
}

.page-content section.image .fullwidth img,
.page-news section.image .fullwidth img {
	height: 400px;
	object-fit: cover;
	object-position: center;
}

.page-content section.doubleImage .container,
.page-news section.doubleImage .container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0 50px;
}

.page-content section.video,
.page-news section.video{
	padding: 0;
	background-color: transparent;
}

.page-content section.video .wp-video,
.page-news section.video .wp-video {
	width: 100% !important;
	height: auto;
}

@media (max-width: 768px) {
	.page-content section:first-child,
	.page-news section:first-child {
		margin-top: calc(var(--section-padding) * 1.5);
	}
}
/* END CONTENT MODULES */

/* COOKIE */

.cookie-notice-container {
    font-family: "Gilroy", sans-serif;
}
button#cn-refuse-cookie {
    background-color: red !important;
}
#cookie-notice .cn-button:not(.cn-button-custom) {
    border-radius: 100px;
    padding: 10px 25px;
}
/* END COOKIE */

/* RECAPTCHA */
.grecaptcha-badge {
    display: none !important;
}
/* END RECAPTCHA */