@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

.user-cannot-see {
	display:none
}

html {
	scroll-behavior: smooth; /* Enable smooth scrolling */
}

h1{
	text-align:center;
	font-family: 'Rajdhani', sans-serif; /* Set font family */
	font-size: 100px;              /* Set font size */
}
#Home_Welcome {
	scroll-margin-top: 0;
	display: flex; /* Gebruik flexbox voor eenvoudige layout */
	flex-direction: column; /* Zet elementen onder elkaar */
	align-items: center; /* Centreer horizontaal */
	justify-content: center; /* Centreer verticaal binnen de sectie */
	text-align: center; /* Tekst wordt gecentreerd */
	padding:20px;
	box-sizing: border-box;
	max-width: 100%;
	position: relative;
	z-index: 2;
	margin-top: 10px;
	padding-bottom: 50px;
	padding-top:50px;
}

#Proces{
	padding-top: 150px;
	position: relative;
	flex-direction: column; /* Zet elementen onder elkaar */
	align-items: center; /* Centreer horizontaal */
	justify-content: center; /* Centreer verticaal binnen de sectie */
	text-align: center; /* Tekst wordt gecentreerd */
}

#Proces img {
	margin-top: 30px;
	margin-bottom: 30px;
	opacity: 0.5;
}

.Opening {
	display: flex; /* Gebruik display in plaats van position */
	flex-direction: column; /* Plaats elementen onder elkaar */
	align-items: center; /* Centreer horizontaal */
	justify-content: center; /* Centreer verticaal */
	width: 100%;
	height: auto; /* Laat de hoogte afhangen van de inhoud */
	text-align: center;
}

.Opening img {
	margin-top: 20px;
	margin-bottom: 20px;
	opacity: 0.9
}
.elderlywithVRtext {
	color: #FFFFFF;         /* Different text color */
	font-weight: bold;
    font-family: 'Rajdhani', sans-serif; /* Font family */
    font-size: 60px;              /* Set font size */
	text-align: right;
	display: flex;
    align-items: center;        /* Aligns items vertically in the center */
    justify-content: center;     /* Centers content horizontally */
    max-width: 65%;              /* Limits the container width to keep content from stretching too wide */
    margin: auto;           /* Centers the container and adds vertical margin */
    gap: 20px;
}

.title_s_Black{
	color: #000000;
	font-size: 40px;
    font-family: 'Rajdhani', sans-serif;
    text-align: center;
    margin-bottom: 35px;
	margin-top: 35px;
}



.watSyndesis {
	color: #793993;
	text-align: center;
	font-size: 28px;
	font-family: Calibri, sans-serif;
	margin: 0 auto 100px;
	max-width: 80%;
}



body {
   background-color: #BE94F4; /* purple Stuff */
   margin:0;
	padding: 0;
	height: 100%; /* Zorg ervoor dat de hele hoogte van het scherm wordt gebruikt */
	z-index:1;
	position: relative;
}


.navbar{
	background-color:#FFFFFF;
    font-family: 'Rajdhani', sans-serif; /* Set font family */
	font-size: 1.2rem;              /* Set font size */
	position: sticky;
	display: flex; 
	justify-content: center; 
	align-items: center;
	top: 10px;
	z-index: 999;             /* To ensure constent presence of the navigation bar*/
	height: 80px;
}

.navbarcontent{
	display: flex;
	justify-content: space-between;
	height: 80px;
	z-index: 1;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 50px;
}

.navbarmenu{
	display: flex;
	align-items: center;
	list-style: none;
	text-align: center;
}

.navbar__item{
	height: 80px;
}

.navbarlinks{
	color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 1.6rem;
}


label{
	font-family: 'Rajdhani', sans-serif; /* Set font family */
    font-size: 20px;              /* Set font size */
	padding-left: 300px;
	color: #FFFFFF;
}

@media screen and (max-width: 768px) {
	.navbarcontent{
		display: flex;
		justify-content: space-between;
		height: 80px;
		width: 100%;
		max-width: 1300px;
		padding: 0;
	}
	
	.navbarmenu{
		display: grid;
		grid-template-columns: auto;
		margin-left: auto;
		width: 100%;
		position: absolute;
		top: -1000px;
		opacity: 0;
		transition: all 0.5s ease;
		height: 50vh;
		z-index: -1;
	}
	
	.navbarmenu.active{
		background: #FFFFFF;
		top: 100%;
		opacity: 1;
		transition: all 0.5s ease;
		z-index: 99;
		height: 75vh;
		font-size:1rem;
	}
}

/* Initial hamburger icon styling */
.navbar__toggle {
  display: none;           /* Hide by default on larger screens */
  cursor: pointer;         /* Make it look clickable */
  justify-content: center;
}

