@media (max-width: 768px) {
  .main-container {
    display: block;
    min-height: 100vh;
    padding: 85px 10px;
    margin-bottom: 60px;
  }

  .register-card {
    flex-direction: column;
    padding: 20px;
    border-radius: 20px;
    max-width: 100%;
  }

  .main-register-form-container {
    width: 100%;
    max-width: 338px;
    margin: 0 auto;
  }

  .reg-register-title {
    padding: 11px;
    padding-top: 19px;
  }

  .reg-register-description {
    margin-bottom: 0px;
    margin-top: -20px;
    padding: 0 4px;
  }

  .reg-register-description-mail {
    font-size: 12px;
    margin: 10px 0 20px 0;
  }

  .form-step.active {
    gap: 12px;
  }

  .reg-forgot-password,
  .reg-sign-up {
    font-size: 11px;
  }

  .button {
    padding: 11px;
    font-size: 16px;
    border-radius: 11px;
    letter-spacing: 0.4px;
  }

  .error-banner,
  .banner {
    font-size: 13px;
    padding: 10px;
  }

  .input-wrapper {
    border-radius: 8px;
  }

  .input-wrapper i.icon-left {
    font-size: 15px;
    width: 44px;
    height: 44px;
    border-radius: 8px 0 0 8px;
  }

  .input-wrapper input[type='text'],
  .input-wrapper input[type='password'],
  .input-wrapper input[type='email'],
  .input-wrapper input[type='tel'],
  .input-wrapper select {
    font-size: 14px;
  }

  .input-wrapper i.icon-right {
    right: 16px;
    font-size: 14px;
  }

  .gender-options {
    gap: 6px;
  }

  .gender-button {
    font-size: 12px;
    padding: 8px 6px;
    gap: 5px;
    max-width: 120px;
  }

  .dob-wrapper select {
    font-size: 13px;
  }

  .reg-button-container {
    gap: 8px;
  }

  .mail-exist-button {
    width: 100%;
    margin: 0;
  }
}