@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
/* body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #343F4F;
} */
.slider{
  display: flex;
  background-image: url(/x1.svg);
  background-size: 80%;
  background-position: left;
  background-repeat: no-repeat;
  animation: slider 20s steps(1) infinite;
}
.header-para{
  color: #ffffff;
  font-size: 25px;
  font-weight: 400;
}

@keyframes slider{
  0% {
    background-image: url(/x1.svg);
    background-color: #c50000;
  }
  25% {
    background-image: url(/y1.svg);
    background-color:#ff393a ;
  }
  50%{
    background-image: url(/z1.svg);
    background-color: #1d1d1d;
  }
  75% {
    background-image: url(/q1.svg);
    background-color: #1d1d1d;
  }
}
.image{
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bgimg 20s infinite;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(/g.png);
}
@keyframes bgimg {
  0%,25%{
    opacity: 1;
    background-image: url(/r.png);
  }
  30%,50%{
    opacity: 1;
    background-image: url(/g.png);
  }
  55%,75%{
    opacity: 1;
    background-image: url(/l.png);
  }
  80%,100%{
    opacity: 1;
    background-image: url(/r.png);
  }
}
.typing{
  display: flex;
  width: 50%;
  align-items: center;
  /* justify-content: center; */
  min-height: 800px;
  animation: bgtype 20s steps(1) infinite;
  /* background: #343F4F; */
}
@keyframes bgtype {
  0%{
    background-color: #c50000;
    
  }
  25%{
    background-color: #ff393a;
  }
  50%{
    background-color: #1d1d1d;
  }
  75%{
    background-color: #1d1d1d;

  }
}
.wrapper{
  display: block;
  align-items: center;
  justify-content: center;
}
.wrapper .static-txt{
  /* width: 100%;
  display: block;
  position: relative;
  left: 0%;  */
  color: #fff;
  font-size: 50px;
  font-weight: 500;
}
.wrapper .dynamic-txts{
  /* margin-left: 15px; */
  /* margin-top: 1000x; */
  height: 120px;
  line-height: 120px;
  overflow: hidden;
  font-weight: 600;
}
.dynamic-txts li{
  list-style: none;
  color: #ffffff;
  font-size: 70px;
  font-weight: 600;
  position: relative;
  top: 0;
  animation: slide 20s steps(4) infinite;
}
@keyframes slide {
  100%{
    top: -480px;
  }
}
.dynamic-txts li span{
  position: relative;
  margin: 5px 0;
  line-height: 80px;
}
.dynamic-txts li span::after{
  content: "";
  padding: 10px;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #343F4F;
  border-left: 2px solid #ffffff;
  animation: typing 5s steps(20) infinite;
  
}

.dynamic-txts li:nth-child(1) span::after{
  background: #c50000;
}
.dynamic-txts li:nth-child(2) span::after{
  background: #ff393a;
}
.dynamic-txts li:nth-child(3) span::after{
  background: #1d1d1d;
}
.dynamic-txts li:nth-child(4) span::after{
  background: #1d1d1d;
}

@keyframes typing {
  10%, 90%{
    left: calc(100% + 30px);
  }
  100%{
    left: 0;
  }
}
.header-para span::after{
  content: "";
  padding: 5px;
  animation: header-p 20s steps(1) infinite;
}
@keyframes header-p {
  0%,25%{
    content:"Power your restaurants with on-demand deliveries.";
    background-color: #c50000;
  }
  25%,50%{
    content:"Power your business with on-demand deliveries.";
    background-color: #ff393a;
  }
  50%,75%{
    content:"Power your business with on-demand deliveries.";
    background-color: #1d1d1d;
  }
  75%,100%{
    content:"Power your business with on-demand deliveries.";
    background-color: #1d1d1d;
  }
}
.header-button{
font-size: 24px;
color: #fff;
border: 2px solid white;
border-radius: 37px;
background-color: rgba(255, 255, 255, 0);
padding: 7px 30px;
margin-top: 25px;

}
.header-button:hover{
  background-color: rgb(255, 255, 255);
  color:#c50000;
  cursor: pointer;
}
@media only screen and (max-width: 876px) {
  .slider{
    display: block;
    width: 100vw;
    /* background-size: 30%;
    background-position: bottom;
    background-repeat: no-repeat;
    animation: bgimg 20s steps(1) infinite; */
  }
  .image{
    display: none;
    width: 100vw;
  }
  .typing{
    width: 100%;
    display: flex;
    padding: 30px;
    min-height: 700px;
    background-size: 50vh;
    background-position-x: 80%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    
  }
  .wrapper .static-txt{
    font-size: 30px;
    font-weight: 500;
  }
  .wrapper .dynamic-txts{

    height: 69px;
    line-height: 70px;
    overflow: hidden;
    font-weight: 600;
  }
  .dynamic-txts li{
    list-style: none;
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    position: relative;
    top: 0;
    animation: slide 20s steps(4) infinite;
  }
  @keyframes slide {
    100%{
      top: -280px;
    }
  }
  .dynamic-txts li span{
    position: relative;
    margin: 10px 0;
    line-height: 50px;
  }
  .dynamic-txts li span::after{
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background: #343F4F;
    border-left: 2px solid #ffffff;
    z-index:0;
    animation: typing 5s steps(20) infinite;
    
  }
  .header-button{
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    border: 2px solid white;
    border-radius: 37px;
    background-color: rgba(255, 255, 255, 0);
    padding: 7px 30px;
    margin-top: 25px;
    margin-bottom: 150px;
  }
  .header-para{
    font-size: 18px;
    font-weight: 400;
    margin-top: 0px;
    padding: 5px;
    z-index:999;

  }
  @keyframes bgtype {
    0%{
      background-color: #c50000;
      background-image: url(/r.png);
      
    }
    25%{
      background-color: #ff393a;
      background-image: url(/g.png);
    }
    50%{
      background-color: #1d1d1d;
      background-image: url(/l.png);
    }
    75%{
      background-color: #1d1d1d;
      background-image: url(/r.png);
  
    }
  }
}