.elementor-5 .elementor-element.elementor-element-6526cbd{--display:flex;--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-5 .elementor-element.elementor-element-5635dae{--display:flex;--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-5 .elementor-element.elementor-element-b27ee59{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5 .elementor-element.elementor-element-d5ce821{--display:flex;}.elementor-5 .elementor-element.elementor-element-bfee777{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--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-5 .elementor-element.elementor-element-bfc8f00{--display:flex;--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-5 .elementor-element.elementor-element-38ec154{margin:-22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-5 .elementor-element.elementor-element-278e970{margin:-22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-5 .elementor-element.elementor-element-a4b47ad{margin:-22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-5 .elementor-element.elementor-element-0133dbe{margin:-22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-5 .elementor-element.elementor-element-cb598ff{margin:-22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-5 .elementor-element.elementor-element-a4b47ad{margin:-87px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-8a7bff8 */.sb-device-marquee{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:90px 0;
    background:#fff;
}

.sb-track{
    display:flex;
    align-items:flex-end;
    gap:70px;
    width:max-content;
    animation:scrollDevices 55s linear infinite;
}

.sb-track img{
    display:block;
    transition:.45s ease;
    will-change:transform;
}

.sb-track img:hover{
    transform:translateY(-8px);
}

.phone{
    width:185px;
    margin-bottom:35px;
}

.laptop{
    width:470px;
}

@keyframes scrollDevices{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* Tablet */

@media(max-width:1024px){

.phone{
    width:145px;
}

.laptop{
    width:360px;
}

.sb-track{
    gap:45px;
}

}

/* Mobile */

@media(max-width:767px){

.sb-device-marquee{

    padding:50px 0;

}

.phone{
    width:110px;
    margin-bottom:20px;
}

.laptop{
    width:250px;
}

.sb-track{

    gap:25px;

    animation-duration:40s;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-22270d4 */.sb-device-marquee{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:90px 0;
    background:#fff;
}

.sb-track{
    display:flex;
    align-items:flex-end;
    gap:70px;
    width:max-content;
    animation:scrollDevices 55s linear infinite;
}

.sb-track img{
    display:block;
    transition:.45s ease;
    will-change:transform;
}

.sb-track img:hover{
    transform:translateY(-8px);
}

.phone{
    width:185px;
    margin-bottom:35px;
}

.laptop{
    width:470px;
}

@keyframes scrollDevices{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* Tablet */

@media(max-width:1024px){

.phone{
    width:145px;
}

.laptop{
    width:360px;
}

.sb-track{
    gap:45px;
}

}

/* Mobile */

@media(max-width:767px){

.sb-device-marquee{

    padding:50px 0;

}

.phone{
    width:110px;
    margin-bottom:20px;
}

.laptop{
    width:250px;
}

.sb-track{

    gap:25px;

    animation-duration:40s;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6abacba */.sb-device-marquee{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:90px 0;
    background:#fff;
}

.sb-track{
    display:flex;
    align-items:flex-end;
    gap:70px;
    width:max-content;
    animation:scrollDevices 55s linear infinite;
}

.sb-track img{
    display:block;
    transition:.45s ease;
    will-change:transform;
}

.sb-track img:hover{
    transform:translateY(-8px);
}

.phone{
    width:185px;
    margin-bottom:35px;
}

.laptop{
    width:470px;
}

@keyframes scrollDevices{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* Tablet */

@media(max-width:1024px){

.phone{
    width:145px;
}

.laptop{
    width:360px;
}

.sb-track{
    gap:45px;
}

}

/* Mobile */

@media(max-width:767px){

.sb-device-marquee{

    padding:50px 0;

}

.phone{
    width:110px;
    margin-bottom:20px;
}

.laptop{
    width:250px;
}

.sb-track{

    gap:25px;

    animation-duration:40s;

}

}

/* =========================================================
   FAINT CENTRED PINK MOON BACKGROUND
========================================================= */

.sb-device-marquee {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: #FFFFFF;
}

/* Moon sits behind all device mockups */

.sb-device-marquee__moon {
    position: absolute;
    z-index: 0;

    top: 50%;
    left: 50%;

    width: clamp(360px, 42vw, 720px);
    aspect-ratio: 1;

    background-image:
        url("https://soul-blue-print.com.au/wp-content/uploads/2026/08/pink-moon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    opacity: 0.0;

    filter:
        saturate(0.82)
        brightness(1.08);

    transform: translate(-50%, -50%) scale(0.96);

    pointer-events: none;

    animation:
        sbMarqueeMoonFloat 16s ease-in-out infinite alternate;
}

/* Keep the scrolling products above the moon */

.sb-device-marquee .sb-track {
    position: relative;
    z-index: 2;
}

/* Very soft white veil so the moon never becomes distracting */

.sb-device-marquee::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.28) 42%,
            rgba(255, 255, 255, 0.62) 88%
        );
}

@keyframes sbMarqueeMoonFloat {
    0% {
        transform:
            translate(-50%, -50%)
            scale(0.94)
            rotate(-1deg);
    }

    100% {
        transform:
            translate(-50%, -52%)
            scale(1.025)
            rotate(1deg);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .sb-device-marquee__moon {
        width: clamp(330px, 56vw, 540px);
        opacity: 0.0;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sb-device-marquee__moon {
        width: 390px;
        max-width: 92vw;

        top: 49%;

        opacity: 0.0;
    }

    .sb-device-marquee::after {
        background:
            radial-gradient(
                circle at center,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0.22) 45%,
                rgba(255, 255, 255, 0.58) 90%
            );
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sb-device-marquee__moon {
        animation: none;
        transform: translate(-50%, -50%);
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bdd88ba */.sb-device-marquee{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:90px 0;
    background:#fff;
}

.sb-track{
    display:flex;
    align-items:flex-end;
    gap:70px;
    width:max-content;
    animation:scrollDevices 55s linear infinite;
}

.sb-track img{
    display:block;
    transition:.45s ease;
    will-change:transform;
}

.sb-track img:hover{
    transform:translateY(-8px);
}

.phone{
    width:185px;
    margin-bottom:35px;
}

.laptop{
    width:470px;
}

@keyframes scrollDevices{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* Tablet */

@media(max-width:1024px){

.phone{
    width:145px;
}

.laptop{
    width:360px;
}

.sb-track{
    gap:45px;
}

}

/* Mobile */

@media(max-width:767px){

.sb-device-marquee{

    padding:50px 0;

}

.phone{
    width:110px;
    margin-bottom:20px;
}

.laptop{
    width:250px;
}

.sb-track{

    gap:25px;

    animation-duration:40s;

}

}/* End custom CSS */