*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",sans-serif;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:url("../images/background.jpg") center center/cover no-repeat;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
}

.login-container{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:center;
    padding:20px;
}

.login-card{

    width:100%;
    max-width:420px;

    background:rgba(255,255,255,.12);
    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    color:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.logo{
    width:90px;
    margin-bottom:15px;
}

.login-card h2{
    font-size:34px;
    margin-bottom:8px;
}

.login-card p{
    color:#ddd;
    margin-bottom:30px;
}

.login-card input{

    width:100%;

    padding:14px;

    margin-bottom:18px;

    border:none;

    border-radius:10px;

    outline:none;

    font-size:16px;

}

.password-box{
    position:relative;
}

.password-box i{

    position:absolute;

    right:15px;

    top:15px;

    color:#555;

    cursor:pointer;

}

#loginBtn{

    width:100%;

    padding:15px;

    background:#d4af37;

    color:#000;

    border:none;

    border-radius:10px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    margin-top:10px;

}

.backBtn{

    display:inline-block;

    margin-top:20px;

    color:#fff;

    text-decoration:none;

}

.backBtn:hover{

    color:#d4af37;

}

@media(max-width:768px){

    .login-card{

        max-width:360px;

        padding:30px 20px;

    }

    .logo{

        width:70px;

    }

    .login-card h2{

        font-size:28px;

    }

}