<template>
  <div id="smooth-wrapper" class="w-100">
    <div id="smooth-content">
        <!--===== Hero =====-->
        <section class="hero2 fix">
          <div class="hero2__shape1"></div>
          <div class="hero2__shape2"></div>
          <div class="hero2__shape3"><img src="/images/shape/hero-shape1_1.svg" alt="shape" /></div>
          <div class="hero2__shape4"><img src="/images/shape/hero-shape1_2.svg" alt="shape" /></div>
          <div class="hero2__shape5"><img src="/images/icon/hero-icon2.svg" alt="icon" /></div>
          <div class="hero2__shape6"></div>
  
          <div class="hero2-notice">
            <img src="/images/icon/hero-icon1.svg" alt="svg" />
            <div class="hero2-notice__text">
              <h5>Verified Doctors</h5>
              <p>Professional Doctor</p>
            </div>
          </div>
  
          <div class="hero2__thumb"><img src="/images/hero/hero-thumb2_1.png" alt="thumb" /></div>
  
          <div class="container">
            <div class="row">
              <div class="col-sm-8 col-md-7">
                <div class="hero2-content return-left">
                  <h6 class="hero2-content__subtitle">
                    <img src="/images/icon/eye-icon.svg" alt="svg" />Let Us Know What’s Wrong!
                  </h6>
                  <h1 class="hero2-content__title">
                    Your Trusted Guide to a<span> Healthier Life.</span>
                  </h1>
                  <div class="hero2-content-cta pt-40">
                    <router-link class="theme-btn style2" to="/contact">Book Appointment<i class="fa-solid fa-arrow-right"></i></router-link>
                    <router-link to="/faq" class="hero2-content-cta__link">Ask Question?</router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== About =====-->
        <section class="about2 section-padding pb-0 fix">
          <div class="container">
            <div class="row g-4 d-flex align-items-end pb-75">
              <div class="col-lg-7">
                <div class="section-top">
                  <p class="section-top__subtitle">
                    <span><img src="/images/icon/equal-icon.svg" alt="svg" /></span>Leading with Compassion
                  </p>
                  <h2 class="section-top__title">Healthcare That <span>Cares Beyond</span> the Cure.</h2>
                </div>
              </div>
              <div class="col-lg-5">
                <div class="about2-experience d-flex justify-content-lg-end">
                  <div class="about2-experience-info">
                    <h6 class="about2-experience-info__numb counter-number">16</h6>
                    <img src="/images/icon/medical-plus-lg.svg" alt="svg" />
                    <h5 class="about2-experience-info__text">Years Of <br />Experience.</h5>
                  </div>
                </div>
              </div>
            </div>
  
            <div class="row g-4">
              <div class="col-md-6 col-xl-6 d-flex align-items-center">
                <div class="about2-card">
                  <div class="about2-card-thumb">
                    <div class="about2-card-thumb__img"><img src="/images/about/about2_1.png" alt="png" /></div>
                    <div class="about2-card-thumb-info">
                      <h3 class="about2-card-thumb-info__title">Believe</h3>
                      <div class="about2-card-thumb-info__desc">Committed to Safe Healthcare.</div>
                    </div>
                  </div>
                </div>
              </div>
  
              <div class="col-md-6 col-xl-6">
                <div class="about2-card">
                  <div class="about2-card-content">
                    <div class="about2-card-content__icon"><img src="/images/icon/medical-plus-xl.svg" alt="svg" /></div>
                    <h4 class="about2-card-content__title">Paving the Way to <span>Better Health</span> One Day at a Time.</h4>
                    <div class="about2-card-content-list">
                      <div class="about2-card-content-list__item"><img src="/images/icon/about-icon1.svg" alt="svg" />Health Monitoring & Prevention.</div>
                      <div class="about2-card-content-list__item"><img src="/images/icon/about-icon2.svg" alt="svg" />Speak with a Medical Professional.</div>
                      <div class="about2-card-content-list__item"><img src="/images/icon/about-icon3.svg" alt="svg" />Receive Your Custom Treatment Plan.</div>
                    </div>
                    <router-link to="/about" class="about2-card-content__btn">
                      Stay With Us <img src="/images/icon/arrow-right-white.svg" alt="svg" />
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== Services =====-->
        <section class="service2 section-padding pb-0 fix">
          <div class="container">
            <div class="row d-flex justify-content-center">
              <div class="col-md-12 col-lg-8 text-center">
                <div class="section-top text-center tw_title_anim">
                  <p class="section-top__subtitle2"><span><img src="/images/icon/equal-icon.svg" alt="svg" /></span>Leading with Compassion</p>
                  <h2 class="section-top__title pb-70">Quality Medical Care That <span> Fits Your Life </span> & Budget.</h2>
                </div>
              </div>
            </div>
  
            <div class="row gx-4">
              <!-- (kept your six service cards) -->
              <div class="col-md-6 col-xl-4">
                <div class="service2-card">
                  <h6 class="service2-card__text"><router-link to="/service-details">Hygiene <span>Solutions.</span></router-link></h6>
                  <div class="service2-card__icon"><img src="/images/icon/service-icon2_1.svg" alt="svg" /></div>
                  <div class="service2-card__link"><router-link to="/service-details"><img class="svg" src="/images/icon/arrow-right-btn.svg" alt="svg"/></router-link></div>
                </div>
                <div class="service2-card">
                  <h6 class="service2-card__text"><router-link to="/service-details">Clinical <span>Science.</span></router-link></h6>
                  <div class="service2-card__icon"><img src="/images/icon/service-icon2_2.svg" alt="svg" /></div>
                  <div class="service2-card__link"><router-link to="/service-details"><img class="svg" src="/images/icon/arrow-right-btn.svg" alt="svg"/></router-link></div>
                </div>
              </div>
  
              <div class="col-md-6 col-xl-4">
                <div class="service2-card">
                  <h6 class="service2-card__text"><router-link to="/service-details">Medicinal <span>Science.</span></router-link></h6>
                  <div class="service2-card__icon"><img src="/images/icon/service-icon2_3.svg" alt="svg" /></div>
                  <div class="service2-card__link"><router-link to="/service"><img class="svg" src="/images/icon/arrow-right-btn.svg" alt="svg"/></router-link></div>
                </div>
                <div class="service2-card">
                  <h6 class="service2-card__text"><router-link to="/service-details">Brain & <span> Nerve Care.</span></router-link></h6>
                  <div class="service2-card__icon"><img src="/images/icon/service-icon2_4.svg" alt="svg" /></div>
                  <div class="service2-card__link"><router-link to="/service-details"><img class="svg" src="/images/icon/arrow-right-btn.svg" alt="svg"/></router-link></div>
                </div>
              </div>
  
              <div class="col-md-6 col-xl-4">
                <div class="service2-card">
                  <h6 class="service2-card__text"><router-link to="/service-details">Orthopedic <span>Care.</span></router-link></h6>
                  <div class="service2-card__icon"><img src="/images/icon/service-icon2_5.svg" alt="svg" /></div>
                  <div class="service2-card__link"><router-link to="/service-details"><img class="svg" src="/images/icon/arrow-right-btn.svg" alt="svg"/></router-link></div>
                </div>
                <div class="service2-card">
                  <h6 class="service2-card__text"><router-link to="/service-details">Muscle <span>Disease.</span></router-link></h6>
                  <div class="service2-card__icon"><img src="/images/icon/service-icon2_6.svg" alt="svg" /></div>
                  <div class="service2-card__link"><router-link to="/service-details"><img class="svg" src="/images/icon/arrow-right-btn.svg" alt="svg"/></router-link></div>
                </div>
              </div>
  
              <div class="col-md-6 col-xl-12 d-flex justify-content-center align-items-center">
                <router-link to="/service" class="service2-btn">
                  See all Services <span><img class="svg" src="/images/icon/arrow-up.svg" alt="svg" /></span>
                </router-link>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== Project =====-->
        <section class="project1 section-padding fix">
          <div class="project1__thumb"><img src="/images/project/project-thumb1_5.png" alt="png" /></div>
          <div class="container">
            <div class="row d-flex justify-content-center">
              <div class="col-md-12 col-lg-8 text-center">
                <div class="section-top text-center project1-padding tw_title_anim">
                  <h2 class="section-top__title3 pb-70">The First Step to <span>Better Health</span> Starts Here.</h2>
                </div>
              </div>
            </div>
  
            <div class="row g-4">
              <div class="col-xl-6">
                <div class="project1-card">
                  <h3 class="project1-card__title">Medical Help at Home <span>From Certified</span> Doctors.</h3>
                  <p class="project1-card__text"><span class="dot"></span>24/7 Emergency Support</p>
                  <p class="project1-card__text"><span class="dot"></span>Clean, Safe & Modern Facilities</p>
                  <div class="btn-wrapper pt-50">
                    <router-link class="theme-btn style4" to="/project-details">Read More<i class="fa-solid fa-arrow-right"></i></router-link>
                  </div>
                </div>
  
                <div class="project1-card2">
                  <div class="project1-card2__thumb"><img src="/images/project/project-thumb1_2.png" alt="png" /></div>
                  <div class="project1-card2-header">
                    <div class="project1-card2-header__thumb"><img src="/images/project/project-thumb1_1.png" alt="png" /></div>
                    <div class="project1-card2-header__text">
                      <p>Patients Review</p>
                      <div class="list">5.0
                        <ul>
                          <li><i class="fa-solid fa-star"></i></li><li><i class="fa-solid fa-star"></i></li><li><i class="fa-solid fa-star"></i></li><li><i class="fa-solid fa-star"></i></li><li><i class="fa-solid fa-star"></i></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <h3 class="project1-card2__title">Expert-Led Care Tailored For Your Health Needs</h3>
                  <div class="btn-wrapper pt-50">
                    <router-link class="theme-btn style4" to="/project">View All Doctor<i class="fa-solid fa-arrow-right"></i></router-link>
                  </div>
                </div>
              </div>
  
              <div class="col-xl-6">
                <div class="project1-card3">
                  <div class="project1-card3__icon"><img src="/images/icon/plus-icon-xl3.svg" alt="svg" /></div>
                  <div class="project1-card3__subtitle">Health Specialist</div>
                  <h3 class="project1-card3__title">Empowering Families with Trusted,
                    <span> Lifelong Healthcare </span> Solutions.</h3>
                  <div class="project1-card3-thumb">
                    <img src="/images/project/project-thumb1_3.png" alt="png" />
                    <img src="/images/project/project-thumb1_4.png" alt="png" />
                  </div>
                  <p class="project1-card3__text">Single-humped camel</p>
                </div>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== WCU / Slider =====-->
        <section class="wcu2 section-padding fix">
          <div class="container">
            <div class="row g-4 d-flex align-items-end pb-75">
              <div class="col-lg-8">
                <div class="section-top">
                  <p class="section-top__subtitle2"><span><img src="/images/icon/equal-icon.svg" alt="svg" /></span>Smart Solutions for Better Health.</p>
                  <h2 class="section-top__title">Our Latest <span>Case Studies.</span></h2>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="btn-wrapper d-flex justify-content-lg-end return-right">
                  <router-link class="theme-btn style1" to="/team">More Why Choose Us<i class="fa-solid fa-arrow-right"></i></router-link>
                </div>
              </div>
            </div>
  
            <div class="row g-4">
              <div class="col-lg-6 d-flex align-items-center">
                <!-- Keep Swiper markup; init with your existing JS -->
                <div class="swiper global-slider" id="wcuSlider1" data-slider-options='{"loop": true, "breakpoints":{"0":{"slidesPerView":1}}}'>
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="wcu2-card">
                        <div class="wcu2-card__subtitle"><img src="/images/icon/rotate-icon.svg" alt="svg" />Health, Reimagined.</div>
                        <h3 class="wcu2-card__title">Exploring Lives <span>Changed & Medical</span> Excellence.</h3>
                        <p class="wcu2-card__desc">Our healthcare team is dedicated to improving lives through reliable modern, & compassionate medical services.</p>
                        <div class="btn-wrapper"><router-link class="theme-btn style1" to="/project-details">Projects Details<i class="fa-solid fa-arrow-right"></i></router-link></div>
                      </div>
                    </div>
  
                    <!-- duplicate two slides (as given) -->
                    <div class="swiper-slide">
                      <div class="wcu2-card">
                        <div class="wcu2-card__subtitle"><img src="/images/icon/rotate-icon.svg" alt="svg" />Health, Reimagined.</div>
                        <h3 class="wcu2-card__title">Exploring Lives <span>Changed & Medical</span> Excellence.</h3>
                        <p class="wcu2-card__desc">Our healthcare team is dedicated to improving lives through reliable modern, & compassionate medical services.</p>
                        <div class="btn-wrapper"><router-link class="theme-btn style1" to="/project-details">Projects Details<i class="fa-solid fa-arrow-right"></i></router-link></div>
                      </div>
                    </div>
  
                    <div class="swiper-slide">
                      <div class="wcu2-card">
                        <div class="wcu2-card__subtitle"><img src="/images/icon/rotate-icon.svg" alt="svg" />Health, Reimagined.</div>
                        <h3 class="wcu2-card__title">Exploring Lives <span>Changed & Medical</span> Excellence.</h3>
                        <p class="wcu2-card__desc">Our healthcare team is dedicated to improving lives through reliable modern, & compassionate medical services.</p>
                        <div class="btn-wrapper"><router-link class="theme-btn style1" to="/project-details">Projects Details<i class="fa-solid fa-arrow-right"></i></router-link></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
  
              <div class="d-none d-lg-block col-lg-6">
                <div class="wcu2-thumb"><img src="/images/wcu/wcu-thumb2_1.png" alt="png" /></div>
                <div class="wcu2-sliderBtn">
                  <div data-slider-prev="#wcuSlider1" class="hero1-slider__btn"><img class="svg" src="/images/icon/slider-btn-left2.svg" alt="svg" /></div>
                  <div data-slider-next="#wcuSlider1" class="hero1-slider__btn"><img class="svg" src="/images/icon/slider-btn-right2.svg" alt="svg" /></div>
                </div>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== Features =====-->
        <section class="feature1 section-padding fix">
          <div class="feature1__shape1"><img src="/images/shape/pill-shape.svg" alt="svg" /></div>
          <div class="feature1__shape2"><img src="/images/shape/crystal-shape2.svg" alt="svg" /></div>
  
          <div class="container">
            <div class="row d-flex justify-content-center">
              <div class="col-md-12 col-lg-8 text-center">
                <div class="section-top text-center feature1-padding tw_title_anim">
                  <p class="section-top__subtitle2"><span><img src="/images/icon/equal-icon.svg" alt="svg" /></span>We Focus on Your Well-being</p>
                  <h2 class="section-top__title pb-20">Reasons To <span>Choose</span> Medice?.</h2>
                  <p 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.</p>
                </div>
              </div>
            </div>
  
            <div class="row g-4">
              <div class="col-sm-6 col-lg-4 col-xl-3 d-flex flex-column align-items-center">
                <div class="feature1-card"><div class="feature1-card__icon"><img src="/images/icon/feature-icon1.svg" alt="svg" /></div><h6 class="feature1-card__text">Experience & Expertise.</h6></div>
                <div class="feature1-card"><div class="feature1-card__icon"><img src="/images/icon/feature-icon2.svg" alt="svg" /></div><h6 class="feature1-card__text">Microscopic Health Evaluation</h6></div>
                <div class="feature1-card"><div class="feature1-card__icon"><img src="/images/icon/feature-icon3.svg" alt="svg" /></div><h6 class="feature1-card__text">Relationship-Centered</h6></div>
              </div>
  
              <div class="col-lg-4 col-xl-6 d-flex align-items-center justify-content-center d-none-fix">
                <div class="feature1-card2"><div class="feature1-card2__thumb"><img src="/images/feature/feature1_1.png" alt="png" /></div></div>
              </div>
  
              <div class="col-sm-6 col-lg-4 col-xl-3 d-flex flex-column align-items-center">
                <div class="feature1-card"><div class="feature1-card__icon"><img src="/images/icon/feature-icon4.svg" alt="svg" /></div><h6 class="feature1-card__text">Proven & Recognized</h6></div>
                <div class="feature1-card"><div class="feature1-card__icon"><img src="/images/icon/feature-icon5.svg" alt="svg" /></div><h6 class="feature1-card__text">Bottom-Line Savings</h6></div>
                <div class="feature1-card"><div class="feature1-card__icon"><img src="/images/icon/feature-icon6.svg" alt="svg" /></div><h6 class="feature1-card__text">Unshakable Principles</h6></div>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== Team (Swiper) =====-->
        <section class="team2 section-padding pb-0 fix">
          <div class="container">
            <div class="row g-4 d-flex align-items-end pb-50">
              <div class="col-lg-8">
                <div class="section-top">
                  <p class="section-top__subtitle2"><span><img src="/images/icon/equal-icon.svg" alt="svg" /></span>Qualified Doctors</p>
                  <h2 class="section-top__title title-fade-up">The Faces <span>Behind</span> The Excellence.</h2>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="btn-wrapper d-flex justify-content-lg-end return-right">
                  <router-link class="theme-btn style1" to="/team">See all Members<i class="fa-solid fa-arrow-right"></i></router-link>
                </div>
              </div>
            </div>
  
            <div class="row g-4">
              <div class="col-12">
                <div class="swiper global-slider" id="serviceSlider1" data-slider-options='{"loop": true, "breakpoints":{"0":{"slidesPerView":1},"576":{"slidesPerView":2,"centeredSlides":true},"768":{"slidesPerView":2},"992":{"slidesPerView":3},"1200":{"slidesPerView":4}}}'>
                  <div class="swiper-wrapper">
                    <!-- 4 slides (exact markup preserved) -->
                    <div class="swiper-slide">
                      <div class="team2-card">
                        <div class="team2-card-thumb">
                          <div class="team2-card-thumb__img">
                            <img src="/images/team/team-thumb2_1.png" alt="png" />
                            <div class="team2-card-thumb__img-shape"><img src="/images/shape/team-shape3.svg" alt="svg" /></div>
                            <div class="social-profile">
                              <ul>
                                <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin-in"></i></a></li>
                              </ul>
                              <span class="plus-btn"><i class="fa-regular fa-share-nodes"></i></span>
                            </div>
                          </div>
                          <p class="team2-card-thumb__ratting"><img src="/images/icon/star-black.svg" alt="icon" />4.4</p>
                          <a href="https://www.linkedin.com/in/your-profile" target="_blank" class="team2-card-thumb__link">
                            <img src="/images/icon/linkedin-Icon-lg.svg" alt="LinkedIn Icon" /><p>LinkedIn</p>
                          </a>
                        </div>
                        <div class="team2-card-content">
                          <h6 class="team2-card-content__title"><router-link to="/team-details">DR. Norman Gordon</router-link></h6>
                          <p class="team2-card-content__desc">Cardiologist</p>
                        </div>
                      </div>
                    </div>
  
                    <!-- Slide 2 -->
                    <div class="swiper-slide">
                      <div class="team2-card">
                        <div class="team2-card-thumb">
                          <div class="team2-card-thumb__img">
                            <img src="/images/team/team-thumb2_2.png" alt="png" />
                            <div class="team2-card-thumb__img-shape"><img src="/images/shape/team-shape3.svg" alt="svg" /></div>
                            <div class="social-profile">
                              <ul>
                                <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin-in"></i></a></li>
                              </ul>
                              <span class="plus-btn"><i class="fa-regular fa-share-nodes"></i></span>
                            </div>
                          </div>
                          <p class="team2-card-thumb__ratting"><img src="/images/icon/star-black.svg" alt="icon" />4.8</p>
                          <a href="https://www.linkedin.com/in/your-profile" target="_blank" class="team2-card-thumb__link">
                            <img src="/images/icon/linkedin-Icon-lg.svg" alt="LinkedIn Icon" /><p>LinkedIn</p>
                          </a>
                        </div>
                        <div class="team2-card-content">
                          <h6 class="team2-card-content__title"><router-link to="/team-details">DR. Valentino Morose</router-link></h6>
                          <p class="team2-card-content__desc">Dermatologist</p>
                        </div>
                      </div>
                    </div>
  
                    <!-- Slide 3 -->
                    <div class="swiper-slide">
                      <div class="team2-card">
                        <div class="team2-card-thumb">
                          <div class="team2-card-thumb__img">
                            <img src="/images/team/team-thumb2_3.png" alt="png" />
                            <div class="team2-card-thumb__img-shape"><img src="/images/shape/team-shape3.svg" alt="svg" /></div>
                            <div class="social-profile">
                              <ul>
                                <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin-in"></i></a></li>
                              </ul>
                              <span class="plus-btn"><i class="fa-regular fa-share-nodes"></i></span>
                            </div>
                          </div>
                          <p class="team2-card-thumb__ratting"><img src="/images/icon/star-black.svg" alt="icon" />4.7</p>
                          <a href="https://www.linkedin.com/in/your-profile" target="_blank" class="team2-card-thumb__link">
                            <img src="/images/icon/linkedin-Icon-lg.svg" alt="LinkedIn Icon" /><p>LinkedIn</p>
                          </a>
                        </div>
                        <div class="team2-card-content">
                          <h6 class="team2-card-content__title"><router-link to="/team-details">DR. Ingredia Nutrisha</router-link></h6>
                          <p class="team2-card-content__desc">Psychiatrist</p>
                        </div>
                      </div>
                    </div>
  
                    <!-- Slide 4 -->
                    <div class="swiper-slide">
                      <div class="team2-card">
                        <div class="team2-card-thumb">
                          <div class="team2-card-thumb__img">
                            <img src="/images/team/team-thumb2_4.png" alt="png" />
                            <div class="team2-card-thumb__img-shape"><img src="/images/shape/team-shape3.svg" alt="svg" /></div>
                            <div class="social-profile">
                              <ul>
                                <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin-in"></i></a></li>
                              </ul>
                              <span class="plus-btn"><i class="fa-regular fa-share-nodes"></i></span>
                            </div>
                          </div>
                          <p class="team2-card-thumb__ratting"><img src="/images/icon/star-black.svg" alt="icon" />4.8</p>
                          <a href="https://www.linkedin.com/in/your-profile" target="_blank" class="team2-card-thumb__link">
                            <img src="/images/icon/linkedin-Icon-lg.svg" alt="LinkedIn Icon" /><p>LinkedIn</p>
                          </a>
                        </div>
                        <div class="team2-card-content">
                          <h6 class="team2-card-content__title"><router-link to="/team-details">DR. Jason Response</router-link></h6>
                          <p class="team2-card-content__desc">Medical Assistant</p>
                        </div>
                      </div>
                    </div>
                  </div>
  
                  <div class="pagination2">
                    <button class="slider-button-prev" data-slider-prev="#serviceSlider1"><i class="fa-regular fa-angle-left"></i></button>
                    <div class="slider-pagination"></div>
                    <button class="slider-button-next" data-slider-next="#serviceSlider1"><i class="fa-regular fa-angle-right"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== Testimonial =====-->
        <section class="testimonial2 section-padding fix">
          <div class="container">
            <div class="row d-flex justify-content-center">
              <div class="col-md-12 col-lg-8 text-center">
                <div class="section-top text-center tw_title_anim">
                  <p class="section-top__subtitle2"><span><img src="/images/icon/equal-icon.svg" alt="svg" /></span>Clients Testimonial</p>
                  <h2 class="section-top__title pb-70">From Satisfaction <span>Celebration Client</span> Testimonials.</h2>
                </div>
              </div>
            </div>
  
            <div class="row g-4">
              <div class="col-xl-12">
                <div class="testimonial2-card">
                  <div class="testimonial2-card__thumb"><img src="/images/testimonial/testi-thumb2_1.png" alt="png" /></div>
  
                  <div class="swiper global-slider" id="testiSlider2" data-slider-options='{"loop": true, "breakpoints":{"0":{"slidesPerView":1}}}'>
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div class="testimonial2-card-content">
                          <div class="testimonial2-card-content-header">
                            <div class="testimonial2-card-content-header__star">
                              <i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i>
                            </div>
                          </div>
                          <p class="testimonial2-card-content__desc">
                            We are a team of compassionate healthcare professionals committed to providing exceptional medical care that prioritizes your comfort, safety, and well-being. From routine check-ups to specialized treatments, we’re here to support your health journey with integrity and expertise.
                          </p>
                          <div class="fancy-box2">
                            <div class="fancy-box2__item"><h6>Lurch Schpellchek</h6><p>heart specialist</p></div>
                            <div class="fancy-box2__item"><img src="/images/icon/quote1.svg" alt="svg" /></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
  
                  <div class="testimonial2-card-btn">
                    <div data-slider-prev="#testiSlider2" class="testimonial2-card-btn__left-arrow"><img src="/images/icon/slider-arrow-left.svg" alt="svg" /></div>
                    <div class="hr-testi"></div>
                    <div data-slider-next="#testiSlider2" class="testimonial2-card-btn__right-arrow"><img src="/images/icon/slider-arrow-right.svg" alt="svg" /></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
  
        <!--===== Blog =====-->
        <section class="blog2 section-padding fix brandLogo-fix">
          <div class="container">
            <div class="row g-4 d-flex align-items-end pb-75">
              <div class="col-lg-6">
                <div class="section-top">
                  <p class="section-top__subtitle2"><span><img src="/images/icon/equal-icon.svg" alt="svg" /></span>Qualified Doctors</p>
                  <h2 class="section-top__title title-fade-up">The Faces <span>Behind</span> The Excellence.</h2>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="btn-wrapper d-flex justify-content-lg-end return-right">
                  <router-link class="theme-btn style1" to="/blog">See all Blogs<i class="fa-solid fa-arrow-right"></i></router-link>
                </div>
              </div>
            </div>
  
            <div class="row g-4">
              <!-- 3 blog cards (unchanged except links) -->
              <div class="col-md-6 col-xl-4">
                <div class="blog2-card">
                  <div class="blog2-card__thumb">
                    <router-link to="/blog-details"><img src="/images/blog/blog-thumb2_1.png" alt="jpg" /></router-link>
                    <div class="blog2-card__thumb-date"><h3>28<br /><span>Mar</span></h3></div>
                  </div>
                  <div class="blog2-card-content">
                    <h3 class="blog2-card-content__title">
                      <router-link to="/blog-details">Enabling Healthier Futures with Personalized, Local Care.</router-link>
                    </h3>
                    <p class="blog2-card-content__desc">Sed cursus nibh empus alique ez lacinia massa utrum metus neque molestie quam.</p>
                    <div class="blog2-card-content-meta">
                      <div class="blog2-card-content-meta__user"><img src="/images/icon/user.svg" alt="svg" />By Will Barrow</div>
                      <div class="blog2-card-content-meta__comment"><img src="/images/icon/comment.svg" alt="svg" />7 Comments</div>
                    </div>
                  </div>
                </div>
              </div>
  
              <div class="col-md-6 col-xl-4">
                <div class="blog2-card">
                  <div class="blog2-card__thumb">
                    <router-link to="/blog-details"><img src="/images/blog/blog-thumb2_2.png" alt="jpg" /></router-link>
                    <div class="blog2-card__thumb-date"><h3>12<br /><span>April</span></h3></div>
                  </div>
                  <div class="blog2-card-content">
                    <h3 class="blog2-card-content__title">
                      <router-link to="/blog-details">Advancing Health and Happiness Through Care Partnerships.</router-link>
                    </h3>
                    <p class="blog2-card-content__desc">Sed cursus nibh empus alique ez lacinia massa utrum metus neque molestie quam.</p>
                    <div class="blog2-card-content-meta">
                      <div class="blog2-card-content-meta__user"><img src="/images/icon/user.svg" alt="svg" />By Hanson Deck</div>
                      <div class="blog2-card-content-meta__comment"><img src="/images/icon/comment.svg" alt="svg" />8 Comments</div>
                    </div>
                  </div>
                </div>
              </div>
  
              <div class="col-md-6 col-xl-4">
                <div class="blog2-card">
                  <div class="blog2-card__thumb">
                    <router-link to="/blog-details"><img src="/images/blog/blog-thumb2_3.png" alt="jpg" /></router-link>
                    <div class="blog2-card__thumb-date"><h3>08<br /><span>May</span></h3></div>
                  </div>
                  <div class="blog2-card-content">
                    <h3 class="blog2-card-content__title">
                      <router-link to="/blog-details">Early Signs, Better Outcomes: Heart & Kidney Health.</router-link>
                    </h3>
                    <p class="blog2-card-content__desc">Sed cursus nibh empus alique ez lacinia massa utrum metus neque molestie quam.</p>
                    <div class="blog2-card-content-meta">
                      <div class="blog2-card-content-meta__user"><img src="/images/icon/user.svg" alt="svg" />By Elon Gated</div>
                      <div class="blog2-card-content-meta__comment"><img src="/images/icon/comment.svg" alt="svg" />2 Comments</div>
                    </div>
                  </div>
                </div>
              </div>
  
            </div>
          </div>
        </section>
  
        <!--===== Brand Slider =====-->
        <div class="brandLogo2">
          <div class="container">
            <div class="row g-4">
              <div class="col-xl-12">
                <div class="brandLogo2-slider">
                  <div class="swiper global-slider" id="brandLogo2" data-slider-options='{"loop": true, "breakpoints": {"0": {"slidesPerView": 2}, "576": {"slidesPerView": 3, "centeredSlides": true}, "768": {"slidesPerView": 4}, "992": {"slidesPerView": 5}, "1200": {"slidesPerView": 6}, "1600": {"slidesPerView": 7}}}'>
                    <div class="swiper-wrapper">
                      <div class="swiper-slide"><div class="brandLogo2-slider__thumb"><img src="/images/brand/brand-logo1_1.svg" alt="svg" /></div></div>
                      <div class="swiper-slide"><div class="brandLogo2-slider__thumb"><img src="/images/brand/brand-logo1_2.svg" alt="svg" /></div></div>
                      <div class="swiper-slide"><div class="brandLogo2-slider__thumb"><img class="svg" src="/images/brand/brand-logo1_3.svg" alt="svg" /></div></div>
                      <div class="swiper-slide"><div class="brandLogo2-slider__thumb"><img src="/images/brand/brand-logo1_4.svg" alt="svg" /></div></div>
                      <div class="swiper-slide"><div class="brandLogo2-slider__thumb"><img src="/images/brand/brand-logo2_1.svg" alt="svg" /></div></div>
                      <div class="swiper-slide"><div class="brandLogo2-slider__thumb"><img src="/images/brand/brand-logo1_6.svg" alt="svg" /></div></div>
                      <div class="swiper-slide"><div class="brandLogo2-slider__thumb"><img src="/images/brand/brand-logo1_7.svg" alt="svg" /></div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
                </div>

        <!-- USE FOOTER COMPONENT (Option 2) -->
        <AppFooter />

    </div> <!-- /smooth-content -->
  </div> <!-- /smooth-wrapper -->
</template>
  
  <script setup>
import AppFooter from '../layout/AppFooter.vue'
// purely presentational; any Swiper/GSAP init stays in your existing JS
</script>
  