.hero .carousel {
    height: 75vh;
    min-height: 500px;
    max-height: 900px;
  }

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

 .hero .carousel-item img {
    object-fit: cover;
    height: 100%;
    filter: brightness(90%) contrast(120%) hue-rotate(20deg);
  }


  .hero .carousel-caption {
    right: 25%;
    left: 25%;
    bottom: 20%;
    z-index: 2;
  }
  .caption-inner {
    background: rgba(0,0,0,.55); /* any colour / opacity you like */
    padding: 1.5rem 1.5rem;        /* space around text */
    width: 100%;                 /* occupy full slide width */
    max-width: 700px;            /* …but limit line length if you prefer */
}


  @media (max-width: 768px) {
    .hero .carousel-caption {
      bottom: 10%;
    }

    .hero .display-4 {
      font-size: 2.5rem;
    }
  }

  .hero h2 {
    margin-bottom: 30px;
    /*font-size: 48px;*/
    font-weight: 700;
    animation: fadeInDown 1s both;
  }



  .hero p {
    animation: fadeInDown 1s both 0.2s;
  }

  .hero .btn{
    animation: fadeInUp 1s both 0.4s;
  }