@charset "UTF-8";
/*!
 * Client logo marquee.
 *
 * Ported from the inline <style> the custom_image_slider Elementor widget printed
 * on every instance, plus the per-page Elementor overrides that the About page
 * carried (gap 0, track padding, 190px cap, tighter hover shadow) — those were
 * page CSS and would have vanished with the plugin.
 *
 * The default state is the important bit: the logos are desaturated and at 40%
 * opacity, and come up to full colour on hover.
 *
 * The hover state used to also paint a white plate behind the logo, because the
 * original WebPs had opaque white baked in and needed it. They were replaced
 * with transparent ones, so the plate became a white box on whatever band the
 * strip is sitting on (Oskar, 2026-08-14). Hover is opacity + saturation only
 * now; the strip takes the colour of whatever is behind it.
 */
/*
 * THE FRAME (Raman's ruling, 2026-08-19). His Figma running-line frame is
 * 1440×278 Hug, vertical auto-layout, padding 40 top / 60 bottom, item spacing
 * 40 — and it contains the per-page TITLE as well as the logo row. "The gaps,
 * margins, spacings in the figma design are the same across all pages. The only
 * thing that could be different is a title."
 *
 * So the 40/40/60 lives on a wrapper class, not on .logos_slider: the title is
 * page markup (its copy, heading level and inline spans differ per template —
 * Home's is deliberately an h4 for the heading outline) but its spacing is not.
 * Every consumer puts this class on whatever div already wraps title + strip;
 * `gap` is what makes the same rule correct with a title and without one, since
 * a single flex child has no gap to apply.
 *
 * The space ABOVE the frame is the preceding section's own business, NOT the
 * strip's. That is the other half of Raman's arithmetic: his annotation on
 * /case-studies/ marks 60 (hero → frame) then 40 (frame's own padding → title),
 * which is where "total 100px hero to the visible line" comes from. Home reaches
 * the same 100 through `.rs-hero`'s existing 60px padding-bottom plus this 40.
 * Pages needing more air add it on their own container — his words: "we can use
 * additional container with extra paddings … but running line template should
 * stays the same by default."
 */
.rs-trusted-strip {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0 60px;
}

/* Inside the frame the frame owns the rhythm; the component must not add to it. */
.rs-trusted-strip > .logos_slider {
  padding: 0;
}

/*
 * Standalone default, for a template that includes the partial with no wrapper
 * and no title (template-quiz-thank-you.php). Same two numbers as the frame, so
 * a bare include is already correct and cannot drift — it was 30px 0 before,
 * which is where that page's 30/30 came from.
 */
.logos_slider {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 40px 0 60px;
}

/*
 * The frame's one width-dependent pair (Raman, 2026-08-19): "for 375px viewport
 * paddings should be not the same as for desktop … top=20px, bottom 40px". His
 * "no new values" ruling was about the DESKTOP frame being identical on all
 * pages, not about mobile inheriting it — Home used to carry 110px under the
 * logos and the flat 40/60 took that to 60px, which is the regression he is
 * answering here. Applied to the frame, so all nine consumers move together.
 *
 * The 40px item spacing is deliberately left alone: he re-specified padding
 * only, and the title→strip gap reads correctly at 375px as it is.
 *
 * 767.98px, not the 767px the img rule further down uses, because that is the
 * breakpoint every other section's padding switches on (home.scss,
 * cta-two-path.scss, case-studies.scss). A frame that changed one pixel earlier
 * than its neighbours would disagree with them at fractional widths.
 */
@media (max-width: 767.98px) {
  .rs-trusted-strip {
    padding: 20px 0 40px;
  }
  /* The bare-include default tracks the frame — same reason it matches on
     desktop: a template that drops the partial in without a wrapper must not
     render different spacing from one that wraps it. */
  .logos_slider {
    padding: 20px 0 40px;
  }
}
.logo-slider {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.logos-slide {
  display: inline-block;
  padding: 0 20px 0 0;
  animation: rs-logo-slide infinite linear;
}

.logos-slide img {
  display: inline-block;
  padding: 2px 20px;
  max-width: 190px;
  height: 60px;
  width: auto;
  margin: 0 40px;
  border-radius: var(--rs-radius-s, 4px);
  transition: all 0.3s ease-in-out;
  opacity: 0.4;
  filter: saturate(0);
}

.logos-slide img:hover {
  opacity: 1;
  filter: saturate(1);
}

.logo-text {
  height: 33px;
  margin-top: 20px;
}

.logo-marquee__caption {
  margin: 0;
  text-align: center;
  color: var(--rs-text-secondary, #5D636A);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
}

@keyframes rs-logo-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@media (max-width: 767px) {
  .logos-slide img {
    margin-left: 5px;
    margin-right: 5px;
  }
}
/* An infinite marquee is exactly what this setting exists to stop. The logos stay
   readable and the hover caption still works — only the motion goes. */
@media (prefers-reduced-motion: reduce) {
  .logos-slide {
    animation: none;
  }
  .logo-slider {
    overflow-x: auto;
  }
}