/*
// Todo's:
	- er zit nog een background-image in layout promo

// CSS-secties
	01. css variables
	02. reset & base
	03. typography
	04. buttons
	05. forms
	06. general varia classes
	07. google maps
	08. icons
	09. social share
	10. basis layouts
	11. layout pages general + news
	12. layout contactform
	13. layout costa + region
	14. layout login
	15. layout news
	16. layout pages
	17. collage (home page)
	18. layout golfclubs
	19. layout properties + property
	20. card
	21. airport-card
	22. costa-card
	23. property-card
	24. photo
	25. pagination
	26. layout promo
	27. search container
	28. sidebar left
	29. sidebar left - nieuwsbrief subscription
	30. sidebar right (meest gelezen)
	31. grid
	32. mobile categories
	33. modals
	34. sweet alert
	35. tables
	36. gallery
	37. header
	38. footer
	39. responsive
*/


/* ==========================================================
   01. CSS VARIABLES
========================================================== */
	:root {
		--primaryfontfamily: Arial, Helvetica, sans-serif;

		--fs-xs: 0.75rem;   /* 12px */
		--fs-sm: 0.875rem;  /* 14px */
		--fs-md: 1rem;      /* 16px */
		--fs-lg: 1.25rem;   /* 20px */
		--fs-xl: 1.5rem;    /* 24px */
		--fs-xxl: 2rem;     /* 32px */
		--fs-xxxl: 4rem;     /* 64px */

		--br-sm: 4px; 		/* = border-radius */
		--br-md: 6px;
		--br-lg: 8px;
		--br-xxl: 16px;
		--br-xxxl: 999px;

		--shadow-xs: 0 1px 1px rgba(0,0,0,.04);
		--shadow-sm: 0 2px 5px rgba(0,0,0,.1);
		--shadow-md: 0 8px 24px rgba(0,0,0,.1);
		--shadow-lg: 0 15px 40px rgba(0,0,0,.08);

		--mw-sm: 300px; 	/* = media-width */
		--mw-md: 600px;
		--mw-lg: 800px;
		--mw-xl: 1200px;

		--headerHeight: 40px;   /* pas aan */
		--footerHeight: 0;   /* pas aan, was 30px */

		/* COLORS */
		--primaryfontcolor: #685f5c;				/* Dark Grey origineel */
		/* Moet in wp_admin/Customizer/Typography AAN staan om alle tekst ook in deze kleur te krijgen, is anders zwarte tekst */

		--primarycolor: #00468F;
		--secundarycolor: #a1a1a1;
		--thirdarycolor: #ebebeb;
		--fourtharycolor: #2b2827;

		/* BACKGROUNDS */
		--pageBgcolor: #f4f4f4;

		--primarybgcolor: #00468F;
		--secundarybgcolor: #a1a1a1;
		--thirdarybgcolor: #F6F6F6;
		--fourtharybgcolor: #2b2827;

		/* BORDERS */
		--primarybordercolor: #ebebeb;
		--secundarybordercolor: #a1a1a1;
		--thirdarybordercolor: #ebebeb;
		--fourtharybordercolor: #2b2827;
		--fiftharybordercolor: #00468F;

		--fontcOpportunity: #d62828;
		--fontcSoftgrey: #685f5c;			/* fontc = fontcolor */
		--fontcWhite: #fff;
		--fontcWhiteHovered: #229dd6;		/* zat in mpm-footer.css, in deze css was dit #00468F */
		--h1cSoftwhite: #cfd5f1;

		--fontcBlue2: #0078d7;
		--backgrBlue2: #0078d7;

		--backgcBlue: #00468F;
		--backgrBlueHovered: #229dd6;
		--backgcWhite: #fff;
		--backgcHeaderBlue: rgba(0, 85, 204, 0.8);   /* blauw */

		--bordercBlue: #00468F;
		--bordercLGrey: #ebebeb; 			/* evt ebebeb = lightgrey */
		--bordercGrey: #a1a1a1; 			/* Grey */

		--placehColor: #6c6969;
		--activeColor: #28a745;

		--backgcGolf: #b8e892;

		--backgcLuxury: #e1d2acff;
		--backgcLuxury2: #A67C00;
		--backgcLuxury3: #f1e3bf;
		--fontcLuxury: #4c3901;

		--backgcNewbuild: #00468F;
		--backgcResale: #167c50;
		--backgcNew: #28a745; 				/* Was 00aa00 */
		--backgcBankProperty: #dd3333;
		--backgcOpportunity: #d62828; 		/* Zit in admin_testpage_opportunities */
		--backgcPrijsverlaging: #CA4509;
		--backgcSold: #ff0000;
		--backgcTopper: #FF00AA;
		--backgcAlert: #e74c3c;

		--backgcSun: yellow;
		--backgcPromo: #ec9735;

		/* Header colors */
		--clr-font: #FAFAFA;
		--clr-bg-header: #a1a1a1;
		--clr-btn: #a1a1a1;
		--clr-nav-bg-hover: #808080;
		--clr-nav-font-hover: #FAFAFA;
		--clr-dropdown: #685f5c;
		--clr-dropdown-hov: #aaaaaa;

	}

	/* Aanpassingen volgens thema */
	.bg-golfclubs-light {
		background-color: var(--backgcWhite);
	}
	.bg-golfclubs-dark {
		background-color: var(--pageBgcolor);
	}

/* ==========================================================
   02. RESET & BASE
========================================================== */
	* { 
		box-sizing: border-box;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
	}
	html {
		font-size: 16px;
	}
	body {
		margin: 0;
		display: flex;
		flex-direction: column;
		font-size: var(--fs-md);
		line-height: 1.25;
		color: var(--primaryfontcolor);
		min-height: 100vh;
	}
	a {
		color: var(--primarycolor);
		text-decoration: none;
	}
	a:hover,
	a:focus {
		color: var(--backgrBlueHovered);
	}
	hr {
		margin-top: 0.75rem;
		margin-bottom: 0.75rem;
		border: 0;
		border-top: 1px solid var(--secundarybordercolor);
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		height: 0;
	}
	i { 
		margin-right: 0.3rem; 
	}
	ul, ol {
		margin-left: 1.25rem;
		padding-left: 0;
	}
	::placeholder {
		color: var(--placehColor);
		opacity: 1;
	}

/* ==========================================================
   03. TYPOGRAPHY
========================================================== */
	/* Grote quotes */
	blockquote {
		margin: 1.5em 0;
		padding: 1.5em 2em;
		border-left: 4px solid var(--bordercBlue);
		background: var(--backgcWhite);
		font-style: italic;
		color: var(--fourtharycolor);
		position: relative;
		box-shadow: var(--shadow-sm);
	}
	blockquote::before {
		content: "“";
		position: absolute;
		top: 0.6rem;
		left: 1rem;
		font-size: var(--fs-xxxl);
		color: var(--primarycolor);
		opacity: 0.5;
	}
	blockquote::after {
		content: "”";
		position: absolute;
		bottom: 0.6rem;
		right: 1rem;
		font-size: var(--fs-xxxl);
		color: var(--primarycolor);
		opacity: 0.5;
	}
	blockquote p {
		font-size: var(--fs-md);
		margin-top: 2rem;
		line-height: 1.5;
	}
	blockquote cite {
		display: block;
		margin-top: 1rem;
		font-size: var(--fs-sm);
		font-style: italic;
		padding: 0.25rem 0.5rem;
	}
	blockquote cite::before {
		content: "— ";
	}

	/* HEADINGS */
	h1,
	.h1 {
		font-size: var(--fs-xxl);
		color: var(--primarycolor);
		font-weight: bold;
		text-align: center;
		margin: 0.6rem 0;
	}
	h2,
	.h2 {
		font-size: var(--fs-xl);
		color: var(--primarycolor);
		font-weight: bold;
		text-align: center;
		font-style: italic; 
		line-height: 1;
		margin-bottom: 0;
		padding: 0.6rem 0;
	}
	h3,
	.h3 {
		font-size: var(--fs-lg);
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
	}
	h4,
	.h4 {
		font-size: var(--fs-lg);
		color: var(--primarycolor);
		font-weight: bold;
		text-align: center;
		font-style: italic; 
		margin: 1.2rem 1rem 0.8rem;
	}
	h5,
	.h5 {
		font-size: var(--fs-lg);
		font-weight: bold;
	}
	h6,
	.h6 {
		font-size: var(--fs-md);
		font-weight: bold;
	}

	label {
		display: inline-block;
		max-width: 100%;
		margin: 0.3rem 0 0.1rem 0.3rem;
		font-size: var(--fs-md);
		color: var(--fontcSoftgrey);
		font-weight: 400;
		white-space: nowrap;
	}

/***********************************************************
  04. BUTTONS
************************************************************/
	.button {
		display: inline-block;
		width: 100%;
		line-height: normal;
		font-weight: bold;
		cursor: pointer;
		background-color: var(--backgcBlue);
		color: var(--fontcWhite);
		padding: 0.5rem;
		text-align: center;
		text-decoration: none;
		border: none;
		border-radius: var(--br-sm);
	}
	.button:hover {
		background-color: var(--backgrBlueHovered);
		color: var(--fontcWhite);
	}

	.button-wrapper {
		display: flex;
		justify-content: center;
		margin: 3rem 0;
	}
	.btn-alert {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70%;
		font-size: var(--fs-xl);
		font-weight: bold;
		text-transform: uppercase;
		color: var(--fontcWhite);
		background-color: var(--backgcAlert);
		padding: 1.25rem 2rem;
		border-radius: var(--br-sm);
		margin-bottom: 0.6rem;
		white-space: nowrap;
		box-sizing: border-box;
	}
	.button.button--pill {
		padding: 0.9rem 1.5rem;
		border-radius: var(--br-xxxl);
	}

	.favorite-btn.active {
		background-color: var(--activeColor) !important;
		border-color: var(--activeColor) !important;
	}
	.send-friend-btn.active {
		background-color: var(--activeColor) !important;
		border-color: var(--activeColor) !important;
	}
	.price-alert-btn.active {
		background-color: var(--activeColor) !important;
		border-color: var(--activeColor) !important;
	}

	.submit-button {
		display:inline-flex;
		width:100%;
		align-items:center;
		justify-content:center;
		background-color:var(--backgcBlue);
		color:var(--fontcWhite);
		padding:0.5rem;
		text-align:center;
		border:none;
		border-radius:var(--br-sm);
		font-weight:bold;
		cursor:pointer;
		transition:background-color .2s ease;
	}
	.submit-button:hover {
		background-color: var(--backgrBlueHovered);
		color: var(--fontcWhite);
	}

	.button.primary {
		background-color: var(--backgcBlue);
		color: var(--fontcWhite);
	}
	.button.primary:hover {
		background-color: var(--backgrBlueHovered);
		color: var(--fontcWhite);
	}
	.button.secondary {
		background: var(--thirdarybgcolor);
		color: var(--fourtharycolor);
		font-size: var(--fs-md);
		padding: 0.3rem;
		border: 1px solid var(--secundarybordercolor);
	}
	.button.thirdary {
		background: transparent;
		border: 1px solid rgba(38, 34, 34, 0.4);
		color: var(--primaryfontcolor);
	}
	.button.secondary:hover,
	.button.thirdary:hover {
		background: var(--secundarybgcolor);
		color: var(--fontcWhite);
	}

