.map-dot {

    transform: translate(-50%, -50%);

}



.dot {

    position: relative;

    display: inline-block;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: red;

    transition: background-color 0.3s ease;

}



.dot::after {

    content: '';

    position: absolute;

    bottom: -8px;

    left: 50%;

    transform: translateX(-50%);

    width: 2px;

    height: 8px;

    background-color: black;

}



.map-dot:hover .dot {

    background-color: blue;

}