.service-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    row-gap: 1.5rem;
    box-shadow: 18.61px 12.41px 62.05px 0px #0000001A;
    margin: unset !important;
    text-decoration: none;
    overflow: hidden;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleY(-1);
    opacity: 0.1;
    z-index: 0;
}

.service-card > * {
    position: relative;
    z-index: 1;
}

.service-card .icon {
    background: var(--wb-theme-secondary);
    padding: 1rem;
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    transition: all 0.3s all;
}
.service-card .icon svg path:not(.fixed-color) {
    fill: var(--wb-theme-primary);
    transition: all 0.3s all;
}
.service-card .icon i {
    color: white;
    font-size: 1.5rem;
    transition: all 0.3s all;
}
.service-card .name {
    font-weight: bold;
    transition: all 0.3s all;
}
.service-card:hover {
    background: var(--wb-theme-primary);
}
.service-card:hover .icon {
    background: color-mix(in srgb, var(--wb-theme-primary) 70%, white 30%);
}
.service-card:hover .icon svg path:not(.fixed-color) {
    fill: var(--white-1);
}
.service-card:hover .icon i {
    color: var(--white-1);
}
.service-card:hover .icon svg path.fixed-color {
    fill: color-mix(in srgb, var(--wb-theme-primary) 70%, white 30%);
}
.service-card:hover .name {
    color: var(--white-1);
}