.login-form {
    position: absolute;
    left: 70%;
    background-color: #FFAA33;
    height: 70%;
    width: 25%;
    top: 15%;
    border-radius: 1vw;
    opacity: 95%;
}

#user {
    border: none;
    margin-top: 15%;
    margin-left: 15%;
    opacity: 90%;
    border-radius: 0.25vw;
    padding: 2.5% 0% 2.5% 0%;
    width: 70%;
    transition: 0.25s;
}

#user:focus {
    margin-left: 14%;
    width: 72.5%;
    opacity: 100%;
    background-color: white;
}

#pass {
    border: none;
    margin-left: 15%;
    opacity: 90%;
    margin-top: 5%;
    border-radius: 0.25vw;
    padding: 2.5% 0% 2.5% 0%;
    width: 70%;
    transition: 0.25s;
}

#pass:focus {
    margin-left: 14%;
    width: 72.5%;
    opacity: 100%;
    background-color: white;
}

#submit {
    border: none;
    background-color: #FFAA33;
    margin-left: 15%;
    margin-top: 5%;
    width: 70%;
    padding: 2.5% 0 2.5% 0;
    cursor: pointer;
    font-family: Arial;
    font-weight: bold;
    transition: 0.25s;
    border-radius: 0.25vw;
    margin-bottom: 2%;
}

#submit:hover {
    background-color: #FFAA33;
}

#reg {
    margin-left: 68.5%;
    text-decoration: none;
    color: black(233, 233, 233);
    font-weight: bold;
    font-family: Arial
}

h1 {
    margin-top: 7.5%;
    margin-left: 10%;
    font-family: Arial;
    font-size: 2vw;
    margin-bottom: 10%;
}

.login-form p {
    margin-left: 17.5%;
    font-family: arial;
    font-size: 1.25vw;
    width: 70%;
}

.catering-image {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 40%;
}

#title {
    position: absolute;
    top: 5%;
    text-align: center;
    width: 50%;
    font-size: 5vw;
    color: #FFAA33;
}

/* — panels initial & transition styles — */
.loginDiv1,
.loginDiv2,
.loginDiv3 {
  transition: transform 450ms ease, opacity 350ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Ensure loginDiv3 starts hidden */
.loginDiv3 {
  display: none;
  opacity: 0;
  transform: translateX(100%); /* start off-screen to the right */
  visibility: hidden;
}

/* loginDiv2 visible by default */
.loginDiv2 {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Optional: ensure container overflow hidden so slide feels clean */
.loginFormContainer {
  overflow: hidden;
  position: relative;
}