/* ==========================================================
   05. FORMS
========================================================== */
	/*form,*/
	.contactform {
		background-color: var(--backgcWhite);
		padding: 1.25rem;
		border-radius: var(--br-lg);
		max-width: var(--mw-md);
		margin: auto;
		box-shadow: var(--shadow-md);
	}
	.form-response {
		text-align: center;
	}
	input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		line-height: normal;
		width: 100%;
		margin-bottom: 0.1rem;
		font-size: var(--fs-md);
		padding: 0.3rem;
		background-color: var(--backgcWhite);
		border: 1px solid var(--bordercLGrey);
		border-radius: var(--br-sm);
		box-shadow: var(--shadow-xs);
	}
	input[type="text"], input[type="number"], input[type="email"], textarea {
		color: var(--fontcSoftgrey) !important;
	}
	input:focus, textarea:focus, select:focus {
		outline: none;
		border-color: var(--primarycolor);
		box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2); /* subtiele focusring */
	}

	/* Zit in aboutus, registration */
	input[type="submit"] {
		display: inline-block;
		width: 100%;
		color: var(--fontcWhite);
		background-color: var(--backgcBlue);
		padding: 0.4rem;
		text-align: center;
		text-decoration: none;
		border: none;
		border-radius: var(--br-sm);
		font-weight: bold;
		cursor: pointer;
		margin-bottom: 0.3rem;
	}
	input[type="submit"]:hover {
		background-color: var(--backgrBlueHovered);
	}
	.button,
	.submit-button,
	input[type="submit"] {
		transition:
			background-color .2s ease,
			transform .2s ease;
	}

	select:has(option[value=""]:checked) {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		color: var(--placehColor);
	}
	select:not([value]):not(:focus),
	select[value=""] {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		color: var(--fontcSoftgrey);
	}
	
	.checkbox-container {
		display: flex;
		align-items: flex-start;
		margin-bottom: 0.3rem;
		cursor: pointer;
	}
	.checkbox-container input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;

		width: 1rem;
		height: 1rem;
		margin: 0.1rem 0.3rem 0 0.3rem;

		background-color: var(--backgcWhite);
		border: 1px solid var(--secundarybordercolor);
		border-radius: var(--br-sm);

		position: relative;
		display: inline-block;
		box-sizing: border-box;
		cursor: pointer;
		flex-shrink: 0;

		transition: all 0.2s ease;
	}
	.checkbox-container input[type="checkbox"]:hover {
		border-color: var(--primarycolor);
	}
	.checkbox-container input[type="checkbox"]:checked {
		background-color: var(--backgcWhite);
		border-color: var(--primarycolor);
	}
	.checkbox-container input[type="checkbox"]:checked::before {
		content: "\f00c";
		font-family: "FontAwesome";
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		color: var(--primarycolor);
		font-size: var(--fs-xs);
		font-weight: 900;
		line-height: 1;
	}
	.checkbox-container input[type="checkbox"]:focus {
		outline: none;
		box-shadow: var(--shadow-sm);
	}
	.checkbox-container-text {
		display: inline;
		font-size: var(--fs-sm);
		white-space: normal;
		word-break: normal;
		overflow-wrap: break-word;
	}

	.radio-container {
		display: flex;
		align-items: center; /* vertical alignment van span en tekst */
	}
	.radio-container input[type="radio"] {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}
	.radio-container .custom-radio {
		display: inline-block;
		width: 1rem;
		height: 1rem;
		border: 1px solid var(--bordercGrey);
		border-radius: 50%;
		margin-right: 0.5rem;
		vertical-align: middle;
		cursor: pointer;
	    position: relative;
	}
	.radio-container .custom-radio::after {
		content: "";
		position: absolute;
		top: 0.2rem;
		left: 0.2rem;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: transparent;
		transition: all 0.2s ease;
	}
	.radio-container input[type="radio"]:checked + .custom-radio {
		background-color: var(--backgcWhite);
	}
	.radio-container input[type="radio"]:checked + .custom-radio::after {
		background-color: var(--primaryfontcolor);
	}

	.toggle-part {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
	.toggle-part h1 {
		font-size: var(--fs-lg);
		margin: 0;
		padding: 0.5rem 0;
	}
	.toggle-content {
		font-size: var(--fs-md);
		line-height: 1.2;
		text-align: justify;
		margin: 0.2em 0;

		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.toggle-content.collapsed {
		max-height: 0;
	}
	.toggle-content.expanded {
		max-height: 2000px;
	}
	.toggle-content-btn {
		font-size: var(--fs-sm);
		margin-top: 0.5rem;
		cursor: pointer;
	}

	/* COLUMNS */
	/* Legacy Bootstrap grid
	Alleen behouden voor oude templates
	*/
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		  position: relative;
		  padding-left: 0;
		  padding-right: 0.3rem; 
		}
	.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
	  float: left;
	}
	.col-xs-12 { width: 100%; }
	.col-xs-11 { width: 91.66666667%; }
	.col-xs-10 { width: 83.33333333%; }
	.col-xs-9 { width: 75%; }
	.col-xs-8 { width: 66.66666667%; }
	.col-xs-7 { width: 58.33333333%; }
	.col-xs-6 { width: 50%; }
	.col-xs-5 { width: 41.66666667%; }
	.col-xs-4 { width: 33.33333333%; }
	.col-xs-3 { width: 25%; }
	.col-xs-2 { width: 16.66666667%; }
	.col-xs-1 { width: 8.33333333%; }

	@media (min-width: 768px) {
		.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
			float: left;
		}
		.col-sm-12 { width: 100%; }
		.col-sm-11 { width: 91.66666667%; }
		.col-sm-10 { width: 83.33333333%; }
		.col-sm-9 { width: 75%; }
		.col-sm-8 { width: 66.66666667%; }
		.col-sm-7 { width: 58.33333333%; }
		.col-sm-6 { width: 50%; }
		.col-sm-5 { width: 41.66666667%; }
		.col-sm-4 { width: 33.33333333%; }
		.col-sm-3 { width: 25%; }
		.col-sm-2 { width: 16.66666667%; }
		.col-sm-1 { width: 8.33333333%; }
	}
	@media (min-width: 992px) {
		.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
			float: left;
		}
		.col-md-12 { width: 100%; }
		.col-md-11 { width: 91.66666667%; }
		.col-md-10 { width: 83.33333333%; }
		.col-md-9 { width: 75%; }
		.col-md-8 { width: 66.66666667%; }
		.col-md-7 { width: 58.33333333%; }
		.col-md-6 { width: 50%; }
		.col-md-5 { width: 41.66666667%; }
		.col-md-4 { width: 33.33333333%; }
		.col-md-3 { width: 25%; }
		.col-md-2 { width: 16.66666667%; }
		.col-md-1 { width: 8.33333333%; }
	}
	@media (min-width: 1200px) {
		.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
			float: left;
		}
		.col-lg-12 { width: 100%; }
		.col-lg-11 { width: 91.66666667%; }
		.col-lg-10 { width: 83.33333333%; }
		.col-lg-9 { width: 75%; }
		.col-lg-8 { width: 66.66666667%; }
		.col-lg-7 { width: 58.33333333%; }
		.col-lg-6 { width: 50%; }
		.col-lg-5 { width: 41.66666667%; }
		.col-lg-4 { width: 33.33333333%; }
		.col-lg-3 { width: 25%; }
		.col-lg-2 { width: 16.66666667%; }
		.col-lg-1 { width: 8.33333333%; }
	}

