/* ===============================
   HERO Carousel sizing (responsive)
   - Normal on phones
   - Wider on desktop
   - Controls centered to IMAGE ONLY
   =============================== */
#processCarousel{
  width:100%;
  max-width:520px; /* phone/tablet "normal" */
  margin-inline:auto;
}

/* Make the carousel wider on desktop */
@media (min-width:992px){
  #processCarousel{ max-width:820px; }
}

/* Even wider on very large screens */
@media (min-width:1400px){
  #processCarousel{ max-width:920px; }
}

/* Image-only frame (this is what arrows align to) */
#processCarousel .cb-carousel-frame{
  position:relative;
  height:420px;           /* was 360px */
  border-radius:1rem;
  overflow:hidden;
}

@media (min-width:992px){
  #processCarousel .cb-carousel-frame{
    height:560px;         /* was 475px */
  }
}

/* Image fills the frame */
.cb-carousel-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Caption area stays below */
.cb-caption{ min-height:70px; }

/* Controls: lock them to the image-frame ONLY */
#processCarousel .carousel-control-prev,
#processCarousel .carousel-control-next{
  top:0;
  bottom:auto;
  transform:none;
  height:420px;           /* match mobile frame height */
  display:flex;
  align-items:center;
}

@media (min-width:992px){
  #processCarousel .carousel-control-prev,
  #processCarousel .carousel-control-next{
    height:560px;         /* match desktop frame height */
  }
}

#processCarousel .carousel-control-prev{ left:0; }
#processCarousel .carousel-control-next{ right:0; }