#preloader {
  background-color: var(--7b);
  position: fixed;
  display: flex;
  height: 100vh;
  width: 100%;
  z-index: 100;
  transition: opacity 1.5s cubic-bezier(0.7, 0, 0.33, 1);
}

.npl-preloadSVG {
  animation: loadingSvg 6.5s ease-in-out forwards;
  opacity: 1;
  width: 500px;
  height: 500px;
}

@keyframes loadingSvg {
  0% {
    transform: translateY(0);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(-50%);
  }
}

.npl-preloadSVG text {
  opacity: 0;
  animation: textSvg 1.5s cubic-bezier(0.7, 0, 0.33, 1) forwards;
  animation-delay: 2.2s;
}

@keyframes textSvg {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.logo_image_preloader path {
  stroke: var(--gray2) !important;
  fill: transparent;
  stroke-width: 3px;
}

.npl-preloadSVG-path {
  opacity: 0;
  animation: preloadSvg 2s ease-in-out forwards;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation-delay: 1s;
}

@keyframes preloadSvg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

.loadRemove {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.7, 0, 0.33, 1);
}

/* due to sudden disappearing of preloader .loadRemove cannot handle it so after 
the.loadRemove smoothly removes preloader after that loadingRemove will completely remove 
preloader from top so that swiping clicking can be enabled */
.loadingRemove {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.7, 0, 0.33, 1);
  z-index: -100 !important;
}

.logo_image_preloader {
  width: 100%;
  position: absolute;
  height: auto;
  top: 35%;
  left: 13.2%;
}

.npl-svg-image {
  opacity: 0;
  animation: svgImage 1.2s cubic-bezier(0.7, 0, 0.33, 1) forwards;
  animation-delay: 0.8s;
}

@keyframes svgImage {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}