@property --d {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

.service-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    height: 100%;
    background: none;
    border: none;
    border-radius: 20px;
    padding: 2.5rem 1rem;
    text-align: center;
    /* transition: all 0.4s ease; */
    position: relative;
    z-index: 0;
    transition: .3s;
}

.service-card:before {
    content: "";
    position: absolute;
    inset: -3px;
    padding: 3px;
    border-radius: 23px;
    background: conic-gradient(from var(--d,0deg),
        #ff6b00,
        #0000 30deg 120deg,
        #4a90d9 150deg 180deg,
        #0000 210deg 300deg,
        #ff6b00 330deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: intersect;
    -webkit-mask-composite: xor;
}

.service-card:after {
    content: "";
    position: absolute;
    inset: -20px;
    background:
        radial-gradient(60px at left  120px top    100px, rgba(255,107,0,0.6) 98%, #0000),
        radial-gradient(60px at right 120px bottom 100px, rgba(74,144,217,0.6) 98%, #0000);
    filter: blur(60px);
    opacity: .5;
}

.service-card:before,
.service-card:after {
    transition: .5s, 99999s 99999s transform, 99999s 99999s --d;
}

.service-card:hover {
    box-shadow: 0 0 0 1px #666;
}


.service-card:hover:after {
    transform: rotate(3600deg);
    transition: .5s, 60s linear transform;
}

.service-card:hover:before {
    --d: 3600deg;
    transition: .5s, 60s linear --d;
}

.service-card:hover:before {
    background-color: #222;
}