/* Font */
@font-face {
  font-family: "Gesta";
  src: url("Gesta-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Algemene stijlen */
body {
  margin: 0;
  font-family: "Gesta", sans-serif;
  background-color: #f0f2f5; /* Slightly softer background */
  color: #2c3e50; /* Darker, more prominent text */
  line-height: 1.6; /* Improved readability */
  -webkit-font-smoothing: antialiased; /* Smoother font rendering */
  -moz-osx-font-smoothing: grayscale; /* Smoother font rendering */
  background: #8a9b5b;
}

/* Hero sectie */
.hero {
  gap: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Align items vertically in the center */
  justify-content: center;
  padding: 60px;
  background: linear-gradient(
    135deg,
    #8a9b5b 0%,
    #8a9b5b 100%
  ); /* Subtle gradient for depth */
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Slight text shadow for contrast */
}

/* Hero Video en LinkedIn widget */
.hero-video,
.linkedin-widget {
  flex: 1 1 420px; /* Slightly wider base for larger screens */
  max-width: 450px; /* Increased max-width */
  width: 100%;
  min-height: 420px; /* Increased min-height */
  box-sizing: border-box;
  animation: fadeInUp 0.8s ease-out forwards; /* Slightly longer and smoother animation */
  transform: translateY(20px); /* Initial state for animation */
  opacity: 0; /* Initial state for animation */
}

/* Animation delay for staggered effect */
.linkedin-widget {
  animation-delay: 0.2s;
}

/* Video container */
.hero-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px; /* More padding inside the container */
  background-color: white;
  border: none; /* Removed border, relying on shadow */
  border-radius: 16px; /* Softer rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); /* More pronounced shadow */
}

.video-intro {
  margin-bottom: 20px; /* More space below intro text */
  font-size: 1.4em; /* Slightly larger font */
  font-weight: 600; /* Medium bold */
  text-align: center;
  max-width: 400px;
  color: #34495e; /* Deeper text color */
}

.hero-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 12px; /* Softer rounded corners for video */
  margin-bottom: 25px; /* More space below video */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for video iframe */
}

/* YouTube- en LinkedIn knop - gelijkgetrokken stijl */
.youtube-button,
.linkedin-button-enhanced {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* Slightly larger gap for icon and text */
  padding: 14px 20px; /* More padding for a bolder button */
  border-radius: 8px; /* Softer rounded corners */
  font-weight: bold;
  font-size: 1.15em; /* Slightly larger text */
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  max-width: 380px; /* Increased max-width */
  margin-top: 25px; /* More space above buttons */
  color: white;
  box-sizing: border-box;
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease; /* Smoother transitions */
  letter-spacing: 0.5px; /* Slight letter spacing for appeal */
}

/* YouTube knop kleur */
.youtube-button {
  background-color: #e62117; /* Brighter YouTube red */
  box-shadow: 0 4px 12px rgba(230, 33, 23, 0.4);
}

.youtube-button:hover,
.youtube-button:focus {
  background-color: #c41c15; /* Deeper red on hover */
  transform: translateY(-3px); /* More pronounced lift */
  box-shadow: 0 8px 20px rgba(196, 28, 21, 0.6);
  outline: none; /* Remove default outline */
  border: 2px solid rgba(255, 255, 255, 0.5); /* Subtle white border on hover */
}

/* LinkedIn knop kleur */
.linkedin-button-enhanced {
  background-color: #0077b5; /* Standard LinkedIn blue */
  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.4);
}

.linkedin-button-enhanced:hover,
.linkedin-button-enhanced:focus {
  background-color: #005f93; /* Deeper blue on hover */
  transform: translateY(-3px); /* More pronounced lift */
  box-shadow: 0 8px 20px rgba(0, 95, 147, 0.6);
  outline: none; /* Remove default outline */
  border: 2px solid rgba(255, 255, 255, 0.5); /* Subtle white border on hover */
}

/* Icon grootte */
.youtube-icon,
.linkedin-icon {
  width: 26px; /* Slightly larger icons */
  height: 26px;
  fill: white;
}

.linkedin-widget {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribute space evenly */
  align-items: center;
  background-color: white;
  padding: 30px 25px 45px; /* More padding */
  border-radius: 16px; /* Softer rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); /* More pronounced shadow */
  color: #34495e; /* Deeper text color */
  text-align: center;
  box-sizing: border-box;
}

.linkedin-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px; /* More space between elements */
  flex-grow: 1;
}

.linkedin-profile-pic {
  max-height: 250px; /* Slightly smaller to fit better */
  width: 250px; /* Ensure a square shape */
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #f0f2f5; /* Subtle border matching background */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); /* Stronger shadow */
  margin-bottom: 25px; /* More space below image */
}

.linkedin-top p {
  font-size: 1.4em; /* Slightly larger font */
  font-weight: 600; /* Medium bold */
  color: #34495e; /* Deeper text color */
  max-width: 400px;
  text-align: center;
}

.linkedin-follower-count {
  font-size: 1.2em; /* Slightly larger font */
  font-weight: bold;
  color: #555; /* Softer dark color */
  margin-bottom: 20px; /* More space below count */
}

.linkedin-follower-count strong {
  color: #2c3e50; /* Stronger color for emphasis */
}

.vlakjes {
  overflow: hidden;
  width: 100%;
  background: #8a9b5b;
}

.scrolling-container {
  width: 100%;
  overflow: hidden;
}

.scrolling-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

