/* loader.css */

#loader{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  background:white;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
  transition:opacity .6s ease, visibility .6s ease;
}

.loader-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px;
}

.loader-content img{
  width:140px;
  animation:float 3s ease-in-out infinite;
}

.loading-bar{
  width:220px;
  height:8px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

.loading-bar span{
  display:block;
  width:40%;
  height:100%;
  background:#1ea7ff;
  border-radius:999px;
  animation:loading 1.2s linear infinite;
}

.loader-content p{
  color:#6b7280;
  font-size:15px;
  font-weight:500;
  letter-spacing:.5px;
}

#loader.hide{
  opacity:0;
  visibility:hidden;
}

#main-content{
  opacity:0;
  transform:translateY(20px);
  transition:1s ease;
}

#main-content.show{
  opacity:1;
  transform:translateY(0);
}

@keyframes loading{

  0%{
    transform:translateX(-120px);
  }

  100%{
    transform:translateX(260px);
  }

}