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

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

body{
    background:#ECECEC;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
}

/*==================================
        PHONE
==================================*/

.phone{
    width:390px;
    height:844px;
    background:#ffffff;
    border-radius:35px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

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

.top-area{
    height:230px;
    background:linear-gradient(180deg,#6A1B9A,#8E24AA);
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;

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

    color:white;
}

.logo-box{

    width:95px;
    height:95px;

    background:white;

    border-radius:50%;

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

    margin-bottom:15px;

}

#logo{

    width:65px;
    height:65px;

    object-fit:contain;

}

.top-area h2{

    font-size:24px;

    font-weight:700;

}

.top-area p{

    margin-top:6px;

    font-size:14px;

    opacity:.9;

}

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

form{

    flex:1;

    overflow-y:auto;

    padding:30px 25px;

}

form::-webkit-scrollbar{

    display:none;

}

.input-group{

    margin-bottom:22px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    color:#444;

    font-weight:600;

    font-size:14px;

}

.input-box{

    display:flex;

    align-items:center;

    height:52px;

    background:#F7F7F7;

    border-radius:15px;

    padding:0 15px;

    border:2px solid transparent;

    transition:.25s;

}

.input-box:focus-within{

    border-color:#6A1B9A;

}

.input-box i{

    color:#6A1B9A;

    font-size:18px;

}

.input-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    padding-left:12px;

    font-size:14px;

}

.togglePassword{

    cursor:pointer;

}

/*==================================
      REMEMBER
==================================*/

.remember{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:-5px;

    margin-bottom:25px;

}

.remember label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:#666;

}

.remember input{

    accent-color:#6A1B9A;

}

.remember a{

    color:#6A1B9A;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

}

.remember a:hover{

    text-decoration:underline;

}

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

.login-btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:15px;

    background:#6A1B9A;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.login-btn:hover{

    background:#4A148C;

}

.login-btn:active{

    transform:scale(.98);

}

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

.bottom-text{

    text-align:center;

    padding:18px;

    font-size:14px;

    color:#666;

}

.bottom-text a{

    color:#6A1B9A;

    text-decoration:none;

    font-weight:600;

}

.bottom-text a:hover{

    text-decoration:underline;

}

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

@media(max-width:430px){

    body{

        padding:0;

        background:white;

    }

    .phone{

        width:100%;

        height:100vh;

        border-radius:0;

        box-shadow:none;

    }

}