:root{
    --app-main:#F28C28;
}
body {
background-color: #f8f9fa;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.login-container {
height: 100vh;
}
.login-form {
background-color: white;
border-radius: 10px;
padding: 2rem;
}
.banner-section {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
            url('https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg') 
            center/cover no-repeat;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem;
}
.logo {
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.btn-login {
background-color: #3498db;
border: none;
padding: 0.75rem;
font-weight: 600;
}
.btn-login:hover {
background-color: #2980b9;
}
.form-control:focus {
border-color: #3498db;
box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}

.forgot-password {
   border: none;
   outline: none;
}
.forgot-password {
color: #7f8c8d;
text-decoration: none;
background: transparent;
}
.forgot-password:hover {
color:var(--app-main);
}
@media (max-width: 768px) {
.banner-section {
    border-radius: 10px 10px 0 0;
    padding: 1.5rem;
}
.login-form {
    border-radius: 0 0 10px 10px;
}
}

.auth-logo{
    width: 200px;
    height: 72px;
}