* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    position: relative;
    justify-content: space-evenly;
    align-items: center;
	background-color: #6389AB;
    color: white;
    padding: 15px;
	border-bottom: 0px solid #FEBE51 ;
}

.space {
	width: 45%;
}


.navbar .current {
	color: black;
}

.logo {
    display: flex;
    align-items: center;
    gap: 2vh;
}

.logo img {
    width: 100px;
    height: 100px;
	margin-right: 1cm;
}

.brand-title {
    font-size: 2.5rem;
    margin: .5rem;
	font-family: orbitron;
	border: 0px solid white;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	text-align: left;
}

@media (max-width: 30cm) {
	.brand-title {
		text-align: center;
		font-size: 2.5rem;
	}
}

.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;
    margin: 0px;
    padding: 15px 0 15px 0;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: .8rem;
	font-family: corbel;
	font-size: 1.2rem;
	font-weight:500;
}


.navbar-links li:hover {
    background-color: #DBEFEC;
}

.navbar-links li a:hover {
    color: black;
}

.current {
	background:#FEBE51 ;
}




.toggle-button {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links ul li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  padding: 5px;
  background: white;
}
.grid-item {
  padding: 20px;
  font-size: 30px;
  text-align: center;

}

.index {
	background-image: url("./images/fantasy.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	border: 0px solid #005B60;
}

.index a {
	text-decoration: none;

}

	
#hero {
	margin-bottom: 1cm;
	margin-left: auto;
	margin-right: auto;
	padding: 1cm;
	width: 40%;
	border-radius: 50px;
	opacity: .7;
	border: 0px solid white;
}


#hero:hover {
	opacity: 1;
	transition: 1s;
}

span {
	color: #FEBE51;
}

@media (max-width: 1400px) {
#hero {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding: 1cm;
	border-radius: 30px;
	opacity: 0.8;
}
#hero:hover {
	opacity: 1;
	transition: 1s;
}

}


#hero h1 {
	font-family: candara;
	text-align: center;
	font-size: 1.8cm;
	color: white;
}

@media (max-width: 1200px) {
	#hero h1 {
		font-size: 35px;
		color: white;
	}
}




#hero h3 {
	font-family: candara;
	color: white;
	font-size: 25px;
	text-align: center;
}



#hero p {
	font-family: 'gadugi';
	font-size: 1.1rem;
	text-align: left;
	color: white;
	line-height: 1.8rem;

}

@media (max-width: 800px) {
	#hero p {
		font-size: 5mm;
}
}




#about {
	background:#FFF7D6 ;
	background-image: url("./images/fantasy.jpg");
    background-attachment: fixed;
}

#websites {
	background:#FFF7D6 ;
}


#about h2 {
	text-align: center;
	font-family: candara;
	color: black;
	font-size: 30px;

	}

#about h3 {
	text-align: center;
	font-family: candara;
	font-size: 25px;
	color: black;
	width: 100%;
}

#about header h2 {
	color: white;
	font-family: 'Orbitron', sans-serif;
	text-align: center;
	display: none;
}

@media (max-width: 65em) {
	#about header h2 {
		display: flex;
		justify-content: flex-start;
		margin-left: 30px;
	}
}

.about {
	background-color: whitesmoke;
	color: black;
	font-family: 'gadugi';
	width: 45vw;
	margin-left: auto;
	margin-right: auto;
    border-radius: 30px;
	margin-top: 1.5cm;
	margin-bottom: 1.5cm;
	border: 1px solid black;
	padding: 1vw 2vw 1vw 2vw;
	opacity: .7;
	}

.about:hover {
	opacity: 1;
	transition: 1s;
}





	
	.about h2 {
	text-align: center;
	color: white;
}



.team h2 {
	color: black;
}
	
.about a {
	text-decoration: none;
	color: #569DC8;
}
	

@media (max-width: 1400px) {
.about {width: 90%;
		   margin-left: auto;
		   margin-right: auto;
		   display: block;
		   padding: 1cm;
	}
	}

	.team h2 {
		margin-bottom: 2vh;
	}


.about p {
	font-size: 1.1rem;
	line-height: 1.8rem;
	margin-bottom: 2vh;
	text-align: left;
}

