body {
  overflow: hidden;
  position:relative;
  width:100%;
  height:100%
}

#formAllListings {
  width: 100%;
  height: 100%; /* use 100% here */
  position: relative;
 }
.containerloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.containerloaderpage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.containerloaderfilter {
  height: 100vh;
  width: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 9999;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.item-1 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-1 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 100ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-1 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #E8DDB5;
}
@keyframes right-1 {
  10% {
    transform: rotate(250deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(250deg) translateX(-100px);
  }
  100% {
    transform: rotate(250deg) translate(0, 0px);
  }
}
.item-2 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-2 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 200ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-2 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #E8DDB5;
}
@keyframes right-2 {
  10% {
    transform: rotate(375deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(375deg) translateX(-100px);
  }
  100% {
    transform: rotate(375deg) translate(0, 0px);
  }
}
.item-3 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-3 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 300ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-3 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #E8DDB5;
}
@keyframes right-3 {
  10% {
    transform: rotate(500deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(500deg) translateX(-100px);
  }
  100% {
    transform: rotate(500deg) translate(0, 0px);
  }
}
.item-4 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-4 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 400ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-4 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #B2C9AB;
}
@keyframes right-4 {
  10% {
    transform: rotate(625deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(625deg) translateX(-100px);
  }
  100% {
    transform: rotate(625deg) translate(0, 0px);
  }
}
.item-5 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-5 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 500ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-5 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #B2C9AB;
}
@keyframes right-5 {
  10% {
    transform: rotate(750deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(750deg) translateX(-100px);
  }
  100% {
    transform: rotate(750deg) translate(0, 0px);
  }
}
.item-6 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-6 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 600ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-6 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #B2C9AB;
}
@keyframes right-6 {
  10% {
    transform: rotate(875deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(875deg) translateX(-100px);
  }
  100% {
    transform: rotate(875deg) translate(0, 0px);
  }
}
.item-7 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-7 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 700ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-7 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #92B6B1;
}
@keyframes right-7 {
  10% {
    transform: rotate(1000deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(1000deg) translateX(-100px);
  }
  100% {
    transform: rotate(1000deg) translate(0, 0px);
  }
}
.item-8 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-8 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 800ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-8 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #92B6B1;
}
@keyframes right-8 {
  10% {
    transform: rotate(1125deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(1125deg) translateX(-100px);
  }
  100% {
    transform: rotate(1125deg) translate(0, 0px);
  }
}
.item-9 {
  width: 100px;
  height: 100px;
  position: absolute;
  animation: right-9 4s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 900ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-9 > * {
  width: 20px;
  height: 20px;
  background: #F583A1;
  border-radius: 50%;
  background-color: #92B6B1;
}
@keyframes right-9 {
  10% {
    transform: rotate(1250deg) translate(0, 0px);
  }
  50%, 65% {
    transform: rotate(1250deg) translateX(-100px);
  }
  100% {
    transform: rotate(1250deg) translate(0, 0px);
  }
}



.preloaderimg{
  display: none;
  position: absolute;
  width: 100%;
  z-index: 11111
}
.preloaderimg-text{
  color: #96c2bc;
  font-size: 20px;
  margin-left: 47%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
}
.preloadergif{
  margin-left: 46%;
  position: relative;
}