@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
    --dark: #000000;
	--white: #FFFFFF;
	--lightgrey: #111111;
    --bs-nav-link-hover-color: #000000
}

body {
    font: 300 16px 'Nunito Sans', sans-serif;
    color: var(--dark);
}

h1, h2, h3, h4, h5 {font-weight: 600;}
h1 {font-size: 32px; text-transform: uppercase; margin-bottom: 1.5rem;}
h2 {font-size: 32px}
h3 {font-size: 28px;}
h4 {font-size: 24px;}
h5 {font-size: 18px;}

main p {
    line-height: 1.6;
}

a {
	transition: all 300ms linear;
	cursor: pointer;
	color: var(--dark);
    text-decoration: none;
}

a:hover {
  color: var(--lightgrey);
}

a.link, body.landingspage section a {
  border-bottom: 1px solid #dcdcdc;
}

a.link:hover, body.landingspage section a:hover {
  border-bottom: 1px solid var(--dark);
}

strong {
    font-weight: 600;
}

*:focus {outline: none !important; box-shadow: none !important;}


/* HEADER */

header .navbar-toggler {
  font-size: 3rem;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: inherit;
}

header .logo {
    width: 10rem;
}

header .brand-logo {
    display: flex;
}

header .brand-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    text-decoration: none;
}

header .ht-logo {
    width: 400px;
    height: auto;
    display: block;
}

header .subline {
    margin-top: 10px;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler svg {
  height: 2rem;
  width: 2rem;
  margin-top: -1.7rem;
  transition: transform .2s ease-in-out;
}

.navbar-toggler:hover svg {
  transform: rotate(45deg);
}

.offcanvas {
  --bs-offcanvas-width: 500px;
  padding: 2rem;
}

.offcanvas-header .btn-close {
  height: 2rem;
  width: 2rem;
  background: none;
  opacity: 1;
}

.offcanvas-header .btn-close svg {
  transform: rotate(45deg);
}

.navbar-nav {
  font-size: 2.5rem;
  font-weight: 600;
  color: inherit;
}


/* HOME */

.fixed-height-img {
    height: 300px;
    object-fit: cover;
    width: 100%;
}

.side-img {
    height: 500px;
    object-fit: cover;
    width: 100%;
}

.small-rect {
    height: 300px;
    object-fit: cover;
    width: 100%;
}

.small-square {
    height: 300px;
    object-fit: cover;
    width: 300px;
	display: block;
}

.zoom-img {
  overflow: hidden;
}

.zoom-img img {
  transition: all .6s ease;
}

.zoom-img img:hover {
  transform: scale(1.1);
}

.quote {
  font-weight: 800;
  font-size: 2rem;
}


/* FOOTER */

footer .logo {
    width: 250px;
}

footer p {
  margin-bottom: 0;
}

footer a {
  color: var(--bs-nav-link-color);
  text-decoration:none;
}

footer a:hover {
  color: var(--bs-nav-link-hover-color);
}



/* PROJECTS DETAIL PAGE */

.header-img {
    height: 400px;
    object-fit: cover;
    width: 100%;
}

.grid-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 48px; 
}

.grid-item {
    flex: 1 1 100%;
}
.sticky-top {
  top: 30px;
}

.projectdetails {
  padding-top: -30px;
}

.projectinfo {
  margin-top: 3rem;
}


/* OVER ONS */

.member img{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.member:hover img {
  filter: grayscale(0%)
}

.team-text, #omschrijving-team h4 {
	letter-spacing: 0.3rem;
}

/* NIEUWS */

.wp-block-image img{
	height: 400px;
	object-fit: cover;
}





/* RESPONSIVE
=====================================*/


@media (min-width: 768px) {
  
  .navbar-expand-xl .navbar-nav .nav-link {
      padding-right: 1.2rem;
      padding-left: 1.2rem;
  }

}


@media (min-width: 992px) {
  
  main p {
      text-align: justify;
  }

  header .name, header .navbar-toggler {
    font-size: 4rem;
    line-height: 4rem;
  }

  header .logo {
      width: 12rem;
  }

  .grid-layout {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto auto;
      gap: 48px;
  }

  .image-1 {
      grid-column: 1;
      grid-row: 1 / span 2;
  }

  .image-2 {
      grid-column: 2 / span 2;
      grid-row: 1;
  }

  .image-3 {
      grid-column: 1;
      grid-row: 3;
  }

  .image-4 {
      grid-column: 2 / span 2;
      grid-row: 2 / span 2;
  }

  .side-img {
    height: 648px;
  
  }

  .small-rect {
      height: 400px;
  }
  
  body.homepage .quote {
    max-width: 80%;
  }
  
  .projectinfo {
    margin-top: 106px;
  }

}

/* homepage */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: auto; 
    gap: 24px; 
}

.grid-item {
    position: relative;
}

.grid-item:hover {
 z-index:99;
}

.item-1 {
    grid-column: 1 / 5;
    grid-row: 1 / 6; 
}

.item-2 {
    grid-column: 4 / 7;
    grid-row: 2 / 5;   
}


