html{
    scroll-behavior:smooth;
}

/* Target all links inside this specific section */
#section4 a {
    color: rgb(10, 0, 143); /* Change to your preferred color */
    text-decoration: underline; /* Optional: keeps it looking like a link */
}

/* Optional: Add a hover color so people know it's clickable */
#section4 a:hover {
    color: rgb(14, 0, 203); 
}

body{
    margin:0;
    overflow-x:hidden;
}


/* -------------------- */
/* Navbar */
/* -------------------- */

.navbar{
    background:rgba(0,0,0,.2);
    backdrop-filter:blur(8px);
}


/* -------------------- */
/* Hero */
/* -------------------- */

.hero{
    position: relative;
    height: 70vh;   /* ongeveer 2/3 van het scherm */
    min-height: 500px;
    overflow: hidden;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 88%,
        0 100%
    );
}

.video-container{

    position:absolute;
    inset:0;
    z-index:-2;

}

.video-container iframe{

    width:100vw;
    height:56.25vw;

    min-height:100vh;
    min-width:177.77vh;

    position:absolute;
    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

}

.overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.45);

}

.hero-buttons{
    position:absolute;
    left:50%;
    bottom:200px;
    transform:translateX(-50%);
    display:flex;
    gap:30px;
}

.hero-buttons .btn{
    padding:18px 42px;
    font-size:1.3rem;
    border-radius:50px;
    font-weight:bold;
}


/* -------------------- */
/* Sections */
/* -------------------- */

.section{

    padding:120px 0;
    min-height:500px;

}


.white{

    background:white;

    clip-path:polygon(
        0 40px,
        100% 0,
        100% 100%,
        0 calc(100% - 40px)
    );

}

.green{

    background:#0b7a36;
    color:white;

    clip-path:polygon(
        0 0,
        100% 40px,
        100% calc(100% - 40px),
        0 100%
    );

}

#section4{
    display:flex;
    align-items:center;

  clip-path: polygon(
    0 0,
    100% 40px,
    100% 100%,
    0 100%
);
}

/* slanted images css */
.rhombus-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  
  /* Clips the ENTIRE container into one big slanted rhombus */
  /* (Top-left 25%, Top-right 100%, Bottom-right 75%, Bottom-left 0%) */
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.rhombus-stack img {
  width: 100%;
  height: 25vh; /* Height of each slice (adjust as needed) */
  object-fit: cover;
  display: block;
}

/* hover icons */
/* Card Container */
.bubble-card {
  position: relative;
  cursor: pointer;
}

.bubble-card img {
  width: 100%;
  height: 10vh;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.2s ease;
}

.bubble-card:hover img {
  transform: translateY(-3px); /* Subtle lift on hover */
}

/* Floating Text Bubble */
.text-bubble {
  position: absolute;
  top: calc(100% + 12px); /* Places bubble right below the image */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 90%; /* Width relative to the image */
  background-color: #212529; /* Dark bubble color */
  color: #ffffff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 100; /* Keeps bubble on top of lower images */
  
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none; /* Prevents flicker if mouse hits gap */
}

/* Speech Bubble Arrow (Pointing UP) */
.text-bubble::before {
  content: '';
  position: absolute;
  top: -10px; /* Positions arrow at top of bubble */
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #212529 transparent;
}

/* Reveal Bubble on Hover */
.bubble-card:hover .text-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}