/* ================================================================
   Sync Inn Digital — Tech Ecosystem Section
   Global section on main-services category pages.
   Content from Appearance → Sync Inn Settings → Tech Ecosystem.

   Layout:
     .sid-te              — full-width section wrapper
     .sid-te__container   — rounded card with bg (#E8ECF3)
     .sid-te__inner       — constrained/boxed inner
     .sid-te__layout      — flex row: left text + right ticker
     .sid-te__left        — label + heading + description
     .sid-te__right       — logo ticker column
     .sid-te__rows        — 4 scrolling rows (overflow hidden + fade)
     .sid-te__row         — individual ticker row (flex, animated)
     .sid-te__row--left   — scrolls left
     .sid-te__row--right  — scrolls right
     .sid-te__logo        — individual logo cell
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */

.sid-te {
  background-color: var(--sid-light-grayish-blue-bg, #F5F6FA);
  padding: 0px 20px;
}

/* ── Rounded container ───────────────────────────────────────── */

.sid-te__container {
  background-color: #E8ECF3;
  border-radius: 20px;
  padding: 110px 20px;
}

/* ── Constrained inner ───────────────────────────────────────── */

.sid-te__inner {
  max-width: var(--sid-site-width, 1400px);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Two-column layout ───────────────────────────────────────── */

.sid-te__layout {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.sid-te__left {
  flex: 0 0 56%;
  max-width: 72%;
}

.sid-te__right {
  padding-top: 35px;
  flex: 1;
  min-width: 0;
}

/* ── Heading ─────────────────────────────────────────────────── */

.sid-te__heading {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sid-black, #000);
  margin: 0 0 24px;
}

.sid-te__heading-muted {
  color: #7E7E81;
}

/* ── Description ─────────────────────────────────────────────── */

.sid-te__desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--sid-black, #000);
  margin: 0;
}

/* ── Logo ticker — rows wrapper ──────────────────────────────── */

.sid-te__rows {
  position: relative;
  overflow: hidden;
}


/* ── Individual ticker row ───────────────────────────────────── */

.sid-te__row {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  margin-bottom: 40px;
}

.sid-te__row:last-child {
  margin-bottom: 0;
}

/* Pause on hover */
.sid-te__row:hover {
  animation-play-state: paused;
}

/* Left-scrolling rows (1 & 3) */
.sid-te__row--left {
  animation: sid-te-left var(--sid-te-speed, 28s) linear infinite;
}

/* Right-scrolling rows (2 & 4) */
.sid-te__row--right {
  animation: sid-te-right var(--sid-te-speed, 28s) linear infinite;
}

@keyframes sid-te-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes sid-te-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ── Individual logo ─────────────────────────────────────────── */

.sid-te__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  flex-shrink: 0;
}

.sid-te__logo img {
  max-height: 36px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease;
}

.sid-te__logo img:hover {
  filter: grayscale(0%) opacity(1);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .sid-te__heading {
    font-size: 44px;
  }

  .sid-te__layout {
    gap: 56px;
  }
}

@media (max-width: 1024px) {
  .sid-te__layout {
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
  }

  .sid-te__left {
    flex: none;
    max-width: 100%;
  }

  .sid-te__right {
    width: 100%;
  }

  .sid-te__heading {
    font-size: 38px;
  }

  .sid-te__row {
    margin-bottom: 56px;
  }
}

@media (max-width: 768px) {
  .sid-te {
    padding: 0 12px;
  }

  .sid-te__container {
    padding: 60px 0;
    border-radius: 14px;
  }

  .sid-te__heading {
    font-size: 32px;
  }

  .sid-te__row {
    margin-bottom: 35px;
  }

  .sid-te__logo {
    width: calc((100vw - 64px) / 3);
    padding: 0 10px;
    box-sizing: border-box;
  }

  .sid-te__logo img {
    max-width: 100%;
    max-height: 28px;
  }
}

@media (max-width: 480px) {
  .sid-te__heading {
    font-size: 30px;
    line-height: 30px;
  }

  .sid-te__desc {
    font-size: 16px;
  }

  .sid-te__logo img {
    max-height: 28px;
    max-width: 80px;
  }
}