/*test*/

:root{
	--page-side-padding: 16%;
	--content-width: 84%;
	--nav-background-color: #0c2941;
	--nav-hamburger-color: #14446c;
	--nav-hamburger-color-hover: #1c5f97;
	--link-color: #8bba78;
	--linkOnColor: #578044;
	--heroTextColor: rgba(16, 55, 86, 0.85);
	--backgroundColor6: #e1e1d0; /*lichtgeel*/
	--backgroundColor2: #103756; /*donkerblauw*/
	--backgroundColor3: #f5f8f7; /*licht grijsblauw*/
	--backgroundColor4: #a73730; /*grijsrood*/
	--backgroundColor5: #69a297; /*grijsgroen*/
	--backgroundColor1: #d3d0c8; /*warmgrijs*/
	--backgroundColor7: #e0ebe9;
	--backgroundColor8: #cedbe4;
	--textColor8: #19334d;
	--tekstVoorGrijsgroen: #436a63; /*tekst die bij grijsgroen past*/
	--offWhite: #d0d9e0;
	--offWhite2: #f9fbfd;
	--darkBlueText: #19334d;
	--rowGap: 20px;
	--columnGap: 50px;
	--footerTextColor: #FFF;
	--footerLinkColor: #98FB98;
	--footerLinkHoverColor: #588745;
	--warmColor1: #f5f5ef;
	--warmColor2: #837863;
	--warmColor3: #C8C2B6;
	--warmTextColor: #2c2821;
	--coolColor2: #7b9fb7;
	--aColor: #408000;
}

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    background-color: var(--nav-background-color); /* Voeg de achtergrondkleur toe voor desktop */
    margin: 0;
    display: flex;
    /*justify-content: center; /* Centreert de hoofdelementen horizontaal (tot max-width) */
    min-height: 100vh;
    align-items: flex-start; /* Lijnt de hoofdelementen bovenaan uit in de flex container */
    flex-direction: column;
	font-family: "Noto Serif";
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	line-height: 1.5;
}

header,
#hero-image,
main,
footer {
    max-width: 1400px;
    width: 100%; /* Gebruik de volledige viewport breedte (tot max-width) */
    margin: 0 auto; /* Centreert de elementen horizontaal en geeft verticale marges */
    box-sizing: border-box; /* Zorg ervoor dat padding binnen de breedte valt */
}

header {
    margin-top: 0; /* Geen top-marge voor de header */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc((100% - var(--content-width)) / 2);
    position: relative;
    box-sizing: border-box;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    background-color: var(--nav-background-color); /* Voeg de achtergrondkleur toe voor desktop */
    height: 80px; /* Voeg de hoogte toe voor mobile */
}


#logo {
	position: absolute;
	left: var(--page-side-margin);
	top: 50%;
	transform: translateY(-50%);
 	width: auto;
 	fill: white;
}

#hero-image {
    background-color: #a0c5d0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	height: 85vh;
    display: flex;
    justify-content: flex-start;
	align-items: flex-start;
    padding: 10vh calc(var(--page-side-padding) / 2); /* Behoud interne padding */
    box-sizing: border-box;
}

#hero-text {
	text-align: center;
	background-color: var(--heroTextColor);
	border: 2px dotted white;
	border-radius: 100%;
    margin: 0 auto; /* Centreer de tekst */
    color: white;
    box-sizing: border-box; /* Zorg ervoor dat padding binnen de breedte valt */
}

main {
    padding: 0;
    box-sizing: border-box;
	margin-top: 0;
}

.first-section a {
	color: var(--aColor);
	font-family: "Noto Serif";
	font-weight: 200;
}

section,
footer {
    max-width: 1400px; /* Beperk de breedte van de sectie */
    width: 100%;
    padding: 100px calc(var(--page-side-padding) /2); /* Centreer de sectie */
    box-sizing: border-box; /* Zorg ervoor dat padding binnen de breedte valt */
	display:flex;
	flex-wrap: wrap;
	gap: var(--rowGap) var(--columnGap);
}

footer {
	background-color: var(--nav-background-color);
	font-size: 0.9em;
}

