 
import { Link } from "react-router-dom";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

// import Swiper css
import "swiper/css";
import "swiper/css/pagination";


export default function ServiceHomeTwo() {
  return (
    <section className="mtservice__area  pt-135 pb-60 p-relative" id="mtservice__onepage">
      <div className="container">
        <div className="row">
          <Swiper
            slidesPerView={3}
            spaceBetween={24}
            pagination={{
              el: ".mtservie-pagination",
              clickable: true,
            }}
            modules={[Pagination]}
            breakpoints={{
              1781: {
                slidesPerView: 3,
              },
              1199: {
                slidesPerView: 3,
              },
              991: {
                slidesPerView: 3,
              },
              767: {
                slidesPerView: 2,
              },
              550: {
                slidesPerView: 2,
              },
              0: {
                slidesPerView: 1,
              },
            }}
            className="swiper mtservice__active">

            <SwiperSlide className="swiper-slide">
              <div className="mtservice mtservice__2 mtservice__bg  mb-30 black-bg-2 wow img-custom-anim-top"
                data-wow-duration="1.5s" data-wow-delay="0.2s">
                <div className="mtservice__icon mb-90">
                  <span><i className="fa-light fa-ruler-combined"></i></span>
                </div>
                <div className="mtservice__content">
                  <div className="mtservice__content-wrap">
                    <h3 className="mtservice__title mb-28"><a href="service-details.html">Concept Design</a>
                    </h3>
                    <p className="mb-0">We believe that every project is an
                      opportunity to go beyond</p>
                  </div>
                  <div className="mtservice__btn mt-18">
                    <Link to="/service-details"> READ MORE
                      <span><svg xmlns="http://www.w3.org/2000/svg" width="19" height="12"
                        viewBox="0 0 19 12" fill="none">
                        <path
                          d="M8.75303 0C11.3716 2.40259 15.5956 4.67135 19 6.00067C15.5956 7.3291 11.3716 9.59697 8.75346 12L10.5787 6.68951L0.653927 6.68989C0.480454 6.68966 0.314166 6.61695 0.191598 6.48775C0.1001 6.39142 0.0377957 6.26869 0.0125614 6.13509C-0.0126729 6.00149 0.00029311 5.86301 0.0498263 5.73717C0.0993589 5.61133 0.183232 5.50377 0.290841 5.42808C0.39845 5.3524 0.524966 5.31199 0.654391 5.31197L10.5788 5.31197L8.75303 0Z"
                          fill="#111111" />
                      </svg>
                      </span>
                    </Link>
                  </div>
                </div>

              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-slide">
              <div className="mtservice mtservice__2 mtservice__bg  mb-30 black-bg-2 wow img-custom-anim-top"
                data-wow-duration="1.5s" data-wow-delay="0.2s">
                <div className="mtservice__icon ">
                  <span><i className="fa-light fa-plane-tail"></i></span>
                </div>
                <div className="mtservice__content">
                  <div className="mtservice__content-wrap">
                    <h3 className="mtservice__title mb-28"><a href="service-details.html">Building Planning</a>
                    </h3>
                    <p className="mb-0">We believe that every project is an
                      opportunity to go beyond</p>
                  </div>
                  <div className="mtservice__btn mt-18">
                    <Link to="/service-details"> READ MORE
                      <span><svg xmlns="http://www.w3.org/2000/svg" width="19" height="12"
                        viewBox="0 0 19 12" fill="none">
                        <path
                          d="M8.75303 0C11.3716 2.40259 15.5956 4.67135 19 6.00067C15.5956 7.3291 11.3716 9.59697 8.75346 12L10.5787 6.68951L0.653927 6.68989C0.480454 6.68966 0.314166 6.61695 0.191598 6.48775C0.1001 6.39142 0.0377957 6.26869 0.0125614 6.13509C-0.0126729 6.00149 0.00029311 5.86301 0.0498263 5.73717C0.0993589 5.61133 0.183232 5.50377 0.290841 5.42808C0.39845 5.3524 0.524966 5.31199 0.654391 5.31197L10.5788 5.31197L8.75303 0Z"
                          fill="#111111" />
                      </svg>
                      </span>
                    </Link>
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-slide">
              <div className="mtservice mtservice__2 mtservice__bg  mb-30 black-bg-2 wow img-custom-anim-top"
                data-wow-duration="1.5s" data-wow-delay="0.2s">
                <div className="mtservice__icon ">
                  <span><i className="fa-light fa-holly-berry"></i></span>
                </div>
                <div className="mtservice__content">
                  <div className="mtservice__content-wrap">
                    <h3 className="mtservice__title mb-28"><a href="service-details.html">Smart Building</a>
                    </h3>
                    <p className="mb-0">We believe that every project is an
                      opportunity to go beyond</p>
                  </div>
                  <div className="mtservice__btn mt-18">
                    <Link to="/service-details"> READ MORE
                      <span><svg xmlns="http://www.w3.org/2000/svg" width="19" height="12"
                        viewBox="0 0 19 12" fill="none">
                        <path
                          d="M8.75303 0C11.3716 2.40259 15.5956 4.67135 19 6.00067C15.5956 7.3291 11.3716 9.59697 8.75346 12L10.5787 6.68951L0.653927 6.68989C0.480454 6.68966 0.314166 6.61695 0.191598 6.48775C0.1001 6.39142 0.0377957 6.26869 0.0125614 6.13509C-0.0126729 6.00149 0.00029311 5.86301 0.0498263 5.73717C0.0993589 5.61133 0.183232 5.50377 0.290841 5.42808C0.39845 5.3524 0.524966 5.31199 0.654391 5.31197L10.5788 5.31197L8.75303 0Z"
                          fill="#111111" />
                      </svg>
                      </span>
                    </Link>
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-slide">
              <div className="mtservice mtservice__2 mtservice__bg  mb-30 black-bg-2 wow img-custom-anim-top"
                data-wow-duration="1.5s" data-wow-delay="0.2s">
                <div className="mtservice__icon">
                  <span><i className="fa-light fa-plane-tail"></i></span>
                </div>
                <div className="mtservice__content">
                  <div className="mtservice__content-wrap">
                    <h3 className="mtservice__title mb-28"><a href="service-details.html">Building Planning</a>
                    </h3>
                    <p className="mb-0">We believe that every project is an
                      opportunity to go beyond</p>
                  </div>
                  <div className="mtservice__btn mt-18">
                    <Link to="/service-details"> READ MORE
                      <span><svg xmlns="http://www.w3.org/2000/svg" width="19" height="12"
                        viewBox="0 0 19 12" fill="none">
                        <path
                          d="M8.75303 0C11.3716 2.40259 15.5956 4.67135 19 6.00067C15.5956 7.3291 11.3716 9.59697 8.75346 12L10.5787 6.68951L0.653927 6.68989C0.480454 6.68966 0.314166 6.61695 0.191598 6.48775C0.1001 6.39142 0.0377957 6.26869 0.0125614 6.13509C-0.0126729 6.00149 0.00029311 5.86301 0.0498263 5.73717C0.0993589 5.61133 0.183232 5.50377 0.290841 5.42808C0.39845 5.3524 0.524966 5.31199 0.654391 5.31197L10.5788 5.31197L8.75303 0Z"
                          fill="#111111" />
                      </svg>
                      </span>
                    </Link>
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-slide">
              <div className="mtservice mtservice__2 mtservice__bg  mb-30 black-bg-2 wow img-custom-anim-top"
                data-wow-duration="1.5s" data-wow-delay="0.2s">
                <div className="mtservice__icon">
                  <span><i className="fa-light fa-ruler-combined"></i></span>
                </div>
                <div className="mtservice__content">
                  <div className="mtservice__content-wrap">
                    <h3 className="mtservice__title mb-28"><a href="service-details.html">Concept Design</a>
                    </h3>
                    <p className="mb-0">We believe that every project is an
                      opportunity to go beyond</p>
                  </div>
                  <div className="mtservice__btn mt-18">
                    <Link to="/service-details"> READ MORE
                      <span><svg xmlns="http://www.w3.org/2000/svg" width="19" height="12"
                        viewBox="0 0 19 12" fill="none">
                        <path
                          d="M8.75303 0C11.3716 2.40259 15.5956 4.67135 19 6.00067C15.5956 7.3291 11.3716 9.59697 8.75346 12L10.5787 6.68951L0.653927 6.68989C0.480454 6.68966 0.314166 6.61695 0.191598 6.48775C0.1001 6.39142 0.0377957 6.26869 0.0125614 6.13509C-0.0126729 6.00149 0.00029311 5.86301 0.0498263 5.73717C0.0993589 5.61133 0.183232 5.50377 0.290841 5.42808C0.39845 5.3524 0.524966 5.31199 0.654391 5.31197L10.5788 5.31197L8.75303 0Z"
                          fill="#111111" />
                      </svg>
                      </span>
                    </Link>
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-slide">
              <div className="mtservice mtservice__2 mtservice__bg  mb-30 black-bg-2 wow img-custom-anim-top"
                data-wow-duration="1.5s" data-wow-delay="0.2s">
                <div className="mtservice__icon">
                  <span><i className="fa-light fa-holly-berry"></i></span>
                </div>
                <div className="mtservice__content">
                  <div className="mtservice__content-wrap">
                    <h3 className="mtservice__title mb-28"><a href="service-details.html">Smart Building</a>
                    </h3>
                    <p className="mb-0">We believe that every project is an
                      opportunity to go beyond</p>
                  </div>
                  <div className="mtservice__btn mt-18">
                    <Link to="/service-details"> READ MORE
                      <span><svg xmlns="http://www.w3.org/2000/svg" width="19" height="12"
                        viewBox="0 0 19 12" fill="none">
                        <path
                          d="M8.75303 0C11.3716 2.40259 15.5956 4.67135 19 6.00067C15.5956 7.3291 11.3716 9.59697 8.75346 12L10.5787 6.68951L0.653927 6.68989C0.480454 6.68966 0.314166 6.61695 0.191598 6.48775C0.1001 6.39142 0.0377957 6.26869 0.0125614 6.13509C-0.0126729 6.00149 0.00029311 5.86301 0.0498263 5.73717C0.0993589 5.61133 0.183232 5.50377 0.290841 5.42808C0.39845 5.3524 0.524966 5.31199 0.654391 5.31197L10.5788 5.31197L8.75303 0Z"
                          fill="#111111" />
                      </svg>
                      </span>
                    </Link>
                  </div>
                </div>
              </div>
            </SwiperSlide>

          </Swiper>
          <div className="mtservice__pagi">
            <div className="mtservie-pagination"></div>
          </div>

        </div>
      </div>
    </section>
  )
}
