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

/* =========================
   BODY
========================= */

body{

    background:#eef2f7;
    overflow:hidden;

}

/* =========================
   CONTAINER
========================= */

.container{

    width:100%;
    height:100vh;

    display:flex;

}

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

.left{

    width:55%;

    background:url('bg.jpg');

    background-size:cover;
    background-position:center;

    position:relative;

}

.overlay{

    width:100%;
    height:100%;

    background:
    linear-gradient(
    rgba(15,23,42,0.18),
    rgba(15,23,42,0.28)
    );

}

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

.right{

    width:45%;

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

    background:#f8fafc;

    padding:25px;

}

/* =========================
   LOGIN BOX
========================= */

.login-box{

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

    background:white;

    padding:20px;

    border-radius:24px;

    border:2px solid #d4a24c;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.10);

}

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

.logo{

    margin-bottom:14px;

    text-align:center;

}

.logo h1{

    font-size:24px;

    color:#14532d;

    margin-bottom:5px;

    font-weight:800;

    line-height:1.2;

}

.logo h2{

    font-size:13px;

    color:#334155;

    line-height:1.5;

    font-weight:700;

}

.logo p{

    margin-top:10px;

    color:#64748b;

    font-size:12px;

    line-height:1.6;

}

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

.input-group{

    margin-bottom:10px;

}

.input-group label{

    display:block;

    margin-bottom:4px;

    color:#334155;

    font-size:13px;

    font-weight:600;

}

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

.input-group input,
.input-group select{

    width:100%;

    height:38px;

    padding:0 14px;

    border:1px solid #d1d5db;

    border-radius:10px;

    background:#ffffff;

    font-size:13px;

    outline:none;

    transition:0.3s;

}

.input-group input:focus,
.input-group select:focus{

    border-color:#166534;

    box-shadow:
    0 0 0 3px rgba(22,101,52,0.10);

}

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

.btn-login{

    width:100%;

    height:40px;

    margin-top:6px;

    border:none;

    border-radius:10px;

    background:
    linear-gradient(
    135deg,
    #166534,
    #14532d
    );

    color:white;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;

    box-shadow:
    0 8px 18px rgba(22,101,52,0.20);

}

.btn-login:hover{

    opacity:0.95;

}

/* =========================
   INFO
========================= */

.info{

    margin-top:12px;

    color:#64748b;

    font-size:11px;

    line-height:1.7;

    text-align:center;

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

    .left{
        display:none;
    }

    .right{
        width:100%;
    }

.login-box{

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

    max-height:92vh;
    overflow:auto;

    background:white;

    padding:22px;

    border-radius:24px;

    border:2px solid #d4a24c;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.10);

}

}