/*==========================================================
GLOBAL EFFECTS
==========================================================*/

.service-card,
.project-card,
.why-card,
.plan,
.testimonial-card,
.step{

    backdrop-filter:blur(14px);

}

/*==========================================================
GLOW BORDER
==========================================================*/

.service-card::after,
.project-card::after,
.why-card::after,
.plan::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

    linear-gradient(
        135deg,
        transparent,
        rgba(124,58,237,.20),
        transparent);

    opacity:0;

    transition:var(--transition);

    pointer-events:none;

}

.service-card:hover::after,
.project-card:hover::after,
.why-card:hover::after,
.plan:hover::after{

    opacity:1;

}

/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scroll-indicator{

    text-decoration:none;

    cursor:pointer;

    transition:var(--transition);

}

.scroll-indicator:hover{

    transform:
    translateX(-50%)
    translateY(-6px);

}

.scroll-indicator:hover .mouse{

    border-color:#8B5CF6;

}