diff --git a/index.html b/index.html
index 9696954..56f15e0 100644
--- a/index.html
+++ b/index.html
@@ -190,15 +190,32 @@
             .hero-carousel {
                 position: relative;
                 overflow: hidden;
+                min-height: 400px;
             }
             .hero-slide {
-                position: relative;
+                position: absolute;
+                inset: 0;
                 min-height: 400px;
                 display: flex;
                 align-items: center;
                 background-size: cover;
                 background-position: center;
-                transition: opacity 0.5s ease;
+                transform: translateX(100%);
+                opacity: 0;
+                transition:
+                    transform 0.5s ease,
+                    opacity 0.5s ease;
+                z-index: 1;
+            }
+            .hero-slide.active {
+                transform: translateX(0);
+                opacity: 1;
+                z-index: 2;
+            }
+            .hero-slide.prev {
+                transform: translateX(-100%);
+                opacity: 0;
+                z-index: 1;
             }
             .hero-slide::before {
                 content: "";
@@ -646,7 +663,7 @@
             </div>
 
             <div
-                class="hero-slide"
+                class="hero-slide active"
                 style="background-image: url(&quot;images/holland.webp&quot;)"
                 data-idx="0"
             >
@@ -672,7 +689,7 @@
             </div>
 
             <div
-                class="hero-slide d-none"
+                class="hero-slide"
                 style="
                     background-image: url(&quot;images/brazil.webp&quot;);
                     background-position: 50% 100%;
@@ -681,7 +698,7 @@
             >
                 <div class="container">
                     <div class="row">
-                        <div class="col-lg-10">
+                        <div class="col-lg-5">
                             <div class="hero-box">
                                 <h2>
                                     Startup challenge!<br />From Zero to ERP in
@@ -708,7 +725,7 @@
             </div>
 
             <div
-                class="hero-slide d-none"
+                class="hero-slide"
                 style="background-image: url(&quot;images/india.webp&quot;)"
                 data-idx="2"
             >
@@ -745,7 +762,7 @@
             </div>
 
             <div
-                class="hero-slide d-none"
+                class="hero-slide"
                 style="
                     background-image: url(&quot;images/england.webp&quot;);
                     background-position: 50% 15.6182%;
@@ -1375,15 +1392,17 @@
             var si = 0,
                 slides = document.querySelectorAll(".hero-slide"),
                 dots = document.querySelectorAll(".carousel-dot"),
-                t;
+                t,
+                dir = 1;
 
-            function show(i) {
-                for (var j = 0; j < slides.length; j++) {
-                    if (j === i) {
-                        slides[j].classList.remove("d-none");
-                    } else {
-                        slides[j].classList.add("d-none");
-                    }
+            function show(i, direction) {
+                var current = slides[si];
+                var next = slides[i];
+                current.classList.remove("active");
+                current.classList.add("prev");
+                next.classList.remove("prev");
+                next.classList.add("active");
+                for (var j = 0; j < dots.length; j++) {
                     if (j === i) {
                         dots[j].classList.add("active");
                     } else {
@@ -1393,15 +1412,15 @@
                 si = i;
             }
             function nextSlide() {
-                show((si + 1) % slides.length);
+                show((si + 1) % slides.length, 1);
                 resetTimer();
             }
             function prevSlide() {
-                show((si - 1 + slides.length) % slides.length);
+                show((si - 1 + slides.length) % slides.length, -1);
                 resetTimer();
             }
             function goSlide(i) {
-                show(i);
+                show(i, i > si ? 1 : -1);
                 resetTimer();
             }
             function resetTimer() {