html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video {
  max-width: 100%;
}

.logo .logo-img {
  display: block !important;
  width: 210px !important;
  height: 63px !important;
  max-width: min(210px, 48vw) !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  padding: 0 !important;
}

.logo .logo-text {
  display: none !important;
}

.footer .logo {
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: #f7f4eb !important;
  box-shadow: none !important;
}

.footer .logo .logo-img {
  width: 230px !important;
  height: 69px !important;
  max-width: min(230px, 74vw) !important;
}

@media (max-width: 768px) {
  .product-nav {
    display: none !important;
  }

  .hero-container,
  .navbar-container,
  .footer-container {
    max-width: 100%;
    overflow-x: clip;
  }

  .hero-container {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-content,
  .hero-image-side,
  .hero-stats {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero-stats {
    gap: 12px !important;
  }

  .hero-main-img {
    width: 100% !important;
    height: auto !important;
  }

  .header-group .logo .logo-img {
    width: 160px !important;
    height: 48px !important;
    max-width: 48vw !important;
  }
}