<template>
    <!--===== Breadcrumb Section    S T A R T =====-->
    <div class="breadcrumb bg-cover" style="background-image: url('/images/breadcrumb/breadcrumb.png');">
        <div class="container">
            <div class="breadcrumb-heading return-left">
                <h1>About Us</h1>
                <ul class="breadcrumb-heading__items">
                    <li>
                        <router-link to="/"><span><img src="/images/icon/home-icon.svg" alt="svg"></span> Home</router-link>
                    </li>
                    <li>
                        /
                    </li>
                    <li>
                        About Us
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--===== About Section    S T A R T =====-->
    <section class="about3 section-padding fix">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-12 col-xl-6">
                    <div class="about3-content">
                        <div class="section-top pb-30">
                            <p class="section-top__subtitle">
                                <span><img src="/images/icon/medical-plus.svg" alt="svg"></span>Discover Our Wellness Solution
                            </p>
                            <h2 class="section-top__title pb-20">Your Wellness Journey Begins With Us.</h2>
                            <p class="section-top__desc">Fusce egestas viverra libero eu elementum. Maecenas sit amet lorem nec eros ullamcorper Vivamus finibus lacinia era t, tristique ligula maximus.</p>
                        </div>
                        <div class="about3-content-checklist">
                            <ul>
                                <li class="about3-content-checklist-item">
                                    <span><i class="fa-regular fa-check"></i></span>
                                    <span class="about3-content-checklist-item__text">Leading the Way in Modern Medicine While Putting Patients First.</span>
                                </li>
                                <li class="about3-content-checklist-item">
                                    <span><i class="fa-regular fa-check"></i></span>
                                    <span class="about3-content-checklist-item__text">Bringing Together Advanced Medicine and Genuine Compassion.</span>
                                </li>
                                <li class="about3-content-checklist-item">
                                    <span><i class="fa-regular fa-check"></i></span>
                                    <span class="about3-content-checklist-item__text"> Healing with Heart, Advancing with Knowledge, Caring with Purpose.</span>
                                </li>
                                <li class="about3-content-checklist-item">
                                    <span><i class="fa-regular fa-check"></i></span>
                                    <span class="about3-content-checklist-item__text"> Caring for You with Clinical Excellence and Compassion.</span>
                                </li>
                                <li class="about3-content-checklist-item">
                                    <span><i class="fa-regular fa-check"></i></span>
                                    <span class="about3-content-checklist-item__text"> Because Every Patient Deserves Exceptional Care.</span>
                                </li>
                            </ul>
                        </div>
                        <div class="about3-content-btn">
                            <router-link class="theme-btn style1" to="/contact">More About Us<i class="fa-solid fa-arrow-right"></i></router-link>
                            <router-link to="/contact" class="about3-content-btn__link">Ask Question?</router-link>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-xl-6">
                    <div class="about3-thumb">
                        <div class="about3-thumb__img">
                            <img src="/images/about/about3_1.png" alt="png">
                        </div>
                        <div class="about3-thumb-content return-left">
                            <img src="/images/icon/medical-plus.svg" alt="svg">
                            <h5 class="about3-thumb-content__title">Future Trends Shaping Health and Medicine.</h5>
                            <h5 class="about3-thumb-content__desc">We are committed to delivering quality tailored to your unique.</h5>
                        </div>
           
                    </div>                      
                </div>          
            </div>                                     
        </div>
    </section>

    <!--===== Project Section    S T A R T =====-->
    <section class="project2 section-padding pt-0 fix">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-6 col-xxl-5">
                    <div class="project2__thumb">
                        <img src="/images/project/project-thumb2_1.png" alt="png">
                    </div>
                </div>
                <div class="col-lg-6 col-xxl-7">
                    <div class="project2-card"> 
                    <div class="swiper global-slider" id="projectSlider1"
                        data-slider-options='{"loop": true, "breakpoints":{"0":{"slidesPerView":1}}}'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="project2-card__shape"><img src="/images/shape/project-shape1__1.svg" alt="svg"></div>
                                    <h4 class="project2-card__title">Our Mission</h4>                         
                                    <p class="project2-card__desc">We are committed to delivering high compass health tailored your
                                        needs Our experienc designed We are chitter delivering high quality
                                        compassionate healthcare tailored needs experienced We
                                        committed your unique nudgy experienced We are committed to
                                        delivering high compassionate</p> 
                                </div>
                            </div>
                        </div>
                        <div class="project2-card-arrow">
                            <div data-slider-prev="#projectSlider1" class="project2-card-arrow__btn"><img src="/images/icon/slider-btn-left.svg" alt="svg"></div>
                            <div data-slider-next="#projectSlider1" class="project2-card-arrow__btn"><img src="/images/icon/slider-btn-right.svg" alt="svg"></div>
                        </div>                         
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--===== Service Section    S T A R T =====-->
    <section class="service3 section-padding pt-0 fix">
        <div class="container">
            <div class="row d-flex justify-content-center pt-120">
                <div class="col-md-12 col-lg-8 text-center">
                    <div class="section-top text-center tw_title_anim">
                        <p class="section-top__subtitle"> <span><img src="/images/icon/medical-plus.svg" alt="svg"></span>We Focus on Your Well-being</p>
                        <h2 class="section-top__title pb-20">Reasons To Choose Medice?</h2>
                        <h2 class="section-top__desc pb-70">Caring for your health is our greatest responsibility. We're here to listen, heal, and support—making
                            every visit comfortable, informative, and focused on your well-being.</h2>
                    </div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-md-6 col-xl-3">
                    <div class="service3-card">                          
                        <div class="service3-card-content">
                            <div class="service3-card-content__icon">
                                <img class="svg" src="/images/icon/service-icon3_1.svg" alt="svg">
                            </div>
                            <h6 class="service3-card-content__title">
                                <router-link to="/services">Hygiene Solutions.</router-link>
                            </h6>                              
                            <div class="service3-card-content__desc">
                                <p>Lorem Ipsum is that it more less normal distribution.</p>
                            </div>
                            <router-link to="/services" class="service3-card-content__link">More Details <img class="svg" src="/images/icon/arrow-right.svg" alt="svg"></router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
// About Page - Vue.js implementation
</script>