/* ------------------------------------------------------------------ Toned-down entrance animations. Overrides Elementor's animate.css keyframes (loaded earlier in , so these same-named @keyframes win). Replaces the default 100%-of-element slide with a gentle ~14px fade, shortens duration, and removes the long stagger delays. Opacity + tiny transform never reflow, so layout/spacing is unaffected and horizontal slides can't cause overflow. ------------------------------------------------------------------- */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes slideInLeft { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes slideInRight{ from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } } /* Snappier + no long waits (originals stagger up to 1.6s) */ .elementor .animated { animation-duration: 0.5s !important; animation-delay: 0s !important; animation-timing-function: ease-out !important; animation-fill-mode: both !important; } /* ------------------------------------------------------------------ Disable Elementor scroll "Motion Effects" (parallax translateY). These continuously shift elements vertically at different speeds as you scroll, which made the process cards drift up and cross over the heading. An !important transform overrides the inline transform the motion-fx JS sets on scroll, freezing elements in their normal (non-overlapping) place. ------------------------------------------------------------------- */ .elementor-motion-effects-element, .elementor-motion-effects-container { transform: none !important; transition: none !important; } /* hero "CREATIVE AGENCY" text parallax is driven by hero-parallax.js (translateY on the heading itself); give it a smooth transform + will-change for perf */ .elementor-element-22c755b8 .elementor-heading-title, .elementor-element-12b9bab6 .elementor-heading-title { will-change: transform; } /* ------------------------------------------------------------------ Qi text-marquee banners (site-wide). 1) Keep Elementor's slight tilt (it looks intentional) — but the tilt exposed the WHITE page body at the ribbon's ends. The site is dark, so give the body the site's dark colour; the tilt sliver then reads as the background instead of a white cut-off. 2) Fix the loop gap: Qi stacks its 2nd copy on top of the 1st. Put both copies in-flow side by side and scroll exactly -50% -> seamless. ------------------------------------------------------------------- */ body { background-color: #252525 !important; } .qodef-qi-text-marquee .qodef-m-text { animation: none !important; transform: none !important; position: static !important; } .qodef-qi-text-marquee .qodef-m-content { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; animation: aw-marquee-x 30s linear infinite !important; } @keyframes aw-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------------ "Trusted by" client-logo carousel (ElementsKit client slider). The logos were stretched to a fixed box (object-fit:fill). Normalise to a clean, evenly-sized strip: consistent height, no distortion, centred, with a subtle hover. Keeps the brand-coral logos on the dark card. ------------------------------------------------------------------- */ .elementskit-clients-slider .elementskit-client-slider-item, .elementskit-clients-slider .swiper-slide-inner, .elementskit-clients-slider .content-image { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; background: transparent !important; } /* each logo in its own rounded tile so they're clearly separated */ .elementskit-clients-slider .single-client { display: flex !important; align-items: center !important; justify-content: center !important; width: 200px !important; max-width: calc(100% - 16px) !important; height: 120px !important; margin: 0 auto !important; padding: 18px 26px !important; box-sizing: border-box !important; background: #383838 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .elementskit-clients-slider .single-client:hover { transform: translateY(-3px); border-color: rgba(255, 111, 97, 0.5) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28) !important; } .elementskit-clients-slider .single-client img, .elementskit-clients-slider .content-image img { width: auto !important; height: auto !important; max-height: 78px !important; max-width: 100% !important; object-fit: contain !important; margin: 0 auto !important; } /* Respect users who prefer no motion, and never leave content stuck hidden */ @media (prefers-reduced-motion: reduce) { .elementor-invisible { opacity: 1 !important; } .elementor .animated { animation: none !important; } }