/* Idle Effect */
.features section::before {
    content: "";
    position: absolute;
    inset: -50%;

    background:
        radial-gradient(circle at 20% 30%,
            rgba(0,217,255,.12),
            transparent 25%),

        radial-gradient(circle at 80% 70%,
            rgba(255,0,255,.08),
            transparent 30%),

        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.04),
            transparent 20%);

    animation: auroraFloat 12s ease-in-out infinite alternate;
}

@keyframes auroraFloat {

    0% {
        transform:
            translate(-3%, -2%)
            rotate(0deg);
    }

    50% {
        transform:
            translate(3%, 2%)
            rotate(180deg);
    }

    100% {
        transform:
            translate(-2%, 3%)
            rotate(360deg);
    }
}




    /* Hover Effect */
    .features section {
    overflow: hidden;
    }

    blockquote:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 0 15px rgba(0,212,255,.5),
        0 0 30px rgba(0,212,255,.3),
        0 0 60px rgba(0,212,255,.2);

    border-color: rgba(0,212,255,.7);
    }

    /*Hover Custom Mobile view*/
	@media screen and (max-width: 736px) {

    .features section {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    blockquote {
        margin: -1em 0 0 0;
        width: 100%;
        box-sizing: border-box;
    }

    }

	/*Hover Custom works if index.html page section one add*/
    .spotlights .inner a h4 {
    color: #fff;
    transition: all .3s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 6px;
    }

    .spotlights .inner a:hover h4 {
    color: #00d4ff;
    text-decoration-color: #00d4ff;
    }