/*
 * Custom CSS - www.studiovanzwet.nl
 * 
 *     (  )   (   )  )
 *      ) (   )  (  (
 *      ( )  (    ) )
 *      _____________
 *     <_____________> ___
 *     |             |/ _ \
 *     |               | | |
 *     |               |_| |
 *  ___|             |\___/
 * /    \___________/    \
 * \_____________________/
 * 
 * Let's turn coffee (or another beverage) into website code.
 *
 */

/* Pebem Vastgoed */


:root {
    --darkgrey: rgb(77,87,100);
    --lightgrey: rgb(207,211,217);
    --taupe: rgb(169,143,111);
   
}

html, body, p {font-family: 'Inter', sans-serif; font-weight: 300; font-style: normal; font-optical-sizing: auto; }
html, body {background-color: var(--lightgrey); color: var(--darkgrey)}
html, body {overflow-x: hidden; }


.svz .rounded-pb {border-radius: 1.5rem;}

.HeuvelGroteskExtBd {font-family: 'HeuvelGroteskExtBd';}

a.bg-lichtgrijs:hover .grijs {color: #FFF; background-color: var(--taupe);}
a.bg-lichtgrijs:hover .taupe {color: #FFF; background-color: var(--darkgrey);}
a.bg-grijs:hover .taupe {color: #FFF; background-color: var(--darkgrey);}
a.bg-grijs:hover {background-color: var(--taupe); color: #FFF;}
a.bg-lichtgrijs:hover {color: var(--taupe)}

.svz .img-responsive {width: 100%!important; height: auto;}
.svz .img-cover {width: 100%; height: 100%; object-fit: cover;}


.svz a.anchor {
display: block;
position: relative;
top: -160px;
visibility: hidden;
}

.bg-grijs {background-color: var(--darkgrey); color: #FFF;}
.bg-lichtgrijs {background-color: var(--lightgrey); color: var(--darkgrey);}
.bg-taupe {background-color: var(--taupe); color: #FFF;}

.txt-taupe {color: var(--taupe);}

/* NAVBAR */
.svz .navbar-brand img {width: 250px;}

.svz .navbar {
    z-index: 1050;
}

.svz .navbar-toggler {
    position: relative;
    z-index: 1060;
}

.svz .navbar-toggler {color: var(--taupe);}

.svz .navbar-toggler, .navbar-toggler:active, .navbar-toggler:hover, .navbar-toggler:link {border: none; outline:0; outline: none; font-size: 1rem;}

.svz .navbar-toggler:focus {outline:0 !important; box-shadow: none !important;}


/* Alleen zichtbaar wanneer geopend */
.svz .navbar-collapse:not(.show) {
    display: none;
}

.svz .navbar-dark a {cursor: pointer; }

/* Fullscreen menu */
.offcanvas-top {
    height: 100vh !important;
    border-bottom: 0 !important;
    background-color: var(--darkgrey);
}

/* Menu-items */
.offcanvas .nav-link {
    color: var(--taupe);
    font-size: 3rem;
    text-transform: uppercase;
}

.offcanvas .nav-link:hover,
.offcanvas .nav-link.active {
    color: #fff;
}

/* Hamburger altijd zichtbaar */
.custom-navbar {
    z-index: 1060;
}

.custom-navbar {
    background: linear-gradient(
        to bottom,
        rgba(77,87,100,1) 0%,
        rgba(77,87,100,0) 100%
    );
    transition: background 0.3s ease;
}

.custom-navbar.scrolled {
    background: rgba(77,87,100,1);
}

.navbar-toggler {
    border: 0;
    box-shadow: none !important;
}




/* HERO VIDEO */

.hero-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop standaard */
.hero-video-mobile {
    display: none;
}


/* DONKERE OVERLAY */

.hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SCHUINE KANT */

.verloopgrijsgoud {  background: linear-gradient(to right, var(--darkgrey), var(--taupe));}
.verloopgoudgrijs {  background: linear-gradient(to left, var(--darkgrey), var(--taupe));}

.slant {
  position: relative;
  color: #FFF;
  z-index: 1;
}


a.skew-button {
  display: inline-flex;
  align-items: center;
  /*
    background-color: var(--lightgrey); 
  color: #000000; 
    */
  border: none;
  cursor: pointer;
  overflow: hidden; /* Zorgt dat de achtergrond netjes binnen de ronde hoeken blijft */
  transform: skewX(-30deg);
    border-radius: 5px; 
    text-decoration: none;
    height: 30px;
    z-index: 15;
    position: relative;
    margin-bottom: 1rem;
}

.skew-button .tekst {  
        text-transform: uppercase;
padding: 0 20px;
    transform: skewX(30deg);
}

/* Het taupe blokje aan de rechterkant */
.icon-box.taupe {
  background-color: var(--taupe); 
  color: #FFF; 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 5px; 
        border: none;
    padding: 0 10px;
    transition: background-color 0.3s ease, color 0.3s ease;

}

.icon-box img {
    transform: skewX(30deg);
    margin: auto; 
    height: 17px;
}

/* Het taupe blokje aan de rechterkant */
.icon-box.grijs {
  background-color: var(--darkgrey); 
  color: #FFF; 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 5px; 
        border: none;
    padding: 0 10px;
    transition: background-color 0.3s ease, color 0.3s ease;

}


/* Zorg dat de container de juiste basis vormt */
.image-container {
  position: relative;
  width: 100%;
    
    border-radius: 2vw;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Het verloop aan de onderkant */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75%; /* Bepaalt hoe hoog het verloop begint */
    background: -webkit-linear-gradient(transparent 0%, var(--darkgrey) 100%);
    background: -o-linear-gradient(transparent 0%, var(--darkgrey) 100%);
    background: linear-gradient(transparent 0%, var(--darkgrey) 100%);
    pointer-events: none; /* Zorgt dat je door de laag heen kunt klikken */
      mix-blend-mode: multiply; 

}

/* De positionering van de tekst */
.text-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  color: white; /* Wit contrasteert goed met de donkere overlay */
}

.text-content h3 {font-size: 2vw;}



/* schuin kader */

.schuin-kader {
  width: 250px;           
  height: 200px;          
  overflow: hidden;      
  border-radius: 2rem;    
  transform: skewX(-30deg); 
}

.schuin-kader img {
  width: 100%;
  height: 100%;
  object-fit: cover;      
  transform: skewX(30deg); 
  scale: 1.5;             
}

.uitstekende-kolom, .uitstekende-kolom-links {margin-bottom: 3rem;}
 

.footer-logo {display: none;}




/* project swiper */

.projectSwiper {
    overflow: visible;
    position: relative;
}


.swiper-slide-active .project-card:hover .project-overlay, .swiper-slide .project-card:hover .project-overlay {
    opacity: 0;
}

.projectSwiper .swiper-slide:hover {opacity: 1;}

.project-card {
    position: relative;
    display: block;
    height: 310px;

    border-radius: 40px;
    overflow: hidden;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
}

.project-card:hover img {
    transform: scale(1.05);
}

.projectSwiper .swiper-slide {
    opacity: .4;
    transition: opacity .4s ease;
}

.projectSwiper .swiper-slide-active {
    opacity: 1;
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: .6;
    transition: opacity .4s ease;
    pointer-events: none;
}

.project-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    background: -webkit-linear-gradient(transparent 0%, var(--darkgrey) 100%);
    background: -o-linear-gradient(transparent 0%, var(--darkgrey) 100%);
    background: linear-gradient(transparent 0%, var(--darkgrey) 100%);
    pointer-events: none; /* Zorgt dat je door de laag heen kunt klikken */
    mix-blend-mode: multiply;
}

.content {
    position: absolute;
    left: 40px;
    bottom: 30px;

    color: white;
    z-index: 2;
}


.project-slider {
    position: relative;
}

.project-nav .swiper-button-prev::after,
.project-nav .swiper-button-next::after {
    display: none;
}


.projectSwiper .swiper-button-prev,
.projectSwiper .swiper-button-next {
padding: 10px ;
    background: var(--taupe);
    border-radius: 5px;
width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    transform: skewX(-30deg);

}

.projectSwiper .swiper-button-prev i,
.projectSwiper .swiper-button-next i {
    transform: skewX(30deg);
}


.projectSwiper .swiper-button-prev,
.projectSwiper .swiper-button-next {
    top: 0;
    margin-top: 0;
    z-index: 20;
}

.projectSwiper .swiper-button-next {
    right: 0;
}

.projectSwiper .swiper-button-prev {
    right: 50px;
    left: auto;
}

.swiper-button-prev svg,
.swiper-button-next svg {
    display: none !important;
}


.achtergrond-fixed  {background-size: cover; background-position: center; background-attachment: fixed; min-height: 60vh;}



.socials a {
    display: inline-block;
    padding: 2px 5px;
    background-color: var(--darkgrey);
    color: #FFF;
    transform: skewX(-30deg);
    border-radius: 5px; 
    align-items: center;
}


.socials a i, .socials-contact a i {
    transform: skewX(30deg);
}

.socials-contact a {
    display: inline-block;
    padding: 2px 5px;
    background-color: var(--taupe);
    color: #FFF;
    transform: skewX(-30deg);
    border-radius: 5px; 
    align-items: center;
}



.svz .carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: none;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    margin: 0 6px;

}

.svz .carousel .carousel-indicators {
    bottom: 20px;
}

.svz .carousel .carousel-indicators .active {
    opacity: 1;
}

.svz #projectCarousel img {border-radius: 40px;}



/* projecten pagina */
.oneven {
    background-color: var(--lightgrey);
    color: var(--darkgrey);
    padding: 30px 12px;
}

.even {
    background-color: var(--darkgrey);
    color: #fff;
    padding: 30px 12px;

}

img.carousel-afbeelding {border-radius: 40px;}









.logoblock {margin-top: 24px;}
.logoblock img:nth-of-type(1) {height: 56px; margin-right: 45px;}
.logoblock img:nth-of-type(2) {height: 32px;}

.rondhoek40 {border-radius: 40px;}
.hero-caption {position: absolute; width: 100%; height: 15%; text-align: center; bottom: 0;}



/* TEAM SWIPER */

.team-card{
    perspective:1200px;
    min-height:470px;
    border-radius:40px;
        transition:transform .25s ease;

}

.team-card__inner{
    position:relative;
    width:100%;
    height:100%;
    min-height:470px;
    transition:transform .7s;
    transform-style:preserve-3d;
    
}

.team-card:hover .team-card__inner,
.team-card.is-flipped .team-card__inner{
    transform:rotateY(180deg);
}

.team-card__front,
.team-card__back{
    position:absolute;
    inset:0;
    background:var(--darkgrey);
    border-radius:40px;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    display:flex;
    flex-direction:column;
}

.team-card__back{
    transform:rotateY(180deg);
    justify-content:center;
    align-items:center;
    padding:35px;
}

.team-card__image{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
}

.team-card__content{
    padding:24px;
    color:#fff;
}

.team-card__name{
    font-size:1.35rem;
    font-weight:600;
    margin-bottom:3px;
}

.team-card__function{
    opacity:.75;
}

/* Achterzijde */

.team-card__back-content{
    width:100%;
    text-align:center;
    color:#fff;
}



.team-card__back-name{
    font-size:1.45rem;
    font-weight:600;
}

.team-card__back-function{
    color:var(--taupe);
    margin-top:4px;
    margin-bottom:25px;
}

.team-card__back hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.15);
    margin:25px auto;
    width:70%;
}

.team-card__contact{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:18px;
}

.team-card__contact i{
    color:var(--taupe);
    width:18px;
    text-align:center;
}

.team-card__contact a{
    color:#fff;
    text-decoration:none;
}

.team-card__contact a:hover{
    color:var(--taupe);
}

.team-card__linkedin{
    display:inline-flex;
    align-items:center;
    margin-top:20px;
    color:#fff;
    text-decoration:none;
}

.team-card__linkedin:hover{
    color:var(--taupe);
    text-decoration:none;
}

.team-card__linkedin .skewknop{
    display:inline-block;
    padding:2px 6px;
    background:var(--taupe);
    border-radius:5px;
    transform:skewX(-30deg);
    margin-right:8px;
}

.team-card__linkedin .skewknop i{
    transform:skewX(30deg);
    color:#fff;
}

.team-nav .swiper-button-prev,
.team-nav .swiper-button-next {
padding: 10px ;
    background: var(--taupe);
    border-radius: 5px;
width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    transform: skewX(-30deg);

}

.team-nav .swiper-button-prev i,
.team-nav .swiper-button-next i {
    transform: skewX(30deg);
}


.team-nav .swiper-button-prev,
.team-nav .swiper-button-next {
    top: 0;
    z-index: 20;
    margin: 0;
}

.team-nav .swiper-button-next {
    right: 50px;
}

.team-nav .swiper-button-prev {
    right: 100px;
    left: auto;
}


/* Large devices (desktop, 992px and up)*/
@media (min-width: 992px) { 

    

    
.text-content h3 {font-size: 1.3vw;}
    
    
.schuin-kader {
  width: 500px;           
  height: 400px;          
  overflow: hidden;      
  border-radius: 2rem;    
  transform: skewX(-30deg); 
}    
    
    .uitstekende-kolom {
        position: absolute;
        right: 8.33333%; /* Lijn uit met de Bootstrap grid (offset-lg-1 compensatie) */
        top: -15%;
        transform: translateY(-50%); /* Centreert de kolom verticaal t.o.v. de rij */
        z-index: 10;
    }
    

    
    
.oneven {
    background-color: var(--lightgrey);
    color: var(--darkgrey);
    padding: 120px 12px;
}

.even {
    background-color: var(--darkgrey);
    color: #fff;
        padding: 120px 12px;

}
}


@media (min-width: 1199.98px) {
    
    .slant.rechts::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%; /* Breed genoeg om de hoek te dekken */
  background-color: var(--lightgrey); /* Zelfde kleur als de wrapper */
  /* Een hoek van 60° t.o.v. de onderkant = 30° skew */
  transform: skewX(-30deg); 
  transform-origin: top right;
  /* Verschuif het masker zodat de lijn rond de 90% (boven) start */
  margin-right: -40%; 
  z-index: -1;
}
    
.slant.links::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  bottom: 0;
  width: 50%; /* Breed genoeg om de hoek te dekken */
  background-color: var(--lightgrey); /* Zelfde kleur als de wrapper */
  
  /* Een hoek van 60° t.o.v. de onderkant = 30° skew */
  transform: skewX(-30deg); 
  transform-origin: top right;
  
  /* Verschuif het masker zodat de lijn rond de 90% (boven) start */
  margin-left: -33%; 
  z-index: -1;
} 
}


@media (min-width: 1399px) {
    
    
    
    
    .footer-logo {position: absolute; top: -25px; left: 80px; z-index: 10; display: inline-block; }

          .uitstekende-kolom-links {
        position: absolute;
        left: 8.33333%; /* Lijn uit met de Bootstrap grid (offset-lg-1 compensatie) */
        top: 50%;
        transform: translateY(-50%); /* Centreert de kolom verticaal t.o.v. de rij */
        z-index: 10;
    }
    
}


/* Mobiel video player */
@media (max-width: 767.98px) {

    .hero-video-desktop {
        display: none;
    }

    .hero-video-mobile {
        display: block;
    }

}