#background-div {
    position: relative;  /* Set relative positioning for child element */
    height: 100vh;  /* Set full viewport height */
    width: 100vw;  /* Set full viewport width */
    overflow: hidden;
  }
  
  #login-form {
    position: absolute;  /* Make child element position absolute */
    top: 50%;  /* Position vertically in the center */
    left: 50%;  /* Position horizontally in the center */
    transform: translate(-50%, -50%);  /* Center based on its own dimensions */
    background-color: white;
    justify-content: center;
    padding: 5%;
    border-radius: 10%;
    width: fit-content;
    /* Adjust padding and margins as needed */
  }

  .to_space {
    padding: 2%;
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0;  /* Initially hide all images */
    animation: slideShow 10s infinite alternate ease-in-out;
  }
  
  @keyframes slideShow {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
  }
  
  /* Optional: Add different animation styles for each image */
  .background-image:nth-child(2) {
    animation-delay: 5s;  /* Start image 2 after 5 seconds */
  }
  

 



#login-form {
    position: relative;
    z-index: 1;
    /* Add your login form styles here */
}



/*new loging page css*/

:root{
  --ink:#141a2b;
  --muted:#5f6676;
  --line:#e7ecf3;
  --bg:#fafbff;
  --input:#f3f5f8;
  --blue:#0d3b66;
  --blue-500:#59608a;   /* button color from mock */
  --radius:14px;
}

*{box-sizing:border-box}

.lg-body{background:#fff;color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.lg-container{max-width:1040px;margin:0 auto;padding:12px 16px}

.lg-top{border-bottom:1px solid #edf1f6}
.lg-back{
  display:inline-block;background:#f6f8fb;border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;text-decoration:none;color:#1f2a44;
}
.lg-main{padding:28px 16px 64px}
.lg-logo{display:flex;justify-content:center;margin:10px 0 16px}
.lg-logo img{height:56px;width:auto}

.lg-card{
  width:640px;max-width:100%;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:24px 28px 26px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.lg-title{font-size:28px;text-align:center;margin:0}
.lg-sub{color:#6a6f7f;text-align:center;margin:8px 0 18px}

.lg-label{display:block;font-weight:600;margin:14px 0 6px}
.lg-input{
  width:100%;background:var(--input);border:1px solid #e5eaf1;border-radius:12px;
  padding:12px 14px;font-size:15px;outline:none;
}
.lg-input:focus{border-color:#c9d8ff;box-shadow:0 0 0 3px rgba(93,135,255,.12)}

.lg-password{position:relative}
.lg-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:8px;background:#f0f2f6;
  display:grid;place-items:center;color:#6b7280;cursor:pointer;
}

.lg-submit{
  width:100%; margin-top:18px;
  background:var(--blue-500); color:#fff; border:0; border-radius:12px;
  padding:12px 16px; font-weight:800; cursor:pointer;
}

.lg-forgot{margin:12px 0 4px;text-align:center}
.lg-forgot a{color:#29427a;text-decoration:underline}

.lg-divider{border:0;border-top:1px solid var(--line);margin:18px 0 14px}

.lg-cta-text{color:var(--muted);text-align:center;margin:0 0 8px}
.lg-create{
  display:block;width:100%;text-align:center;background:#fff;border:1px solid var(--line);
  color:#1f2a44;border-radius:12px;padding:12px 16px;text-decoration:none;font-weight:700;
}

.lg-messages{margin:8px 0}
.lg-msg{background:#fff6f6;border:1px solid #f2d6d6;color:#8d2d2d;padding:10px 12px;border-radius:10px}