html,
body {
  height: 100%;
}

.learning_logo{
  width: 463.73px;
}

.loading-container-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../assets/images/mainbg.jpg);
}

.loading-container-img:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loading-img_background {
    position: relative;
    z-index: 1;
    width: 463px;
    height: 0.688rem;
    top: 3.934em;
    max-width: 100%;
    background-color: #00778038;
    border-radius: 1em;
}

.loading-img {
  position: absolute;
  border-radius: 1.5em;
  color: white;
  z-index: 4;
  width: 463px;
}

.loading-img::before {
  content: "";
  position: absolute;
  height: 0.688rem;
  max-width: 100%;
  background-color: #00ADEE;
  border-radius: 1em;
  animation: loader 0.5s ease-in-out 0s infinite alternate-reverse;
}

#loading-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -63px;
}

@keyframes loader {
  0% {
    width: 0%;
    left: 0;
  }

  50% {
    width: 100%;
    left: 0;
  }

  100% {
    width: 0%;
    left: 100%;
  }
}

.splash_mesh {
  position: absolute;
  bottom: 0;
  height: 186px;
  width: 100%;
  object-fit: cover;
}