/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  color: rgb(var(--bs-tertiary-color-rgb));

}





/* CUSTOMIZE THE CAROUSEL

  -------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 1rem;

}

/* 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,
.carousel-img {

  height: 10rem;

}



/* RESPONSIVE CSS

  -------------------------------------------------- */



@media (min-width: 40em) {



  .carousel {

    margin-bottom: 2rem;

  }



  .carousel-item,
  .carousel-img {

    height: 20rem;

  }



  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {



  .carousel {

    margin-bottom: 4rem;

  }



  .carousel-item,
  .carousel-img {
    height: calc(100vh - 8rem);
    width: 100%;
    object-fit: fill
  }



  .featurette-heading {

    margin-top: 7rem;

  }

}