.lf-process {
    position: relative;
    background-color: #fafafa;
}

.lf-process .lf-process-each {
    max-width: 275px;
    margin: auto;
    display: block;
    position: relative;
}


.lf-process .lf-process-each:not(.mb-none) {
    margin-bottom: 60px;
}

.lf-process .lf-process-each p {
    margin-bottom: 32px;
}

.lf-process .lf-process-img {
    margin-bottom: 24px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #0f407e;
    transition: .7s;
    max-width: 220px;
    margin: auto;
}

.lf-process .lf-process-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lf-process .lf-process-each h3 {
    margin-bottom: 24px;
    color: #212121;
}

.lf-process .lf-process-each .btn-primary {
    margin: 0;
    transition: .7s;
    background-color: #0f407e;
    border-color: #0f407e;
}

.lf-process .lf-process-each:hover .lf-process-img {
    border: 4px solid #C82027;
}

.lf-process .lf-process-each:hover .btn-primary {
    border-color: #C82027;
    background: #C82027;
}

@media (min-width: 992px) {
    .lf-process .lf-process-each {
        margin: 0;
    }

    .lf-process .lf-process-each.centered {
        margin: 0 auto;
    }

    .lf-process .lf-process-each .lf-process-arrow {
        position: absolute;
        left: 90%;
        top: 20%;
        width: 0%;
        max-width: fit-content;
        overflow: hidden;
        z-index: 0;
        animation: growAnimation 8s infinite linear;
        animation-delay: var(--delay);
    }

    .lf-process .lf-process-each .lf-process-arrow::before {
        content: url('data:image/svg+xml,<svg width="200" height="20" viewBox="0 0 231 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="16" y1="9.9126" x2="216" y2="9.9126" stroke="%230f407e" stroke-dasharray="4 4"/><path d="M230.092 9.87538L216.043 18.3208L215.754 1.93077L230.092 9.87538Z" fill="%230f407e"/><circle cx="8.5" cy="9.9126" r="7" stroke="%230f407e" stroke-width="3"/></svg>');
        overflow: hidden;
    }


    .lf-process .lf-process-each.right {
        margin-left: auto;
    }

}


@keyframes growAnimation {
    0% {
        width: 0%;
        transform: translateX(0px)
    }

    50% {
        width: 100%;
        transform: translateX(10px);
    }

    100% {
        width: 0%;
        transform: translateX(0px)
    }
}




.tsr-moving-dot-parent {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.tsr-moving-dot {
    position: absolute;
    width: 136px;
    height: 180px;
    -webkit-animation: bounce-yy 8s infinite linear;
    animation: bounce-yy 8s infinite linear;
    z-index: 2;
}

.tsr-moving-dot::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: url("../images/lf-process-dots.png");
}

.tsr-moving-dot.horizontal::before {
    transform: rotate(90deg);
}

@-webkit-keyframes bounce-yy {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bounce-yy {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@media (min-width: 992px) {
    .tsr-moving-dot-parent {
        opacity: 1;
    }

}