added dynamic card

Reviewed-on: #14

main.css

@@ -22,16 +22,22 @@
 
  .search {
      flex: 1;
-     margin: 0 20px;
+     margin: 0 20px 0 10px;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 20px;
+     max-width: 344px;
+     position: absolute;
+     left: 142px;
  }
 
  nav a {
      margin: 0 10px;
      text-decoration: none;
      color: #333;
+     position: absolute;
+     right: 235px;
+     top: 19px;
  }
 
  .buttons button {
@@ -125,16 +131,24 @@
 
  .green {
      background: #9BE6C1;
+     background-image: url('assets/images/unlockcarrer/internship.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .orange {
      background: #fec192;
+     background-image: url('assets/images/unlockcarrer/jobs.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .blue {
      background: #9bc9ff;
-     background-image: url('https://d8it4huxumps7.cloudfront.net/uploads/images/67724b0c0d0f7_img1.png?d=211x163');
-     background-size: 140px;
+     background-image: url('assets/images/unlockcarrer/mentorship.png');
+     background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
  }
@@ -142,15 +156,26 @@
 
  .purple {
      background: #c8bbff;
+     background-image: url('assets/images/unlockcarrer/practice.png');
+     background-size: 120px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .yellow {
      background: #ffdd80;
-     color: #333;
+     background-image: url('assets/images/unlockcarrer/competitions.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .pink {
      background: #ffb1cc;
+     background-image: url('assets/images/unlockcarrer/more.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .users {
@@ -260,7 +285,7 @@
  .mnc-box {
      display: flex;
      align-items: center;
-     max-width: 1200px;
+     max-width: 1159px;
 
  }
 
@@ -277,6 +302,7 @@
      font-weight: 600;
      font-size: 1.3vw;
      white-space: nowrap;
+     margin-top: -5px;
  }
 
  .mnc h2 .gray,
@@ -292,14 +318,13 @@
  .mnc-logos {
      overflow: hidden;
      width: 100%;
-     height: 55px;
  }
 
  .mnc-logos-track {
      display: flex;
-     gap: 5vw;
-     animation: stepScroll 12s infinite;
-     height: 100%;
+     gap: 40px;
+     transform: translateX(0);
+     transition: transform 0.5s ease;
  }
 
  .mnc-logos img {
@@ -310,33 +335,7 @@
 
  .mnc-logos img.image-hcl {
      height: 25px;
- }
-
- @keyframes stepScroll {
-
-     0%,
-     20% {
-         transform: translateX(0);
-     }
-
-     25%,
-     45% {
-         transform: translateX(-25%);
-     }
-
-     50%,
-     70% {
-         transform: translateX(-50%);
-     }
-
-     75%,
-     95% {
-         transform: translateX(-75%);
-     }
-
-     100% {
-         transform: translateX(0);
-     }
+     margin-top: 8px;
  }
 
  .our-numbers {
@@ -553,27 +552,27 @@
  }
 
  .card-quizzes {
-     background: linear-gradient(to bottom right, #60a5fa, #2563eb);
+     background: url('assets/images/seize/quizz.png') no-repeat center/cover;
      color: white;
  }
 
  .card-hackathons {
-     background: linear-gradient(to bottom right, #4ade80, #22c55e);
+     background: url('assets/images/seize/hackathons.png') no-repeat center/cover;
      color: white;
  }
 
  .card-scholarships {
-     background: linear-gradient(to bottom right, #a855f7, #7c3aed);
+     background: url('assets/images/seize/scholarships.png') no-repeat center/cover;
      color: white;
  }
 
  .card-conferences {
-     background: linear-gradient(to bottom right, #fed7aa, #fdba74);
+     background: url('assets/images/seize/conferences.png') no-repeat center/cover;
      color: #1f2937;
  }
 
  .card-festivals {
-     background: linear-gradient(to bottom right, #facc15, #eab308);
+     background: url('assets/images/seize/test.png') no-repeat center/cover;
      color: #1f2937;
  }
 
@@ -704,13 +703,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 {
@@ -917,7 +914,7 @@
  .footer {
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
      color: white;
-     padding: 60px 0 30px 0;
+     padding: 60px 0 0;
      font-size: 14px;
  }
 
@@ -1100,6 +1097,7 @@
      font-size: 12px;
      color: #94a3b8;
      text-align: left;
+     background: white;
  }
 
  .footer-bottom-links {
@@ -1320,7 +1318,7 @@
 
  .card-simple {
      max-width: 1200px;
-     margin: 50px auto 50px auto;
+     margin: 70px auto 70px auto;
  }
 
  .card-easy {
@@ -1342,7 +1340,7 @@
  }
 
  .card-easy-left img {
-     width: 80%;
+     width: 100%;
      border-radius: 15px;
  }
 
@@ -1448,15 +1446,11 @@
      color: white;
      border: none;
      padding: 8px 18px;
-     /* controls height and width */
      border-radius: 25px;
      font-size: 0.9em;
      width: auto;
-     /* ensures it doesn't stretch */
      max-width: 155px;
-     /* optional limit */
      display: inline-block;
-     /* prevents flex from stretching it */
      cursor: pointer;
      transition: background 0.3s;
  }
@@ -1475,12 +1469,336 @@
 
      .card-easy-right {
          padding: 80px 50px;
-         /* more top/bottom space increases height */
      }
 
      .card-easy-left img {
          width: 90%;
          max-height: 100%;
-         /* image takes more vertical space */
      }
  }
+
+ /*----------------------------------------------------------------------------------------------------------------------*/
+
+
+ /* Practice Cards Component CSS - Unique class names to prevent conflicts */
+.practice-cards-container * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.practice-cards-container {
+    background-color: #ffffff;
+    color: #1f2937;
+    padding: 40px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.practice-container {
+    max-width: 1300px;
+    width: 100%;
+}
+
+.practice-title {
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: #111827;
+    text-align: left;
+}
+
+.practice-subtitle {
+    font-size: 18px;    
+    color: #6b7280;
+    max-width: 700px;
+    /* margin: 0 auto 40px; */
+    line-height: 1.5;
+    text-align: left;
+}
+
+.practice-cards-wrapper {
+    margin: 30px 0;
+    display: flex;
+    height: 380px;
+    border-radius: 12px;
+    overflow: hidden;
+    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
+    position: relative;
+    gap: 1px;
+    background-color: #d1d5db;
+    padding: 1px;
+}
+
+.practice-card {
+    flex: 1;
+    display: flex;
+    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transform-origin: center;
+    background-color: white;
+    border-radius: 0;
+}
+
+.practice-card:first-child {
+    border-radius: 11px 0 0 11px;
+}
+
+.practice-card:last-child {
+    border-radius: 0 11px 11px 0;
+}
+
+.practice-card-content {
+    flex: 1;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.7s ease;
+    min-width: 0;
+    z-index: 2;
+    position: relative;
+}
+
+/* Color changes for active and hover states */
+.practice-card.active { background-color: #c6e0f1; }
+.practice-card:nth-child(1):hover,
+.practice-card:nth-child(1).active { background-color: #89CFF0; }
+.practice-card:nth-child(2):hover,
+.practice-card:nth-child(2).active { background-color: #FEB4CF; }
+.practice-card:nth-child(3):hover,
+.practice-card:nth-child(3).active { background-color: #DFC5FE; }
+.practice-card:nth-child(4):hover,
+.practice-card:nth-child(4).active { background-color: #FFE186; }
+
+/* SVG Container */
+.practice-card-svg {
+    width: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1);
+    opacity: 0;
+    padding: 20px;
+    background: transparent;
+}
+
+.practice-card-svg svg {
+    width: 100%;
+    height: 100%;
+    max-width: 180px;
+    max-height: 180px;
+    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+}
+
+.practice-card-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    margin-bottom: 16px;
+    transition: transform 0.5s ease;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.practice-card:nth-child(1) .practice-card-icon { background-color: #1268f3; color: white; }
+.practice-card:nth-child(2) .practice-card-icon { background-color: #ef4444; color: white; }
+.practice-card:nth-child(3) .practice-card-icon { background-color: #8b5cf6; color: white; }
+.practice-card:nth-child(4) .practice-card-icon { background-color: #f59e0b; color: white; }
+
+.practice-card h3 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: #111827;
+    transition: transform 0.5s ease;
+}
+
+.practice-card p {
+    font-size: 15px;
+    color: #6b7280;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    transition: transform 0.5s ease;
+}
+
+.practice-meta-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    font-size: 14px;
+    color: #4b5563;
+    transition: transform 0.5s ease;
+}
+
+.practice-meta-logo {
+    width: 24px;
+    height: 24px;
+    background-color: #3b82f6;
+    border-radius: 4px;
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.practice-footer-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+    margin-top: auto;
+    transition: transform 0.5s ease;
+}
+
+.practice-cta-btn {
+    margin-top: 16px;
+    background-color: #111827;
+    color: white;
+    padding: 10px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+    opacity: 0;
+    transform: translateY(15px);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.practice-cta-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.8s;
+}
+
+.practice-cta-btn:hover::before {
+    left: 100%;
+}
+
+.practice-cta-btn:hover {
+    background-color: #374151;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+}
+
+/* Active card styles */
+.practice-card.active {
+    flex: 3.5;
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+}
+
+.practice-card.active .practice-card-svg {
+    width: 45%;
+    opacity: 1;
+}
+
+.practice-card.active .practice-cta-btn {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.practice-card.active .practice-card-icon {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.practice-card.active h3 {
+    transform: translateY(-3px);
+}
+
+.practice-card.active p,
+.practice-card.active .practice-meta-info,
+.practice-card.active .practice-footer-text {
+    transform: translateY(-2px);
+}
+
+/* Hover effects for non-active cards */
+.practice-card:hover:not(.active) {
+    flex: 1.3;
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    z-index: 5;
+}
+
+.practice-card:hover:not(.active) .practice-card-svg {
+    width: 25%;
+    opacity: 0.8;
+}
+
+/* Subtle overlay effect */
+.practice-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
+    opacity: 0;
+    transition: opacity 0.6s ease;
+    pointer-events: none;
+}
+
+.practice-card.active::after,
+.practice-card:hover::after {
+    opacity: 1;
+}
+
+@media (max-width: 992px) {
+    .practice-cards-wrapper {
+        flex-direction: column;
+        height: auto;
+        border-radius: 12px;
+    }
+    
+    .practice-card {
+        flex-direction: column;
+        height: auto;
+        border-radius: 0 !important;
+    }
+    
+    .practice-card:first-child {
+        border-radius: 12px 12px 0 0 !important;
+    }
+    
+    .practice-card:last-child {
+        border-radius: 0 0 12px 12px !important;
+    }
+    
+    .practice-card.active .practice-card-svg,
+    .practice-card:hover .practice-card-svg {
+        width: 100%;
+        height: 200px;
+    }
+    
+    .practice-card.active {
+        transform: translateY(-5px) scale(1.01);
+    }
+    
+    .practice-card:hover:not(.active) {
+        transform: translateY(-3px) scale(1.005);
+    }
+}

main.js

@@ -1,7 +1,12 @@
-function goToLogin() {
-    window.location.href = "/my/";
+function goToApplay() {
+    window.location.href = "/applay/";
 }
 
+function getInTouch() {
+    window.open("https://wa.me/1234567890?text=Hi%20Link%20kodepilote%20Team...", "_blank");
+}
+
+
 (function () {
     if (window.Slide1rSliderLoaded) {
         return;
@@ -194,19 +199,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,9 +228,247 @@ 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
+}, { threshold: 0.2 });
+
+console.log("test");
+document.addEventListener('DOMContentLoaded', async () => {
+    // const allCourses = [];
+
+    // const baseUrl = 'https://kodepilot.in/course/index.php';
+    // const res = await fetch(baseUrl);
+    // const html = await res.text();
+
+    // const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
+    // const categories = [];
+    // let match;
+    // while ((match = categoryRegex.exec(html)) !== null) {
+    //     categories.push({ url: match[1], name: match[2] });
+    // }
+
+    // for (const category of categories) {
+    //     const resCat = await fetch(category.url);
+    //     const catHtml = await resCat.text();
+    //     const cleanHtml = catHtml.replace(/\n/g, ' ');
+
+    //     const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
+
+    //     while ((match = courseRegex.exec(cleanHtml)) !== null) {
+    //         allCourses.push({
+    //             category: match[4].trim(),
+    //             link: match[1].trim(),
+    //             image: match[2].trim(),
+    //             name: match[3].trim(),
+    //             description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
+    //         });
+    //     }
+    // }
+    const allCourses = [
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=16",
+            image: "https://kodepilot.in/pluginfile.php/53/course/overviewfiles/UiUx.png",
+            name: "UI/UX Design",
+            description: "Learn the fundamentals of user interface and user experience design."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=9",
+            image: "https://kodepilot.in/pluginfile.php/39/course/overviewfiles/IOS.png",
+            name: "iOS Development",
+            description: "Build iOS apps using Swift and Apple’s development tools."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=7",
+            image: "https://kodepilot.in/pluginfile.php/35/course/overviewfiles/RD.png",
+            name: "React Development",
+            description: "Master React.js for building fast and scalable web apps."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=5",
+            image: "https://kodepilot.in/pluginfile.php/31/course/overviewfiles/PFS.png",
+            name: "Full Stack Development",
+            description: "End-to-end training in frontend, backend, and databases."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=3",
+            image: "https://kodepilot.in/pluginfile.php/25/course/overviewfiles/JFS.png",
+            name: "Java Full Stack",
+            description: "Become a full stack developer with Java, Spring, and modern tools."
+        },
+        {
+            category: "Quality & Testing",
+            link: "https://kodepilot.in/course/view.php?id=13",
+            image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/PT.png",
+            name: "Performance Testing",
+            description: "Learn tools and techniques for testing system performance."
+        },
+        {
+            category: "Quality & Testing",
+            link: "https://kodepilot.in/course/view.php?id=10",
+            image: "https://kodepilot.in/pluginfile.php/41/course/overviewfiles/QA.png",
+            name: "QA Testing",
+            description: "Understand quality assurance practices for reliable software."
+        },
+        {
+            category: "Cloud & DevOps",
+            link: "https://kodepilot.in/course/view.php?id=17",
+            image: "https://kodepilot.in/pluginfile.php/55/course/overviewfiles/GC.png",
+            name: "Google Cloud",
+            description: "Get hands-on with Google Cloud Platform services and tools."
+        },
+        {
+            category: "Cloud & DevOps",
+            link: "https://kodepilot.in/course/view.php?id=4",
+            image: "https://kodepilot.in/pluginfile.php/28/course/overviewfiles/AWSA.png",
+            name: "AWS Associate",
+            description: "Prepare for AWS certifications and cloud computing skills."
+        },
+        {
+            category: "AI, Data & Emerging Tech (On-demand & trending)",
+            link: "https://kodepilot.in/course/view.php?id=26",
+            image: "https://kodepilot.in/pluginfile.php/73/course/overviewfiles/DE.png",
+            name: "Data Engineering",
+            description: "Build pipelines and manage data at scale for analytics."
+        },
+        {
+            category: "AI, Data & Emerging Tech (On-demand & trending)",
+            link: "https://kodepilot.in/course/view.php?id=18",
+            image: "https://kodepilot.in/pluginfile.php/58/course/overviewfiles/PE.png",
+            name: "Prompt Engineering",
+            description: "Learn to design prompts for AI models like ChatGPT."
+        },
+        {
+            category: "AI, Data & Emerging Tech (On-demand & trending)",
+            link: "https://kodepilot.in/course/view.php?id=12",
+            image: "https://kodepilot.in/pluginfile.php/44/course/overviewfiles/AI%28Ess%29.png",
+            name: "AI Essentials",
+            description: "Introduction to AI, ML concepts, and real-world use cases."
+        },
+        {
+            category: "Enterprise & Business Tech",
+            link: "https://kodepilot.in/course/view.php?id=24",
+            image: "https://kodepilot.in/pluginfile.php/70/course/overviewfiles/ServiceNow.png",
+            name: "ServiceNow",
+            description: "Learn ITSM and workflow automation with ServiceNow."
+        },
+        {
+            category: "Enterprise & Business Tech",
+            link: "https://kodepilot.in/course/view.php?id=19",
+            image: "https://kodepilot.in/pluginfile.php/61/course/overviewfiles/SAP.png",
+            name: "SAP",
+            description: "Master SAP ERP modules for enterprise solutions."
+        },
+        {
+            category: "Cybersecurity & Compliance",
+            link: "https://kodepilot.in/course/view.php?id=23",
+            image: "https://kodepilot.in/pluginfile.php/69/course/overviewfiles/Security.png",
+            name: "Security Fundamentals",
+            description: "Understand core concepts of IT security and defense."
+        },
+        {
+            category: "Cybersecurity & Compliance",
+            link: "https://kodepilot.in/course/view.php?id=22",
+            image: "https://kodepilot.in/pluginfile.php/68/course/overviewfiles/CyE.png",
+            name: "Cyber Essentials",
+            description: "Learn the basics of cybersecurity and compliance standards."
+        }
+    ];
+
+    console.table(allCourses);
+
+
+    renderCourses(allCourses);
+});
+
+function renderCourses(allCourses) {
+    const container = document.querySelector('.corces');
+    if (!container) {
+        console.error("⚠️ No .corces container found in DOM");
+        return;
+    }
+
+    container.innerHTML = '';
+
+    // Group courses by category
+    const grouped = {};
+    allCourses.forEach(course => {
+        if (!grouped[course.category]) grouped[course.category] = [];
+        grouped[course.category].push(course);
+    });
+
+    // Render each category section
+    Object.keys(grouped).forEach(category => {
+        const section = document.createElement('div');
+        section.className = 'course-section';
+
+        section.innerHTML = `
+            <h2 class="course-category-title">${category}</h2>
+            <div class="course-slider">
+                <button class="prev-btn">◀</button>
+                <div class="course-track"></div>
+                <button class="next-btn">▶</button>
+            </div>
+        `;
+
+        const track = section.querySelector('.course-track');
+
+        grouped[category].forEach(course => {
+            const courseDiv = document.createElement('div');
+            courseDiv.className = 'course-card';
+            courseDiv.innerHTML = `
+                <a href="${course.link}" target="_blank">
+                  <div class="course-image" style="background-image: url(${course.image});"></div>
+                </a>
+                <div class="course-content">
+                  <a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
+                  <div class="course-description">${course.description}</div>
+                </div>
+            `;
+            track.appendChild(courseDiv);
+        });
+
+        const prevBtn = section.querySelector('.prev-btn');
+        const nextBtn = section.querySelector('.next-btn');
+
+        let scrollAmount = 0;
+        prevBtn.addEventListener('click', () => {
+            track.scrollBy({ left: -300, behavior: 'smooth' });
+        });
+        nextBtn.addEventListener('click', () => {
+            track.scrollBy({ left: 300, behavior: 'smooth' });
+        });
+
+        container.appendChild(section);
+    });
+}
 
 statItems.forEach(item => observer.observe(item));
+
+
+const track = document.querySelector('.mnc-logos-track');
+const gap = 40;
+let index = 0;
+
+function stepScroll() {
+    const items = track.children;
+    const first = items[0];
+    const moveWidth = first.offsetWidth + gap;
+
+    track.style.transform = `translateX(-${moveWidth}px)`;
+
+    track.addEventListener('transitionend', function handler() {
+        track.appendChild(first);
+        track.style.transition = 'none';
+        track.style.transform = 'translateX(0)';
+        void track.offsetWidth; // force reflow
+        track.style.transition = 'transform 0.5s ease';
+        track.removeEventListener('transitionend', handler);
+    });
+}
+
+setInterval(stepScroll, 3000);