@media screen and (max-width: 1399.9px) {
  header {
    padding: 8px 0;
  }

  header .header-logo {
    max-width: 150px;
  }

  .main-section {
    min-height: calc(100vh - 97px);
  }

  .main-section-title {
    font-size: 32px;
  }

  .main-section-desc {
    font-size: 15px;
    line-height: 23px;
  }

  .main-btn-wrapper {
    margin-bottom: 30px;
  }

  .btn-common {
    font-size: 16px;
    line-height: 20px;
    width: 300px;
  }

  .card-custom {
    padding: 15px 20px;
  }

  .card-custom .card-icon img {
    max-width: 45px;
  }

  .card-custom h5 {
    font-size: 19px;
    min-height: 54px;
  }

  .card-custom p {
    font-size: 14px;
  }

  .card-custom .input-group-custom label {
    font-size: 16px;
    line-height: 28px;
  }

  .card-custom .input-group-custom input {
    font-size: 16px;
    line-height: 28px;
  }

  .card-custom form .cancel-btn {
    font-size: 16px;
    line-height: 20px;
  }

  footer .footer-text {
    font-size: 14px;
    line-height: 26px;
  }
}

@media screen and (max-width: 1199.9px) {
  header {
    padding: 6px 0;
  }

  header .header-logo {
    max-width: 140px;
  }

  .main-section {
    min-height: calc(100vh - 85px);
  }

  .main-section-title {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .main-section-desc {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 15px;
  }

  .btn-common {
    font-size: 14px;
    line-height: 18px;
    width: 260px;
  }

  .main-btn-wrapper {
    margin-bottom: 24px;
  }

  .card-custom {
    padding: 13px 15px;
  }

  .card-custom .card-icon {
    margin-bottom: 10px;
  }

  .card-custom .card-icon img {
    max-width: 40px;
  }

  .card-custom h5 {
    font-size: 16px;
    min-height: 45px;
    margin-bottom: 5px;
  }

  .card-custom p {
    font-size: 13px;
  }

  .card-custom .input-group-custom {
    padding: 5px 15px 9px;
    margin: 10px 0 13px;
  }

  .card-custom .input-group-custom label {
    font-size: 15px;
    line-height: 27px;
  }

  .card-custom .input-group-custom input {
    font-size: 15px;
    line-height: 27px;
  }

  .card-custom form .cancel-btn {
    font-size: 15px;
    line-height: 19px;
  }

  footer {
    background-color: #5527AA;
    padding: 6px 0;
  }

  footer .footer-text {
    font-size: 13px;
    line-height: 25px;
  }
}

@media screen and (max-width: 991.9px) {
  header .header-logo {
    max-width: 130px;
  }

  .main-section {
    min-height: calc(100vh - 80px);
  }

  .main-section-inner {
    width: 100%;
  }

  .card-custom {
    padding: 12px 10px;
  }

  .card-custom h5 {
    font-size: 14px;
    min-height: 39px;
  }

  footer {
    padding: 5px 0;
  }

  footer .footer-text {
    font-size: 12px;
    line-height: 24px;
  }

  .swal2-title {
    font-size: 35px;
  }

  div:where(.swal2-icon) {
    width: 4.5em !important;
    height: 4.5em !important;
  }
}

@media screen and (max-width: 991.9px) and (min-width: 768px) {
  .card-custom p.err-msg {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .main-section-title {
    margin-bottom: 8px;
  }

  .main-section-desc {
    margin-bottom: 10px;
  }

  .card-custom .card-icon {
    margin-bottom: 8px;
  }

  .card-custom .input-group-custom {
    margin: 8px 0 10px;
  }

  .card-custom form .cancel-btn {
    font-size: 14px;
    line-height: 18px;
  }

  .card-custom .input-group-custom label {
    font-size: 14px;
    line-height: 26px;
  }

  .card-custom .input-group-custom input {
    font-size: 14px;
    line-height: 26px;
  }
}

@media screen and (max-width: 767.9px) {
  .main-section {
    min-height: auto;
    padding: 25px 0;
  }

  .main-section-inner {
    width: 95%;
  }

  .main-section-title br {
    display: none;
  }

  .btn-common {
    width: 235px;
  }

  .card-custom {
    margin-bottom: 25px;
  }

  .col-md-4:last-child .card-custom {
    margin-bottom: 0;
  }

  .card-custom {
    padding: 20px 15px;
  }

  .card-custom .card-icon {
    margin-bottom: 13px;
  }

  .card-custom h5 {
    min-height: auto;
    font-size: 15px;
    margin-bottom: 8px;
  }

  .card-custom h5 br {
    display: none;
  }

  .card-custom p.err-msg {
    font-size: 12.5px;
  }

  .swal2-title {
    font-size: 32px;
  }

  div:where(.swal2-icon) {
    width: 4em !important;
    height: 4em !important;
  }
}

@media screen and (max-width: 575.9px) {
  .main-section-title {
    font-size: 25px;
  }

  .main-section-desc br {
    display: none;
  }

  .btn-common {
    width: 48%;
  }

  .swal2-title {
    font-size: 28px;
  }
}