/*********************
START: SERVICES
*********************/
/* public */
.services {
    padding-block: 170px;
}

.darkTheme .services--title,
.darkTheme .services--text {
    color: var(--white-color);
}

.lightTheme .services--title,
.lightTheme .services--text {
    color: var(--gray-scale-1);
}

.services .card,
.services .card :is(i, .card-title, .card-text) {
    transition: all 0.3s;
}

.services .card:hover {
    background: var(--primary-color) !important;
}

/* public */
/*********************
END: SERVICES
*********************/


/*********************
START: SERVICES => V1
*********************/
.services--V1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.services--V1 ul.services--cards .card {
    background: rgba(2, 2, 41, 0.30);
    backdrop-filter: blur(62px);
}


/*********************
END: SERVICES => V1
*********************/

/*********************
START: SERVICES => V2  
*********************/

.services--V2{
    background: var(--bg-dark);
}

.services--V2 .card{
    background: var(--gray-scale-1);
    border-radius: 24px 24px 0px 0px;
    border: 1px solid red;

}

.services--V2 .swiper {
    width: 100%;
    height: 100%;
}



/*********************
END: SERVICES => V2
*********************/


/*********************
START: SERVICES => V3
*********************/
.services--V3 ul.services--cards .card{
    background: var(--bg-card);
}
.darkTheme .services--V3 ul.services--cards .card{
    background: var(--gray-scale-1);
}
.services--V3 ul.services--cards .card :is(.card-title, .card-text){
    color: var(--gray-scale-1);
}
.darkTheme .services--V3 ul.services--cards .card :is(.card-title, .card-text){
    color: var(--white-color);
}
.services--V3 ul.services--cards .card:hover :is(.card-title, .card-text){
    color: var(--white-color) !important;
}

.services--V3 ul.services--cards .card i{
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 4px;
    width: 40px;
    height: 40px;
}

.services--V3 ul.services--cards .card:hover i{
    background-color: var(--white-color);
    color: var(--primary-color);
}
/*********************
END: SERVICES => V3
*********************/