.sky-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #87CEEB, #B0D4F1, #E0F6FF);
}

.sky-container > .container {
  position: relative;
  z-index: 1;
}

/* Cloud styling */
.cloud {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: white;
  border-radius: 100px;
  opacity: 0.8;
  animation: float linear infinite;
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 100px;
}

.cloud-1 {
  width: 100px;
  height: 40px;
  top: 15%;
  left: -150px;
  animation-duration: 35s;
}

.cloud-1::before {
  width: 50px;
  height: 50px;
  top: -25px;
  left: 15px;
}

.cloud-1::after {
  width: 60px;
  height: 40px;
  top: -20px;
  right: 15px;
}

.cloud-2 {
  width: 120px;
  height: 45px;
  top: 35%;
  left: -180px;
  animation-duration: 45s;
  animation-delay: 5s;
}

.cloud-2::before {
  width: 55px;
  height: 55px;
  top: -28px;
  left: 20px;
}

.cloud-2::after {
  width: 65px;
  height: 45px;
  top: -22px;
  right: 20px;
}

.cloud-3 {
  width: 90px;
  height: 35px;
  top: 60%;
  left: -120px;
  animation-duration: 40s;
  animation-delay: 10s;
}

.cloud-3::before {
  width: 45px;
  height: 45px;
  top: -22px;
  left: 12px;
}

.cloud-3::after {
  width: 50px;
  height: 35px;
  top: -18px;
  right: 12px;
}

.cloud-4 {
  width: 110px;
  height: 42px;
  top: 80%;
  left: -140px;
  animation-duration: 50s;
  animation-delay: 15s;
}

.cloud-4::before {
  width: 52px;
  height: 52px;
  top: -26px;
  left: 18px;
}

.cloud-4::after {
  width: 62px;
  height: 42px;
  top: -21px;
  right: 18px;
}

@keyframes float {
  0% {
    left: -200px;
  }
  100% {
    left: calc(100% + 200px);
  }
}





.loader {
        width: 48px;
        height: 48px;
        border-radius: 50%;
  display: inline-block;
        position: relative;
        animation: rotate 1s linear infinite
      }
      .loader::before , .loader::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 5px solid #FFF;
        animation: prixClipFix 2s linear infinite ;
      }
      .loader::after{
        border-color: #070bf5;
        animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
        inset: 6px;
      }

      @keyframes rotate {
        0%   {transform: rotate(0deg)}
        100%   {transform: rotate(360deg)}
      }

      @keyframes prixClipFix {
          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
      }

.login-btn-loader {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.login-btn-loader::before,
.login-btn-loader::after {
  border-width: 2px;
  border-color: #ffffff;
}

.login-btn-loader::after {
  border-color: #d9e2ff;
  inset: 3px;
}