.banner-container{
    width: 100%;
    display: flex;
    justify-content: center;
}

.carousel{
    display:block !important;
    max-height:none !important;
    position:relative;
  }

  #MessageViewBody .carousel,
  body.MsgBody .carousel{
    display:none !important;
  }

  .carousel .slides{
    width:100%;
    display:block;
    overflow:hidden;
    position: relative;
    display: flex;
    justify-content: flex-end;
  }  
.slide-overlay{
  position: absolute;
  left:0;
  top:30px;
  /* width:; */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index:12;
}
.title-1,.title-2{
  width:300px;
  height:80px;
  background-color: rgb(25, 91, 158);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 600;
  margin:6px;
}
.t-2{
  animation: textslide2 1.5s ease-in both;
}
.title-1{
  animation: textslide 1s ease-in both;
}
.title-2{
  animation: textslide2 1.5s ease-in both;
}
.t-3{
  animation: textslide2 1.5s ease-in both;
  animation-delay: 1.5s;
}
.t-4{
  animation: textslide2 1.5s ease-in both;
  animation-delay: 1.6s;
}


@keyframes textslide {
  0%{
    transform: translateX(310px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes textslide2 {
  0%{
    transform: translateX(610px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}
.title-2{
  width:220px;
}
.slide-overlay .read-more{
  font-size: 14px;
  font-weight: 500;
  margin:6px;
  margin-top:20px;
}

.slide-overlay .read-more span{
  font-weight: 550;
  font-size: 20px;
}
  .carousel img{
    display:block!important;
    width:80% !important;
    height:auto !important;
    z-index: 10;
  }

  .carousel.responsive{
    width:100% !important;
  }

  .carousel.responsive .car-cont{
    width:100% !important;
    height:auto !important;
  }  


  .carousel.slide .slides{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:1;   
    width:60vw;
    height:500px;
    animation: slide-anim 9s linear infinite;    
  }

  .carousel.slide .slides:nth-child(1){
    position:relative;
    animation-delay: -10s;    
  }
  .carousel.slide .slides:nth-child(2){
    animation-delay: -7s;    
  }
  .carousel.slide .slides:nth-child(3){
    animation-delay: -4s;    
  }
  @keyframes slide-anim
  {
      /* start slide in */
      0% {
        margin-left:100%;
      }
      /* end slide in */
      5%{
        margin-left:0%;
      }
      /* start slide out */
      33.3333%{
        margin-left:0%;
      }
      /* end slide out */
      38.3333%{
        margin-left:-100%;
      }
      100%{
        margin-left:-100%;
      }
  }


  @media(max-width:991px){
    .carousel.slide .slides{
      width:100%;
        height:350px;
    }
    .title-1,.title-2{
      height:60px;
      width:200px;
      font-size: 20px;
    }
    .title-2{
      width:150px;
    }
  }

  .controls{
    width:80px;
    height: 50px;
    display: flex;
    justify-content: center;
    background-color: black !important;
    align-items: center;
    /* margin-left:20px; */
  }
  .controls div{
    margin:auto 18px;
  }
  .image-slider-container{
    height: 370px;
    margin-bottom:8px;
    overflow-y: hidden;
    overflow-x:auto !important;

  }
  .image-slides{
    position: relative;
    overflow-y: hidden;
    margin:auto 10px;
    width:410px;
    animation: slider 8s ease-out  infinite;
    /* transition: all 1s; */
    animation-delay: 2s;
  }
  .image-slides img{
    width:410px;
    height:100%;
    overflow: hidden;
    
  }
  @media(max-width:991px){
    .image-slides{
      width:350px;
    }
    .image-slides img{
      width:350px;
    }
  }
  @keyframes slider {
    0%{
      transform: translateX(0);
    }
    25%{
      transform: translateX(-420px);
    }
    50%{
      transform: translateX(-840px);
    }
    75%{
      transform: translateX(-1260px);
    }
    100%{
      transform: translateX(0);
    }
  }
 

 .image-slide-overlay{
   position: absolute;
   top:0;
   right:0;
   width:40%;
   height:99%;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: black !important;
   
  animation: slidein 8s ease-out infinite;
 }
 @media(max-width:991px){
  .image-slide-overlay{
    width:30%
  }
 }
.slide-inner-overlay{
  color:#fff;
}
.o-2{
  transform: translateX(300px);
  animation-delay: 2s;
}
.o-3{
  transform: translateX(300px);
  animation-delay: 4s;
}
.o-4{
  transform: translateX(300px);
  animation-delay: 6s;
}
.o-5{
  transform: translateX(300px);
  animation-delay: 8s;
}
@keyframes slidein {
  
  0%{
    transform: translateX(300px);
  }
  25%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(0);
  }
  75%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(0);
  }
}

@media(max-width:991px){
  .image-slide-overlay{
    width:50%
  }
  .o-2{
    transform: translateX(100px);
    animation-delay: 2s;
  }
  .o-3{
    transform: translateX(100px);
    animation-delay: 4s;
  }
  .o-4{
    transform: translateX(100px);
    animation-delay: 6s;
  }
  .o-5{
    transform: translateX(100px);
    animation-delay: 8s;
  }
  @keyframes slidein {
    
    0%{
      transform: translateX(100px);
    }
    25%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(0);
    }
    75%{
      transform: translateX(0);
    }
    100%{
      transform: translateX(0);
    }
  }
 }