@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* Add custom utility classes not covered by Tailwind's CDN build. */

/* Use the Montserrat font for the entire site. We rely on a class on the body tag. */
.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

/* Semi-transparent overlay for hero background images. */
/* Semi-transparent overlay for hero sections. A slight tint improves text readability while
   nog steeds allowing de achtergrondfoto door te schijnen. */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Ensure images scale nicely within their containers. */
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Simple card shadow to elevate content sections. */
.card-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}