/* ==========================================================
                    FEATURES SECTION
========================================================== */


.features{

    position:relative;

}





/* ==========================================================
                    FEATURE GRID
========================================================== */


.feature-grid{


    display:grid;


    grid-template-columns:


    repeat(4,1fr);


    gap:25px;


}






/* ==========================================================
                    FEATURE CARD
========================================================== */


.feature-card{


    padding:35px 25px;


    text-align:center;


    position:relative;


    overflow:hidden;


}




.feature-card::before{


    content:"";


    position:absolute;


    width:140px;


    height:140px;


    border-radius:50%;


    background:


    rgba(120,158,255,.15);


    top:-60px;


    right:-60px;


    filter:


    blur(30px);


}





.feature-card:hover{


    transform:


    translateY(-12px);


}







/* ==========================================================
                    FEATURE ICON
========================================================== */


.feature-icon{


    width:70px;


    height:70px;


    margin:


    0 auto 22px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:24px;


    background:


    linear-gradient(

        135deg,

        #d2ddff,

        #ffffff

    );


    color:


    var(--primary);


    font-size:1.7rem;


    box-shadow:


    var(--shadow-sm);


}





.feature-card h3{


    margin-bottom:12px;


    font-size:1.3rem;


}




.feature-card p{


    font-size:.95rem;


}







/* ==========================================================
                    SECTION TITLE
========================================================== */


.section-title{


    text-align:center;


    margin-bottom:60px;


}




.section-title h2{


    font-size:

    clamp(2rem,4vw,3rem);


    margin-bottom:15px;


}





.section-title p{


    max-width:600px;


    margin:auto;


}
/* ==========================================================
                    HOW IT WORKS SECTION
========================================================== */


.how-it-works{

    position:relative;

}





/* ==========================================================
                    STEPS CONTAINER
========================================================== */


.steps{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:25px;


}






/* ==========================================================
                    STEP CARD
========================================================== */


.step{


    text-align:center;


    width:200px;


    padding:30px 20px;


    background:


    rgba(255,255,255,.35);


    backdrop-filter:


    blur(20px);


    border:


    1px solid rgba(255,255,255,.7);


    border-radius:


    30px;


    transition:.4s;


}





.step:hover{


    transform:


    translateY(-12px);


    box-shadow:


    var(--shadow-lg);


}







/* ==========================================================
                    STEP ICON
========================================================== */


.step-circle{


    width:75px;


    height:75px;


    margin:


    0 auto 20px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    background:


    linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );


    color:white;


    font-size:1.6rem;


    box-shadow:


    0 20px 40px rgba(90,131,255,.3);


}





.step h3{


    margin-bottom:10px;


}





.step p{


    font-size:.9rem;


}








/* ==========================================================
                    CONNECTING LINE
========================================================== */


.step-line{


    width:60px;


    height:3px;


    background:


    linear-gradient(

        90deg,

        var(--primary-light),

        var(--primary)

    );


    border-radius:20px;


}





/* ==========================================================
                    FEATURE GLOW BACKGROUND
========================================================== */


.features::before,


.how-it-works::before{


    content:"";


    position:absolute;


    width:300px;


    height:300px;


    border-radius:50%;


    background:


    rgba(120,158,255,.15);


    filter:


    blur(100px);


    z-index:-1;


}
/* ==========================================================
                    RESPONSIVE DESIGN
========================================================== */



@media(max-width:1100px){



    .feature-grid{


        grid-template-columns:


        repeat(2,1fr);


    }




    .steps{


        flex-wrap:wrap;


    }



    .step-line{


        display:none;


    }



}







@media(max-width:700px){



    .feature-grid{


        grid-template-columns:


        1fr;


    }





    .feature-card{


        padding:30px 20px;


    }





    .steps{


        flex-direction:column;


        gap:25px;


    }





    .step{


        width:100%;


        max-width:320px;


    }




    .section-title{


        margin-bottom:40px;


    }




}





/* ==========================================================
                    FEATURE CARD ANIMATION
========================================================== */


.feature-card,


.step{


    animation:


    cardAppear .8s ease forwards;


}





@keyframes cardAppear{


    from{


        opacity:0;


        transform:


        translateY(40px);


    }



    to{


        opacity:1;


        transform:


        translateY(0);


    }



}