diff --git a/blocks/hero-carousel/hero-carousel.css b/blocks/hero-carousel/hero-carousel.css
new file mode 100644
index 00000000..f3b88956
--- /dev/null
+++ b/blocks/hero-carousel/hero-carousel.css
@@ -0,0 +1,23 @@
+.carousel-dots {
+    position: absolute;
+    bottom: 14px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+.carousel-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 14px;
+    background-color: #fff;
+    margin: 0 5px;
+    cursor: pointer;
+}
+
+.carousel-dot.active {
+    background-color: #ec8f2d;
+}
\ No newline at end of file
diff --git a/blocks/hero-carousel/hero-carousel.js b/blocks/hero-carousel/hero-carousel.js
new file mode 100644
index 00000000..4fe1677b
--- /dev/null
+++ b/blocks/hero-carousel/hero-carousel.js
@@ -0,0 +1,94 @@
+export default function decorate(block) {
+  const slides = [...block.children];
+  const slideCount = slides.length;
+  let currentIndex = 0;
+  let interval;
+  let touchStartX = 0;
+
+  // Add CSS class to all child elements to style them
+  slides.forEach((element, index) => {
+    element.classList.add('hero-carousel-slide');
+    if (index === 0) {
+      element.classList.add('active');
+    }
+  });
+
+  const dotsContainer = document.createElement('div');
+
+  // Function to update the active dot
+  function updateDots() {
+    const dots = dotsContainer.querySelectorAll('.carousel-dot');
+    dots.forEach((dot, index) => {
+      if (index === currentIndex) {
+        dot.classList.add('active');
+      } else {
+        dot.classList.remove('active');
+      }
+    });
+  }
+
+  // Function to navigate to a specific slide
+  function goToSlide(index) {
+    slides[currentIndex].classList.remove('active');
+    currentIndex = index;
+    slides[currentIndex].classList.add('active');
+    updateDots();
+  }
+
+  // Function to show the next slide
+  function showNextSlide() {
+    slides[currentIndex].classList.remove('active');
+    currentIndex = (currentIndex + 1) % slideCount;
+    slides[currentIndex].classList.add('active');
+    updateDots();
+  }
+
+  // Create dots for each slide
+  dotsContainer.classList.add('carousel-dots');
+  for (let i = 0; i < slideCount; i += 1) {
+    const dot = document.createElement('div');
+    dot.classList.add('carousel-dot');
+    dot.addEventListener('click', () => {
+      goToSlide(i);
+    });
+    if (i === 0) {
+      dot.classList.add('active');
+    }
+    dotsContainer.appendChild(dot);
+  }
+  block.appendChild(dotsContainer);
+
+  // Touch event handling
+  block.addEventListener('touchstart', (e) => {
+    touchStartX = e.touches[0].clientX;
+  });
+
+  block.addEventListener('touchend', (e) => {
+    const touchEndX = e.changedTouches[0].clientX;
+    const deltaX = touchEndX - touchStartX;
+
+    // If the touch ends to the right of the starting position, move to the previous slide
+    if (deltaX > 50 && currentIndex > 0) {
+      goToSlide(currentIndex - 1);
+      clearInterval(interval);
+      interval = setInterval(showNextSlide, 7000);
+    } else if (deltaX < -50 && currentIndex < slideCount - 1) {
+      goToSlide(currentIndex + 1);
+      clearInterval(interval);
+      interval = setInterval(showNextSlide, 7000);
+    }
+  });
+
+  // Start the automatic slide transition
+  interval = setInterval(showNextSlide, 7000); // Change slide every 7 seconds
+
+  // Pause the automatic transition when a user hovers over the carousel
+  block.addEventListener('mouseenter', () => {
+    clearInterval(interval);
+  });
+
+  // Resume the automatic transition when a user leaves the carousel
+  block.addEventListener('mouseleave', () => {
+    interval = setInterval(showNextSlide, 7000);
+  });
+}
diff --git a/icons/white-arrow-bg.svg b/icons/white-arrow-bg.svg
new file mode 100644
index 00000000..e0c81b79
--- /dev/null
+++ b/icons/white-arrow-bg.svg
@@ -0,0 +1,8 @@
+<svg id="Layer_1" data-name="Layer 1" opacity="0.5"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 250">
+    <defs>
+        <style>.cls-1{fill:#fff;}</style>
+    </defs>
+    <title>white</title>
+    <polygon class="cls-1" points="800 124.64 728.04 0 71.96 0 0 124.64 72.38 250 727.62 250 800 124.64"/>
+</svg>
\ No newline at end of file
diff --git a/styles/Typo.css b/styles/Typo.css
index 72f3abad..43fd7ebb 100644
--- a/styles/Typo.css
+++ b/styles/Typo.css
@@ -1148,6 +1148,288 @@ form.hs-form .hs-input[type="checkbox"] {
     }
 }
 
