* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
 
  .sliderdiv {
    position: relative;
    width: 99.5%;
    height: 20vh;
    display: flex;
    /*justify-content: center;
    align-items: center;*/
    background: rgb(29, 29, 29);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    border-radius: 0 0 2rem 2rem;
  }
  .slider_container {
    position: relative;
    width: 100%;
    height: 40vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    border-radius: 0 0 2rem 2rem;
  }
  .slider {
    position: relative;
    width: 400%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    animation: 15s cubic-bezier(1, 0.95, 0.565, 1) sliding infinite;
  }
  .slide {
    position: relative;
    min-width: 100%;
    height: 100%;
  }
  .slide img {
    width: 100%;
    height: 100%;
  }
  .slide .caption {
    position: absolute;
    left: 0;
    bottom: 5%;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    text-transform: capitalize;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(1px);
    padding: 1rem 2rem;
    border-radius: 0 2rem 2rem 0;
  }
  .slide.one {
    background: rgb(182, 19, 109);
  }
  .slide.two {
    background: rgb(255, 64, 64);
  }
  .slide.three {
    background: rgb(11, 173, 188);
  }
  .slide.four {
    background: rgb(11, 188, 14);
  }
  .slide.five {
    background: rgb(173, 11, 188);
  }
  @keyframes sliding {
    0% {
      transform: translateX(0%);
    }
    15% {
      transform: translateX(0%);
    }
    25% {
      transform: translateX(-100%);
    }
    45% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(-200%);
    }
    70% {
      transform: translateX(-200%);
    }
    75% {
      transform: translateX(-300%);
    }
    95% {
      transform: translateX(-300%);
    }
    100% {
      transform: translateX(-400%);
    }
  }