ReactCSS

/* General Styling */
body {
background: linear-gradient(to right, #ffe5b4, #ffd699);
font-family: 'Poppins', sans-serif;
}

/* Glassmorphism Effect */
.login-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #fff3e0, #ffe0b2);
}

.login-box {
display: flex;
width: 80%;
max-width: 900px;
height: 70vh;
border-radius: 20px;
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.2);
}

/* Left Side - Image */
.image-container {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.3);
}

.bsnl-logo {
max-width: 80%;
height: auto;
}

/* Right Side - Form */
.form-container {
width: 50%;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
backdrop-filter: blur(20px);
}

h2 {
color: #ff6600;
text-align: center;
}

/* Form Fields */
.form-label {
font-weight: 600;
color: #333;
}

.form-control {
border-radius: 8px;
}

.btn-primary {
background-color: #ff6600;
border: none;
border-radius: 8px;
transition: 0.3s;
}

.btn-primary:hover {
background-color: #cc5500;
}

/* Navbar */
.navbar {
background-color: #ff6600 !important;
}

.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
}

.nav-link {
color: white !important;
font-size: 1.1rem;
}

.nav-link:hover {
text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
.login-box {
flex-direction: column;
height: auto;
}
.image-container, .form-container {
width: 100%;
}
}