* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
/** background: linear-gradient(to bottom, #4ccedc, #009da0); **/
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.wrapper {
width: 100%;
max-width: 380px;
background: white;
border-radius: 25px;
overflow: hidden;
position: relative;
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
/*padding-top: 200px;  To show the Top header Logo Well */
}

.top-shapes {
position: relative;
height: 140px;
}

.circle.large {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #c9eaf7; /*background: #3cc;*/
    position: absolute;
    top: -75px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle.small {
width: 250px;
height: 250px;
border-radius: 50%;
background: #a0def5; /*background: #00a0a0;*/
position: absolute;
top: -50px;
right: -40px;

}

.avatar {
    width: 120px;
    position: absolute;
    right: 30px;
    top: 30px;
}

.form-area {
padding: 1.5rem 1.5rem 2rem;
}

.form-area h2 {
color: darkslategray; /* color: #008080; */
font-size: 1.5rem;
text-align: left;
margin-bottom: 0.25rem;
}

.form-area p {
color: #555;
font-size: 0.9rem;
text-align: left;
margin-bottom: 1.5rem;
}

form input {
width: 100%;
padding: 0.7rem;
margin-bottom: 1rem;
border-radius: 25px;
border: 1px solid #ccc;
outline: none;
}

.password-wrapper {
position: relative;
}

.password-wrapper i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #888;
}

.btn.primary {
background: #4A90E2; /*background: #00a0a0;*/
color: white;
padding: 0.7rem;
width: 100%;
border: none;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
margin-bottom: 1rem;
}

.login-toggle {
font-size: 0.85rem;
text-align: center;
margin-bottom: 1rem;
}

.login-toggle a {
color: #4A90E2;
text-decoration: none;
}

.divider {
text-align: center;
margin: 1rem 0;
color: #888;
font-size: 0.85rem;
}

.form-area {
      padding: 1.5rem 1.5rem 2rem;
    }

    .form-area h2 {
      color: darkslategray; /*color: #008080;*/
      font-size: 1.5rem;
      text-align: left;
      margin-bottom: 0.25rem;
    }

    .form-area p {
      color: #555;
      font-size: 0.9rem;
      text-align: left;
      margin-bottom: 1.5rem;
    }

    form input,
    form select {
      width: 100%;
      /* padding: 0.7rem;
      margin-bottom: 1rem; */
      border-radius: 25px;
      border: 1px solid #ccc;
      outline: none;
      font-family: 'Poppins', sans-serif;
    }

    form select {
      background-color: white;
      color: #333;
    }

    .password-wrapper {
      position: relative;
    }

    .password-wrapper i {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #888;
    }

.socials {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .social {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      border: none;
      border-radius: 25px;
      padding: 0.6rem;
      font-size: 0.9rem;
      color: white;
      cursor: pointer;
    }

    .google {
      background: #db4437;
    }

    .facebook {
      background: #4267B2;
    }

    .twitter {
      background: #1DA1F2;
    }
    
    
    .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    width: 100%;
    padding-right: 40px; /* space for the eye icon */
}

.toggle-password {
    position: absolute;
    right: 10px;
   /* top: 50%; */
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
}


/* Issue */
.sticky-header .site-content {
    padding-top: 0px !important;
}