.rolls {

    height: 250px;
    margin: auto;
    /* position: relative; */
    width: 90%;
    /* display: grid; */
    place-items: center;
    overflow: hidden;
  }
  
  .roll-track {
  
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
  }
  
  .roll-track:hover {
  animation-play-state:paused ;
  }
  
  @keyframes scroll {
  
    0% {
    
    transform: translatex(0);
    }
    100% {
      transform: translatex(calc(-250px * 7)); 
    } 
  }
  
  .roll {
    height: 200px;
    /* width: 250px; */
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
  }
  
  
  .roll img {
    /* width: 100%; */
    transition: transform 1s;
  }
  
  .roll img:hover {
   transform: translateZ(10px);
  }
  
  .roll::before,
  .roll::after {
  content: '';
  height: 100%;
  position: absolute;
  width: 15%;
  z-index: 2;
  
  }
  .rolls::before::before {
    Left: 0; 
    top: 0;
  }
    
  .rolls::after {
    right: 0; top: 0; 
    transform: rotatez (180deg);
  }
  
  .contactsinfo{
    padding: 2rem;
    margin-top: 3rem;
    text-align: center;
    align-items: center;
    margin: 0 auto;
    background-color: #eaf5ff;
  }
  .add{
    padding: 25px;
  }