@extends('layout.master')
@section('title', 'Martin County')
@section('content')
<main class="main">
    <div class="page-title blog_header" data-aos="fade" style="background-image: url('{{ asset('assets/img/pm/1.jpg') }}');">
        <div class="heading">
            <div class="container">
                <div class="row d-flex justify-content-center text-center">
                    <div class="col-lg-12 head_box">
                        <h1>Martin County</h1>
                        <p class="section_text">Expert solutions for managing your property with Care and Professionalism</p>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <section id="municipalities" class="municipalities section">
        <div class="container">
            <div class="row">
                <!-- Left Column: List of Municipalities -->
                <div class="col-lg-6">
                    <div class="municipalities-list">
                        <!-- Nested Row with Two Columns per Row -->
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Stuart</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Jupiter Island</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Ocean Breeze</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Sewall's Point</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Indian Town</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Palm City</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Hobe Sound</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Jensen Beach</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Port Salerno</span>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Right Column: Image -->
                <div class="col-lg-6">
                    <div class="map-image">
                        <img src="{{ asset('assets/img/county/martin.jpg') }}" class="img-fluid" alt="Miami-Dade County Map">
                    </div>
                </div>
            </div>
        </div>
    </section>



</main>
@endsection