/***********************************************************
  06. GENERAL VARIA CLASSES
************************************************************/
	.back-to-overview {
		margin-bottom: 0.6rem;
	}
	.flexbox {
		display: flex; 
		justify-content: center; 
		background-color: var(--backgcWhite);
		padding: 0.5rem;
	}
	.privacy-group {
		padding-bottom: 0.5rem;
	}
	.row {
		margin: 0;
	}
	.row::after {
		content:"";
		display:block;
		clear:both;
	}
	.two-columns {
		column-count: 2;
		column-gap: 0.6rem;
		list-style-type: disc;  
		padding-left: 0.6rem;     
	}
	.unselectable {
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.weather-widget {
		margin: 0 auto;
	}

	.yellowcircle {
		position: absolute;
		top: 1.25rem;
		left: 1.25rem;
		border-radius: 50%;
		background-color: var(--backgcSun);
		width: 20vh;
		height: 20vh;
		z-index: 1;
	}

	/* Marquee */
	.marquee {
		width: 100%;
		padding: 0.1rem 0;
		background: var(--backgcWhite);
		overflow: hidden;
		position: relative;
	}
	.marquee::before,
	.marquee::after {
		content: "";
		position: absolute;
		top: 0;
		width: 100px;
		height: 100%;
		z-index: 2;
		pointer-events: none;
	}
	.marquee::before {
		left: 0;
		background: linear-gradient(to right, var(--backgcWhite), transparent);
	}
	.marquee::after {
		right: 0;
		background: linear-gradient(to left, var(--backgcWhite), transparent);
	}
	.marquee-track {
		display: flex;
		width: max-content;
		animation: scroll linear infinite;
		will-change: transform;
	}
	.marquee:hover .marquee-track {
		animation-play-state: paused;
	}
	.marquee-group {
		display: flex;
	    flex-shrink: 0;
		white-space: nowrap;
	}
	.marquee-group span {
		color: var(--primarycolor); 
		font-size: 1.2em;
		font-style: italic;
		flex-shrink: 0;
	}
	@keyframes scroll {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}

/***********************************************************
07. GOOGLE MAP
************************************************************/
	.page-map {
		width: 100%;
		height: 600px;
		position: relative;
	}
	.property-map {
		width: 100%;
		height: 300px;
		position: relative;
		overflow: hidden;
	}
	.property .property-map {
		border: 1px solid #e5e5e5;
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
	}
	.property-map-title {
		font-size: var(--fs-md);
		font-weight: bold;
	}

	.map-card {
		position: absolute;
		z-index: 2147483647;
		width: 180px;
		height: 300px;
		background: var(--backgcWhite);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(10px);
		transition: 0.2s ease;
	}
	.map-card.active {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.map-card-content {
		padding: 10px;
		overflow-y: auto;
		height: 100%;
	}
	.map-card img {
		border-radius: var(--br-lg);
		margin-bottom: 10px;
	}
	.map-card-btn {
		display: block;
   		width: fit-content;
		margin: 0.5rem auto 0 auto;
		padding: 3px 12px;
		background: var(--secundarybgcolor);
		color: var(--fontcWhite);
		border-radius: var(--br-lg);
		font-size: 13px;
		transition: 0.2s ease;
	}
	.map-card-btn:hover {
		background: #333;
	}
	.map-card-label {
		display: block;
   		width: fit-content;
		font-size: var(--fs-xs);
		font-weight: bold;
		padding: 3px 12px;
		margin: 0 auto 0.2rem auto;
		background: var(--thirdarybgcolor);
		color: var(--primaryfontcolor);
		border: 1px solid var(--secundarybordercolor);
		text-transform: uppercase;
		border-radius: var(--br-lg);
		transition: 0.2s ease;
	}
	.map-card-reference {
		margin-top:5px;
		font-size:12px;
		color:#999;
	}

	.cluster-card {
		display: flex;
		flex-direction: column;
		width: 180px;
		max-height: 60vh; /* of wat past in jouw UI */
	}

	.cluster-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 15px;
		overflow-y: auto;
		flex: 1;
		max-height: 100%;
		padding-right: 6px;
		scroll-behavior: smooth;
		overscroll-behavior: contain;
	}
	.cluster-item {
		display: flex;
		gap: 10px;
		align-items: center;
		padding: 8px;
		border-bottom: 1px solid #eee;
		border-radius: var(--br-md);
		cursor: pointer;
		transition: .2s;
	}
	.cluster-item:hover {
		background: #f5f5f5;
	}
	.cluster-thumb {
		width: 70px;
		height: 70px;
		flex-shrink: 0;
		border-radius: var(--br-md);
		overflow: hidden;
		background: #f2f2f2;
	}
	.cluster-thumb img {
		display: block;
	}
	.cluster-info {
		display: flex;
		flex-direction: column;
		gap: 2px;
		font-size: 13px;
	}

	.modal-close,
	.map-card-close,
	.cluster-close {
		position: absolute; /* of flex child als je header flex gebruikt */
		right: 10px;
		top: 10px;

		width: 24px;
		height: 24px;

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

		border-radius: 50%;

		background: var(--thirdarybgcolor);
		border: 1px solid var(--secundarybordercolor);

		cursor: pointer;

		font-size: 18px;
		line-height: 1;
		padding: 0;
	}

	.map-card-close {
		z-index: 2;
	}

	.cluster-list-panel,
	.cluster-search-panel {
		position: absolute;
		top: 70px;
		left: 42%;
		width: 320px;
		max-height: 80vh;
		background: white;
		box-shadow: var(--shadow-md);
		border-radius: var(--br-lg);
		overflow: hidden;
		z-index: 9999;
	}
	.cluster-list-header,
	.cluster-search-header {
		padding: 12px;
		font-weight: bold;
		border-bottom: 1px solid #eee;
	}
	.cluster-list-items,
	.cluster-search-content {
		overflow-y: auto;
		max-height: calc(80vh - 50px);
	}
	.cluster-search-content div {
		padding: 10px;
		text-align: center;
	}
	.cluster-list-item {
		padding: 10px;
		cursor: pointer;
		border-bottom: 1px solid #f2f2f2;
	}
	.cluster-list-item:hover {
		background: #f8f8f8;
	}

	.miniCard {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;

		width: 200px;
		padding: 8px;

		background: white;
		box-shadow: var(--shadow-md);
		border-radius: var(md);

		cursor: pointer;
		transition: transform 0.15s ease;

		z-index: 9999;
	}
	.miniCard:hover {
		transform: scale(1.05);
	}
	.miniCard-thumb {
		width: 70px;
		height: 70px;
		flex-shrink: 0;
		border-radius: var(--br-md);
		overflow: hidden;
	}
	.miniCard-thumb img {
		display: block;
	}
	.miniCard-info {
		display: flex;
		flex-direction: column;
		gap: 2px;
		font-size: 12px;
		line-height: 1.2;
	}
	.miniCard-info strong {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

/***********************************************************
08. ICONS
************************************************************/
	.favorite-heart {
		font-size:28px;
		transition:0.2s;
	}
	.favorite-heart.active {
		color:red;
		transform:scale(1.1);
	}
	.heart-icon {
		display:inline-block;
		font-size:28px;
		transition:transform .2s ease;
	}

	.luxury-icon {
		position: absolute;
		top: 0.6rem;
		right: 0.6rem;
		width: 3rem;
		height: 3rem;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(160deg, var(--backgcLuxury2), var(--backgcLuxury));
		border-radius: 50%;
		box-shadow: var(--shadow-sm);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	.luxury-icon.md {
		width: 2.5rem;
		height: 2.5rem;
	}
	.luxury-icon.lg {
		width: 3.5rem;
		height: 3.5rem;
	}

	.image-wrapper:hover .heart-icon,
	.image-wrapper:hover .luxury-icon,
	.luxury-icon:hover {
		transform: scale(1.2);
		box-shadow: var(--shadow-md);
	}

	.luxury-icon svg {
		margin-top: 0.1rem;
		margin-left: 0.2rem;
		width: 100%;
		height: 100%;
		display: block;
		stroke: var(--fontcWhite);
	}

	/* Icons top right */
	.top-right-icons {
		position:absolute;
		top: 0.6rem;
		right: 0.6rem;
		z-index: 10;

		display:flex;
		flex-direction:column;
		align-items:flex-end;
		gap:10px;
	}

	.top-right-icons > span {
		width:44px;
		height:44px;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.top-right-icons .luxury-icon {
		position:unset;
	}

/***********************************************************
09. SOCIAL SHARE
************************************************************/
	.socialshare {
		display: flex;
		gap: 2rem;
		align-items: center;
		background-color: var(--backgcWhite);
		padding: 0.3rem 2rem 0.3rem;
		margin: 0.5rem 0;
		border-radius: var(--br-sm);
		box-shadow: var(--shadow-sm);
	}
	.socialshare a {
		flex: 1;
		justify-content: center;
		align-items: center;
	    min-width: 0;
	}
	.socialshare img {
		width: 2rem;
		height: auto;
	}
	.socialshare a:hover img {
		transform:scale(1.15);
	}

/***********************************************************
10. BASIS LAYOUTS
************************************************************/
	.header-part {
		position: relative;
	}
	.map-card img {
		width: 100%;
		height: 140px;
		object-fit: cover;
	}
	.collage-item img,
	.cluster-thumb img,
	.header-part img,
	.item img,
	.miniCard-thumb img,
	.news-article-large img,
	.promo-featured-image img,
	.photo-section img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position:center;
	}

	.costa-card,
	.property-card,
	.rounded-image-lg {
		transition:
			transform .25s ease,
			box-shadow .25s ease;
	}

/***********************************************************
11. LAYOUT PAGES GENERAL + NEWS
************************************************************/
	.wysiwyg-layout,
	.news-layout {
		display: flex;
		flex-direction: row;
		flex: 1;
		align-items: flex-start;
		width: 100%;
		box-sizing: border-box;
	}
	.wysiwyg-main,
	.news-main {
		flex: 1;
		min-width: 0;
		padding: 2rem; /* 0 2rem 2rem */
		background-color: var(--backgcWhite);
		box-sizing: border-box;
		display: block; /* BELANGRIJK: news = block zodat gerelateerde artikels eronder komen */
	}

	.wysiwyg-content-main h1,
	.news-category-main h1 {
		margin-top: 0;
		font-size: var(--fs-xxl);
	}
	.wysiwyg-content-main p,
	.news-category-main p {
		color: var(--primaryfontcolor);
		margin-bottom: 1.5rem;
	}

/***********************************************************
12. LAYOUT CONTACTFORM
************************************************************/
	.contactform-wrapper {
		color: var(--primaryfontcolor);
		padding: 0.3rem;
	}
	.contactform-wrapper h2 {
		font-size: var(--fs-xl);
		color: var(--primarycolor);
		text-align: center;
		font-weight: bold;
		font-style: italic;
	}
	.contactform-wrapper p {
		font-size: var(--fs-md);
		text-align: center;
		font-style: italic;
		line-height: 1.5;
		margin-bottom: 1rem;
	}
	.contactform {
		font-size: var(--fs-md) !important;
		text-align: left;
	}

/***********************************************************
13. LAYOUT WYSIWYG / COSTA + REGION + ...
************************************************************/
	.wysiwyg-summary {
		display: flex;
		gap: 24px;
		align-items: flex-start;
		margin-bottom: 30px;
	}
	.wysiwyg-thumbnail {
		flex: 0 0 250px;
	}
	.wysiwyg-characteristics {
		flex: 1;
	}
	.wysiwyg-content {
		font-size: var(--fs-lg);
		line-height: 1.5;
		text-align: justify;
		padding-right: 1.25rem;
		margin-bottom: 0.6rem;
	}
	.wysiwyg-content p {
		margin-bottom: 1em;
	}
	.wysiwyg-content ul,
	.wysiwyg-content ol {
		margin-bottom: 2em;
	}
	.wysiwyg-content li {
		line-height: 1.2;
		margin-left: 1.5em;
		margin-bottom: 0.5em;
	}
	.wysiwyg-subjects {
		display: flex;
		flex-direction: column;
	}
	.wysiwyg-subject h5 {
		margin-bottom: 0.6rem;
	}
	.wysiwyg-subject img {
		float: left;
		margin: 0 1.25rem 1.25rem 0;
		max-width: var(--mw-sm);
		height: auto;
		border-radius: var(--br-md);
	}
	.wysiwyg-subject p {
		font-size: var(--fs-lg);
		line-height: 1.5;
	}
	.wysiwyg-subject-content {
		font-size: var(--fs-lg);
		line-height: 1.5;
		text-align: justify;
		padding-right: 1.25rem;
	}
	.wysiwyg-image {
		max-width: var(--mw-sm);
		height: auto;
 		float: left;
		margin-right: 1.25rem;
	}
	.wysiwyg-image img {
		border-radius: var(--br-md);
		opacity: 0.8;
	}
	.wysiwyg-image-lg img {
		width: 100%;
		max-width: var(--mw-lg);
		height: auto;
		border-radius: var(--br-md);
	}
	.wysiwyg-imagemap {
		width: 100%;
		aspect-ratio: 16/11;
		border-radius: var(--br-lg);
		opacity: 0.8;
	}
	.wysiwyg-video-content {
		position:relative;
		display:block;
		margin-bottom: 2rem;
		padding: 0;
	}

/* ==========================================================
   14. LOGIN PAGE
========================================================== */
	.logreg-page {
		background: no-repeat center center fixed;
		width: 100%;
		height: calc(100vh - var(--headerHeight));
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}
	.logreg-logo {
		padding: 20px; 
		text-align: center;
	}
	.logreg-title h1 {
		 -webkit-text-stroke: 1px white;
	}
	.logreg-form {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		width: 100%;
		padding: 40px 20px;
 		box-sizing: border-box;
	}
	/* Later — login + registratie:
	.logreg-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 500px));
		gap: 40px;
		justify-content: center;
		align-items: start;
		width: 100%;
		padding: 40px 20px;
		box-sizing: border-box;
	}
	*/

	.login-form,
	.register-form {
		width: 100%;
		max-width: 500px;
		padding: 40px;
		background: var(--thirdarybgcolor);
		border-style: outset;
		box-sizing: border-box;
	}
	.login-title,
	.register-title {
		margin-bottom: 10px;
	}
	.login-subtitle,
	.register-subtitle {
		text-align: center;
	}
	.login-content,
	.register-content {
		font-size: var(--fs-md);
		margin: 25px 0;
	}
	.login-action,
	.register-action {
		margin: auto;
		width: 100%;
		margin-bottom:10px;
	}

/***********************************************************
15. LAYOUT NEWS
************************************************************/
	/* Grid layout: artikel 1 links, 2-4 rechts */
	.news-articles-grid {
		display: grid;
		grid-template-columns: 2fr 1fr;
		align-items: stretch;
		grid-template-areas: "large right";
		gap: 0.25rem;
	}

	/* === Layout: news pagina === */
	.recent-news,
	.news-category {
		margin-bottom: 0.5rem;
	}
	.recent-news h2,
	.news-category h2 {
		font-size: var(--fs-lg);
		color: var(--primarycolor);
		text-transform: uppercase;
		font-weight: bold;
		font-style: normal;
		text-align: left;
	}

	/* Rechterkolom is een nested grid */
	.news-column-right {
		grid-area: right;
		display: grid;
		grid-template-rows: repeat(3, 1fr);
	}
	.news-column-right a:hover .news-article-small span {
		color: var(--fontcWhiteHovered);
	}

	/* news pagina  - hoofdartikel links */
	.news-article-large {
		grid-column: 1 / 2;
		grid-row: span 3;
		grid-area: large;
		max-height: 500px;
		overflow: hidden;
		border-radius: var(--br-md);
		background-color: var(--backgcWhite);
		box-shadow: var(--shadow-sm);
	}
	.news-article-large img {
		max-height: 380px;
		border-radius: var(--br-lg);
	}
	.news-article-large h3 {
		margin: 0;
		font-size: var(--fs-md);
		padding: 1rem 0.5rem;
	}

	/* news pagina  - kleine artikelen rechts */
	.news-article-small {
		display: flex;
		gap: 0.75rem;
		background-color: var(--backgcWhite);
		border-radius: var(--br-md);
		padding: 0.3rem 0.4rem;
		box-shadow: var(--shadow-sm);
	}
	.news-article-small img {
		width: 200px;
		height: 125px;
		object-fit: cover;
		border-radius: var(--br-sm);
	}
	.news-article-small span {
		color: var(--primarycolor);
		align-items: center;
	}

	/* === Layout: NEWS CATEGORY pagina === */
	.wysiwyg-content-layout,
	.news-category-layout {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 2rem;
		align-items: start;
	}

	/* news category pagina - artikelen links */
	.news-category-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	/* news category pagina - kaarten in de grid */
	.news-category-card {
		display: flex;
		flex-direction: column;
		background-color: var(--backgcWhite);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
		overflow: hidden;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.news-category-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-md);
	}
	.news-category-card .thumb img {
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
	.news-category-card h3 {
		font-size: var(--fs-md);
		margin: 0.8rem 1rem 0.4rem;
		color: var(--primarycolor);
	}
	.news-category-card .excerpt {
		font-size: var(--fs-md);
		margin: 0.25rem 0.6rem;
		color: var(--fontcSoftgrey);
	}
	.news-category-card:hover h3 {
		color: var(--fontcWhiteHovered);
	}

	/* === Layout: SINGLE NEWS pagina === */
	.news-article-layout {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 2rem;
		align-items: start;
	}

	/* news category pagina - artikelen links */
	.news-article {
		margin: 0 auto;
		background-color: var(--backgcWhite);
	}
	.news-article-header {
		text-align: left;
		margin-bottom: 1.5rem;
		background-color: transparent;
		position: static;
		padding: 0;
	}
	.news-article-header h1 {
		font-size: var(--fs-xl);
		color: var(--backgcBlue);
		font-weight: bold;
		text-align: center;
		margin-bottom: 0.25rem;
	}
	.news-article-header .meta {
		font-size: var(--fs-md);
		color: var(--secundarycolor);
	}
	.news-article-image img {
		width: 100%;
		height: auto;
		border-radius: var(--br-md);
		margin-top: 1rem;
	}
	.news-article-content {
		color: var(--primaryfontcolor);
		font-size: var(--fs-lg);
		line-height: 1.5;
		margin-top: 1rem;
	}
	.news-article-content p {
		margin-bottom: 1rem;
	}

	/* === GERELATEERDE ARTIKELS === */
	.related-articles {
		margin-top: 3rem;
		padding: 2rem;
		background-color: var(--thirdarybgcolor);
		border-top: 1px solid var(--bordercGrey);
		border-radius: var(--br-md);
	}
	.related-articles h2 {
		font-size: var(--fs-lg);
		margin-bottom: 1rem;
		color: var(--primarycolor);
		padding-bottom: 0.5rem;
	}
	.related-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 1rem;
	}
	.related-item {
		display: flex;
		flex-direction: column;
		background-color: var(--backgcWhite);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
		overflow: hidden;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.related-item:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-md);
	}
	.related-item img {
		width: 100%;
		height: 150px;
		object-fit: cover;
	}
	.related-item h3 {
		font-size: var(--fs-md);
		margin: 0.8rem 1rem 0.4rem;
		color: var(--primarycolor);
		flex: 1;
	}

	/* Single news pagina - footer met post navigation (& social share) */
	.news-article-footer {
		border-top: 1px solid var(--bordercGrey);
		margin-top: 2rem;
		padding-top: 1rem;
		font-size: var(--fs-md);
		color: var(--primaryfontcolor);
	}
	.news-article-footer a {
		color: var(--primarycolor);
	}
	.post-navigation {
		display: flex;
		justify-content: space-between;
		margin-top: 2rem;
	}
	.post-navigation a {
		color: var(--primarycolor);
		font-weight: 600;
	}
	.post-navigation-share {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 2rem;
		gap: 1rem;
		flex-wrap: wrap; /* voor mobiel */
	}
	.post-navigation-share .post-nav-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; /* zorgt dat bij kleine schermen alles netjes onder elkaar komt */
		gap: 1rem;
	}
	.post-nav {
		padding: 0.5rem 1rem;
		border-radius: var(--br-md);
		font-weight: 600;
		transition: background-color 0.2s;
	}
	.post-nav:hover {
		color: var(--primarycolor);
	}
	.prev-post, .next-post {
		flex: 0;
		min-width: 120px;
	}
	.prev-post a,
	.next-post a {
		white-space: nowrap;
		display: inline-block;
	}

