.fv-demo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:35px;
}

.fv-before,
.fv-after{
    position:relative;
    width:280px;
}

.fv-before img,
.fv-after img{

    width:100%;
    display:block;
    border-radius:24px;

    transition:
        opacity .45s ease,
        transform .45s ease,
        filter .35s ease;

}

.fv-before img{

    box-shadow:0 20px 45px rgba(0,0,0,.14);

}

.fv-after img{

    box-shadow:0 25px 60px rgba(37,99,235,.22);

}

.processing{

    filter:blur(5px);

}

.fv-label{

    position:absolute;

    top:15px;

    left:15px;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    color:#fff;

    background:rgba(15,23,42,.82);

}

.fv-label-blue{

    background:#2563EB;

}

.fv-arrow{

    font-size:44px;

    animation:pulseAI 2s infinite;

}

.fv-arrow.processing{

    animation:rotateAI .8s linear;

}

.fv-style{

    margin-top:22px;

    text-align:center;

}

.fv-style span{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#2563EB;

    color:#fff;

    font-weight:700;

}

.fv-loading{

    margin-top:16px;

    text-align:center;

    color:#2563EB;

    font-weight:600;

    opacity:0;

    transition:.35s;

}

@keyframes pulseAI{

0%{transform:scale(1);}
50%{transform:scale(1.15);}
100%{transform:scale(1);}

}

@keyframes rotateAI{

0%{
transform:rotate(0deg) scale(1);
}

50%{
transform:rotate(180deg) scale(1.35);
}

100%{
transform:rotate(360deg) scale(1);
}

}