/* =========================================
   SERVICE BHAIYA
   FORGOT PASSWORD CSS
========================================= */

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

.forgot-page{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
  24px;

  background:
  linear-gradient(
    135deg,
    #dc2626,
    #7f1d1d
  );

  overflow:hidden;

  position:relative;

}

/* =========================================
   BG EFFECT
========================================= */

.forgot-page::before{

  content:'';

  position:absolute;

  top:-200px;
  right:-200px;

  width:500px;
  height:500px;

  border-radius:50%;

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

}

.forgot-page::after{

  content:'';

  position:absolute;

  bottom:-180px;
  left:-180px;

  width:420px;
  height:420px;

  border-radius:50%;

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

}

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

.forgot-card{

  position:relative;

  z-index:2;

  width:100%;
  max-width:460px;

  padding:
  42px;

  border-radius:
  32px;

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

  border:
  1px solid rgba(255,255,255,.14);

  backdrop-filter:
  blur(20px);

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

}

/* =========================================
   LOGO
========================================= */

.forgot-logo{

  width:78px;
  height:78px;

  margin:auto;

  border-radius:
  24px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
  #ffffff;

  color:
  #dc2626;

  font-size:
  30px;

  font-weight:
  900;

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

}

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

.forgot-header{

  margin-top:
  28px;

  text-align:center;

}

.forgot-header h1{

  font-size:
  42px;

  font-weight:
  900;

  color:
  #ffffff;

  line-height:1.1;

}

.forgot-header p{

  margin-top:
  16px;

  color:
  rgba(255,255,255,.84);

  line-height:
  1.9;

  font-size:
  15px;

}

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

.forgot-form{

  margin-top:
  34px;

}

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

.form-group{

  margin-bottom:
  22px;

}

/* =========================================
   LABEL
========================================= */

.form-group label{

  display:block;

  margin-bottom:
  10px;

  color:
  #ffffff;

  font-size:
  14px;

  font-weight:
  700;

}

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

.input-box{

  width:100%;
  height:60px;

  display:flex;

  align-items:center;

  border-radius:
  18px;

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

  border:
  1px solid rgba(255,255,255,.12);

  overflow:hidden;

  transition:
  .3s ease;

}

.input-box:focus-within{

  border-color:
  rgba(255,255,255,.30);

  box-shadow:
  0 0 0 4px rgba(255,255,255,.08);

}

/* =========================================
   ICON
========================================= */

.input-box i{

  width:58px;

  text-align:center;

  color:
  rgba(255,255,255,.72);

  font-size:
  16px;

}

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

.input-box input{

  width:100%;
  height:100%;

  border:none;

  outline:none;

  background:none;

  color:
  #ffffff;

  font-size:
  15px;

  font-weight:
  600;

  padding-right:
  16px;

}

.input-box input::placeholder{

  color:
  rgba(255,255,255,.50);

}

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

.forgot-btn{

  width:100%;
  height:60px;

  border:none;

  border-radius:
  18px;

  background:
  #ffffff;

  color:
  #dc2626;

  font-size:
  16px;

  font-weight:
  800;

  cursor:pointer;

  transition:
  .3s ease;

  box-shadow:
  0 18px 40px rgba(0,0,0,.14);

}

.forgot-btn:hover{

  transform:
  translateY(-2px);

}

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

.forgot-footer{

  margin-top:
  28px;

  text-align:center;

}

.forgot-footer a{

  color:
  #ffffff;

  font-size:
  14px;

  font-weight:
  700;

  opacity:.88;

  transition:
  .3s ease;

}

.forgot-footer a:hover{

  opacity:1;

}

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

@media(max-width:500px){

  .forgot-card{

    padding:
    32px 20px;

    border-radius:
    26px;

  }

  .forgot-header h1{

    font-size:
    34px;

  }

  .forgot-logo{

    width:70px;
    height:70px;

    font-size:
    26px;

  }

}