/* ===================================
   Services Card Professional Animation
=================================== */


.services .service-item {

    background-color: var(--card-color);

    border-radius: 20px;

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,.2);


    transition:

    transform .5s cubic-bezier(.25,.8,.25,1),

    box-shadow .5s ease,

    filter .5s ease;

}



.services .service-item::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 80%;

    height: 100%;


    background: linear-gradient(

        120deg,

        transparent,

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

        transparent

    );


    transition: .8s ease;

}



.services .service-item::after {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;


    background: var(--icon-bg-color);


    transition:.5s ease;

}



.services .service-item:hover {


    transform:

    translateY(-15px)

    scale(1.03);


    filter:

    saturate(1.25);


    box-shadow:

    0 25px 50px rgba(0,0,0,.18);

}



/* نور متحرک */

.services .service-item:hover::before {

    left:120%;

}



/* خط رنگی */

.services .service-item:hover::after {

    width:100%;

}


.services .service-item .icon {


    transition:

    transform .5s ease;


    animation:

    floatingIcon 4s ease-in-out infinite;

}




/* حرکت آرام آیکون */


@keyframes floatingIcon {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-8px);

    }


    100% {

        transform:translateY(0);

    }

}




/* هاور آیکون */


.services .service-item:hover .icon {


    transform:

    scale(1.15)

    rotate(5deg);

}



.services .service-item .icon svg path {


    fill: var(--icon-bg-color);


    transition:

    filter .4s ease,

    transform .4s ease;

}




.services .service-item:hover .icon svg path {


    filter:

    brightness(.85)

    saturate(1.5);

}




.services .service-item .icon i {


    color: var(--icon-color);


    transition:


    transform .4s ease,

    filter .4s ease;

}




.services .service-item:hover .icon i {


    transform:

    scale(1.2);


    filter:


    brightness(.85)

    saturate(1.5);


}



.services .service-item h3 {


    transition:

    transform .3s ease,

    color .3s ease;

}




.services .service-item:hover h3 {


    transform:

    translateX(5px);

}




@media (max-width:768px){


.services .service-item:hover {


    transform:

    translateY(-8px)

    scale(1.01);


}


}