/* =====================================================
   RSIFS Document Management System
   Professional Login Theme
   Version 1.0
===================================================== */

:root{

--primary:#0A4F93;
--primary-dark:#06396C;
--secondary:#FFC107;
--white:#ffffff;
--light:#f5f7fb;
--gray:#6c757d;
--border:#dce3ec;
--success:#198754;
--danger:#dc3545;

--shadow:0 20px 60px rgba(0,0,0,.15);

--radius:18px;

--transition:.35s;

--glass:rgba(255,255,255,.92);

}

/* Reset */

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

html,
body{

height:100%;
font-family:
"Segoe UI",
Roboto,
Arial,
sans-serif;

background:#eef3f8;
overflow-x:hidden;

}

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

.left-panel{

position:relative;

display:flex;

flex-direction:column;

justify-content:space-between;

padding:70px;

background:

linear-gradient(
135deg,
rgba(5,58,109,.92),
rgba(10,79,147,.85)
),

url("../../assets/images/road-bg.webp");

background-size:cover;

background-position:center;

color:#fff;

}

.overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:

linear-gradient(
135deg,
rgba(0,0,0,.25),
rgba(0,0,0,.45)
);

}

.content{

position:relative;
z-index:2;

}

.brand{

display:flex;

align-items:center;

margin-bottom:60px;

}

.logo{

width:250px;

height:auto;

object-fit:contain;

margin-right:20px;

}

.brand h4{

font-size:18px;

font-weight:700;

margin-bottom:8px;

}

.brand h5{

font-size:20px;

font-weight:600;

opacity:.95;

}

/*************************************************
HEADLINE
*************************************************/

.headline h1{

font-size:52px;

font-weight:700;

line-height:1.2;

margin-bottom:25px;

}

.headline .blue{

color:var(--secondary);

}

.lead{

font-size:20px;

max-width:620px;

opacity:.95;

margin-bottom:55px;

}

/*************************************************
FEATURES
*************************************************/

.features{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.feature{

display:flex;

align-items:center;

padding:18px;

border-radius:15px;

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

backdrop-filter:blur(8px);

transition:var(--transition);

}

.feature:hover{

transform:translateY(-4px);

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

}

.feature i{

font-size:34px;

width:65px;

color:var(--secondary);

}

.feature h5{

margin-bottom:5px;

font-size:18px;

}

.feature p{

margin:0;

opacity:.85;

}

/*************************************************
BOTTOM ICONS
*************************************************/

.bottom-icons{

position:relative;

z-index:2;

display:flex;

justify-content:space-between;

padding-top:40px;

}

.bottom-icons div{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

opacity:.9;

}

.bottom-icons i{

font-size:22px;

color:var(--secondary);

}

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

.login-panel{

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
180deg,
#f7f9fc,
#edf2f8
);

padding:30px;

}

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

.login-card{

width:100%;

max-width:470px;

background:var(--glass);

backdrop-filter:blur(14px);

border-radius:var(--radius);

padding:45px;

box-shadow:var(--shadow);

animation:fadeUp .7s ease;

}

.icon{

width:75px;

height:75px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:32px;

margin-bottom:25px;

}

.login-card h2{

text-align:center;

font-weight:700;

margin-bottom:8px;

color:var(--primary-dark);

}

.login-card p{

text-align:center;

color:#666;

margin-bottom:35px;

}

/*************************************************
FORM
*************************************************/

label{

font-weight:600;

margin-bottom:8px;

display:block;

}

.form-control{

height:52px;

border-radius:10px;

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

}

.form-control:focus{

border-color:var(--primary);

box-shadow:0 0 0 .15rem rgba(10,79,147,.18);

}

.input-group-text{

background:#fff;

border-radius:10px 0 0 10px;

}

/*************************************************
BUTTON
*************************************************/

.btn-login{

height:56px;

border-radius:12px;

font-size:18px;

font-weight:600;

background:var(--primary);

border:none;

transition:var(--transition);

}

.btn-login:hover{

background:var(--primary-dark);

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,.18);

}

/*************************************************
LINKS
*************************************************/

.forgot{

text-decoration:none;

font-weight:600;

color:var(--primary);

}

.forgot:hover{

text-decoration:underline;

}

/*************************************************
SECURITY BOX
*************************************************/

.security{

margin-top:35px;

display:flex;

gap:15px;

padding:18px;

border-radius:12px;

background:#eef7ff;

}

.security i{

font-size:28px;

color:var(--success);

}

/*************************************************
FOOTER
*************************************************/

.footer{

margin-top:30px;

text-align:center;

font-size:13px;

color:#777;

}

/*************************************************
ANIMATION
*************************************************/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:none;

}

}

/*************************************************
RESPONSIVE
*************************************************/

@media(max-width:992px){

.left-panel{

display:none;

}

.login-panel{

width:100%;

}

.login-card{

margin:25px;

padding:35px;

}

}

@media(max-width:576px){

.login-card{

padding:28px;

}

.icon{

width:60px;
height:60px;
font-size:24px;

}

.login-card h2{

font-size:28px;

}

.btn-login{

height:52px;

}

}