@media only screen and (min-width: 1025px) {
  .input-group {
    margin-bottom: 0px;
  }

  .hotline-icon {
    height: 42px;
    width: 42px;
  }

  .email-icon {
    height: 42px;
    width: 60px;
  }

  .header-wrp {
    padding-left: 70px;
    padding-right: 70px;
  }

  .menu-wrp {
    padding-left: 70px;
    padding-right: 70px;
  }

  .main-content-wrp {
    padding-left: 70px;
    padding-right: 70px;
    margin-top: 80px;
  }

  .service-categories-wrp {
    padding-left: 70px;
    padding-right: 70px;
    margin-top: 70px;
  }

  .search-bar-wrp input {
    padding: 22px 8px;
  }

  .list-item-avatar {
    height: 68px;
    width: 68px;
  }

  .font-9 {
    font-size: 9px;
  }

  .font-12 {
    font-size: 12px;
  }

  .font-13 {
    font-size: 13px;
  }

  .font-14 {
    font-size: 14px;
  }

  .font-15 {
    font-size: 15px;
  }

  .font-18 {
    font-size: 18px;
  }

  .font-20 {
    font-size: 20px;
  }

  .font-24 {
    font-size: 24px;
  }

  .font-25 {
    font-size: 25px;
  }

  .font-30 {
    font-size: 30px;
  }

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

  .font-42 {
    font-size: 42px;
  }

  .font-40 {
    font-size: 40px;
  }
}

@media only screen and (min-width: 576px) {
  .user-avatar {
    height: 166px;
    width: 166px;
    left: 60px;
  }

  .user-wrp {
    margin-left: 230px;
  }

  .display-mobile {
    display: none;
  }

  .service-avatar {
    height: 198px;
    width: 290px;
  }
}

@media screen and (min-width: 576px) and (max-width: 1024px) {
  .hotline-icon {
    height: 32px;
    width: 32px;
  }

  .email-icon {
    height: 22px;
    width: 40px;
  }

  .menu-wrp {
    padding-left: 16px;
    padding-right: 16px;
  }

  .service-categories-wrp {
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 50px;
  }

  .user-avatar {
    top: 114px;
  }

  .font-14-md {
    font-size: 14px;
  }

  .font-18-md {
    font-size: 18px;
  }

  .font-20-md {
    font-size: 20px;
  }

  .font-22-md {
    font-size: 22px;
  }

  .font-28-md {
    font-size: 28px;
  }

  .font-30-md {
    font-size: 30px;
  }

  .font-32-md {
    font-size: 32px;
  }
}

@media only screen and (max-width: 576px) {
  html,
  body {
    font-size: 12px;
  }

  .display-lg {
    display: none;
  }

  .menu-wrp {
    padding-left: 14px;
    padding-right: 14px;
  }

  .service-categories-wrp {
    padding-left: 14px;
    padding-right: 14px;
    margin-top: 50px;
  }

  .menu-line {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .service-banner {
    background: url("../images/service-background-mobile.png")
      rgba(0, 0, 0, 0.45);
    background-size: cover;
  }

  .news-banner {
    background: url("../images/news-background-mobile.png") rgba(0, 0, 0, 0.45);
    background-size: cover;
  }

  .profile-banner {
    background: url("../images/profile-background-mobile.png")
      rgba(0, 0, 0, 0.45);
    background-size: cover;
  }

  .update-profile-banner {
    background: url("../images/update_profile-background-mobile.png")
      rgba(0, 0, 0, 0.45);
    background-size: cover;
  }

  .manage-info-banner {
    background: url("../images/service-background-mobile.png")
      rgba(0, 0, 0, 0.45);
    background-size: cover;
  }

  .main-content-wrp {
    margin-top: 40px;
  }

  .new-item-wrp {
    margin-bottom: 46px;
  }

  .user-avatar {
    top: 120px;
  }

  .search-icon {
    height: 27px;
    width: 27px;
  }

  .status-badge {
    padding: 7px 10px;
  }

  .search-bar-wrp .input-group-prepend,
  .input-group-text {
    zoom: 0.9;
  }

  .service-title {
    margin-bottom: 20px;
  }

  .upload-white-icon {
    width: 19px;
    height: 17px;
  }

  .font-9-sm {
    font-size: 9px;
  }

  .font-10-sm {
    font-size: 10px;
  }

  .font-13-sm {
    font-size: 13px;
  }

  .font-14-sm {
    font-size: 14px;
  }

  .font-15-sm {
    font-size: 15px;
  }

  .font-16-sm {
    font-size: 16px;
  }

  .font-18-sm {
    font-size: 18px;
  }

  .font-20-sm {
    font-size: 20px;
  }

  .font-22-sm {
    font-size: 22px;
  }

  .logo {
    zoom: 0.5;
  }
}

@media only screen and (max-width: 400px) {
  .font-9-sm {
    font-size: 8px;
  }

  .font-13-sm {
    font-size: 11px;
  }

  .font-14-sm {
    font-size: 12px;
  }

  .font-18-sm {
    font-size: 16px;
  }

  .font-20-sm {
    font-size: 18px;
  }

  .login-form {
    padding-bottom: 25px;
  }
}

@media only screen and (max-width: 321px) {
  .main-title {
    text-align: center !important;
  }

  .font-10-xsm {
    font-size: 10px;
  }

  .font-9-sm {
    font-size: 7px;
  }

  .font-13-sm {
    font-size: 9px;
  }

  .font-14-sm {
    font-size: 10px;
  }

  .font-18-sm {
    font-size: 14px;
  }

  .font-20-sm {
    font-size: 16px;
  }
}