/***********************************************************
16. LAYOUT PAGES
************************************************************/
/* Page LAYOUT Home, Projects, project, Properties, Properties Featured, Properties Golfresort, Properties Luxury, Property, Toppers, Favorieten, Bezichtigingsreis, Costas, Regions,  Golfclubs, Luchthavens, Contactform */
	.page-content {
		line-height: 1.5;
		width: 100%;
		max-width: 1800px;
		margin: 0 auto;
		padding: 0 1.25rem;
		background-color: var(--pageBgcolor);
	}
	.page-content.page-404 {
		background-color: var(--backgcWhite);
	}
	.page-content.golf {
		background-color: var(--backgcGolf);
	}
	.page-content.luxury {
		font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		color: var(--fontcLuxury);
		background-color: var(--backgcLuxury);
	}
	.page-content.luxury h2 {
		font-size: var(--fs-xxl);
		margin-bottom: 10px; 
		font-weight: 400;
		color: var(--fontcLuxury);
	}
	.page-content.luxury .search-container2 {
		color: var(--fontcLuxury);
	}
	.page-content.luxury .search-container2 .button {
		background-color: var(--backgcLuxury2);
	}
	.page-content.luxury .search-container2 .button:hover {
		background-color: var(--backgcLuxury);
	}
	.page-content.luxury .property-detail-container {
		background-color: var(--backgcLuxury3);
	}
	.page-content.luxury blockquote p {
		color: var(--fontcLuxury);
	}
	.page-content.luxury blockquote cite {
		color: var(--fontcLuxury);
	}
	.page-content.luxury .contactform {
		background-color: var(--backgcLuxury3);
	}
	.page-content.luxury .gallery_thumbnails {
		background-color: var(--backgcLuxury);
	}

	/* Page header */
	/* Zit in category, costa, golfclub, location, luchthaven, news, region */
	.page-header {
		position: sticky;
		background-color: var(--backgcHeaderBlue);
		color: var(--fontcWhite);
		text-align: center;
		padding: 1.5rem 2rem;
		margin-bottom: 0.6rem;
		border-radius: var(--br-md);
		box-shadow: var(--shadow-sm);
		z-index: 2;
	}
	.page-header h1 {
		margin: 0.3rem;
		font-size: var(--fs-xxl);
		color: var(--primarycolor);
	}
	.page-header h2 {
		color: var(--fontcWhite);
	}
	.page-header p.intro {
		margin: 0.5rem 0 0;
		font-size: var(--fs-lg);
		font-weight: bold;
		text-align: center;
		opacity: 0.9;
	}

	/* Page - Header part */
	.header-part {
		position: relative;
		width: 80%;
		aspect-ratio: 16/9;
		margin: 0.6rem auto;
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
	}
	.header-part img {
		display: block;
	}
	.header-overlay {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 1.5rem;
		width: 90vw;
		background-color: var(--backgcHeaderBlue);
		color: var(--fontcWhite);
		text-align: center;
		padding: 1rem 0;
		font-family: 'Segoe UI', sans-serif;
		border-radius: var(--br-md);
		box-shadow: var(--shadow-sm);
	}
	.header-part-indep {
		position: relative;
	}
	.header-part-indep .header-overlay {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 1.5rem;
		width: 90vw;
		margin-bottom: 0.6rem;
	}
	.header-title-container {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		margin-bottom: 0.6rem;
		background-color: var(--pageBgcolor);
		border: 1px solid var(--bordercBlue);
		border-radius: var(--br-lg);
	}
	.header-subtitle {
		font-size: var(--fs-lg);
		text-align: center;
	}

	.header-part.luxury {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		height: auto;
		aspect-ratio: auto;
		margin-bottom: 1.25rem;
		padding: 1.25rem;
		background: linear-gradient(160deg, var(--backgcLuxury2), var(--backgcLuxury));
	}
	.header-part.luxury h1 {
		font-size: var(--fs-xxxl);
		font-weight: 300;
		margin-bottom: 0.6rem;
		color: var(--fontcLuxury);
	}
	.header-part.luxury p {
		font-size: var(--fs-xxl);
		color: var(--fontcLuxury);
		margin-bottom: 3rem;
	}
	.header-part.luxury .luxury-header-icon {
		position: absolute;
		width: 5rem;
		transform: translateX(-2.5rem);
	}

	/* Promo block ipv image */
	.header-part-promo {
		position: relative;
		width: 80%;
		min-height: 30vh;
		background-color: var(--backgcPromo);
		margin: 0.6rem auto;
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
	}
	.favorites-promo {
		font-size: var(--fs-lg);
		line-height: 1.5;
		padding: 10rem 3rem 0;
	}
	.favorites-promo ul {
		padding-left: 1.25rem;
		padding-bottom: 0.6rem;
	}
	.favorites-promo li {
		margin-bottom: 0.25rem;
	}

	/* Page - Page part */
	.page-part {
		max-width: var(--mw-xl);
		margin: 0 auto 1.25rem auto;
		display: block;
		clear: both;
	}
	.page-part-large {
		width: 90vw;
		margin: 0 auto 1.25rem auto;
		display: block;
		clear: both;
	}
	.page-part-small {
		padding: 1.25rem;
		max-width: 900px;
		margin: 0 auto;
		display: block;
		clear: both;
	}
	.page-part .title {
		margin: 0 auto 1.25rem auto;
	}
	.page-part .large-spreaded ul,
	.page-part .large-spreaded ol {
		margin-left: 6rem;
	    padding-left: 0;
	}
	.page-part p,
	.page-part-large p,
	.page-part-small p {
		font-size: var(--fs-lg);
		text-align: center;
		margin-bottom: 1.2rem;
	}
	.page-part ul,
	.page-part-large ul,
	.page-part-small ul {
		list-style-position: inside;
		padding: 0;
		margin: 0;
	}
	.page-part li,
	.page-part-large li,
	.page-part-small li {
		font-size: var(--fs-lg);
		margin-bottom: 0.3rem;
	}

	/* Page - Image */
	.page-image-wrapper {
		position: relative;
		padding: 10vh 5vh 0 10vh;
		margin-bottom: 3rem;
	}
	.page-image-wrapper .image {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: 2;
	}
	.page-image-wrapper .image img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* Page - Textcontainer */
	.page-textcontainer {
		padding: 1.5em 2em;
		text-align: left;
		background-color: var(--backgcWhite);
		border: 1px solid var(--bordercLGrey);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
	}
	.page-textcontainer p {
		font-size: var(--fs-lg);
		text-align: justify;
		margin-bottom: 1rem;
	}
	.page-textcontainer .buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		align-items: center;
	}
	.page-textcontainer .buttons .button {
		width: 100%;
		max-width: 350px;
	}
	.page-textcontainer2 {
		font-size: var(--fs-lg);
		margin-bottom: 0.6rem;
	}

	/* Page - Textcontainer */
	.page-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
		align-items: stretch;
		width: 100%;
	}
	.page-grid-item {
		min-width: 0;
		display: flex;
	}

	/* Page - Tekst */
	.ps-text {
		font-size: var(--fs-sm);
		font-style: italic;
		text-align: center;
		margin-top: 0.6rem;
		padding-left: 0.6rem;
	}

	/* High-end vastgoed details layout */
	.details {
		display: flex;
		flex-direction: row !important;
		gap: 3rem;
		align-items: flex-start;
		justify-content: space-between;
		margin: 2rem 0;
	}
	.details > * {
		flex: 1 1 auto;
	}
	.details .metadesc {
		flex: 1 1 75%;
		font-size: var(--fs-lg);
		line-height: 1.5;
		color: var(--fourtharycolor);
		font-weight: 300;
		font-family: 'Playfair Display', serif; /* high-end vastgoed serif look */
		padding-left: 2rem;
	}
	.details .features {
		flex: 0 0 25%;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding-right: 2rem;
		border-right: 2px solid var(--backgcLuxury2); /* luxe gouden lijn */
	}
	.feature-item {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		font-size: var(--fs-md);
		color: var(--fourtharycolor);
		font-weight: 400;
	}
	.feature-item .icon svg {
		width: 1.5rem;
		height: 1.5rem;
		stroke: var(--backgcLuxury2);
	}
	.feature-item .icon--luxury {
		width: 1.5rem;
		height: 1.5rem;
		stroke: var(--backgcLuxury2);
	}

	/* Hero op cooperator page */
	.hero .logos {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 3rem;
		color: var(--primarycolor);
		font-size: var(--fs-xxl);
	}
	.hero .buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		align-items: center;
		margin-bottom: 2rem;
	}
	.hero .buttons .button {
		width: 350px;
		max-width: 100%;
		text-align: center;
	}

/***********************************************************
17. COLLAGE (HOME PAGE)
************************************************************/
	.collage-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
		grid-auto-rows: 1fr;
		gap: 0.3rem;

		width: 100%;
		height: 100%;
		max-width: 100%;
		padding: 10px;
		box-sizing: border-box;

		overflow: hidden;
	}
	.collage-item {
		min-width: 0;
		min-height: 0;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}
	.collage-item img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}
	.collage-item img:hover {
		transform: scale(1.05);  /* subtiele hoverzoom */
	}

	/* Pagina's met GoogleMap links over de hoogte */
	.page-wrapper {
		position: relative;
		display: flex;
		width: 100%;
		max-width: 1800px;
		margin: 0 auto;
	}
	.left-map {
		flex: 0 0 40%;
	}
	.map-sticky {
		position: sticky;
		top: var(--headerHeight);
		height: calc(100vh - var(--headerHeight));
		width: 100%;
	}
	.map-sticky #GoogleMap {
		width: 100%;
		height: 100%;
	}
	.right-content {
		flex: 1;
		overflow-y: auto;
		height: calc(100vh - (var(--headerHeight) + var(--footerHeight)));
		flex-direction: column;
		padding-left: 1.25rem;
		padding-bottom: 0.6rem;
		padding-right: 0.6rem;
		box-sizing: border-box;
	}

/***********************************************************
18. LAYOUT GOLFCLUBS
************************************************************/
	.golfclubs {
		padding: 10px;
		border: 2px solid #fff;
		overflow: hidden;
	}
	.golfclubs h6 {
		font-size: 0.8rem;
		font-weight: bold;
		text-transform: uppercase;
	}
	.golfclubs-sidebar {
		padding-top: 15px;
		border-top: 2px solid #fff;
	}

	.golfclub-projects {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 15px;
	}
	.property-flex,
	.golfclub-flex {
		display: flex;
		gap: 20px;
		align-items: flex-start;
	}
	.property-features,
	.golfclub-image {
		flex: 0 0 100px;
		width: 110px;
		padding: 15px;
		background-color: var(--backgcWhite);
	}
	.property-features img,
	.golfclub-image img {
		height: 80px;
		width: 80px;
		border-color: 1px solid var(--primarycolor);
	}
	.property-content,
	.golfclub-content {
		flex: 1;
		min-width: 0;
	}
	.golfclub-content .button {
		width: 150px;
		min-width: 150px;
	}
	.golfclub-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
	}
	.golfclub-header h5 {
		margin: 0;
		padding-bottom: 10px;
		color: var(--fontcBlue2);
	}
	.miniCard.golfclub {
		width: 100%;
		max-width: 300px;
		z-index: 1;
	}

	.golfclub-tabs {
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		margin-bottom:30px;
	}
	.golfclub-tab {
		padding: 12px 22px;
		border: 1px solid var(--fourtharybordercolor);
		background: var(--backgcWhite);
		font-size: var(--fs-md);
		cursor: pointer;
		transition: 0.2s;
	}
	.golfclub-tab.active {
		background: var(--backgcBlue);
		color: var(--fontcWhite);
	}

