/* WS Client-Logo Marquee — EN + AR, desktop + mobile, RTL-aware.
   Frame-22-1024x60.png as a seamless repeating-background marquee (pure CSS,
   Delay-JS safe). Matched across all porto-lazyload states (src/data-oi/
   data-srcset) so it works on both languages regardless of Elementor IDs.
   Tile width = height * 1024/60 (keeps logo aspect). Keyframe translate uses
   the SAME fixed px as background-size so the loop is seamless. */

:root { --ws-logo-speed: 30s; }

@supports selector(:has(*)) {

  .elementor-widget-container:has(> img[src*="Frame-22"]),
  .elementor-widget-container:has(> img[data-oi*="Frame-22"]),
  .elementor-widget-container:has(> img[data-srcset*="Frame-22"]) {
    height: 60px !important;
    min-height: 60px !important;
    width: 100% !important;
    overflow: hidden !important;
    background-image: url("https://webbingstone.com/wp-content/uploads/2026/06/webbingstone-client-logos-scaled.png") !important;
    background-repeat: repeat-x !important;
    background-position: 0 center;
    background-size: 731.43px 60px !important;
    animation: wsLogoBgScroll var(--ws-logo-speed) linear infinite !important;
    will-change: background-position;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }

  .elementor-widget-container:has(> img[src*="Frame-22"]) > img,
  .elementor-widget-container:has(> img[data-oi*="Frame-22"]) > img,
  .elementor-widget-container:has(> img[data-srcset*="Frame-22"]) > img { display: none !important; }

  .elementor-widget-container:has(> img[src*="Frame-22"]):hover,
  .elementor-widget-container:has(> img[data-oi*="Frame-22"]):hover,
  .elementor-widget-container:has(> img[data-srcset*="Frame-22"]):hover { animation-play-state: paused !important; }

  [dir="rtl"] .elementor-widget-container:has(> img[src*="Frame-22"]),
  [dir="rtl"] .elementor-widget-container:has(> img[data-oi*="Frame-22"]),
  [dir="rtl"] .elementor-widget-container:has(> img[data-srcset*="Frame-22"]),
  body.rtl .elementor-widget-container:has(> img[src*="Frame-22"]),
  body.rtl .elementor-widget-container:has(> img[data-oi*="Frame-22"]),
  body.rtl .elementor-widget-container:has(> img[data-srcset*="Frame-22"]) { animation-direction: reverse !important; }

  @media (max-width: 767px) {
    :root { --ws-logo-speed: 18s; }
    .elementor-widget-container:has(> img[src*="Frame-22"]),
  .elementor-widget-container:has(> img[data-oi*="Frame-22"]),
  .elementor-widget-container:has(> img[data-srcset*="Frame-22"]) {
      height: 44px !important;
      min-height: 44px !important;
      background-size: 536.38px 44px !important;
      margin-top: 24px !important;
      animation-name: wsLogoBgScrollSm !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .elementor-widget-container:has(> img[src*="Frame-22"]),
  .elementor-widget-container:has(> img[data-oi*="Frame-22"]),
  .elementor-widget-container:has(> img[data-srcset*="Frame-22"]) { animation: none !important; }
  }
}

@keyframes wsLogoBgScroll {
  from { background-position: 0 center; }
  to   { background-position: -731.43px center; }
}
@keyframes wsLogoBgScrollSm {
  from { background-position: 0 center; }
  to   { background-position: -536.38px center; }
}