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

body{
    overflow:hidden;
}

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

.login-page{
    height:100vh;

    background:
    linear-gradient(
    135deg,
    #d42027,
    #000000
    );

    position:relative;

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

    overflow:hidden;
}

/* Animated Background */
.login-page::before{
    content:"";

    position:absolute;
    top:-50%;
    left:-50%;

    width:200%;
    height:200%;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.08) 1px,
    transparent 1px
    );

    background-size:40px 40px;

    animation:moveBg 35s linear infinite;
}

.overlay{
    position:absolute;
    width:100%;
    height:100%;

    background:
    url("https://images.unsplash.com/photo-1521791136064-7986c2920216")
    center center/cover;

    opacity:.08;
}

/* ==========================
   CONTAINER
========================== */

.login-container{

    width:1200px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    position:relative;
    z-index:2;
    height:650px;
}

/* ==========================
   LEFT SIDE
========================== */

.login-left{
    width:45%;
    color:white;
}

.login-left img{
    width:130px;
    margin-bottom:20px;
}

.login-left h1{
    font-size:52px;
    margin-bottom:15px;
}

.login-left h2{
    font-size:28px;
    line-height:1.5;
    margin-bottom:20px;
}

.login-left p{
    font-size:18px;
    line-height:1.8;
}

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

.login-card{

    width:430px;

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

    backdrop-filter:blur(18px);

    padding:40px;

    border-radius:25px;

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

    animation:
    rotateGrow 1s ease-out,
    floating 5s ease-in-out infinite 1s;

    transition:all .5s ease;
}

.login-card:hover{

    transform:
    perspective(1000px)
    rotateX(4deg)
    rotateY(-4deg)
    scale(1.02);

    box-shadow:
    0 35px 70px rgba(0,0,0,.30);
}

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

.login-header{
    text-align:center;
    margin-bottom:30px;
}

.login-header i{

    font-size:60px;
    color:#d42027;

    margin-bottom:15px;

    animation:pulseIcon 2s infinite;
}

.login-header h2{
    font-size:30px;
    margin-bottom:8px;
}

.login-header p{
    color:#777;
}

/* ==========================
   FORM GROUP
========================== */

.form-group{
    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;
}

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

.input-box{

    position:relative;

    display:flex;
    align-items:center;

    background:#fff;

    border:2px solid #e5e5e5;

    border-radius:12px;

    transition:.3s;
}

.input-box i{

    position:absolute;

    left:15px;

    color:#d42027;

    font-size:16px;
}

.input-box input{

    width:100%;

    border:none;

    background:transparent;

    padding:16px 15px 16px 45px;

    font-size:15px;

    outline:none;
}

.input-box:focus-within{

    border-color:#d42027;

    box-shadow:
    0 0 20px rgba(212,32,39,.20);

    transform:scale(1.02);
}

/* ==========================
   SELECT
========================== */

.form-group select{

    width:100%;

    height:35px;

    padding:0 15px;

    border:2px solid #e5e5e5;

    border-radius:12px;

    font-size:15px;

    background:white;

    outline:none;

    transition:.3s;
}

.form-group select:focus{

    border-color:#d42027;

    box-shadow:
    0 0 20px rgba(212,32,39,.20);

    transform:scale(1.02);
}

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

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:20px 0;

    font-size:14px;
}

.options a{

    text-decoration:none;

    color:#d42027;

    font-weight:600;
}

.options a:hover{
    text-decoration:underline;
}

/* ==========================
   RECAPTCHA
========================== */

.recaptcha{

    display:flex;

    justify-content:center;

    margin:20px 0;
}

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

.login-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:12px;

    background:
    linear-gradient(
    135deg,
    #d42027,
    #000000
    );

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.4s;
}

.login-btn:hover{

    transform:
    translateY(-4px)
    scale(1.03);

    box-shadow:
    0 15px 30px rgba(212,32,39,.35);
}

.login-btn i{
    margin-right:8px;
}

/* ==========================
   ERROR TEXT
========================== */

small{

    color:#d42027;

    font-size:12px;

    margin-top:5px;

    display:block;
}

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

@keyframes rotateGrow{

    0%{
        opacity:0;
        transform:
        scale(.5)
        rotate(-8deg);
    }

    60%{
        opacity:1;
        transform:
        scale(1.05)
        rotate(2deg);
    }

    100%{
        opacity:1;
        transform:
        scale(1)
        rotate(0);
    }
}

@keyframes floating{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

@keyframes pulseIcon{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }
}

@keyframes moveBg{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

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

@media(max-width:991px){

    .login-container{
        width:100%;
        padding:20px;
        justify-content:center;
    }

    .login-left{
        display:none;
    }

    .login-card{
        width:100%;
        max-width:450px;
        
    }
}