*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Segoe UI',sans-serif;

    background:linear-gradient(135deg,#1d3557,#457b9d,#4cc9f0);

    overflow-x:hidden;

}

.login-section{

    min-height:100vh;

}

.welcome-content{

    color:#fff;

}

.welcome-content h1{

    font-size:55px;

    font-weight:700;

}

.welcome-content p{

    font-size:18px;

    margin:25px 0;

    opacity:.9;

}

.welcome-content ul{

    list-style:none;

    padding:0;

}

.welcome-content li{

    margin:18px 0;

    font-size:18px;

}

.welcome-content i{

    color:#8aff80;

    margin-right:10px;

}

.login-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border-radius:20px;

    padding:45px;

    border:1px solid rgba(255,255,255,.2);

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.logo{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#fff;

    color:#1d3557;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:bold;

    margin:auto;

}

.login-card h3{

    color:#fff;

    font-weight:700;

}

.login-card label{

    color:#fff;

    margin-bottom:8px;

}

.login-card .form-control{

    height:52px;

    border:none;

}

.login-card .input-group-text{

    background:#fff;

    border:none;

}

.login-card a{

    text-decoration:none;

    color:#fff;

}

.form-check-label{

    color:#fff;

}

.btn-login{

    background:#00d084;

    color:#fff;

    height:52px;

    border-radius:12px;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.btn-login:hover{

    background:#00b06d;

    color:#fff;

    transform:translateY(-2px);

}

@media(max-width:991px){

.login-card{

padding:35px;

}

}

@media(max-width:576px){

.login-card{

padding:25px;

}

.logo{

width:65px;
height:65px;
font-size:24px;

}

.login-card h3{

font-size:28px;

}

}

.login-page {
    min-height: 100vh;
    width: 100%;
    position: relative;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-image 1s ease-in-out;
}

/* Dark overlay for readability */
.login-page::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(10, 25, 47, 0.55);

    z-index: 0;
}

/* Keep content above overlay */
.login-page > * {
    position: relative;
    z-index: 1;
}