/* ==========================================================
   GREENCARD CLIENT LOGIN
========================================================== */

:root{
    --primary:#0D8B72;
    --primary-dark:#08715d;
    --background:#edf3f8;
    --white:#ffffff;
    --text:#1e293b;
    --border:#dfe7ef;
}

.gc-login{

    min-height:100vh;
    padding:50px 0;
    font-family:'Inter',sans-serif;

}

.gc-login *{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

.gc-login .container-fluid{

    max-width:1450px;
    margin:auto;
    padding:20px;

}

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

.gc-login .login-card{

    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.gc-login .row{

    min-height:900px;

}

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

.gc-login .left-side{

    background:#f7fbfd;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.gc-login .left-image{

    width:100%;
    max-width:650px;
    height:auto;

}

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

.gc-login .right-side{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px;

}

.gc-login .form-box{

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

}

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

.gc-login .login-logo{

    width:220px;
    max-width:220px;
    display:block;
    margin:0 auto 35px;

}

/* ==========================================================
   TITLES
========================================================== */

.gc-login h2{

    text-align:center;

    font-size:42px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:10px;

}

.gc-login .subtitle{

    text-align:center;

    color:#64748b;

    margin-bottom:40px;

    font-size:16px;

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

.gc-login .form-label{

    font-weight:600;

    margin-bottom:10px;

    color:#334155;

}

.gc-login .input-group{

    margin-bottom:25px;

}

.gc-login .input-group-text{

    background:#fff;

    border:1px solid var(--border);

    border-right:none;

    border-radius:14px 0 0 14px;

    padding:0 18px;

}

.gc-login .input-group-text i{

    color:var(--primary);

    font-size:18px;

}

.gc-login .form-control{

    height:60px;

    border:1px solid var(--border);

    border-left:none;

    border-radius:0 14px 14px 0;

    font-size:17px;

    background:#fff;

    color:#1f2937;

}

.gc-login .form-control::placeholder{

    color:#94a3b8;

}

.gc-login .form-control:focus{

    border-color:var(--primary);

    box-shadow:none;

    outline:none;

}

.gc-login textarea.form-control{

    height:auto;

}

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

.gc-login .btn-login{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:linear-gradient(90deg,#0D8B72,#16a085);

    color:#fff;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.gc-login .btn-login:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(13,139,114,.25);

}

.gc-login .btn-login:active{

    transform:translateY(0);

}

.gc-login .btn-login:focus{

    outline:none;

}

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

.gc-login .secure-login{

    margin-top:35px;

    text-align:center;

    color:#64748b;

    font-size:15px;

}

.gc-login .secure-login i{

    color:var(--primary);

    margin-right:5px;

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

@media (max-width:992px){

    .gc-login .left-side{

        display:none;

    }

    .gc-login .right-side{

        padding:50px 35px;

    }

    .gc-login .login-logo{

        width:230px;
        max-width:230px;

    }

    .gc-login h2{

        font-size:34px;

    }

    .gc-login .subtitle{

        font-size:15px;

    }

}

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

@media (max-width:576px){

    .gc-login{

        padding:20px 0;

    }

    .gc-login .container-fluid{

        padding:15px;

    }

    .gc-login .login-card{

        border-radius:18px;

    }

    .gc-login .row{

        min-height:auto;

    }

    .gc-login .right-side{

        padding:35px 22px;

    }

    .gc-login .login-logo{

        width:240px;
        max-width:80%;
        height:auto;
        display:block;
        margin:0 auto 30px;

    }

    .gc-login h2{

        font-size:28px;

    }

    .gc-login .subtitle{

        font-size:14px;
        margin-bottom:30px;

    }

    .gc-login .form-control{

        height:55px;
        font-size:16px;

    }

    .gc-login .input-group-text{

        padding:0 15px;

    }

    .gc-login .btn-login{

        height:55px;
        font-size:17px;

    }

}

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

@media (max-width:400px){

    .gc-login .login-logo{

        width:200px;
        max-width:200px;

    }

    .gc-login h2{

        font-size:24px;

    }

    .gc-login .subtitle{

        font-size:13px;

    }

}

/* ==========================================================
   FIX BOOTSTRAP CONFLICT
========================================================== */

.gc-login img{

    max-width:100%;
    height:auto;

}

.gc-login .d-grid{

    display:grid;

}

.gc-login .mb-4{

    margin-bottom:1.5rem;

}

.gc-login input{

    outline:none;

}

.gc-login button{

    font-family:inherit;

}