.elementor-26 .elementor-element.elementor-element-355d936 > .elementor-container{max-width:1320px;}.elementor-26 .elementor-element.elementor-element-355d936{padding:120px 0px 100px 0px;}.elementor-26 .elementor-element.elementor-element-57485a4 > .elementor-element-populated{margin:40px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-26 .elementor-element.elementor-element-b9e45d0{padding:0px 0px 0px 0px;}.elementor-26 .elementor-element.elementor-element-dc7c158 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-26 .elementor-element.elementor-element-409537b > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-26 .elementor-element.elementor-element-409537b .transpialigh{text-align:left;}.elementor-26 .elementor-element.elementor-element-10a16a0 > .elementor-widget-container{margin:50px 0px 0px 0px;}.elementor-26 .elementor-element.elementor-element-10a16a0 .btnalign{text-align:left;}.elementor-26 .elementor-element.elementor-element-8e38a53{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-e25cb02 > .elementor-container{max-width:1320px;}.elementor-26 .elementor-element.elementor-element-e25cb02{margin-top:50px;margin-bottom:0px;padding:0px 0px 120px 0px;}.elementor-26 .elementor-element.elementor-element-7fa62cf > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-26 .elementor-element.elementor-element-7fa62cf > .elementor-container{max-width:1320px;}.elementor-26 .elementor-element.elementor-element-7fa62cf{padding:120px 0px 120px 0px;}.elementor-26 .elementor-element.elementor-element-cf33d54 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-26 .elementor-element.elementor-element-cf33d54 .transpialigh{text-align:left;}.elementor-26 .elementor-element.elementor-element-403be81 > .elementor-element-populated{margin:0px 0px 0px 30px;--e-column-margin-right:0px;--e-column-margin-left:30px;}.elementor-26 .elementor-element.elementor-element-2188b53 > .elementor-container{max-width:1320px;}.elementor-26 .elementor-element.elementor-element-2188b53{padding:0px 0px 110px 0px;}.elementor-26 .elementor-element.elementor-element-d233b4c{--display:flex;}.elementor-26 .elementor-element.elementor-element-9254753{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-4b9063a{margin:-50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-26 .elementor-element.elementor-element-403be81 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}}@media(min-width:768px){.elementor-26 .elementor-element.elementor-element-8e38a53{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-26 .elementor-element.elementor-element-57485a4{width:100%;}.elementor-26 .elementor-element.elementor-element-dc7c158{width:100%;}.elementor-26 .elementor-element.elementor-element-6b4d906{width:50%;}.elementor-26 .elementor-element.elementor-element-5bae8ba{width:50%;}.elementor-26 .elementor-element.elementor-element-e942e5a{width:50%;}.elementor-26 .elementor-element.elementor-element-16f7835{width:100%;}.elementor-26 .elementor-element.elementor-element-403be81{width:100%;}}/* Start custom CSS for container, class: .elementor-element-d233b4c */<!-- Vue CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
/* Scope everything inside #testcontainer */
#testcontainer {
    background-repeat: no-repeat;
    background-size: cover;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Carousel wrapper */
#testcontainer .brand-carousel {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: nowrap;
}

#testcontainer .brands1,
#testcontainer .brands2,
#testcontainer .brands3 {
    display: flex;
    position: fixed;
}

#testcontainer .brands1 {
    animation: sideToSide 15s infinite linear;
}

#testcontainer .brands2 {
    animation: sideToSide2 15s infinite linear;
}

#testcontainer .brands3 {
    animation: sideToSide3 15s infinite linear;
}

#testcontainer .brand {
    padding: 40px;
    min-width: 100px;
}

/* 🔥 SAME SIZE IMAGES */
#testcontainer .brand img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}

/* Keyframes */
@keyframes sideToSide {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
}

@keyframes sideToSide2 {
    from { transform: translateX(100%); }
    to { transform: translateX(0%); }
}

@keyframes sideToSide3 {
    from { transform: translateX(200%); }
    to { transform: translateX(100%); }
}
</style>


<div id="testcontainer">
    <div id="vue">

        <div class="brand-carousel">

            <div class="brands1">
                <div class="brand" v-for="brand in brands">
                    <img :src="brand">
                </div>
            </div>

            <div class="brands2">
                <div class="brand" v-for="brand in brands">
                    <img :src="brand">
                </div>
            </div>

            <div class="brands3">
                <div class="brand" v-for="brand in brands">
                    <img :src="brand">
                </div>
            </div>

        </div>

    </div>
</div>


<script>
const app = Vue.createApp({
    data() {
        return {
            brands: [
                "https://risikassociates.com/wp-content/uploads/2025/11/Screenshot-2025-11-29-103828.jpg",
                "https://risikassociates.com/wp-content/uploads/2025/11/GIPL_Logo.gif",
                "https://risikassociates.com/wp-content/uploads/2025/11/sanvijay.png",
                "https://risikassociates.com/wp-content/uploads/2025/11/victorian-marketing-pvt-ltd-logo-120x120-1.png",
                "https://risikassociates.com/wp-content/uploads/2025/11/manikgarh-cement-ltd.jpg.webp",
                "https://risikassociates.com/wp-content/uploads/2025/11/ultratech-cement-logo.png",
                "https://risikassociates.com/wp-content/uploads/2025/11/thumbnail_WCL_LOGO_High_Resolution_ea548136aa.webp"
            ]
        };
    }
});
app.mount("#vue");
</script>/* End custom CSS */