body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}

.map-container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 15px auto;
}

.map {
    width: 150%;      /* Keeps the image responsive */
    max-width: 1600px; /* You can set this to a value larger than the current one */
    height: auto;     /* Ensures the image retains its aspect ratio */
}

.point {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.point:hover {
    transform: translate(-50%, -50%) scale(1.2);
    background-color: blue; /* Change to blue on hover */
}