@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

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

body {
background: #ecf0f3;
}
.wrapper-container
{
width:100%;
height:100vh;
display:flex;	
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-image: url(../images/bg.webp);
}
.wrapper {
float:left;
width:350px;
padding:30px;
margin:auto;
background-color: #ecf0f3;
border-radius: 15px;
box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}

 .logo {
width: 80px;
height:80px;
margin: auto;
margin-bottom:30px;
overflow:hidden;
border-radius: 50%;
background:white;
box-shadow: 0px 0px 3px #5f5f5f, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px #a7aaa7, -8px -8px 15px #fff
}

.logo2
{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 40px auto;
padding: 10px 0;
}

.logo img, .logo2 img {
max-width: 120px;
max-height: 80px;
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
float: none;
}


 .wrapper .name {
     font-weight: 600;
     font-size: 1.4rem;
     letter-spacing: 1.3px;
     padding-left: 10px;
     color: #555
 }

 .wrapper .form-field input {
     width: 100%;
	 height:45px;
     display: block;
     border: none;
     outline: none;
     background: none;
     font-size: 15px;
     color: #666;
     padding: 10px 15px 10px 10px;
	 padding-left:25px;
 }
 .form-field ion-icon
 {
color: #666;
position:absolute;
font-size:18px;
top:13px;
 }

 .wrapper .form-field {
     padding-left: 10px;
     margin-bottom: 20px;
     border-radius: 20px;
     box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
	 position:relative;
 }

 .wrapper .form-field .fas {
     color: #555
 }

 .wrapper .btn {
     box-shadow: none;
     width: 100%;
     height: 40px;
     background-color: rgb(91,39,122);
     color: #fff;
     border-radius: 25px;
     box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
     letter-spacing: 1.3px;
	 cursor:pointer;
 }

 .wrapper .btn:hover {
     background-color:rgb(229,150,23);
 }

 .wrapper a {
     text-decoration: none;
     font-size:14px;
	 width:100%;
	 text-align:center;
     color:rgb(91,39,122);
	 font-weight:bold;
	 float:left;
	 margin-top:15px;
 }

 .wrapper a:hover {
     color:rgb(229,150,23);
 }
 .copyright
 {
	width:100%;
	text-align:center;
	font-size:13px;
	margin:0px;
	padding:0px;
	margin-top:25px;
	float:left;
	color: rgb(150,150,150);
 }

@media screen and (max-width: 760px) {
.wrapper
{
width:86%;
}
}