.navbar__logo img {
  height: 80px;  /* Set the height of the logo */
  width: auto;   /* Maintain the aspect ratio */
}

.bar {
  display: block;
  width: 25px;             /* Width of each bar */
  height: 3px;             /* Thickness of each bar */
  margin: 5px auto;        /* Space between bars */
  background-color: #000000;  /* Color of the bars */
}

#mobile-menu{
	position: absolute;
	top: 20%;
	right: 5%;
	transform: translate(5%, 20%);
}

#mobile-menu.is-active .bar:nth-child(2){
	opacity:0;
}

#mobile-menu.is-active .bar:nth-child(1){
	transform: translateY(8px) rotate(45deg);
}

#mobile-menu.is-active .bar:nth-child(3){
	transform: translateY(-8px) rotate(-45deg)
	;
}

/* Show the hamburger icon only on small screens */
@media (max-width: 768px) {
  .navbar__toggle {
    display: block;        /* Display on screens smaller than 768px */
  }
  
}

.steps{
	text-align: left;
	display: flex;
	align-items: center;        /* Aligns items vertically in the center */
	justify-content: center;     /* Centers content horizontally */
	max-width: 50%;              /* Limits the container width to keep content from stretching too wide */
	margin: 20px auto;           /* Centers the container and adds vertical margin */
	gap: 20px;
}

.numbering{
	font-size: 40px;
	font-family: 'Rajdhani', sans-serif;
}

.content_steps{
	color: #793993;         /* Different text color */
	font-family: Calibri, sans-serif; /* Font family */
	font-size:20px;
}

#Over\ Ons{
	position: relative;
	z-index:3;
	padding-top: 150px;
	scroll-margin-top: 0;
}
.aanmelden{
	color: #FFFFFF;
	text-align: right;
	font-size: 25px;
	font-family: Calibri, sans-serif;
	max-width: 50%;
	margin: 0px auto; /* Voeg verticale marges toe */
}

.overons{
	color: #793993;
	text-align: right;
	font-size: 25px;
	font-family: Calibri, sans-serif;
	margin: 0 auto;
	max-width: 50%;
}

.btn_team {
	background-color: #000000; /* Blue background */
	color: white; /* White text */
	border: none; /* Remove border */
	border-radius: 5px; /* Rounded corners */
	padding: 10px 20px; /* Padding inside the button */
	font-size: 30px; /* Font size */
	cursor: pointer; /* Pointer cursor on hover */
	transition: background-color 0.3s ease; /* Smooth transition for hover effect */
	text-align: center;
	display: inline-block;
	font-family: 'Rajdhani', sans-serif;
	text-decoration: none;
	margin-bottom:70px;
	margin-top: 50px;
}

.btn_team:hover {
	background-color: #793993; /* Darker blue on hover */
}

.btn_team:active {
	background-color: #220068; /* Even darker blue when clicked */
}

.team1,.team2,.team3,.team4 {
	color: #FFFFFF;         /* Different text color */
	font-family: Calibri, sans-serif; /* Font family */
	font-size:20px;              /* Set font size */
	text-align: left;
	display: flex;
	align-items: center;        /* Aligns items vertically in the center */
	justify-content: center;     /* Centers content horizontally */
	max-width: 50%;              /* Limits the container width to keep content from stretching too wide */
	margin: 20px auto;           /* Centers the container and adds vertical margin */
	gap: 20px;
}

.title_team{
	font-family: 'Rajdhani', sans-serif;
	font-size: 22px;
	text-align: center;
	margin: 0 auto;
	display: block; /* Ensure block-level element */
	width: 90%; /* Or another fixed width if needed */
	margin-top: 20px;

}

#Onderzoek{
	position: relative;
	padding-top: 150px;
}

.OnderzoekAf{
	color: #FFFFFF;
	text-align: left;
	font-size: 25px;
	font-family: Calibri, sans-serif;
	margin: 0 auto;
	max-width: 50%;
}

.ContactUs{
	color:#FFFFFF;
	text-align: center;
	font-size: 25px;
	font-family: Calibri, sans-serif;
	max-width: 50%;
	margin: 0 auto;
}

#Contact{
	padding-top: 150px;
	position: relative;
	flex-direction: column; /* Zet elementen onder elkaar */
	align-items: center; /* Centreer horizontaal */
	justify-content: center; /* Centreer verticaal binnen de sectie */
	text-align: center; /* Tekst wordt gecentreerd */
}

#Contact img{
	margin-top: 70px;
	margin-bottom: 130px;
	opacity: 0.5;
}

.mail{
	color: #793993;         /* Different text color */
	font-family:'Rajdhani', sans-serif;
	font-size:25px;
	font-weight: bold;
	text-decoration: underline;
}

