Now I see the core problem. The 4 logo strip images are each very wide (~1500px) with internal gaps. When I place 4 strips side by side and duplicate them for seamless loop, the total scroll width is massive (4 x 1500px x 2 = 12000px), causing huge blank spots between the strips. The translateX(-50%) only works correctly when the first half and second half are identical.
The better approach: use 4 separate rows (one per image), each with just 3 copies of the SAME strip back-to-back (so gaps between strips are filled by the next copy of the same strip). This guarantees no blank space since logos continuously repeat.
Now I also need to fix the CSS keyframes -- since each strip is duplicated 3 times, translateX(-50%) won't loop correctly. With 3 copies the seamless loop point is at -33.33% (one-third):
Completely restructured the carousel: now each of the 4 logo strips gets its own dedicated row with 3 identical copies placed end-to-end. The keyframes scroll exactly -33.333% (one strip width out of three), so when the first copy scrolls out, the second seamlessly takes its place -- guaranteeing zero blank space at any moment. Rows alternate between left and right scroll directions, and everything renders immediately on load with loading="eager".
The screenshot shows the About section with two small photos that look underwhelming - they need to be much larger and more impactful, and the titles need updating to CEO/CTO.
Now I'll make the photos much larger, update the titles to CEO/CTO, and make the section more impactful:
Redesigned the About section to be much more impactful: each founder now gets their own large card with a 4:5 aspect ratio photo (taking up most of the card), a zoom effect on hover, and their full title below -- Yordan as CEO & Founder and Chaim as CTO & Co-Founder, each with a short professional description. Added a subtitle "the team leading the technological revolution in Israeli real estate" for confidence. The mission text and value cards sit below the two large founder cards.