

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 24px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 50%;
}
.arrow.left { left: 10px; }
.arrow.right { right: 10px; }


.slider-item-column {
    display: block;
    flex-direction: column;
    align-items: center;      /* centers children horizontally */
    justify-content: flex-start;
    text-align: center;
    padding: 12px;
    width: auto;             /* width of the whole card */
    /*background: white;*/
    border-radius: 10px;
    /*box-shadow: 0 6px 18px rgba(0,0,0,0.06);*/
    box-sizing: border-box;
}


.slider-item-avatar-wrap {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 4px solid #e53935;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
    background: #fff;

}

/* the image inside the box */
.slider-item-avatar {
    /* use a little inner margin so ring is visible */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;  /* keep image circular */
    display: block;
}

/* texts */
.slider-item-texts { margin-top: 10px; display:flex; flex-direction:column; gap:4px; width:100%; }
.slider-item-title { font-weight:700; font-size:15px; }
.slider-item-subtitle { font-size:13px; opacity:0.9; }
.slider-item-meta { font-size:12px; color:#666; }

/* ---- Fallback force-centering if something overrides alignment ---- */
.force-center .slider-item-avatar-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}