/*
 * The companies' logos, sliding (9 Oct 2026, the owner's pending work #3: "brand logos mast slide animation me, website pe
 * bhi aur software ke brand section pe bhi"). One strip for both places: the logos twice in a row and the row slid by half
 * its width, so it runs on for ever without a jump. It stops while the pointer is on it, and does not move at all for
 * someone whose device asks for less motion (then it scrolls by hand instead).
 */
.lgs { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.lgs-track { display: flex; width: max-content; animation: lgsSlide var(--lgs-dur, 40s) linear infinite; }
.lgs:hover .lgs-track, .lgs:focus-within .lgs-track { animation-play-state: paused; }
.lgs-set { display: flex; gap: 14px; margin: 0; padding: 6px 7px; list-style: none; }
.lgs-set li { flex: none; box-sizing: border-box; width: 150px; height: 76px; display: flex; align-items: center; justify-content: center; padding: 10px 16px; overflow: hidden;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.lgs-set li:hover { border-color: #CBD5E1; box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .25); transform: translateY(-2px); }
/* a pixel cap, not 100%: a percentage of an auto-sized box let a tall logo run out of its card */
.lgs-set img { display: block; width: auto; height: auto; max-width: 118px; max-height: 54px; object-fit: contain; }
@keyframes lgsSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* a few logos stand still in one row, wrapping on a narrow screen */
.lgs-still { -webkit-mask-image: none; mask-image: none; }
.lgs-still .lgs-set { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .lgs { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .lgs-track { animation: none; }
  .lgs-set[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) { .lgs-set li { width: 118px; height: 62px; padding: 8px 12px; } .lgs-set img { max-width: 94px; max-height: 44px; } }