.hot-spot {position: absolute;cursor: pointer;}
  
.hot-spot .circle {width: 22px; height: 22px; border: 1px solid #ffffff; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); z-index: 2; display: flex; align-items: center; justify-content: center; animation: flicker 1.5s infinite alternate; background: hsl(357.93deg 79.82% 42.75%); cursor: pointer;}

.hot-spot .circle i {color: #ffffff;}
.hot-spot .tooltip-div > .row .text-row > strong{font-size: 14px;color: var(--black-color);}
.hot-spot a.btn.btn-primary {width: 104px;font-size: 10px; padding: 6px;margin: 0 auto;}

.hot-spot .tooltip-div {
display: none;
position: absolute;
top: -10px;
left: 20px;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
min-width: 200px;
max-width: 300px;
z-index: 999;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border-radius: 6px;
white-space: normal;
}

/* Ficker effect on the circle */
@keyframes flicker {
0% {
  opacity: 0.5;
}
50% {
  opacity: 1;
}
100% {
  opacity: 0.5;
}
}