@font-face {
  font-family: 'Fieldwork';
  src: url('./content/fonts/Fieldwork-Geo-Bold.woff2') format('woff2'),
      url('./content/fonts/Fieldwork-Geo-Bold.woff') format('woff'),
      url('./content/fonts/Fieldwork-Geo-Bold.ttf') format('truetype'),
      url('./content/fonts/Fieldwork-Geo-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Fieldwork', sans-serif;
}

/* Sticky Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #0062a3;
  background-image: url('./content/images/navbar_main.png');
  background-size: cover;
  background-position: center;
}

/* Logo overlapping navbar */
.navbar-brand {
  position: relative;
}

.navbar-brand img {
  position: absolute;
  top: -30%; /* Adjusted for better scaling */
  left: 0;
  height: 8rem; /* Use rem for scaling */
  z-index: 1040;
  transform: translateY(-15%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dropdown-menu {
  background-color: #0062a3;
  background-image: url('./content/images/navbar_main.png');
  background-size: cover;
  background-position: center;
  color: whitesmoke;
}

.nav-link {
  color: whitesmoke !important;
  font-family: 'Fieldwork', sans-serif;
}

.nav-link:hover {
  color: white !important;
}

.dropdown-menu .dropdown-item {
  color: whitesmoke;
  font-family: 'Fieldwork', sans-serif;
}

.dropdown-menu .dropdown-item:hover {
  color: white;
}

/* Ensure content under navbar adjusts */
.container {
  position: relative;
  z-index: 1030;
}

/* Blurred video background */
.video-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.temp-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  transform: translateY(-15%);
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
}

.video-overlay {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  text-align: center;
  color: white;
  font-family: 'Fieldwork', sans-serif;
  font-size: 2.5rem; /* Responsive scaling */
}

.video-overlay h1 {
  background: rgba(220, 220, 220, 0.5);
  padding: 1rem 2rem;
  font-size: 3rem;
  border-radius: 5px;
}

/* Sticky contact button */
.contact-button {
  position: fixed;
  width: 15rem; /* Use rem for scaling */
  height: 5rem;
  font-size: 1.5rem;
  bottom: 1rem;
  right: 1rem;
  z-index: 1040;
  background-color: #0062a3;
  background-image: url('./content/images/navbar_main.png');
  background-size: cover;
  color: whitesmoke;
  font-family: 'Fieldwork', sans-serif;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.contact-button i {
  margin-right: 1rem;
}

.contact-button:hover {
  cursor: pointer;
  color: white;
}

.contact-button a {
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: white;
}

.contact-button a:hover {
  text-decoration: none;
  color: white;
}
  
/* About us */
.about-us {
  position: absolute; /* Changed to overlap video */
  background-color: #4e96b3;
  font-family: 'Fieldwork', sans-serif;
  width: 90%; /* Flexible width */
  top: 70%; /* Adjust position to overlap video */
  max-width: 1300px;
  margin: 0 auto; /* Center horizontally */
  left: 50%;
  transform: translate(-50%, -30%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.about-us .about-left {
  background-color: #4e96b3;
  color: white;
  padding: 2rem;
}

.about-us .about-right {
  background-image: url(./content/images/bohemen-toegangswegen.jpg);
  background-size: cover;
  background-position: center;
  min-height: 582px;
}

.videoplayer {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  color: #0062a3;
  text-align: center;
  max-width: 80%;
  align-items: center;
  margin-bottom: 2rem;
}

.videoplayer h2 {
  font-size: 3rem;
  text-decoration: underline;
}

.videoplayer p {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2rem;
  max-width: 70%;
}

.videoplayer video {
  width: 80%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.homepage-cards {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  text-align: center;
  max-width: 80%;
  align-items: center;
  margin-bottom: 2rem;
  z-index: 2;
}

.homepage-cards .card {
  background-color: #4e96b3;
  color: white;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  min-height: 27rem;
  max-width: 25rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.homepage-cards a {
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding: 1rem;
  height: 100%;
  width: 100%;
}

.homepage-cards a:hover {
  text-decoration: none;
  color: white;
}

.homepage-cards h3 {
  margin-top: 50%;
}

.homepage-cards .card-1 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_0918.png) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.homepage-cards .card-2 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Kalenderfoto5.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.homepage-cards .card-3 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Achtergrondfoto-5.6.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

/* Carousel */

.imagecarousel {
  z-index: 1020;
}

.carousel-container {
  display: flex;
  overflow-x: auto;
  cursor: grab;
  height: 22rem;
  margin-bottom: 2rem;
  scrollbar-width: thin; /* Firefox scrollbar styling */
  scrollbar-color: #0062a3 whitesmoke; /* Firefox colors */
}

.carousel-container::-webkit-scrollbar {
  height: 8px; /* Scrollbar height for Webkit-based browsers */
}

.carousel-container::-webkit-scrollbar-thumb {
  background: #0062a3; /* Scrollbar thumb color */
  border-radius: 10px; /* Rounded corners for the scrollbar */
}

.carousel-container::-webkit-scrollbar-track {
  background: whitesmoke; /* Scrollbar track color */
  border-radius: 10px; /* Rounded corners for the scrollbar */
}

.carousel-container::-webkit-scrollbar-button {
  display: none; /* Hide the arrows */
}

.carousel-item {
  flex: 0 0 auto;
  margin-right: 10px;
  display: block !important;
  width: fit-content; /* Set a fixed width for each item */
}

.carousel-container:active {
  cursor: grabbing;
}

.carousel-item img {
  max-height: 100%;
  width: 100%;
  pointer-events: none;
  user-select: none;
}

/* Jobs */
.homepage-jobs {
  color: #0062a3;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.homepage-jobs img {
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.btn-primary {
  background-color: #0062a3;
  border-color: #0062a3;
}

.btn-primary:hover {
  background-color: #036eb6;
  border-color: #036eb6;
}

/* Footer */
.footer {
  background-color: #0062a3;
  background-image: url('./content/images/navbar_main.png');
  background-size: cover;
  background-position: center;
  color: whitesmoke;
  font-family: 'Fieldwork', sans-serif;
  padding: 2rem;
}

.footer h2 {
  margin-left: 1rem;
}

.footer a {
  text-decoration: none;
  color: white;
}

.footer a:hover {
  text-decoration: none;
  color: white;
}

.footer .contact-footer{
  position: relative;
  left: -3%;
}

.first-container {
  z-index: 1020;
  position: relative;
  margin-top: -15%;
  margin-bottom: 2rem;
  font-family: 'Fieldwork', sans-serif;
  color: #0062a3;
}

.top-buffer {
  margin-top: 2rem;
}

.privacyfooter {
  margin-top: 2%;
  text-align: center;
}

#map {
  width: 100%;
  height: 30vh; /* Full viewport height */
}

.aboutpage-cards {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 100%;
  align-items: center;
  margin-bottom: 1rem;
  z-index: 2;
}

.aboutpage-cards .card {
  background-color: #4e96b3;
  color: white;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  min-height: 11rem;
  max-width: 25rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.aboutpage-cards a {
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  color: white;
  height: 100%;
  width: 100%;
}

.aboutpage-cards a:hover {
  text-decoration: none;
  color: white;
}

.aboutpage-cards .card-1-line h3 {
  margin-top: 40%;
}

.aboutpage-cards .card-2-line h3 {
  margin-top: 30%;
}

.aboutpage-cards .card-1 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_0918.png) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-2 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Kalenderfoto5.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-3 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Achtergrondfoto-5.6.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage2-cards {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
  margin-bottom: 2rem;
  z-index: 2;
}

.aboutpage2-cards .card {
  background-color: #4e96b3;
  color: white;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  min-height: 27rem;
  max-width: 25rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.aboutpage2-cards a {
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding: 1rem;
  height: 100%;
  width: 100%;
}

.aboutpage2-cards a:hover {
  text-decoration: none;
  color: white;
}

.aboutpage2-cards h3 {
  margin-top: 50%;
}

.aboutpage2-cards .card-1 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_0918.png) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage2-cards .card-2 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Kalenderfoto5.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage2-cards .card-3 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Achtergrondfoto-5.6.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}



.aboutpage-cards .card-4 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Plein_2.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-5 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/regels.png) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-6 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_0941.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-7 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_0918.png) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-8 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Plein_3.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-9 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/Achtergrondfoto-5.6.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-10 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/20240514_205329.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-11 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_1166.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-12 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_1026-2.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage-cards .card-13 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/background.png) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage2-cards .card-14 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_0116.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage2-cards .card-15 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_0902.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

.aboutpage2-cards .card-16 {
  background: linear-gradient(to top, #0062a3b7, #4e96b3b7), url(./content/images/DSC_1124.jpg) no-repeat top center;
  background-size: cover;
  background-position: center;
}

/* Media Queries for responsiveness */
@media (max-width: 1920px) {
  .about-us {
    top: 80%; /* Adjust position to overlap video */
  }
  .videoplayer {
    margin-top: 14rem;
  }
}

@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: 13%;
  }
  .videoplayer {
    margin-top: 22rem;
  }
}

@media (max-width: 768px) {
  .video-overlay h1 {
    font-size: 2rem;
    padding: 1rem;
  }

  .contact-button {
    width: 12rem;
    height: 4rem;
    font-size: 1.2rem;
  }

  .about-us {
    top: 80%; /* Adjust for smaller screens */
    transform: translate(-50%, -20%);
    width: 100%;
    padding: 1rem;
  }

  .videoplayer {
    margin-top: 30rem;
  }
}