/* Hero Section (Carousel) */
    .carousel {
      padding: 0px 0px;
      position: relative;
      width: 100%;
      height: 94vh; /* full viewport height */
      overflow: hidden;
      margin-top: 60px; /* Makes room for the fixed navbar */ 
      display: flex;
    }

    /* Images in carousel container */
    .carousel-images {
      display: flex;
      transition: transform 2s ease-in-out;
      width: 100%;
    }

    /* Images themselves should fill the screen */
    .carousel-images img {
      flex: 0 0 100%; /* This ensures each image takes up 100% of the container's width */
      height: 100%;
      object-fit: cover; /* Ensures the image covers the full area */
      max-width: 100%;
      display: block;
    }

    /* Transparent overlay */
    .carousel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
      z-index: 1; /* Make sure overlay stays above the images but below the content */
    }
    
    .carousel::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;

      /* must be above overlay + content */
      z-index: 3;

      background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 90%,
        rgba(255,255,255,0.6) 97%,
        rgba(255,255,255,1) 100%
        
      );
    }