@font-face {
    font-family: "blob";
    src: url("blob.ttf") format("truetype");
}

@keyframes lava-blob-1 {
    0%,
    100% {
        transform: translate3d(20vw, 0, 0) rotate3d(0, 0, 1, 0deg);
    }
    33% {
        transform: translate3d(-20vw, 80vw, 0) rotate3d(0, 0, 1, -60deg);
    }
    67% {
        transform: translate3d(-80vw, 20vw, 0) rotate3d(0, 0, 1, 60deg);
    }
}

@keyframes lava-blob-2 {
    0%,
    100% {
        transform: translate3d(40vw, 10vw, 0) rotate3d(0, 0, 1, 0deg);
    }
    50% {
        transform: translate3d(-80vw, -20vw, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes lava-blob-3 {
    0%,
    100% {
        transform: translate3d(-20vw, 0, 0) rotate3d(0, 0, 1, 0deg);
    }
    33% {
        transform: translate3d(10vw, -80vw, 0) rotate3d(0, 0, 1, -60deg);
    }
    67% {
        transform: translate3d(70vw, -30vw, 0) rotate3d(0, 0, 1, 60deg);
    }
}

@keyframes lava-blob-4 {
    0%,
    100% {
        transform: translate3d(-30vw, 0, 0) rotate3d(0, 0, 1, 0deg);
    }
    50% {
        transform: translate3d(80vw, 50vw, 0) rotate3d(0, 0, 1, 120deg);
    }
}

.elementor-widget-lava-lamp {
    position: fixed;
    inset: 0;
    z-index: -1;
}

.elementor-widget-lava-lamp .noise {
    position: absolute;
    inset: 0;
    background-image: url("noise.png");
    background-size: 150px 150px;
}

.elementor-widget-lava-lamp .blob {
    position: absolute;
    filter: blur(10px);
    font-family: blob;
    font-size: 50vw;
    line-height: 0;
}

.elementor-widget-lava-lamp .blob:nth-child(1) {
    top: 0;
    right: 0;
    animation: lava-blob-1 0.5s ease infinite;
    color: #d4c41e;
}

.elementor-widget-lava-lamp .blob:nth-child(2) {
    bottom: 0;
    right: 0;
    animation: lava-blob-2 0.35s ease infinite;
    color: #bdcf1e;
}

.elementor-widget-lava-lamp .blob:nth-child(3) {
    bottom: 0;
    left: 0;
    animation: lava-blob-3 0.6s ease infinite;
    color: #2ec4a2;
}

.elementor-widget-lava-lamp .blob:nth-child(4) {
    top: 0;
    left: 0;
    animation: lava-blob-4 0.4s ease infinite;
    color: #22c8d6;
}

.elementor-widget-level-shift {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        var(--angle, 15deg),
        var(--bottom-color, #1a8693) var(--split, 50%),
        var(--top-color, #2099a6) 0
    );
}

.elementor-widget-logos-reveal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    place-items: center;
}

@media (max-width: 768px) {
    .elementor-widget-logos-reveal {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .elementor-widget-logos-reveal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.elementor-widget-logos-reveal .logo-container {
    position: relative;
    max-width: 160px;
}

.elementor-widget-logos-reveal .logo {
    transition: opacity 0.25s ease-in-out;
}

.elementor-widget-logos-reveal .reveal {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.elementor-widget-logos-reveal .logo-container:hover .logo {
    opacity: 0;
}

.elementor-widget-logos-reveal .logo-container:hover .reveal {
    opacity: 1;
}

.elementor-widget-mesh-gradient {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #4e8f96;
    background-image:
        radial-gradient(at 12% 18%, #afbe36 0px, transparent 32%),
        radial-gradient(at 68% 28%, #358b99 0px, transparent 30%),
        radial-gradient(at 18% 58%, #358b99 0px, transparent 28%),
        radial-gradient(at 28% 75%, #c0cb2f 0px, transparent 26%),
        radial-gradient(at 58% 68%, #358b99 0px, transparent 24%),
        radial-gradient(at 46% 44%, #afbe36 0px, transparent 22%),
        linear-gradient(to right, #358b99 0%, #358b99 30%, #6b9e72 58%, #afbe36 88%, #c0cb2f 100%);
    background-size: 300% 300%;
    background-position: 28% 18%;
    /* animation:
        meshFlow 8s cubic-bezier(0.42, 0, 0.58, 1) infinite,
        meshBreath 12s ease-in-out infinite alternate; */
    animation:
        meshFlow 8s cubic-bezier(0.42, 0, 0.58, 1) infinite,
        meshBreath 12s ease-in-out infinite alternate;
}

@keyframes meshFlow {
    0%,
    100% {
        background-position: 28% 18%;
    }
    25% {
        background-position: 78% 22%;
    }
    50% {
        background-position: 48% 52%;
    }
    75% {
        background-position: 18% 72%;
    }
}

@keyframes meshBreath {
    0% {
        background-size: 300% 300%;
    }
    100% {
        background-size: 326% 326%;
    }
}

/* HTML text: class on heading / text widget / wrapper (inherits to children). */
/* Home intro headline below wordmark — set id in Elementor Advanced → CSS ID */
.jloop-contrast-shadow p,
.jloop-contrast-shadow h1,
.jloop-contrast-shadow h2,
.jloop-contrast-shadow h3,
.jloop-contrast-shadow h4,
.jloop-contrast-shadow li,
#jloop-intro-headline {
    text-shadow:
        0 0 1px rgb(0 0 0 / 45%),
        0 1px 2px rgb(0 0 0 / 35%),
        0 2px 10px rgb(0 0 0 / 22%);
}

svg.jloop-contrast-shadow text,
.jloop-contrast-shadow text {
    text-shadow:
        0 0 1px rgb(0 0 0 / 45%),
        0 1px 2px rgb(0 0 0 / 35%),
        0 2px 10px rgb(0 0 0 / 22%);
}

/*
 * Path-outlined SVG (Figma-style <path>, not <text>): text-shadow does nothing.
 * Add class "jloop-contrast-shadow-svg" on the root <svg>. Shadows target #We-are-Copy
 * and #JLOOP_logo_100-03 only so the black <use> under the mark is not re-shadowed.
 */
svg.jloop-contrast-shadow-svg {
    overflow: visible;
}

svg.jloop-contrast-shadow-svg #We-are-Copy,
svg.jloop-contrast-shadow-svg #JLOOP_logo_100-03 {
    filter: drop-shadow(0 0 1px rgb(0 0 0 / 30%)) drop-shadow(0 1px 2px rgb(0 0 0 / 22%))
        drop-shadow(0 2px 8px rgb(0 0 0 / 12%));
}