/***********************************************************
19. LAYOUT PROPERTIES - PROPERTY
************************************************************/
	.properties-list h2 {
		font-size: var(--fs-md);
		font-weight: normal;
		margin: 0.5em 0;
		padding: 0;
	}

	.property.row {
		align-items: flex-start;
	}
	.property-content {
		font-size: var(--fs-md);
		color: var(--primaryfontcolor);
		padding: 0 1.25rem 1.25rem;
	}
	.property-content p {
		margin-bottom: 1.5rem;
	}
	.property-content ul,
	.property-content ol {
		margin-bottom: 2rem;
	}
	.property-content li {
		line-height: 1.5;
		margin-left: 1.25rem;
	}
	.property-content .description {
		font-size: var(--fs-lg);
		line-height: 1.5;
		text-align: justify;
		margin-bottom: 2em;
	}
	.property-content .project {
		margin-top: 1.25rem;
	}
	.property-content .project h3 {
		font-size: var(--fs-md);
	}

	.property-sidebar-right {
		position: sticky;
		top: 1rem;
		align-self:flex-start;
		height:max-content;
	}

	/* PROPERTY DETAIL */
	.property-detail,
	.property-detail-container {
		background-color: var(--backgcWhite);
		padding: 0.3rem 0.6rem 0.3rem;
		margin: 0 1.25rem 0.6rem 0;
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
		width: 100%;
	}
	.property-detail.golfclub-characteristics {
		min-height: 170px;
	}
	.property-detail-title,
	.property-detail-container .title {
		font-weight: 600;
		text-align: center;
		line-height: 1.5;
		text-transform: uppercase;
		margin: 0.3rem 0.6rem 0.6rem;
	}

	/* PROPERTY TABLES */
	.table-property-detail > thead > tr > th,
	.table-property-detail > tbody > tr > th,
	.table-property-detail > tfoot > tr > th,
	.table-property-detail > thead > tr > td,
	.table-property-detail > tbody > tr > td,
	.table-property-detail > tfoot > tr > td {
		font-size: var(--fs-md);
		line-height: 1;
		padding: 0.3rem 0.5rem 0.3rem;
	}
	.table-property-detail > thead > tr > th:first-child,
	.table-property-detail > tbody > tr > th:first-child,
	.table-property-detail > tfoot > tr > th:first-child,
	.table-property-detail > thead > tr > td:first-child,
	.table-property-detail > tbody > tr > td:first-child,
	.table-property-detail > tfoot > tr > td:first-child {
		text-align: right;
		font-weight: 300;
	}
	.table-property-detail--first td:first-child {
		width: 33%;
	}
	.table-property-detail--last td:last-child {
		width: 33%;
	}

	/* PROPERTY LABEL */
	.property-label-left,
	.property-label-right {
		position: absolute;
		top: 1%;
		padding: 0.5rem 1rem;
		line-height: 1;
		color: var(--fontcWhite);
		background-color: var(--primarybgcolor);
		font-size: var(--fs-lg);
		text-transform: uppercase;
		font-weight: bold;
	}
	.property-label-left {
		left: 1%;
	}
	.property-label-right {
		right: 4rem;
	}

/***********************************************************
20. CARD
************************************************************/
	.card {
		background-color: var(--backgcWhite);
		border: 1px solid var(--bordercLGrey);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
		min-height: 375px;
	}
	.card .image img {
		max-width: 100%;
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto 0.6rem auto;
		border-radius: var(--br-lg) var(--br-lg) 0 0;
	}
	.card .title {
		text-align: center;
		font-size: var(--fs-lg);
		font-weight: bold;
	}
	.card .content {
		flex: 1;
		padding: 0 0.6rem;
		text-align: justify;
		flex-grow: 1;
	}

/***********************************************************
21. AIRPORT CARD (BASIS IS property-card)
************************************************************/
	.airport-card {
		background-color: var(--backgcWhite);
		border-radius: var(--br-xxl);
		height: auto;
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		border: 1px solid var(--secundarybordercolor);
		cursor: pointer;
	}
	.airport-card img {
		width: 100%;
		height: 240px;
		object-fit: cover;
	}
	.airport-card .info {
		padding: 0;
	}
	.airport-card .info h3 {
		font-size: var(--fs-lg);
		color: var(--primarycolor);
		font-weight: bold;
		text-align: center;
		font-style: italic;
		text-transform: none;
		line-height: 1;
		padding: 0.1rem 1rem 0.5rem;
	}
	.airport-card .two-columns {
		margin: 0 1rem 1rem;
	}
	.airport-card .two-columns li a {
		font-size: var(--fs-sm);
	}

/***********************************************************
22. COSTA CARD
************************************************************/
	.costa-card {
		background-color: var(--backgcWhite);
		border: 1px solid var(--bordercLGrey);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
		min-height: 375px;
	}
	.costa-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-md);
	}
	.costa-card .image img {
		max-width: 100%;
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto 0.6rem auto;
		border-radius: var(--br-lg) var(--br-lg) 0 0;
	}
	.costa-card .title {
		text-align: center;
		font-size: var(--fs-lg);
		font-weight: bold;
	}
	.costa-card .content {
		flex: 1;
		padding: 0 0.6rem;
		text-align: justify;
		flex-grow: 1;
	}
	.costa-card .button {
		margin-top: 0.6rem;
		padding: 0.5rem;
		border-radius: 0 0 var(--br-lg) var(--br-lg);
	}

/***********************************************************
23. PROPERTY CARD
************************************************************/
	.property-card {
		min-height:380px;
		display:flex;
		flex-direction:column;
		overflow: hidden;

		background-color: var(--backgcWhite);
		border: 1px solid var(--bordercLGrey);
		border-radius: var(--br-xxl);

		box-shadow: var(--shadow-sm);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		cursor: pointer;
	}
	.property-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-md);
	}
	.property-card img {
		width: 100%;
		height: 240px;
		object-fit: cover;
		object-position:center;
		flex-shrink:0;
	}
	.property-card .info {
		color: var(--primarycolor);
		padding: 0;

		display:flex;
		flex-direction:column;
		flex:1;
	}
	.property-card .info h3 {
		font-size: var(--fs-md);
		color: var(--primarycolor);
		font-weight: bold;
		text-align: center;
		font-style: italic;
		text-transform: none;
		line-height: 1;
		padding: 0.3rem;
		margin: 0 0 0.3rem;
	}
	.property-card span {
		margin: 0;						/* Was 0.25rem 0 */
		font-size: var(--fs-sm);
	}
	.property-card p {
		margin: 0.25rem 0;
		font-size: var(--fs-sm);
		color: var(--fontcSoftgrey);
	}
	.property-card .reference {
		text-align: center;
	}
	.property-card .details_div {
		text-align: center;
	}
	.property-card .price_div {
		text-align: center;
		padding: 0.5rem;
	}
	.property-card .price {
		font-size: var(--fs-md);
		font-weight: 600;
		text-align: center;
		color: var(--primarycolor);
	}
	.property-card .label_below {
		position: absolute; 
		bottom: 0.3rem; 
		left: 0; 
		width: 100%; 
		text-align: center; 
		text-transform: uppercase; 
		font-weight: bold;
	}

	/* PROPERTY CARD - GOLFRESORT */
	.property-card.golfresort .info h3 {
		font-size: var(--fs-lg);
	}
	.property-card.golfresort .price {
		font-size: var(--fs-lg);
	}

	/* PROPERTY CARD - LUXURY */
	.property-card.luxury {
		min-height:650px;
		display:flex;
		flex-direction:column;
		overflow: hidden;

		color: var(--fontcLuxury);
		background-color: var(--backgcWhite);
		border-radius: var(--br-xxl);
		border: 1px solid var(--thirdarycolor);
		cursor: pointer;

		box-shadow: var(--shadow-sm);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}
	.property-card.luxury:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-md);
	}
	.property-card.luxury img {
		width: 100%;
		height: 340px;
		flex-shrink:0;
		object-fit: cover;
	}
	.property-card.luxury .info {
		font-size: var(--fs-xl);
	}
	.property-card.luxury h4 {
		margin: 0.3rem;
		font-size: var(--fs-xl);
		color: var(--fontcLuxury);
		font-weight: 600;
	}
	.property-card.luxury .features {
		padding-left: 1.25rem;
	}
	.property-card.luxury p {
		margin: 0.25rem 0;
		font-size: var(--fs-md);
		color: var(--fontcLuxury);
	}
	.property-card.luxury .metadesc {
		color: var(--fontcLuxury);
	}
	.property-card.luxury .price {
		margin-top: 2rem;
		font-size: var(--fs-xl);
		font-weight: 600;
		text-align: center;
	}

/* Image wrapper */
	.image-wrapper {
		position: relative;
	}
	.image-wrapper img {
		width: 100%;
		display: block;
		border-radius: var(--br-xxl) var(--br-xxl) 0 0;
	}

/* Image labels */
	.img-labels-left, 
	.image-labels-right {
		position: absolute;
		top: 0.6rem;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	.img-labels-left {
		left: 0.6rem;
	}
	.img-labels-right {
		right: 0.6rem;
	}
	.img-labels-left span,
	.img-labels-right span {
		display: block;
		margin-top: 0;
	}
	.img-label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 0;
		color: var(--fontcWhite);
		background-color: var(--primarybgcolor);
		text-transform: uppercase;
		font-weight: bold;
		white-space: nowrap;
		border-radius: var(--br-xxxl);
	}
	.img-label.md {
		padding: 0.5rem 1rem;
		line-height: 1;
		font-size: var(--fs-md);
	}
	.img-label.lg {
		padding: 0.5rem 1rem;
		line-height: 1.5;
		font-size: var(--fs-xl);
	}
	.status-label {
		position: absolute;
		top: 0.75rem;
		left: 0.75rem;
		color: var(--fontcWhite);
		padding: 0.25rem 0.6rem;
		font-size: var(--fs-sm);
		font-weight: 600;
		border-radius: var(--br-sm);
		text-transform: uppercase;
		letter-spacing: 0.3rem;
	}
	.status-label.new_build { background-color: var(--backgcNewbuild); }
	.status-label.verkocht { background-color: var(--backgcNew); }
	.status-label.new { background-color: var(--backgcPrijsverlaging); }
	.status-label.prijsverlaging { background-color: var(--backgcTopper); }
	.status-label.top-property { background-color: var(--backgcAlert); }

/***********************************************************
24. PHOTO
************************************************************/
	.photo-section {
		position: relative;
		width: 80%;
		aspect-ratio: 16/9;
		margin: 0.6rem auto;
		overflow: hidden;
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
	}
	.photo-section img {
		display: block;
	}
	.rounded-image {
		border-radius: 50%;
		border: 1px solid var(--backgcLuxury2);
		padding: 3px;
		display: block;
		float: left;
		width: 100px;
		height: 100px;
		object-fit: cover;
		margin:0 1.25rem 1.25rem;
		opacity: 0.8;
		box-shadow: 0 4px 10px rgb(241, 236, 236);
	}
	.rounded-image-lg {
		border-radius: 50%;
		width: 200px;
		height: 200px;
		opacity: 0.8;
		box-shadow: var(--shadow-sm);
	}
	.rounded-image-lg:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-md);
	}

/***********************************************************
25. PAGINATION
************************************************************/
	.pagination,
	.pagination li { 
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		list-style: none;
		margin: 0;
	}
	.pagination li { 
		font-size: var(--fs-sm);
		color: var(--primaryfontcolor);
		background-color: var(--thirdarybgcolor);
		font-weight: 300;
		padding-top: 0.1rem;
		border: 1px solid rgba(0, 0, 0, 0.25);
		border-left-width: 0;
		min-width: 2rem;
		min-height: 2rem;
		box-shadow: var(--shadow-sm);
		user-select: none;
	}
	.pagination li:first-of-type {
		border-left-width: 1px;
	}
	.pagination li.current { 
		color: var(--fontcWhite);
		font-weight: bold;
		background-color: var(--primarybgcolor);
		box-shadow: var(--shadow-sm);
		cursor: default;
		pointer-events: none;
	}
	.pagination li:hover { 
		background-color: rgba(255, 255, 255, 0.2);
		border-top-color: rgba(0, 0, 0, 0.35);
		border-bottom-color: rgba(0, 0, 0, 0.5);
	}

	.pagination.luxury {
		font-size: var(--fs-lg);
	}
	.pagination.luxury .current {
		background: var(--backgcLuxury2);
		color: var(--fontcWhite);
		font-weight: 600;
		box-shadow: var(--shadow-sm);
		cursor: default;
	}
	.pagination.luxury .prev,
	.pagination.luxury .next {
		font-size: var(--fs-lg);
		padding: 0;
	}
	.pagination.luxury .dots {
		padding: 0 0.5rem;
		color: var(--secundarycolor);
	}


