/*
**************************************************************************************
                                                                       GENERAL STYLING
**************************************************************************************
*/
* {
	margin: 0;
	padding: 0;
	font-family: "Poppins", Verdana;
	font-style: Normal;
	font-size: 14px;
	color: #FFFFFF;
	
	outline: none;
}
a { text-decoration: none; }
body {
	background-color: #000000;
	background-image: url('../img/background-.jpeg');
	background-size: 100% auto;
    /* background-size: cover; */
	background-position: center top;
	background-repeat: no-repeat;
}

.corner {
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;	
}
/*
.shadow {
	-moz-box-shadow: 0 0 3px 3px #b4b4b4;
	-webkit-box-shadow: 0 0 3px 3px #b4b4b4;
	box-shadow: 0 0 3px 3px #b4b4b4;
}
*/


/*
**************************************************************************************
																	   WRAPPER STYLING
**************************************************************************************
*/
	.wrapper {
		margin: 0 auto;
		max-width: 100%;
		width: 68em;
		margin: 0px auto;
	}

		@media screen and (max-width: 1680px) {
			.wrapper {
				width: 70em;
			}
		}

		@media screen and (max-width: 1280px) {
			.wrapper {
				width: calc(100% - 100px);
			}
		}

		@media screen and (max-width: 980px) {
			.wrapper {
				width: calc(100% - 100px);
			}
		}

		@media screen and (max-width: 736px) {
			.wrapper {
				width: calc(100% - 40px);
			}
		}




/*
**************************************************************************************
                                                                   LOGO & BLOK STYLING
**************************************************************************************
*/
header {
	width: 100%;
	min-height: 150px;
	margin: 20px auto;
	
	display: block;
	overflow: visible;
}
	header .logo {
		max-height: 100px;
		
		float: left;
		display: block;
		margin: 25px 0 0 0;
	}
	header a.icon {
		display: none;
	}
	
/*
**************************************************************************************
                                                                          MENU STYLING
**************************************************************************************
*/
div.nav {
	min-width: 10px;
	min-height: 30px;
	
	margin: 70px 0 0 0;
	padding: 0;
	
	float: right;
}
	div.nav ul {
		list-style: none;
	}
	div.nav ul li {
		float: left;
		display: block-inline;
	}
	div.nav ul li a {
		padding: 10px;
		font-size: 20px;

		color: #4F8EA8;
		line-height: 30px;
		text-transform: uppercase;
	
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		
		transition: background-color 0.5s;
	}
	div.nav ul li a:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

/*
**************************************************************************************
                                                                          MENU STYLING
**************************************************************************************
*/
@media screen and (max-width: 900px) {
	div.nav { display: none;}
	header a.icon {
		width: 30px;
		height: 30px;
		float: right;
		display: block;
		margin: 70px 0 0 0;
	}
	header a.icon img {
		width: 100%;
		filter: invert(100%);
	}
	
	header a.icon img:hover {
		width: 100%;
		filter: invert(100%);
	}
	
	
	div.expanded {
		width: 100%;
		min-height: 30px;
		
		margin: 20px 0;
		
		display: block;
		float: left;
			
		-moz-border-radius: 40px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		
		background-color: rgba(255, 255, 255, 0.8);
	}
		div.expanded ul {
			width: 100%;
			display: block;
			list-style: none;
		}
		div.expanded ul li {
			width: 100%;
			float: left;
			display: block;
		}
		div.expanded ul li a {
			width: calc(100% - 55px);
			height: calc(100% - 30px);
			
			float: left;
			display: block;
			margin: 5px 0;
			padding: 15px 15px 15px 40px;
			
			font-size: 20px;
			line-height: 20px;
			color: #4F8EA8;
			text-transform: uppercase;
		}
		div.expanded ul li a:hover {
			background-color: transparent;
		}
}

/*
**************************************************************************************
                                                               CONTENT SECTION STYLING
**************************************************************************************
*/	
section {
	width: calc(100% - 80px);
	min-height: 50px;
	
	margin: 0 auto;
	padding: 40px;
	
	float: inline-end;
	display: block;
	
	line-height: 21px;
	
	background-color: #4F8EA8;
	background-color: rgba(79, 142, 168, 0.8);
}

/*
jurr prutswerk
*/
input, textarea, select {
    color: #000000; /* Zwarte tekst */
    background-color: #FFFFFF; /* Witte achtergrond */
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
button {
    background-color: #4F8EA8;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
}
button:hover {
    background-color: #3b6c7e;
}

.language-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.language-switch img {
    width: 30px;
    height: auto;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    transition: transform 0.3s ease;
}

.language-switch img:hover {
    transform: scale(1.2);
    border-color: #4F8EA8;
}

.footer {
  width: 100%;
  max-width: 68em; /* dezelfde breedte als je wrapper */
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #FFFFFF;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.footer-left, .footer-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer-left a {
  color: #FFFFFF;
  text-decoration: none;
  margin-right: 20px;
  font-size: 12px;
}

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

.contact-block {
    width: 100%;
    max-width: 400px;
    margin: 20px 0;
    font-size: 14px;
}

.contact-row {
    display: flex;
    margin-bottom: 5px;
}

.contact-row .label {
    width: 80px; /* breedte voor 'Adres:' en 'KvK:' */
    font-weight: 600;
    color: #ffffff;
}

.contact-row .value {
    flex: 1;
    color: #ffffff;
}