@media (max-width: 800px) {
	.about p {
		font-size: 5mm;
		}
		}

	

	
.call {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1cm;
	margin-bottom: 1cm;
	background: #FFF394;
	font-family: arial;
	color: black;
	width: 100px;
	padding: 15px 10px 15px 10px;
	border: 1px solid black;
	border-radius: 20px;
	text-align: center;
		}
		
.call a {
	text-decoration: none;
	color: black;
	font-family: ebrima;
	font-weight: 800;
	text-align: center;
}

.evsd {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 0px solid black;
	border-radius: 30px;
	width: 80%;
	margin-left: 10%;
	margin-top: 3cm;
	margin-bottom: 3cm;
	gap: 2cm;
}

.evsm {
	display: none;
	justify-content: space-between;
	margin-bottom: 1.5cm;
	border: 0px solid black;
	width: 80%;
	min-height:auto;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1200px) {
	.evsd {
		display:none;
	}
}

@media (max-width: 1200px) {
	.evsm {
	    margin-top: 1.5cm;
		display:flex;
		flex-direction: column;
		gap: 1.5cm;
	}
	}

embed {
	border: 1px solid black;
}



.explain hr {
	width: 80%;
	margin: auto;
}

.services hr {
	width: 80%;
	margin: auto;
}

.about hr {
	width: 80%;
	margin: auto;
}

.explain {
	padding: 1cm;
}


#services {
    background-color: #344F6C;
	background-image: url("./images/fantasy.jpg");
	background-attachment: fixed;
}

.services h2 {
	font-size: 30px;
	text-align: left;
	margin-bottom: 2vh;
	font-family: 'candara';
	color: white;
}



.services p {
	line-height: 1.8rem;
	margin-bottom: 2vh;
	color: white;
}


.grid-item {
	flex: 1;
}


  
  @media(max-width:767px) {
	html {
	  font-size: 14px;
	}
  }

.pics {
	display: flex;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 30px;
	margin-top: 2vh;
	min-height: 10vw;
	justify-content: space-around;
	
}

@media (max-width: 800px){
.pics {
	display: grid;
}
}

.pic1 img {
	width: 200px;
	border: 1px solid black;
	border-radius: 50px;
	margin-bottom: 1vh;
	margin-left: auto;
	margin-right: auto;
}



.pic2 img {
	width: 200px;
	border: 1px solid black;
	border-radius: 50px;
	margin-bottom: 1vh;
	margin-left: auto;
	margin-right: auto;
}


@media (max-width: 800px) {
.pic1 img {
border-radius: 50px;
}
}

@media (max-width: 800px) {
	.pic2 img {
	border-radius: 50px;
	}
	}
	

	.services {
		display: flex;
		flex-direction: column;
		color: black;
		margin-left: auto;
		margin-right: auto;
		font-family: 'gadugi';
		width: 50%;
		background-color: whitesmoke;
		border: 1px solid black;
		border-radius: 4vw;
		margin-top: 1.5cm;
		margin-bottom: 1cm;
		padding: 1cm 1cm 2cm 1cm;
		opacity: .7;
	}

	.services:hover {
		opacity: 1;
		transition: 1s;
	}
	  

	

.services h3 {
	text-align: left;
	color: black;
}


.contact h3 {
	text-align: center;
	font-family: candara;
	font-size:x-large;
}

.services p {
	font-size: 1.1rem;
	text-align: left;
	color: black;
}

@media (max-width: 800px) {
	.services p {
		font-size: 5mm;
		}
		}

.services a {
	color: black;
	text-decoration: none;
}

@media (max-width: 1200px) {
	.services { display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
}


.services h2 { 
	text-align: center;
	color: black;
}





.pricing {
	background: #FFF7D6;
	background-image: url("./images/fantasy.jpg");
	background-attachment: fixed;

}





#contact {
	background: #FFF7D6;
	background-image: url("./images/fantasy.jpg");
	background-attachment: fixed;
}


.contact {
	background: whitesmoke;
	border: 1px solid black;
	border-radius: 30px;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5cm;
	margin-top: 1.5cm;
	font-family:  'gadugi';
	font-size: 1.2rem;
	opacity: .7;
	}

