.preloader-wrapper {
  display: block;
  width: 100%;
  height: 100vh;
}

.preloader-wrapper img {
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 500px;
  width: 80%;
}

/*Basic Preloader CSS*/
.spinner {
  position: absolute;
  top: 48%;
  left: 48%;
  width: 40px;
  height: 40px;
  margin-top: -70px; 
  background-color: #7b3480;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/*Basic Preloader CSS ends*/


.parrot {
  position: absolute;
  transform-origin: bottom right;
  top: 48%;
  left: 50%;
  margin-top: -100px; 
  width: 20px;
  height: 20px;
  animation: spin 1.5s infinite;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.1, 1);
}

.parrot .feet {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #758ECD;
  border-radius: 50%;
  bottom: -2px;
  right: -4px;
}

.parrot .branch {
  position: absolute;
  width: 60%;
  height: 60%;
  background: #DDC8C4;
  border-radius: 50%;
  bottom: 0px;
  left: 0px;
}

.parrot .body {
  position: absolute;
  width: 15px;
  height: 30px;
  background: #F13030;
  border-radius: 0 30px 30px 0;
  transform: rotate(45deg);
  bottom: -5px;
  right: -5px;
}

.parrot .hair {
  position: absolute;
  clip-path: polygon(100% 0, 0 49%, 100% 49%);
  width: 6px;
  height: 10px;
  background: #F13030;
  top: -10px;
  right: -4px;
  transform: rotate(10deg);
}

.parrot .head {
  position: absolute;
  width: 16px;
  height: 14px;
  background: #F13030;
  border-radius: 50%;
  overflow: hidden;
  top: -10px;
  right: -17px;
  animation: tilt 1.5s infinite;
}

.parrot .beak {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 60%;
  background: #ccc;
  overflow: hidden;
  border-left: solid 2px black;
}

.parrot .lower-beak {
  position: absolute;
  width: 80%;
  height: 30%;
  background: black;
  transform: rotate(30deg);
  bottom: -1px;
  left: -2px;
}

.parrot .patch {
  position: absolute;
  width: 85%;
  height: 82%;
  background: white;
  border-radius: 50%;
  left: 18%;
  bottom: 0;
}

.parrot .eye {
  position: absolute;
  background: black;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  left: 27%;
  top: 12%;
}

.parrot .wing {
  position: absolute;
  width: 12px;
  height: 26px;
  background: #5998C5;
  border-radius: 0 26px 26px 0;
  top: 25%;
  left: 0%;
  transform: rotate(15deg);
  overflow: hidden;
  transform-origin: top left;
  animation: flap 1.5s infinite;
}

.parrot .tail {
  position: relative;
  clip-path: polygon(50% 0%, 0% 100%, 100% 0);
  background: #F13030;
  width: 16px;
  height: 18px;
  top: 69%;
  left: -44%;
  transform: rotate(21deg);
}

.parrot .red {
  position: absolute;
  width: 100%;
  height: 70%;
  background: #F13030;
  border-radius: 50%;
  top: -6px;
  left: -1.4px;
  transform: rotate(10deg);
}

.parrot .yellow {
  position: absolute;
  width: 100%;
  height: 80%;
  background: #FFF689;
  border-radius: 50%;
  left: -1px;
  transform: rotate(10deg);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes flap {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(65deg);
  }
  80% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}