@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

.marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 10px;
    width: 100%;
    color:black;
    font-size: 16px;
    display: flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
  }
 

  .marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
  }

  @media (max-width: 575px)
  {
    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 10s linear infinite;
    }
  }

  @keyframes marquee {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }


  .image-flip{
    animation:flip 1s infinite;
  }


  @keyframes flip {
    0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }