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

/* BACKGROUND IMAGE */

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;

background:url("../image/hero-1.jpg")
no-repeat center center/cover;
}

/* DARK OVERLAY */

body::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
z-index:-1;
}

/* WRAPPER */

.forgot-wrapper{
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

/* CARD */

.forgot-card{

width:380px;
padding:40px;
border-radius:16px;

background:rgba(255,255,255,0.18);
backdrop-filter:blur(14px);

box-shadow:0 20px 40px rgba(0,0,0,0.5);
color:white;
}

/* TITLE */

.logo{
text-align:center;
margin-bottom:5px;
}

.subtitle{
text-align:center;
font-size:14px;
margin-bottom:25px;
opacity:0.9;
}

/* INPUT */

label{
display:block;
margin-bottom:5px;
}

.input-box{
position:relative;
margin-bottom:20px;
}

.input-box input{

width:100%;
height:42px;

padding:0 40px;

border-radius:8px;
border:none;

outline:none;
}

.input-box i{

position:absolute;

left:12px;
top:50%;

transform:translateY(-50%);
color:#555;

}

/* BUTTON */

.reset-btn{

width:100%;
height:44px;

background:#2563eb;

border:none;
border-radius:8px;

color:white;
font-size:15px;

cursor:pointer;
transition:0.3s;

}

.reset-btn:hover{
background:#1e40af;
}

/* BACK BUTTON */

.back-login{

display:block;
text-align:center;

margin-top:15px;
font-size:14px;

color:white;
text-decoration:none;

}

/* MESSAGE */

.message{
text-align:center;
margin-top:15px;
font-size:13px;
}

/* MOBILE RESPONSIVE */

@media(max-width:480px){
body{
align-items:flex-start;
padding:20px 0;
min-height:100vh;
height:auto;
}

.forgot-card{
width:92%;
padding:28px 20px;
margin:auto;
}
}