.opgfe-canvas{
    position:relative;
    width:100%;
    height:700px;
    overflow:visible;
}

.opgfe-item{
    position:absolute;
    padding: var(--opgfe-border-width, 3px);
    background: linear-gradient(var(--opgfe-border-direction, 135deg), var(--opgfe-border-color-1, #ff4fb8), var(--opgfe-border-color-2, #35d5ff));
    transform: translate3d(0, var(--opgfe-parallax-y, 0px), 0) rotate(var(--opgfe-rotation, 0deg)) scale(var(--opgfe-scale, 1));
    will-change: transform;
    transition: transform .25s ease;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.opgfe-hover-scale-enabled .opgfe-item:hover{
    --opgfe-scale: var(--opgfe-hover-scale, 1.04);
}

.opgfe-item img{
    width:100%;
    display:block;
    object-fit:cover;
    aspect-ratio:1/1;
    border:0 !important;
    background:transparent !important;
}

.opgfe-shape-circle,
.opgfe-shape-circle img{
    border-radius:999px;
}

.opgfe-shape-square,
.opgfe-shape-square img{
    border-radius:24px;
}

@media(max-width:1024px){

    .opgfe-mobile-stack{
        display:flex;
        flex-direction:column;
        height:auto !important;
        gap:24px;
    }

    .opgfe-mobile-stack .opgfe-item{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        transform:none !important;
    }

    .opgfe-mobile-stack .opgfe-item img{
        max-width:100%;
    }
}


/* v2.0.1 overflow support */
.opgfe-canvas.opgfe-overflow-visible {
    overflow: visible !important;
}

.elementor-widget-opgfe_freeform_gallery,
.elementor-widget-opgfe_freeform_gallery .elementor-widget-container {
    overflow: visible !important;
}


/* v2.0.3 clean gradient ring fix */
.opgfe-item {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.opgfe-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        var(--opgfe-border-direction, 135deg),
        var(--opgfe-border-color-1, #ff4fb8),
        var(--opgfe-border-color-2, #35d5ff)
    );
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    pointer-events: none;
}

.opgfe-item img {
    position: relative;
    z-index: 1;
    width: calc(100% - (var(--opgfe-border-width, 3px) * 2)) !important;
    height: auto;
    margin: var(--opgfe-border-width, 3px) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    display: block;
}

.opgfe-shape-circle {
    border-radius: 999px;
}

.opgfe-shape-circle::before {
    border-radius: 999px;
}

.opgfe-shape-circle img {
    border-radius: 999px;
    clip-path: circle(50% at 50% 50%);
}

.opgfe-shape-square {
    border-radius: 24px;
}

.opgfe-shape-square::before {
    border-radius: 24px;
}

.opgfe-shape-square img {
    border-radius: calc(24px - var(--opgfe-border-width, 3px));
}


/* v2.0.5 safe border toggle */
.opgfe-item.opgfe-no-border::before {
    content: none !important;
    display: none !important;
}

.opgfe-item.opgfe-no-border,
.opgfe-item.opgfe-no-border img {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.opgfe-item.opgfe-no-border img {
    width: 100% !important;
    margin: 0 !important;
}


/* v2.0.6 separate gradient border architecture
   The image itself has no border, margin, or padding.
   The gradient ring is a separate layer outside/behind the image. */
.opgfe-item {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.opgfe-item img {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    display: block;
}

/* draw gradient as independent layer */
.opgfe-item.opgfe-has-border::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    inset: calc(var(--opgfe-border-width, 3px) * -1);
    background: linear-gradient(
        var(--opgfe-border-direction, 135deg),
        var(--opgfe-border-color-1, #ff4fb8),
        var(--opgfe-border-color-2, #35d5ff)
    );
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

/* no-border state removes only the design layer */
.opgfe-item.opgfe-no-border::before {
    content: none !important;
    display: none !important;
}

/* shape clipping */
.opgfe-shape-circle,
.opgfe-shape-circle::before,
.opgfe-shape-circle img {
    border-radius: 999px !important;
}

.opgfe-shape-circle img {
    clip-path: circle(50% at 50% 50%);
}

.opgfe-shape-square,
.opgfe-shape-square::before {
    border-radius: 24px !important;
}

.opgfe-shape-square img {
    border-radius: 24px !important;
}


/* v2.0.7 restored parallax transform stack */
.opgfe-item {
    --opgfe-parallax-y: 0px;
    --opgfe-scale: 1;
    transform:
        translate3d(0, var(--opgfe-parallax-y), 0)
        rotate(var(--opgfe-rotation, 0deg))
        scale(var(--opgfe-scale, 1)) !important;
    transform-origin: center center;
    will-change: transform;
}

.opgfe-hover-scale-enabled .opgfe-item:hover {
    --opgfe-scale: var(--opgfe-hover-scale, 1.04);
}