Template Assets

Main Fold A

Lorem Ipsum

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, conesctetur adipiscing elit fusce vitae risus.

Read More Read More
Lorem Ipsum

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, conesctetur adipiscing elit fusce vitae risus.

Read More Read More

<div class="splide" id="main-fold-a-splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="main-fold-a">
          <div class="main-fold-a-item">
            <div class="main-fold-a-background">
              <img src="/wp-content/uploads/2022/06/wallet-fold1.jpg" alt="" width="300" />
            </div>
            <div class="row-container">
              <div class="main-fold-a-content">
                <p class="subtitle color-1">Lorem Ipsum</p>
                <p class="title bold">Lorem Ipsum Dolor Sit Amet</p>
                <p>Lorem ipsum dolor sit amet, conesctetur adipiscing elit fusce vitae risus.</p>
                <div class="readmore-wrapper">
                  <a class="readmore">Read More</a>
                  <a class="readmore alt">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>

      <li class="splide__slide">
        <div class="main-fold-a">
          <div class="main-fold-a-item">
            <div class="main-fold-a-background">
              <img src="/wp-content/uploads/2022/06/wallet-fold1.jpg" alt="" width="300" />
            </div>
            <div class="row-container">
              <div class="main-fold-a-content">
                <p class="subtitle color-1">Lorem Ipsum</p>
                <p class="title bold">Lorem Ipsum Dolor Sit Amet</p>
                <p>Lorem ipsum dolor sit amet, conesctetur adipiscing elit fusce vitae risus.</p>
                <div class="readmore-wrapper">
                  <a class="readmore">Read More</a>
                  <a class="readmore alt">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

/* ==== FOLD 1-A ==== */

.main-fold-a {
  position: relative;
  z-index: 4;
}

.main-fold-a-background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.main-fold-a-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.main-fold-a-content {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 230px 0px 230px;
  text-align: center;
  flex-direction: column;
}

.main-fold-a-content p{
color: var(--color0);
}

.main-fold-a-content p:nth-child(3) {
  margin-bottom: 0px;
  margin: 20px auto;
}

.main-fold-a .readmore-wrapper {
  display: flex;
  gap: 10px;
}

.main-fold-a .readmore {
  margin-top: 0px;
}


.main-fold-a-background::before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background: var(--color3b);
  opacity: 0.5;
}

ul#main-fold-a-splide-list {
  height: auto;
}

/* ==== MAIN-FOLD-A ==== */
.animate .main-fold-a-content{
  transition: all 0s ease;
  opacity: 0;
  transform: translateY(200px);
  -webkit-transform: translateY(200px);
}

.animate.animate-complete .main-fold-a-content{
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

@media (max-width: 640px) {
  .main-fold-a-content {
    padding: 110px 0px 110px;
  }
}

jQuery(document).ready(function () {
    let splide = new Splide("#main-fold-a-splide", {
      type: "loop",
      perPage: 1,
      direction: "ltr",
      autoHeight: true,
      lazyload: false,
      pagination: false,
      arrows: false,
        snap: true,
      focus: "center",
      autoplay:true,
      interval:3000,
      breakpoints: {
        300: {
          perPage: 1,
        },
      },
    });
    splide.mount();
  });

Main Fold B

Lorem Ipsum

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More
Lorem Ipsum

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More

<div class="splide" id="main-fold-b-splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="main-fold-b">
          <div class="main-fold-b-item">
            <div class="main-fold-b-img">
              <img
                src="/wp-content/uploads/2022/06/mountain-range.jpg"
                alt=""
                width="300" />
            </div>
            <div class="row-container">
              <div class="main-fold-b-content">
                <p class="small-title color-1">Lorem Ipsum</p>
                <p class="title">
                  Lorem Ipsum
                  <span class="newline color-1">Dolor Sit Amet</span>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="readmore">Read More</a>
              </div>
            </div>
          </div>
        </div>
      </li>

      <li class="splide__slide">
        <div class="main-fold-b">
          <div class="main-fold-b-item">
            <div class="main-fold-b-img">
              <img
                src="/wp-content/uploads/2022/06/mountain-range.jpg"
                alt=""
                width="300" />
            </div>
            <div class="row-container">
              <div class="main-fold-b-content">
                <p class="small-title color-1">Lorem Ipsum</p>
                <p class="title">
                  Lorem Ipsum
                  <span class="newline color-1">Dolor Sit Amet</span>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="readmore">Read More</a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

/* ==== FOLD 1-B ==== */
ul#main-fold-b-splide-list {
  height: auto;
}

.main-fold-b {
  background: var(--color3b);
}

.rounded-fold .main-fold-b-img{
border-radius: 30px; 
overflow: hidden;
}


