.card-gradiant {
    position: relative;
    border-radius: 10px;
    background-color: #fff; /* Solid background */
    border: 1px solid darkblue;
    color: #D2D4E3;
    display: flex;
    height: 100%;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    cursor: pointer;
}

/* Gradient border effect */
.card-gradiant::before,
.card-gradiant::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    transition: transform 0.5s ease-in-out;
}

/* Horizontal border (top & bottom) */
.card-gradiant::before {
    border-top: 1px solid #6477b9;
    border-bottom: 1px solid #6477b9;
    transform: scaleX(0);
}

/* Vertical border (left & right) */
.card-gradiant::after {
    border-left: 1px solid #6477b9;
    border-right: 1px solid #6477b9;
    transform: scaleY(0);
}

/* Hover Effect */
.card-gradiant:hover::before {
    transform: scaleX(1);
}

.card-gradiant:hover::after {
    transform: scaleY(1);
}