.vlak {
  width: 300px;
  height: 300px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 10px;
  position: relative;
  background: #ddd;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.5rem;
  font-weight: bold;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.vlak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.scrolling-container {
  overflow: hidden;
  width: 100%;
}

:root {
  --vlak-breedte: 380px; /* Slightly smaller width for more items on screen */
  --vlak-hoogte: 320px; /* Adjusted height */
  --vlak-margin: 25px; /* Increased margin for more separation */
}

.scrolling-track {
  display: flex;
  width: calc((var(--vlak-breedte) + var(--vlak-margin)) * 16);
  animation: scrollLeft 60s linear infinite; /* Slower animation for smoother feel */
}

.vlak {
  flex: 0 0 var(--vlak-breedte);
  height: var(--vlak-hoogte);
  margin-right: var(--vlak-margin);
  border-radius: 18px; /* More rounded corners */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.5rem; /* Slightly smaller font to fit better */
  font-weight: bold;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Smooth transition for hover */
}

.vlak:hover {
  transform: translateY(-5px); /* Lift on hover */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
}

/* Kleuren voor vlakjes (8 kleuren afwisselend) */
/* Adjusted colors for a more cohesive and modern palette */
.vlak:nth-child(8n + 1) {
  background-color: #4a7c59; /* Greenish */
  color: white;
}

.vlak:nth-child(8n + 2) {
  background-color: #3b5b82; /* Blueish */
  color: white;
}

.vlak:nth-child(8n + 3) {
  background-color: #c98e54; /* Earthy Orange */
  color: white;
}

.vlak:nth-child(8n + 4) {
  background-color: #1a7b8e; /* Teal */
  color: white;
}

.vlak:nth-child(8n + 5) {
  background-color: #e0d0b8; /* Light Beige */
  color: #333;
}

.vlak:nth-child(8n + 6) {
  background-color: #b1c19b; /* Muted Green */
  color: #333;
}

.vlak:nth-child(8n + 7) {
  background-color: #a68c7e; /* Muted Brown */
  color: #333;
}

.vlak:nth-child(8n + 8) {
  background-color: #d19e5f; /* Golden Orange */
  color: #333;
}

/* Animaties */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc(-1 * (var(--vlak-breedte) + var(--vlak-margin)) * 16)
    );
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-video,
  .linkedin-widget {
    flex: 1 1 300px; /* Adjust for smaller screens */
    min-height: 300px;
    max-width: 380px;
  }

  .video-intro,
  .linkedin-top p {
    font-size: 1.2em;
  }

  .youtube-button,
  .linkedin-button-enhanced {
    max-width: 90%;
    font-size: 1em;
    padding: 10px 14px;
    margin-top: 15px;
  }

  .linkedin-profile-pic {
    max-height: 200px;
    width: 200px;
  }

  .vlakjes {
    padding: 40px 5%;
  }

  :root {
    --vlak-breedte: 300px;
    --vlak-hoogte: 250px;
    --vlak-margin: 15px;
  }

  .vlak {
    font-size: 3.5rem;
  }
}

@media (max-width: 480px) {
  .youtube-button,
  .linkedin-button-enhanced {
    max-width: 100%;
    font-size: 0.95em;
    padding: 8px 12px;
  }

  .hero-video,
  .linkedin-widget {
    min-height: 280px;
    padding: 15px;
  }

  .video-intro,
  .linkedin-top p {
    font-size: 1.1em;
  }

  :root {
    --vlak-breedte: 250px;
    --vlak-hoogte: 200px;
    --vlak-margin: 10px;
  }

  .vlak {
    font-size: 2.8rem;
  }
}

.kopjes-container {
  display: flex;
  justify-content: center;
  padding: 30px 10%; /* More vertical padding */
  background-color: #e9ecef; /* Lighter, subtle background */
  color: #34495e; /* Deeper text color */
  flex-wrap: wrap;
  text-align: center;
  border-top: 1px solid #dee2e6; /* Subtle top border */
}

.kopjes-container h2 {
  font-weight: 700; /* Bolder font weight */
  margin: 0;
  flex: 1 1 200px;
  min-width: 180px;
  text-transform: uppercase; /* Uppercase for headings */
  letter-spacing: 0.8px; /* Slight letter spacing */
}

.persoon-widget {
  background-color: rgb(0, 0, 0);
  color: #ffffff;
  padding: 30px 25px 45px;
  border-radius: 16px;
  max-width: 450px;
  width: 100%;
  min-height: 420px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-sizing: border-box;
  animation: fadeInUp 0.8s ease-out forwards;
  transform: translateY(20px);
  opacity: 0;
}

.persoon-top {
  width: 100%;
  display: flex;
  justify-content: center;
}

.persoon-foto {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
}

.persoon-bio p {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
}

.vlak {
  width: 300px; /* zet dit terug op wat het eerst was – pas aan naar je originele waarde */
  height: 300px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 10px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.vlak img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* zorgt dat 'ie het vlak opvult zonder vervorming */
  display: block;
  transform: rotate(-5deg);
}

.vlak5 img {
  width: 80%; /* kleiner dan de standaard 300px */
  height: auto; /* iets kleinere hoogte */
  transform: rotate(-5deg);
}

.vlak7 img {
  width: 100%; /* kleiner dan de standaard 300px */
  height: auto; /* iets kleinere hoogte */
  transform: rotate(5deg);
}

.scrolling-track {
  width: max-content;
  animation: scrollLeft 120s linear infinite;
}