/* Algemene stijlen */
@font-face {
  font-family: 'Napoli';
  src: url(fonts/Napoli.otf) format('OpenType');
}


/* Grid */

.parent {
	display: grid;
	grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
	grid-template-rows: 5fr 1fr repeat(3, 4fr) 0.8fr 3.7fr 0.2fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;

}

.card1 { grid-area: 1 / 2 / 2 / 3; }
.card2 { grid-area: 1 / 4 / 2 / 5; }
.card3 { grid-area: 2 / 3 / 3 / 4; }
.card4 { grid-area: 3 / 2 / 4 / 3; }
.card5 { grid-area: 3 / 4 / 4 / 5; }
.card6 { grid-area: 4 / 2 / 5 / 3; transform: translateX(35%);}
.card7 { grid-area: 4 / 4 / 5 / 5; }
.card8 { grid-area: 5 / 2 / 6 / 3; }
.card9 { grid-area: 5 / 4 / 6 / 5; }
.card10 { grid-area: 6 / 3 / 7 / 4;}
.card11 { grid-area: 7 / 2 / 8 / 3;}
.card12 { grid-area: 7 / 4 / 8 / 5;}
.card13 { grid-area: 8 / 3 / 9 / 4;}


html {
	scroll-behavior: smooth; /* Zorgt voor smooth scrollen naar secties */
}

	
body {
 	margin: 0;
  	font-family: 'napoli', sans-serif;
 	background: url(images/background.png) no-repeat; /* Achtergrondafbeelding */
  	background-size: cover;
  	background-color: #000;
	color: #fff;
  	height: 100vh;
}


h2 { /* Voor Hero section en kopjes */
	font-family: 'Montserrat Semi', sans-serif;
	font-size: 2rem;
	letter-spacing: 2px;
	margin-bottom: 0px;
}

p  { /* Voor Hero section en verdere paragrafen */
	font-family: 'Montserrat', sans-serif;
}

.background { /* Achtergrond van de website */
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	width: 100%;
}

.button { /* Voor alle buttons op de website */
	background-color: transparent; /* Transparante achtergrond */
    color: white; /* Witte tekst */
    border: 2px solid white; /* Witte outline met 10px dikte */
	border-radius: 25px;
    padding: 10px 40px; /* Binnenruimte van de knop */
    font-size: 0.8rem; /* Tekstgrootte */
    text-decoration: none; /* Geen onderstreping */
    cursor: pointer; /* Hand-icoon bij hover */
    transition: all 0.5s ease; /* Zachte animatie voor hover */
}

.button:hover {
    background-color: white; /* Witte achtergrond bij hover */
    color: black; /* Zwarte tekst bij hover */
}


/* Transparante Header */
.header { 
  	position: fixed; /* Zorgt ervoor dat de header bovenaan blijft */
  	left: 50%; /* Centraal uitlijnen */
  	transform: translateX(-50%);
  	width: 100%; /* Vul de breedte van het scherm */
  	background-color: transparent; /* Transparante achtergrond van de header */
	transition: background-color 0.3s ease;
  	padding: 65px 0px 30px; /* Padding boven en onder 65px, rechts en links 0 */
  	z-index: 1000; /* Zorgt ervoor dat de header altijd boven andere elementen staat (hiërarchie in de code) */
}

/* Tabletweergave (tot 768px breed) */
@media (max-width: 768px) {
	.header {
		padding: 50px 10px 20px; /* Minder padding voor kleinere schermen */
	}
}

/* Mobiele weergave (tot 480px breed) */
@media (max-width: 480px) {
	.header {
		padding: 30px 10px 15px; /* Nog minder padding voor telefoons */
		font-size: 14px; /* Aanpassing voor tekst in de header */
	}
}

.header.scrolled { 
	backdrop-filter: blur(10px);
}



/* Navigatie (header content) */
nav ul {
	list-style: none;
  	margin: 0;
  	padding: 0;
  	display: flex; /* Flexbox-layout op de container */
  	justify-content: center; /* Center de links */
  	gap: 150px; /* Ruimte tussen links */
}

