/*====================================================
        DRILLPRO LOGIN PAGE
        Dark Industrial SaaS Theme
=====================================================*/


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

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


body{

    min-height:100vh;
    background:#070707;
    color:#F5F5F5;
    overflow:hidden;

}




/*====================================================
        MAIN PAGE
=====================================================*/


.login-page{

    width:100%;
    height:100vh;

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

    padding:50px;

    position:relative;
    overflow:hidden;

}




/*====================================================
        BACKGROUND ANIMATION
=====================================================*/


.background-shapes{

    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    overflow:hidden;

    z-index:0;

}




.shape{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:0.35;

    animation:floatShape 12s infinite alternate;

}




.shape-one{

    width:400px;
    height:400px;

    background:#C1121F;

    top:-150px;
    left:-120px;

}




.shape-two{

    width:350px;
    height:350px;

    background:#E63946;

    right:-120px;
    bottom:-100px;

    animation-delay:3s;

}




.shape-three{

    width:250px;
    height:250px;

    background:#550000;

    top:45%;
    left:50%;

    animation-delay:6s;

}




@keyframes floatShape{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(50px);

    }

}







/*====================================================
        BRAND SECTION
=====================================================*/


.brand-section{


    width:45%;

    padding:50px;

    position:relative;

    z-index:1;

    animation:slideLeft 1s ease;


}




.logo-box img{


    width:95px;
    height:95px;

    object-fit:contain;


}




.brand-section h1{


    margin-top:25px;

    font-size:60px;

    font-weight:800;

    letter-spacing:-2px;

    color:#F5F5F5;


}




.brand-section h2{


    margin-top:15px;

    font-size:22px;

    color:#C1121F;

    font-weight:600;


}




.brand-section p{


    margin-top:20px;

    max-width:500px;

    line-height:1.8;

    color:#9A9A9A;

    font-size:16px;


}







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


.feature-list{


    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:18px;


}




.feature-item{


    display:flex;

    align-items:center;

    gap:15px;

    color:#F5F5F5;

    font-size:15px;

}




.feature-item span{


    width:30px;

    height:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#C1121F;

    color:white;

}







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


.login-section{


    width:55%;

    display:flex;

    justify-content:center;

    position:relative;

    z-index:1;


}







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


.login-card{


    width:430px;


    padding:45px;


    background:#181818;


    border-radius:24px;


    border:

    1px solid rgba(255,255,255,0.08);



    box-shadow:

    0 30px 80px rgba(0,0,0,0.8);



    animation:slideUp 1s ease;


}







/*====================================================
        LOGIN HEADER
=====================================================*/


.login-header{

    text-align:center;

    margin-bottom:35px;

}



.login-header h3{


    font-size:32px;

    color:#F5F5F5;

    font-weight:700;


}




.login-header p{


    margin-top:10px;

    color:#9A9A9A;

}







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


.input-group{


    margin-bottom:25px;


}



.input-group label{


    display:block;

    margin-bottom:8px;

    color:#F5F5F5;

    font-size:14px;

    font-weight:600;


}





.input-group input{


    width:100%;

    height:52px;


    padding:0 18px;


    background:#111111;


    border:

    1px solid rgba(255,255,255,0.08);



    border-radius:12px;


    outline:none;


    color:#F5F5F5;


    font-size:15px;


    transition:0.3s;


}





.input-group input::placeholder{


    color:#777;

}





.input-group input:focus{


    border-color:#C1121F;


    box-shadow:

    0 0 0 4px rgba(193,18,31,0.20);


}







/*====================================================
        PASSWORD
=====================================================*/


.password-box{


    position:relative;


}



.password-toggle{


    position:absolute;


    right:15px;

    top:50%;

    transform:translateY(-50%);


    background:none;

    border:none;

    color:#9A9A9A;

    cursor:pointer;

    font-size:18px;


}







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


.login-options{


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    font-size:14px;


}



.login-options label{

    color:#9A9A9A;

}




.login-options a{


    color:#E63946;

    text-decoration:none;


}



.login-options a:hover{

    color:#F5F5F5;

}







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


