.slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: all 0s;
      overflow: hidden; /* Ensure images don't overflow */
  }

  .slide-content {
      position: relative; /* Make the content container relative */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100%; /* Ensure content container takes full height */
  }

  .slide-content img, .slide-content a {
      width: 100%; /* Ensure image doesn't exceed container width */
      height: 722px; /* Ensure image doesn't exceed container height */
      object-fit: cover; /* Maintain aspect ratio */
  }

  .slide-content span {
      font-size: 5rem;
      color: #fff;
      background-color: rgba(0, 0, 0, .6);
      padding: 10px 20px;
      position: absolute; /* Position the text absolutely */
      bottom: 38%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  .dir-control{
      cursor: pointer;
      position:absolute;
      top:50%;
      margin-top:-30px;
      width:0;
      height:0;
      z-index:5;
  }
  .fa {
      display:inline-block;
      line-height: 50px;
      background-color:rgba(0,0,0, .3);
      width:50px;
      height:53px;
      color:white;
      text-align: center;
      vertical-align: bottom;
      font-size:2em;
      border-radius: 5px;
  }

  #dir-control-left{
      left:0;
      margin-left:10px;
  }

  #dir-control-right{
      right:0;
      margin-right:60px;
  }
  .slider-active{
      visibility:hidden;
      opacity:0;
  }
  .slide.slide-is-active{
      visibility:visible;
      opacity: 1;
  }

  .slide-transition{
      transition: all .5s ease-in-out;
  }


@media screen and (max-width: 768px) {
  .slide-content img, .slide-content a {
      height: auto; /* Ensure image doesn't exceed container height */
  }
}