/***********************************************************
26. LAYOUT PROMO
************************************************************/
	.promo-hero {
		position: relative;
		min-height: 75vh;
		display: flex;
		align-items: center;
		background-image: url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=2000');
		background-size: cover;
		background-position: center;
		color: var(--fontcWhite);
	}
	.promo-hero-overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
	}
	.promo-hero-content {
		position: relative;
		z-index: 2;
		max-width: 700px;
		padding: 5rem 0;
	}
	.promo-label {
		display: inline-block;
		padding: 0.4rem 1rem;
		background: rgba(255,255,255,0.15);
		backdrop-filter: blur(10px);
		border-radius: var(--br-xxxl);
		margin-bottom: 1rem;
		font-size: 0.9rem;
	}
	.promo-hero h1 {
		font-size: clamp(2.5rem, 6vw, 5rem);
		line-height: 1.05;
		margin-bottom: 1.5rem;
	}
	.promo-subtitle {
		font-size: 1.2rem;
		line-height: 1.7;
		margin-bottom: 2rem;
		max-width: 600px;
	}
	.promo-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}
	.promo-featured {
		padding: 6rem 0;
	}
	.promo-featured-grid {
		display: grid;
		grid-template-columns: 2.5fr 1fr;
		gap: 4rem;
		align-items: center;
	}
	.promo-featured-image {
		position: relative;
		border-radius: var(--br-lg);
		overflow: hidden;
	}
	.promo-featured-image img {
		display: block;
	}
	.promo-badge {
		position: absolute;
		top: 1rem;
		left: 1rem;
		z-index: 2;
		color: var(--fontcWhite);
		background-color: var(--backgcOpportunity);
		text-transform: uppercase;
		font-weight: bold;
		padding: 0.5rem 1rem;
		border-radius: var(--br-xxxl);
	}
	.promo-category {
		font-size: var(--fs-lg);
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		margin: 1rem;
	}
	.promo-title {
		padding: 5px 20px;
		line-height: 1.8;
		color: var(--fontcWhite);
		font-weight: bold;
		text-align: center;
		background-color: var(--backgcOpportunity);
		border-radius: var(--br-xxl);
	}
	.promo-title.lg {
		font-size: var(--fs-lg);
	}
	.promo-title.md {
		font-size: var(--fs-md);
	}
	.promo-description {
		line-height: 1.8;
		padding: 5px 10px;
		margin-bottom: 2rem;
	}
	.promo-pricing {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		margin-bottom: 1rem;
	}
	.promo-old-price {
		text-decoration: line-through;
		opacity: 0.5;
		font-size: 1.2rem;
	}
	.promo-new-price {
		font-size: 2rem;
		font-weight: 700;
		color: var(--fontcOpportunity);
	}
	.promo-saving {
		text-align: center;
		font-weight: 600;
		margin-bottom: 2rem;
	}
	.promo-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		align-items: center;
	}
	.promo-buttons .button {
		width: 420px;
		max-width: 100%;
		text-align: center;
	}
	.promo-section-header {
		margin-bottom: 3rem;
		text-align: center;
	}
	.promo-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(420px,100%), 1fr));
		gap: 2rem;
	}
	.promo-grid-section {
		padding-bottom: 6rem;
	}
	.promo-card {
		background: var(--backgcWhite);
		border-radius: var(--br-lg);
		overflow: hidden;
		box-shadow: var(--shadow-lg);
		transition: transform 0.3s ease;
	}
	.promo-card:hover {
		transform: translateY(-5px);
	}
	.promo-card-image {
		position: relative;
	}
	.promo-card-image img {
		width: 100%;
		height: 260px;
		object-fit: cover;
		display: block;
	}
	.promo-card-content {
		padding: 0 2rem 2rem;
	}
	.promo-card-info {
		display: inline-block;
		font-size: 0.9rem;
		margin-left: 20px;
		margin-bottom: 0.8rem;
		font-weight: 600;
		opacity: 0.7;
	}

/***********************************************************
27. SEARCH CONTAINER
************************************************************/
	.search-container {
		position: absolute;
		z-index: 10;

		left: 50%;
		bottom: 2rem;

		max-height:80vh;
		overflow:auto;

		width: min(1400px, 90%);

		display: flex;
		flex-wrap: wrap;
		gap: 15px;

		padding: 20px;

		background-color: var(--backgcWhite);
		backdrop-filter: blur(10px);

		border-radius: var(--br-xxl);
		box-shadow: var(--shadow-md);
		transform: translateX(-50%);
	}
	.search-item{
		flex:1 1 180px;
		min-width:180px;
		max-width:200px;
	}

	.search-item input,
	.search-item select {
		width:100%;
		height:35px;
		padding:0 5px;
		border:1px solid #ddd;
		border-radius: var(--br-md);
	}
	.search-button {
		flex:0 0 auto;
	}
	.search-button .button {
		height:35px;
		padding: 0 30px;
		display:flex;
		align-items:center;
		justify-content:center;
		white-space:nowrap;
		cursor:pointer;
	}
	.search-container2 {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
	    align-items: flex-start;
		padding: 0.6rem 0.6rem 0.3rem;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-sm);
	}
	.search-fields {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
	}
	.search-fields .search-item {
		flex: 0 0 15%;
		min-width: 100px;
	}

	.search-container2 .button-container {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-self: flex-start;
	}
	.search_field {
		height: 2.5rem;
	}
	.search-container2 > div:last-child {
		margin-left: auto;
	}
	.search-container2 input[type="text"],
	.search-container2 input[type="number"],
	.search-container2 input[type="email"],
	.search-container2 textarea,
	.search-container2 select {
		font-size: var(--fs-sm);
		padding: 0.1rem 0.3rem;
	}
	.search-container2 .button {
		font-size: var(--fs-sm);
		float: right;
	}

/***********************************************************
28. SIDEBAR LEFT
************************************************************/
	.sidebar {
		position: sticky;
		top: var(--headerHeight);
		max-width: var(--mw-sm);
		height: auto;
		max-height: calc(100vh - var(--headerHeight));
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		background-color: var(--thirdarybgcolor);
		border-right: 1px solid var(--secundarybordercolor);
		padding: 1rem;
		box-sizing: border-box;
	}
	.sidebar::-webkit-scrollbar {
		width: 6px;
	}
	.sidebar::-webkit-scrollbar-thumb {
		background-color: var(--thirdarybgcolor);
		border-radius: var(--br-sm);
	}
	.sidebar::-webkit-scrollbar-thumb:hover {
		background-color: var(--secundarybgcolor);
	}

	/* Categories */
	.sidebar .categories-wrapper {
		flex: 1;
		overflow-y: auto;
		padding-right: 0.25rem;
	}
	.categories {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.categories li {
		margin-bottom: 0.1rem;
	}
	.categories a {
		color: var(--fourtharycolor);
		display: block;
		padding: 0.4rem 0.6rem;
		transition: background-color 0.2s;
		white-space: normal;
		word-break: break-word;
		max-width: 100%;
		box-sizing: border-box;
	}
	.categories a:hover {
		color: var(--fontcWhite);
		background-color: var(--backgrBlueHovered);
	}
	.categories li.active {
		background-color: var(--backgrBlue2);
		font-weight: 600;
	}
	.categories li.active a {
		color: var(--fontcWhite);
	}

/***********************************************************
29. SIDEBAR LEFT - NIEUWSBRIEF SUBSCRIPTION
************************************************************/
	.newsletter {
		border-top: 1px solid var(--secundarybordercolor);
		padding-top: 1rem;
		margin-top: 1rem;
		flex-shrink: 0;
	}
	.newsletter h4 {
		margin: 0 0 0.5rem 0;
		font-size: var(--fs-md);
	}
	.newsletter input[type="email"] {
		width: 100%;
		padding: 0.4rem;
		margin-bottom: 0.5rem;
		border: 1px solid var(--thirdarycolor);
		border-radius: var(--br-sm);
		box-sizing: border-box;
	}
	.newsletter button {
		width: 100%;
		padding: 0.5rem;
		border: none;
		border-radius: var(--br-sm);
		background-color: var(--backgrBlue2);
		color: var(--fontcWhite);
		cursor: pointer;
		transition: background-color 0.2s;
	}
	.newsletter button:hover {
		background-color: var(--backgrBlueHovered);
	}

/***********************************************************
30. SIDEBAR RIGHT - MEEST GELEZEN, GOLFCLUB
************************************************************/
	.sidebar-right {
		position: sticky;
		top: 120px;
		align-self: start;
		background-color: var(--thirdarybgcolor);
		border-left: 1px solid var(--secundarybordercolor);
		padding: 1rem 1.5rem;
		border-radius: var(--br-lg);
		max-height: calc(100vh - 140px);
		overflow-y: auto; /* scrollen als er veel items zijn */
	}
	.sidebar-right::-webkit-scrollbar {
		width: 6px;
	}
	.sidebar-right::-webkit-scrollbar-thumb {
		background-color: var(--thirdarybgcolor);
		border-radius: var(--br-sm);
	}
	.sidebar-right::-webkit-scrollbar-thumb:hover {
		background-color: var(--secundarybgcolor);
	}
	.sidebar-right h2 {
		margin-top: 0;
		font-size: var(--fs-lg);
		position: sticky;
		top: 0;
		background: var(--thirdarybgcolor);
		padding-bottom: 0.5rem;
		z-index: 1;
	}
	.sidebar-right #GoogleMap {
		width: 100%;
		height: 150px;
		position: relative;
		overflow: hidden;
	}

	.popular {
		margin-top: 1.25rem;
	}
	.popular-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.popular-list li {
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
	}
	.popular-list li a {
		display: flex;
		align-items: center;
		color: var(--primarycolor);
		gap: 0.75rem;
		transition: color 0.2s;
	}
	.popular-list li a:hover {
		color: var(--fontcWhiteHovered);
	}
	.popular-list img {
		width: 60px;
		height: 60px;
		object-fit: cover;
		border-radius: var(--br-md);
	}


/***********************************************************
31. GRID
************************************************************/
	/* Zit dit nog ergens anders in dan in 'over ons'? */
	.field-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* Was vooraleer frontend_cooperator gemaakt: 280px */
		gap: 1.25rem; 
	}
	.field-group .field {
		display: flex;
		margin-top: 2rem;
	}
	.field-group .field h2 {
		font-size: var(--fs-lg);
	}
	.field-group .field .card {
		width: 100%;
		height: 100%;
		
		font-size: var(--fs-md);
		text-align: left;
		line-height: 1.5;
		padding: 1.25rem;
		background-color: var(--backgcWhite);
		border: 1px solid var(--bordercLGrey);
		border-radius: var(--br-lg);
		box-shadow: var(--shadow-md);

		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.field-group .field .card .icon {
		text-align: center;
	}
	.field-group .field .card .icon img {
		width: 80px;
		height: 80px;
	}
/*	.field-group .field-grid .field .card .title,*/
	.field-group .field .card .title {
	/*	display: flex;*/
		text-align: center;
		font-weight: 600;
	}
	.field-group .field .card .content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.field-group .field .card .content h5 {
		font-size: 1.1rem;
		text-align: center;
		text-transform: uppercase;
 		margin-bottom: 1rem;
	}
	.field-group .field .card .buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin-top: auto;
	}
	.field-group .field .card .buttons .button {
		width: 100%;
		max-width: 350px;
	}
	.field-group .field .card .rounded-image {
		float: left;
		margin: 0 1.25rem 1.25rem 0;
	}
	.field-group .radio-group {
		display: flex;
		flex-direction: column;
	}


	/* Form grid */
	.form-grid-large {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
		gap: 1.25rem; 
		align-items: stretch;
	}
	.form-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 1.25rem; 
		align-items: stretch;
	}
	/*
	.form-grid {
		grid-template-columns: 1fr;
	}
	*/

	.property-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		gap: 1.25rem;
		margin: 0.6rem auto 1.25rem;
		align-items:stretch;
	}
	.property-grid.large,
	.property-grid.luxury {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(420px,100%), 1fr));
		gap: 3rem;
		margin: 0.6rem auto 1.25rem;
	}

	/* Grid - Photos (home page) */
	.photo-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* 4 kolommen */
		grid-auto-rows: 200px; /* basis-rijhoogte */
		gap: 0.6rem;
	}

	.item {
		position: relative;
		overflow: hidden;
		border-radius: var(--br-lg);
	}

	/* Verschillende formaten */
	.item1 {
		grid-column: span 2;
		grid-row: span 2;
	}

	.item2 {
		grid-column: span 2;
		grid-row: span 1;
	}

	.item3 {
		grid-column: span 1;
		grid-row: span 1;
	}

	.item4 {
		grid-column: span 1;
		grid-row: span 2;
	}

	.item5 {
		grid-column: span 2;
		grid-row: span 1;
	}

	.item6 {
		grid-column: span 1;
		grid-row: span 1;
	}

	.caption {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		color: var(--fontcWhite);
		text-align: center;
		padding: 0.5rem 0;
		font-size: var(--fs-md);
		font-weight: 500;
		opacity: 1;
		transition: background 0.3s ease, opacity 0.3s ease;
	}

	.item:hover img {
		transform: scale(1.05);
	}
	.item:hover .caption {
		background: rgba(0, 0, 0, 0.7);
	}

/***********************************************************
32. MOBILE CATEGORIES
************************************************************/
	.mobile-categories {
		display: none;
	}

/***********************************************************
33. MODALS
************************************************************/
	.modal-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.6);
		display: none;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}
	.modal-overlay.active {
		display: flex;
	}
	.modal {
		position: fixed;
		z-index: 9999;
		left: 0; top: 0;
		width: 100%; height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.5);
	}
	.modal-content {
		width: 90%;
		max-width: 500px;
		background-color: var(--backgcWhite);
		margin: 10% auto;
		padding: 1rem;
		border-radius: var(--br-lg);
		position: relative;
	}
	.modal-inner {
		width: 100%;
		max-width: 620px;
		max-height: 100vh;
		background: var(--backgcWhite);
		margin: 0;
		overflow-y: auto;
		position: relative;
	}

