.carousel-wrapper {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.carousel {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  touch-action: pan-y;
  box-sizing: border-box;
}

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.carousel .slide {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex: 0 0 100%;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  box-sizing: border-box;
}

.carousel figure {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  will-change: transform, opacity, background-image;
  backface-visibility: hidden;
  overflow: hidden;
  box-sizing: border-box;
}

.carousel figure img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: top left;
  box-sizing: border-box;
}

.carousel .text-box {
  width: calc(50% - 5rem);
  max-width: 40rem;
  height: auto;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;
  padding: 3rem;
  gap: 1rem;
  top: 0;
  bottom: 0;
  left: 5rem;
  margin: auto 0 auto auto;
  border-radius: 1rem;
  background-color: var(--color-dimmed-white);
  z-index: 2;
}

.carousel .text-box h1 {
  color: var(--color-forest-green);
}
.carousel .text-box .highlight {
  font-weight: 600;
  color: var(--color-viridian-green);

}

.carousel-btn {
  width: auto;
  height: auto;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  padding: var(--btn-padding);
  top: 0;
  bottom: 0;
  border-radius: var(--btn-border-radius);
  background-color: transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
}


.carousel-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.carousel-btn.prev {
  left: 0;
}

.carousel-btn.next {
  right: 0;
}

.carousel-btn.prev svg {
  transform: rotate(-90deg);
}

.carousel-btn.next svg {
  transform: rotate(90deg);
}

