@media (max-width: 85em) {
  .container {
    max-width: 120rem;
  }
}

@media (max-width: 75em) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 59em) {
  html {
    font-size: 43.75%;
  }
  .btn-mobile-nav {
    display: block;
    z-index: 100;
  }
  .section-header {
    padding: 1.6rem;
  }
  .navbar {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fdf2e9;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* display: none; */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.4s ease-out;
  }
  .nav-items {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .nav-open .navbar {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .nav-link:link,
  .nav-link:visited {
    font-size: 2.8rem;
  }
  .nav-btn:link,
  .nav-btn:visited {
    font-size: 2.4rem;
    padding: 0.8rem 2.4rem;
  }
}

@media (max-width: 44em) {
  .customer-img {
    width: 4.8rem;
    height: 4.8rem;
    border: 2px solid #fff;
  }

  .hero-container {
    max-width: 85%;
  }

  .logo {
    height: 2.2rem;
  }
  .app-img {
    width: 50%;
  }

  .app-box_1::after {
    width: 60%;
    padding-bottom: 60%;
  }

  .app-box_1::before {
    width: 75%;
    padding-bottom: 75%;
  }
  .grid--4--col {
    grid-template-columns: repeat(auto-fit, minmax(28.2rem, 1fr));
    gap: 2.4rem;
  }
  .down {
    transform: translateY(0);
  }
  .card-list {
    margin-left: 3rem;
  }
  .mt-xlg {
    margin-top: 9.6rem;
  }
  .contact-grid {
    grid-template-columns: 2.5fr 1.5fr;
  }

  .contact-container {
    padding: 2.4rem 3.2rem;

    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .contact-image {
    border-radius: 0px;
  }
  .contact-form {
    grid-template-columns: 1fr;
    row-gap: 4.8rem;
    column-gap: 2.4rem;
  }
  .footer-grid {
    grid-template-columns: repeat(6, 1fr);
    row-gap: 4.8rem;
    /* justify-items: center; */
    /* align-items: center; */
  }
  .account {
    grid-row: 1/2;
    grid-column: 1/3;
  }

  .company {
    grid-row: 1/2;
    grid-column: 3/5;
  }
  .resources {
    grid-row: 1/2;
    grid-column: 5/7;
  }

  .logo-box {
    grid-row: 2/3;
    grid-column: 1/4;
  }

  .contact-us {
    grid-row: 2/3;
    grid-column: 4/7;
  }
}

@media (max-width: 34em) {
  /* html {
    font-size: 37.5%;
  } */
  .grid--2--col,
  .grid--4--col {
    grid-template-columns: 1fr;
    row-gap: 4.8rem;
  }
  .section-hero {
    background-image: linear-gradient(
        215deg,
        rgba(49, 61, 92, 0.57) 0%,
        rgba(44, 44, 73, 0.69) 100%
      ),
      url(../images/hero-mobile.jpg);
    padding: 10rem 0 10rem 0;
    background-size: cover;
    background-position: center;
  }
  .hero-container {
    max-width: 90%;
    padding: 2.4rem;
  }
  /* .heading-primary {
    font-size: 4rem;
  } */
  .cta-box {
    margin-bottom: 4.8rem;
  }
  /* .customer-img {
    width: 4rem;
    height: 4rem;
    border: 1px solid #fff;
  } */
  .customer-box {
    flex-direction: column;
    gap: 1.6rem;
  }
  .logo {
    height: 1.2rem;
  }
  .app-img {
    width: 35%;
  }
  .app-box_1::after {
    width: 40%;
    padding-bottom: 40%;
  }

  .app-box_1::before {
    width: 50%;
    padding-bottom: 50%;
  }

  .grid--2--col:nth-child(3) .text-box_1 {
    grid-row: 1;
  }
  /* .heading-secondary {
    font-size: 3.2rem;
  } */
  /* .heading-tertiary {
    font-size: 2.8rem;
  } */
  .mb-xlg {
    margin-bottom: 4.8rem;
  }
  .mt-xlg {
    margin-top: 9.6rem;
  }

  .testimonial-text {
    line-height: 18px;
  }
  .testimonials {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    /* grid-template-rows: repeat(2, 1fr); */
    /* column-gap: 2.4rem; */
    /* gap: 2.4rem; */
    grid-template-columns: 1fr;
    row-gap: 4.8rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-container {
    padding: 4.8rem 9.6rem;
  }
  .resources {
    grid-row: 1/2;
    grid-column: 5/7;
    justify-self: start;
  }
  .card-list {
    margin-left: 8rem;
  }

  .companies-logo {
    padding: 0 3.2rem;
  }
  .works-text_box {
    padding: 0 3.2rem;
  }
  .text-box_1 {
    padding: 0 3.2rem;
  }
  .card {
    padding: 0 3.2rem;
  }
  .testimonials-box {
    padding: 0 3.2rem;
  }
  .testimonial-card {
    padding: 0 3.2rem;
  }
  .testimonial-description_box {
    padding: 2.4rem 3.2rem;
  }
  .gallery {
    padding: 0 3.2rem;
  }
  .form-label {
    font-size: 1.6rem;
  }
  .form-input {
    font-size: 1.6rem;
  }
  .form-select {
    font-size: 1.6rem;
  }
  .form-btn {
    font-size: 1.7rem;
  }
  .testimonial-text {
    font-size: 1.6rem;
  }
  .testimonial-user_info {
    font-size: 1.6rem;
  }
  .testimonnial-user {
    font-size: 1.6rem;
  }
  .footer-grid {
    padding: 0 3.2rem;
  }
  .heading-primary {
    font-size: 4.8rem;
  }

  .heading-secondary {
    font-size: 3.2rem;
  }
  .heading-tertiary {
    font-size: 2.8rem;
  }
}