/*your custom css goes here*/ 

/* Animated Outline Effect for Product Cards */
.hov-animate-outline {
    position: relative;
}

.hov-animate-outline::before, 
.hov-animate-outline::after {
    box-sizing: inherit;
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    z-index: -1 !important;
    transition: color 0.3s;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
}

.hov-animate-outline::before {
    top: 0px;
    left: 0px;
}

.hov-animate-outline::after {
    bottom: 0px;
    right: 0px;
}

.hov-animate-outline:hover::before {
    border-top-color: var(--primary);
    border-right-color: var(--primary);
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

.hov-animate-outline:hover::after {
    border-bottom-color: var(--primary);
    border-left-color: var(--primary);
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

.hov-animate-outline:hover::before, 
.hov-animate-outline:hover::after {
    width: calc(100% - 2px);
    height: 100%;
}