.swiperProject{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: url('images/logo.png');
}

.card-list .card-item{
    color: #fff;
    width: 200px;
    padding: 35px;
    margin: 5px;
     flex-direction: column;
    display: flex;
    background: rgb(255, 255, 255,0.2);
    border: 1px solid rgba(22, 64, 163, 0.5);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
}

.card-list .card-item .user-image{
    width:150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 25px;
    border: 3 solid #ffffff;
    padding: 4px;

}
.card-list .card-item .user-profession{
font-size: 1.15rem;
color: rgb(44, 87, 124);
font-weight: 500;
margin: 14px 0 20 ;
padding-bottom: 10px;

}

.card-list .card-item .message-button{
font-size: 1rem;
padding: 5px 30px;
color: rgb(28, 28, 126);
border-radius: 6px;
font-weight: 500;
cursor: pointer;

background: #e6e6eb;
border: 1px  solid  transparent ;
transition: 0.2s ease ;
}
.card-list .card-item .message-button:hover{
    background-color: rgb(19, 11, 134);
    border:  1px solid #fff;
    color: rgb(229, 234, 238);
}
     /* تخصيص العنصر النشط داخل Swiper */
     .swiper-slide-active .card-inner {
        transform: scale(1.05); /* تكبير العنصر */
        transform-origin: center center; /* جعل التكبير من المنتصف */
        background-color: #f3f4f6; /* تغيير لون الخلفية عند التفعيل */
        border-color: #4f46e5; /* تغيير لون الإطار */
        box-shadow: 0 10px 25px #3D90D7; /* تغيير الظل */
        z-index: 10; /* رفع العنصر للأعلى */
    }

    /* زيادة المسافة بين العناصر عند التكبير */
    .swiper-slide {
        overflow: visible; /* السماح بظهور العناصر المكبرة */
    }