.carousel {
  height: 400px; /* Set a fixed height for the entire carousel */
  overflow: hidden;
}

.carousel-inner {
  height: 100%;
}

.carousel-item {
  height: 100%;
}

.carousel-item img {
  height: 100%;
  width: auto;
  object-fit: contain; /* shows the whole image */  /* cover - Ensures the image covers the container without distortion */
}

.post-title {
  font-size: 1.3rem !important;
}

/* 1) The “hero‐title‐wrapper” spans full browser width and uses a background image */
.hero-title-wrapper {
  width: 100%;
  background: url('/assets/img/beam.png') 
              no-repeat center center;
  background-size: cover;
  padding: 4rem 0;             /* adjust vertical padding as desired */
  text-align: center;
  position: relative;
}

/* 2) Style the actual text on top (make it legible against the image) */
.hero-title-wrapper .hero-title {
  margin: 0;
  color: white;
  font-size: 2.5rem;           /* adjust as needed */
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.hero-title-wrapper .hero-subtitle {
  margin: 0.5rem 0 0;
  color: white;
  font-size: 1.25rem;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

/* shrink the page‐header <h1> */
.intro-header .page-heading h1 {
  /* your new size here */
  font-size: 2.625rem;
}


/* if you’re using intro-header.big-img instead */
.intro-header.big-img {
  /* move it down 20% from the top */
  background-position: center 0% !important;
  /* you can also add extra top‐padding if you like */
  margin-bottom: 0rem;  /* default is around 2.1875rem */
}


/* 1) Give the header a fixed height so it never “jumps” when the background swaps */
.intro-header.big-img {
  position: relative;
  height: 350px;              /* pick whatever fixed height works for you */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;     /* always cover the box */
  overflow: hidden;
}

/* 2) Ensure your transition layer is the _same_ size and is GPU-accelerated */
.intro-header.big-img .big-img-transition {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  
  opacity: 0;
  transition: opacity 20s linear;
  
  /* hint to the browser to promote this layer to its own compositing layer */
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}