@keyframes heroFade {
  0%   { background-image: url("/images/about-images-1.jpg"); opacity: 1; }
  20%  { background-image: url("/images/about-images-1.jpg"); opacity: 1; }
  25%  { background-image: url("/images/about-images-1.jpg"); opacity: 1; }

  25%  { background-image: url("/images/about-images-2.jpg"); opacity: 1; }
  30%  { background-image: url("/images/about-images-2.jpg"); opacity: 1; }
  45%  { background-image: url("/images/about-images-2.jpg"); opacity: 1; }
  50%  { background-image: url("/images/about-images-2.jpg"); opacity: 1; }

  50%  { background-image: url("/images/about-images-3.jpg"); opacity: 1; }
  55%  { background-image: url("/images/about-images-3.jpg"); opacity: 1; }
  70%  { background-image: url("/images/about-images-3.jpg"); opacity: 1; }
  75%  { background-image: url("/images/about-images-3.jpg"); opacity: 1; }

  75%  { background-image: url("/images/about-images-4.jpg"); opacity: 1; }
  80%  { background-image: url("/images/about-images-4.jpg"); opacity: 1; }
  95%  { background-image: url("/images/about-images-4.jpg"); opacity: 1; }

  100% { background-image: url("/images/about-images-1.jpg"); opacity: 1; }

}

.introduction-text > div {
  text-align: center;
}

.about-us-image {

  display: block;
  max-width: 300px;
  height: auto;
  margin: 20px auto;
  border: solid 5px #ffffff2f;
}

.contact-us-button {
    display: block;
    margin: 100px auto 0 auto;
}

@media (max-width: 768px) {

  .home-page-section-tagline-main {
    margin-top: 0.75rem;
    font-size: clamp(1.4rem, 8vw, 2rem);
    line-height: 1.2;
    text-align: center;
  }

    .home-page-section-tagline-sub {
    margin-top: 0.75rem;
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.2;
    text-align: center;
  }

  .about-us-image {
    max-width: 80%;
  }
}