footer address,
footer section,
footer a,
footer a.noLink,
footer a.noLink:hover,
footer h4 {
	background-color: transparent;
	color: var(--footerTextColor);
	font-family: "Montserrat", sans-serif;
	font-weight: 200;
	padding-left: 0;
	padding-right: 0;
}
footer a{
	text-decoration: none;
	color: var(--footerLinkColor);
}
footer a:hover {
	border-radius: 2px;
	background-color: var(--footerLinkHoverColor);
	color: var(--footerTextColor);
	padding-left: 5px;
	padding-right: 3px;
}
footer h4{
	font-size: 1.2em;
	margin: 0;
	padding: 0 0 1em 0;
}
footer address,
footer section {
	padding: 0;
	margin: 0;
	font-style: normal;
	line-height: 2em;
	letter-spacing: 0.1em;
}
footer section {
	display: block;
}
footer i {
	width: 20px;
	text-align: center;
	margin: 0 5px 0 0;
}
footer #disclaimer {
	width: 100%;
	padding: 1.5em 0 0 0;
	margin: 0 0 0 0;
	border-top: 1px dotted white;
}
footer #socials img {
	width: 30px;
	margin-right: 10px;
}
footer #erkenning div {
	float: left;
	width: 75px;
	height: 75px;
	margin-right: 10px;
	padding: 5px;
	background: white;
	border-radius: 5px;
}
footer #erkenning img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.first-section {
	background-color: var(--backgroundColor1);
}
.warmColor1 {
	background-color: var(--warmColor1);
}
.first-section H2 {
	font-size: 5rem;
	line-height: 5.5rem;
}
.second-section {
	background-color: var(--backgroundColor5);
	gap: var(--columnGap);
}

.second-section h2,
.FAQ-section h2 {
	color: white;
}

.darkBlue h3,
.darkBlue p,
.darkBlue h2 {
	color: var(--textColor8);
}

.white-section {
	background-color: var(--offWhite2);
	color: var(--darkBlueText);
}

.second-section h3 {
	border-bottom: 2px dotted var(--tekstVoorGrijsgroen);
}


.second-section .col-3,
.second-section .col-23 {
	background-color: white;
	color: var(--tekstVoorGrijsgroen);
	/*margin-bottom: 60px;*/
	padding: 2.5rem;
	border-radius: 10px 30px;
	box-shadow: 0.5rem 0.5rem 1rem #00000080;
}
.reviews-section {
	background-color: var(--backgroundColor6);
}
.FAQ-section {
	background-color: var(--backgroundColor2);
	gap: 0;
}
.FAQ-section details {
	width: 100%;
	padding: 20px 50px;
	margin: 5px;
	background-color: white;
	color: var(--backgroundColor2);
	border-radius: 10px 30px;
}
.FAQ-section details p {
	padding: 0;
	margin: 20px 0 20px 20px;
}
.FAQ-section details a {
	color: var(--link-color);
}
.FAQ-section details summary {
	cursor: pointer;
	font-size: 1.2rem;
}

.FAQ-section details.open summary {
	border-bottom: 2px dotted var(--backgroundColor2);
	padding: 0 0 20px 0;
	font-size: 1.5rem;
}
#Nobco {
margin-left: 20px;
}
.general-section,
.CallToAction-section{
	background-color: #c2cac7;
}
.CallToAction-section{
	gap: 0;
	padding-top: 50px;
}
.CallToAction-section h2 {
	float: left;
	margin: 0;
	font-size: 6rem;
	line-height: 6.5rem;
}
.CallToAction-section .col-1{
	text-align: center;
	background-color: var(--backgroundColor3);
	border-radius: 20px 40px;
	padding: 50px 50px 20px 50px;
	box-shadow: 0.5rem 0.5rem 1rem #00000080;
	margin-top: -30px;
}
.CallToAction-section .col-1 p{
	margin: 0 auto;
	padding: 2rem 0 0 0;
}
.CallToAction-section .fotoIrna {
	z-index: 1;
}
#irna {
	border: 2px solid #4a635e;
	border-radius: 100%;
    max-width: 100%; /* De afbeelding zal nooit breder zijn dan zijn container */
    height: auto;    /* Behoudt de aspect ratio van de afbeelding */
    display: block;  /* Voorkomt ongewenste ruimte onder de afbeelding */
	margin: 0 50px;
}