/* Navigatie in een lijn ipv onder elkaar */
nav ul li {
  display: inline-block;
}

nav ul li a {
  	text-decoration: none; /* Geen streep eronder */
  	color: #A4A4A4; /* Tekstkleur */
  	font-size: 18px; /* Lettergrootte */
  	font-weight: bold;
  	transition: background 1s ease; /* Hover-animatie */
}

a:hover {
  	color: #fff; /* Witte kleur bij hover */
}

.active {
  	font-size: 25px; /* Middelste link (home) groter */
	color: #fff;
}

/* Einde css voor de header */


/* Hero Section */

.hero { /* mag weg */
   	display: flex; /* Zet de container als flexbox */
    align-items: center; /* Zorgt dat de elementen verticaal gecentreerd zijn */
}

.hero-text {
	position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Verticaal centreren */
    align-items: flex-start; /* Links uitlijnen */
    height: 100vh; /* Volledige hoogte van de viewport gebruiken */
}

.hero-photo { /* mag weg */
	postition: relative;
  	max-width: 100%; /* Zorgt ervoor dat de foto nooit groter wordt dan zijn container */
	height: 1050px;
	width: auto;
	margin-left: 500px;
	margin-top: -50px; /* De foto iets naar boven plaatsen */
	transition: transform 0.3s ease; /* Soepele overgang */
}

.hero-photo:hover { /* mag weg */
	transform: translateY(-3px); /* Bij hover gaat het plaatje 25px omhoog */
}

.hero-text h1 { /* Voor Hero section */
	font-family: 'Montserrat Semi', sans-serif;
	font-size: 6rem;
	letter-spacing: 2px;
	margin-bottom: -15px;
}

.scroll-arrow {		/* Plaatje om te laten zien dat je naar beneden moet scrollen */  
	height: 50px;
	width: 80px;
	opacity: 0.5;
	margin-left: 41.5%;
}


/* Einde Hero Section */

/* Kop Videografie */
.kop { 
	display: flex;
	text-align: center;
    flex-direction: column;
}

.kop h1 { /* Voor Hero section */
	font-size: 3rem;
	letter-spacing: 2px;
	margin-bottom: -15px;
}

.line { 
	border: 0;  /* Verwijdert de standaardrand van het <hr>-element */
  	height: 2px;  /* Bepaalt de hoogte van de lijn */
  	background-color: #B4B4B4;  /* Kleur van de lijn (grijs) */
  	width: 20%;  /* Breedte van de lijn (80% van de container) */
  	margin: 20px auto -200px;  /* Maakt ruimte boven en onder de lijn en centreert deze */
}

/* Klikbare boxxen */

.container{
	position: relative;
	min-height: 70vh;
	background: transparent;
}

.container .video-container{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	padding: 10px 0;
	margin-left: -50%;
	margin-right: -10%;
	padding-top: 40%;
}

.container .video-container .video{
	height:150px;
	width:200px;
	border:2px solid #FF5700;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,.7);
	cursor: pointer;
	overflow: hidden;
}

.container .video-container .video video{
	height:100%;
	width:100%;
	object-fit: cover;
	transition: .2s linear;
	filter: grayscale(100%); /* Zwart-wit effect */
}

.container .video-container .video:hover video{
	transform:scale(1.05);
	filter: grayscale(0%);
}


.container .popup-video{
	position: fixed;
	top:0; left:0;
	z-index: 100;
	background: rgba(0,0,0,.8);
	height:100%;
	width:100%;
	display:none;
}

.container .popup-video video{ 
	position: absolute;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	width: 750px;
	border-radius: 5px;
	border:3px solid #fff;
	object-fit: cover;
}

.container .popup-video span{
	position: absolute;
	top:15%; right:5%;
	font-size: 50px;
	color: #fff;
	font-weight: bolder;
	z-index: 100;
	cursor: pointer;
}

@media (max-width:768px) {
	.container .popup-video video{
	width:95%;
	}
}

/* Videografie Section */

.videografie {
	display: flex; /* Zet de container als flexbox */
    align-items: center; /* Zorgt dat de elementen verticaal gecentreerd zijn */
    height: 65vh; /* Volledige hoogte van de viewport gebruiken */
	padding-right: 5%;
}

