#map {
    margin: 0px auto 30px auto;
    width: calc(100% - 2px);
    height: 640px;
    border-top: 5px solid #0f9449;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.marker {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
    width: 30px;
    height: 30px;
    padding-bottom: 25px;
    background: no-repeat;
}
  
  .marker > span {
    position: absolute;
    inset: 0;                  /* fill the marker box */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: #1a4d1a;            /* or #fff with text-shadow, your call */
    pointer-events: none;
    /* optional small “optical” nudge because the pin tip pulls the eye down */
    transform: translateY(-15px);
    /* optional: makes 1–2 digit widths consistent */
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
  }