.hide-carousel-btn {
  display: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.progress-count {
  width: auto;
  height: auto;
  position: absolute;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-size: 1rem;
  line-height: 1.1;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  box-sizing: border-box;
  z-index: 1;
}

.progress-count .position,
.progress-count .current {
  width: auto;
  height: auto;
  position: relative;
  display: inline-flex;
  color: #fff;
  box-sizing: border-box;
}

.progress-count .break {
  width: auto;
  height: auto;
  position: relative;
  display: block;
  margin: 0 0.25rem;
  padding: 0;
  color: #fff;
  box-sizing: border-box;
}

.progress-count .total {
  color: rgba(255, 255, 255, 0.85);
}

.indicator {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  gap: 0.5rem;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}

.indicator .dot {
  width: 0.75rem;
  height: 0.75rem;
  position: relative;
  display: flex;
  padding: 0.33rem;
  border-radius: 100%;
  background-color: #ddd;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  cursor: pointer;
}

.indicator .dot .num {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.1;
  color: #383838;
  box-sizing: border-box;
}

.indicator .dot.active {
  color: #fff;
  background-color: #3498db;
  transform: scale(1.35);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.indicator .dot.active .num {
  display: flex;
  color: #fff;
}


/* === Progress Indicator === */

.progress-indicator .active .dot .num,
.progress-indicator .completed .dot .num {
  color: #fff;
}


/* === Pill Indicator === */
.pill-indicator {
  flex-wrap: nowrap;
  flex-direction: row;
  z-index: 1;
}

.pill-indicator .dot {
  width: auto;
  height: auto;
}

.pill-indicator .dot .progress-count {
  position: relative;
  display: none;
  top: 0;
  right: 0;
  left:0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  background-color: transparent;
}

.pill-indicator .dot .progress-count .break {
  margin: 0 0.125rem;
}

.pill-indicator .dot.active {
  padding: 0.25rem 0.75rem;
  border-radius: 1.5rem;
  background-color: #3498db;
}

.pill-indicator .dot.active .progress-count {
  display: flex;
}

/* === Window Indicator === */

.window-indicator {
  width: calc(100% - 5rem);
  min-width: 3rem;
  max-width: 4.5rem;
  min-height: 2rem;
  height:2.5rem;
  display: block;
  overflow: hidden;

}

.wi-track {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex: 0 0 auto;
  will-change: transform;
  box-sizing: border-box;
  overflow: visible
}

.wi-track--windowed .dot {
  position: absolute;
  top: 50%;
  transform-origin: center center;
}

.wi-track--windowed .dot.wi-dot--visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.wi-track--windowed .dot.active {
  opacity: 1;
  transform: translateY(-50%) scale(1.35);
}

.wi-track--windowed .dot.wi-dot--edge {
  opacity: 0.3;
  transform: translateY(-50%) scale(0.6);
}

.wi-track--windowed .dot.wi-dot--hidden {
  opacity: 0;
  transform: translateY(-50%) scale(0.3);
  pointer-events: none;
}


/* === Progress Bar Styles === */

.progress-nav {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 4rem;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  box-sizing: border-box;
}

.progress-nav .carousel-btn {
  display: inline-block;
  align-self: center;
}


.progress-bar-wrapper {
  width: calc(100% - 12rem);
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  padding: 0;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  box-sizing: border-box;
}

.progress-bar {
  width: calc(100% - 2.75rem);
  height: 0.5rem;
  position: absolute;
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  top: 0.625rem;
  left:0;
  bottom:0;
  border-radius: 1rem;
  background-color: #cccccc;
  box-sizing: border-box;
  overflow: hidden;
}

.progress-bar .progress {
  width: 100%;
  height: 0.5rem;
  position: relative;
  display: block;
  align-self: center;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  background-color: #0a66c2;
  transition: all 0.6s ease-in-out;
  box-sizing: border-box;
}

.progress-bar-wrapper.segmented .progress-bar,
.progress-bar-wrapper[data-progress-mode="segmented"] {
  background-color: transparent;
}

.progress-bar .seg {
  height: 100%;
  position: absolute;
  display: block;
  align-self: center;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  background-color: #cccccc;
  transition: all 0.6s ease-in-out;
  box-sizing: border-box;

}

.progress-bar .seg .seg-fill {
  height: 100%;
  position: relative;
  display: block;
  align-self: center;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  background-color: #0a66c2;
  transition: all 0.6s ease-in-out;
  box-sizing: border-box;
}


.no-dots .progress-bar {
  top:0;
}

/* -- Vertical Progress Bar */

.vertical-bar.progress-bar-wrapper {
  width: auto;
}

.vertical-bar .progress-bar {
  width: 0.5rem;
  height: 100%;
  margin:0.5rem;
  align-items: flex-start;
  align-self: flex-start;
}

.vertical-bar .progress-bar .progress {
  align-items: flex-start;
  align-self: flex-start;
}

.vertical-bar .progress-indicator {
  width: auto;
  position: relative;
  align-items: flex-start;
  margin: 0;
}

.vertical-bar .progress-indicator .step {
  width: auto;
  height: auto;
  flex-direction: unset;
  justify-content: flex-start;
  padding:1rem 0;
}

.vertical-bar.progress-indicator .dot {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.75rem;
}

.vertical-bar .progress-indicator .label {
  margin: 0 0 0 2rem;
}

.vertical-bar .progress-indicator {
  flex-direction: column;
}

/* -- Segmented Progress Bar Vertical */

.segmented.vertical-bar .progress-bar .seg, 
.progress-bar-wrapper[data-progress-mode="segmented"].vertical-bar .progress-bar .seg {
  width: 100%;
}

.segmented.vertical-bar .progress-bar .seg .seg-fill,
.progress-bar-wrapper[data-progress-mode="segmented"].vertical-bar.progress-bar .seg .seg-fill {
  width: 100%;
  height: 0;
}



/* === Progress Indicator Styles === */

.progress-indicator {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  top: 0;
  box-sizing: border-box;
}

.progress-indicator .step {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}

.progress-indicator .dot {
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-width: 0.15rem;
  border-style: solid;
  border-color: #cccccc;
  border-radius: 50%;
  background-color: #ffffff;
  font-size: 0.85rem;
  font-weight: bold;
  transition: all 0.4s ease-in-out;
  z-index: 2;
}

.progress-indicator .step.active .dot {
  color: #ffffff;
  border-width: 0.25rem;
  border-style: solid;
  background-color: #277fd7;
  border-color: #277fd7;
  transform: scale(1.1);
  transform-origin: center;
}

.completed .dot {
  border-width: 0.25rem;
  border-style: solid;
  border-color: #0a66c2;
  background-color: #0a66c2;
  color: rgba(255, 255, 255, 0.85);
}

.progress-indicator .step.completed .circle::before {
  content: "✓";
  font-size: 0.8rem;
}

.progress-indicator .label {
  width: auto;
  height: auto;
  position: relative;
  display: block;
  margin: 0.4rem 0 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 0.8rem;
  font-weight: 600;
  color: #383838;
  transition: all 0.3s ease-in-out;
}



.progress-indicator .step.active .label {
  color: #277fd7;
}

#pbw-trigger:checked~.section .section-inner .progress-nav,
#pbw-trigger:checked~.section .section-inner .progress-nav::before {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* Fade Carousel Mode CSS */
.carousel.carousel-fade,
.carousel[data-carousel-mode="fade"] {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
}


.carousel.carousel-fade .carousel-inner,
.carousel[data-carousel-mode="fade"] .carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

.carousel.carousel-fade .slide,
.carousel[data-carousel-mode="fade"] .slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.carousel.carousel-fade .slide.active,
.carousel[data-carousel-mode="fade"] .slide.active {
  opacity: 1;
}


/* Multi-Slide Carousel Mode CSS*/

.carousel[data-carousel-mode="multi-slide"], 
.multi-slide-carousel {
  margin:0;
}

.carousel[data-carousel-mode="multi-slide"] .item, 
.multi-slide-carousel .item {
  width: calc(100%/3 - 2rem);
  height: auto;
  margin: 1rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  transform: translateZ(0);
  will-change: transform;
  box-sizing: border-box;
}


/* Multi-item Carousel Mode CSS*/

.carousel[data-carousel-mode="multi-item"], 
.multi-item-carousel {
  margin:0;
}

.carousel[data-carousel-mode="multi-item"] .slide, 
.multi-item-carousel .slide {
  height: auto;
}


.carousel[data-carousel-mode="multi-item"] .item, 
.multi-item-carousel .item,
.carousel[data-carousel-mode="multi-item"] .item.clone,
.multi-item-carousel .item.clone {
  width: 20rem;
  height: auto;
  margin: 0 1rem 1rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex:0 0 auto;
  transform: translateZ(0);
  will-change: transform;
  box-sizing: border-box;
}

/* Stacked Carousel Mode CSS */

.carousel.carousel-stacked,
.carousel[data-carousel-mode="stacked"] {
  width: 100%;
  height: 33vw;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
  perspective: 1400px;
  z-index: 1;
}


.carousel.carousel-stacked .carousel-inner,
.carousel[data-carousel-mode="stacked"] .carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}


.carousel.carousel-stacked .slide,
.carousel[data-carousel-mode="stacked"] .slide {
  width: calc(100% - 3rem);
  height:auto;
  max-width: 24rem;
  position: absolute;
  flex-wrap: wrap;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s ease, opacity 0.35s ease;
}

.carousel.carousel-stacked .slide.active,
.carousel[data-carousel-mode="stacked"] .slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 100;
}

