body {	background: #1f2a4a; font-family: "Roboto", sans-serif; }
	
	h1 { font-family: "Roboto", sans-serif;  font-weight: 900 !important; font-size: 100px !important; text-shadow: 5px 5px 7px black; }
	#intro { color: #eee; padding: 70px 0; background: #1b223f; }
	#intro h2 { font-family: "Audiowide", sans-serif; font-weight: 400; font-style: normal; font-size: 40px; padding-bottom: 20px; } 
	#intro h4 { font-weight: 900; padding-bottom: 50px; } 
	#intro ul { list-style: none; padding: 0; margin: 0px 40px 40px 40px; }
	#intro li { display: block; width: 100%; padding: 10px 0;}
	#intro li img.bullet { height: 30px; }
	#intro li img.ico { float: left; max-width: 60px; padding-right: 15px;}
	
	#arrangementen { color: #eee; padding: 70px 0;  background: #244368 url("data/watermerk.webp") bottom -100px left 100px no-repeat; background-size: 28%; } 
	#arrangementen h2 { width: 100%; text-align: center; font-family: "Audiowide", sans-serif; font-weight: 400; font-style: normal;font-size: 75px; }
	#arrangementen h5 { width: 100%; text-align: center; font-weight: 900; text-transform: uppercase;}
	#arrangementen .card { padding: 30px; color: #333; min-height: 360px; margin: 20px 0; background: #eee;}
	#arrangementen .card h3 { font-weight: 900; text-transform: uppercase;}
	#arrangementen .card em { font-size: 10px; }
	#arrangementen .card.blue { background-color: rgba(29,19,52,.8); }
	#arrangementen .card.pink {  background-color: rgba(96,49,120,.8); }
	#arrangementen .card.purple {  background-color: rgba(38,25,70,.8); }
	
	#activities { background: #28557e; padding: 80px 0; color: #fff; }
	#activities h2 { font-family: "Audiowide", sans-serif; font-weight: 400; font-style: normal; font-size: 40px; margin-bottom: 25px; }
	#activities .card { padding: 25px; margin-bottom: 20px; min-height: 250px;  }
	#activities .card h3 { font-family: "Roboto", sans-serif;  font-weight: 900 !important; font-size: 40px;  }
	#activities .card .txt { min-height: 200px; }
	#activities .card img { width: 100%; height: 200px; object-fit: cover; }


	#planung { padding: 70px 0; color: #fff; }
	#planung h2 { width: 100%; text-align: center; font-family: "Pacifico", cursive; font-size: 55px;}
	#planung h5 { width: 100%; text-align: center; font-weight: 900; text-transform: uppercase;}
	#planung .card { padding: 30px; min-height: 400px; margin: 20px 0; background: #244368; color: #fff; }
	
	#nlfp { background: #12182b; padding: 30px 0; margin-top: 25px; }
	#nlfp img.logo { display: inline-block; width: 400px; margin: 0 20px; }
	#nlfp .socials { display: inline-block;  }
	#nlfp .socials img { display: inline-block; width: 75px; margin: 0 15px;}
	
	#divisions { background: #1f2a4a; color: #eee; text-align:center; padding: 50px 50px; }
	#divisions h2 { font-weight: 900; width: 100%; text-align: center; padding-bottom: 20px; }
	#divisions .container { max-width: 1000px; }
	#divisions img { margin: 20px; }
	#divisions .container { max-width: 1000px; }
	
	#footer { background: #111; padding: 20px; color: #eee; text-align: center; width: 100%; font-weight: 600; }
	
	
  /* Basissectie */
  .hero-full {
    position: relative;
    height: 60vh;
    overflow: hidden;
    background-color: #222f57;
  }
.hero-full h1 { font-family: "Audiowide", sans-serif; font-weight: 400; font-style: normal; }

  /* Video */
  .hero-full video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Overlay voor tekst + logo */
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2;
  }

	.hero-bg {
	  position: absolute;
	bottom: 0px; left: 0px;
	}
	.hero-bg img { width: 100%; }
	
	
  /* Logo linksboven */
  .hero-logo {
    max-width: 380px;
    height: auto;
    z-index: 3;
  }

  /* Tekst in het midden */
  .hero-content {
    z-index: 3;
    animation: fadeInUp 1.5s ease forwards;
  }

  /* Gradient over hele breedte onderaan */
  .hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #1f2a4a 100%);
    z-index: 3;
    pointer-events: none;
  }

  /* Eenvoudige fade-in animatie */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsief gedrag */
  @media (max-width: 768px) {

	  h1 { font-family: "Audiowide", sans-serif; font-weight: 400; font-style: normal; font-size: 50px !important; }
	  
    .hero-full {
      height: 50vh;
    }
    .hero-logo {
      width: 320px;
    }
    .hero-content h1 {
      font-size: 1.75rem;
    }
    .hero-content .btn {
      font-size: 1rem;
    }
	#divisions { color: #eee; text-align:center; padding: 50px 10px; }
	#divisions a { display: inline-block; padding: 0px; margin: 0px !important;}
	#divisions img { padding: 10px; margin: 0px !important; }
	#nlfp img.logo { display: inline-block; width: 100%; max-width: 300px; margin: 0 20px; }
	#nlfp .socials { display: inline-block;  }
	#nlfp .socials img { display: inline-block; width: 50px; margin: 20px 15px;}	 
	#intro h2 { font-family: "Roboto", sans-serif;  font-weight: 900 !important; font-size: 25px; }
	#ruffs h2 { font-family: "Roboto", sans-serif;  font-weight: 900 !important; font-size: 25px; }
	  
  }


.attraction-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    transition: transform .3s ease;
	text-decoration: none;
	filter: drop-shadow(0 0 0px rgba(255,120,0,.4));	
}

.attraction-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;

    background:
        radial-gradient(
            250px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 120, 0, 0.18),
            transparent 60%
        );
}

.attraction-card:hover::before {
    opacity: 1;
}

.attraction-card:hover {
    transform: translateY(-4px);
	filter: drop-shadow(0 0 12px rgba(10,10,10,.4));
}


#divisions img {
    opacity: .75;
    transition: all .35s ease;
}

#divisions:hover img {
    opacity: .55;
}

#divisions a:hover img {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(255,120,0,.4));
}

.hero-content h1 {
    animation: heroEpic 4s ease-in-out infinite;
}

@keyframes heroEpic {

    0%,100% {
        transform: scale(1);
        filter: brightness(1);
        text-shadow:
            0 0 10px rgba(255,120,0,.3);
    }

    50% {
        transform: scale(1.05);
        filter: brightness(1.15);
        text-shadow:
            0 0 20px rgba(255,120,0,.7),
            0 0 40px rgba(255,120,0,.5),
            0 0 80px rgba(255,120,0,.3);
    }

}