/***********************************************************
34. SWEET ALERT
************************************************************/
	/* popup container */
	.swal-custom {
		border-radius: var(--br-xxl);
		padding: 2rem;
		font-family: inherit;
		box-shadow: var(--shadow-md);
	}
	.swal-title {
		color: var(--primarycolor);
		font-size: var(--fs-lg);
		font-weight: 600;
	}
	.swal-button {
		background-color: var(--backgcBlue) !important;
		color: var(--fontcWhite) !important;
		border-radius: var(--br-lg) !important;
		padding: 0.6rem 1.5rem !important;
		font-size: var(--fs-sm);
		border: none !important;
		transition: all 0.2s ease;
	}
	.swal-button:hover {
		background-color: var(--backgrBlueHovered) !important;
		transform: translateY(-1px);
	}
	.swal-button:focus {
		outline: none !important;
		box-shadow: none !important;
	}

/***********************************************************
35. TABLES
************************************************************/
	/* TABLE BORDERED */
	.table-bordered {
		width: 100%;
		max-width: 100%;
		margin-bottom: 1rem;
		border-collapse: collapse;
		border: 1px solid var(--primarybordercolor);
	}
	.table-bordered > thead {
		background-color: var(--secundarybgcolor);
	}
	.table-bordered > thead tr > th {
		border: 1px solid var(--primarybordercolor);
		font-size: var(--fs-md);
		font-weight: 300;
		color: var(--fontcWhite);
	}
	.table-bordered > thead > tr > th,
	.table-bordered > tbody > tr > th,
	.table-bordered > tfoot > tr > th,
	.table-bordered > thead > tr > td,
	.table-bordered > tbody > tr > td,
	.table-bordered > tfoot > tr > td {
		padding: 0.3rem;
		text-align: left;
		border: 1px solid var(--primarybordercolor);
	}
	.table-bordered > tbody > tr > td > a {
		color: var(--primarycolor);
	}

	/* TABLE STRIPED */
	.table-striped {
		width: 100%;
		max-width: 100%;
		margin-bottom: 1.5rem;
		border-collapse: collapse;
		border: 1px solid var(--primarybordercolor);
	}
	.table-striped > thead {
		background-color: var(--secundarybgcolor);
	}
	.table-striped > thead tr > th {
		border: 1px solid var(--primarybordercolor);
		font-size: var(--fs-md);
		font-weight: 300;
		color: var(--fontcWhite);
	}
	.table-striped > thead > tr > th,
	.table-striped > tbody > tr > th,
	.table-striped > tfoot > tr > th,
	.table-striped > thead > tr > td,
	.table-striped > tbody > tr > td,
	.table-striped > tfoot > tr > td {
		padding: 0.3rem;
		text-align: left;
		border: 1px solid var(--primarybordercolor);
	}
	.table-striped > tbody > tr > td > a {
		color: var(--primarycolor);
	}
	.table-striped > tbody > tr:nth-child(odd) > td {
		background-color: var(--thirdarybgcolor);
	}
	.table-striped > tbody > tr:nth-child(even) > td {
		background-color: var(--backgcWhite);
	}

/***********************************************************
36. GALLERY
************************************************************/
    /* CSS VOOR MPM-GALLERY */
    /* GALLERY */
        .gallery {
    	    margin-top:4px;
        }

    /* IMAGES */
        .gallery .gallery_images {
            position: relative;
            width:100%;
            height:75vh; 
        }
        .gallery .gallery_images .image {
            display: none;
            width: 100%;
            height: 100%;
        }

        .gallery .gallery_images .image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    /* IMAGE LABELS */
        .gallery .gallery_images .image-label-left,
        .gallery .gallery_images .image-label-right {
            position: absolute;
            top: 1%;
            padding: 8px 15px;
            line-height: 1;
            color: #fff;
            background-color: var(--primarybgcolor);
            font-size: 2em;
            text-transform: uppercase;
            font-weight: bold;
        }
        .gallery .gallery_images .image-label-left {
			left: 1%;
        }
        .gallery .gallery_images .image-label-right {
			right: 1%;
        }

    /* IMAGES NEXT/PREV */
        .gallery .gallery_images .gallery-prev,
        .gallery .gallery_images .gallery-next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			padding: 16px;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.5);
			font-weight: bold;
			font-size: 30px;
			border-radius: 0 3px 3px 0;
			user-select: none;
			-webkit-user-select: none;
        }
        .gallery .gallery_images .gallery-next {
			right: 0px;
			border-radius: 3px 0 0 3px;
        }
        .gallery .gallery_images .gallery-prev:before {
			content: "\f104";
			position: relative;
			display: inline-block;
			font-family: "FontAwesome";
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			text-decoration: inherit;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			padding-right: 5px;
			opacity: 0.5;
			filter: alpha(opacity=50);
		}
        .gallery .gallery_images .gallery-next:before {
			content: "\f105";
			position: relative;
			display: inline-block;
			font-family: "FontAwesome";
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			text-decoration: inherit;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			padding-right: 5px;
			opacity: 0.5;
			filter: alpha(opacity=50);
        }
        .gallery .gallery_images .gallery-prev:hover,
        .gallery .gallery_images .gallery-next:hover {
			color: var(--thirdarycolor);
			background-color: rgba(0, 0, 0, 0.8);
        }

    /* MARQUEE */
        .gallery .gallery_marquee {
			margin:5px 0px;
        }

    /* THUMBNAILS */
		/*
		.gallery_thumbnails ul {
		display: flex;
		flex-wrap: nowrap; /* Zorgt dat ze niet op meerdere lijnen gaan */
		/* overflow-x: auto; /* Optioneel: maakt het scrollbaar als te breed */
		/*  padding: 0;
		margin: 0;
		list-style: none;
		}
		.gallery_thumbnails li {
		flex: 0 0 auto; /* Zorgt dat elke thumbnail zijn eigen breedte behoudt */
		/*  margin-right: 10px; /* ruimte tussen thumbnails, aanpassen naar wens */
		/*}
		*/

        .gallery .gallery_thumbnails {
			padding: 10px;
			background: var(--thirdarybgcolor);
			clear: both;
			overflow: hidden;
			position: relative;
        }
        .gallery .gallery_thumbnails ul {
			display: flex;
			flex-wrap: nowrap; /* Zorgt dat ze niet op meerdere lijnen gaan */
			overflow-x: auto; /* Optioneel: maakt het scrollbaar als te breed */
			padding: 0;
			margin: 0;
			list-style: none;
        }
        .gallery .gallery_thumbnails ul:before,
        .gallery .gallery_thumbnails ul:after {
			content: " ";
			/* display: block; */
		}
        .gallery .gallery_thumbnails ul:after {
	        clear: both;
        }
        .gallery .gallery_thumbnails ul li {
			float: left; 
			margin: 0 1px;
			max-width: 152px;                 /* was 190px */
			overflow: hidden;
        }
        .gallery .gallery_thumbnails ul li img {
			width: 100%;
			height: 110px;
			opacity: 0.6;
        }
        .gallery .gallery_thumbnails .gallery_thumbnail:hover {
			opacity: 1;
			cursor: pointer;
		}
        .gallery .gallery_thumbnails .active_thumbnail {
			opacity: 1;
			/*  border: 2px solid var(--fourtharybordercolor);*/
        }

    /* THUMBNAILS NEXT/PREV */
        .gallery .gallery_thumbnails .caroufredsel-next,
        .gallery .gallery_thumbnails .caroufredsel-prev {
			position: absolute;
			top: 50%;
			-webkit-transform: translate(0, -50%);
			-ms-transform: translate(0, -50%);
			-o-transform: translate(0, -50%);
			transform: translate(0, -50%);
			color: #fff;
			background-color: rgba(0, 0, 0, 0.5);
			-webkit-transition: all 0.3s ease-out 0s;
			-o-transition: all 0.3s ease-out 0s;
			transition: all 0.3s ease-out 0s;
			width: 30px;
			height: 40px;
			line-height: 40px;
			padding: 8px 0px;
			font-size: 1.5em;
			text-align: center;
			z-index: 100;
        }
        .gallery .gallery_thumbnails .caroufredsel-next:hover,
        .gallery .gallery_thumbnails .caroufredsel-prev:hover {
	        background-color: rgba(0, 0, 0, 0.8) !important;
        }
        .gallery .gallery_thumbnails .caroufredsel-next.disabled,
        .gallery .gallery_thumbnails .caroufredsel-prev.disabled {
 	       display: none !important;
        }
        .gallery .gallery_thumbnails .caroufredsel-prev {
			left: -35px;
			-webkit-border-radius: 3px;
			border-radius: 0 3px 3px 0;
        }
        .gallery .gallery_thumbnails .caroufredsel-prev:before {
			content: "\f104";
			position: relative;
			display: inline-block;
			font-family: "FontAwesome";
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			text-decoration: inherit;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			padding-right: 5px;
			opacity: 0.5;
			filter: alpha(opacity=50);
        }
        .gallery .gallery_thumbnails .caroufredsel-next {
			right: -35px;
			-webkit-border-radius: 3px;
			border-radius: 3px 0 0 3px;
        }
        .gallery .gallery_thumbnails .caroufredsel-next:before {
			content: "\f105";
			position: relative;
			display: inline-block;
			font-family: "FontAwesome";
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			text-decoration: inherit;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			padding-right: 5px;
			opacity: 0.5;
			filter: alpha(opacity=50);
        }
        .gallery .gallery_thumbnails:hover > .caroufredsel-prev {
	        left: 0px !important;
        }
        .gallery .gallery_thumbnails:hover > .caroufredsel-next {
			right: 0px !important;
        }

/***********************************************************
37. HEADER
************************************************************/
	/* ================= HEADER ================= */
	.nav-backend-header {
		position: sticky;
		top: 0;
		width: 100%;
		height: var(--headerHeight);
		background-color: var(--clr-bg-header);
		color: var(--clr-font);

		display: flex;
		align-items: center;

		z-index: 1000;
	}

	/* ================= LAYOUT ================= */
	.nav-container {
		width: 100%;
		padding-right: 2rem;
		display: flex;
		align-items: center;
	}
	.nav-favicon {
		height: var(--headerHeight);
		width: var(--headerHeight);
	}
	.space-menu-container {
		display: none;
		flex: 1;
		height: var(--headerHeight);
	}
	.nav-btn-container {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		height: var(--headerHeight);
	}
	.nav-links {
		display: flex;
		flex: 2;
		align-items: center;
		white-space: nowrap;
	}

	/* BELANGRIJK: maar één UL styling */
	.nav-links > ul {
		display: flex;
		flex: 1;
		margin: 0;
		padding: 0.6rem 1rem;
		list-style: none;
	}

	/* ================= TOP LEVEL ITEMS ================= */
	.nav-link {
		position: relative;
	}
	.nav-link > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--headerHeight);
		padding: 0 0.8rem;
		font-size: var(--fs-md);
		color: var(--clr-font);
		transition: background-color .2s ease;
	}
	.nav-link:hover > a {
		background-color: var(--clr-nav-bg-hover);
		color: var(--clr-nav-font-hover);
	}

	/* ================= DROPDOWN BASE ================= */
	.dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 200px;

		background-color: var(--clr-dropdown);

		list-style: none;

		margin: 0;
		padding: 0;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transition: opacity .2s ease, visibility .2s ease;
	}
	.nav-link:hover > .dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ================= DROPDOWN ITEMS ================= */
	.dropdown-link {
		position: relative;
	}
	.dropdown-link > a {
		display: flex;
		align-items: center;
		gap: 10px;

		padding: 0.6rem 1rem;
		color: var(--clr-font);
		background-color: var(--clr-bg-header);

		transition: background-color .2s ease;
	}
	.dropdown-link:hover > a {
		background-color: var(--clr-nav-bg-hover);
		color: var(--clr-nav-font-hover);
	}

	/* divider */
	.divider {
		height: 1px;
		background-color: #ccc;
	}

	/* ================= SECOND / THIRD LEVEL ================= */
	/* tweede niveau */
	.dropdown .dropdown {
		position: absolute;
		top: 0;
		left: 100%;
		min-width: 220px;

		background-color: var(--clr-dropdown-hov);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	/* derde niveau idem */
	.dropdown .dropdown .dropdown {
		left: 100%;
		top: 0;
	}
	/* hover open submenu */
	.dropdown-link:hover > .dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ================= ICONS ================= */
	.nav-link i,
	.dropdown-link i {
		width: 20px;
		text-align: center;
	}
	.nav-links-container .menu-favorite-icon {
		font-family: Arial, sans-serif;
		font-size: 14px;
	}

	/* ================= LOGO / BUTTONS ================= */
	.logo-container {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		font-size: var(--fs-lg);
		font-weight: bold;
	}
	.logout-menu-container{
		flex: 0 0 auto;
		margin-left: auto;
	}
	.logo-anchor,
	.logout-anchor {
		display: flex;
		align-items: center;
		color: var(--clr-font);
	}
	.logo-anchor img {
		width: 30px;
		height: 30px;
		margin: 5px;
	}
	.hamburger-menu-container {
		display: none;
		align-items: center;
		justify-content: flex-end;
		height: var(--headerHeight);
		margin-right: 10px;
	}
	.hamburger-menu {
		display: flex;
		flex-direction: column;
		width: 3rem;
		height: 2rem;
		background: transparent;
		border: none;
		justify-content: space-between;
		padding: 0.25rem;
		cursor: pointer;
	}
	.hamburger-menu span {
		display: block;
		height: 3px;
		width: 100%;
		background-color: var(--clr-font);
		border-radius: 3px;
		transition: all 0.3s ease;
	}

	.site-name {
		display: flex;
		align-items: center;
		padding-left: 0.8rem;
	}

	.nav-container #check {
		position: absolute;
		top: 50%;
		right: 1.5rem;
		transform: translateY(-50%);
		width: 2.5rem;
		height: 2.5rem;
		z-index: 90000;
		cursor: pointer;
		opacity: 0;
		display: none;
	}

	.nav-container #check:checked ~ .hamburger-menu-container .hamburger-menu span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.nav-container #check:checked ~ .hamburger-menu-container .hamburger-menu span:nth-child(2) {
		opacity: 0;
	}

	.nav-container#check:checked ~ .hamburger-menu-container .hamburger-menu span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	@keyframes animation {
		from {
			opacity: 0;
			transform: translateY(15px);
		}
		to {
			opacity: 1;
			transform: translateY(0px);
		}
	}