.darkBlue {
	background-color: var(--backgroundColor8);
}
.warm-color-3 {
	background-color: var(--warmColor3);	
}
.warm-color-2 {
	background-color: var(--warmColor2);
}
.warm-color-3 H2,
.warm-color-3 H3,
.warm-color-3 p {
	color: var(--warmTextColor);
}
.cool-color-2 {
	background-color: var(--coolColor2);
}
.cool-color-2 #irna {
	border-color: var(--coolColor2);
}
.warm-color-2 #irna {
	border-color: var(--warmColor2);
}

.responsiveImg {
  width: 100%;
  max-width: 570px;
  height: auto;
}
#irnaEnSchaap {
	border: 1px solid white;
	border-radius: 5px 15px;
}

/* Basisstijlen (mobiel - schermen kleiner dan 768px) */
#hamburger-menu {
    display: block; /* Toon het hamburgermenu-icoon op mobiel */
    position: absolute;
    top: 20px;
    right: calc(var(--page-side-padding) / 2);
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 101; /* Boven de sticky z-index */
	background-color: var(--nav-background-color);
	border: 1px solid white;
	border-radius: 5px;
}

#hamburger-menu .line {
    display: block;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#hamburger-menu.open .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

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

#hamburger-menu.open .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

nav ul {
    display: none; /* Verberg de navigatielijst standaard op mobiel */
    flex-direction: column; /* Stapel de items onder elkaar */
    position: absolute;
    top: 80px; /* Onder de sticky navigatie */
    left: 0;
    width: 100%;
    background-color: var(--nav-background-color);
    text-align: center;
    z-index: 99; /* Onder de sticky z-index */
    margin: 0; /* Reset marges */
    padding: 0; /* Reset padding */
}

nav ul.open {
    display: flex; /* Toon de navigatielijst wanneer de 'open' klasse is toegevoegd */
}

nav ul li {
	font-size: 1.3rem;
    padding: 2px 0;
    border-top: 1px solid #eee;
    margin: 0; /* Reset marges */
}
nav ul li:hover {
    background-color: var(--nav-hamburger-color);
}

nav ul li a {
  text-decoration: none;
  color: var(--offWhite); 
  display: block; /* Maak de link een block-level element */
  padding: 17px 0; /* Behoud de padding voor de visuele knop */
}
nav ul li a:hover {
	color: white;
}

h1, h2, h3, p {
	text-wrap:balance;	
}

h1 {
	margin: 0;
}

.home h1, .home h2 {
	font-family: "Zen Loop", cursive;
	font-weight: 400;
	text-transform: uppercase;
	}
.general-section h1,
.general-section h2,
.general-section p,
.general-section ul {
	margin: 0;
	padding: 0;
}
.general-section h1 {
	font-size: 2rem;
	line-height: 2.5rem;
}
.general-section h2 {
	font-size: 1.5rem;
	line-height: 2rem;
}

.contact-section {
	background-color: var(--backgroundColor6);
	flex-direction: column;
}
.contact-section H1 {
	font-family: "Zen Loop", cursive;
	font-weight: 400;
	text-transform: uppercase;
	text-align: left;
	max-width: 700px;
	margin: 0 auto;
}
.contact-section p
 {
	text-align: left;
	max-width: 700px;
}

