.benefits-section{
    padding:100px 0;
    background:#ffffff;
}

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.benefit-box{
    padding:35px;
    border-left:5px solid #28a745;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    background:#fff;
}
/* ==========================
   Benefits Animation
========================== */

.benefit-box{
    position:relative;
    overflow:hidden;
    transition:.4s ease;
    animation:fadeUp .8s ease forwards;
    opacity:0;
}

/* Stagger Animation */

.benefit-box:nth-child(1){
    animation-delay:.1s;
}

.benefit-box:nth-child(2){
    animation-delay:.3s;
}

.benefit-box:nth-child(3){
    animation-delay:.5s;
}

.benefit-box:nth-child(4){
    animation-delay:.7s;
}

.benefit-box:nth-child(5){
    animation-delay:.9s;
}

.benefit-box:nth-child(6){
    animation-delay:1.1s;
}

/* Hover Effect */

.benefit-box:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 40px rgba(40,167,69,.15);
}

/* Animated Green Line */

.benefit-box::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    background:rgba(40,167,69,.05);
    transition:.5s;
}

.benefit-box:hover::before{
    width:100%;
}

/* Left Border Glow */

.benefit-box:hover{
    border-left-color:#1e7e34;
}

/* Heading Animation */

.benefit-box h4{
    transition:.4s;
}

.benefit-box:hover h4{
    color:#28a745;
}

/* Icon Animation (if icon exists) */

.benefit-box i{
    transition:.4s;
    display:inline-block;
}

.benefit-box:hover i{
    transform:translateY(-5px) scale(1.15);
    color:#28a745;
}

/* ==========================
   Keyframes
========================== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
.benefits-section .section-header{
    text-align:center;
    margin-bottom:70px;
    animation:fadeDown 1s ease;
}

.benefits-section .section-header h2{
    color:#222;
}

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}