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

  #banner h1 {
    font-size: 35px;
    line-height: 47px;
  }

  .header-item-new {
    width: 95%;
  }
  div#about {
    overflow: hidden;
  }
  .heading {
    font-size: 33px;
    line-height: 43px;
  }

  #client-info .solutions-count {
    font-size: 28px;
    line-height: 50px;
  }

  #client-info .solutions-description {
    font-size: 21px;
  }

  .type-card {
    width: 24.5%;
  }

  #client-info .col-4 {
    flex: 0 0 auto;
    width: 100%;
  }

  #client-info .col-4 .rounded-4 {
    margin-bottom: 20px;
  }

  .jlYZhq {
    width: 25% !important;
  }

  .p-100 {
    padding: 40px 0px;
  }
}

@media screen and (max-width: 540px) {
  #banner h1 {
    font-size: 30px;
    line-height: 38px;
  }

  #banner p {
    font-size: 19px;
    line-height: 31px;
  }

  #about .img-area {
    display: none;
  }
  .type-card {
    width: 49.5%;
  }

  #premadeFrames .sc-iqcoie.jlYZhq {
    width: 33% !important;
  }
  #premadeFrames .col {
    flex: unset;
  }
}

/* -------------------------
   Responsive navbar styles
   ------------------------- */

/* Collapse into mobile menu at Bootstrap's lg breakpoint */
@media (max-width: 991.98px) {
  /* make navbar taller and allow wrapping */
  .navbar {
    height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  /* reduce brand size so it doesn't overcrowd */
  .navbar .navbar-brand {
    font-size: 28px;
    line-height: 1;
  }

  /* ensure the toggler is visible and accessible */
  .navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
  }

  /* style a clear tappable toggler */
  .navbar-dark .navbar-toggler-icon {
    background-color: var(--primary-color);
    border-radius: 4px;
    display: inline-block;
    width: 40px;
    height: 32px;
    background-image: none !important; /* use simpler visible block if svg is overridden */
  }

  .navbar-dark .navbar-toggler-icon::after {
    content: '\2630'; /* hamburger glyph fallback */
    color: #fff;
    font-size: 20px;
    display: inline-block;
    line-height: 32px;
    text-align: center;
    width: 100%;
  }

  /* make collapsed menu occupy full width with white background */
  .navbar-collapse.collapse {
    display: none !important; /* default hidden */
  }

  .navbar-collapse.collapse.show {
    display: block !important;
    background: #fff;
    padding: 1rem;
    box-shadow: var(--shadow);
    border-top: 1px solid rgba(0,0,0,0.04);
  }

  /* stack nav items vertically and make them full width for easy tapping */
  .navbar-nav {
    flex-direction: column;
    gap: 0.375rem;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    padding: 0.6rem 0.75rem;
    width: 100%;
    display: block;
    color: var(--dark-color);
    font-size: 16px;
  }

  /* Make CTA buttons full width on mobile */
  .qr-btn > .btn,
  .login-btn .btn {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.6rem 0.75rem;
    box-sizing: border-box;
  }

  /* stack create QR and its dropdown sensibly */
  .nav-item.ms-2.me-lg-4.d-flex {
    flex-direction: column;
    gap: 0.25rem;
  }

  /* dropdown menu should be full-width in collapsed mode */
  .nav-item.dropdown .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin-top: 0.25rem;
    border-radius: 4px;
  }

  /* reduce spacing for login button on mobile */
  .login-btn {
    margin-top: 0.25rem;
  }
}

/* extra small devices - tighten brand and spacing */
@media (max-width: 420px) {
  .navbar .navbar-brand {
    font-size: 22px;
  }

  .navbar-dark .navbar-toggler-icon::after {
    font-size: 18px;
  }

  .navbar-nav .nav-link {
    font-size: 15px;
    padding: 0.5rem 0.5rem;
  }

  .qr-btn > .btn,
  .login-btn .btn {
    padding: 0.55rem 0.5rem;
    font-size: 15px;
  }
}