.india-map{position:relative;max-width:500px;margin:auto}.india-map img{width:100%;display:block}.hotspot{position:absolute;width:40px;height:40px;background:#6c63ff;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADHElEQVR4nO2U20uTcRzGfwxRW7p0E6ul1NyhEOHVUlcYZGvMybSy0WQ2xdRK0AgpGVFidB0EWdlfUBfdlBp5E6nRgWJ124mgRtNU1NLfe373xN5BB7qI4JVF9sD3+vl8n++BkP/6A6G/Xyd4vYc4n2+E93hifHW1yFVUxKjDMbyYn98EQnRkubTg9VrFxsbncmsrlLY2yM3NkPx+iB4PhMpK8HY7FnNzIwuEWJfFnA+FppXubsR7exEPhxHv6YFy5Ajkgwch7tkDobQUXEEBvqSnf1rIzy/SNHYuEHihdHUBfX3ArVvfKn7yJBKJSHV1EJxO8EVFYLOzsWAwRDQbx2e3u1luaVHNfjRX6+xZKMeOQWpogLhzJ3iHA2xODpb0eswwzCFNAGhNzR0V4NSpXwH6+qB0dkI6cOA7QG4u6KpVmGeYIW0A3O5JORiEcvw40N//8wh6e9WFlOrrIWzfDt5qBWswgBoMmC8vj2kCsFhVJUj79kE+fBjxEycQP30a8TNn1EQS8cuNjRDdbghlZeAKC8FmZoKuXYu5qipeE4AvDDMpulzqnOVQCEpHR3L7W1shBwKQvN5k9w4HuLw8UEJAbTbMeTwfNQGY27RpRNi6FeKuXaqZtHcvEolIPl/y/BLmxcXgzOZk90YjaEUFpv3+25oARI3GFs5iAV9SAqG8HMKOHcmqrFRvX+18/Xqwq1ery0e3bMFSbS2i7e0hTQBAiG4mO/sFt24duI0b1UXjbTbwFgu4DRvAmkxgMzJA9XpQux109258amqKJP4H0Upv09Pts2lp06xerz6axKazWVlJY50ONDH74mJQlwuzweD0+6NHtX/HbwoKbFMm0/OlNWvUM1NnbTaDbt4M6nRiyefDVCgUedPebiPLJRCie1da2hLbtm1kyu3GjMuF6P4GxAKB4Xdtbc2axv47TTx4gg8forhy5RpIKjSRaoDxiccqwOXLgysUYGz80YoHePh3AAwMXF2hAPfHUgxwd/Te7KtXr3HhwsXZlABcv3Fz9OnTZzh37vxoSgAuDQ4yQ0PDL8PhMJMSAPKv6Cu3HVNsPBWs9QAAAABJRU5ErkJggg==") no-repeat center;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:.3s}.hotspot::after{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADHElEQVR4nO2U20uTcRzGfwxRW7p0E6ul1NyhEOHVUlcYZGvMybSy0WQ2xdRK0AgpGVFidB0EWdlfUBfdlBp5E6nRgWJ124mgRtNU1NLfe373xN5BB7qI4JVF9sD3+vl8n++BkP/6A6G/Xyd4vYc4n2+E93hifHW1yFVUxKjDMbyYn98EQnRkubTg9VrFxsbncmsrlLY2yM3NkPx+iB4PhMpK8HY7FnNzIwuEWJfFnA+FppXubsR7exEPhxHv6YFy5Ajkgwch7tkDobQUXEEBvqSnf1rIzy/SNHYuEHihdHUBfX3ArVvfKn7yJBKJSHV1EJxO8EVFYLOzsWAwRDQbx2e3u1luaVHNfjRX6+xZKMeOQWpogLhzJ3iHA2xODpb0eswwzCFNAGhNzR0V4NSpXwH6+qB0dkI6cOA7QG4u6KpVmGeYIW0A3O5JORiEcvw40N//8wh6e9WFlOrrIWzfDt5qBWswgBoMmC8vj2kCsFhVJUj79kE+fBjxEycQP30a8TNn1EQS8cuNjRDdbghlZeAKC8FmZoKuXYu5qipeE4AvDDMpulzqnOVQCEpHR3L7W1shBwKQvN5k9w4HuLw8UEJAbTbMeTwfNQGY27RpRNi6FeKuXaqZtHcvEolIPl/y/BLmxcXgzOZk90YjaEUFpv3+25oARI3GFs5iAV9SAqG8HMKOHcmqrFRvX+18/Xqwq1ery0e3bMFSbS2i7e0hTQBAiG4mO/sFt24duI0b1UXjbTbwFgu4DRvAmkxgMzJA9XpQux109258amqKJP4H0Upv09Pts2lp06xerz6axKazWVlJY50ONDH74mJQlwuzweD0+6NHtX/HbwoKbFMm0/OlNWvUM1NnbTaDbt4M6nRiyefDVCgUedPebiPLJRCie1da2hLbtm1kyu3GjMuF6P4GxAKB4Xdtbc2axv47TTx4gg8forhy5RpIKjSRaoDxiccqwOXLgysUYGz80YoHePh3AAwMXF2hAPfHUgxwd/Te7KtXr3HhwsXZlABcv3Fz9OnTZzh37vxoSgAuDQ4yQ0PDL8PhMJMSAPKv6Cu3HVNsPBWs9QAAAABJRU5ErkJggg==") no-repeat center;color:#fff;font-size:20px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hotspot:hover{transform:translate(-50%,-50%) scale(1.1)}.hotspot span{position:absolute;background:#111;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;white-space:nowrap;opacity:0;visibility:hidden;transition:.3s}.hotspot:hover span{opacity:1;visibility:visible}.hotspot.active span{opacity:1;visibility:visible}.hotspot.active{transform:translate(-50%,-50%) scale(1.1)}.hotspot.top span{bottom:50px;left:50%;transform:translateX(-50%)}.hotspot.right span{left:50px;top:50%;transform:translateY(-50%)}.hotspot.left span{right:50px;top:50%;transform:translateY(-50%)}.hotspot.bottom span{top:50px;left:50%;transform:translateX(-50%)}