/* Shared layout safeguards and responsive breakpoints. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* Keep the existing desktop navigation, but prevent it from extending past the viewport. */
.navbar {
  width: 100%;
  padding-right: 2rem;
}

.topnav {
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .navbar {
    padding-left: 2rem !important;
  }

  .topnav {
    left: 10rem !important;
    padding-left: 2rem !important;
  }

  .topnav a {
    font-size: 1rem !important;
    margin-right: 0.8rem !important;
  }

  #c {
    margin-left: 1rem !important;
    padding: 0.65rem 0.8rem !important;
  }

  .b {
    padding: 3.5rem 6vw !important;
  }

  .body2,
  .body3 {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }

  .body3 img {
    width: 100% !important;
  }

  .team2 img,
  .team2 div {
    width: 100% !important;
  }

  .team2 {
    gap: 2rem;
    margin-left: 0 !important;
  }

  .footer {
    margin-left: 4vw !important;
  }
}

@media (max-width: 900px) {
  .nav {
    height: auto !important;
  }

  .navbar {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1.25rem !important;
  }

  .navbar img {
    height: 48px !important;
    padding-top: 0 !important;
  }

  .topnav {
    position: static !important;
    display: flex;
    flex: 1 1 560px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    width: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .topnav a {
    margin: 0 !important;
    padding: 0.4rem 0 !important;
  }

  #c {
    margin-left: auto !important;
  }

  .contact-container {
    height: auto !important;
    flex-direction: column;
  }

  .map-side iframe {
    display: block;
    width: 100% !important;
    height: 420px !important;
  }

  .form-side {
    margin: 0 !important;
    padding: 2.5rem 8vw !important;
  }

  .footer {
    height: auto !important;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 3rem 6vw !important;
  }

  .footer div {
    width: min(100%, 22rem) !important;
    margin: 0 !important;
  }

  .body {
    width: auto !important;
    padding-left: 8vw !important;
    padding-right: 8vw !important;
  }

  .team,
  .timeline {
    padding-left: 8vw !important;
    padding-right: 8vw !important;
  }

  .team2 {
    flex-wrap: wrap;
  }

  .cta div {
    padding-left: 8vw !important;
    padding-right: 8vw !important;
  }
}

@media (max-width: 600px) {
  .navbar {
    justify-content: center;
  }

  .topnav {
    display: grid !important;
    grid-template-columns: repeat(3, max-content);
    flex-basis: 100%;
    justify-content: center;
    gap: 0.65rem 0.85rem;
  }

  .topnav a {
    font-size: 0.82rem !important;
    white-space: nowrap;
  }

  #c {
    margin-left: 0 !important;
    padding: 0.45rem 0.65rem !important;
  }

  .Header img {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .b,
  .body,
  .body2,
  .body3,
  .team,
  .timeline {
    padding: 2.5rem 1.25rem !important;
    margin-left: 0 !important;
  }

  .body {
    margin: 0 !important;
  }

  .b .body {
    width: 100% !important;
    max-width: 100%;
    padding: 2rem 1.25rem !important;
  }

  .body h1,
  .body2 h1,
  .body3 h1,
  .team h1,
  .timeline h1,
  .gallery h1 {
    font-size: 2rem !important;
    margin-left: 0 !important;
  }

  .body h2,
  .body2 h2,
  .body3 h2,
  .team h2 {
    font-size: 1.2rem !important;
    margin-left: 0 !important;
  }

  .body h3,
  .body2 h3,
  .testimonial h3,
  li {
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
  }

  .body h4 {
    font-size: 1rem !important;
    text-align: left !important;
    letter-spacing: normal !important;
    line-height: 1.6 !important;
  }

  .timeline::after {
    display: none;
  }

  .container,
  .left,
  .right {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 1.25rem 0 !important;
  }

  .container::after,
  .right::after {
    display: none;
  }

  .body3 img,
  .team2 img,
  .body img {
    width: 100% !important;
    height: auto !important;
  }

  .team2 {
    margin-top: 2rem !important;
  }

  body > .body {
    flex-direction: column;
    gap: 2rem;
  }

  body > .body .content {
    width: 100% !important;
    margin: 0 !important;
  }

  .testimonial {
    width: 100% !important;
  }

  .body svg {
    display: block;
    margin: 0 auto 2rem !important;
  }

  .gallery {
    padding: 2.5rem 1.25rem !important;
  }

  .gimg,
  .gallery > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .gallery [id^="g"] {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .cta img {
    height: 360px !important;
  }

  .cta div {
    width: 100% !important;
    padding: 3rem 1.5rem !important;
  }

  .cta h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .cta h2 {
    font-size: 1.15rem !important;
  }

  .map-side iframe {
    height: 320px !important;
  }

  .form-side {
    padding: 2rem 1.25rem !important;
  }

  .form-side h1 {
    font-size: 1.75rem !important;
  }

  .footer {
    flex-direction: column;
  }
}