/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    overflow-x:hidden;

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    background:#eef3fb;

}


/* ==========================================================
   LAYOUT
========================================================== */

.container-fluid{

    width:100%;

    padding:0;

    margin:0;

}

.row{

    margin:0;

    min-height:100vh;

}

.col-lg-6{

    padding:0;

}


/* ==========================================================
   LEFT PANEL
========================================================== */

.left-panel{

    position:fixed;

    top:0;

    left:0;

    width:50%;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:flex-start;

    align-items:flex-end;

    background-image:url("../img/bg2.png");

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;

}


/* ==========================================================
   BACKGROUND ANIMATION
========================================================== */

.left-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:inherit;

    transform:scale(1.02);

    animation:zoomBackground 30s ease-in-out infinite alternate;

    z-index:0;

}


/* ==========================================================
   OVERLAY
========================================================== */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(7,49,132,.72),
        rgba(7,49,132,.42)
    );

    z-index:1;

}


/* ==========================================================
   WELCOME TEXT
========================================================== */

.welcome{

    position:relative;

    z-index:2;

    color:#fff;

    padding:70px;

    max-width:650px;

}

.welcome h1{

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:20px;

    text-shadow:0 10px 25px rgba(0,0,0,.35);

}

.welcome p{

    font-size:24px;

    line-height:1.7;

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

}

/* ==========================================================
   RIGHT PANEL
========================================================== */

.login-wrapper{

    margin-left:50%;

    width:50%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px 40px;

    background:linear-gradient(
        180deg,
        #f8fbff,
        #eef3fb
    );

}


/* ==========================================================
   LOGIN CARD
========================================================== */

.login-card{

    width:100%;

    max-width:460px;

    background:#ffffff;

    border-radius:24px;

    padding:45px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 20px 45px rgba(0,0,0,.08);

    animation:fadeIn .8s ease;

    transition:.35s;

}

.login-card:hover{

    transform:translateY(-5px);

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

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    width:95px;

    display:block;

    margin:0 auto 25px;

    transition:.3s;

}

.logo:hover{

    transform:scale(1.05);

}


/* ==========================================================
   TITLE
========================================================== */

.login-card h3{

    text-align:center;

    font-size:40px;

    font-weight:700;

    color:#0d47a1;

    margin-bottom:8px;

}

.login-card p{

    text-align:center;

    color:#6c757d;

    font-size:17px;

    margin-bottom:35px;

}


/* ==========================================================
   FOOTER LOGIN
========================================================== */

.login-footer{

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #ececec;

    text-align:center;

}

.login-footer small{

    display:block;

    color:#6c757d;

    line-height:1.9;

    font-size:13px;

}

.login-footer small:first-child{

    color:#0d47a1;

    font-weight:600;

}

/* ==========================================================
   FORM
========================================================== */

label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:#2c3e50;

}

.form-control{

    height:56px;

    border:1px solid #d9e2ef;

    border-radius:12px;

    padding:0 18px;

    font-size:15px;

    background:#f8fbff;

    transition:all .3s ease;

}

.form-control:hover{

    border-color:#9ec5fe;

    background:#ffffff;

}

.form-control:focus{

    background:#ffffff;

    border-color:#2563eb;

    box-shadow:0 0 0 .20rem rgba(37,99,235,.15);

}

.form-control::placeholder{

    color:#9aa7b5;

}


/* ==========================================================
   INPUT GROUP
========================================================== */

.input-group{

    border-radius:12px;

    overflow:hidden;

}

.input-group .form-control{

    border-right:none;

}

.input-group .btn{

    width:58px;

    border:1px solid #d9e2ef;

    border-left:none;

    background:#ffffff;

    color:#6c757d;

    transition:.3s;

}

.input-group .btn:hover{

    background:#f4f8ff;

    color:#0d6efd;

}


/* ==========================================================
   REMEMBER & LINK
========================================================== */

.form-check{

    display:flex;

    align-items:center;

    gap:8px;

}

.form-check-input{

    cursor:pointer;

}

.form-check-input:checked{

    background:#2563eb;

    border-color:#2563eb;

}

.form-check-label{

    cursor:pointer;

    color:#555;

    font-size:15px;

}

a{

    text-decoration:none;

    color:#2563eb;

    transition:.25s;

}

a:hover{

    color:#0d47a1;

    text-decoration:underline;

}


/* ==========================================================
   BUTTON LOGIN
========================================================== */

.btn-login{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #4f8dfc
    );

    color:#fff;

    font-size:17px;

    font-weight:700;

    letter-spacing:.5px;

    transition:.35s;

}

.btn-login:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(37,99,235,.35);

}

.btn-login:active{

    transform:scale(.98);

}


/* ==========================================================
   DIVIDER
========================================================== */

hr{

    margin:30px 0;

    border-color:#e8edf4;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomBackground{

    from{

        transform:scale(1.02);

    }

    to{

        transform:scale(1.08);

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991.98px){

    .left-panel{

        position:relative;

        width:100%;

        height:320px;

        min-height:320px;

    }

    .left-panel::before{

        animation:none;

    }

    .welcome{

        padding:35px;

        max-width:100%;

    }

    .welcome h1{

        font-size:42px;

    }

    .welcome p{

        font-size:18px;

    }

    .login-wrapper{

        width:100%;

        margin-left:0;

        min-height:calc(100vh - 320px);

        padding:40px 25px;

    }

    .login-card{

        max-width:500px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767.98px){

    body{

        background:
            linear-gradient(
                rgba(7,49,132,.55),
                rgba(7,49,132,.55)
            ),
            url("../img/bg2.png") center center / cover no-repeat fixed;

    }

    .left-panel{

        display:none;

    }

    .login-wrapper{

        width:100%;

        margin-left:0;

        min-height:100vh;

        padding:20px;

        background:transparent;

    }

    .login-card{

        max-width:100%;

        padding:30px 24px;

        border-radius:18px;

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

        backdrop-filter:blur(12px);

        -webkit-backdrop-filter:blur(12px);

    }

    .logo{

        width:75px;

    }

    .login-card h3{

        font-size:28px;

    }

    .login-card p{

        font-size:15px;

    }

    .form-control{

        height:52px;

    }

    .btn-login{

        height:54px;

        font-size:16px;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .login-wrapper{

        padding:15px;

    }

    .login-card{

        padding:25px 18px;

    }

    .welcome{

        padding:25px;

    }

    .logo{

        width:68px;

    }

}