html,
body{

    height:100%;

}

body{

    overflow-x:hidden;

    font-family:
    Inter,
    "Segoe UI",
    sans-serif;


    background:

    radial-gradient(
        circle at top left,
        #dbeafe 0,
        #eef4ff 35%,
        transparent 36%
    ),


    radial-gradient(
        circle at bottom right,
        #c7d2fe 0,
        #eef4ff 28%,
        transparent 30%
    );

}

img{

    max-width:100%;

    height:auto;

}

.authentication-theme{

    min-height:100vh;

}

/* =========================
   LOGIN PANEL
========================= */


.login-panel{

    width:100%;

    max-width:430px;

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

    backdrop-filter:
    blur(12px);

    padding:35px;

    border-radius:32px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.10);

}

.login-wrapper{

    width:100%;

}

.login-card{

    background:white;

    border:none;

    border-radius:24px;

    padding:28px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.12);


    animation:
    fadeUp .45s ease;

}

@keyframes fadeUp{


    from{

        opacity:0;

        transform:
        translateY(35px);

    }


    to{

        opacity:1;

        transform:none;

    }


}

.login-logo{

    height:70px;

    width:auto;

}

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


.login-card .form-control,
.login-card .form-select{

    border-radius:12px;

    min-height:44px;

}

.login-card .form-control:focus,
.login-card .form-select:focus{

    border-color:#0d6efd;

    box-shadow:

    0 0 0 .2rem rgba(13,110,253,.15);

}

.login-card .btn{

    border-radius:12px;

}

.btn-primary{

    padding:13px;

    font-weight:600;

}

.btn-google{

    border:

    1px solid #ddd;

    padding:13px;

    font-weight:600;

    transition:.25s;

}

.btn-google:hover{

    transform:

    translateY(-2px);


    box-shadow:

    0 8px 20px rgba(0,0,0,.08);

}

/* =========================
   LEFT BANNER
========================= */


.banner-section{


    height:100%;


    background:


    linear-gradient(

        135deg,

        #0056d2 0%,

        #1976d2 45%,

        #42a5f5 100%

    );


    position:relative;


    overflow:hidden;

}

.banner-section::before{


    content:"";


    position:absolute;


    width:520px;


    height:520px;


    border-radius:50%;


    background:

    rgba(255,255,255,.08);


    top:-180px;


    left:-150px;


}

.banner-section::after{


    content:"";


    position:absolute;


    width:340px;


    height:340px;


    border-radius:50%;


    background:

    rgba(255,255,255,.05);


    bottom:-120px;


    right:-100px;


}

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


@media(max-width:992px){


    .banner-section{

        display:none;

    }



    .login-panel{

        padding:20px;

    }


}