/* Work */
.card,
.card-body {
     all: unset;
    padding: 0 !important;
}

.item {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px transparent;
    /* background: linear-gradient(to right, #07AF56, #A1479A, #04A9DF); */
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: box-shadow 0.3s ease; /* Smooth transition for the shadow */
    border: 1px solid #662d8a !important;
}
.item:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
}
.item.odd {
    margin-left: 18px !important;
    border: 1px solid var(--color-primary-1) !important;
}

.item.even {
    margin-right: 18px !important;
} 

.item img {
    width: 99%;
    height: auto;
    border-radius: 50%;
    margin-top: 0px !important;
}

.item.odd {
    transform: translateX(100px); 
}                 
/* Work End */      


.rounded-box {
background: #f1f3f6;
display: inline-block;
padding: 10px;
font-size: 40px;
color: #fff;
text-align: center;
width: 175px;
height: 175px;
border: 1px solid #662d8a;
border-radius: 20px;
-webkit-box-shadow: 2px 2px 20px 0px rgba(20,20,20, 0.3);
-moz-box-shadow: 2px 2px 20px 0px rgba(20,20,20, 0.3);
box-shadow: 2px 2px 20px 0px rgba(20,20,20, 0.3);
opacity: 0.9;
}