.border-hover {
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
    border: clamp(1px, 0.105vw, 4px) solid transparent;
}

.border-hover span {
    position: absolute;
    background-color: #01658C;
    transition: all 0.3s ease;
    z-index: 1;
}

.border-hover span.top {
    height: clamp(1px, 0.105vw, 4px);
    width: 0%;
    top: 0;
    left: 0;
}

.border-hover span.right {
    height: 0%;
    width: clamp(1px, 0.105vw, 4px);
    top: 0;
    right: 0;
}

.border-hover span.bottom {
    height: clamp(1px, 0.105vw, 4px);
    width: 0%;
    bottom: 0;
    right: 0;
}

.border-hover span.left {
    height: 0%;
    width: clamp(1px, 0.105vw, 4px);
    bottom: 0;
    left: 0;
}

.border-hover:hover span.top {
    width: 100%;
    transition: width 0.25s linear;
}

.border-hover:hover span.right {
    height: 100%;
    transition: height 0.25s linear 0.25s;
}

.border-hover:hover span.bottom {
    width: 100%;
    transition: width 0.25s linear 0.5s;
}

.border-hover:hover span.left {
    height: 100%;
    transition: height 0.25s linear 0.75s;
}

@media (max-width:767px) {
    .border-hover {
        border: clamp(1px, 0.105vw,4px) solid transparent;
    }

    .border-hover span.top {
        height: clamp(1px, 0.105vw,4px);
    }

    .border-hover span.right {
        width: clamp(1px, 0.105vw,4px);
    }

    .border-hover span.bottom {
        height: clamp(1px, 0.105vw,4px);
    }

    .border-hover span.left {
        width: clamp(1px, 0.105vw,4px);
    }
}