/* preloading animation start*/
.loadinganimation {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000;
}

.loadinganimation .image-animate { 
    transform:scale(1); 
    width: 100px; 
    animation: rotateImage 3s linear ; 
    filter: sepia(1) saturate(230%) hue-rotate(342deg) brightness(1);
} 
@keyframes rotateImage { 
    0%{ transform:scale(0.6); } 
    20%{ transform:scale(0.8); } 
    40%{ transform:scale(0.6) } 
    60%{ transform:scale(0.8); } 
    80%{ transform:scale(0.6) } 
    100%{ transform: scale(1);} 
}

.loadinganimation .expandline {
  width: 0;
  height: 3px;
  background: #fff;
  margin-top: 20px;
  border-radius: 3px;
  animation: expandLine 2s ease-in-out forwards;
  animation-delay: 2s;
}

@keyframes expandLine {
  0% { width: 0; opacity: 0; }
  50% { opacity: 1; }
  100% { width: 200px; opacity: 1; }
}


.loadinganimation .typewriter p{
 font-size: 1.7rem;
 margin-top: 10px;
 overflow: hidden;
 white-space: nowrap;
 color: #fff;
 width: 0;
 animation: typing 1.5s steps(22) forwards; 
 animation-delay: 3s;
}
@keyframes typing{
  from{
    width: 0;
    border-right: 1px solid #909090;
  }
  to{
    width: 100%;
    border-right: 1px solid #00000000;
  }
}
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease; 
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}
/* preloading animation end*/