/* ==========================================
   FANVORA LOGIN PAGE
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#07101d;
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;

}

/* Background Glow */

.background-glow{

    position:fixed;
    inset:0;
    z-index:-2;

    background:
    radial-gradient(circle at top left,
    rgba(255,106,0,.18),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(255,106,0,.12),
    transparent 35%),

    #07101d;

}

.background-glow::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

    linear-gradient(90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px);

    background-size:70px 70px;

    opacity:.18;

}

/* ==========================================
   LOGIN SECTION
========================================== */

.login-page{

    width:100%;
    padding:60px 20px;

}

.login-box{

    max-width:1180px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    background:#101a2b;

    border:1px solid #243650;

    border-radius:30px;

    overflow:hidden;

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

}

.login-left{

    padding:70px;

}

.logo img{

    width:170px;
    margin-bottom:35px;

}

.login-left h1{

    font-size:48px;
    font-weight:800;
    margin-bottom:18px;

}

.login-left p{

    color:#b8b8b8;
    line-height:1.8;
    margin-bottom:35px;

}
/* ==========================================
   FORM
========================================== */

.input-box{

    width:100%;
    height:60px;

    background:#162336;

    border:1px solid #2d4566;

    border-radius:16px;

    display:flex;

    align-items:center;

    padding:0 18px;

    margin-bottom:22px;

    transition:.35s;

}

.input-box:hover{

    border-color:#ff6b00;

}

.input-box:focus-within{

    border-color:#ff6b00;

    box-shadow:0 0 20px rgba(255,106,0,.25);

}

.input-box i{

    color:#ff6b00;

    font-size:18px;

}

.input-box input{

    flex:1;

    margin-left:15px;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:16px;

}

.input-box input::placeholder{

    color:#9ba6b8;

}

.togglePassword{

    cursor:pointer;

}

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

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:10px 0 30px;

    font-size:15px;

}

.options label{

    display:flex;

    align-items:center;

    gap:8px;

    color:#c5c5c5;

}

.options input{

    accent-color:#ff6b00;

}

.options a{

    color:#ff6b00;

    font-weight:600;

}

.options a:hover{

    text-decoration:underline;

}

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

.login-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:#ff6b00;

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 15px 35px rgba(255,106,0,.30);

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(255,106,0,.45);

}

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

.divider{

    margin:35px 0;

    text-align:center;

    position:relative;

}

.divider span{

    background:#101a2b;

    padding:0 20px;

    color:#a8b1bf;

    position:relative;

    z-index:2;

}

.divider::before{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

    background:#26374f;

}

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

.google-btn{

    width:100%;

    height:58px;

    border-radius:16px;

    border:1px solid #2b4567;

    background:#162336;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.google-btn i{

    color:#ff6b00;

    margin-right:10px;

}

.google-btn:hover{

    border-color:#ff6b00;

    background:#1b2a40;

}

.signup-link{

    margin-top:35px;

    text-align:center;

    color:#b9b9b9;

}

.signup-link a{

    color:#ff6b00;

    font-weight:700;

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

.login-right{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:60px;

    background:linear-gradient(
    135deg,
    #121f32,
    #1a2d46
    );

}

.welcome-card{

    text-align:center;

    max-width:420px;

}

.welcome-card img{

    width:100%;

    max-width:330px;

    margin:auto;

    margin-bottom:30px;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(255,106,0,.25);

    transition:.4s;

}

.welcome-card img:hover{

    transform:scale(1.05);

}

.welcome-card h2{

    font-size:36px;

    margin-bottom:18px;

    font-weight:700;

}

.welcome-card p{

    color:#bfc7d4;

    line-height:1.8;

    margin-bottom:35px;

}

.features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.feature{

    background:#162336;

    border:1px solid #2b4567;

    border-radius:16px;

    padding:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transition:.35s;

}

.feature i{

    color:#ff6b00;

    font-size:20px;

}

.feature span{

    font-weight:600;

}

.feature:hover{

    transform:translateY(-5px);

    border-color:#ff6b00;

    box-shadow:0 15px 30px rgba(255,106,0,.25);

}

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

@media(max-width:1000px){

.login-box{

grid-template-columns:1fr;

}

.login-right{

display:none;

}

.login-left{

padding:50px;

}

}

@media(max-width:768px){

.login-left{

padding:35px;

}

.login-left h1{

font-size:36px;

}

.logo img{

width:140px;

}

.options{

flex-direction:column;

gap:15px;

align-items:flex-start;

}

}

@media(max-width:480px){

.login-page{

padding:20px;

}

.login-left{

padding:25px;

}

.login-left h1{

font-size:30px;

}

.input-box{

height:55px;

}

.login-btn,

.google-btn{

height:55px;

font-size:15px;

}

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(35px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.login-box{

animation:fadeUp .8s ease;

}

.login-btn,
.google-btn,
.feature,
.input-box{

transition:all .35s ease;

}

/* ==========================================
CUSTOM SCROLLBAR
========================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#07101d;

}

::-webkit-scrollbar-thumb{

background:#ff6b00;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#ff8c32;

}

::selection{

background:#ff6b00;

color:#fff;

}