body {
  
}

.kenburns-top {
  background: url('../images/xl_image.png') no-repeat center center fixed;
  background-size: cover;
  background-position: center;
  position: fixed; /* Ensure it spans the full viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-animation: kenburns-top 10s ease-in-out infinite; /* Loop infinitely */
  animation: kenburns-top 10s ease-in-out infinite; /* Loop infinitely */
}

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1.05) translateY(0); /* Start with less zoom */
            transform: scale(1.05) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  50% {
    -webkit-transform: scale(1.15) translateY(-10px); /* Slightly zoom in */
            transform: scale(1.15) translateY(-10px);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.05) translateY(0); /* Return to less zoom */
            transform: scale(1.05) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
}

@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1.05) translateY(0); /* Start with less zoom */
            transform: scale(1.05) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  50% {
    -webkit-transform: scale(1.15) translateY(-10px); /* Slightly zoom in */
            transform: scale(1.15) translateY(-10px);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.05) translateY(0); /* Return to less zoom */
            transform: scale(1.05) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
}


.login-right-container {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 30px;
  border-radius: 10px;
  transform: translateY(100%);
}

@media (max-width: 768px) {
  .login-right-container {
      width: 80%;
      left: 50%;
      transform: translate(-50%, 100%);
  }

  @keyframes slide-up {
      0% {
          transform: translate(-50%, 100%);
      }
      100% {
          transform: translate(-50%, -50%);
      }
  }
}

.submit-btn {
  background-color: #ff5722;
  color: white;
  border: none;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #e64a19;
}

.error-message {
  color: #ff5722;
}