@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 700px) {
 

  .page-hero {
    height: 220px;
  }
  .image-card {
      height: 300px;
  }

  .about-image .image-card:nth-child(2) {
      display: none;
  }

  .values-wrap {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* About Us 2 responsive rules */
@media (max-width: 900px) {
  .timeline-row {grid-template-columns: 1fr;margin: 15px 0px;}
  .timeline-row::before { left: 28px; top: 14px; transform: translateX(-50%); }
  .timeline-item {width: calc(100% - 56px);margin: 0 auto !important;padding: 30px;}
  .timeline-row .col {justify-self: center;width: 100%;float: initial !important;margin: 0 auto;display: block;}
  .banner-figure img { height: 320px; }
  .clients-wrap { grid-template-columns: 1fr; gap: 20px; }
  .container {max-width: 100%;}

.mission-section p.lead {
    width: 100%;
}

.timeline {
    display: inline-block;
    width: 100%;
    padding: 0px;
}

.timeline-empty {
    height: auto;
    display: none;
}

.timeline-row .col::before {
    display: none;
}

.timeline-wrap {
    width: 100%;
}

.timeline-line {
    display: none;
}

.contact-pill {
    font-size: 16px;
    border-width: 10px;
    top: -26px;
    display: inline-block;
}

.timeline-title {
    margin-bottom: 20px;
    width: 90%;
    margin-left: 5%;
}

.mission-cards {
    margin-top: 35px;
}
.ref-list li {
    width: 100%;
    margin: 15px 0px;
}

.ref-list {
    display: inline-block;
    margin: 0 auto;
}
.header-wrap {
    gap: 10px;
}
.footer-wrap {
    justify-content: space-between;
  }
}


@media (max-width: 520px) {
  .mission-section { padding: 40px 0; }
  .mission-card {padding: 40px 25px 30px;}
  .mission-card .icon { width: 40px; height: 40px; }
  .banner-figure img { height: 200px; }
   .social-icons .phone-link {
      padding: 9px 8px;
      width: 130px;
    }

    .social-icons .phone-link .phone-number {
      font-size: 12px;
      width: calc(100% - 24px);
    }
     .footer-wrap {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
  }

  .footer-phone {
    gap: 8px;
    flex-wrap: nowrap;
  }

  .footer-phone .phone-link,
  .footer-phone .social-link {
    padding: 9px 8px;
  }

  .footer-phone .phone-number {
    font-size: 0.95rem;
    display: inline-block;
  }
  .clients-section {
      padding: 35px 5%;
  }
}