+/* hero block code */
+@keyframes fade {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+.hero-carousel {
+    position: relative;
+}
+
+.hero-carousel-slide {
+    position: relative;
+    animation: fade-out 0.3s ease-in-out;
+    display: none;
+}
+
+.hero-carousel-slide > div:nth-child(1) picture > img {
+    height: 500px;
+    width: 100%;
+    object-fit: cover;
+}
+
+.hero-carousel-slide > div:nth-child(2) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 50%;
+    align-items: center;
+    text-align: center;
+    display: flex;
+    color: #fff;
+    justify-content: center;
+    flex-direction: column;
+    background: url('/icons/white-arrow-bg.svg');
+    background-repeat: no-repeat;
+    background-position-x: right;
+    background-size: cover;
+    overflow: hidden;
+}
+
+.hero-carousel-slide > div:nth-child(2) > * {
+    max-width: 380px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Additional styling for the carousel container */
+.carousel-container {
+    width: 100%;
+    overflow: hidden;
+}
+
+.hero-carousel-slide.active {
+    display: block;
+    animation: fade 0.3s ease-in-out;
+}
+
+.hero-carousel p {
+    font-family: Brown-Ald,Helvetica,Arial,sans-serif;
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -.04em;
+    line-height: 1.6;
+    padding: 0 0 .6em;
+    color:  #0d233e;
+}
+
+.hero-carousel a {
+    background-color: #e46b29;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0 0 0 / 26%);
+    color: #fff;
+    display: inline-block;
+    font-size: 19px;
+    font-weight: 700;
+    line-height: 1.2;
+    padding: 1em 2em;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: all .3s
+}
+
+.hero-carousel a:hover {
+    background-color: #1a1919;
+    border-color: #1a1919;
+    color: #fff;
+}
+
+.hero-carousel h2 {
+    font-size: 40px;
+    padding-top: 0;
+}
+
+
+
+@media (max-width: 1120px) {
+    .hero-carousel h2 {
+        font-size: 35px
+    }
+
+    .hero-carousel h1 {
+        font-size: 40px
+    }
+}
+
+@media (max-width: 960px) {
+    .hero-carousel {
+        height: 360px;
+    }
+
+    .hero-carousel-slide > div:nth-child(2) {
+        width: 60%;
+    }
+
+    .hero-carousel-slide > div:nth-child(2) > * {
+        max-width: 360px;
+    }
+
+    .hero-carousel-slide > div:nth-child(1) picture > img {
+        height: 360px;
+    }
+
+    .hero-carousel h2 {
+        font-size: 30px
+    }
+
+    .hero-carousel h1 {
+        font-size: 35px
+    }
+
+    .hero-carousel p {
+        font-size: 24px
+    }
+
+    .hero-carousel a {
+        font-weight: 400;
+        padding: .8em 1.5em
+    }
+}
+
+@media (max-width: 767px) {
+    .hero-carousel {
+        height: 300px;
+    }
+
+    .hero-carousel-slide > div:nth-child(2) {
+        width: 70%;
+    }
+
+    .hero-carousel-slide > div:nth-child(2) > * {
+        max-width: 320px;
+    }
+
+    .hero-carousel-slide > div:nth-child(1) picture > img {
+        height: 300px;
+    }
+
+    .hero-carousel h2 {
+        font-size: 28px
+    }
+
+    .hero-carousel h1 {
+        font-size: 30px
+    }
+
+    .hero-carousel p {
+        font-size: 18px
+    }
+
+    .hero-carousel a {
+        font-size: 17px;
+        padding: .8em 1.4em
+    }
+}
+
+@media (max-width: 667px) {
+    .hero-carousel {
+        height: 270px;
+    }
+
+    .hero-carousel-slide > div:nth-child(1) picture > img {
+        height: 270px;
+    }
+
+    .hero-carousel a {
+        font-size: 15px
+    }
+}
+
+@media (max-width: 640px) {
+    .hero-carousel {
+        height: 230px
+    }
+
+    .hero-carousel-slide > div:nth-child(1) picture > img {
+        height: 230px;
+    }
+
+    .hero-carousel a {
+        font-size: 14px
+    }
+}
+
+@media (max-width: 479px) {
+    .hero-carousel {
+        height: 220px
+    }
+
+    .hero-carousel-slide > div:nth-child(1) picture > img {
+        height: 220px;
+    }
+
+    .hero-carousel p {
+        font-size: 20px;
+    }
+
+    .hero-carousel a {
+        padding: .8em 1.2em
+    }
+}
+
+@media (max-width: 374px) {
+    .hero-carousel {
+        height: 220px;
+    }
+
+    .hero-carousel-slide > div:nth-child(1) picture > img {
+        height: 220px;
+    }
+
+    .hero-carousel p {
+        font-size: 19px
+    }
+
+    .hero-carousel a {
+        font-size: 13px
+    }
+}
+
+.carousel-dots {
+    position: absolute;
+    bottom: 14px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+.carousel-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 14px;
+    background-color: #fff;
+    margin: 0 5px;
+    cursor: pointer;
+}
+
+.carousel-dot.active {
+    background-color: #ec8f2d;
+}
+
 /* Blog pagination */
 .blog-pagination .prev-posts {
     margin-right: 20px;
diff --git a/styles/responsive.css b/styles/responsive.css
index 8eaff65f..c6ada292 100644
--- a/styles/responsive.css
+++ b/styles/responsive.css
@@ -5,53 +5,6 @@
     }
 }
 
