.carousel {
    width: 100%;
    height: 580px;
    position: relative;
    overflow: hidden;
  }

  .carousel>div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .carousel>div>h1{
    text-align: center;
    font-size: 4.5rem;
    z-index: 4;
    color: #183A1D;
    text-shadow: 2px 2px 5px white,2px 2px 5px #609966;
    
    
  }
  
  .carousel img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .carousel img.active {
    opacity: 1;
  }

  @media screen and (max-width:1100px) {
    .carousel {
        height: 400px;
      }
  }

  @media screen and (max-width:768px) {
    .carousel {
        height: 300px;
      }
  }

  @media screen and (max-width:568px) {
    .carousel {
        height: 270px;
      }
  }