/* Main container for the loader */
.loaderContainer {
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgb(15, 15, 16);
  z-index: 100;
}

.disappear {
  animation: vanish 1s forwards;
}

.loaderContainer.disappear {
  transform: translateY(100%);
}

@keyframes vanish {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }

  /*   100%{
    opacity: 0;
    visibility: hidden; */
}


/* SVG logo */
#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: white;
  fill: none;
  stroke-width: 1px;
}

/* Animation for the path */
#logo path {
  stroke-dasharray: 645px;
  stroke-dashoffset: 645px;
  animation: line-anim 2s ease forwards;
  animation-delay: 1s;
}

/* Animation for the circle */
#logo circle {
  stroke-dasharray: 55px;
  stroke-dashoffset: 55px;
  animation: line-anim 2s ease forwards;
  fill: #ffffff;
  /* White color for the dot */
  opacity: 0;
  /* Initially hidden */
}

/* Blink animation for the dot */
@keyframes blink {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* Styling for the loading dot */
#logo circle.loading-dot {
  animation: blink 1s infinite;
  /* Blink animation */
  animation-delay: 3s;
  /* Delay blinking animation */
}

/* Animation for drawing the path */
@keyframes line-anim {
  to {
    stroke-dashoffset: 0;
  }
}