fix: footer

index.html

@@ -41,13 +41,10 @@
         .cube-faces {
             transform-style: preserve-3d;
             height: 80px;
-            /* $size */
             width: 80px;
-            /* $size */
             position: relative;
             transform-origin: 0 0;
             transform: translateX(0) translateY(0) translateZ(-40px);
-            /* -$size/2 */
         }
 
         .cube-face {
@@ -257,6 +254,12 @@
                             <img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
                             <img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
                             <img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
+                            <img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
+                            <img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
+                            <img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
+                            <img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
+                            <img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
+                            <img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
                         </div>
                     </div>
                 </div>
@@ -271,19 +274,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/qa.jpg"
+                                    <img src="assets/images/hai1/qa.jpg" alt="Business Meeting">
-                                        alt="Business Meeting">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
-                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
+                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and
+                                            a successful performance report graph.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/hai12.jpg"
+                                    <img src="assets/images/hai1/hai12.jpg" alt="Architecture">
-                                        alt="Architecture">
                                     <div class="image-overlay">
                                         <h4>Software Dev</h4>
-                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
+                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a
+                                            split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
                             </div>
@@ -293,19 +296,20 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/ai.jpg"
+                                    <img src="assets/images/hai1/ai.jpg" alt="Analytics">
-                                        alt="Analytics">
                                     <div class="image-overlay">
                                         <h4>AI & Data</h4>
-                                        <p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
+                                        <p>A stunning, large-scale data visualization or chart (like a complex network
+                                            graph) displayed on a screen, hinting at discovery and high-level strategy.
+                                        </p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/cyber.jpg"
+                                    <img src="assets/images/hai1/cyber.jpg" alt="Technology">
-                                        alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
-                                        <p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
+                                        <p>A digital shield or lock icon overlaid on a dark, technical background with
+                                            green/blue code lines, symbolizing protection.</p>
                                     </div>
                                 </div>
                             </div>
@@ -313,19 +317,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/qa.jpg"
+                                    <img src="assets/images/hai1/qa.jpg" alt="Analytics">
-                                        alt="Analytics">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
-                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
+                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and
+                                            a successful performance report graph.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/cyber.jpg"
+                                    <img src="assets/images/hai1/cyber.jpg" alt="Technology">
-                                        alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
-                                        <p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
+                                        <p>A digital shield or lock icon overlaid on a dark, technical background with
+                                            green/blue code lines, symbolizing protection.</p>
                                     </div>
                                 </div>
                             </div>
@@ -333,19 +337,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/hai12.jpg"
+                                    <img src="assets/images/hai1/hai12.jpg" alt="Analytics">
-                                        alt="Analytics">
                                     <div class="image-overlay">
                                         <h4>Software Dev</h4>
-                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
+                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a
+                                            split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/qa.jpg"
+                                    <img src="assets/images/hai1/qa.jpg" alt="Technology">
-                                        alt="Technology">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
-                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
+                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and
+                                            a successful performance report graph.</p>
                                     </div>
                                 </div>
                             </div>
@@ -353,19 +357,21 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/ai.jpg"
+                                    <img src="assets/images/hai1/ai.jpg" alt="Analytics">
-                                        alt="Analytics">
                                     <div class="image-overlay">
                                         <h4>AI & Data</h4>
-                                        <p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
+                                        <p>A stunning, large-scale data visualization or chart (like a complex network
+                                            graph) displayed on a screen, hinting at discovery and high-level strategy.
+                                        </p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/aws..jpg"
+                                    <img src="assets/images/hai1/aws..jpg" alt="Technology">
-                                        alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cloud & DevOps</h4>
-                                        <p>An abstract, interconnected graphic of servers and data pipelines with subtle logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize powerful infrastructure.</p>
+                                        <p>An abstract, interconnected graphic of servers and data pipelines with subtle
+                                            logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize
+                                            powerful infrastructure.</p>
                                     </div>
                                 </div>
                             </div>
@@ -373,19 +379,20 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/ai.jpg"
+                                    <img src="assets/images/hai1/ai.jpg" alt="Analytics">
-                                        alt="Analytics">
                                     <div class="image-overlay">
                                         <h4>AI & Data</h4>
-                                        <p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
+                                        <p>A stunning, large-scale data visualization or chart (like a complex network
+                                            graph) displayed on a screen, hinting at discovery and high-level strategy.
+                                        </p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/cyber.jpg"
+                                    <img src="assets/images/hai1/cyber.jpg" alt="Technology">
-                                        alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
-                                        <p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
+                                        <p>A digital shield or lock icon overlaid on a dark, technical background with
+                                            green/blue code lines, symbolizing protection.</p>
                                     </div>
                                 </div>
                             </div>
@@ -394,19 +401,20 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/hai12.jpg"
+                                    <img src="assets/images/hai1/hai12.jpg" alt="Creativity">
-                                        alt="Creativity">
                                     <div class="image-overlay">
                                         <h4>Software Dev</h4>
-                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
+                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a
+                                            split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/aws..jpg"
+                                    <img src="assets/images/hai1/aws..jpg" alt="Beach">
-                                        alt="Beach">
                                     <div class="image-overlay">
                                         <h4>Cloud & DevOps</h4>
-                                        <p>An abstract, interconnected graphic of servers and data pipelines with subtle logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize powerful infrastructure.</p>
+                                        <p>An abstract, interconnected graphic of servers and data pipelines with subtle
+                                            logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize
+                                            powerful infrastructure.</p>
                                     </div>
                                 </div>
                             </div>
@@ -533,14 +541,12 @@
                 </div>
             </div>
         </section>
-
+        <section>
-
-    <section class="practice-cards-container">
-
             <!-- <div class="practice-cards-container"> -->
             <div class="practice-container">
                 <h1 class="practice-title">Practice Coding & Ace Hiring Assessments</h1>
-                <p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!</p>
+                <p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of your
+                    dream companies & ace your placement game!</p>
 
                 <div class="practice-cards-wrapper">
                     <!-- Coding Practice Card -->
@@ -613,7 +619,6 @@
 
 
 
-
         <section class="card-simple">
             <div class="card-easy">
                 <div class="card-easy-left">
@@ -678,26 +683,25 @@
         <footer class="footer">
             <div class="footer-container">
                 <div class="footer-section company-section">
-                    <div class="logo">Kode Pilot</div>
+                    <div class="logo">Kodepilot</div>
                     <p class="tagline">Built with <span class="heart">❤</span> in India for the world</p>
 
                     <div class="contact-info">
                         <h4>Stay Connected</h4>
 
-                        <div style="margin-bottom: 20px;">
+                        <div style="margin-bottom: 20px; line-height: 23px;">
-                            <strong style="color: white; font-size: 14px;">Sales Inquiries</strong>
                             <div class="contact-item">
                                 <i class="fas fa-envelope"></i>
                                 sales@kodepilot.com
                             </div>
                             <div class="contact-item">
                                 <i class="fas fa-phone"></i>
-                                +91-9311777388 <span style="font-size: 12px;">(Mon to Fri, 9 AM to 6 PM)</span>
+                                +91-9311777388 <span style="font-size: 12px;"> </span>
                             </div>
                         </div>
 
                         <div>
-                            <strong style="color: white; font-size: 14px;">Support Inquiries</strong>
+                            <strong style="color: white; font-size: 14px; line-height: 30px;">Support Inquiries</strong>
                             <div class="contact-item">
                                 <i class="fas fa-envelope"></i>
                                 support@kodepilot.com
@@ -733,19 +737,15 @@
                     </div>
                 </div>
 
-                <!-- Courses Section -->
                 <div class="footer-section">
                     <h3>Courses</h3>
                     <ul>
-                        <li><a href="#">Web Development</a></li>
+                        <li><a href="#">Software Development</a></li>
-                        <li><a href="#">Full Stack Development</a></li>
+                        <li><a href="#">Cloud & DevOps</a></li>
-                        <li><a href="#">Frontend Development</a></li>
+                        <li><a href="#">AI & Data</a></li>
-                        <li><a href="#">Backend Development</a></li>
+                        <li><a href="#">Cybersecurity</a></li>
-                        <li><a href="#">JavaScript Mastery</a></li>
+                        <li><a href="#">Quality & Testing</a></li>
-                        <li><a href="#">React & Next.js</a></li>
+                        <li><a href="#">Enterprise Tech</a></li>
-                        <li><a href="#">Node.js & Express</a></li>
-                        <li><a href="#">Database Management</a></li>
-                        <li><a href="#">API Development</a></li>
                     </ul>
 
                     <h3 style="margin-top: 30px;">Learning Paths</h3>
@@ -771,22 +771,19 @@
 
                     <h3 style="margin-top: 30px;">Community</h3>
                     <ul>
-                        <li><a href="#">Student Forum</a></li>
+                        <li><a href="#">Forums & Study Groups</a></li>
                         <li><a href="#">Code Reviews</a></li>
-                        <li><a href="#">Study Groups</a></li>
+                        <li><a href="#">Mentorship & Alumni</a></li>
-                        <li><a href="#">Success Stories</a></li>
-                        <li><a href="#">Mentorship Program</a></li>
                     </ul>
                 </div>
             </div>
 
             <div class="footer-bottom">
                 <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
-                    <div class="footer-bottom-links">
+                    <p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
-                    <p style="margin-top: 20px;">
+                        Copyright © 2025 <a href="#" style="color: #120ee2;">Kodepilot</a> - All
-                        <p style="color:#000;">
+                        rights
-                            Copyright © 2025 <a href="#" style="color:#000; text-decoration:none;">Kode Pilot Learning Pvt Ltd</a> - All rights reserved.
+                        reserved.
-                        </p>
                     </p>
                 </div>
             </div>

main.css

@@ -1,3 +1,8 @@
+ :root {
+     --course-max-width: 1200px;
+     --course-max-width-small: 1000px;
+ }
+
  body {
      margin: 0;
      font-family: Arial, sans-serif;
@@ -9,15 +14,19 @@
      display: flex;
      align-items: center;
      justify-content: space-between;
-     padding: 12px 30px;
      background: #fff;
      border-bottom: 1px solid #eee;
+     position: fixed;
+     width: 100%;
+     height: 56px;
+     z-index: 9999;
  }
 
  .logo {
      font-size: 22px;
      font-weight: bold;
      color: #003366;
+     margin-left: 20px;
  }
 
  .search {
@@ -40,6 +49,10 @@
      top: 19px;
  }
 
+ .buttons {
+     margin-right: 26px;
+ }
+
  .buttons button {
      margin-left: 10px;
      padding: 8px 15px;
@@ -89,7 +102,7 @@
  .hero_container {
      display: flex;
      gap: 40px;
-     max-width: 1200px;
+     max-width: var(--course-max-width);
      margin: auto;
      padding: 20px;
      flex-wrap: wrap;
@@ -187,7 +200,7 @@
  }
 
  .users_box {
-     max-width: 1200px;
+     max-width: var(--course-max-width);
  }
 
  .know-cards {
@@ -295,7 +308,7 @@
      gap: 40px;
      flex-wrap: nowrap;
      overflow-x: auto;
-     max-width: 1200px;
+     max-width: var(--course-max-width);
  }
 
  .mnc h2 {
@@ -339,7 +352,7 @@
  }
 
  .our-numbers {
-     max-width: 1200px;
+     max-width: var(--course-max-width);
      margin: 50px auto 50px auto;
  }
 
@@ -576,72 +589,6 @@
      color: #1f2937;
  }
 
- .corces {
-     display: flex;
-     /* makes children in a row */
-     flex-wrap: wrap;
-     /* wrap to next line if overflow */
-     justify-content: center;
-     /* center overall row */
-     align-items: flex-start;
-     /* align items at top */
-     text-align: start;
-     max-width: 1200px;
-     margin: 0 auto 47px auto;
-     gap: 20px;
-     /* spacing between boxes */
- }
-
- .course-card {
-     height: 300px;
-     border: 1px solid #ddd;
-     border-radius: 8px;
-     overflow: hidden;
-     width: 300px;
-     font-family: Arial, sans-serif;
-     background: #fff;
- }
-
- .course-card a {
-     text-decoration: none;
-     color: inherit;
- }
-
- .course-image {
-     width: 100%;
-     height: 152px;
-     background-size: cover;
-     background-position: center;
- }
-
- .course-content {
-     padding: 17px;
- }
-
- .course-category {
-     font-size: 12px;
-     color: #888;
-     margin-bottom: 5px;
- }
-
- .course-name {
-     display: block;
-     font-weight: bold;
-     margin-bottom: 5px;
-     color: #333;
- }
-
- .course-description {
-     display: -webkit-box;
-     -webkit-box-orient: vertical;
-     -webkit-line-clamp: 3;
-     overflow: hidden;
-     text-overflow: ellipsis;
-     display: block;
-     max-height: 4.5em;
-     line-height: 1.5em;
- }
-
  .hover-slider {
      display: none;
      padding: 0 0 50px 0;
@@ -664,7 +611,7 @@
 
  .slide1r-container {
      margin: 0 auto;
-     max-width: 1000px;
+     max-width: var(--course-max-width-small);
      width: 100%;
      position: relative;
      border-radius: 20px;
@@ -752,7 +699,6 @@
      opacity: 0.9;
  }
 
- /* Navigation buttons */
  .nav-button {
      position: absolute;
      outline: solid rgba(166, 166, 166, 0.485) 1px;
@@ -761,8 +707,8 @@
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: none;
-     width: 60px;
+     width: 50px;
-     height: 60px;
+     height: 50px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
@@ -780,11 +726,11 @@
  }
 
  .prev-btn {
-     left: -50px;
+     left: -70px;
  }
 
  .next-btn {
-     right: -50px;
+     right: -70px;
  }
 
  .nav-button::before {
@@ -919,7 +865,7 @@
  }
 
  .footer-container {
-     max-width: 1200px;
+     max-width: var(--course-max-width);
      margin: 0 auto;
      padding: 0 20px;
      display: grid;
@@ -1194,7 +1140,7 @@
  .move-slider-container {
      display: flex;
      overflow: hidden;
-     max-width: 1200px;
+     max-width: var(--course-max-width);
  }
 
  .move-slider-animation-box {
@@ -1317,13 +1263,12 @@
  }
 
  .card-simple {
-     max-width: 1200px;
+     max-width: var(--course-max-width);
      margin: 70px auto 70px auto;
  }
 
  .card-easy {
      display: flex;
-     width: 1200px;
      background-color: #F6F8FA;
      border-radius: 20px;
      overflow: hidden;
@@ -1477,6 +1422,119 @@
      }
  }
 
+ .corces-s {
+     margin: 40px 0;
+ }
+
+ .course-category-title {
+     font-size: 22px;
+     font-weight: bold;
+     margin-bottom: 15px;
+ }
+
+ .course-slider {
+     position: relative;
+     display: flex;
+     align-items: center;
+     gap: 10px;
+ }
+
+ .course-track {
+     display: flex;
+     gap: 20px;
+     overflow-x: hidden;
+     scroll-behavior: smooth;
+     flex: 1;
+     max-width: 100%;
+     padding: 10px;
+ }
+
+ .course-card {
+     min-width: 309px;
+     background: #fff;
+     border-radius: 8px;
+     padding: 12px;
+     height: 258px;
+     outline: solid gray 0.1px;
+ }
+
+ .course-image {
+     width: 100%;
+     height: 150px;
+     background-size: cover;
+     background-position: center;
+     border-radius: 6px;
+     margin-bottom: 10px;
+ }
+
+ .course-content {
+     display: flex;
+     flex-direction: column;
+ }
+
+ .course-name {
+     font-weight: 600;
+     margin-bottom: 5px;
+     color: #1e3a8a;
+     text-decoration: none;
+ }
+
+ .course-name:hover {
+     text-decoration: underline;
+ }
+
+ .course-description {
+     font-size: 14px;
+     color: #333;
+ }
+
+ .corces {
+     display: flex;
+     flex-wrap: wrap;
+     justify-content: flex-start;
+     align-items: flex-start;
+     text-align: start;
+     max-width: var(--course-max-width);
+     margin: 0 auto 47px auto;
+     gap: 20px;
+ }
+
+ .course-section {
+     max-width: 100%;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+
+ }
+
+ @media (max-width: 1360px) {
+     :root {
+         --course-max-width: 1000px;
+         --course-max-width-small: 800px;
+     }
+ }
+
+ @media (max-width: 1000px) {
+     :root {
+         --course-max-width: 800px;
+         --course-max-width-small: 600px;
+     }
+
+     .mnc h2 {
+         display: none;
+     }
+ }
+
+ @media (max-width: 680px) {
+     .search {
+         display: none;
+     }
+
+     .hero p {
+         width: 400px;
+     }
+ }
+
  /*----------------------------------------------------------------------------------------------------------------------*/
 
 
@@ -1565,15 +1623,29 @@
  }
 
  /* Color changes for active and hover states */
-.practice-card.active { background-color: #c6e0f1; }
+ .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(1).active {
+     background-color: #89CFF0;
+ }
+
  .practice-card:nth-child(2):hover,
-.practice-card:nth-child(2).active { background-color: #FEB4CF; }
+ .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(3).active {
+     background-color: #DFC5FE;
+ }
+
  .practice-card:nth-child(4):hover,
-.practice-card:nth-child(4).active { background-color: #FFE186; }
+ .practice-card:nth-child(4).active {
+     background-color: #FFE186;
+ }
 
  /* SVG Container */
  .practice-card-svg {
@@ -1609,10 +1681,25 @@
      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(1) .practice-card-icon {
-.practice-card:nth-child(2) .practice-card-icon { background-color: #ef4444; color: white; }
+     background-color: #1268f3;
-.practice-card:nth-child(3) .practice-card-icon { background-color: #8b5cf6; color: white; }
+     color: white;
-.practice-card:nth-child(4) .practice-card-icon { background-color: #f59e0b; 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;

main.js

@@ -387,10 +387,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 function renderCourses(allCourses) {
     const container = document.querySelector('.corces');
-    if (!container) {
+    if (!container) return;
-        console.error("⚠️ No .corces container found in DOM");
-        return;
-    }
 
     container.innerHTML = '';
 
@@ -401,23 +398,53 @@ function renderCourses(allCourses) {
         grouped[course.category].push(course);
     });
 
-    // Render each category section
+    // Convert grouped object to array for merging
-    Object.keys(grouped).forEach(category => {
+    let sections = Object.entries(grouped).map(([category, courses]) => ({ category, courses }));
+
+    // Merge sections with less than 4 courses
+    let mergedSections = [];
+    let temp = { category: '', courses: [] };
+
+    sections.forEach(section => {
+        if (section.courses.length >= 4) {
+            mergedSections.push(section);
+        } else {
+            // Merge into temp
+            if (temp.category) temp.category += '/' + section.category;
+            else temp.category = section.category;
+            temp.courses.push(...section.courses);
+
+            // If merged has 4 or more, push it
+            if (temp.courses.length >= 4) {
+                mergedSections.push({ category: temp.category, courses: temp.courses });
+                temp = { category: '', courses: [] };
+            }
+        }
+    });
+
+    // If temp still has >= 4, push it
+    if (temp.courses.length >= 4) {
+        mergedSections.push(temp);
+    }
+
+    // Render sections
+    mergedSections.forEach(sectionData => {
         const section = document.createElement('div');
         section.className = 'course-section';
-
         section.innerHTML = `
-            <h2 class="course-category-title">${category}</h2>
+            <h2 class="course-category-title">${sectionData.category}</h2>
+            <div class="course-slider-box">
             <div class="course-slider">
-                <button class="prev-btn">◀</button>
+                <button class="prev-btn nav-button"></button>
                 <div class="course-track"></div>
-                <button class="next-btn">▶</button>
+                <button class="next-btn nav-button"></button>
+            </div>
             </div>
         `;
 
         const track = section.querySelector('.course-track');
 
-        grouped[category].forEach(course => {
+        sectionData.courses.forEach(course => {
             const courseDiv = document.createElement('div');
             courseDiv.className = 'course-card';
             courseDiv.innerHTML = `
@@ -432,10 +459,10 @@ function renderCourses(allCourses) {
             track.appendChild(courseDiv);
         });
 
+        // Slider buttons
         const prevBtn = section.querySelector('.prev-btn');
         const nextBtn = section.querySelector('.next-btn');
 
-        let scrollAmount = 0;
         prevBtn.addEventListener('click', () => {
             track.scrollBy({ left: -300, behavior: 'smooth' });
         });
@@ -447,6 +474,7 @@ function renderCourses(allCourses) {
     });
 }
 
+
 statItems.forEach(item => observer.observe(item));
 
 
@@ -472,3 +500,18 @@ function stepScroll() {
 }
 
 setInterval(stepScroll, 3000);
+
+
+document.querySelectorAll('.course-slider').forEach(slider => {
+    const track = slider.querySelector('.course-track');
+    const prev = slider.querySelector('.prev-btn');
+    const next = slider.querySelector('.next-btn');
+
+    prev.addEventListener('click', () => {
+        track.scrollBy({ left: -300, behavior: 'smooth' });
+    });
+
+    next.addEventListener('click', () => {
+        track.scrollBy({ left: 300, behavior: 'smooth' });
+    });
+});