 

import { Autoplay, FreeMode } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

// import Swiper css
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/pagination";

export default function BrandHomeFive() {
  return (
    <section className="mtbrand__area mtbrand__2 pt-80 pb-30 p-relative" data-bg-color="#131313" style={{ backgroundColor: `#131313` }}>
      <Swiper 
      
          slidesPerView={3}
          spaceBetween={20}
          freeMode={true}
          loop={true}
          speed={9000}
          allowTouchMove={false}
          autoplay={{
            delay: 0,
            disableOnInteraction: false,
          }}
          modules={[Autoplay, FreeMode]}
          breakpoints={{
            1781: {
              slidesPerView: 3,
            },
            1199: {
              slidesPerView: 3,
            },
            991: {
              slidesPerView: 3,
            },
            767: {
              slidesPerView: 2,
            },
            550: {
              slidesPerView: 2,
            },
            0: {
              slidesPerView: 2,
            },
          }}
       className="swiper mt-brand-title-active">

        {/* <div className="swiper-wrapper mt-slide-transtion"> */}
          <SwiperSlide className="swiper-slide mt-brand-slide-element mt-slide-transtion">
            <div className="mtbrand__wrapper">
              <h5 className="mtbrand__title bold">Get In touch - </h5>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide mt-brand-slide-element mt-slide-transtion">
            <div className="mtbrand__wrapper">
              <h5 className="mtbrand__title">Get In touch - </h5>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide mt-brand-slide-element mt-slide-transtion">
            <div className="mtbrand__wrapper">
              <h5 className="mtbrand__title">Get In touch - </h5>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide mt-brand-slide-element mt-slide-transtion">
            <div className="mtbrand__wrapper">
              <h5 className="mtbrand__title">Get In touch - </h5>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide mt-brand-slide-element mt-slide-transtion">
            <div className="mtbrand__wrapper">
              <h5 className="mtbrand__title">Get In touch - </h5>
            </div>
          </SwiperSlide>
          <SwiperSlide className="swiper-slide mt-brand-slide-element mt-slide-transtion">
            <div className="mtbrand__wrapper">
              <h5 className="mtbrand__title">Get In touch - </h5>
            </div>
          </SwiperSlide>

        {/* </div> */}
      </Swiper>
    </section>
  )
}
