body {
      background-color: #f8f9fa;
      color: #333;
      font-family: 'Segoe UI', sans-serif;
    }

    .essay p {
      line-height: 1.8;
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease;
    }
    .essay p.in-view {
      opacity: 1;
      transform: translateY(0);
    }

.carousel-inner {
  height: 0;
  padding-bottom: 75%; /* this sets carousel aspect ratio (4:1 here) */
}

.carousel-item {
  position: absolute !important; /* Bootstrap is insistent */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.carousel-item img {
  height: 100%; /* Bootstrap handles width already */
  object-fit: cover; /* or 'contain' if you want stretch instead of crop */
}