/* ==========================================================================
   Dwitech — Responsive Stylesheet
   Breakpoints follow Bootstrap 5: xl 1200, lg 992, md 768, sm 576
   ========================================================================== */

/* Large desktop refinements */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* Tablets */
@media (max-width: 991.98px) {
  .section {
    padding: 4rem 0;
  }

  .topbar {
    display: none !important;
  }

  .header-phone span.d-none {
    display: none !important;
  }

  .footer-top {
    padding: 3.5rem 0 2rem;
  }
}

/* Small tablets / large phones */
@media (max-width: 767.98px) {
  .section {
    padding: 3.25rem 0;
  }

  .section-sm {
    padding: 2.5rem 0;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .page-header {
    padding: 2.25rem 0;
  }

  .contact-card,
  .contact-info-card {
    padding: 1.75rem;
  }

  .cta-actions .btn {
    width: 100%;
  }

  .cta-actions {
    flex-direction: column;
  }

  .footer-top {
    padding: 3rem 0 1.5rem;
    text-align: left;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-bottom .text-md-end {
    margin-top: 0.5rem;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  h1, .display-heading {
    word-break: break-word;
  }

  .eyebrow {
    font-size: 0.72rem;
    padding: 0.35rem 0.85rem;
  }

  /* Same larger-at-top/shrink-on-scroll effect as desktop, scaled down to
     a size that stays comfortably clear of the hamburger toggle on a
     narrow phone header. */
  .navbar-brand-logo {
    height: 72px;
  }

  .site-header.is-scrolled .navbar-brand-logo {
    height: 50px;
  }

  .header-cta .btn span {
    display: none;
  }

  .contact-info-list li strong,
  .contact-info-list li span,
  .contact-info-list li a {
    font-size: 0.88rem;
  }
}

/* Guard against any accidental horizontal overflow on very small screens */
@media (max-width: 400px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}