:root{
    --transform-val: 0;
}

/* increase hight if there are more references added and the images are being cut off at the bottom */
.scroll-section .left-scroll{
    height: 750px;
    overflow: hidden;
    /* transition: all 5s ease-in-out; */
    /* scroll-behavior: smooth; */

}
.carousel-inner {
  min-height: 170px;
  display: flex;
  align-items: center;
}

.scroll-section .left-scroll img{
    display: block;
    margin: auto;
    margin-bottom: 25px;
    
}

.scroll-section .left-scroll .left-images::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}
   
.scroll-section .left-scroll .left-images::-webkit-scrollbar-track {
    border: 1px solid #c9c9c9;
    border-radius: 8px;
}
   
.scroll-section .left-scroll .left-images::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 8px;
}

.scroll-section .middle-quote{
    width: 80%;
    margin: auto;
    position: relative;
}
.scroll-section .middle-quote p{
    position: relative;
}
.middle-quote p i{
    font-size: 16px;
}
.middle-quote p i:first-child{
    position: absolute;
    left: -22px;
    top: 0;
}
.middle-quote p i:last-child{
    position: absolute;
    right: -20px;
    bottom: 2px;
}
.middle-quote .text-animation::before{
    position: static;
    display      : inline-block;
    content      : '';
    border-bottom: solid 5px #2e91ad;
    transform-origin: 0 50%;
    transition   : transform 3s ease-in-out;
}
.middle-quote .text-animation{
    position: static;
}
@media (max-width: 991px){
  .scroll-section .left-scroll{
    height: auto;
  }
  .carousel-inner {
    min-height: 300px;
  }
  .scroll-section .left-scroll img {
    margin-bottom: 12px;
  }
  .scroll-section > div{
    margin-bottom: 0 !important;
  }
}
@media (max-width: 767px){
  .carousel-inner p {
      padding: 0;
  }
  .carousel-inner {
    min-height: 450px;
  }
  .en-slide .carousel-inner{
    min-height: 350px;
  }
  .middle-quote p i:first-child {
    left: -18px;
  }
  .middle-quote p i:last-child {
    position: absolute;
    right: -16px;
    bottom: 10px;
  }
  .middle-quote p i {
      font-size: 12px;
  }
}
.carousel-control-next, 
.carousel-control-prev {
  width: 10%;
}

.strongTxt1, .strongTxt2, .strongTxt3, .strongTxt4, .strongTxt5, .strongTxt6, .strongTxt7, .strongTxt8, .strongTxt9, .strongTxt10, .strongTxt11, .strongTxt12, .strongTxt13, .strongTxt14, .strongTxt15, .strongTxt16, .strongTxt17, .strongTxt18, .strongTxt19, .strongTxt20 {
    position: relative;
    color: #000;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
  }
  
  .strongTxt1:hover, .strongTxt2:hover, .strongTxt3:hover, .strongTxt4:hover {
    color: #000;
  }
  
  .strongTxt1::before, .strongTxt2::before, .strongTxt3::before, .strongTxt4::before, .strongTxt5::before, .strongTxt6::before, .strongTxt7::before, .strongTxt8::before, .strongTxt9::before, .strongTxt10::before, .strongTxt11::before, .strongTxt12::before, .strongTxt13::before, .strongTxt14::before,.strongTxt15::before, .strongTxt16::before , .strongTxt17::before , .strongTxt18::before , .strongTxt19::before , .strongTxt20::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #2e91ad;
    /* transform: scaleX(1); */
    transform: scaleX(var(--transform-val));    
    transition: transform 2s ease;
    transform-origin: top left;
  }
  @media (max-width: 575px){
    .strongTxt1::before, .strongTxt2::before, .strongTxt3::before, .strongTxt4::before, .strongTxt5::before, .strongTxt6::before, .strongTxt7::before, .strongTxt8::before, .strongTxt9::before, .strongTxt10::before, .strongTxt11::before, .strongTxt12::before, .strongTxt13::before, .strongTxt14::before,.strongTxt15::before,.strongTxt16::before,.strongTxt17::before,.strongTxt18::before,.strongTxt19::before,.strongTxt20::before{
      display: none;
    }
  }
  @media (max-width: 500px){
    .carousel-inner p {
        padding: 0;
    }
    .de-slide .carousel-inner{
      min-height: 450px;
    }
    .en-slide .carousel-inner{
      min-height: 410px;
    }
  }
  .grey-section .bg-move{
    position: absolute;
    left: 35%;
    top: 50%;
    transform: translate(-50% , -50%);
    z-index: -1;
  }
  
  
  
  .moveRight{
    animation-name: moveORight;
    animation-duration: 5s;
    animation-fill-mode: forwards;
  
  }
  
  
  
  
  @keyframes moveORight {
    0%{
      left: 35%;
    }
  
    50%{
        left: 60%;
    }
  
    100%{
      left: 48%;
    }
    
  }