.map-container {
            position: relative;
            width: 100%;
            max-width: 600px; /* Adjust based on your image */
            margin: auto;
        }

        .map-container img {
            width: 100%;
            height: auto;
            filter: grayscale(100%);
        }

        .marker {
            position: absolute;
            width: 5px;
            height: 5px;
            background: red;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .marker:hover {
            transform: scale(1.3);
        }

        .location-list {
            padding: 20px;
        }

        .location-item {
            cursor: pointer;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background 0.3s ease;
        }

        .location-item:hover {
            background: #f8f9fa;
        }
        .flag {
            width: 10%;
            height: auto;
            border-radius: 50%;
        }