/* =================================
   Global styles
   ================================= */
body {
    font-family: 'IBM Plex Sans', 'IBM Plex Serif', sans-serif;
    margin: 0;
    padding: 0;
}

/* =================================
   Hero section styling
   ================================= */
.hero {
    height: 100vh;
    background: url('/images/background.jpg') no-repeat center center / cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.55);
    padding: 40px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
}

/* =================================
   Image Buttons (met glow + shadow)
   ================================= */

.image-buttons a {
    display: inline-block;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.image-buttons img {
    pointer-events: auto;
    width: 130px;
    height: 130px;
    object-fit: contain;
    margin: 20px;
    padding: 10px;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255,255,255,0.2); 
}

.image-buttons img:hover {
    transform: scale(1.12);
    box-shadow:
       /** 0 0 20px rgba(255,255,255,0.8),**/
        0 8px 18px rgba(0,0,0,0.5);
}

.image-buttons .image-link {
  display: inline-block;      /* klikbare box rond de afbeelding */
  position: relative;         
  z-index: 10;                /* boven eventuele overlappende lagen */
}

.image-buttons .img-link {
  display: block;             /* geen “gaten” rondom de img */
  pointer-events: auto;       /* expliciet klikbaar */
}

.button-wrapper {
  max-width: 650px;      
  margin: 0 auto;
}

/* =================================
   Text under images
   ================================= */
.image-buttons p {
    margin-top: 8px;
    color: white;
    /**text-shadow: 0 0 8px rgba(255,255,255,0.9);**/
    font-weight: 600;
}