/* wrapper */
.gradient-border {
    position: relative;
    display: inline-block;
    border-radius: .25rem; /* match your cards */
}

/* card sits above the border */
.gradient-border .card {
    position: relative;
    z-index: 1;
}

/* the gradient “border” pseudo‐element, hidden by default */
.gradient-border::before {
    content: "";
    position: absolute;
    top: -3px; /* border thickness */
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: var(--mdb-border-radius);
    background: linear-gradient(90deg, var(--fastnet-purple) 0%, var(--fastnet-mince) 100%);
    background-size: 300% 300%;
    z-index: 0;
    opacity: 0; /* ← hide by default */
    transition: opacity 0.3s ease, /* fade in quickly */ background-position 1.5s ease; /* animate gradient slide */
}

/* only on hover do we show & animate it */
.gradient-border:hover::before {
    opacity: 1;
    background-position: 100% 0;
}