*{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Popins", sans-serif;
}
body{
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background: rgb(255, 0, 47);
          background-image: url(img/welcome-bg.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;

}

.wrapper{
          width: 420px;
          background: transparent;
          border: 2px solid rgb( 255, 255, 255, .2);
          backdrop-filter:blur(20px);
          box-shadow: 0 0 10px rgb(0, 0, 0, .2);
          color: #fff;
          border-radius: 10px;
          padding: 30px 40px;

}
.wrapper h1{
          font-size: 36px;
          text-align: center;



}
.wrapper .input-box{
          width: 100%;
          height: 50px;
          margin: 30px 0;
          position: relative;
}
.input-box input{
          width: 100%;
          height: 100%;
          background: transparent;
          border: none;
          outline: none;
          border: 2px solid rgb( 255, 255, 255, .2);
          border-radius: 40px;
          font-size: 16px;
          color: #ffffff;
          padding: 20px 45px 20px 20px; 
}


.input-box input::placeholder{
          color: #fff;

}
.input-box img {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 20px;

}
.wrapper .remember{
          display: flex;
          justify-content: space-between;
          font-size: 14.5px;
          margin: -15px 0 15px;


}
.remember label input{
          accent-color: #fff;
          margin-right: 3px;

}
.remember a {
          color: #fff;
          text-decoration: none;

}
.remember a:hover{
          text-decoration: underline;
         
          
}
.wrapper .btn{
          width: 100%;
          height: 45px;
          background: #f6762c;
          border: none;
          outline: none;
          border-radius: 40px;
          box-shadow: 0 0 10px rgb(0, 0, 0, .1);
          cursor: pointer;
          font-size: 16px;
          color: #333;
          font-weight: 600;
}
.wrapper .register-link{
          font-size: 14.5px;
          text-align: center;
          margin-top: 20px;
}
.register-link p a {
          color: #fff;
          text-decoration: none;
          font-weight: 600;
}
.register-link p a:hover{
          text-decoration: underline;
          color: green;

}
.btn{
          text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;

          width: 165px;
          height: 50px;

          font-weight: 500;
          font-size: 16px;
          text-transform: uppercase;

          background-color: #f6762c;
          border-radius: 5px;

          text-align: center;
          transition: opacity 0.3s;
}