@media (max-height: 800px) {
  .auth-page{ padding-top: 220px;}
  .auth-fader{ padding: 32px 72px;}
  .auth-hero{ gap: 8px;}
  .auth-heading{ font-size: 36px; line-height: 44px;}
  .auth-card{ gap: 24px; padding: 24px;}
  .auth-card-logo{ height: 32px;}
  .auth-form{ gap: 24px;}
}

@media (max-width: 991px) {

  .auth-fader{ padding: 40px 24px;}
  .auth-heading{ font-size: 36px; line-height: 44px;}
  .auth-subtext{ font-size: 13px;}
  .auth-card{ width: 400px; padding: 24px;}
}

@media (max-width: 767px) {

  .auth-page{ padding: 240px 0 40px;}
  .auth-fader{ padding: 30px 16px;}
  .auth-hero{ max-width: 100%; padding: 0 16px;}
  .auth-heading{ font-size: 28px; line-height: 36px;}
  .auth-card{ width: 90%; max-width: 440px;}
}

/************ iphone **************/
@media (max-width:575px) {

  .auth-page{ padding: 220px 0 40px;}
  .auth-fader{ padding: 24px 12px;}
  .auth-heading{ font-size: 24px; line-height: 32px;}
  .auth-badge span{ font-size: 10px;}
  .auth-card{ width: 92%; padding: 20px; gap: 24px; border-radius: 12px;}
  .auth-card-title{ font-size: 20px;}
  .auth-form{ gap: 24px;}
}