.login-button{


    width:100%;

    height:55px;


    background:#C1121F;


    color:white;


    border:none;


    border-radius:14px;


    font-size:16px;


    font-weight:700;


    cursor:pointer;


    transition:0.3s;


}




.login-button:hover{


    background:#E63946;


    transform:translateY(-3px);


    box-shadow:

    0 15px 30px rgba(193,18,31,0.35);


}







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


.login-footer{


    margin-top:35px;

    text-align:center;


    color:#777;


    font-size:13px;


}



.login-footer span{


    display:block;

    margin-top:6px;


}







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


@keyframes slideLeft{


    from{

        opacity:0;

        transform:translateX(-50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}




@keyframes slideUp{


    from{

        opacity:0;

        transform:translateY(50px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}







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


@media(max-width:900px){


    body{

        overflow:auto;

    }


    .login-page{


        flex-direction:column;

        height:auto;

        min-height:100vh;

        padding:25px;


    }



    .brand-section{


        width:100%;

        text-align:center;

        padding:20px;


    }



    .brand-section h1{


        font-size:45px;

    }



    .feature-list{

        display:none;

    }



    .login-section{


        width:100%;

    }



    .login-card{


        width:100%;

        max-width:420px;

        padding:35px 25px;


    }


}
/*====================================================
        REGISTER SECTION
=====================================================*/


.register-section{

    margin-top:30px;

    text-align:center;

}



.divider{


    display:flex;

    align-items:center;

    gap:15px;

    color:#777;

    font-size:13px;

    margin-bottom:20px;


}



.divider span{


    height:1px;

    flex:1;

    background:rgba(255,255,255,0.08);


}



.register-section p{


    color:#9A9A9A;

    font-size:14px;

    margin-bottom:15px;


}



.register-button{


    display:block;


    width:100%;


    height:50px;


    line-height:50px;


    border-radius:14px;


    border:1px solid #C1121F;


    color:#F5F5F5;


    text-decoration:none;


    font-weight:600;


    transition:0.3s;


}



.register-button:hover{


    background:#C1121F;


    color:white;


    transform:translateY(-3px);


}

/*==================================================
    FORGOT PASSWORD MODAL
==================================================*/

.forgot-modal{

    position:fixed;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.35s;

    z-index:9999;

}


/*==================================================
    SHOW MODAL
==================================================*/

.forgot-modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


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

.forgot-card{

    position:relative;

    width:100%;

    max-width:470px;

    background:#181818;

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

    border-radius:22px;

    padding:35px;

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

    transform:translateY(30px) scale(.95);

    transition:.35s;

}


.forgot-modal.active .forgot-card{

    transform:translateY(0) scale(1);

}


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

.close-forgot{

    position:absolute;

    top:18px;

    right:18px;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#2b2b2b;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:.3s;

}


.close-forgot:hover{

    background:#ff5c5c;

    transform:rotate(90deg);

}


/*==================================================
    HEADER
==================================================*/

.forgot-header{

    text-align:center;

    margin-bottom:30px;

}


.forgot-header h2{

    color:#fff;

    font-size:28px;

    font-weight:700;

    margin-bottom:10px;

}


.forgot-header p{

    color:#bdbdbd;

    font-size:15px;

    line-height:1.6;

}


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

.forgot-card .input-group{

    margin-bottom:25px;

}


.forgot-card label{

    display:block;

    color:#ffffff;

    font-weight:600;

    margin-bottom:10px;

}


.forgot-card input{

    width:100%;

    padding:15px 18px;

    border-radius:12px;

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

    background:#252525;

    color:#ffffff;

    font-size:15px;

    outline:none;

    transition:.3s;

    box-sizing:border-box;

}


.forgot-card input:focus{

    border-color:#3b82f6;

    box-shadow:0 0 0 4px rgba(59,130,246,.18);

}


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

.forgot-button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}


.forgot-button:hover{

    transform:translateY(-2px);

    background:#1d4ed8;

}


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

@media(max-width:600px){

    .forgot-card{

        padding:25px;

        border-radius:18px;

    }

    .forgot-header h2{

        font-size:24px;

    }

    .forgot-header p{

        font-size:14px;

    }

}