#map {
    z-index: 0;
    height: 470px;
}
.leaflet-interactive {
    /* fill: #440000; */
    /* stroke: #770000; */
}

.leaflet-tile {
    filter: invert(100%) hue-rotate(180deg) brightness(90%) contrast(85%);
}

.leaflet-container {
    background-color: #121212;
}

.leaflet-control {
    background-color: #1e1e1e;
    color: #ffffff;
}

/* Style for the custom marker */
.custom-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0; /* Start fully transparent */
    animation: fadeIn 1s forwards; /* Fade-in animation */

}

.custom-marker img {
    width: 32px; /* Adjust icon size */
    height: 32px;
}

.custom-marker span {
    margin-top: 5px; /* Space between icon and text */
    font-size: 12px; /* Adjust text size */
    font-weight: bold;
    text-shadow: 2px 2px 4px black;
    color: #FaFafa; /* Text color */
}

/* Keyframes for fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0; /* Fully transparent */
    }
    to {
        opacity: 1; /* Fully visible */
    }
}