.image-avatar {
    display: inline-block;
    opacity: 0.9;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #fff; /* Adding a white border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding a subtle shadow */
    border-radius: 50%; /* Ensure it's a circle */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
    z-index: 999;
}

.image-avatar:hover {
    transform: scale(2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}


/* This is for img-upload component show box */
.fixed-image-box {
    width: 200px; /* Fixed width */
    height: 200px; /* Fixed height */
    object-fit: cover; /* Ensure the image covers the container */
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}