/***********************************************************
38. FOOTER
************************************************************/
	.footer {
		width: 100%;
		max-width: 1800px;
		margin:0 auto;
	}
	.footer-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
	.footer-left {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}
	.footer-left-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
	.footer-right {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}
	.footer_content {
		display: block;
		font-size: var(--fs-md);
		line-height: 1.5;
		color: var(--fontcWhite);
		background-color: var(--backgcBlue) !important;
	}
	.footer_content h3 {
		margin-top: 0;
	}
	.footer_content_title {
 		font-size: var(--fs-md) !important;
		font-weight: bold;
		text-align: center;
	}
	.footer_content_text {
		font-style: normal;
		padding: 0 1.25rem 0.6rem;
	}
	.footer_links {
		color: var(--fontcWhite);
		text-align: center;
		padding-bottom: 0.6rem;
	}
	.footer_content_text > a {
		color: var(--fontcWhite);
    	font-style: italic;
	}
	.footer_contact > a,
	.footer_links > a {
		color: var(--fontcWhite);
		white-space: nowrap;
    }
	.footer_contact > a:hover,
	.footer_contact > a:focus,
	.footer_content_text > a:hover,
	.footer_content_text > a:focus,
 	.footer_links > a:hover,
	.footer_links > a:focus {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		color: var(--fontcWhiteHovered);
	}
	.footer_middle {
		font-style: normal;
		padding: 0 2rem;
	}
	.footer_bottom {
		font-size: var(--fs-sm);
		text-align: center;
	}

/***********************************************************
39. RESPONSIVE
************************************************************/
	/* Touch devices: hover-effecten ook zichtbaar bij focus/tap */
	@media (hover: none) {
		.related-item {
			transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
		}
		.related-item:active,
		.related-item:focus {
			transform: translateY(-3px);
			box-shadow: var(--shadow-md);
			background-color: var(--pageBgcolor);
		}
		.related-item:active img,
		.related-item:focus img {
			transform: scale(1.03);
		}
		.related-item:active h3,
		.related-item:focus h3 {
			color: var(--primarycolor);
		}
	}

	@media (max-width: 1500px) {
		.nav-contact {
			display: none;
		}
	}
	@media (max-width: 1200px) {
		.logo-container {
			display: none;
		}
	}

	/* kleine laptop / landscape tablet */
	@media (max-width: 1024px) {
		.news-category-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* klassiek Bootstrap-breakpoint */
	@media (max-width: 992px) {
		.header-part {
			display: flex;
			flex-direction: column;
			width: 100%;
		}
		.header-part img {
			width: 100%;
			object-fit: cover;
		}
		.header-part:has(.search-container) > img {
			height: 220px;
		}

		.header-overlay {
			position: absolute;
			top: 1rem;
			left: 5%;
			transform: none;
			width: 90%;
			padding: 10px;
			box-sizing: border-box;
		}

		.header-title-container,
		.header-subtitle {
			width: 100%;
		}
		.header-title-container h1,
		.header-subtitle {
			font-size: var(--fs-md);
		}

		.search-container,
		.search-container2 {
			position: static;
			left: auto;
			right: auto;
			transform: none;

			width: 100%;
			max-width: 100%;
			margin: 1rem 0 0;

			gap: 10px;

			padding: 5px;
			box-sizing: border-box;
		}

		.search-item{
			flex:1 1 135px;
			min-width:135px;
			max-width:150px;
		}

		.search-container .search_field,
		.search-container .search_button {
			font-size: 0.8rem;
			height: 30px;
		}


		.news-column-right {
			grid-area: unset;
			display: flex;
			flex-direction: column;
		}

		.footer-grid {
			grid-template-columns: 1fr;
		}
		.footer-left-grid {
			grid-template-columns: 1fr;
		}

		.search-container2 {
			flex-direction: row;
		}

		.button-container {
			width: 100%;
		}
	    .search-container2 .button-container {
			width: 100%;
			margin-left: 0;
		}
		.search-container2 .button-container .button {
			width: 100%;
		}

		.wysiwyg-layout,
		.news-layout {
			flex-direction: column;
		}
		.wysiwyg-main,
		.news-main {
			width: 100%;
			padding: 1rem;
		}
		.wysiwyg-summary {
			flex-direction: column;
		}
		.wysiwyg-thumbnail {
			flex: none;
			width: 100%;
		}

		.wysiwyg-content-layout,
		.news-category-layout {
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		.sidebar-right {
			position: static;
			max-height: none;
			overflow-y: visible;
			border-left: 0;
			border-top: 1px solid var(--secundarybordercolor);
			padding: 1rem;
		}

		.sidebar {
			display: none;
		}

		.mobile-categories {
			display: flex;
			gap: 1.5rem;
			width: 100%;
			padding: .75rem 1rem;
			box-sizing: border-box;

			overflow-x: auto;
			white-space: nowrap;

			background-color: var(--thirdarybgcolor);
			border-bottom: 1px solid var(--secundarybordercolor);

			scrollbar-width: none;
			-webkit-overflow-scrolling: touch;
		}
		.mobile-categories::-webkit-scrollbar {
			display: none;
		}
		.mobile-categories a {
			flex-shrink: 0;
			color: inherit;
			text-decoration: none;
			font-size: .9rem;
			font-weight: 600;
		}
		.mobile-categories a.active {
			font-weight: 700;
		}
		.mobile-categories-inner {
			display: flex;
			overflow-x: auto;
		}

		.mobile-categories-inner a {
			padding: 6px 10px;
			border-right: 1px solid #ddd;
		}

		.mobile-categories-inner a:last-child {
			border-right: 0;
		}
		.collage-grid {
			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
		}
		.left-map {
			display: none;
		}
		.golfclub-projects {
			grid-template-columns: repeat(2, 1fr);
		}
		.golfclub-flex {
			flex-direction: column;
		}
		.golfclub-image {
			width: 100%;
			padding: 15px;
			flex: none;
		}
		.golfclub-header {
			flex-direction: column;
			align-items: flex-start;
		}
		.item {
			grid-column: span 1 !important;
			grid-row: span 1 !important;
		}
		.news-category-layout {
			grid-template-columns: 1fr;
		}
		.news-category-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.page-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.photo-grid {
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: 150px;
		}
		.promo-featured-grid {
			grid-template-columns: 1fr;
		}
		.sidebar-right {
			border-left: none;
			border-top: 1px solid var(--secundarybordercolor);
			margin-top: 2rem;
		}
		.gallery .gallery_images {
			height:40vh; 
		}
		.gallery .gallery_thumbnails ul li {
			max-width: 110px;
		}
		.gallery .gallery_thumbnails ul li img {
			height: 80px;
		}
		.gallery .gallery_images .image-label-left,
		.gallery .gallery_images .image-label-right {
			padding: 8px 15px;
			font-size: 1em;
		}

		/* HEADER */
		.logo-container {
			display:inline-block;
		}
		.nav-btn-container {
			position: fixed;
			top: var(--headerHeight);
			left: 0;
			width: 100%;
			height: calc(100vh - var(--headerHeight));
			flex-direction: column;
			justify-content: space-between;
			background-color: var(--clr-btn);
			transform: translateX(100%);
			transition: .5s;
			overflow-x: hidden;
			overflow-y: auto;
		}
		.nav-links {
			flex: initial;
			width: 100%;
		}

		.nav-links > ul {
			flex-direction: column;
			align-items: stretch;
			list-style: none;
		}

		.nav-link {
			width: 100%;
		}

		.nav-link > a {
			justify-content: flex-start;
			text-align: left;
		}
		.nav-link > a > i {
			font-size: var(--fs-lg);
			float: right;
			/*transform: rotate(-90deg);
			transition: .7s;*/
		}

		.dropdown {
			position: relative;
			opacity: 1 !important;
			visibility: visible !important;
			pointer-events: auto !important;
			display: none;
			width: 100%;
		}

		.nav-link.open > .dropdown {
			display: block;
		}

		.dropdown .dropdown {
			position: relative;
			left: 0;
			top: 0;
		}
		.dropdown-link > a {
			/*background-color: transparent;
			color: var(--clr-font);*/
			padding: 1.2rem 2rem;
			line-height: 1;
		}
		.dropdown-link {
			position: relative;
			z-index: 101;
		}

		.space-menu-container {
			display: flex;
		}

		.hamburger-menu-container {
			display: flex;
		}

		.nav-container #check {
			display: block;
		}

		.nav-container #check:checked ~ .nav-btn-container {
			transform: translateX(0);
		}
		
		.nav-container #check:checked ~ .nav-btn-container .nav-link {
			opacity: 1;
			transform: translateY(0);
			transition: 0.3s ease;
		}

	}

	/* tablets */
	@media (max-width: 768px) {
		.details {
			flex-direction: column;
			gap: 1.25rem;
		}
		.logreg-form {
			grid-template-columns: 1fr;
			max-width: 500px;
			margin: 0 auto;
		}
		.marquee-track {
			animation-duration: 60s;
		}
		.property .property-content {
			text-align: justify;
			padding: 0 1.25rem 1.25rem;
		}
		.field-grid {
			grid-template-columns: 1fr;
		}
		.field-group {
			flex-direction: column;
		}
		.card {
			flex: 1 1 100%;
		}

		.collage-grid {
			grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
		}

		.news {
			padding: 1rem;
			display: block;
		}
		.news-layout {
			flex-direction: column;
		}
		.news-article-layout {
			flex-direction: column;
		}
		.news-articles-grid {
			display: flex;
			flex-direction: column;
		}
		.news-category {
			margin-bottom: 0.75rem;
		}
		.news-article-large {
			grid-area: unset;
			width: 100%;
		}
		.news-article-large img {
			height: auto;
		}
		.news-article-small {
			display: flex;
			flex-direction: row;
		/*  align-items: center;*/
			gap: 0.5rem;
			padding: 0.4rem;
		}
		.news-article-small img {
			width: 200px;
			height: 125px;
			object-fit: cover;
			border-radius: var(--br-sm);
		}
		.news-article-small h4 {
			font-size: var(--fs-md);
			margin: 0;
		}
		.news-article {
			padding: 1rem;
		}
		.related-item img {
			height: 120px;
		}
		.related-articles h2 {
			font-size: var(--fs-lg);
		}
		.post-navigation-share {
			flex-direction: column;
			align-items: stretch;
		}
		.post-navigation-share .post-nav-wrapper {
			flex-direction: column;
			gap: 0.75rem;
		}
		.social-share {
			order: 0; /* social share boven prev/next indien gewenst */
		}
		.prev-post, .next-post {
			text-align: center;
			margin-bottom: 0.75rem;
		}
		.social-share {
			justify-content: center;
			margin-bottom: 0.75rem;
		}

		.gallery_thumbnails {
			display: none;
		}
	}

	/* grote smartphones */
	@media (max-width: 640px) {
		.golfclub-projects {
			grid-template-columns: 1fr;
		}
		.news-category-grid {
			grid-template-columns: 1fr;
		}
		.news-category-card .thumb img {
			height: 150px;
		}

		.photo-grid {
			grid-template-columns: 1fr;
			grid-auto-rows: 200px;
		}
		.photo-grid .item {
			grid-column: auto;
			grid-row: auto;
		}

		.page-grid {
			grid-template-columns: 1fr;
		}

		.page-part .large-spreaded ul,
		.page-part .large-spreaded ol {
			margin-left: 1.25rem;
			padding-left: 0;
		}
	}

	/* kleine smartphones = 480px */
	@media (max-width: 480px) {
		h1 {
			font-size: var(--fs-xl);
		}
		.promo-hero h1 {
			font-size: 2rem;
		}
		.promo-actions {
			flex-direction: column;
		}
		.button {
			font-size: var(--fs-sm);
		}
		.search-container {
			padding: 0.75rem;
		}
		.modal-content {
			width: 95%;
			margin: 5% auto;
		}
	}