.hero {
    background-color: white;
    background-size: cover;
    background-position: center;
    height: 572px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#hero-carousel {
    width: 100%;
    height: 100%;
}

#hero-carousel-inner {
    height: 100%;
}

.hero-carousel-item {
    height: 100%;
}

.hero-carousel-item-inner {
    height: 100%;
    display: flex;
}

.hero-container {
    margin: 0px auto;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

/*https://csshero.org/mesher/*/
/*https://codepen.io/P1N2O/pen/pyBNzX*/
#hero-carousel-first {
    background: linear-gradient(-45deg, #232931, #334252, #232855, #163a5f);
	background-size: 400% 400%;
	animation: gradient 12s ease infinite;
    color: #232855;
}

/*https://csshero.org/mesher/*/
/*https://codepen.io/P1N2O/pen/pyBNzX*/
#hero-carousel-second {
    /*background: linear-gradient(-45deg, #003545, #00454a, #163a5f, #0f3057);*/
    background: linear-gradient(-45deg, #5c5757, #363434, #003545, #00454a);
	background-size: 400% 400%;
	animation: gradient 12s ease infinite;
    color: #003545;
}

/*https://csshero.org/mesher/*/
/*https://codepen.io/P1N2O/pen/pyBNzX*/
#hero-carousel-third {
    /*background: linear-gradient(-45deg, #232931, #393e46, #00454a, #003545);*/
    /*background-color: #363333;*/
    background: linear-gradient(-45deg, #2e383f, #2e383f, #2a3356, #20194a);
	background-size: 400% 400%;
	animation: gradient 12s ease infinite;
    color: #2a3356;
}

.hero-content {
    text-align: center;
    color: #000;
}

.hero-container h2 {
    font-size: 30px;
    margin-bottom: 10px;
    color: #e1e1e1;
}

.hero-container p {
    font-size: 16px;
    margin-bottom: 0px;
    /*font-style: italic;*/
    color: #7c7c7c;
}

.hero-carousel-control-prev {
    margin-left: 20px;
    justify-content: flex-start;
}

.hero-carousel-control-next {
    margin-right: 20px;
    justify-content: flex-end;
}

.hero-carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 10px;
}

.hero-cta-btn {
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    color: inherit;
    border-radius: 24px;
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.hero-cta-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Credit: https://stackoverflow.com/questions/33486228/how-to-reveal-one-letter-at-a-time*/
.hero-main-message {
    /*background-color: #ddc965;*/
    /*color: #000000;*/
    display: inline-flex;
    font-weight: 900;
    overflow: hidden;
    white-space: nowrap;
    animation: type 1.5s steps(100, end) 1;
}

.home-header {
    font-size: 34px;
    margin-bottom: 20px;
}

.home-section p {
    font-size: 17px;
    margin-bottom: 40px;
}

.home-section {
    padding: 40px;
}

.home-section:last-of-type {
    padding-bottom: 0px;
}

.our-vision {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.our-vision-content {
    text-align: center;
}

.our-vision-statement-highlight {
    color: rebeccapurple;
    font-weight: bold;
}

#our-vision-image {
    animation: ourvisionimage 12s ease-in-out infinite;
}

@keyframes ourvisionimage {
    0% {
        transform: translatex(0px) translateY(0px);
    }

    14% {
        transform: translatex(-10px) translateY(-10px);
    }

    28% {
        transform: translatex(10px) translateY(10px);
    }

    42% {
        transform: translatex(10px) translateY(-10px);
    }

    56% {
        transform: translatex(-10px) translateY(10px);
    }

    70% {
        transform: translatex(-10px) translateY(0px);
    }

    84% {
        transform: translatex(10px) translateY(0px);
    }

    100% {
        transform: translatex(0px) translateY(0px);
    }
}

.our-performance {
    /*background-color: #f2f2f2;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, #062121, #393e46, #062121);
	background-size: 400% 400%;
	animation: gradient 20s ease infinite;
    color: white;
}

.our-performance-content {
    text-align: center;
}

.our-performance p {
    color: #7c7c7c;
}

@keyframes performancenumbersanimation {
  0% {
      opacity: 0.8;
      color: var(--theme-positive-color);
  }
  23.333% {
      opacity: 1.0;
      color: var(--theme-positive-color);
  }
  33.333% {
      opacity: 0.6;
      color: #7c7c7c;
  }
}

.performance-numbers-holder {
    color: #7c7c7c;
    opacity: 0.6;
    animation: performancenumbersanimation 12s ease infinite;
}

.performance-numbers-text {
    color: inherit;
    font-size: 40px;
    border: none;
    background: none;
    transition: transform 250ms;
    will-change: transform;
}

.performance-numbers-text:hover {
    transform: translateY(-5px);
}

#performance-numbers-1 {
    animation-delay: 0s;
}
#performance-numbers-2 {
    animation-delay: 4s;
}
#performance-numbers-3 {
    animation-delay: 8s;
}

.performance-numbers-subtext {
    color: #7c7c7c;
    opacity: inherit;
    font-weight: bold;
}

.our-system {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.our-system-content {
    text-align: center;
}

.contact {
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-content {
    text-align: center;
}

.contact-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    display: block;
    margin-bottom: 20px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

.contact-form input[type="submit"] {
    background-color: #fc0;
    color: #222;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.contact-form input[type="submit"]:hover {
    background-color: #f90;
}

@media (max-width: 480px) {
  .hero-container h2 {
    font-size: 26px;
  }
}

@media (max-width: 576px) {
  .home-section {
    padding: 40px 20px;
  }
}