/* rang-mobile-burger-fallback */
@media screen and (max-width: 991px) {
  .menu-button-3 {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .menu-button-3 .humbarger-8 {
    position: relative;
    display: block !important;
    width: 28px;
    height: 20px;
    min-width: 28px;
    min-height: 20px;
  }

  /* Hide a failed/empty Lottie renderer but keep our fallback lines. */
  .menu-button-3 .humbarger-8 > svg,
  .menu-button-3 .humbarger-8 > canvas {
    position: absolute;
    inset: 0;
  }

  .menu-button-3 .humbarger-8::before,
  .menu-button-3 .humbarger-8::after {
    content: "";
    position: absolute;
    left: 0;
    width: 28px;
    height: 1.5px;
    background: #fff;
    transform-origin: center;
    transition:
      top 0.32s ease,
      bottom 0.32s ease,
      transform 0.32s ease;
  }

  .menu-button-3 .humbarger-8::before {
    top: 5px;
  }

  .menu-button-3 .humbarger-8::after {
    bottom: 5px;
  }

  .menu-button-3.w--open .humbarger-8::before {
    top: 9px;
    transform: rotate(45deg);
  }

  .menu-button-3.w--open .humbarger-8::after {
    bottom: 9px;
    transform: rotate(-45deg);
  }
  .rang-burger-lottie-ready .menu-button-3 .humbarger-8::before,
  .rang-burger-lottie-ready .menu-button-3 .humbarger-8::after {
    opacity: 0;
  }

}

/* rang-menu-final-fixes */
/* Custom fallback interactions replace IX3 here, so never leave menu text hidden. */
.nav-menu-box [nav-menut-text-01],
.nav-menu-box [nav-menut-text-02],
.nav-menu-2 [nav-menut-text-01],
.nav-menu-2 [nav-menut-text-02] {
  visibility: visible !important;
}

/* Desktop hover keeps the original two-layer text setup. */
.nav-menu-box .nav-menu-item [nav-menut-text-01],
.nav-menu-box .nav-menu-item [nav-menut-text-02] {
  will-change: transform;
}

@media screen and (max-width: 991px) {
  /* Original responsive Webflow shape: full-width, square corners. */
  .nav-menu-2,
  .nav-menu-2 .nav-menu-wrap-6 {
    border-radius: 0 !important;
  }

  .nav-menu-2 .nav-menu-wrap-6 {
    max-width: none !important;
    background: #000 !important;
  }

  /* All mobile menu text stays white, including the duplicate hover layer. */
  .nav-menu-2,
  .nav-menu-2 a,
  .nav-menu-2 a:visited,
  .nav-menu-2 a:hover,
  .nav-menu-2 a:focus,
  .nav-menu-2 .nav-menu-title,
  .nav-menu-2 .nav-menu-text,
  .nav-menu-2 .nav-menu-text._02,
  .nav-menu-2 .nav-menu-text.version-3,
  .nav-menu-2 .nav-menu-text.version-4 {
    color: #fff !important;
  }
}

/* rang-home-footer-hover-fixes */
/* Footer hover layers are controlled by our GSAP fallback, not Webflow IX3. */
.footer-menu-item [footer-menu-text-main],
.footer-menu-item [footer-menu-text-hover],
.footer-social-link [footer-social-icon-main],
.footer-social-link [footer-social-icon-hover],
.footer-social-link [footer-social-icon-bg] {
  visibility: visible !important;
}

/* Privacy Policy: stable legal-link hover, no split-character swap. */
.footer-copyright-right .rang-privacy-link {
  color: var(--gray--gray-100) !important;
  overflow: visible !important;
  transition: color .25s ease;
}

.footer-copyright-right .rang-privacy-link:hover,
.footer-copyright-right .rang-privacy-link:focus-visible {
  color: var(--primary-color) !important;
}

.footer-copyright-right .rang-privacy-link [footer-menu-text-main] {
  color: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  position: relative !important;
}

.footer-copyright-right .rang-privacy-link [footer-menu-text-hover] {
  display: none !important;
}

/* rang-home-pricing-contact-hover */
/* Homepage pricing contact card:
   keep the whole card black and only turn the icon circle Rang green. */
.section.pricing .pricing-contact-button.black,
.section.pricing .pricing-contact-button.black:hover,
.section.pricing .pricing-contact-button.black:focus,
.section.pricing .pricing-contact-button.black:focus-visible {
  background-color: rgb(26, 26, 26) !important;
}

.section.pricing .pricing-contact-button .pricing-contact-btn-icon-wrap.white {
  background-color: #fff !important;
  transition: background-color .25s ease !important;
}

.section.pricing .pricing-contact-button:hover .pricing-contact-btn-icon-wrap.white,
.section.pricing .pricing-contact-button:focus .pricing-contact-btn-icon-wrap.white,
.section.pricing .pricing-contact-button:focus-visible .pricing-contact-btn-icon-wrap.white {
  background-color: var(--primary-color, #1FD27D) !important;
}

/* First-load stability for the circular customer images.
   Webflow left _01 at its flex "static position", which can differ during the
   first render while assets/fonts are still resolving. Make it deterministic. */
.chose-card-v3-img-wrap._01 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.chose-card-v3-img-wrap {
  aspect-ratio: 1 / 1;
  contain: layout paint;
}

.chose-card-v3-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}