.im_headset {
	display: flex;
	flex-direction: column; /* Zorgt ervoor dat de elementen onder elkaar staan */
	align-items: center;    /* Centreert de items horizontaal */
	justify-content: center; /* Centreert de items verticaal (indien nodig binnen een container) */
}

.im_headset img {
	margin-top: 20px;
	margin-bottom: 20px;
	opacity: 0.5;
}

/* Form settings */
form {
	display: flex;
	flex-direction: column; /* Stack form elements vertically */
	gap: 15px;              /* Space between form elements */
	width: 100%;
	max-width: 400px;       /* Limit the maximum width of the form */
	padding: 20px;          /* Add some padding to the form */
	border-radius: 8px;     /* Rounded corners for the form */
}

/* Style for each form group (label + input) */
.form-group {
	display: flex;
	flex-direction: column; /* Stack label and input vertically */ /* Ensure the label and input take full width */
	width: 100%;            /* Ensure they take full width available */
}

/* Label styling */
label {
	all: unset;
	font-family: 'Rajdhani', sans-serif;
	color: #ffffff;
	display: block;          /* Force label to be a block element */
	font-weight: bold;
	margin-bottom: 5px;      /* Space between label and input */
	font-size: 20px;         /* Adjust font size */
	text-align: left;        /* Ensure the text is aligned to the left */
	width: 100%;             /* Ensure it takes the full width of the container */
	align-self: flex-start;  /* Ensure it's aligned to the start of the flex container */
}

/* Input fields */
input[type="text"] {
	padding: 10px;
	font-size: 14px;
	font-family: Calibri, sans-serif;
	border-radius: 4px;
	width: 100%;            /* Inputs take full width of the form */
	box-sizing: border-box; /* Include padding in width calculation */
	margin-bottom: 10px;    /* Space between inputs */
}

textarea{
	width: 100%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #000000;
	border-radius: 4px;
	background-color: #f8f8f8;
	resize: none;
}

/* Submit button */
input[type="submit"] {
	padding: 10px 20px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 20px;
	border-radius: 4px;
	width: 100%; /* Full width for submit button */
	font-family: 'Rajdhani', sans-serif;
}

/* Hover effect for submit button */
input[type="submit"]:hover {
	background-color: #45a049;
}

.download-button {
	background-color: #000000; /* Blue background */
	color: white; /* White text */
	border: none; /* Remove border */
	border-radius: 5px; /* Rounded corners */
	padding: 10px 20px; /* Padding inside the button */
	font-size: 30px; /* Font size */
	cursor: pointer; /* Pointer cursor on hover */
	transition: background-color 0.3s ease; /* Smooth transition for hover effect */
	text-align: center;
	display: inline-block;
	font-family: 'Rajdhani', sans-serif;
	text-decoration: none;
	margin-bottom:70px;
	margin-top: 50px;
}

footer {
	background-color: #4A325B;
	color: #FFFFFF;
	text-align: center;
	font-family: Calibri, sans-serif;
	font-size: 15px;
	height: 200px; /* Pas de hoogte van de footer aan */
	max-width: 100%;
	position: relative;
	bottom: 0;
	clear: both;
	overflow: visible;
	z-index:-1;
}

@media screen and (max-width:768px) {
	h1{
		font-size: 30px;
		margin-bottom: 50px;
	}

	#Home_Welcome{
		text-align: center;
		margin-bottom: 100px;
		padding-top:0px;
		padding-bottom: 0px;
	}

	.elderlywithVRtext {
		font-size: 23px;              /* Set font size */
		max-width: 95%;              /* Limits the container width to keep content from stretching too wide */
		margin-bottom: 30px;

	}

	img {
		width: 60%;  /* This makes the image take up 100% of its container's width */
		height: auto; /* This keeps the aspect ratio intact */
	}

	.title_s_Black{
		font-size: 21px;
		margin-bottom: 15px;
	}

	.watSyndesis {
		font-size: 17px;
		max-width:90%;
	}

	#Proces{
		padding-top: 20px;
	}

	.aanmelden{
		font-size: 17px;
		max-width: 90%;
		text-align: left;
	}

	.steps{
		max-width: 85%;
	}

	.overons{
		font-size: 17px;
		max-width: 90%;
		text-align: center;
	}

	.numbering{
		font-size: 50px;
	}

	.content_steps{
		font-size:17px;
	}

	.team1,.team2,.team3,.team4 {
		font-size: 14px;
		max-width: 90%;
	}

	.OnderzoekAf{
		max-width: 90%;
		font-size: 17px;
		text-align: center;
	}

	.btn_team {
		font-size: 18px;
	}

	.download-button {
		font-size: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.ContactUs{
		max-width: 90%;
		font-size: 17px;
	}
}