-@media (max-width: 1120px) {
-    #home-slideshow,
-    #section-about {
-        height: 410px
-    }
-
-    #home-slideshow .text {
-        left: 5%;
-        margin: 0;
-        right: 0;
-        width: 30%
-    }
-
-    #section-about .shape {
-        left: auto;
-        margin: 0;
-        right: 0;
-        width: 440px
-    }
-
-    #section-about .text {
-        float: right;
-        margin: 0 20px 0 0
-    }
-
-    #section-about h2 {
-        font-size: 35px
-    }
-
-    #heading {
-        height: 260px
-    }
-
-    #heading h1 {
-        font-size: 40px
-    }
-
-    .mmg-sticked-banner .text {
-        padding-right: 35px
-    }
-
-    #footer .vcard {
-        font-size: 13px;
-        line-height: 1.7
-    }
-}
-
 @media (max-width: 1024px) {
     .outer {
         padding-left: 20px;
@@ -388,20 +341,6 @@
         display: block
     }
 
-    #home-slideshow,
-    #section-about {
-        height: 360px
-    }
-
-    #home-slideshow p {
-        font-size: 37px
-    }
-
-    #home-slideshow a {
-        font-weight: 400;
-        padding: .8em 1.5em
-    }
-
     #section-about .bg {
         background-position: 23% 70%
     }
@@ -569,19 +508,6 @@
 }
 
 @media (max-width: 767px) {
-    #home-slideshow {
-        height: 300px
-    }
-
-    #home-slideshow p {
-        font-size: 30px
-    }
-
-    #home-slideshow a {
-        font-size: 17px;
-        padding: .8em 1.4em
-    }
-
     #section-about {
         height: auto
     }
