<style>
  .swiper-wrapper {
    padding-bottom: 50px;
    background-color: none !important;
  }

  .testimonialSlide {
    position: relative;
    background: white;
    overflow: hidden;
    border-radius: 8px;
  }

  .testimonialSlide::after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 5px;
    background: red;
  }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />



<h2 class="fw-bold text-dark-danger mt-4">
  Realted Service
</h2>
<div class="container swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
      <a href='services.teeth_whitening.php' class="text-decoration-none text-white">
        <div class="bg-white rounded-6 shadow-lg p-2">
          <img src="./img/product/teethwhitening.png" class="w-100 rounded-4 mb-2 shadow" alt="">
      </a>
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Teeth Whitening</h5>
    </div>
  </div>
  <div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
    <a href='services.braces.php' class="text-decoration-none text-white">
      <div class="bg-white rounded-6 shadow-lg p-2">
        <img src="./img/product/Brace.jpg" class="w-100 rounded-4 mb-2 shadow" alt="">
    </a>
    <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Braces</h5>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <div class="bg-white rounded-6 shadow-lg p-2">
    <a href='services.aligners.php' class="text-decoration-none text-white">
      <img src="./img/product/TeethReplacement.jpg" class="w-100 rounded-4 mb-2 shadow" alt="">
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0"> Alingners</h5>
    </a>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <a href='services.veneers.php' class="text-decoration-none text-white">
    <div class="bg-white rounded-6 shadow-lg p-2">
      <img src="./img/product/Veneers.webp" class="w-100 rounded-4 mb-2 shadow" alt="">
  </a>
  <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Veneers</h5>
</div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <div class="bg-white rounded-6 shadow-lg p-2">
    <a href='services.dental_fillings.php' class="text-decoration-none text-white">
      <img src="./img/product/DentalFillings.jpg" class="w-100 rounded-4 mb-2 shadow" alt="">
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Dental Fillings</h5>
    </a>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <div class="bg-white rounded-6 shadow-lg p-2">
    <a href='services.dental_cleaning.php' class="text-decoration-none text-white">
      <img src="./img/product/DentalCleaning.webp" class="w-100 rounded-4 mb-2 shadow" alt="">
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Dental Cleaning</h5>
    </a>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <div class="bg-white rounded-6 shadow-lg p-2">
    <a href='services.dental_implants.php' class="text-decoration-none text-white">
      <img src="./img/product/DentalImplants.jpg" class="w-100 rounded-4 mb-2 shadow" alt="">
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Dental Implants</h5>
    </a>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <div class="bg-white rounded-6 shadow-lg p-2">
    <a href='services.root_canal_treatment.php' class="text-decoration-none text-white">
      <img src="./img/product/RootCanalTreatment.webp" class="w-100 rounded-4 mb-2 shadow" alt="">
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Root Canal Treatment</h5>
    </a>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <div class="bg-white rounded-6 shadow-lg p-2">
    <a href='services.dental_bridge_crowns.php' class="text-decoration-none text-white">
      <img src="./img/product/DentalBridgeCrowns.jpeg" class="w-100 rounded-4 mb-2 shadow" alt="">
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Bridge & Crowns</h5>
    </a>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <div class="bg-white rounded-6 shadow-lg p-2">
    <a href='services.childrens_dentistry.php' class="text-decoration-none text-white">
      <img src="./img/product/ToothExtractions.webp" class="w-100 rounded-4 mb-2 shadow" alt="">
      <h5 class="text-center text-danger fw-bold h6 my-0 py-0"> Children Dentistry</h5>
    </a>
  </div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <a href='services.wisdom_teeth_extraction.php' class="text-decoration-none text-white">
    <div class="bg-white rounded-6 shadow-lg p-2">
      <img src="./img/product/WisdomTeethExtraction.jpg" class="w-100 rounded-4 mb-2 shadow" alt="">
  </a>
  <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Teeth Replacement</h5>
</div>
</div>
<div class="col-4 col-sm-6 col-md-6 col-lg-4 col-xl-3 swiper-slide">
  <a href='services.dentures.php' class="text-decoration-none text-white">
    <div class="bg-white rounded-6 shadow-lg p-2">
      <img src="./img/product/Denture.png" class="w-100 rounded-4 mb-2 shadow" alt="">
  </a>
  <h5 class="text-center text-danger fw-bold h6 my-0 py-0">Dentures</h5>
</div>
</div>


</div>
<div class="swiper-pagination"></div>
</div>



<div class="swiper myBlogs">
  <div class="swiper-wrapper">
    <?php
    /*
    $sql  = "SELECT * FROM `blogs` ORDER BY `id` DESC LIMIT 8";
    $result = mysqli_query($conn, $sql);
    while ($data = mysqli_fetch_assoc($result)) {
      $img = $data['img'];
      $title = $data['title'];
      $shortDec = $data['shortDec'];
      $date = $data['date'];
      echo  "
      <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 p-2 swiper-slide'>
  <a href='blog.php?name=$title' class='text-decoration-none'>
        <div class='bg-white rounded-5 shadow overflow-hidden'>
          <img src='./img/blogs/$img' class='w-100'>
          <div class='p-3 pt-2'>
            <h4 class='text-danger fw-bold mb-2'>$title</h4>
            <p class='text-secondary'>
              $shortDec
            </p>
            <div class='d-flex mt-2'>
              <div class=''>
                <img src='./img/logo/logo.png' class='' style='width: 35px;' alt=''>
              </div>
              <div class='px-2 lh-sm'>
                <p class='text-danger small'>Zero Pain
                  <br>
                  <span class='text-secondary'>$date</span>
      </p>
    </div>
  </div>
  </div>
  </div>
  </a>
  </div>
  ";
    }
    */
    ?>
  </div>


</div>




<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    autoplay: {
      delay: 2200,
      disableOnInteraction: false,
    },
  });
  var swiper = new Swiper(".myBlogs", {
    slidesPerView: 3,
    spaceBetween: 30,
    autoplay: {
      delay: 2350,
      disableOnInteraction: false,
    },
  });
  var swiper = new Swiper(".myTestimonao", {
    slidesPerView: 2,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>