/* ==========================================
   Google Font
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

/* ==========================================
   Body
========================================== */

body{

    width:100%;

    height:100vh;

    overflow:hidden;

    background:linear-gradient(135deg,#0d3b66,#1f6fb2);

}

/* ==========================================
   Wrapper
========================================== */

.login-wrapper{

    display:flex;

    width:100%;

    height:100vh;

}

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

.left-panel{

    width:50%;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    overflow:hidden;

    background:linear-gradient(135deg,#0b2d55,#124b87);

}

/* Decorative Circles */

.left-panel::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

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

    top:-130px;

    left:-130px;

}

.left-panel::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

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

    right:-170px;

    bottom:-170px;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.08);

}

.brand-content{

    width:70%;

    position:relative;

    z-index:5;

}

.logo-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#fff;

    color:#124b87;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    margin-bottom:30px;

}

.brand-content h1{

    font-size:42px;

    font-weight:700;

    margin-bottom:15px;

}

.brand-content p{

    font-size:18px;

    opacity:.9;

    margin-bottom:40px;

}

.feature-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

}

.feature-item i{

    color:#7CFC9B;

}

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

.right-panel{

    width:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f5f7fb;

}

/* ==========================================
   Login Card
========================================== */

.login-card{

    width:430px;

    background:#fff;

    border-radius:18px;

    padding:35px;

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

    animation:fadeUp .7s ease;

}

.mobile-logo{

    display:none;

}

.login-card h2{

    font-size:30px;

    font-weight:700;

    color:#124b87;

    margin-bottom:8px;

}

.login-card p{

    color:#777;

    margin-bottom:25px;

}

/* ==========================================
   Form
========================================== */

label{

    font-weight:600;

    margin-bottom:8px;

    color:#0d3b66;

    display:block;

}

.input-group{

    margin-bottom:18px;

}

.input-group-text{

    background:#fff;

    border-right:none;

}

.form-control{

    height:48px;

    border-left:none;

    box-shadow:none !important;

}

.form-control:focus{

    border-color:#ced4da;

}

.btn-outline-secondary{

    border-left:none;

}

/* ==========================================
   Remember
========================================== */

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    font-size:14px;

}

.login-options a{

    text-decoration:none;

    color:#124b87;

    font-weight:600;

}

/* ==========================================
   Login Button
========================================== */

.login-btn{

    height:48px;

    border:none;

    border-radius:10px;

    background:#124b87;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.login-btn:hover{

    background:#0b2d55;

    transform:translateY(-2px);

}

/* ==========================================
   Footer
========================================== */

.footer-text{

    margin-top:25px;

    text-align:center;

    color:#888;

    font-size:13px;

}

/* ==========================================
   Alert
========================================== */

.alert{

    border-radius:10px;

}

/* ==========================================
   Animation
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   Laptop
========================================== */

@media(max-width:1200px){

.brand-content{

    width:80%;

}

.brand-content h1{

    font-size:34px;

}

.login-card{

    width:390px;

}

}

/* ==========================================
   Tablet
========================================== */

@media(max-width:992px){

.left-panel{

    display:none;

}

.right-panel{

    width:100%;

}

.mobile-logo{

    display:block;

    font-size:55px;

    color:#124b87;

    margin-bottom:15px;

}

}

/* ==========================================
   Mobile
========================================== */

@media(max-width:576px){

.login-card{

    width:92%;

    padding:25px;

}

.login-options{

    flex-direction:column;

    gap:12px;

    align-items:flex-start;

}

}

/* =========================================
   COMPANY LOGO - LOGIN PAGE
========================================= */

.company-login-logo {
    width: 190px;
    height: 30px;

    margin: 0 auto 28px;

    /* Same as login right panel background */
    background: transparent;

    border-radius: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px;

    /* Remove card shadow and border */
    box-shadow: none;
    border: none;
}

.company-login-logo img {
    width: 100%;
    max-width: 170px;

    height: auto;

    object-fit: contain;

    display: block;
}