/* Navbar button pair: "Login" (white brand-cta variant) next to "Contact Sales", in one
   .sv-nav-ctas wrapper. The nav spaces its own children 2rem apart; the pair sits closer, as on
   most SaaS navbars. Loaded after the Webflow CSS, so same-specificity rules here win. */
.sv-nav-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sv-nav-ctas .brand-cta {
  white-space: nowrap;
}

/* The extra button must not squeeze the logo (it is a flex item whose image is max-width:100%,
   so it collapsed to 0px at ~1000px wide). */
.navbar-wrapper > .w-nav-brand {
  flex-shrink: 0;
}

/* Desktop widths where the nine nav items and two buttons don't fit at the Webflow 2rem gaps. */
@media screen and (min-width: 992px) and (max-width: 1359px) {
  .navigation,
  .navigation-wrapper {
    grid-column-gap: 1rem;
    column-gap: 1rem;
  }
  .sv-nav-ctas {
    gap: 8px;
  }
  .sv-nav-ctas .brand-cta {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 992-1139px: the logo, nine nav items and both buttons can't share the row (measured: 64px over at
   1000px even with the tighter gaps), so Login hides there and the navbar is as before. It shows
   again from 1140px, and in the mobile menu below 992px. */
@media screen and (min-width: 992px) and (max-width: 1139px) {
  .sv-nav-ctas [data-sv-login] {
    display: none;
  }
}

/* From 1140px everything fits on one line, so stop "About Us"/"Refer Us" breaking in two. Below
   that the links wrap, as they already did before the Login button. */
@media screen and (min-width: 1140px) {
  .navigation-wrapper .nav-link,
  .navigation-wrapper .nav-dropdown-toggle {
    white-space: nowrap;
  }
}

/* Mobile menu: Contact Sales used to fill the menu width; the pair now shares it equally. */
@media screen and (max-width: 991px) {
  .sv-nav-ctas {
    width: 100%;
  }
  .sv-nav-ctas .brand-cta {
    flex: 1 1 0;
  }
}