                        <div class="page-header">
                            <div>
                                <h1>Maps</h1>
                                <p class="subtitle">Interactive Leaflet maps with regional revenue markers.</p>
                            </div>
                        </div>

                        <div class="row row-tight">
                            <div class="col-md-12">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Global revenue distribution</h2>
                                            <p class="m-card__subtitle">Top markets by revenue this quarter.</p>
                                        </div>
                                        <div class="user-data filters">
                                            <div class="select-wrapper">
                                                <select class="form-select" name="property" aria-label="Filter properties">
                                                    <option selected>All properties</option>
                                                    <option>Products</option>
                                                    <option>Services</option>
                                                </select>
                                            </div>
                                            <div class="select-wrapper">
                                                <select class="form-select" name="time" aria-label="Filter by time">
                                                    <option selected>All time</option>
                                                    <option>By month</option>
                                                    <option>By day</option>
                                                </select>
                                            </div>
                                        </div>
                                    </header>
                                    <div id="vmap" style="height: 380px; border-radius: 8px; overflow: hidden;"></div>
                                </section>
                            </div>
                        </div>

                        <div class="row row-tight" style="margin-top: 16px;">
                            <div class="col-md-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Europe</h2>
                                            <p class="m-card__subtitle">Major markets across the EU and UK.</p>
                                        </div>
                                    </header>
                                    <div class="vmap" id="vmap1" style="height: 280px; border-radius: 8px; overflow: hidden;"></div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">United States</h2>
                                            <p class="m-card__subtitle">Top metro areas by revenue.</p>
                                        </div>
                                    </header>
                                    <div class="vmap" id="vmap2" style="height: 280px; border-radius: 8px; overflow: hidden;"></div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Germany</h2>
                                            <p class="m-card__subtitle">DACH region performance.</p>
                                        </div>
                                    </header>
                                    <div class="vmap" id="vmap3" style="height: 280px; border-radius: 8px; overflow: hidden;"></div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">France</h2>
                                            <p class="m-card__subtitle">Top cities by revenue.</p>
                                        </div>
                                    </header>
                                    <div class="vmap" id="vmap4" style="height: 280px; border-radius: 8px; overflow: hidden;"></div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Russia</h2>
                                            <p class="m-card__subtitle">Major hubs across Russia.</p>
                                        </div>
                                    </header>
                                    <div class="vmap" id="vmap5" style="height: 280px; border-radius: 8px; overflow: hidden;"></div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Brazil</h2>
                                            <p class="m-card__subtitle">South America performance.</p>
                                        </div>
                                    </header>
                                    <div class="vmap" id="vmap6" style="height: 280px; border-radius: 8px; overflow: hidden;"></div>
                                </section>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
