#my-icons-section .robu-popup-myicon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* This centers the items on the main-axis */
    align-items: center; /* This centers the items on the cross-axis */
    cursor: pointer;
    margin-top: -1.9em;
    margin-bottom: -1em;
}

.robu-popup-myicon .robu-my-icon {
    display: flex; /* Make the icon container also a flex container */
    flex-direction: column; /* Stack the image and text on top of each other */
    align-items: center; /* Center-align the flex items (image and text) */
    flex: -1 0 20%; /* Adjust the percentage to control the width of the icons */
    text-align: center;
    margin-bottom: 1rem;
}

/* Ensure that the images and text within the icon container are centered */
.robu-popup-myicon .robu-my-icon img,
.robu-popup-myicon .robu-my-icon .icon-content {
    text-align: center;
    /* You may not need the width, height, and margin styles on the img */
}

/* Ensure that the popups appear in the correct position */
.my-popup {
    position: absolute;
    z-index: 10;
    width: 25%;
    left: 50%; /* Center horizontally relative to the positioned ancestor */
    transform: translateX(-50%); /* Center the popup */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: #fff;
    border-radius: 4px;
    padding: 1.1rem;
    top: 100%; /* Position just below the icon */
}

.my-popup-content {
    position: relative;
}

.my-popup-close {
    position: absolute;
    top: -1.1rem;
    right: -0.5rem;
    cursor: pointer;
    font-size: 1rem;
}

/* You may adjust font size for the text within icons for better alignment */
.robu-popup-myicon .icon-content {
    font-size: 0.7rem;
}

/* Additional responsive styling */
@media (max-width: 768px) {
    .robu-popup-myicon .robu-my-icon {
        flex: 1 0 50%;
    }

    .my-popup {
        width: 80%;
        left: 47% !important;
        margin-top: -1rem;
    }
.robu-services-icons {
    width: 3rem;
}
    /* .robu-one-year-warranty {
        padding-top: 20px;
    } */
}