.custom-marker {
    position: relative;
    width: 50px; 
    height: 50px; 
    cursor: pointer;
}

.custom-marker .arrow {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 20px; 
    height: 20px; 
    background-color: #010000; 
    border-radius: 50% 50% 0 0; 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); 
}

.custom-marker .marker-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    overflow: hidden; 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); 
}

.custom-marker:hover .marker-img {
    transform: translate(-50%, -50%) scale(1.2); 
}

.map-container {
    width: 80%; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.map-container {
    width: 80%; 
    max-width: 1200px; 
    height: 80vh; 
    margin: 20px auto;
    border: 2px solid #ccc; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}