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

body {
font-family: 'Poppins', sans-serif;
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);
}

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

.circle.large {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #c9eaf7;
    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;
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: #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;
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;
      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;
}


.wrapper { /* main card container */ }
.top-shapes, .circle.large, .circle.small, .avatar { /* top design & logo */ }
.form-area { /* form section padding */ }
.avatar-preview { text-align: center; margin-bottom: 1rem; }
.avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #4A90E2;
}
label {
  font-weight: 600;
  color: #333;
}
select, input[type="file"] {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
.btn-next {
  background: #4A90E2;
  color: white;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}
.btn-next:hover {
  background-color: #008080;
}
.login-toggle {
  margin-top: 1.5rem;
  font-size: 0.85rem;
}
.login-toggle a {
  color: #4A90E2;
  text-decoration: none;
}






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