/* Page-head inline <style> from the live "hardsell" landing template
   (/technology/* and /product/*). Only the rules NOT already in webflow.css:
   the hero CTA-arrow hover, the infinite hero background scroll animation, and
   the small-screen card width tweak. Structural .hs-* layout lives in
   webflow.css; navbar + whatsapp inline rules are shared chrome (ss-inline.css).
   Loaded via <link rel="stylesheet" precedence="page"> from both routes. */

.hs-start-project-button .image-126 {
  transition: all 0.4s;
}
.hs-start-project-button:hover .image-126 {
  transform: translateX(16px);
}

.hs-hero-scrolling-image {
  -webkit-animation: hs-img-scroll 20s linear infinite;
  animation: hs-img-scroll 20s linear infinite;
}

@-webkit-keyframes hs-img-scroll {
  from { background-position: 3032px 0; }
  to { background-position: 0 0; }
}

@keyframes hs-img-scroll {
  from { background-position: 3032px 0; }
  to { background-position: 0 0; }
}

@media screen and (max-width: 426px) {
  .collection-item-21,
  .hs-tech-item {
    min-width: 100%;
    max-width: 100%;
  }
  .collection-item-21 {
    text-align: center;
  }
}

/* FAQ accordion: live rewrites the `.hs-faq` richtext into clickable items
   (`.hs-faq-item` + `.hs-faq-item-expand`) and collapsible answers
   (`.hs-faq-subitem`, shown via `.show`). Reimplemented in HardsellFaq.tsx. */
.hs-faq-item {
  display: flex;
  font-size: 24px;
  cursor: pointer;
  margin: 32px 0;
}
.hs-faq-item-expand {
  margin-left: auto;
  min-width: 24px;
  display: inline-block;
  color: #00afaa;
}
.hs-faq-subitem {
  display: none;
}
.hs-faq-subitem.show {
  display: block;
}
.hs-faq-subitem h3 {
  font-size: 20px;
}
.hs-faq-subitem h4 {
  font-size: 18px;
}
.hs-faq-subitem p {
  font-size: 16px;
}