.my-color-box {
    display: flex;
    align-items: center;
}

.my-color-box-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100px; /* Default width */
    height: 100px; /* Default height */
    margin-right: -50px; /* Increased negative margin to overlap more */
    position: relative;
    border-radius: 50px; /* For rounded corners */
    transition: transform 0.3s ease-in-out;
}

.my-color-box-item span {
    writing-mode: vertical-lr; /* Reverse vertical text */
    text-align: center;
    font-weight: bold;
    margin-left: 10px;
    color: #000; /* Text color */
    transform: rotate(180deg);
}

.my-color-box-item:hover {
    transform: translateX(-10px); /* Move left on hover */
}