/* ===========================

   THEME COLOR

=========================== */



:root {



    --primary: #F44336 !important;

    ;

    --primary-hover: #F44336 !important;

    ;

    --accent: #F44336;



    --background-overlay: #ffca07;



    --glass: rgb(255, 255, 255);

    --glass-border: rgb(255, 255, 255);



    --text: #000000;

    --text-secondary: #000000;



    --input-border: rgb(0, 0, 0);



}



/* ===========================

   GLOBAL

=========================== */



* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



    font-family: 'Poppins', sans-serif;



}



body {



    min-height: 100vh;



    display: flex;



    justify-content: center;



    align-items: center;



    background: url("../img/bg-login.jpg");



    background-size: cover;



    background-position: center;



    overflow-x: hidden;



    overflow-y: auto;



    position: relative;



    padding: 20px;



    background-attachment:fixed;

}



/* ===========================

   OVERLAY

=========================== */



.overlay {



    position: absolute;



    width: 100%;



    height: 100%;



    background: var(--background-overlay);



    backdrop-filter: blur(7px);



}



/* ===========================

   LOGIN CARD

=========================== */



.login-box {



    position: relative;



    width: 100%;



    max-width: 430px;



    padding: 45px;



    background: var(--glass);



    border: 1px solid var(--glass-border);



    border-radius: 20px;



    backdrop-filter: blur(20px);



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



    z-index: 10;



    animation: fade .8s ease,

        floating 6s ease-in-out infinite;



    .login-box {



        transition: .35s;



    }

    .login-box:hover{



transform:translateY(-5px);



}



}



/* ===========================

   LOGO

=========================== */



.logo {



    display: flex;



    justify-content: center;



    margin-bottom: 20px;



}



.logo img {



    width: 90px;



    transition: .4s;



}



.logo img:hover {



    transform: scale(1.08);



}



/* ===========================

   TITLE

=========================== */



.login-box h2 {



    color: var(--text);



    font-size: 32px;



    text-align: center;



    font-weight: 600;



    margin-bottom: 8px;



    letter-spacing: 1px;



}



.login-box p {



    color: var(--text-secondary);



    text-align: center;



    margin-bottom: 35px;



    font-size: 14px;



}



/* ===========================

   INPUT

=========================== */



.input-group {



    position: relative;



    margin-bottom: 28px;



}



.input-group input {



    width: 100%;



    padding: 15px;



    background: transparent;



    border: 1px solid var(--input-border);



    border-radius: 12px;



    color: var(--text);



    font-size: 15px;



    outline: none;



    transition: .4s;



}



.input-group input:focus {



    border: 1px solid;



    box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);



}



.input-group label {



    position: absolute;



    left: 15px;



    top: 15px;



    color: #000000;



    pointer-events: none;



    transition: .3s;



    background: transparent;



}



.input-group input:focus~label,



.input-group input:valid~label {



    top: -10px;



    left: 12px;



    background: #000000;



    padding: 0 8px;



    font-size: 12px;



    color: #ffffff;



}



/* ===========================

   BUTTON

=========================== */



button {



    width: 100%;



    padding: 15px;



    border: none;



    border-radius: 12px;



    background: var(--primary);



    color: white;



    font-size: 16px;



    font-weight: 600;



    cursor: pointer;



    transition: .35s;



}



button:hover {



    background: #F44336 !important;



    transform: translateY(-3px);



    box-shadow: 0 12px 28px rgba(255, 0, 0, 0.678);



}



/* ===========================

   ANIMATION

=========================== */



@keyframes fade {



    from {



        opacity: 0;



        transform: translateY(40px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }

}



@keyframes floating {



    0%,

    100% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(-8px);



    }



}



/* ===================================

   TABLET RESPONSIVE

=================================== */



@media screen and (max-width: 992px) {



    .login-box {



        max-width: 400px;



        padding: 40px;



    }



}



/* ===================================

   MOBILE RESPONSIVE

=================================== */



@media screen and (max-width:576px) {



    body {



        padding: 20px;



        align-items: center;



    }



    .login-box {



        width: 100%;



        max-width: 100%;



        padding: 30px 25px;



        border-radius: 18px;



    }



    .logo {



        margin-bottom: 18px;



    }



    .logo img {



        width: 70px;



    }



    .login-box h2 {



        font-size: 28px;



    }



    .login-box p {



        font-size: 13px;



        margin-bottom: 25px;



    }



    .input-group {



        margin-bottom: 22px;



    }



    .input-group input {



        padding: 14px;



        font-size: 14px;



    }



    .input-group label {



        font-size: 14px;



    }



    button {



        padding: 14px;



        font-size: 15px;



    }



}



/* ===================================

   EXTRA SMALL DEVICE

=================================== */



@media screen and (max-width:360px) {



    .login-box {



        padding: 25px 20px;



    }



    .logo img {



        width: 60px;



    }



    .login-box h2 {



        font-size: 24px;



    }



    .login-box p {



        font-size: 12px;



    }



    .input-group input {



        padding: 13px;



    }



}