div.divider {
  margin-top: 200px;
  margin-bottom: 200px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans';
  font-weight: 300;
  max-width: 450px;
  margin: auto;
  opacity: 1;
}


#aff {
  padding: 20px;
}

h3 {
}

#affhead {
  color: #a4b142;
}



#aff p {
    display: flex;
    flex-wrap: wrap;       /* allow logos to wrap to new rows */
    justify-content: center; /* center logos horizontally in each row */
    gap: 20px;             /* optional: spacing between logos */
}

/* ===== Affiliations logos: no layout shift on hover ===== */

/* Optional: widen spacing a touch */
#aff p { gap: 32px; }

/* Make each link a fixed-size tile so layout is stable */
#aff p a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;              /* adjust to taste */
  height: 120px;             /* adjust to taste */
  padding: 12px;
  background: #fff;          /* looks good on your #034d8b section */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-decoration: none;
  overflow: hidden;
}

/* Logos fit inside the tile; animate only filters (no geometry change) */
#aff p a img,
#aff p a img.img-fluid {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  transition: filter .2s ease;
  will-change: filter;
  backface-visibility: hidden;
}

/* Gentle, flicker-free hover */
#aff p a:hover img,
#aff p a:hover img.img-fluid {
  filter: brightness(1.05) contrast(1.05)
          drop-shadow(0 6px 16px rgba(0,0,0,.15));
}

/* Safety net: neutralize any accidental transforms from elsewhere */
#aff img:hover { transform: none !important; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #aff p a img,
  #aff p a:hover img { transition: none; }
}

/* Always-on readability for touch devices (no hover available) */
@media (hover: none) {
  #aff p a img,
  #aff p a img.img-fluid {
    filter: brightness(1.06) contrast(1.12)
            drop-shadow(0 6px 16px rgba(0,0,0,.15));
  }
}

/* Section padding (optional, gives breathing room) */
#aff { padding-top: 28px; padding-bottom: 28px; }

/* Prettier heading + space below it */
#affhead {
  margin: 0 0 24px;
  font-weight: 700;
  letter-spacing: .4px;
  font-size: clamp(24px, 3.2vw, 34px);
  text-align: center;
  color: var(--bs-gray-100);
  position: relative;
}

#affhead::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,0));
}