fix: infinity testmo

index.html

@@ -492,6 +492,29 @@
                         </div>
                     </div>
 
+                    <div class="move-slider-box">
+                        <div class="slide-content">
+                            <p class="slide-text-cot">
+                                "
+                            </p>
+                            <p class="slide-text">
+                                "The KodePilot curriculum gave me hands-on experience with networking and security. I
+                                gained practical
+                                skills and secured my position in network engineering with confidence."
+                            </p>
+                            <div class="slide-logo-box">
+                                <div class="profile-box">
+                                    <img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
+                                        class="slide-logo">
+                                    <div class="profile-info">
+                                        <p class="slide-name">koushik</p>
+                                        <p class="slide-role">Network Engineer</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="move-slider-box">
                         <div class="slide-content">
                             <p class="slide-text-cot">

main.css

@@ -1023,18 +1023,7 @@
  .move-slider-animation-box {
      display: flex;
      gap: 20px;
-     animation: scroll 20s linear infinite;
+     will-change: transform;
- }
-
- @keyframes scroll {
-     from {
-         transform: translateX(0);
-     }
-
-     to {
-         transform: translateX(-50%);
-     }
-
  }
 
  .move-slider-box {
@@ -1046,7 +1035,7 @@
      background: #fff;
      border-radius: 12px;
      padding: 20px;
-     min-width: 350px;
+     min-width: 200px;
  }
 
  .move-slider-box .slide-content>*:not(.slide-text) {
@@ -1056,6 +1045,11 @@
  .move-slider-box:hover .slide-content>*:not(.slide-text) {
      opacity: 0;
      pointer-events: none;
+     transition-delay: 0s;
+ }
+
+ .move-slider-box .slide-content>*:not(.slide-text) {
+     transition: opacity 0.3s ease 1s;
  }
 
  .move-slider-box .slide-text {
@@ -1065,9 +1059,10 @@
  }
 
  .move-slider-box:hover .slide-text {
-     transform: translateY(100px) scale(1.1);
+     transform: translateY(80px) scale(1.1);
  }
 
+
  .slide-content {
      display: flex;
      flex-direction: column;
@@ -1849,7 +1844,6 @@
 
      .move-slider-animation-box {
          margin-top: 393px;
-         margin-right: 0px;
      }
 
      .move-slider-box-static {

main.js

@@ -579,3 +579,30 @@ document.addEventListener("DOMContentLoaded", () => {
 
     counters.forEach(counter => observer.observe(counter));
 });
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    const track = document.querySelector(".move-slider-animation-box");
+    const container = document.querySelector(".container");
+    let speed = 1;
+    let pos = 0;
+
+    function animate() {
+        pos -= speed;
+        track.style.transform = `translateX(${pos}px)`;
+
+        const firstChild = track.firstElementChild;
+        const firstRect = firstChild.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+
+        if (firstRect.right <= containerRect.left) {
+            track.appendChild(firstChild);
+            pos += firstChild.offsetWidth + 20;
+            track.style.transform = `translateX(${pos}px)`;
+        }
+
+        requestAnimationFrame(animate);
+    }
+
+    animate();
+});