/* ===== RUNNING BORDER ANIMATION ===== */

.custom-hover-card {
    position: relative;
    overflow: hidden;
}

/* Base border lines */
.custom-hover-card span[class^="border-run"] {
    position: absolute;
    background: #1a8cff;
    z-index: 30;
    opacity: 0;
    transition: all 0.35s ease;
}

/* Top */
.custom-hover-card .border-run-top {
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
}

/* Right */
.custom-hover-card .border-run-right {
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
}

/* Bottom */
.custom-hover-card .border-run-bottom {
    bottom: 0;
    right: 0;
    height: 2px;
    width: 0;
}

/* Left */
.custom-hover-card .border-run-left {
    bottom: 0;
    left: 0;
    width: 2px;
    height: 0;
}

/* Hover Animation */
.custom-hover-card:hover .border-run-top {
    width: 100%;
    opacity: 1;
}

.custom-hover-card:hover .border-run-right {
    height: 100%;
    opacity: 1;
    transition-delay: .1s;
}

.custom-hover-card:hover .border-run-bottom {
    width: 100%;
    opacity: 1;
    transition-delay: .2s;
}

.custom-hover-card:hover .border-run-left {
    height: 100%;
    opacity: 1;
    transition-delay: .3s;
}