.carousel.carousel-stacked .slide.active .card,
.carousel[data-carousel-mode="stacked"] .slide.active .card {
  border-color: var(--color-forest-green);
  box-shadow: rgba(46, 78, 57, 0.4) 0px 4px 6px -1px, rgba(46, 78, 57, 0.3) 0px 2px 4px -1px;
}


.carousel.carousel-stacked .slide .item,
.carousel[data-carousel-mode="stacked"] .slide .item {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 1.2rem;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* 3d Flip Carousel Mode CSS */

.carousel.flip-carousel,
.carousel[data-carousel-mode="flip"] {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}

.carousel.flip-carousel .carousel-inner,
.carousel[data-carousel-mode="flip"] .carousel-inner {
  width: calc(21.25rem + 8rem);
  height: calc(28.75rem + 2rem);
  position: relative;
  margin: auto;
  transform-style: preserve-3d;
  perspective: 100rem;
  overflow: visible;
}

.carousel.flip-carousel .slide,
.carousel[data-carousel-mode="flip"] .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  margin: 0 auto;
  transform: translateZ(0) rotateY(12deg);
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  inset: 0;
  overflow: visible;
  box-sizing: border-box;
}

.carousel.flip-carousel .slide .card,
.carousel[data-carousel-mode="flip"] .slide .card {
  flex-direction: unset;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff, #f3f4f8);
  border-width: .0625rem;
  border-color: rgba(255, 255, 255, .35);
  border-style: solid;
  border-radius: 1.125rem;
  box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.18);
}


/* 3d Wheel Carousel Mode CSS */

.carousel.carousel-3d-wheel,
.carousel[data-carousel-mode="wheel"] {
  width: 100%;
  height: 42rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  overflow: hidden;
}

.carousel.carousel.carousel-3d-wheel .carousel-inner,
.carousel[data-carousel-mode="wheel"] .carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.85s ease-out;
}

.carousel.carousel-3d-wheel .slide,
.carousel[data-carousel-mode="wheel"] .slide {
  width: 100%;
  height:auto;
  max-width: 24rem;
  position: absolute;
  top: 50%;
  left: 50%;  
  margin: -17rem 0 0 -12rem;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease,
    z-index 0s linear;
  will-change: transform;
  opacity: 1;
  z-index: 1;
}

.carousel.carousel-3d-wheel .slide .item,
.carousel[data-carousel-mode="wheel"] .item {
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
  transform-style: preserve-3d;
  overflow: hidden;
}

.carousel.carousel-3d-wheel .slide .card .card-inner,
.carousel[data-carousel-mode="wheel"] .slide .card .card-inner {
  height: auto;  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(0deg);
}


.carousel.carousel-3d-wheel .slide.active,
.carousel[data-carousel-mode="wheel"] .slide.active {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  transform-origin: center center;
  transform: scale(1.08);
  z-index: 2;
}

