@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-18px)
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 40px rgba(0, 212, 255, .28)
    }

    50% {
        box-shadow: 0 0 90px rgba(0, 212, 255, .55)
    }
}

.core-cube {
    animation: pulseGlow 3.2s ease-in-out infinite
}

.particles:before,
.particles:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 212, 255, .18);
    filter: blur(18px);
    animation: float 7s ease-in-out infinite
}

.particles:before {
    width: 160px;
    height: 160px;
    left: 8%;
    top: 22%
}

.particles:after {
    width: 210px;
    height: 210px;
    right: 10%;
    bottom: 16%;
    animation-delay: -2s
}

.service-card,
.feature-card,
.price-card,
.blog-card,
.job-card {
    will-change: transform
}

.service-card:hover .card-icon,
.feature-card:hover .icon {
    animation: pulseGlow 1.8s ease-in-out infinite
}