.my-hotspot-container { position: relative; display: inline-block; max-width: 100%; }
 .my-hotspot-img { display: block; width: 100%; height: auto; }
 .my-pin {
 position: absolute; width: 30px; height: 30px; border-radius: 50%;
 margin-left: -15px; margin-top: -15px;
 border: 2px solid white; color: white;
 display: flex; align-items: center; justify-content: center;
 font-family: sans-serif; font-weight: bold; cursor: pointer;
 box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s;
 }
 .my-pin:hover { transform: scale(1.1); z-index: 10; }
 .my-tooltip {
 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
 background: white; color: #333; padding: 10px; border-radius: 6px;
 width: 200px; font-size: 14px; opacity: 0; visibility: hidden;
 transition: all 0.2s; pointer-events: none; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
 .my-pin:hover .my-tooltip { opacity: 1; visibility: visible; bottom: 45px; }
 .my-tooltip h5 { margin: 0 0 5px; font-size: 16px; }
 .my-tooltip p { margin: 0; font-size: 13px; color: #666; }