.item-3 {
    grid-column: 7 / 13; 
    grid-row: 2 / 5;    
}

.item-4 {
    grid-column: 5 / 12;
    grid-row: 5 / 7;    
}

.item-5 {
    grid-column: 2 / 7;
    grid-row:  6 / 8;
	z-index: 2;
}

.item-6 {
    grid-column: 3 / 6; 
    grid-row: 8 / 9;  
	margin-top: -24px;
	z-index: 2;
}

.item-7 {
    grid-column: 6 / 13;
    grid-row: 7 / 10;   
}

.item-8 {
    grid-column: 1 / 11; 
    grid-row: 10 / 12;   
}
.item-9 {
    grid-column: 10 / 13; 
    grid-row: 11 / 13;    
}
.item-10 {
    grid-column: 1 / 5;
    grid-row: 12 / 14; 
}
.item-11 {
    grid-column: 6 / 10;
    grid-row: 12 / 14;    
}
.item-12 {
    grid-column: 9 / 12; 
    grid-row: 13 / 16;  
}
.item-13 {
    grid-column: 1 / 7; 
    grid-row: 14 / 16;    
}
.item-14 {
    grid-column: 5 / 8;
    grid-row: 15 / 17; 
}
.item-15 {
    grid-column: 9 / 12; 
    grid-row: 16 / 18;  
}
.item-16 {
    grid-column: 2 / 9; 
    grid-row: 17 / 19;    
}

@media (max-width: 992px) {

	
.item-1 {
    grid-column: 1 / 7;
    grid-row: 1 / 4; 
}

.item-2 {
    grid-column: 7 / 13;
    grid-row: 2 / 3;   
}


.item-3 {
    grid-column: 1 / 6; 
    grid-row: 4 / 6;    
}

.item-4 {
    grid-column: 7 / 13;
    grid-row: 4 / 6;    
}

.item-5 {
    grid-column: 1 / 7;
    grid-row:  6 / 8;
}

.item-6 {
    grid-column: 7 / 13; 
    grid-row: 6 / 8;
	margin-top: 0px;
}

.item-7 {
    grid-column: 1 / 13;
    grid-row: 8 / 10;   
}

.item-8 {
    grid-column: 1 / 13; 
    grid-row: 10 / 12;   
}
.item-9 {
    grid-column: 1 / 7; 
    grid-row: 12 / 14;    
}
.item-10 {
    grid-column: 7 / 13;
    grid-row: 12 / 14; 
}
.item-11 {
    grid-column: 1 / 7;
    grid-row: 15 / 16;    
}
.item-12 {
    grid-column: 7 / 13; 
    grid-row: 14 / 17;  
}
.item-13 {
    grid-column: 1 / 13; 
    grid-row: 17 / 19;
}
.item-14 {
    grid-column: 1 / 7;
    grid-row: 19 / 21; 
}
.item-15 {
    grid-column: 7 / 13; 
    grid-row: 19 / 21;  
}
.item-16 {
    grid-column: 1 / 13; 
    grid-row: 21 / 23;    
}
}
@media (max-width: 600px) {


    .grid-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
    }

    .grid-item {
        grid-column: 1 / -1; /* Make each item span the full width */
    }
	.grid-item h1 {
        margin-bottom: 0;
    }

    .item-1 {
        grid-row: 1;
    }

    .item-2 {
        grid-row: 2;
		max-width: 70%;
		margin-left: 25%;
    }

    .item-3 {
        grid-row: 3;
    }

    .item-4 {
        grid-row: 4;
		max-width: 70%;
    }

    .item-5 {
        grid-row: 5;
		max-width: 70%;
		margin-left: 30%;
    }
	.item-6 {
        grid-row: 6;
		max-width: 75%;
		margin-left: 12.5%;
    }

    .item-7 {
        grid-row: 7;
    }

    .item-8 {
        grid-row: 8;
    }

    .item-9 {
        grid-row: 9;
		max-width: 60%;
		margin-left: 20%;
    }

    .item-10 {
        grid-row: 10;
    }
	.item-11 {
        grid-row: 11;
		max-width: 60%;
		margin-left: 40%;
    }

    .item-12 {
        grid-row: 12;
		max-width: 80%;
    }

    .item-13 {
        grid-row: 13;
		max-width: 60%;
		margin-left: 40%;
    }

    .item-14 {
        grid-row: 14;
		max-width: 70%;
		margin-left: 15%;
    }

    .item-15 {
        grid-row: 16;
		max-width: 60%;
		margin-left: 30%;
    }
    .item-16 {
        grid-row: 15;
		
    }
}
.project-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem; /* Adds spacing between categories */
    justify-content: flex-start; /* Align categories to the left */
}

.project-categories li {
    display: inline;
}

.project-categories a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    padding: 8px 15px; 
    border: 2px solid transparent;
    transition: all 0.3s;
}

.project-categories a:hover,
.project-categories a.active {
	color: #000; /* Red text color for active/hovered category */
    border-bottom: 2px solid #000;
}

.mobile-filter{
	color: #000;
	border: 1px solid #000;
	font-weight: bold;
}

.mobile-filter:focus{
	border-color: #000;
}