.homepage-hero .carousel {
  width: 100%;
  height: 100dvh;
  min-height: 16rem;
  max-height: 56rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.homepage-hero .carousel .slide {
  background-color: var(--color-light-green);
}

.homepage-hero .carousel .progress-bar-wrapper {
  max-width: 24rem;
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
}

.homepage-hero .carousel .indicator {
  position: absolute;
  bottom:1rem;
}

.homepage-hero .carousel .pill-indicator .dot .num {
  display: none;
}


/* === Responsive Adjustments === */

@media all and (min-width: 1599px) {
  .content {
    max-width: 1600px;
  }
}

@media all and (max-width: 1022px) {}


@media all and (min-width:767px) and (max-width:1022px) {

  .carousel .slide .card {
    width: calc(100%/2 - 1rem);
    margin: 0 1rem 0 0;
  }


}

@media all and (max-width:766px) {

  .carousel {
    height: auto;
  }

  .carousel figure {
    background-position: top left;
  }

  .carousel .text-box {
    width: 100%;
    max-width: unset;
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    margin: 0;
    padding: var(--space-4);
    border-radius: 0;
    z-index: 0;
  }

  .carousel.slide .card {
    width: calc(100% - 2rem);
    margin: 1.5rem 1rem;
  }


  .progress-nav {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
    z-index: 2;
  }

  .progress-nav::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
    box-sizing: border-box;
    z-index: 2;
  }

  .progress-nav,
  .homepage-hero .carousel .progress-nav {
    width: 100%;
    position: fixed;
    height: auto;
    bottom: 0;
    left: 0;
    padding: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: #fff;
    box-shadow: 0 0 0.625rem 0.125rem rgba(0, 0, 0, 0.18);
    z-index: 2;
  }

  .progress-bar-wrapper {
    width: 100%;
  }

  .progress-count {
    top: 1rem;
    right:1rem;
  }

  .vertical-bar .progress-indicator .label {
    width: 100%;
    min-width: 5rem;
    text-align: left;

  }

  .carousel-btn.prev {
    left: 0;
  }

  .carousel-btn.next {
    right: 0;
  }

  .carousel[data-carousel-mode="multi-slide"] .item, 
  .multi-slide-carousel .item {
    width: 100%;
  }

  .carousel[data-carousel-mode="multi-item"] .item, 
  .multi-item-carousel .item,
  .carousel[data-carousel-mode="multi-item"] .item.clone,
  .multi-item-carousel .item.clone {
    width: calc(100% - 2rem);
  }

  .carousel.carousel-stacked,
  .carousel[data-carousel-mode="stacked"],
  .carousel.carousel-3d-wheel,
  .carousel[data-carousel-mode="wheel"] {
    overflow: hidden;
  }

  .carousel.carousel-stacked,
  .carousel[data-carousel-mode="stacked"] {
    height: 70vh;
  }

  .carousel.carousel-3d-wheel .slide,
  .carousel[data-carousel-mode="wheel"] .slide {
    width: calc(100% - 4rem);
    margin: 2.5rem 0;
    top: 0;
    left: unset;
    right: unset;
  }

  .carousel.carousel-3d-wheel .slide .card,
  .carousel[data-carousel-mode="wheel"] .card {
    width: 100%;
    margin: 0;
  }

  .carousel.carousel-3d-wheel .slide.is-side,
  .carousel[data-carousel-mode="wheel"] .slide.is-side {
    opacity: 0.5;
  }


  .carousel.carousel-3d-wheel .slide.is-hidden,
  .carousel[data-carousel-mode="wheel"] .slide.is-hidden {
    opacity: 0;
    pointer-events: none;
  }


  .homepage-hero .carousel {
    height: auto;
    max-height: unset;
  }

  .homepage-hero .carousel .carousel-inner {
    height: 100vw;
    max-height: 16rem;
  }

  .homepage-hero .carousel .carousel-btn {
    height: 100vw;
    max-height: 16rem;
    align-self: unset;
  }

  .homepage-hero .carousel .indicator {
    top: unset;
    bottom: unset;
  }

  .homepage-hero .carousel .progress-indicator {
    top: 0;
    left: 0;
  }

}

@media all and (min-width: 500px) and (max-width: 766px) {

  .carousel[data-carousel-mode="multi-item"] .item, 
  .multi-item-carousel .item,
  .carousel[data-carousel-mode="multi-item"] .item.clone,
  .multi-item-carousel .item.clone {
    width: 20rem;
  }
  .carousel.carousel-stacked .slide, 
  .carousel[data-carousel-mode="stacked"] .slide {
    max-width: 20rem;
  }

}

@media all and (max-width: 499px) {

  .carousel.carousel-stacked,
  .carousel[data-carousel-mode="stacked"] {
    height: 82vh;
  }

}