.main-fold-b-item {
  position: relative;
  padding: 150px 0px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.main-fold-b-img {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0px;
  top: 0%;
}

.main-fold-b-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.main-fold-b-content {
  width: calc(50% - 60px);
}

.flipped .main-fold-b-item {
  justify-content: flex-end;
}

.flipped .main-fold-b-img {
  left: 0px;
  right: auto;
}

.flipped .main-fold-b-content {
  margin-left: auto;
}

/* ==== MAIN-FOLD-B ==== */

.animate .main-fold-b-img{
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete .main-fold-b-img{
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate .main-fold-b-content{
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete .main-fold-b-content{
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

/* ==== MAIN-FOLD-B FLIPPED ==== */


.animate.flipped .main-fold-b-img{
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete.flipped .main-fold-b-img{
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate.flipped .main-fold-b-content{
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete.flipped .main-fold-b-content{
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

@media (max-width: 1024px) {
  .main-fold-b-img {
    position: relative;
    width: 100%;
  }

  .main-fold-b-item {
    flex-direction: column;
    padding: 0px;
  }

  .main-fold-b-content {
    width: 100%;
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }
}

jQuery(document).ready(function () {
    let splide = new Splide("#main-fold-b-splide", {
      type: "loop",
      perPage: 1,
      direction: "ltr",
      autoHeight: true,
      lazyload: false,
      pagination: false,
      arrows: false,
        snap: true,
      focus: "center",
      autoplay:true,
      interval:3000,
      breakpoints: {
        300: {
          perPage: 1,
        },
      },
    });
    splide.mount();
  });

Main Fold C

Lorem ipsum dolor sit amet, adipiscing.
Read More
Lorem ipsum dolor sit amet, adipiscing.
Read More

<div class="splide" id="main-fold-c-splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="main-fold-c">
          <div class="main-fold-c-item">
            <div class="main-fold-c-background">
              <img src="/wp-content/uploads/2022/06/security-fold1.jpg" alt="" width="300" />
            </div>
            <div class="row-container">
              <div class="main-fold-c-content">
                <p class="title bold">Lorem ipsum dolor <span class="color-1">sit amet,</span> adipiscing.</p>
                <a class="readmore">Read More</a>
              </div>
            </div>
          </div>
        </div>
      </li>

      <li class="splide__slide">
        <div class="main-fold-c">
          <div class="main-fold-c-item">
            <div class="main-fold-c-background">
              <img src="/wp-content/uploads/2022/06/security-fold1.jpg" alt="" width="300" />
            </div>
            <div class="row-container">
              <div class="main-fold-c-content">
                <p class="title bold">Lorem ipsum dolor <span class="color-1">sit amet,</span> adipiscing.</p>
                <a class="readmore">Read More</a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

/* ==== MAIN-FOLD-C ==== */
ul#main-fold-c-splide-list {
  height: auto;
}

.main-fold-c-background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.main-fold-c-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.main-fold-c-content {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 230px 0px 230px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 600px;
}

.flipped .main-fold-c-content {
  text-align: right;
  align-items: flex-end;
  margin-left: auto;
}

.main-fold-c .readmore {
  margin-top: 20px;
}

.main-fold-c .readmore:hover, .main-fold-c .readmore.alt:hover{
  border-color: var(--color2);
  background: var(--color2); ;
}

.main-fold-c-background::before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background: var(--color3b);
  opacity: 0.2;
}

/* ==== MAIN-FOLD-C ==== */
.animate .main-fold-c-content{
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete .main-fold-c-content{
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

@media (max-width: 1024px) {
  .main-fold-c-content {
    padding: 100px 0px;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: unset;
  }
}

jQuery(document).ready(function () {
    let splide = new Splide("#main-fold-c-splide", {
      type: "loop",
      perPage: 1,
      direction: "ltr",
      autoHeight: true,
      lazyload: false,
      pagination: false,
      arrows: false,
        snap: true,
      focus: "center",
      autoplay:true,
      interval:3000,
      breakpoints: {
        300: {
          perPage: 1,
        },
      },
    });
    splide.mount();
  });

Content Fold A

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Get started today and complete our form to get in touch

Enquire Here

<div class="content-fold-a">
  <div class="row-container">
    <div class="content-fold-a-wrapper">
      <div class="content-fold-a-img">
        <img
          src="/wp-content/uploads/2022/06/building-consultants-contacts.jpg"
          alt=""
          width="300" />
      </div>

      <div class="content-fold-a-content">
        <div class="content-fold-a-content-inner">
          <p class="title">
            Lorem Ipsum
            <span class="color-1 newline">Dolor Sit Amet</span>
          </p>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
        <div class="content-fold-a-bottom">
          <p>Get started today and complete our form to get in touch</p>

          <a class="readmore">Enquire Here</a>
        </div>
      </div>
    </div>
  </div>
</div>

/*CONTENT FOLD A*/
.content-fold-a-wrapper {
  display: flex;
  align-items: stretch;
  padding: 110px 0px;
  gap: 40px;
}

.content-fold-a-img {
  flex: 0 0 440px;
}

.rounded-fold .content-fold-a-img {
  border-radius: 30px;
  overflow: hidden;
}

.circle-fold .content-fold-a-img img {
  clip-path: circle(50%);
  overflow: hidden;
  height: auto;
  width: auto;
}

.content-fold-a-img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.content-fold-a-img img {
  height: 100%;
  object-fit: cover;
}

.content-fold-a-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content-fold-a-bottom {
  display: flex;
  background: var(--color3);
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 20px;
  margin-top: 30px;
  box-sizing: border-box;
}

.rounded-fold .content-fold-a-bottom {
  border-radius: 30px;
}

.circle-fold .content-fold-a-bottom {
  border-radius: 100px;
}

.content-fold-a {
  background: var(--color3b);
}

.content-fold-a-bottom .readmore {
  margin: 0px;
}

.content-fold-a-bottom p {
  font-size: 24px;
  line-height: 24px;
  margin: 0px;
  color: var(--color0b);
}

.content-fold-a-content .title {
  margin-bottom: 20px;
}

.content-fold-a-content-inner {
  position: relative;
  padding: 20px;
}

.content-fold-a-content-inner::before {
  top: 0;
  left: 0;
  position: absolute;
  content: "";
  background: var(--color3);
  opacity: 0.05;
  width: 100%;
  height: 100%;
}

.rounded-fold .content-fold-a-content-inner {
  border-radius: 30px;
  overflow: hidden;
}

.circle-fold .content-fold-a-content-inner {
  border-radius: 40px;
  overflow: hidden;
}

.flipped .content-fold-a-wrapper {
  flex-direction: row-reverse;
}

/* ==== CONTENT FOLD-A ==== */

.animate .content-fold-a-img {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete .content-fold-a-img {
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate .content-fold-a-content {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete .content-fold-a-content {
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

/* ==== CONTENT FOLD-A FLIPPED==== */

.animate.flipped .content-fold-a-img {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete.flipped .content-fold-a-img {
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate.flipped .content-fold-a-content {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete.flipped .content-fold-a-content {
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

@media (max-width: 1200px) {
  /**CONTENT FOLD A**/
  .content-fold-a-wrapper {
    display: flex;
    align-items: stretch;
    padding: 60px 0px;
    gap: 20px;
    flex-direction: column !important;
  }

  .content-fold-a-img {
    flex: 0 0 400px;
    height: 400px;
  }

  .content-fold-a-content {
    display: flex;
    flex-direction: column;
  }

  .content-fold-a-content-inner {
    position: relative;
    padding: 20px;
  }

  .content-fold-a-bottom {
    display: flex;
    background: var(--color3);
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 20px;
    margin-top: 20px;
    box-sizing: border-box;
  }
}

@media (max-width: 1024px) {
  /**CONTENT FOLD A**/
  .content-fold-a-bottom {
    display: flex;
    background: var(--color3);
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 20px;
    margin-top: 20px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 10px;
  }

  .content-fold-a-content {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 540px) {
  /**CONTENT FOLD A**/
  .content-fold-a-img {
    flex: 0 0 300px;
    height: 300px;
  }

  .content-fold-a-bottom p {
    font-size: 20px;
    line-height: 20px;
  }
}

Content Fold B

Lorem Ipsum Dolor Sit Amet

Enquire Here

<div class="content-fold-b">
  <div class="row-container">
    <div class="content-fold-b-wrapper">
      <div class="content-fold-b-img">
        <img
          src="/wp-content/uploads/2022/06/business-consultant-contacts.jpg"
          alt=""
          width="300" />
      </div>

      <div class="content-fold-b-content">
        <div class="content-fold-b-content-inner">
          <p class="title">
            <span class="bold">Lorem Ipsum</span>
            <span class="color-1">Dolor Sit Amet</span>
          </p>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
        <a class="readmore">Enquire Here</a>
      </div>
    </div>
  </div>
</div>

/*CONTENT FOLD B*/
.content-fold-b-wrapper {
  display: flex;
  align-items: stretch;
  padding: 110px 0px;
  gap: 40px;
}

.content-fold-b-img img {
  height: 100%;
  object-fit: cover;
}

.content-fold-b-img {
  flex: 0 0 540px;
}

.content-fold-b-img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.rounded-fold .content-fold-b-img {
  border-radius: 30px;
  overflow: hidden;
}

.circle-fold .content-fold-b-img img {
  clip-path: circle(50%);
}

.content-fold-b-content {
  display: flex;
  flex-direction: column;
}

.content-fold-b {
  background: var(--color3b);
  position: relative;
  z-index: 3;
}

.content-fold-b::before {
  width: 100%;
  height: 150px;
  bottom: 0px;
  left: 0px;
  content: "";
  display: block;
  position: absolute;
  background: var(--color3);
  z-index: -1;
}

.content-fold-b-content .title {
  margin-bottom: 20px;
}

.flipped .content-fold-b-wrapper {
  flex-direction: row-reverse;
}

/* ==== CONTENT FOLD-B ==== */

.animate .content-fold-b-img {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete .content-fold-b-img {
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate .content-fold-b-content {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete .content-fold-b-content {
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

/* ==== CONTENT FOLD-B FLIPPED==== */

.animate.flipped .content-fold-b-img {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete.flipped .content-fold-b-img {
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate.flipped .content-fold-b-content {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete.flipped .content-fold-b-content {
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

@media (max-width: 1024px) {
  .content-fold-b-wrapper {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .content-fold-b-img {
    flex: 0 0 auto;
    width: 100%;
    max-width: 400px;
  }

  .content-fold-b-img img {
    min-height: unset;
  }

  .content-fold-b-content {
    align-items: center;
  }
}

Content Fold C

Lorem Ipsum Dolor Sit Amet

Enquire Here

<div class="content-fold-c">
  <div class="content-fold-c-img">
    <img
      src="/wp-content/uploads/2022/06/mixed-data-contacts.jpg"
      alt=""
      width="300" />
  </div>
  <div class="row-container">
    <div class="content-fold-c-wrapper">
      <div class="content-fold-c-content">
        <div class="content-fold-c-content-inner">
          <p class="title">
            Lorem Ipsum
            <span class="color-1">Dolor Sit Amet</span>
          </p>

          <p class="bold">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
        <a class="readmore">Enquire Here</a>
      </div>
    </div>
  </div>
</div>

/*CONTENT FOLD C*/
.content-fold-c-wrapper {
  display: flex;
  align-items: stretch;
  padding: 150px 0px;
  gap: 40px;
  justify-content: flex-end;
}

.content-fold-c-img img {
  height: 100%;
  object-fit: cover;
}

.content-fold-c-img {
  position: absolute;
  width: calc(50% - 100px);
  height: 100%;
}

.content-fold-c-img img {
  height: 100%;
  object-fit: cover;
  min-height: 500px;
  width: 100%;
}

.content-fold-c-content {
  display: flex;
  flex-direction: column;
  width: calc(50% + 60px);
}

.content-fold-c {
  background: var(--color3b);
  position: relative;
}

.content-fold-c-content .title {
  margin-bottom: 20px;
}

.flipped .content-fold-c-wrapper {
  flex-direction: row-reverse;
}

.flipped .content-fold-c-img {
  right: 0;
}

/* ==== CONTENT FOLD-C ==== */

.animate .content-fold-c-img {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete .content-fold-c-img {
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate .content-fold-c-content {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete .content-fold-c-content {
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

/* ==== CONTENT FOLD-C FLIPPED ==== */

.animate.flipped .content-fold-c-img {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(1000px);
  -webkit-transform: translateX(1000px);
}

.animate.animate-complete.flipped .content-fold-c-img {
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate.flipped .content-fold-c-content {
  transition: all 0s ease;
  opacity: 0;
  transform: translateX(-1000px);
  -webkit-transform: translateX(-1000px);
}

.animate.animate-complete.flipped .content-fold-c-content {
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

@media (max-width: 1024px) {
  /*CONTENT FOLD C*/
  .content-fold-c-wrapper {
    display: flex;
    align-items: stretch;
    padding: 40px 0px;
    gap: 40px;
    justify-content: flex-end;
    text-align: center;
  }

  .content-fold-c-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .content-fold-c-img {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
  }
}

@media (max-width: 540px) {
  /*CONTENT FOLD C*/
  .content-fold-c-wrapper {
    display: flex;
    align-items: stretch;
    padding: 40px 0px;
    gap: 40px;
    justify-content: flex-end;
    text-align: center;
  }

  .content-fold-c-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .content-fold-c-img {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
  }
}

Module Fold A

Services

Recycling and Reclaimation

Services

Recycling and Reclaimation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
Read more
Services

Drone Surveying

Services

Drone Surveying

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
Read more
Services

Crushing

Services

Crushing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
Read more
Services

Roadsweeping

Services

Roadsweeping

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
Read more

<div class="module-fold-a animate">
  <div class="module-fold-a-slider splide" id="module-fold-a-splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <div class="module-fold-a-item">
            <div class="module-fold-a-item-front">
              <div class="module-fold-a-item-background">
                <img
                  src="/wp-content/uploads/2024/07/prestige-services-image1.jpg"
                />
              </div>
              <div class="module-fold-a-item-front-content">
                <p class="small">Services</p>
                <p class="big">Recycling and Reclaimation</p>
              </div>
            </div>
            <div class="module-fold-a-item-back">
              <p class="small">Services</p>
              <p class="big">Recycling and Reclaimation</p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut
              </p>
              <a class="readmore">Read more</a>
            </div>
          </div>
        </li>
        <li class="splide__slide">
          <div class="module-fold-a-item">
            <div class="module-fold-a-item-front">
              <div class="module-fold-a-item-background">
                <img
                  src="/wp-content/uploads/2024/07/prestige-services-image2.jpg"
                />
              </div>
              <div class="module-fold-a-item-front-content">
                <p class="small">Services</p>
                <p class="big">Drone Surveying</p>
              </div>
            </div>
            <div class="module-fold-a-item-back">
              <p class="small">Services</p>
              <p class="big">Drone Surveying</p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut
              </p>
              <a class="readmore">Read more</a>
            </div>
          </div>
        </li>
        <li class="splide__slide">
          <div class="module-fold-a-item">
            <div class="module-fold-a-item-front">
              <div class="module-fold-a-item-background">
                <img
                  src="/wp-content/uploads/2024/07/prestige-services-image3.jpg"
                />
              </div>
              <div class="module-fold-a-item-front-content">
                <p class="small">Services</p>
                <p class="big">Crushing</p>
              </div>
            </div>
            <div class="module-fold-a-item-back">
              <p class="small">Services</p>
              <p class="big">Crushing</p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut
              </p>
              <a class="readmore">Read more</a>
            </div>
          </div>
        </li>
        <li class="splide__slide">
          <div class="module-fold-a-item">
            <div class="module-fold-a-item-front">
              <div class="module-fold-a-item-background">
                <img
                  src="/wp-content/uploads/2024/07/prestige-services-image4.jpg"
                />
              </div>
              <div class="module-fold-a-item-front-content">
                <p class="small">Services</p>
                <p class="big">Roadsweeping</p>
              </div>
            </div>
            <div class="module-fold-a-item-back">
              <p class="small">Services</p>
              <p class="big">Roadsweeping</p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut
              </p>
              <a class="readmore">Read more</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

/**MODULE FOLD A**/
.module-fold-a .splide.is-initialized:not(.is-active) ul.splide__list {
  display: flex;
  align-items: stretch;
}

.module-fold-a-item {
  height: 100%;
}

.module-fold-a {
  position: relative;
  height: 480px;
}

.module-fold-a-item-back {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  color: white;
  gap: 0px;
  opacity: 0;
  transition: all .5s ease;
  backdrop-filter: blur(15px);
  background: #11111177;
}

.module-fold-a-item-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--black), var(--color1));
  opacity: 0.6;
}


.module-fold-a-item-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--black), #29292999);
  opacity: 0.5;
}

.module-fold-a-item-back * {
  position: relative;
  z-index: 3;
}

.module-fold-a-item p.small {
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color1);
  margin: 0;
}

.module-fold-a-item p.big {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-transform: uppercase;
}

.module-fold-a-item-front * {
  margin: 0;
}

.module-fold-a-item-front-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  color: white;
  transition: all .5s ease;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.module-fold-a-item:hover .module-fold-a-item-back{
  opacity: 1;
}

.module-fold-a-item:hover .module-fold-a-item-front-content {
  opacity: 0;
}

.module-fold-a-item-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.module-fold-a-item-front {
  height: 100%;
  width: 100%;
  text-align: left;
}


.module-fold-a-item-background {
  height: 100%;
  position: relative;
}

.module-fold-a-item-background::before {
  width: 100%;
  height: 100%;
  background: var(--color0);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.module-fold-a-item-back .readmore {
  color: white;
  margin: 0;
}

@media (min-width: 1024px) {
  .animate.module-fold-a li {
    transition: all 0s ease;
    opacity: 0;
    transform: translateY(1000px);
    -webkit-transform: translateY(1000px);
  }

  .animate.animate-complete.module-fold-a li {
    transition: all 0.5s ease;
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }

  .animate.animate-complete.module-fold-a li:nth-child(4n - 3) {
    transition: all 0.5s ease 0s;
  }

  .animate.animate-complete.module-fold-a li:nth-child(4n - 2) {
    transition: all 0.5s ease 0.25s;
  }

  .animate.animate-complete.module-fold-a li:nth-child(4n - 1) {
    transition: all 0.5s ease 0.5s;
  }
  .animate.animate-complete.module-fold-a li:nth-child(4n - 0) {
    transition: all 0.5s ease 0.75s;
  }
}

@media (max-width: 1200px) {
  /**MODULE FOLD A**/
  .module-fold-a-item-wrapper {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  /**MODULE FOLD A**/

  .module-fold-a-item-img {
    flex: 0 0 300px;
    height: 300px;
  }
  .module-fold-a-item {
    flex: 0 0 calc(50% - 20px);
    display: flex;
    text-align: left;
    gap: 20px;
    align-items: center;
    min-height: 300px;
    flex-direction: column;
    text-align: center;
  }
}

jQuery(document).ready(function () {
  let splide = new Splide("#module-fold-a-splide", {
    type: "loop",
    perPage: 4,
    direction: "ltr",
    autoHeight: true,
    lazyload: false,
    pagination: false,
    arrows: false,
    snap: true,
    focus: "0",
    breakpoints: {
      700: {
        perPage: 1,
      },

      1024: {
        perPage: 2,
      },

      1200: {
        perPage: 3,
      },
    },
  });
  splide.mount();
});

Module Fold B

Nationwide

Services

Solar Panels

At [company], we design and install solar panels to cut costs and carbon footprints.

Read More
Solar Carports

Our solar carports offer shade, generate electricity, support EVs, and reduce carbon emissions efficiently.

Read More
Battery Storage

We offer commercial battery storage systems to cut costs, boost energy independence, and support sustainability.

Read More
Carbon Reporting

Our Carbon Footprint Reporting tracks and reveals our emissions, helping us improve and save costs.

Read More
Electrical Installations

At [company], we offer expert commercial electrical installations, maintenance, and fit-outs services.

Read More

Solar PV

Installing solar panels on your roof helps you save on electricity bills and benefits the environment.

Read More
EV Chargers

You can rely on [company] to install a safe, efficient EV charger at your home.

Read More
Battery Storage

[company] provides and installs home storage batteries, ensuring reliable and efficient energy solutions for you.

Read More

Commercial Maintenance

[company]'s commercial maintenance electricians handle all electrical issues, ensuring safety and efficiency.

Read More
Electrical Repairs

Trust [company] for thorough electrical compliance testing, ensuring safety and up-to-code systems.

Read More
Infared Heating

Switching to infrared heaters helps you reduce emissions and embrace a more sustainable, electric heating solution.

Read More

<div class="module-fold-b animate">
  <div class="row-container">
    <div class="module-fold-b-container">
      <div class="content-header">
        <div class="content-header-subtext">
          <p class="subtext">Nationwide</p>
        </div>
        <div class="content-header-title">
          <p class="title">Services</p>
        </div>
        <div class="content-header-readmore-wrapper switch-wrapper">
          <button
            data-filter=".commercial"
            class="content-header-readmore button commercial active">
            <div class="content-header-readmore-button-padding">
              <div class="content-header-readmore-icon">
                <lord-icon
                  src="https://cdn.lordicon.com/xljaewpt.json"
                  trigger="hover"
                  delay="0"
                  stroke="bold"
                  colors="primary:#bd1819,secondary:#bd1819"
                  style="width: 50px; height: 50px">
                </lord-icon>
              </div>
              <div class="content-header-readmore-text">
                <p>Commercial</p>
              </div>
            </div>
          </button>
          <button
            data-filter=".residential"
            class="content-header-readmore button residential">
            <div class="content-header-readmore-button-padding">
              <div class="content-header-readmore-icon">
                <lord-icon
                  src="https://cdn.lordicon.com/laqlvddb.json"
                  trigger="hover"
                  delay="0"
                  stroke="bold"
                  colors="primary:#bd1819,secondary:#bd1819"
                  style="width: 50px; height: 50px">
                </lord-icon>
              </div>
              <div class="content-header-readmore-text">
                <p>Residential</p>
              </div>
            </div>
          </button>
          <button
            data-filter=".electrical"
            class="content-header-readmore button electrical">
            <div class="content-header-readmore-button-padding">
              <div class="content-header-readmore-icon">
                <lord-icon
                  src="https://cdn.lordicon.com/wugjrsed.json"
                  trigger="hover"
                  delay="0"
                  stroke="bold"
                  colors="primary:#bd1819,secondary:#bd1819"
                  style="width: 50px; height: 50px">
                </lord-icon>
              </div>
              <div class="content-header-readmore-text">
                <p>Electrical</p>
              </div>
            </div>
          </button>
        </div>
      </div>

      <div class="module-fold-b-slider switch-item commercial active">
        <div class="splide" id="module-fold-b-splide-a">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Solar Panels</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          At [company], we design and install solar panels to
                          cut costs and carbon footprints.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/commercial-solar-panels/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Solar Carports</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          Our solar carports offer shade, generate electricity,
                          support EVs, and reduce carbon emissions efficiently.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/commercial-solar-carport/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Battery Storage</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          We offer commercial battery storage systems to cut
                          costs, boost energy independence, and support
                          sustainability.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/commercial-battery-storage/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Carbon Reporting</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          Our Carbon Footprint Reporting tracks and reveals our
                          emissions, helping us improve and save costs.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/carbon-reporting/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Electrical Installations</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          At [company], we offer expert commercial electrical
                          installations, maintenance, and fit-outs services.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/commercial-electricians/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="module-fold-b-slider switch-item residential">
        <div class="splide" id="module-fold-b-splide-b">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Solar PV</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          Installing solar panels on your roof helps you save on
                          electricity bills and benefits the environment.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/solar-panel-system-for-home/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">EV Chargers</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          You can rely on [company] to install a safe, efficient
                          EV charger at your home.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/ev-chargers-for-home/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Battery Storage</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          [company] provides and installs home storage
                          batteries, ensuring reliable and efficient energy
                          solutions for you.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/home-battery-storage/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="module-fold-b-slider switch-item electrical">
        <div class="splide" id="module-fold-b-splide-c">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Commercial Maintenance</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          [company]'s commercial maintenance electricians handle
                          all electrical issues, ensuring safety and efficiency.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a
                          class="readmore"
                          href="/commercial-electrical-maintenance/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Electrical Repairs</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          Trust [company] for thorough electrical compliance
                          testing, ensuring safety and up-to-code systems.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a
                          class="readmore"
                          href="/electrical-testing-compliance/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="splide__slide">
                <div class="module-fold-b-splide-item">
                  <div class="module-fold-b-splide-item-img">
                    <img
                      src="/wp-content/uploads/woocommerce-placeholder.png" />
                  </div>
                  <div class="module-fold-b-splide-item-content-block">
                    <div
                      class="module-fold-b-splide-item-content-block-padding">
                      <div class="module-fold-b-splide-item-subtext">
                        <p class="subtext">Infared Heating</p>
                      </div>
                      <div class="module-fold-b-splide-item-content">
                        <p>
                          Switching to infrared heaters helps you reduce
                          emissions and embrace a more sustainable, electric
                          heating solution.
                        </p>
                      </div>
                      <div class="module-fold-b-splide-item-readmore">
                        <a class="readmore" href="/electric-infrared-heater/"
                          >Read More</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

/*=== == MODULE FOLD-B == ==*/

.module-fold-b-splide-item-img img {
  transform: scale(1.05);
  border-radius: 10px;
  max-height: 275px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.module-fold-b-slider ul.module-fold-b .splide__pagination {
  display: flex !important;
}

.module-fold-b-slider .splide__slide {
  display: flex;
}

.module-fold-b-splide-item-content-block {
  flex: 1;
  display: flex;
}

.module-fold-b-splide-item-readmore {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.module-fold-b-slider.active {
  display: block;
}

.module-fold-b-splide-item-subtext {
  margin: 0px 0px 15px;
}

.module-fold-b-splide-item-content-block-padding {
  padding: 30px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.module-fold-b-container .content-header {
  padding-top: 40px;
  padding-bottom: 25px;
}

.module-fold-b-slider {
  padding-bottom: 100px;
  display: none;
}

.module-fold-b-splide-item-subtext .subtext {
  font-weight: 600;
}

.module-fold-b-splide-item {
  background: whitesmoke;
  border-radius: 10px;
  transform: scale(0.9);
  display: flex;
  flex-direction: column;
}

  /*== == MODULE FOLD-B END == ==*/

  /*== == CONTENT HEADER == ==*/

.content-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0px 50px;
  max-width: 700px;
  margin: 0px auto;
}

/* Active state with consistent background handling */
.content-header-readmore.button.active {
  background-color: var(--color1) !important; /* Ensure the background applies consistently */
}

/* Base button styling */
.content-header-readmore.button {
  display: inline-block;  /* Ensures it behaves like a button across platforms */
  width: 220px;
  background-color: whitesmoke;  /* Use background-color for better compatibility */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 500ms ease, transform 500ms ease; /* Transition background and other properties smoothly */
  padding: 10px 0;  /* Add padding to make it visually consistent across platforms */
  border: none;
  -webkit-appearance: none; /* Disable default iOS button styling */
  -moz-appearance: none;    /* Ensure the same for Firefox */
  appearance: none;         /* General reset for native styling */
  text-align: center;       /* Center text within the button */
  line-height: normal;      /* Ensures text is vertically aligned within the padding */
  font-family: inherit;     /* Consistency across platforms */
}

.content-header-readmore.button:hover {
  background: var(--color1);
}

.content-header-readmore.button.active {
  background:var(--color1);
}

.content-header-readmore.button:hover lord-icon,
.content-header-readmore.button.active lord-icon{
  filter: brightness(11);
}

.content-header-readmore.button p{
  transition:all 500ms ease;
}

.content-header-readmore.button:hover p,
.content-header-readmore.button.active p{
  color:white;
}

.content-header-readmore-button-padding{
  align-items: center;
  display: flex;
  padding: 10px 15px;
  gap: 10px;
}

.content-header-readmore-text {
  flex: 1;
  text-align: center;
}

.content-header-readmore-wrapper {
  display: flex;
  gap: 20px;
  padding-top: 20px;
}

.content-header-readmore.button p {
  margin: 0px;
  font-size: 20px;
  line-height: 1;
}

.content-header-subtext .subtext {
  margin: 0px;
  color: var(--color1);
}

  /*== == CONTENT HEADER END == ==*/

  .module-fold-b .splide__list {
    height: auto;
}

/*== == PAGINATION === ==*/

.module-fold-b .splide__pagination {
  padding-left: 0px;
  gap: 10px;
  display: flex !important;
}

.module-fold-b .splide__pagination li {
  display: flex;
}

.module-fold-b .splide__pagination li button {
  padding: 5px;
  border-radius: 50%;
  border: none;
  background: var(--color1);
  opacity: .4;
  transition: all 500ms ease;
  cursor: pointer;
}

.module-fold-b .splide__pagination li button.is-active {
  opacity: 1;
}

  /*== == PAGINATION END == ==*/

.animate .module-fold-b-slider.switch-item {
  opacity: 0;
  transition: all 500ms ease;
  transform-origin:center;
}

.animate.animate-complete .module-fold-b-slider.switch-item {
  opacity: 1;
  transition: all 500ms ease 1200ms;
}

.animate .content-header-subtext {
  transform: scale(0);
  opacity: 0;
  transition: all 500ms ease;
  transform-origin:center;
}

.animate.animate-complete .content-header-subtext {
  transform: scale(1);
  opacity: 1;
  transition: all 500ms ease;
}

.animate .content-header-title {
  transition: all 500ms ease;
  transform: scale(0);
  opacity: 0;
  transform-origin:center;
}

.animate.animate-complete .content-header-title {
  transition: all 500ms ease 300ms;
  transform: scale(1);
  opacity: 1;
}

.animate .content-header-inner{
  transition: all 500ms ease;
  transform: scale(0);
  opacity: 0;
  transform-origin:center;    
}

.animate.animate-complete .content-header-inner{
  transition: all 500ms ease 600ms;
  transform: scale(1);
  opacity: 1;
}

.animate .content-header-readmore-wrapper.switch-wrapper {
  transform: scale(0);
  opacity: 0;
  transition: all 500ms ease;
  transform-origin:center;
}

.animate.animate-complete .content-header-readmore-wrapper.switch-wrapper {
  transform: scale(1);
  opacity: 1;
  transition: all 500ms ease 900ms;
}

@media(max-width: 1200px){
    .module-fold-b .row-container {
        padding: 0px;
    }
    
    .module-fold-b-splide-item-content-block-padding {
        text-align: center;
    }
    
    .module-fold-b-splide-item-content-block-padding .readmore {
        width: 100%;
    }
    
}

function initializeSplide(selector) {
  const splide = new Splide(selector, {
    type: "loop",
    perPage: 3,
    direction: "ltr",
    autoHeight: true,
    lazyload: false,
	pagination: true,
    arrows: false,
	  snap: true,
    focus: "center",
    breakpoints: {
      300: {
        perPage: 1,
      },
		640: {
      perPage: 1,
    },
		1024:{
			perPage:2,
		},
    },
  });
  splide.mount();
}
jQuery(document).ready(function () {
  initializeSplide("#module-fold-b-splide-a");
  initializeSplide("#module-fold-b-splide-b");
  initializeSplide("#module-fold-b-splide-c");
});

//BUTTON NAVIGATION
jQuery("body").on("click", '.switch-wrapper button', function() {
  // Get the class related to filtering from the button's data attribute
  var filterClass = jQuery(this).data('filter').substring(1); // Remove the leading dot
  
  // Set the clicked button as active and remove 'active' from siblings
  jQuery(this).addClass('active').siblings().removeClass('active');
  
  // Debugging information
  console.log(filterClass);
  
  if (filterClass === 'all') {
      jQuery('.switch-item').addClass('active');
  } else {
      jQuery('.switch-item').each(function() {
          var $this = jQuery(this);
          if ($this.hasClass(filterClass)) {
              $this.addClass('active');
          } else {
              $this.removeClass('active');
          }
      });
  }
});

Page Break A

+18MW

+18MW Installed in the last 2 years.
600+

600+ EV Charging Units installed in the last 2 years.
+£10M

Over £10million in lifetime savings for our clients.

<div class="page-break-a animate">
  <div class="row-container">
    <div class="page-break-a-wrapper">
      <div class="splide" id="page-break-a-splide">
        <div class="splide__track">
          <ul class="splide__list">
            <li class="splide__slide">
              <div class="page-break-a-item">
                <div class="page-break-a-item-icon">
                  <lord-icon
                    src="https://cdn.lordicon.com/djgcprqf.json"
                    trigger="loop"
                    delay="2000"
                    stroke="light"
                    colors="primary:#ffffff,secondary:#ffffff"
                    style="width: 120px; height: 120px">
                  </lord-icon>
                </div>
                <div class="page-break-a-item-content">
                  <p class="subtitle">+18MW</p>
                  <p>+18MW Installed in the last 2 years.</p>
                </div>
              </div>
            </li>
            <li class="splide__slide">
              <div class="page-break-a-item">
                <div class="page-break-a-item-icon">
                  <script src="https://cdn.lordicon.com/lordicon.js"></script>
                  <lord-icon
                    src="https://cdn.lordicon.com/spocisyw.json"
                    trigger="loop"
                    delay="3000"
                    stroke="light"
                    colors="primary:#ffffff,secondary:#ffffff"
                    style="width: 120px; height: 120px">
                  </lord-icon>
                </div>
                <div class="page-break-a-item-content">
                  <p class="subtitle">600+</p>
                  <p>600+ EV Charging Units installed in the last 2 years.</p>
                </div>
              </div>
            </li>
            <li class="splide__slide">
              <div class="page-break-a-item">
                <div class="page-break-a-item-icon">
                  <script src="https://cdn.lordicon.com/lordicon.js"></script>
                  <lord-icon
                    src="https://cdn.lordicon.com/nkfxhqqr.json"
                    trigger="loop"
                    delay="1000"
                    stroke="light"
                    colors="primary:#ffffff,secondary:#ffffff"
                    style="width: 120px; height: 120px">
                  </lord-icon>
                </div>
                <div class="page-break-a-item-content">
                  <p class="subtitle">+£10M</p>
                  <p>Over £10million in lifetime savings for our clients.</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

ul#page-break-a-splide-list {
    height: auto;
}

/*== == MODULE FOLD D === ==*/

.page-break-a {
    background: rgb(33,177,34);
    background: linear-gradient(270deg, rgb(177, 33, 33) 0%, rgb(107, 33, 33) 100%);
}

.page-break-a .splide__pagination li button {
    background: white;
}

.page-break-a .splide__pagination {
    padding-bottom: 20px;
}

.page-break-a-item {
    color: white;
    display: flex;
    padding: 60px 20px;
    box-shadow: 0px 0px 12px -7px black;
}

.page-break-a-wrapper {
    padding: 0px 0px;
}

.page-break-a-item-content .subtitle {
    font-weight: 600;
}

    /*== == MODULE FOLD D END == ==*/

/*== == MODULE FOLD D === ==*/

.page-break-a {
  background: rgb(33,177,34);
  background: linear-gradient(270deg, rgba(33,177,34,1) 0%, rgba(33,107,33,1) 100%);
}

#fold1-splide .splide__pagination li button {
  background: white;
}

.page-break-a .splide__pagination li button {
  background: white;
}

.page-break-a .splide__pagination {
  padding-bottom: 20px;
}

.page-break-a-item {
  color: white;
  display: flex;
  padding: 60px 20px;
  box-shadow: 0px 0px 12px -7px black;
}

.page-break-a-wrapper {
  padding: 0px 0px;
}

.page-break-a-item-content .subtitle {
  font-weight: 600;
}

  /*== == MODULE FOLD D END == ==*/

jQuery(document).ready(function () {
  let splide = new Splide("#page-break-a-splide", {
    type: "loop",
    perPage: 3,
    direction: "ltr",
    autoHeight: true,
    lazyload: false,
    pagination: false,
    arrows: false,
    snap: true,
    gap: "0px",
    breakpoints: {
      767: {
        perPage: 1,
        pagination: true,
      },

      1024: {
        perPage: 2,
      },
    },
  });
  splide.mount();
});

Review Fold A

Testimonials

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe

Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Jane Doe

Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="review-fold-a animate">
  <div class="review-fold-a-top">
    <div class="row-container">
      <p class="subtitle">Testimonials</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </div>
  <div class="review-fold-a-bottom">
    <div class="row-container">
      <div class="review-fold-a-items splide" id="review-fold-a-items">
        <div class="splide__track">
          <ul class="splide__list">
            <li class="splide__slide">
              <div class="review-fold-a-item">
                <div class="review-fold-a-left">
                  <img
                    src="/wp-content/uploads/2024/07/prestige-testimonial-image1.png" />
                  <p class="big">John Doe</p>
                  <p class="small">Location</p>
                </div>
                <div class="review-fold-a-divider"></div>
                <div class="review-fold-a-right">
                  <i class="fa-sharp fa-solid fa-quote-left"></i>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </p>
                  <p>
                    Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur.
                  </p>
                </div>
              </div>
            </li>
            <li class="splide__slide">
              <div class="review-fold-a-item">
                <div class="review-fold-a-left">
                  <img
                    src="/wp-content/uploads/2024/07/prestige-testimonials-image2.png" />
                  <p class="big">Jane Doe</p>
                  <p class="small">Location</p>
                </div>
                <div class="review-fold-a-divider"></div>
                <div class="review-fold-a-right">
                  <i class="fa-sharp fa-solid fa-quote-left"></i>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </p>
                  <p>
                    Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur.
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

.review-fold-a .splide.is-initialized:not(.is-active) ul.splide__list {
  display: flex;
  align-items: stretch;
}

.review-fold-a-item {
  background: var(--color0);
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: white;
  height: auto;
}

.review-fold-a-item-back {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  color: white;
  gap: 0px;
  opacity: 0;
  transition: all .5s ease;
  backdrop-filter: blur(15px);
  background: #e03f3d99;
}

.review-fold-a-item-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--black), var(--color1));
  opacity: 0.6;
}


.review-fold-a-item-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--black), #29292999);
  opacity: 0.5;
}

.review-fold-a-item-back * {
  position: relative;
  z-index: 3;
}

.review-fold-a-item p.small {
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color1);
  margin: 0;
}

.review-fold-a-item p.big {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 5px;
}

.review-fold-a-item-front * {
  margin: 0;
}

.review-fold-a-item-front-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  color: white;
  transition: all .5s ease;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.review-fold-a-item:hover .review-fold-a-item-back{
  opacity: 1;
}

.review-fold-a-item:hover .review-fold-a-item-front-content{
  opacity: 0;
}

.review-fold-a-item-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-fold-a-item-front {
  height: 100%;
}

.review-fold-a-item-background {
  height: 100%;
  position: relative;
}

.review-fold-a-item-background::before {
  width: 100%;
  height: 100%;
  background: var(--color0);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
}

.review-fold-a-item-back .readmore {
  color: white;
  margin: 0;
  border-color: white;
}
.review-fold-a {
  padding: 70px 0px;
  overflow: hidden;
}

.review-fold-a .subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.review-fold-a .subtitle::after {
  position: relative;
  content: '';
  width: 100px;
  height: 3px;
  background: var(--color1);
  display: block;
  margin-top: 10px;
  margin-bottom: 0px;
}

.review-fold-a-top {
  text-align: center;
  margin-bottom: 80px;
}

div#review-fold-a-items:not(.is-active) ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  }

div#review-fold-a-items:not(.is-active) ul li {
  flex: 0 0 calc((100% - 10px) / 3);
}

div#review-fold-a-items-track {
  overflow: visible;
}

ul#review-fold-a-items-list li {
  opacity: 0.4;
}

ul#review-fold-a-items-list li.is-visible {
  opacity: 1;
}

.review-fold-a-left {
  flex: 0 0 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.review-fold-a-left img {
  margin-bottom: 20px;
}

.review-fold-a-right {
  text-align: center;
  padding: 90px 20px;
}

.review-fold-a-divider {
  width: 2px;
  background: #ffffff55;
  margin: 20px auto;
  flex: 0 0 2px;
}

.review-fold-a-right i{
  font-size: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}

ul#review-fold-a-items-list {
  height: auto;
}

.animate .review-fold-a-top{
  transition: all 0s ease;
  opacity: 0;
  transform: translateY(-1000px);
  -webkit-transform: translateY(-1000px);
}

.animate.animate-complete .review-fold-a-top{
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.animate .review-fold-a-items{
  transition: all 0s ease;
  opacity: 0;
  transform: translateY(1000px);
  -webkit-transform: translateY(1000px);
}

.animate.animate-complete .review-fold-a-items{
  transition: all 0.5s ease 0.5s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

@media (max-width: 640px) {
  .review-fold-a-item {
    flex-direction: column;
  }

  .review-fold-a-divider {
    width: 100%;
    margin: 0px 20px;
  }

  .review-fold-a-right {
    padding: 20px;
  }
}

jQuery(document).ready(function () {
  let splide = new Splide("#review-fold-a-items", {
    type: "loop",
    perPage: 2,
    direction: "ltr",
    autoHeight: true,
    lazyload: false,
    pagination: false,
    arrows: false,
    snap: true,
    focus: "0",
    gap: "10px",
    breakpoints: {
      1024: {
        perPage: 1,
      },
    },
  });
  splide.mount();
});

Contact Us Today