.videografie-text h1 {
	margin-bottom: 30px;
}

.videografie-text p {
	margin-right: -60%;
	margin-bottom: 45px;
}

.videografie-img img { 
  	max-width: 100%; /* Zorgt ervoor dat de foto nooit groter wordt dan zijn container */
	display: flex; /* Zet de container als flexbox */
    align-items: center; /* Zorgt dat de elementen verticaal gecentreerd zijn */
}

.videografie-img { 
	transition: transform 0.3s ease; /* Soepele overgang */
}

.videografie-img:hover { 
	transform:  scale(1.02);
}


/* Webdesign Section */

.webdesign {
	display: flex; /* Zet de container als flexbox */
    align-items: center; /* Zorgt dat de elementen verticaal gecentreerd zijn */
    height: 65vh; /* Volledige hoogte van de viewport gebruiken */
}

.webdesign-text h1 {
	margin-left: -50%;
	margin-bottom: 30px;
}

.webdesign-text p {
	margin-left: -50%;
	margin-bottom: 45px;
}

.webdesign-text a {
	margin-left: -50%;
}

.webdesign-img img { 
  	max-width: 100%; /* Zorgt ervoor dat de foto nooit groter wordt dan zijn container */
    height: auto; /* Hoogte van de foto */
	width: 1300px; /* Houdt de verhouding van de afbeelding intact */
	border-radius: 25px;
}

.webdesign-img { 
	transition: transform 0.3s ease-in-out; /* Soepele overgang */
}

.webdesign-img:hover { 
	transform:  scale(1.02);
}


/* Grafisch Design Section */

.grafisch-design {
	display: flex; /* Zet de container als flexbox */
    align-items: center; /* Zorgt dat de elementen verticaal gecentreerd zijn */
    height: 65vh; /* Volledige hoogte van de viewport gebruiken */
	padding-right: 5%;
}

.grafisch-design-text h1 {
	margin-bottom: 30px;
}

.grafisch-design-text p {
	margin-right: -60%;
	margin-bottom: 45px;
}

.grafisch-design-img img { 
  	max-width: 100%; /* Zorgt ervoor dat de foto nooit groter wordt dan zijn container */
    height: auto; /* Hoogte van de foto */
	width: 1300px; /* Houdt de verhouding van de afbeelding intact */
	border-radius: 25px;
}

.grafisch-design-img { 
	transition: transform 0.3s ease-in-out; /* Soepele overgang */
}

.grafisch-design-img:hover { 
	transform:  scale(1.02);
}

/* Einde Mijn Werk CSS */

/* Contact Kop */

.kop2 { 
	display: flex;
	text-align: center;
    flex-direction: column;
}

.kop2 h1 { /* Voor Hero section */
	font-size: 3rem;
	letter-spacing: 2px;
	margin-bottom: -15px;
}

/* Contact Iconen */

.icon-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh; /* Hoogte van de viewport */
  gap: 20px; /* Ruimte tussen de iconen */
}

/* Individuele iconen en tekst onder Contact */

.icon1 {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
	font-size: 20px;
	margin-top: 25%;
	margin-right: -110%;
}

.icon2 {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
	font-size: 20px;
	margin-top: 36%;
	margin-left: -110%;
}

.iconimg1 {
	height: 200px;
	width: auto;
	margin-top: 40px;
	margin-bottom: -40px;
	transition: transform 0.3s ease; /* Soepele overgang */
}

.iconimg1:hover { 
	transform: scale(1.1); /* Vergroot de afbeelding met 1.2x */
}

.iconimg2 {
	height: 150px;
	width: auto;
	transition: transform 0.3s ease; /* Soepele overgang */
}

.iconimg2:hover { 
	transform: scale(1.1); /* Vergroot de afbeelding met 1.2x */
}

/* Footer */

.footer {
	text-align: center; /* Tekst centreren */
  	padding: 10px; /* Ruimte rondom de tekst */
  	position: static; /* Standaard positie */
}

.highlight {
  color: #FF6700; /* Maak de website in de footer oranje */
}