/* ------------------------
   GLOBAL FLUID CONTAINERS
   ------------------------ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
   overflow-x:none;
}

/* ------------------------
   TABLET & SMALL DESKTOP
   max-width: 992px
   ------------------------ */
@media (max-width: 992px) {
    body{overflow-x:none;}
  /* HERO */
  .hero {
    height: auto;
    padding: 3rem 1rem;
  }
  .hero-title {
    font-size: 3rem;
  }
  .hero-sub {
    font-size: 1rem;
  }
  .hero-ctas {
    flex-direction: column;
    gap: 1rem;
  }

  /* TRUSTED LOGOS */
  .logos-container {
    overflow-x: auto;
  }

  /* KEEP-SIMPLE */
  .keep-simple__inner {
    flex-direction: column;
    align-items: center;
  }

  /* TESTIMONIAL-BANNER */
  .testimonial-banner__inner {
    flex-direction: column-reverse;
    align-items: center;
    gap: 2rem;
  }

  /* PRICING */
  .pricing__cards {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* DASHBOARD */
  .dashboard__slides {
    flex-wrap: wrap;
    justify-content: center;
  }
  .dashboard__slide {
    flex: 1 1 calc(50% - 1rem);
  }

  /* FOOTER */
  .footer__top,
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }
}

/* ------------------------
   MOBILE PHONES
   max-width: 576px
   ------------------------ */
@media (max-width: 576px) {
  /* HERO */
  .hero-title {
    font-size: 2rem;
  }
  .hero-sub {
    font-size: .9rem;
  }

  /* DASHBOARD */
  .dashboard__slide {
    flex: 0 0 100%;
  }

  /* PRICING CARDS FULL-WIDTH */
  .pricing__card {
    max-width: 100%;
  }

  /* CONTACT & DEMO FORMS */
  .contact__card,
  .contact__form-container,
  .contact__info {
    padding: 2rem 1rem;
  }

  /* ACCORDION & KEEP-SIMPLE */
  .keep-simple__media,
  .keep-simple__accordion {
    width: 100%;
  }
}

/* 1) Prevent any X‐axis scroll everywhere */
html, body {
  overflow-x: hidden;
}

/* 2) Hide hero checkmarks on mobile */
@media (max-width: 768px) {
  .hero-checks {
    display: none;
  }
}

/* 3) Hamburger button & nav-wrapper visibility */
.nav-toggle {
  display: none;
}
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
    z-index: 10002;   /* sit above everything */
  }
  .nav-wrapper {
    display: none;    /* hide desktop nav by default */
  }
  .nav-wrapper.open {
    display: flex;    /* shown when toggled */
  }
}
@media (max-width: 768px) {
  /* Ensure the wrapper is hidden by default */
  header.navbar .nav-wrapper {
    display: none !important;
  }
  /* When open, show it as a dropdown */
  header.navbar .nav-wrapper.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 70px;       /* sits just below the 70px-high header */
    left: 0;
    right: 0;
    background: var(--white);
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1001;   /* above page content but below the header’s 9999 if needed */
  }

  /* Stack links & buttons neatly */
  header.navbar .nav-wrapper.open nav.main-nav {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  header.navbar .nav-wrapper.open .cta-group {
    flex-direction: column !important;
    gap: .75rem !important;
    margin-top: 1rem;
  }
}