feat: loading animation

main.css

@@ -260,7 +260,7 @@
  .mnc-box {
      display: flex;
      align-items: center;
-     max-width: 1200px;
+     max-width: 1159px;
 
  }
 
@@ -277,6 +277,7 @@
      font-weight: 600;
      font-size: 1.3vw;
      white-space: nowrap;
+     margin-top: -5px;
  }
 
  .mnc h2 .gray,
@@ -704,13 +705,11 @@
      position: relative;
      overflow: hidden;
      border-radius: 16px;
-     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      transition: all 0.3s ease;
  }
 
  .image-container:hover {
      transform: translateY(-5px);
-     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
  }
 
  .slide1-box img {
@@ -1342,7 +1341,7 @@
  }
 
  .card-easy-left img {
-     width: 80%;
+     width: 100%;
      border-radius: 15px;
  }
 

main.js

@@ -194,19 +194,18 @@ document.addEventListener("DOMContentLoaded", () => {
     const track = document.querySelector(".move-slider-track");
     const boxes = Array.from(track.children);
 
-    // Clone all slides once
     boxes.forEach(box => {
         const clone = box.cloneNode(true);
         track.appendChild(clone);
     });
 
     let position = 0;
-    const speed = 1; // pixels per frame, adjust for faster/slower scroll
+    const speed = 1;
 
     function animate() {
         position -= speed;
         if (Math.abs(position) >= track.scrollWidth / 2) {
-            position = 0; // reset after first set slides out
+            position = 0;
         }
         track.style.transform = `translateX(${position}px)`;
         requestAnimationFrame(animate);
@@ -224,7 +223,6 @@ const observer = new IntersectionObserver((entries) => {
             const index = Array.from(statItems).indexOf(entry.target);
             entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
             entry.target.classList.add('visible');
-            // observer.unobserve(entry.target); // optional: animate only once
         }
     });
 }, { threshold: 0.2 }); // 20% visible