all {
  background-color: white;
  font-family: sans-serif;
  background-image: url(banner.jpg);
  color: black;
}

.hero {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
}

.form-box {
     width: 380px;
     height: 480px;
     position: relative;
     margin: 6% auto;
     background: #fff;
     padding: 5px;

 }
 
.button-box {
  width: 220px;
  margin: 35px auto;
  position: relative;
  box-shadow: 0 0 20px 9px rgba(255, 97, 36, 0.12);
  border-radius: 30px;
  
  }
  
  .toggle-btn {
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    
    }
    
#btn{
    top: 0;
    left: 0;
    position: absolute;
    width: 110px;
    height: 100%;
    background: linear-gradient(to right, #ff105f,#ffad06);
    border-radius: 30px;
    transition: .5s;
    color: black;
  }
  
  .social-icons {
    margin: 30px auto;
    text-align: center;
    }
    
  .sii{
    width: 30px;
    margin: 0 12px;
    box-shadow: 0 0 20px 0 rgba(127, 127, 127, 0.24);
    cursor: pointer;
    border-radius: 50%;
    }
  
  .input-group {
      top: 180px;
      position: absolute;
      width: 200px;
      transition: .5s; 
    }
    
  .input-field {
    width: 100%;
    padding: 10px 0;
    margin:5px 0;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #999;
    outline: none;
    background: transparent;
    }
    
  .submit-btn {
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right, #ff105f,#ffad06);
    border: 0;
    outline: none;
    border-radius: 30px;
    }
    
  .check-box {
      margin: 30px 10px 34px 0;
      
    }

  span {
    color:#777;
    font-size: 12px;
    bottom: 68px;
    position: absolute;
    }