.registration {

  h1 {
    font-size: clamp(18px, 3vw, 1.4rem);
  }

  h2 {
    color: #7033e8ff;
    font-size: clamp(18px, 3vw, 1.4rem);
  }

  h3 {
    font-size: 16px;
    margin-bottom: 0.5rem;
  }
}

.form-section {

  .field {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;

    label {
      font-size: 13px;
      margin-bottom: 4px;
      margin-top: 0.5rem;
    }

    input, select {
      padding: 0.5rem;
      border: 1px solid #d6d6d6;
      border-radius: 7px;
      font-weight: 500;
    }

  }
}

.toggle-group {
  display: flex;
  gap: 12px;
  margin-top: 3px;
  margin-bottom: 1rem;
}

.toggle-btn {
  flex: 1;
  padding: 0.7rem 2rem;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  background: #fff;
  color: #222222;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn.selected {
  border-color: #7033e8ff;
  background: #7033e8ff;
  color: #FFF;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
}

.form-errors {
  padding: 0px 20px;
}

@media (min-width: 799px) {
  .registration {
    width: 699px;
    justify-self: center;
  }

  .form-errors {
    width: 699px;
    justify-self: center;
  }
}