/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
	margin-bottom: 4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
    }

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}

.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.carousel-item.active, .carousel-item-next, .carousel-item-prev {
  display: block;
  background: #5a5a5a;
}

.carousel-caption h1{
  font-family: 'Exo', sans-serif;
  filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 1));
  mix-blend-mode: multiply;
}

.carousel-caption p{
  font-family: 'Exo', sans-serif;
  filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 1));
  mix-blend-mode: multiply;
}

.carousel-item img{
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: auto;
  top: 0;
  left: -100%;
}

.carousel-item:nth-child(2) img{
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: auto;
  top: 0;
  left: -190%;
}

@media only screen and (min-width: 764px) {
  .carousel-item img{
    height: 100%;
    width: auto;
    top: 0;
    left: -50%;
  }

  .carousel-item:nth-child(2) img{
    height: 100%;
    width: auto;
    top: 0;
    left: -50%;
  }
  }

  @media only screen and (min-width: 1024px) {
    .carousel-item img{
      height: 100%;
      width: auto;
      top: 0;
      left: -30%;
    }
    .carousel-item:nth-child(2) img{
      height: 100%;
      width: auto;
      top: 0;
      left: -30%;
    }
    
    }

    @media only screen and (min-width: 1440px) {
      .carousel-item img{
        height: 100%;
        width:100%;
        top: 0;
        left: 0;
      }
      .carousel-item:nth-child(2) img{
        height: 100%;
        width:100%;
        top: 0;
        left: 0;
      }
      }



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

}