/* ==============================
   CTRMS Login Page
============================== */

.login-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
    padding:20px;
    background:linear-gradient(
        135deg,
        #5B0D0F 0%,
        #7B1113 45%,
        #A31B1F 100%
    );
}

/* Floating Background Circles */

.login-page::before,
.login-page::after{

    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    animation:float 10s infinite ease-in-out;

}

.login-page::before{

    width:280px;
    height:280px;
    top:-70px;
    left:-70px;

}

.login-page::after{

    width:350px;
    height:350px;
    right:-120px;
    bottom:-120px;
    animation-delay:4s;

}

@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-25px);
    }

}

/* Glass Card */

.login-card{

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

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(15px);

    border-radius:20px;

    padding:45px;

    box-shadow:
        0 25px 50px rgba(0,0,0,.25);

    position:relative;
    z-index:10;

}

/* Gold Line */

.login-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#D4AF37;

    border-radius:20px 20px 0 0;

}

/* Logo */

.login-logo{

    width:110px;
    height:110px;
    object-fit:contain;

}

/* Headings */

.login-title{

    font-size:26px;
    font-weight:700;
    color:#7B1113;

}

.login-subtitle{

    color:#777;
    font-size:14px;

}

/* Inputs */

.input-group-text{

    background:#fff;
    border-right:none;

}

.form-control{

    border-left:none;
    height:52px;

}

.form-control:focus{

    border-color:#7B1113;

    box-shadow:none;

}

/* Login Button */

.btn-login{

    background:#7B1113;
    color:#fff;
    height:50px;
    font-weight:600;
    border:none;
    border-radius:10px;
    transition:.3s;

}

.btn-login:hover{

    background:#5B0D0F;
    color:#fff;
    transform:translateY(-2px);

}

/* Links */

.login-link{

    color:#7B1113;
    font-weight:500;

}

.login-link:hover{

    color:#D4AF37;

}

/* Mobile */

@media(max-width:576px){

.login-card{

    padding:30px 25px;

}

.login-logo{

    width:90px;
    height:90px;

}

.login-title{

    font-size:22px;

}

}