@media screen and (max-width: 990px) {
  .contactForm div label {
    text-align: center;
  }

  .linksHtml {
    display: none;
  }

  .otherLinksBtn {
    display: block;
  }
}

@media screen and (max-width: 815px) {
  .desktopHeader {
    display: none;
  }

  .mobileHeader {
    display: flex;
  }
}

@media screen and (max-width: 725px) {
  .foot1 {
    flex-direction: column;
    gap: 1rem;
  }

  .footLinks {
    width: 90%;
  }

  .subscribe,
  .subscribe form input {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .progress {
    width: 32rem !important;
  }

  .dashed a {
    left: 42%;
  }
}

@media screen and (max-width: 570px) {
  .progress {
    width: 25rem !important;
  }

  .contactForm > div :is(input, textarea, select),
  input {
    width: 15rem;
  }

  .formBtns {
    width: 15rem;
  }

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

@media screen and (max-width: 490px) {
  .svg {
    display: none !important;
  }

  .dashed a {
    left: 38%;
  }
}

@media screen and (max-width: 450px) {
  .progress {
    width: 18rem !important;
  }

  .lblForm {
    display: none;
  }

  .noLblForm {
    display: flex;
  }

  .otherLinksBtn {
    padding: 0.4em 1em;
    right: -4.5rem;
  }
}

@media screen and (max-width: 370px) {
  .dashed a {
    left: 30%;
  }
}

@media screen and (max-width: 320px) {
  .progress {
    width: 13rem !important;
  }

  .topText {
    display: none;
  }

  .dashed a {
    left: 45%;
  }
}

@media screen and (max-width: 300px) {
  .contactForm > div :is(input, textarea, select),
  input {
    width: 13rem;
  }

  .formBtns {
    width: 13rem;
  }

  .formBtns button {
    font-size: 11.5px;
  }
}

@media screen and (max-width: 250px) {
  *:not(html, body, .responsiveMessage) {
    display: none !important;
  }

  body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
  }

  .responsiveMessage {
    display: block;
    color: black;
  }
}