.key-features-section{ padding:100px 0; background:#f8fafc; } .features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .feature-card{ background:#fff; padding:40px 30px; text-align:center; border-radius:15px; transition:.4s; } .feature-card:hover{ transform:translateY(-10px); } .feature-card i{ font-size:40px; color:#28a745; margin-bottom:20px; } .features-section-header{ text-align: center; margin-bottom: 70px; } .features-section-header h2{ font-size: 50px; margin: 20px 0; }
.features-section-header{
    animation:fadeDown 1s ease;
}

.feature-card{
    animation:fadeUp 0.8s ease forwards;
    opacity:0;
}

.feature-card:nth-child(1){
    animation-delay:.1s;
}

.feature-card:nth-child(2){
    animation-delay:.3s;
}

.feature-card:nth-child(3){
    animation-delay:.5s;
}

.feature-card:nth-child(4){
    animation-delay:.7s;
}

/* ==========================
   Card Hover Effect
========================== */

.feature-card{
    position:relative;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.feature-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 35px rgba(40,167,69,.15);
}

/* Top Border Animation */

.feature-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:4px;
    background:#28a745;
    transition:.5s;
}

.feature-card:hover::before{
    width:100%;
}

/* ==========================
   Icon Animation
========================== */

.feature-card i{
    display:inline-block;
    animation:floatIcon 3s ease-in-out infinite;
    transition:.4s;
}

.feature-card:hover i{
    transform:scale(1.2) rotate(12deg);
    color:#1e7e34;
}

/* ==========================
   Heading Animation
========================== */

.features-section-header h2{
    animation:textGlow 3s infinite alternate;
}

/* ==========================
   Keyframes
========================== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes floatIcon{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes textGlow{

    from{
        text-shadow:0 0 0 rgba(40,167,69,0);
    }

    to{
        text-shadow:0 0 15px rgba(40,167,69,.25);
    }

}