/* ===================================
   GLOBAL
=================================== */

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

body{
    font-family:'Segoe UI',sans-serif;
    min-height:100vh;
    background:
        linear-gradient(rgba(4,14,34,.88),rgba(4,14,34,.94)),
        url("https://images.unsplash.com/photo-1526778548025-fa2f459cd5ce?auto=format&fit=crop&w=1800&q=80");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    color:white;
}

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

.auth-wrapper{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

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

.auth-card{
    width:370px;
    max-width:90%;

    background:rgba(18,29,49,.83);

    backdrop-filter:blur(18px);

    border:1px solid rgba(60,170,255,.25);

    border-radius:18px;

    padding:14px 20px;

    box-shadow:
        0 0 30px rgba(0,140,255,.18),
        0 15px 45px rgba(0,0,0,.45);

    transition:.35s;
}

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

.logo-icon{

    font-size:52px;

    text-align:center;

    margin-bottom:0px;

}

.logo-title{

    text-align:center;

    font-size:28px;

    font-weight:700;

    letter-spacing:1px;

}

.logo-title span{

    color:#32b6ff;

}

.logo-sub{

    text-align:center;

    color:#b7c6d8;

    font-size:14px;

    margin-top:10px;

    margin-bottom:20px;

    line-height:1.6;

}

/* ===================================
   DIVIDER
=================================== */

.divider{

    width:70px;

    height:3px;

    background:#1ca3ff;

    border-radius:20px;

    margin:10px auto 15px;

}

/* ===================================
   TITLE
=================================== */

h3{

    font-size:23px;

    font-weight:700;

    margin-bottom:9px;

}

/* ===================================
   LABEL
=================================== */

.form-label{

    color:#d8e4f3;

    font-size:14px;

    font-weight:600;

}

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

.form-control{

    height:46px;

    background:#17263b;

    border:1px solid #324b6b;

    color:white;

    border-radius:10px;

}

.form-control::placeholder{

    color:#8ea4bf;

}

.form-control:focus{

    background:#17263b;

    color:white;

    border-color:#2ba8ff;

    box-shadow:0 0 12px rgba(0,153,255,.30);

}

/* ===================================
   CHECKBOX
=================================== */

.form-check-label{

    color:#c6d6e9;

    font-size:14px;

}

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

.btn-login{

    width:100%;

    height:46px;

    border:none;

    border-radius:10px;

    background:linear-gradient(90deg,#006dff,#26b6ff);

    color:white;

    font-size:16px;

    font-weight:700;

    transition:.35s;

}

.btn-login:hover{

    transform:translateY(-2px);

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

}

/* ===================================
   LINK
=================================== */

.auth-link{

    color:#2fb5ff;

    text-decoration:none;

    transition:.3s;

}

.auth-link:hover{

    color:white;

}

/* ===================================
   REGISTER BOX
=================================== */

.bottom-box{

    margin-top:10px;

    padding:18px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

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

}

.bottom-box p{

    margin-bottom:8px;

}

/* ===================================
   FEATURE
=================================== */

.feature-list{

    display:flex;

    justify-content:space-between;

    margin-top:28px;

}

.feature-item{

    width:31%;

    text-align:center;

}

.feature-item i{

    font-size:24px;

    color:#2ab0ff;

    margin-bottom:8px;

}

.feature-item h6{

    font-size:15px;

    margin-bottom:4px;

}

.feature-item p{

    color:#9db2cb;

    font-size:12px;

}

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

.footer-text{

    margin-top:8px;

    text-align:center;

    color:#8ea5c0;

    font-size:12px;

}

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

@media(max-width:768px){

    .auth-card{

        width:100%;

        padding:28px;

    }

    .logo-title{

        font-size:24px;

    }

    .feature-list{

        flex-direction:column;

        gap:18px;

    }

    .feature-item{

        width:100%;

    }

}