: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: 800px;
  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,
.strongTxt21,
.strongTxt22 {
  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,
.strongTxt21::before,
.strongTxt22::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,
  .strongTxt21::before,
  .strongTxt22::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%;
  }
}