.aboutMain{
    /* background-image: url(/images/aboutbg.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
}
.aboutH{
    color: #3498db !important;
}
.aboutP{
    color: #000000c4 !important;
    font-size: 0.91rem;
}
.aboutHead{
    padding: 15px;
}
.aboutIn{
    padding: 20px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.171);
    margin: 20px;
}
.abhImg{
    width: 100px;
    height: 100px;
    object-fit: cover;
}
/* normal carousel NON HOVER styles */
.carousel {
    position: relative;
    overflow: hidden;
    z-index: 10001;
}

.carousel-content {
    display: flex;
    margin: 150px 0 70px;
    transition: 500ms;
}

@media(max-width: 1024px) {
    .carousel-content {
        margin: 100px 0 50px;
    }
}

@media(max-width: 800px) {
    .carousel-content {
        margin: 70px 0 30px;
    }
}

.carousel-content img {
    padding: 20px;
    height: 50vh;
    min-width: 100vw;
    max-width: 100vw;
    object-fit: cover;
}

.carousel-content video {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    object-fit: fill;
}

.carousel .carousel-control-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10%;
    cursor: pointer;
    z-index: 1;
}

.carousel .carousel-control-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10%;
    cursor: pointer;
    z-index: 1;
}
.Maincontainer{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .wrapper {
    margin-top: 10px;
    width: 90%;
    max-width: 1536px;
    margin-inline: auto;
    height: 100px;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0)
    );
  }
  
  @keyframes scrollLeft {
    to {
      left: -200px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -200px;
    }
  }
  .itemImages{
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
  }
  .spImg{
    border-radius: 20px;
    object-fit: cover !important;
    border-radius: 28px;
  }
  .itemLeft,
  .itemRight {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* background-color: rgb(241 241 241); */
      border-radius: 6px;
      position: absolute;
      animation-timing-function: linear;
      animation-duration: 40s;
      animation-iteration-count: infinite;
  }

  .itemStyle{
height: 100px;
width: 100px;
/* background-color: rgb(206, 206, 206); */
  }
  
  .itemLeft {
    left: max(calc(100px * 24), 100%);
    animation-name: scrollLeft;
  }
  
  .itemRight {
    right: max(calc(100px * 24), 100%);
    animation-name: scrollRight;
  }
  
  .item1 { animation-delay: calc(40s / 24 * (24 - 1) * -1); }
  .item2 { animation-delay: calc(40s / 24 * (24 - 2) * -1); }
  .item3 { animation-delay: calc(40s / 24 * (24 - 3) * -1); }
  .item4 { animation-delay: calc(40s / 24 * (24 - 4) * -1); }
  .item5 { animation-delay: calc(40s / 24 * (24 - 5) * -1); }
  .item6 { animation-delay: calc(40s / 24 * (24 - 6) * -1); }
  .item7 { animation-delay: calc(40s / 24 * (24 - 7) * -1); }
  .item8 { animation-delay: calc(40s / 24 * (24 - 8) * -1); }
  .item9 { animation-delay: calc(40s / 24 * (24 - 9) * -1); }
  .item10 { animation-delay: calc(40s / 24 * (24 - 10) * -1); }
  .item11 { animation-delay: calc(40s / 24 * (24 - 11) * -1); }
  .item12 { animation-delay: calc(40s / 24 * (24 - 12) * -1); }
  .item13 { animation-delay: calc(40s / 24 * (24 - 13) * -1); }
  .item14 { animation-delay: calc(40s / 24 * (24 - 14) * -1); }
  .item15 { animation-delay: calc(40s / 24 * (24 - 15) * -1); }
  .item16 { animation-delay: calc(40s / 24 * (24 - 16) * -1); }
  .item17 { animation-delay: calc(40s / 24 * (24 - 17) * -1); }
  .item18 { animation-delay: calc(40s / 24 * (24 - 18) * -1); }
  .item19 { animation-delay: calc(40s / 24 * (24 - 19) * -1); }
  .item20 { animation-delay: calc(40s / 24 * (24 - 20) * -1); }
  .item21 { animation-delay: calc(40s / 24 * (24 - 21) * -1); }
  .item22 { animation-delay: calc(40s / 24 * (24 - 22) * -1); }
  .item23 { animation-delay: calc(40s / 24 * (24 - 23) * -1); }
  .item24 { animation-delay: calc(40s / 24 * (24 - 24) * -1); }
  

  .slideupAnimation {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* This class will be added when the element enters the viewport */
.slideupAnimation.show {
    opacity: 1;
    transform: translateY(0);
}