.contact:hover {
	opacity: 1;
	transition: 1s;
}

@media (max-width: 800px) {
	.contact {
	width: 90%;
}
}


.contact  h2 {
	font-family:  'Candara';
	font-size: xx-large;
	font-weight: 600;
	text-align: center;
	padding: 2vh;
	color: black;
}

.contact  h3 {
	font-family:  'Candara';
	font-weight: 600;
	color: black;
}

.contact a {
	text-decoration: none;
	color: #DCEFEC;
}

.knop {
	display: flex;
	justify-content: center;
	position:relative;
	right: 5%;
}

form {	
		background: whitesmoke;
		color: black;
		padding-left: 10%;
		font-size: 1.2rem;
		opacity: .6;
}
		
.contact  h2 {
		font-family:  'Candara';
		font-size: xx-large;
		font-weight: 600;
		text-align: center;
		padding: 2vh;
		color: black;
		}


input[type=email] {
  width: 90%;
  padding: .8rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}

input[type=text] {
  width: 90%;
  border: 1px solid black;
  margin: 0px 0px;
  padding: .8rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}

input[type=reset] {
  width: 100px;
	padding: 5px;
	border: 1.8px solid black;
	border-radius: 10px;
	background-color: #F1F1E6;
	color: black;
	font-family: 'candara';
	font-size: 1rem;
	margin-right: 2vw;
	font-weight: 800;
}

button {
	width: 100px;
	padding: 5px;
	border-radius: 10px;
	background-color: #FEBE51;
	border: 1.8px solid black;
	color: black;
	font-family: 'candara';
	font-size: 1rem;
	font-weight: 800;
}


footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1vh;
	border-top: 0px solid whitesmoke;
	background-color: #6389AB;
	opacity: 1;
	display: flex;
	padding-bottom: 1vh;
}

footer img {
	width: 25px;
	height: 25px;
	border: 1px solid white;
	border-radius: 15px;
	padding: 5px;
}

footer img:hover {
	width: 30px;
	height: 30px;
	transition: .5s;
}


footer p {
	font-family: ebrima;
	font-weight: 500;
	text-align: center;
	color: white;
	width: 60vw;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	font-size: 1.1rem;
	border: 0px solid whitesmoke;
	transform: translateY(+10%);
}

footer a {
	text-decoration: none;
	color: #FFFF00;
}



table {

	width: 60%;
	margin-left: auto;
	margin-right: auto;
	padding: 1cm;
	background-color: #6389AB;
	font-family: 'gadugi';
	font-size: 1.1rem;
	color: white;
	border-collapse: collapse;
	text-align: center;
	margin-top: 1cm;
	margin-bottom: 1.5cm;
	opacity: .7;
	}

table:hover {
	opacity: 1;
	transition: 1s;
}

table a {
	color: yellow;
}


	@media (max-width: 800px) {
		table {
			font-size: 5mm;
			}
			}	

@media (max-width: 800px) {
	table {
	width: 90%;
}
}
	
	table th, td, tr {
		border: 1px solid white;
		padding: .5cm;
}

table td {
	width: 50%;
}

.table {
	width: 40vw;
}

.table td {
	padding: .5cm;
}


@media (max-width: 1400px) {
.table {
	width: 90%;
}
}



	caption {
	background: #6389AB;
	border: 1px solid white;
	text-align: center;
	opacity: .7;
}

caption:hover {
	opacity: 1;
	transition: 1s;
	color:white;
}

	
.general {
	color: black;
	width: 50%;
	background: whitesmoke;
	text-align: left;
	padding: 1cm;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5cm;
	margin-bottom: 1cm;
	font-family: 'gadugi';
	border: 1px solid black;
	border-radius: 30px;
	opacity: .7;
}

.general:hover {
	opacity: 1;
	transition: 1s;
}

@media (max-width: 800px) {
.general {width: 80%;
			  margin-left: auto;
			  margin-right: auto;
	}
}


.general h2 {
	font-size: 30px;
	text-align: center;
	font-family: 'candara';
}

.general p {
	font-size: 1.1rem;
	text-align: center;
}

@media (max-width: 800px) {
	.general p {
		font-size: 5mm;
		}
		}