@media screen and (min-width: 768px) {

  .heading-primary {
    font-size: 2.5rem;
  }

  .hero-description {
    font-size: 1.5rem;
  }

  .secondary-header {
    font-family: var(--bold-font);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 2.125rem;
  }

  .capabilities-description {
    font-size: 1.0625rem;
  }
}

@media screen and (min-width: 992px) {
  .hero-box {
    text-align: start;
  }

  .hero-box .text-box {
    transform: translateY(-50%);
  }

  .heading-primary {
    font-size: 2.8rem;
  }

  .hero-description {
    font-size: 1.85rem;
  }

  .contact-img-title {
    width: 500px;
    top: 15%;
    left: 5%;
  }
}


@media screen and (min-width: 1300px) {

  .heading-primary {
    font-size: 3.2rem;
  }

 
}