.tooltip-container { position: relative; display: inline-block; }
    .tooltip-icon-box { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #f1f1f1; border-radius: 50%; }
    .tooltip-icon { width: 26px; height: 26px; }
    .tooltip { position: absolute; top: 50%; left: 110%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.8); color: #fff; padding: 6px 12px; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
    .tooltip-container:hover .tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(5px); }
	.tooltip-icon svg {
    fill: #fff; /* رنگ سیاه به صورت پیش‌فرض */
    transition: fill 0.3s ease;
}

.tooltip-container:hover .tooltip-icon svg {
    fill: #ff0000; /* رنگ قرمز هنگام هاور */
}
/* استایل برای ظاهر شدن تولتیپ */
.tooltip-container {
    position: relative;
    display: inline-block;
}

/* استایل آیکن */
.tooltip-icon-box {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f1f1f1;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن برای چرخش و سایه */
}

/* انیمیشن چرخش و براق شدن */
@keyframes rotate-shine {
    0% {
        transform: rotate(0deg); /* شروع از صفر درجه */
        box-shadow: 0 0 0 rgba(255, 255, 255, 0); /* سایه بدون تغییر */
    }
    50% {
        transform: rotate(20deg); /* چرخش کمی به سمت 20 درجه */
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); /* سایه براق */
    }
    100% {
        transform: rotate(-10deg); /* چرخش کمی به سمت -10 درجه */
        box-shadow: 0 0 0 rgba(255, 255, 255, 0); /* سایه محو می‌شود */
    }
}

/* انیمیشن چرخش و براق بودن هنگام هاور */
.tooltip-container:hover .tooltip-icon-box {
    animation: rotate-shine 0.5s ease-in-out; /* انیمیشن چرخش و براق شدن */
}

/* استایل تولتیپ */
.tooltip {
    position: absolute;
    top: 50%;
    left: 110%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0; /* تولتیپ مخفی به طور پیش‌فرض */
    visibility: hidden; /* تولتیپ مخفی به طور پیش‌فرض */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.tooltip {
    background: #fff;
    color: #3a444e;
    box-shadow: 0px 2px 33px -2px #00000017;
    font-size: 13px;
    font-weight: 400;
}

.tooltip-icon-box.tooltip_icon_1 {
    background: #FFB101;
}
.tooltip-icon-box.tooltip_icon_2 {
    background: #47a9f7;
}
.tooltip-icon-box.tooltip_icon_3 {
    background: #424242;
}
.tooltip-icon-box.tooltip_icon_4 {
    background: #3f51b5;
}
.tooltip-icon-box.tooltip_icon_5 {
    background: #49cd72;
}
.tooltip-icon-box.tooltip_icon_6 {
    background: #e33030;
}
.tooltip-icon-box.tooltip_icon_7 {
    background: #7f37ef;
}

@media only screen and (max-width: 1024px) {
    .tooltip-container {
        position: relative;
    }
    
    .tooltip-icon-box {
        position: relative;
    }

    .tooltip {
        top: -20px; /* فاصله از بالای آیکون */
        left: -20px;
        transform: translateY(-100%); /* تولتیپ رو به بالا جابجا می‌کنه */
        display: block;
        width: auto;
    }
    
    .tooltip-icon-box .tooltip-icon {
        /* اگر می‌خواهید تغییرات اضافی برای آیکون اعمال کنید، می‌توانید اینجا اضافه کنید */
    }
}