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



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

.auth-body{

    background:#eef2f7;

    min-height:100vh;

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

    padding:30px;
}



/* =========================================
   WRAPPER
========================================= */

.auth-wrapper{

    width:100%;

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



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

.login-container{

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

    background:#ffffff;

    padding:28px 32px;

    border-radius:18px;

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



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

.logo-image{

    text-align:center;

    margin-bottom:10px;
}

.logo-image img{

    width:240px;

    max-width:100%;
}



/* =========================================
   COMPANY DETAILS
========================================= */

.logo{

    text-align:center;

    margin-bottom:22px;
}

.logo h1{

    font-size:28px;

    color:#2e7d32;

    margin-top:5px;

    font-weight:700;
}

.logo p{

    margin-top:6px;

    color:#666;

    font-size:15px;
}



/* =========================================
   ALERT MESSAGE
========================================= */

.alert{

    background:#ffebee;

    color:#c62828;

    padding:12px;

    border-radius:8px;

    margin-bottom:18px;

    text-align:center;

    font-size:14px;
}



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

.form-group{

    margin-bottom:18px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:#222;
}



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

.form-group input{

    width:100%;

    padding:15px;

    border:1px solid #cfd8dc;

    border-radius:12px;

    background:#f1f5fb;

    font-size:16px;

    outline:none;

    transition:0.3s;
}

.form-group input:focus{

    border-color:#7cb342;

    background:#ffffff;
}



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

.login-btn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#7cb342;

    color:#ffffff;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.login-btn:hover{

    background:#689f38;
}



/* =========================================
   EXTRA LINKS
========================================= */

.extra-links{

    text-align:center;

    margin-top:18px;
}

.extra-links a{

    text-decoration:none;

    color:#7cb342;

    font-size:15px;

    font-weight:500;
}

.extra-links a:hover{

    text-decoration:underline;
}



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

.footer-text{

    text-align:center;

    margin-top:24px;

    color:#777;

    font-size:14px;
}



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

@media(max-width:576px){

    .login-container{

        padding:24px;
    }

    .logo-image img{

        width:190px;
    }

    .logo h1{

        font-size:24px;
    }

}