body {
    margin: 0;
    overflow: hidden;
    background-image: url('/images/road1.jpg'); /* Direct URL since it's public */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100px;
}

.container-login {
    position: absolute;
    top: 60%;
    right: -300px; 
    transform: translateY(-50%);
    height: 400px;
    width: 600px;
    padding: 20px;
  
    animation: moveLeftToRight 4s ease-out forwards;
    z-index: 1; 
}

@keyframes moveLeftToRight {
    0% {
        right: -300px;
    }
    100% {
        right: calc(40% - 300px); /* Stop at right side */
    }
}

/* Animation for the login form */
#login-form {
    position: absolute;
    top: 40%;
    left: -300px; /* Start off-screen */
    transform: translateY(-50%);
    width: 400px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2; /* Ensure the form is in front of the rickshaw */
    animation: moveLoginForm 4s ease-out forwards;
}

@keyframes moveLoginForm {
    0% {
        left: -300px;
    }
    100% {
        left: calc(55% - 600px); /* Adjust this value to position it where you want */
    }
}

.rickshaw {
    width: 100%;
    height: auto;
}
.driver{
display: none;
position: absolute;
top: 64%;
transform: translateY(-50%);
height: 400px;
width:300px; 
z-index: 1;

}
.floating-label-group {
position: relative;
}

.floating-label {
position: absolute;
top: 12px;
left: 8px;
font-size: 16px;
color: #999;
pointer-events: none;
transition: 0.3s ease all;
}

.floating-label-group input:focus + .floating-label,
.floating-label-group input:not(:placeholder-shown) + .floating-label,
.floating-label-group select:focus + .floating-label,
.floating-label-group select:valid + .floating-label {
top: -16px;
left: 0;
font-size: 14px;
color: #ff416c;
background: white;
padding: 0 4px;
}
.forgot-link:hover {
text-decoration: underline;
color: #dc3545;
transform: translateX(2px);
transition: all 0.2s ease-in-out;
}

@media (max-width: 768px) {
body {
    background-position: top;
    overflow-y: auto;
    height: auto;
    background-size: cover; 
}

#rickshawImage, 
#driverImage {
    display: block; /* allow JS to control display */
}

#login-form {
    position: static;
    margin: 50px auto;
    transform: none;
    animation: none;
    width: 90%;
    max-width: 400px;
    z-index: 10;
    display: none; /* Initially hidden on mobile */
}
}