/* CONTACTFORMULIER */
.contact-section .col-1{
	align-items: center;
}
.contact-section .col-1 form{
	margin: 50px auto;
	max-width: 700px;
}
form button[type="submit"],
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
	display: block;
	width: 100%;
}
form textarea {
	min-height: 3rem;
	field-sizing: content;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
input:focus,
textarea:focus {
	background-color: transparent;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px dotted black;
	margin: 0 0 40px 0;
	padding: 0 0 5px 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 0.8rem;
	outline: none;
}
form input::placeholder,
form textarea::placeholder {
    text-transform: uppercase;
    color: #999; /* Om de kleur te behouden */
}

form button[type="submit"] {
    background-color: var(--linkOnColor);
    border-color: #FFF;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    color: #FFFFFF;
	font-family: "Montserrat", sans-serif;
    display: inline-block;
    margin: 2rem 0 2rem 0;
    padding: 0.4rem 0.6rem 0.4rem 1.2rem;
    border-radius: 50px;
    border: 1px solid;
    font-weight: bold;
    font-size: 1rem;
    transition: ALL 0.1s ease;
	cursor: pointer;
}
form button[type="submit"]:hover {
	color:  var(--linkOnColor);
    border-color: var(--linkOnColor);
    background-color: #FFF;
}
form button[type="submit"] .pijl {
    font-size: 2.2rem;
    margin-top: 0.2rem;
    margin-right: 0.2rem;
    margin-left: 0.5rem;
}
form button[type="submit"] span {
	position: static;
    vertical-align: 0.4rem;
}
/* EINDE CONTACTFORMULIER */
	
a {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
}

p {
	padding: 0;
	max-width: 60ch;
	font-size: 1.1rem;
	line-height: 1.7;
	margin: 1.1rem 0 0 0;
}

h2{
	width: 100%;
	margin-top: 0;
}

h3 {
	font-weight: 200;
	font-size: 2rem;
	line-height: 2.5rem;
	border-bottom: 2px dotted black;
	margin: 0;
	padding: 0 0 20px 0;
}

.schuin{
	font-style: italic;
}

	
#hero-text h1 {
	margin: 0;
	padding: 0;
}
#hero-text p {
   max-width: 500ch;
   margin: 0;
   padding: 0;
   font-weight: 200;
}

/*CALL TO ACTION*/
	.callToAction {
		font-family: "Montserrat", sans-serif;
		display: inline-block;
		margin: 2rem 0 2rem 0;
		padding: 0.4rem 0.6rem 0.4rem 1.2rem;
		border-radius: 50px;
		border: 1px solid;
		font-weight: bold;
		font-size:1rem;
		transition: ALL 0.1s ease;
	}

	.callToAction .pijl {
		font-size: 2.2rem;
		margin-top: 0.2rem;
		margin-right: 0.2rem;
		margin-left: 0.5rem;
	}
	a.callToAction span{
			position: static;
			vertical-align: 0.4rem;
	}

	.callToAction:link,
	.callToAction:visited {
 	 	background-color: var(--linkOnColor);
  		border-color: #FFF;
  		text-align: center;
  		text-decoration: none;
  		text-shadow: none;
  		color:#FFFFFF;
	}
	.callToAction:hover,
	.callToAction:active {
  		color: var(--linkOnColor);
  		background-color: #ECEDED;
  		border-color: var(--linkOnColor);
	}
	
	#video {
    max-width: 100%; /* De afbeelding zal nooit breder zijn dan zijn container */
    height: auto;    /* Behoudt de aspect ratio van de afbeelding */
    display: block;  /* Voorkomt ongewenste ruimte onder de afbeelding */
}

/*reviews*/
.reviews-section h2 {
	margin: 0;
}
.block {
	display: block;
}
img.block {
	border-radius: 100%;
	border: 1px solid var(--backgroundColor2);
}
.fa-star{
 color: #FFCC00;
 font-size: 30px;
}


