@extends('layout.master')
@section('title', 'Saint Lucie 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>Saint Lucie 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>Fort Pierce</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Port St. Lucie</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>North Hutchinson Island</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>South Hutchinson Island</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>White City</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Ankora</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Eden</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Eldred</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Fort Pierce North</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Fort Pierce South</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Hutchinson Island South</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Indian River Estates</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Lakewood Park</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>River Park</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>St. Lucie Village</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>St. Lucie West</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Tradition</span>
                            </div>
                            <div class="col-md-6 municipality-item">
                                <i class="bi bi-arrow-right-circle"></i>
                                <span>Walton</span>
                            </div>
                        </div>
                    </div>
                </div>


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



</main>
@endsection