/* =========================================================
   Logo Marquee Section
   ========================================================= */

.section-logo-marquee {
    background-color: var(--color-bg-light-50);
	background-blend-mode: multiply;    position: relative;
    overflow-x: clip;
}

.section-logo-marquee > .container {
    position: relative;
    z-index: 1;
    padding-top: var(--size-v-pad-lg);
    padding-bottom: var(--size-v-pad-md);
}

.logo-marquee-title {
    max-width: var(--size-max-heading-center);
    margin-inline: auto;
    margin-bottom: var(--size-section-title-mb);
    color: var(--color-text-pri-dark);
    text-align: center;
}


/* =========================================================
   Rows
   ========================================================= */

.marquee-rows {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    max-width: var(--size-content-max-width);
    margin-inline: auto;
    margin-bottom: var(--size-section-cta-mt);
    overflow: hidden;
}

.marquee-row {
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 0.625rem;
    width: max-content;
}

/* LTR rows animate left */
.marquee-row--ltr .marquee-track {
    animation: marquee-ltr 150s linear infinite;
}

/* RTL rows animate right */
.marquee-row--rtl .marquee-track {
    animation: marquee-rtl 150s linear infinite;
}

/* Pause on hover — desktop pointer devices only */
@media (hover: hover) {
    .marquee-row:hover .marquee-track {
        animation-play-state: paused;
    }
}


/* =========================================================
   Logo items
   ========================================================= */

.marquee-item {
    flex-shrink: 0;
}

.marquee-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    background-color: var(--color-bg-light-50);
	background-repeat: repeat;
	background-size: 500px;
	background-blend-mode: multiply;    border: 1px solid var(--color-border-light-100, #e5e5e5);
    border-radius: var(--radius-media);
    padding: 0;
    overflow: hidden;
}

.marquee-logo img {
    height: 6rem;
    width: auto;
    object-fit: contain;
    padding-block: 0.5rem;
}

a.marquee-logo {
    text-decoration: none;
    transition: box-shadow var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default);
}

@media (hover: hover) {
    a.marquee-logo:hover {
        border-color: var(--color-border-light-200, #ccc);
        box-shadow: 0 4px 16px var(--color-shadow-card);
    }
}


/* =========================================================
   CTA
   ========================================================= */

.logo-marquee-cta {
    /* inherits .btn.btn-primary */
}


/* =========================================================
   Keyframes
   ========================================================= */

@keyframes marquee-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes marquee-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}


/* =========================================================
   Triangle shape
   ========================================================= */

.lm-shape-triangle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 70rem;
    transform: translateX(-50%) translateY(5%);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}


/* =========================================================
   Gradient overlay
   ========================================================= */

.lm-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  line-height: 0;
}
.lm-gradient svg {
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991.98px) {
    .lm-shape-triangle {
        transform-origin: bottom center;
        transform: translateX(-50%) scale(1.8);
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
    }

    .section-about + .section-logo-marquee {
        border-top: 1px solid var(--color-border-light-100);
    }

    .marquee-logo {
        height: 3.5rem;
    }

    .marquee-logo img {
        height: 5rem;
    }

    .marquee-rows {
        gap: 0.5rem;
    }

    .marquee-track {
        gap: 0.5rem;
    }
}