/*** block-homepage-splash ***/

.block-homepage-splash.boatmovie {
  /*background-color: red;*/
  height: 100vh;
}

/* 1. Make the container fill the screen or your desired area */
.block-homepage-splash.boatmovie .video-container {
  position: relative;
  width: 100%;
  height: 100dvh; /* Uses full screen height from our previous step */
  overflow: hidden; /* Hides any video overflow */
}

/* 2. Position the video to fill the entire container */
.block-homepage-splash.boatmovie .background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Forces video to crop and fill without stretching */
  z-index: -1; /* Pushes the video behind the content */
}

/* 3. Style the content text layer on top */
.block-homepage-splash.boatmovie .content {
  position: relative;
  z-index: 1; /* Ensures content stays above the video */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.block-homepage-splash .by4calli {
  max-width: 70%;
  max-height: 280px;
}

/*** block-meetourfleet ***/

.block-meetourfleet > h2 {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 40px;
  text-transform: uppercase;
}

.block-meetourfleet .row > [class^="col-"],
.block-meetourfleet .row > .col {
  position: relative;
  overflow: hidden; /* Zorgt dat de afbeelding niet buiten de cel steekt */
  padding: 20px;
}

/* 1. Maak van de link een flex-container die de H2 centreert */
.block-meetourfleet .col-md-5 > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 0 20px 0 20px; 
  text-decoration: none; /* Verwijdert eventuele standaard onderstreping van de link */
  color: azure;
  text-decoration: none;  
}

/* 3. Het donkere overlay-masker (onzichtbaar bij de start) */
.block-meetourfleet .col-md-5 > a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Zwart met 50% transparantie */
  z-index: 2; /* Staat BOVEN de afbeelding (1) maar ONDER de tekst (3) */
  opacity: 0; /* Standaard onzichtbaar */
  transition: opacity 0.3s ease; /* Zorgt voor een vloeiende overgang */
  border-radius: 0 20px 0 20px;
}

.block-meetourfleet .col-md-5 > a:hover::after {
  opacity: 1; /* Maakt de donkere overlay volledig zichtbaar */
}

/* 2. Zet de afbeelding absoluut op de achtergrond van de link */
.block-meetourfleet .col-md-5 img.img-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Vult de hele cel zonder te vervormen */
  z-index: 1;
  border-radius: 0 20px 0 20px;
}

/* 3. Style de H2 zodat deze netjes bovenop de afbeelding staat */
.block-meetourfleet .col-md-5 h2 {
  position: relative;
  z-index: 3;              /* Komt bovenop de afbeelding (z-index 1) */
  margin: 0;               /* Verwijdert standaard Bootstrap marges */
  color: #ffffff;          /* Maakt de tekst wit voor betere leesbaarheid */
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Maakt tekst beter leesbaar op lichte foto's */
}

/*** block-homepage-transport ***/

.block-homepage-transport .scroll-box {
  /* Formaat en positie van de div */
  width: 100%;
  height: 500px;
  /*margin: 50px auto;*/
  padding: 60px;
  /*border: 2px solid #ccc;*/
  margin-top: 60px;
  
  /* Activeer de scrollbalk binnen de div */
  overflow-y: auto;
  
  /* De achtergrondmagie: fixeer de afbeelding binnen de div */
  background-image: url('../images/azure_boat.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Zorgt dat de afbeelding stilstaat */
  
  /* Tekststyling voor betere leesbaarheid op de achtergrond */
  color: white;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.block-homepage-transport .field--name-body {
  /* position: absolute;
  z-index: 2;
  width: 100%;
  padding-top: 50px;
  color: #ffffff; */
  text-align: center; 
  font-size: 1.2rem; 
  color: #000;
}

.block-homepage-transport .container {
  margin-top: 60px;
}

.block-homepage-transport .foto-transport {
  max-height: 400px;
  border-radius: 20px;
}

.block-homepage-transport .transport-div {
  background-image: url('../images/transport.jpg');
  background-size:cover;
  background-position: bottom;
  background-repeat: no-repeat;
  min-height: 800px;
  padding: 20px;
  /*clip-path: inset(0px 0px 100px 0px); */
}

.block-homepage-transport .transport-div h1, .block-homepage-transport .transport-div p {
  color: #ffffff;
}

.block-homepage-transport .transport-div p {
  font-size: 1.5em;
}

@media (max-width: 768px) {
  .block-homepage-transport .transport-div {
    min-height: 800px;
    
    /* Optioneel: focus op het belangrijkste deel van de foto op smalle schermen */
    background-position: center center; 
  }
}

.contact-block {
  background-color: #323232;
}

.contact-block .contact-form {
  background-color: #ffffff;
  margin-top:40px;
  margin-bottom: 40px;
  padding: 20px;
  border-radius: 10px;
}

.contact-block .contact-form .btn {
  background-color: black;
  border: none;
}

.contact-block .form-required::after {
  display: none;
}

.contact-form #edit-actions {
  text-align: center;
}