.wrapper {
    max-width: 800px;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
  }
  section.page {
    height:100vh;
    position: relative;
    /* margin-top: 11rem; */
  }
  .home-container{
    background-color:#F7C2C5;
  }
  .home > .img-wrapper {
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: 50px;
  }
  .home > .img-wrapper > img.red-big-background {
    bottom: 85px;
  }
  .home > .img-wrapper > img.parkgenie-logo {
    height: auto;
    top: -150px;
  }
  .red-big-background{
    position: absolute;
    right: -103px;
    animation:red-big-background-animation 1s 1s linear forwards,
    red-big-background-animation-sec 1s 3s linear forwards;
  }
  @-webkit-keyframes red-big-background-animation {
    from{
      right:0;
    }
    to{
      right: -103px;
    }
  }
  @-webkit-keyframes red-big-background-animation-sec {
    from{
      /* width: 115%; */
      opacity: 1;
      /* transform: translate(-50%, -50%); */
    }
    to{
     /* width: 100%; */
     opacity: 0;
    }
  }
  .bottom-building{
    position: relative;
    height: 300px;
    right: 43%;
    opacity: 1;
    animation:bottom-building-animation 1s 1s linear forwards,
    bottom-building-animation-sec 1s 3s linear forwards;
  }
  @-webkit-keyframes bottom-building-animation {
    from{
      right: 43%; 
      opacity: 1;
    }
    to{
      right: 21%;
      opacity: 1;
    }
  }
  @-webkit-keyframes bottom-building-animation-sec {
    from {
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  .parkgenie-logo{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    animation: parkgenie-logo-animation 1s 1s linear forwards,
    parkgenie-logo-animation-sec 1s 3s linear forwards;
  }
  @-webkit-keyframes parkgenie-logo-animation {
    from{
      left: 0%;
    }
    to{
      left: 50%;
    }
  }
  @-webkit-keyframes parkgenie-logo-animation-sec {
    from {
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  .car-contaoner{
    position: relative;
    left: 242px;
  }
  .car-one{
    position: absolute;
    left: 320px;
    /* bottom: -285px; */
    width: 51px;
    bottom: 27px;
    z-index: 3;
    animation: car-one-animation 1s 1s linear forwards,
    car-one-animation-sec 1s 3s linear forwards;
  }
  @-webkit-keyframes car-one-animation {
    from{
      bottom: 0px;
      left: 442px;
    }
    to{ 
      bottom: 27px;
      left: 290px;
    }
  }
  @-webkit-keyframes car-one-animation-sec {
    from {
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  .car-two{
    width: 51px;
    position: absolute;
    bottom: 27px;
    left: 374px;
    z-index: 2;
    animation: car-two-animation 1s 1s linear forwards,
    car-three-animation-sec 1s 3s linear forwards;
  }
  @-webkit-keyframes car-two-animation {
    from{
      bottom: 0px;
      left: 506px;
    }
    to{
      bottom: 27px;
      left: 342px;
    }
  }
  @-webkit-keyframes car-three-animation-sec {
    from {
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  .car-three{
    width: 51px;
    position: absolute;
    bottom: 27px;
    left: 429px;
    z-index: 1;
    animation: car-three-animation 1s 1s linear forwards,
    car-three-animation-sec 1s 3s linear forwards;
  }
  @-webkit-keyframes car-three-animation {
    from{
      bottom: 0px;
      left: 606px;
    }
    to{
      bottom: 27px;
      left: 395px;
    }
  }
  @-webkit-keyframes car-three-animation-sec {
    from {
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  .car-four{
    width: 51px;
    position: absolute;
    bottom: 27px;
    left: 534px;
    z-index: 0;
    animation: car-four-animation 1s 1s linear forwards,
    car-four-animation-sec 1s 3s linear forwards;
  }
  @-webkit-keyframes car-four-animation {
    from{
      bottom: 0px;
      left: 806px;
    }
    to{
      bottom: 27px;
      left: 502px;
    }
  }
  @-webkit-keyframes car-four-animation-sec {
    from {
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  /* allindiabazaar */
  .red-building{
    position: absolute;
    height: 338px;
    left: -302px;
    top: -50%;
    opacity: 0;
    animation: red-building-animation 1s 4s linear forwards;
  }
  @-webkit-keyframes red-building-animation {
    from{
      opacity: 1;
        top:0%;
        height: 300px;
    }
    to{
     top:-50%;
      opacity: 1;
      height: 338px;
    }
  }
  /* @-webkit-keyframes red-building-animation {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.25;
    }
    75% {
      opacity: 0.25;
    }
    100% {
      opacity: 1;
    }
  } */
  .man-one{
    position: absolute;
    /* width: 41%; */
    bottom: 3%;
    left: 30%;
    opacity:0;
    animation: man-one-animation 1s 4s linear forwards,
     man-one-animation-sec 1s 6s linear forwards;
  }
  @-webkit-keyframes man-one-animation {
    from{
      opacity: 0;
      bottom: -78%;
      left: 30%;
    }
    to{
      opacity: 1;
      bottom: 3%;
      left: 30%;
    }
  }
  @-webkit-keyframes man-one-animation-sec {
    from{
      opacity: 1;
      left: 30%;
    }
    to{
      opacity: 0;
      left: -30%;
    }
  }
  .man-two{
    position: absolute;
    bottom: -15%;
    left: 25%;
    opacity:0;
    animation: man-two-animation 1s 4s linear forwards,
    man-two-animation-sec 1s 6s linear forwards;
  }
  @-webkit-keyframes man-two-animation {
    from{
      opacity: 0;
      bottom: -78%;
    }
    to{
      bottom: -15%;
      opacity: 1;
    }
  }
  @-webkit-keyframes man-two-animation-sec {
    from{
      opacity: 1;
      left: 25%;
    }
    to{
      opacity: 0;
      left: -25%;
    }
  }
  .allindiabazaar-logo{
    position: absolute;
    top: -78%;
    transform: translate(-50%, -50%);
    left: 50%;
    opacity:0;
    animation: allindiabazaar-logo-animation 1s 4s linear forwards,
    allindiabazaar-logo-animation-sec 1s 6s linear forwards;
  }
  @-webkit-keyframes allindiabazaar-logo-animation {
    from{
      opacity: 0;
        left: 0;
    }
    to{
     left: 50%;
     opacity: 1;
     
    }
  }
  @-webkit-keyframes allindiabazaar-logo-animation-sec {
    from{
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  /* safewebkey */
  .safewebkey-bottom{
    width: 60%;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: -50%;
    opacity: 0;
    animation:safewebkey-bottom-animation-sec 1s 6s linear forwards;
  }
  @-webkit-keyframes safewebkey-bottom-animation-sec{
    from{
      opacity: 0;
      bottom: -10%;
    }
    to{
      opacity: 1;
      bottom: -50%;
    }
  }
  .safewebkey-top{
    position: absolute;position: absolute;
    top: -55%;
    width: 43%;
    transform: translate(-50%, -50%);
    left: 50%;
    opacity: 0;
    animation:safewebkey-top-animation-sec 1s 6s linear forwards;
  }
  @-webkit-keyframes safewebkey-top-animation-sec{
    from{
      opacity: 0;
      left: 0;
    }
    to{
      opacity: 1;
      left: 50%;
    }
  }
  .safewebkey-logo{
    position: absolute;
    top: -100%;
    width: 49%;
    transform: translate(-50%, -50%);
    left: 50%;
    opacity: 0;
    animation:safewebkey-logo-animation-sec 1s 6s linear forwards;
  }
  @-webkit-keyframes safewebkey-logo-animation-sec{
    from{
      opacity: 0;
      left: 0;
    }
    to{
      opacity: 1;
      left: 50%;
    }
  }