/* ===========================
   GOOGLE FONT
=========================== */

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

body{

    background:#f4f6fb;

    overflow:hidden;

}

/* ===========================
    MAIN LAYOUT
=========================== */

.login-container{

    width:100%;

    height:100vh;

    display:flex;

}

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

.left-panel{

    width:55%;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:url("https://images.unsplash.com/photo-1487754180451-c456f719a1fc?q=80&w=1800&auto=format&fit=crop") center center;

    background-size:cover;

}

/* Dark Overlay */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.85)

    );

}

/* Decorative Glow */

.left-panel::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

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

    filter:blur(90px);

    right:-120px;

    top:-80px;

}

/* ===========================
    HERO CONTENT
=========================== */

.hero-content{

    position:relative;

    z-index:2;

    width:80%;

    color:#fff;

}

.logo{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:60px;

}

.logo img{

    width:75px;

    height:75px;

    border-radius:18px;

    background:#fff;

    padding:10px;

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

    object-fit:contain;

}

.logo-text h3{

    color:#fff;

    font-size:34px;

    font-weight:700;

    margin:0;

    line-height:1.2;

}

.logo-text p{

    margin:2px 0 0;

    color:rgba(255,255,255,.85);

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.hero-content h1{

    font-size:58px;

    line-height:72px;

    font-weight:700;

    margin-bottom:25px;

}

.hero-content p{

    font-size:18px;

    color:#ddd;

    line-height:34px;

    max-width:550px;

    margin-bottom:45px;

}

/* ===========================
    FEATURES
=========================== */

.features{

    display:grid;

    gap:18px;

}

.features div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:17px;

}

.features i{

    color:#ff4d4d;

}

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

.right-panel{

    width:45%;

    background:#f7f8fc;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

/* Background Shapes */

.right-panel::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    top:-120px;

    right:-80px;

}

.right-panel::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    bottom:-80px;

    left:-70px;

}

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

.login-card{

    width:430px;

    background:#fff;

    border-radius:24px;

    padding:45px;

    position:relative;

    z-index:2;

    box-shadow:

    0 25px 60px rgba(0,0,0,.08);

}

.login-header{

    margin-bottom:35px;

}

.login-header h2{

    font-size:34px;

    font-weight:700;

    color:#222;

}

.login-header p{

    margin-top:8px;

    color:#888;

}

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

label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:#555;

}

.input-box{

    height:58px;

    border:1px solid #e2e2e2;

    border-radius:14px;

    display:flex;

    align-items:center;

    padding:0 18px;

    transition:.3s;

    background:#fff;

}

.input-box:hover{

    border-color:#dc3545;

}

.input-box:focus-within{

    border-color:#dc3545;

    box-shadow:0 0 0 4px rgba(220,53,69,.12);

}

.input-box i{

    color:#888;

}

.input-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    margin-left:15px;

    font-size:15px;

}

.input-box span{

    cursor:pointer;

}

/* ===========================
      OPTIONS
=========================== */

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

    font-size:14px;

}

.login-options a{

    text-decoration:none;

    color:#dc3545;

    font-weight:600;

}

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

.login-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#ff4b4b,#b80000);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.login-btn i{

    margin-right:10px;

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 30px rgba(220,53,69,.35);

}

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

.footer{

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid #eee;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;

    color:#888;

}

.footer div{

    display:flex;

    gap:15px;

}

.footer a{

    color:#666;

    text-decoration:none;

}

.footer a:hover{

    color:#dc3545;

}

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

@media(max-width:992px){

.left-panel{

    display:none;

}

.right-panel{

    width:100%;

}

.login-card{

    width:90%;

    max-width:430px;

}

body{

    overflow:auto;

}

}

@media(max-width:576px){

.login-card{

    padding:30px 25px;

}

.login-header h2{

    font-size:28px;

}

.footer{

    flex-direction:column;

    gap:12px;

    text-align:center;

}

}