@media (max-width: 768px) {
	.dropdown:hover .dropdown-content {
        display: none; /* Verberg de dropdown bij hover op mobiel */
    }
	#mainNavUL.open .dropdown.active .dropdown-content {
		display: block;
		position: relative;
		background-color: var(--offWhite);
	}
	#mainNavUL.active .dropdown-content {
		position: relative;
	}
	#mainNavUL.open .dropdown.active .dropdown-content li a {
		color: var(--nav-hamburger-color);
	}
	#mainNavUL.open .dropdown.active .dropdown-content li a:hover,
    #mainNavUL.open .dropdown.active .dropdown-content li a:focus {
		color: var(--offWhite);
	}

	#hero-image {
		background-image:url(images/768x1500-.webp);
	}
	#hero-text {
		align-self: flex-end;
		padding: 1.5rem 3rem;
	}
	#hero-text h1 {
		font-size: 3rem;
	}
	#hero-text p {
   		font-size: 1.3rem;
   		line-height: 1.8rem;
	}
	.general-section h1,
	.general-section h2,
	.general-section p,
	.general-section ul {
		width: 100%;
	}
	h1 {
		font-size: 4rem;
		line-height: 4.5rem;
	}
	h2{
		font-size: 4rem;
		line-height: 4.5rem;
	}
	h3{
		margin-top: 3rem;
	}
	.second-section h3 {
		margin-top: 0;
	}
	.col-1,
	.col-2,
	.col-3,
	.col-23 {
		width: 100%;
	}
	footer address,
	footer section {
		width: 100%;
		margin-bottom: 40px;
	}
	.CallToAction-section .fotoIrna {
		width: 100%;
	}
	#irna {
		margin: 0 auto;
	}
	#logo {
		height: 40px;
		width: 120px;
	}
	
}
@media (max-width: 400px) {
	#hero-text {
		padding: 1.5rem 3rem;
	}
	#hero-text h1 {
		font-size: 2rem;
	}
	#hero-text p {
   		font-size: 1rem;
   		line-height: 1.2rem;
	}
	
	.callToAction {
		margin: 1.4rem 0 1.4rem 0;
		padding: 0.28rem 0.42rem 0.28rem 0.84rem;
		font-size:0.7rem;
	}

	.callToAction .pijl {
		font-size: 1.4rem;
		margin: 0 0 0 0.5rem;
	}
	a.callToAction span{
			vertical-align: 0.3rem;
	}
	.first-section H2,
	.CallToAction-section H2 {
		font-size: 4rem;
		line-height: 4.5rem;
	}
	h1 {
		font-size: 3rem;
		line-height: 3.5rem;
	}
	h2{
		margin-top: 0;
		font-size: 3rem;
		line-height: 3.5rem;
	}
}


/* Desktop weergave (min-width: 768px) */
@media (min-width: 768px) {
    #hamburger-menu {
        display: none; /* Verberg het hamburgermenu-icoon op desktop */
    }

    nav {
        height: 100px; /* Voeg de hoogte toe voor desktop */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 calc((100% - var(--content-width)) / 2);
        position: relative;
        box-sizing: border-box;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex; /* Toon de ul als een flex container (horizontaal) */
        flex-direction: row; /* Items naast elkaar op desktop */
        position: static; /* Reset positionering */
        top: auto;
        left: auto;
        width: auto;
        background-color: transparent; /* Achtergrond transparant op desktop */
        text-align: left;
        z-index: auto;
        margin-left: auto; /* Rechts uitlijnen op desktop */
		align-items: center;
    }

    nav ul li {
        padding: 0 15px;
        border-top: none;
		/*width: 6rem;*/
		text-align: center;
    }
	
	nav ul li a {
		text-decoration: none;
		color: var(--offWhite);
		font-size: 1rem;
		position: relative;
	}
	
	nav #mainNavUL .dropdown-content li:last-child a:hover,
	nav ul li:hover{
    	background-color: var(--nav-background-color);
	}
	
	nav ul li:not(:last-child) a::after {
		content: '';
		position: absolute;
		bottom: -0.3rem;
		left: 0;
		width: 100%;
		height: 0.15em;
		background-color: white;
		opacity: 0;
		transition: opacity 300ms, transform 300ms;
		opacity 1;
  		transform: scale(0);
  		transform-origin: center;
		bottom: 0.6rem;
	}

	nav ul li:not(.dropdown) a:hover::after,
	nav ul li:not(.dropdown) a:focus::after {
  		opacity: 1;
  		transform: translate3d(0, 0.15em, 0);
  		transform: scale(1);
	}
	nav #mainNavUL li:last-child a{
		padding: 0.4rem 0.8rem;
		border: 1px solid var(--offWhite);
		border-radius: 0.4rem 0.8rem;
		transition: ALL 0.2s ease;
	}
	nav #mainNavUL li:last-child:hover a,
	nav #mainNavUL li:last-child:focus a {
		border-radius: 0.8rem 0.4rem;
		background-color: white;
		border: 1px solid white;
		color: var(--nav-background-color);
	}
	
	/*DROPDOWN*/
#mainNavUL li {
    position: relative;
    /* Andere styling voor je hoofdnavigatie links */
}
	
.dropdown a {
	cursor: default;	
}
.dropdown li a {
	cursor: pointer;
}
	
