@use "../abstracts/variables" as vars;

.marquee1 {
    background-color: vars.$footer-accent;
    padding: vars.rem(60) 0;
    overflow: hidden;
    position: relative;

    &__wrapper {
        display: flex;
        overflow: hidden;
        user-select: none;
        gap: vars.rem(80);
    }

    &__content {
        flex-shrink: 0;
        display: flex;
        justify-content: space-around;
        min-width: 100%;
        gap: vars.rem(80);
        animation: marquee-left 30s linear infinite;
    }

    &__logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            max-width: vars.rem(180);
            height: auto;
            display: block;
            filter: brightness(0) invert(1); // Make logos white
            opacity: 0.8;
            transition: opacity 0.3s ease;

            &:hover {
                opacity: 1;
            }
        }
    }
}

@keyframes marquee-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - vars.rem(80)));
    }
}

// Responsive adjustments
@media (max-width: 991px) {
    .marquee1 {
        padding: vars.rem(40) 0;

        &__wrapper,
        &__content {
            gap: vars.rem(50);
        }

        &__logo img {
            max-width: vars.rem(140);
        }
    }
}

@media (max-width: 575px) {
    .marquee1 {
        padding: vars.rem(30) 0;

        &__wrapper,
        &__content {
            gap: vars.rem(30);
        }

        &__logo img {
            max-width: vars.rem(80);
        }
    }
}

.marquee3 {
    background-color: transparent;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.05);

    &__wrapper {
        display: flex;
        overflow: hidden;
        user-select: none;
        gap: vars.rem(80);
    }

    &__content {
        flex-shrink: 0;
        display: flex;
        justify-content: space-around;
        min-width: 100%;
        gap: vars.rem(80);
        animation: marquee-left 30s linear infinite;
    }

    &__logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: auto;
            display: block;
            transition: all 0.3s ease;

        }
    }
}

// Responsive adjustments
@media (max-width: 991px) {
    .marquee3 {
        padding: vars.rem(60) 0 vars.rem(40);



        &__wrapper,
        &__content {
            gap: vars.rem(50);

            @media (max-width: 575px) {
                gap: vars.rem(20);
            }
        }

        &__logo img {
            max-width: vars.rem(100);

        }
    }
}

@media (max-width: 575px) {
    .marquee3 {
        padding: vars.rem(40) 0 vars.rem(30);

        &__wrapper,
        &__content {
            gap: vars.rem(30);
        }

        &__logo img {
            max-width: vars.rem(80);
        }
    }
}