@charset "UTF-8";
/* CSS Document */

html, body {
      margin: 0;
      padding: 0;
      height: 100%;
		
    }

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

    .video-hero video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }

    .video-content {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 0 0 10px rgba(0,0,0,0.7);
    }
    
    .top-nav a, a:hover, a:active {
        text-decoration: none;
        color: white;
    }
	  
	  .bovenruimte {padding-top:300px;}
	  
    .content {
      z-index: 1;
    }
	  
	  .groen {color:#75a59f;}
	  .bg-groen {background-color:#75a59f; color:white}
	  h1 {font-weight: 800;font-size:50px;text-shadow: 3px 3px 15px #666;}
	  
	  
.navbar-light {background-color:transparent;}
.bg-light {background-color:transparent;}
	  
	  .navbar-transparent {
      background-color: transparent !important;
      box-shadow: none;
    }
	 
	  /* Geen buitenlijn */
.navbar-toggler {
  border: none;
  box-shadow: none;
}

/* Hamburger lijntjes groen maken */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2375a59f' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.navbar-toggler:focus {
    box-shadow: none;
}
	  
    #logo-intro {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1050;
      transition: opacity 0.8s ease-in-out;
    }

    #logo-wrapper {
      width: 60%;
      transition: transform 1s ease-in-out;
      transform-origin: top left;
    }

    #logo-wrapper svg {
      width: 100%;
      height: auto;
    }

    #logo-wrapper svg #studio {
      transform: translateX(200px);
      opacity: 0;
      transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    }

    #logo-intro.animate #logo-wrapper svg #studio {
      transform: translateX(0);
      opacity: 1;
    }

    #main-navbar {
      transition: top 0.5s ease-in-out;
    }

    #logo-navbar {
      visibility: hidden;
    }
	 
	  .logo {
  width: 330px;
  max-width: 100%;
}


	  
	  /* Start verborgen + boven beeld */
    .navbar-slide {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1050; /* Zorg dat hij boven alles staat */
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      transition: transform 0.8s ease, opacity 0.8s ease, visibility 0s linear 0.8s;
		
    }

    /* Na laden wordt hij zichtbaar en schuift hij in beeld */
    .navbar-slide.show {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      transition-delay: 4s;
    }
	  
	  .card {
		padding: 1rem;
		border-radius: 1rem;
		  margin-bottom:15px;
		opacity:0.9;
      transition: transform 0.8s ease, opacity 0.8s ease, visibility 0s linear 0.8s;
	  }
	  .card:hover {
		opacity:1;
		  
	  }
	  
	  .card-title {font-size:25px;color:#75a59f;}
	  .card-text1 {font-size:20px;line-height: normal;color:#75a59f;}
	  .card-text {font-size:16px;line-height: normal;color:#333;}
	  
	  
	.custom-card {
  position: relative;
  background-color: white;
  padding: 0;
  overflow: visible;
  z-index: 1;
  margin: 0;         /* <- voeg deze regel toe */
  border: none;      /* <- en deze, voor zekerheid */
}

.popup-image {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  border-radius: 1rem 1rem 0 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transform: translateY(10px);
  transition: transform 1.5s ease, opacity 1.5s ease;
	margin-bottom:-25px;
}


.custom-card:hover .popup-image {
  transform: translateY(-10px);
  opacity: 1;
  z-index: 10;
}

	    @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
	  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .h1-animate {
    opacity: 0;
letter-spacing: 1px;
	  font-weight:600;
	  animation: fadeIn 0.8s ease forwards;
  }
	 .card-animate {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
  }

  .h1-animate.delay-1 {
    animation-delay: 5s;
  }
	  .card-animate.delay-1 {
    animation-delay: 6s;
  }

  .card-animate.delay-2 {
    animation-delay: 7s;
  }

  .card-animate.delay-3 {
    animation-delay: 8s;
  }
	  
@media (max-width: 1200px) {
.custom-card:hover .popup-image {  opacity: 0;}
}
	 
	  
@media (max-width: 991.98px) {
  #navbarContent {text-align: right;  }
	h1 {font-size:30px}
        .hidden-mobile { display:none; }
	
.custom-card:hover .popup-image {  opacity: 0;}
	.card-title {font-size:25px;}
	.bovenruimte {padding-top:200px;}
}
	  
@media (max-width: 767px) {
  .logo {width: 200px;  }
	.video-hero {height: auto;    }
.bovenruimte {padding-top:100px;}
}