.dropdown-content,
nav.sticky .dropdown-content {
    display: none;
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 225px;
	padding-top: 10px;
	background-color: var(--nav-hamburger-color-hover);
	border-radius: 10px;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content li:hover{
	background-color: var(--nav-hamburger-color-hover);
	border-radius: 10px;
}
	
.dropdown-content li a {
	padding-top: 0;
}
	
nav #mainNavUL .dropdown-content li:last-child a {
	background-color: var(--nav-hamburger-color-hover);
	border: 0;
	border-radius: 10px;
	padding: 0 0 15px 0;
}
nav #mainNavUL .dropdown-content li:last-child a:hover,
nav #mainNavUL .dropdown-content li:last-child a:focus {
	color: white;
	background-color: var(--nav-hamburger-color-hover);
}
	

/* EINDE DROPDOWN */
	
	#logo {
		height: 60px;
		width: 180px;
	}
	
	#logo:not(:hover) {
		transition: ALL 0.2s ease;
	}
	/* Sticky navigatie stijlen (deze blijven ongewijzigd) */
	nav.sticky {
		height: 60px;
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 1400px;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		z-index: 100;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0; /* Geen padding op sticky */
		border-bottom: 1px solid #808080;
	}
	
	nav.sticky .logo {
		color: black;
		text-decoration: none;
		font-size: 1.5em;
		font-weight: bold;
		width: auto;
		margin-left: calc((100% - var(--content-width)) / 2); /* Linkermarge */
	}
	nav.sticky #logo{
		height: 45px;
		width: 135px;
	}
	
	nav.sticky ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		width: auto;
		margin-right: calc((100% - var(--content-width)) / 2); /* Rechtermarge */
	}
	
	#hero-image {
		background-image:url(images/1400x933.webp);
		justify-content: flex-start;
		align-items: center;
	}
  	#hero-text {
    	margin-left: 0;
    	width: auto; /* Zorg ervoor dat het de beschikbare breedte inneemt */
  	}
	#hero-text {
		padding: 1.5rem 3rem;
	}
	#hero-text h1 {
		font-size: 3.5rem;
	}
	#hero-text p {
   		font-size: 1.8rem;
   		line-height: 2.3rem;
	}
	
	.general-section h1,
	.general-section h2,
	.general-section p,
	.general-section ul {
		width: 50%;
	}
	
	h1 {
		font-size: 5rem;
		line-height: 5.5rem;
	}
	h2{
		font-size: 5rem;
		line-height: 5.5rem;
	}
	h2 span {
		font-size: 7rem;
	}
	
	.col-1 {
		width: 100%;
	}
	.col-2,
	footer address,
	footer section {
		width: calc(50% - (var(--columnGap) / 2));
		margin-bottom: 40px;
	}
	.col-3 {
		width: calc(33% - (var(--columnGap)) / 1.33);
	}
	.col-23 {
		width: calc(66% - (var(--columnGap)) / 1.66);
	}
	.CallToAction-section .fotoIrna {
		width: 100%;
		display: flex;
		/*align-items: center;*/
		justify-content: flex-end;
	}

	.first-section .col-2:first-child h2 {
    	margin-top: 0; /* Verwijdert de bovenmarge van de h2 */
	}
	
	.second-section .col-3,
	.second-section .col-23 {
		width: calc(50% - (var(--columnGap) / 2));
	}

}
@media (min-width: 900px) {
	#hero-text {
		padding: 2rem 4rem;
	}
	#hero-text h1 {
		font-size: 4rem;
	}
	#hero-text p {
   		font-size: 2rem;
   		line-height: 2.5rem;
	}
}
@media (min-width: 1024px) {
	.first-section H2,
	.CallToAction-section H2 {
		font-size: 6rem;
		line-height: 6.5rem;
	}
	
	.second-section .col-3 {
		width: calc(33% - (var(--columnGap)) / 1.33);
	}
	.second-section .col-23 {
		width: calc(66% - (var(--columnGap)) / 1.66);
	}
	footer address,
	footer section {
		width: calc(33% - (var(--columnGap)) / 1.33);
	}
}
@media (min-width: 1402px) {
	header,
	main,
	footer,
	nav.sticky {
		border-left: 1px dotted #808080;
		border-right: 1px dotted #808080;
	}
	body {
		background-color: #000;
	}

}