<!-- HTML code -->
<section class="cm-item-59 slider">
    <div class="cm-item-59-swiper">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide slider-item-1">
          <div class="content-wrapper">
            <h6 class="sub-title">WE ARE Trusted Cleaning AGENCY</h6>
            <h1 class="title">Professional <br>Trusted Home <br>Cleaning Services</h1>
            <p class="text">Trust your home to the Leaders in Clean and experience the <br> ultimate level of
              cleaning power and expertise.</p>
            <a class="theme-btn" href="#">Discover more</a>
          </div>
          <div class="shape-1">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape2.png" alt="">
          </div>
          <div class="shape-2">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape3.png" alt="">
          </div>
          <div class="shape-3">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape3.png" alt="">
          </div>
        </div>
        <div class="swiper-slide slider-item-2">
          <div class="content-wrapper">
            <h6 class="sub-title">WE ARE Trusted Cleaning AGENCY</h6>
            <h1 class="title">We,re <br>Professional <br>Cleaning Services</h1>
            <p class="text">Trust your home to the Leaders in Clean and experience the <br> ultimate level of
              cleaning power and expertise.</p>
            <a class="theme-btn" href="#">Discover more</a>
          </div>
          <div class="shape-1">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape2.png" alt="">
          </div>
          <div class="shape-2">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape3.png" alt="">
          </div>
          <div class="shape-3">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape3.png" alt="">
          </div>
        </div>
        <div class="swiper-slide slider-item-3">
          <div class="content-wrapper">
            <h6 class="sub-title">WE ARE Trusted Cleaning AGENCY</h6>
            <h1 class="title">Keeping <br>your home <br>shiny!</h1>
            <p class="text">Trust your home to the Leaders in Clean and experience the <br> ultimate level of
              cleaning power and expertise.</p>
            <a class="theme-btn" href="#">Discover more</a>
          </div>
          <div class="shape-1">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape2.png" alt="">
          </div>
          <div class="shape-2">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape3.png" alt="">
          </div>
          <div class="shape-3">
            <img src="https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape3.png" alt="">
          </div>
        </div>
      </div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- JS code -->
<script>
    	const swiper = new Swiper('.cm-item-59-swiper', {
      loop: true,
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView: 1,
      // Responsive breakpoints
      breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 1,
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 1,
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 1,
        },
        // when window width is >= 767px
        767: {
          slidesPerView: 1,
        },
        // when window width is >= 991px
        991: {
          slidesPerView: 1,
        },
        // when window width is >= 1200px
        1200: {
          slidesPerView: 1,
        }
      }
    });

</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.css">
<!-- CSS code -->
<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    img,
    svg {
      max-width: 100%;
      vertical-align: middle;
    }
    .cm-item-59.slider {
      position: relative;
      overflow: hidden;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide {
      height: 100vh;
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-1 {
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/slider-v1-img1.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      z-index: -5;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-1::before {
      content: "";
      position: absolute;
      top: 0;
      left: 280px;
      bottom: 0;
      right: 0;
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/slider-v1-bg.png);
      background-repeat: no-repeat;
      z-index: -4;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-1::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: url(http://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape1.png);
      mix-blend-mode: overlay;
      background-repeat: no-repeat;
      z-index: -4;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-2 {
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/slider-v1-img2.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      z-index: -5;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 280px;
      bottom: 0;
      right: 0;
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/slider-v1-bg.png);
      background-repeat: no-repeat;
      z-index: -4;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-2::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape1.png);
      mix-blend-mode: overlay;
      background-repeat: no-repeat;
      z-index: -4;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-3 {
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/slider-v1-img3.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      z-index: -5;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-3::before {
      content: "";
      position: absolute;
      top: 0;
      left: 280px;
      bottom: 0;
      right: 0;
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/slider-v1-bg.png);
      background-repeat: no-repeat;
      z-index: -4;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-3::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-v1-shape1.png);
      mix-blend-mode: overlay;
      background-repeat: no-repeat;
      z-index: -4;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .shape-1 {
      position: absolute;
      top: 0;
      left: 350px;
      z-index: 1;
      opacity: 1;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .shape-2 {
      position: absolute;
      top: 175px;
      left: 185px;
      opacity: 0.7;
      z-index: 1;
      animation-name: float-bob-y;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    @keyframes float-bob-y {
      0% {
        transform: translateY(-20px);
      }
      50% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(-20px);
      }
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .shape-3 {
      position: absolute;
      top: 210px;
      left: 470px;
      opacity: 0.7;
      z-index: 1;
      animation-name: float-bob-x;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    @keyframes float-bob-x {
      0% {
        transform: translateX(-30px);
      }
      50% {
        transform: translateX(-10px);
      }
      100% {
        transform: translateX(-30px);
      }
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper {
      position: relative;
      display: block;
      padding: 120px 0;
      max-width: 640px;
      width: 100%;
      margin-left: auto;
      margin-right: 100px;
      z-index: 5;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .sub-title {
      font-weight: 500;
      font-size: 16px;
      line-height: 26px;
      text-transform: uppercase;
      color: #043e74;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .title {
      font-weight: 600;
      font-size: 80px;
      line-height: 1.1em;
      color: #043e74;
      margin: 15px 0;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .text {
      font-weight: 400;
      font-size: 18px;
      line-height: 32px;
      color: #043e74;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .theme-btn {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      background-color: #fff203;
      color: #043e74;
      font-size: 16px;
      font-weight: 500;
      text-transform: uppercase;
      line-height: 60px;
      transition: all 0.3s linear;
      z-index: 1;
      padding: 0px 45px 0px;
      overflow: hidden;
      border-radius: 3px;
      text-decoration: none;
      margin-top: 40px;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .theme-btn:hover{
      color: #fff;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .theme-btn::before {
      content: "";
      position: absolute;
      width: 200%;
      height: 200%;
      top: 110%;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
      z-index: -1;
      background: #043e74;
      transition-duration: 800ms;
    }
    .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .theme-btn:hover::before{
      top: -30%;
    }
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-next,
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-prev {
      color: #fff;
      top: auto;
      bottom: 5%;
      height: 60px;
      width: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background: rgba(158, 158, 158, 0.3);
    }
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-prev {
      left: auto;
      top: auto;
      bottom: 15%;
      right: 5%;
    }
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-next {
      right: 5%;
    }
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-next::after,
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-prev::after {
      font-size: 25px;
    }
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-next:hover,
    .cm-item-59.slider .cm-item-59-swiper .swiper-button-prev:hover {
      background-color: #fff203;
    }
    @media (max-width: 600px){
      .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper{
        padding: 120px 20px;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .sub-title{
        font-size: 16px;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .title{
        font-size: 36px;
        line-height: 1.2em;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper .text{
        line-height: 28px;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide .shape-1{
        display: none;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide .shape-2{
        display: none;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide .shape-3{
        display: none;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-1::before{
        left: 0;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-2::before{
        left: 0;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-3::before{
        left: 0;
      }
    }
    @media (min-width: 600px) and (max-width: 767px){
      .cm-item-59.slider .swiper-wrapper .swiper-slide .content-wrapper{
        padding: 120px 20px;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-1::before{
        left: 0;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-2::before{
        left: 0;
      }
      .cm-item-59.slider .swiper-wrapper .swiper-slide.slider-item-3::before{
        left: 0;
      }
    }
</style>