.bg-image{
    background: url("photos/bg.jpeg") center/cover no-repeat;
    min-height: 85vh;
    position: relative;
}

.bg-image::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.bg-image > * {
  position: relative;
  z-index: 1;
}

.nav-bg{
    background: rgba(0, 0, 0, 0.6);
}

.card-img-top {
  height: 220px;
  object-fit: cover;
}



/* Materials card images: consistent size */
#materialen .card-img-top {
  height: 320px;
  object-fit: contain;
}

/* Proper constrained carousel */
.carousel,
.carousel-inner,
.carousel-item {
  height: 60vh;
}

.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ensure captions stay visible */
.carousel-caption {
  bottom: 1.5rem;
  z-index: 10;
}

/* Smooth transition */
.transition-navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state */
.navbar-scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-brand {
  color: #000 !important;
}

.navbar-scrolled .navbar-toggler {
  border-color: rgba(0,0,0,0.2);
}