/* ==========================================================
                    EARN CASH GLASS CARDS
========================================================== */





/* ==========================================================
                    GENERAL CARD SYSTEM
========================================================== */


.card,
.feature-card,
.mini-card,
.balance-card,
.progress-card,
.bottom-card{


    position:relative;


    overflow:hidden;


    transform-style:preserve-3d;


}





/* ==========================================================
                    GLASS CARD HIGHLIGHT
========================================================== */


.card::before,
.feature-card::before,
.mini-card::before,
.balance-card::before,
.progress-card::before,
.bottom-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:100%;


    background:


    linear-gradient(

        135deg,

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

        transparent

    );


    pointer-events:none;


}





/* ==========================================================
                    MINI DASHBOARD CARDS
========================================================== */


.mini-card{


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    min-height:150px;


    cursor:pointer;


}





.mini-card:hover{


    transform:


    translateY(-12px)

    rotateX(5deg);


}





.mini-card h4{


    font-size:1.5rem;


    margin-bottom:8px;


}





.mini-card span{


    color:


    var(--text-light);


}






/* ==========================================================
                    BALANCE CARD
========================================================== */


.balance-card{


    position:relative;


}



.balance-card::after{


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    border-radius:50%;


    background:


    var(--glow-pink);


    filter:


    blur(40px);


    right:-40px;


    bottom:-40px;


}
/* ==========================================================
                    FEATURE CARD ENHANCEMENTS
========================================================== */


.feature-card{


    cursor:pointer;


    transition:


    transform .4s ease,

    box-shadow .4s ease;


}





.feature-card:hover{


    transform:


    translateY(-15px)

    scale(1.03);


    box-shadow:


    0 35px 90px rgba(90,131,255,.22);


}





.feature-icon{


    transition:.4s;


}





.feature-card:hover .feature-icon{


    transform:


    rotateY(180deg);


}






/* ==========================================================
                    CTA GLASS BOX
========================================================== */


.cta-box{


    padding:60px 40px;


    text-align:center;


    border-radius:


    45px;


    position:relative;


    overflow:hidden;


}




.cta-box::before{


    content:"";


    position:absolute;


    width:250px;


    height:250px;


    border-radius:50%;


    background:


    rgba(105,144,255,.2);


    filter:


    blur(80px);


    top:-100px;


    right:-80px;


}







.cta-box h2{


    position:relative;


    font-size:


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


}





.cta-box p{


    position:relative;


    margin:20px auto;


    max-width:600px;


}







.cta-buttons{


    position:relative;


    display:flex;


    justify-content:center;


    gap:20px;


    margin-top:30px;


}








/* ==========================================================
                    TILT EFFECT
========================================================== */


.tilt-hover{


    transform-style:


    preserve-3d;


    transition:


    transform .2s ease;


}







/* ==========================================================
                    MOBILE CARDS
========================================================== */



@media(max-width:700px){



    .cta-box{


        padding:


        40px 20px;


    }





    .cta-buttons{


        flex-direction:


        column;


    }





    .cta-buttons .btn{


        width:100%;


    }



}