header {
  height: 456px;
}

header .carousel,
header .carousel-inner,
header .carousel-item {
  height: 100%;
}

header .bg-image,
header .bg-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

header .object-fit-cover {
  object-fit: cover;
}

header .hero-caption h1 {
  color: #163495;
  display: inline;
  background: linear-gradient(
    transparent 5%,
    rgba(255,255,255,0.9) 0%
  );
  padding: 0 .4rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

header .hero-caption p {
  text-shadow:
    0 2px 6px rgba(0,0,0,.7),
    0 6px 20px rgba(0,0,0,.5);
}

header .carousel-control-prev,
header .carousel-control-next,
header .carousel-item .container {
  z-index: 2;
}

header .carousel-item h1,
header .carousel-item p,
header .carousel-item a {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

header .carousel-item.active h1,
header .carousel-item.active p,
header .carousel-item.active a {
  opacity: 1;
  transform: translateY(0);
}

header .carousel-control-prev,
header .carousel-control-next {
  width: 8%;
  opacity: 1;
}

header .carousel-control-prev-icon,
header .carousel-control-next-icon {
  width: 30px;
  height: 30px;
  background-size: 100% 100%;
}

header .carousel-control-prev:hover,
header .carousel-control-next:hover {
  opacity: 0.9;
}

header .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.6);
}

header .carousel-indicators .active {
  background-color: #ffffff;
  transform: scale(1.2);
}

@media (max-width: 767.98px) {
  header .carousel-control-prev,
  header .carousel-control-next {
    display: none;
  }

  header .carousel-indicators li {
    width: 12px;
    height: 12px;
  }
}

@media (min-width: 1200px) {
  header {
    height: 700px;
  }
}