@@ -735,22 +661,6 @@
 }
 
 @media (max-width: 667px) {
-    #home-slideshow {
-        height: 270px
-    }
-
-    #home-slideshow .text {
-        left: 20px
-    }
-
-    #home-slideshow p {
-        font-size: 25px
-    }
-
-    #home-slideshow a {
-        font-size: 15px
-    }
-
     .table_order {
         border-top: 1px solid #f1f1f1;
         display: block;
@@ -781,24 +691,6 @@
 }
 
 @media (max-width: 640px) {
-    #home-slideshow {
-        height: 230px
-    }
-
-    #home-slideshow p {
-        font-size: 21px
-    }
-
-    #home-slideshow a {
-        font-size: 14px
-    }
-
-    #home-slideshow .swiper-pagination-bullet {
-        height: 10px;
-        margin: 0 3px;
-        width: 10px
-    }
-
     #section-about .bg {
         height: 200px
     }
@@ -942,27 +834,6 @@
         left: 10px
     }
 
-    #home-slideshow {
-        height: 220px
-    }
-
-    #home-slideshow .text-bg {
-        width: 55%
-    }
-
-    #home-slideshow .text {
-        left: 10px;
-        width: 35%
-    }
-
-    #home-slideshow p {
-        font-size: 20px
-    }
-
-    #home-slideshow a {
-        padding: .8em 1.2em
-    }
-
     #section-about .text {
         padding: 30px 10px
     }
@@ -1090,18 +961,6 @@
 }
 
 @media (max-width: 374px) {
-    #home-slideshow {
-        height: 220px
-    }
-
-    #home-slideshow p {
-        font-size: 19px
-    }
-
-    #home-slideshow a {
-        font-size: 13px
-    }
-
     #section-support {
         padding-top: 50px
     }
diff --git a/styles/template.css b/styles/template.css
index d86effb0..d67df59c 100644
--- a/styles/template.css
+++ b/styles/template.css
@@ -321,87 +321,6 @@ body {
     color: inherit
 }
 
-#home-slideshow {
-    background: #ccc;
-    height: 500px
-}
-
-#home-slideshow .swiper-slide {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    background-size: cover;
-    position: relative
-}
-
-#home-slideshow .text-bg {
-    zoom:1;background: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/white-arrow-bg.svg") no-repeat 100% 50%;
-    background-size: auto 100%;
-    background-size: cover;
-    filter: alpha(opacity=50);
-    height: 100%;
-    left: 0;
-    opacity: .5;
-    position: absolute;
-    top: 0;
-    width: 48%
-}
-
-#home-slideshow .text {
-    display: table;
-    height: 100%;
-    margin-right: 140px;
-    position: absolute;
-    right: 52%;
-    top: 0;
-    width: 380px
-}
-
-#home-slideshow .text .cell {
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle
-}
-
-#home-slideshow p {
-    font-family: Brown-Ald,Helvetica,Arial,sans-serif;
-    font-size: 40px;
-    font-weight: 600;
-    letter-spacing: -.04em;
-    line-height: 1.2;
-    padding: 0 0 .6em
-}
-
-#home-slideshow a {
-    background-color: #e46b29;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0 0 0 / 26%);
-    color: #fff;
-    display: inline-block;
-    font-size: 19px;
-    font-weight: 700;
-    line-height: 1.2;
-    padding: 1em 2em;
-    text-decoration: none;
-    text-transform: uppercase;
-    transition: all .3s
-}
-
-#home-slideshow a:hover {
-    background-color: #1a1919
-}
-
-#home-slideshow .swiper-pagination-bullet {
-    background: #fff;
-    height: 14px;
-    opacity: 1;
-    width: 14px
-}
-
-#home-slideshow .swiper-pagination-bullet-active {
-    background: var(--primary-color)
-}
-
 #section-about {
     background: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/orange-pattern-11.png");
     background-size: auto 30px;