From b1b5fd7f4fd9e9e39bfb801bc6158bf1031e3d0a Mon Sep 17 00:00:00 2001
From: "dhanush.s" <dhanush.s@opsmonsters.in>
Date: Fri, 26 Sep 2025 19:54:04 +0530
Subject: [PATCH] fix: footer

---
 index.html | 189 ++++++------
 main.css   | 823 +++++++++++++++++++++++++++++------------------------
 main.js    |  67 ++++-
 3 files changed, 603 insertions(+), 476 deletions(-)

diff --git a/index.html b/index.html
index 17e5fae..fcd86c3 100644
--- a/index.html
+++ b/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"
-                                        alt="Business Meeting">
+                                    <img src="assets/images/hai1/qa.jpg" 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"
-                                        alt="Architecture">
+                                    <img src="assets/images/hai1/hai12.jpg" 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"
-                                        alt="Analytics">
+                                    <img src="assets/images/hai1/ai.jpg" 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"
-                                        alt="Technology">
+                                    <img src="assets/images/hai1/cyber.jpg" 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"
-                                        alt="Analytics">
+                                    <img src="assets/images/hai1/qa.jpg" 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"
-                                        alt="Technology">
+                                    <img src="assets/images/hai1/cyber.jpg" 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"
-                                        alt="Analytics">
+                                    <img src="assets/images/hai1/hai12.jpg" 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"
-                                        alt="Technology">
+                                    <img src="assets/images/hai1/qa.jpg" 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"
-                                        alt="Analytics">
+                                    <img src="assets/images/hai1/ai.jpg" 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"
-                                        alt="Technology">
+                                    <img src="assets/images/hai1/aws..jpg" 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"
-                                        alt="Analytics">
+                                    <img src="assets/images/hai1/ai.jpg" 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"
-                                        alt="Technology">
+                                    <img src="assets/images/hai1/cyber.jpg" 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"
-                                        alt="Creativity">
+                                    <img src="assets/images/hai1/hai12.jpg" 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"
-                                        alt="Beach">
+                                    <img src="assets/images/hai1/aws..jpg" 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,15 +541,13 @@
                 </div>
             </div>
         </section>
-
-
-    <section class="practice-cards-container">
-
-        <!-- <div class="practice-cards-container"> -->
+        <section>
+            <!-- <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 -->
                     <div class="practice-card active">
@@ -557,7 +563,7 @@
                             <img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
                         </div>
                     </div>
-                    
+
                     <!-- Interview Preparation Card -->
                     <div class="practice-card">
                         <div class="practice-card-content">
@@ -573,7 +579,7 @@
                             <img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
                         </div>
                     </div>
-                    
+
                     <!-- Projects Card -->
                     <div class="practice-card">
                         <div class="practice-card-content">
@@ -589,7 +595,7 @@
                             <img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
                         </div>
                     </div>
-                    
+
                     <!-- Skill Based Assessments Card -->
                     <div class="practice-card">
                         <div class="practice-card-content">
@@ -607,27 +613,26 @@
                     </div>
                 </div>
             </div>
-        <!-- </div> -->
+            <!-- </div> -->
 
-    </section>
-
-        
+        </section>
 
 
-    <section class="card-simple">
-        <div class="card-easy">
-            <div class="card-easy-left">
-                <img src="assets/images/learn/learn.png" alt="Student Image">
-            </div>
-            <div class="card-easy-right">
-                <h2>Learn & Level Up Your Skills</h2>
-                <p>Select from a wide range of courses to upskill and advance your career!</p>
-                <div class="features">
-                    <div class="feature"><span>✓</span>50+ Courses</div>
-                    <div class="feature"><span>✓</span>Certificate</div>
-                    <div class="feature"><span>✓</span>Projects & Assignments</div>
+
+        <section class="card-simple">
+            <div class="card-easy">
+                <div class="card-easy-left">
+                    <img src="assets/images/learn/learn.png" alt="Student Image">
+                </div>
+                <div class="card-easy-right">
+                    <h2>Learn & Level Up Your Skills</h2>
+                    <p>Select from a wide range of courses to upskill and advance your career!</p>
+                    <div class="features">
+                        <div class="feature"><span>✓</span>50+ Courses</div>
+                        <div class="feature"><span>✓</span>Certificate</div>
+                        <div class="feature"><span>✓</span>Projects & Assignments</div>
+                    </div>
                 </div>
-            </div>
         </section>
 
         <section class="move-slider" style="display: none;">
@@ -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;">
-                            <strong style="color: white; font-size: 14px;">Sales Inquiries</strong>
+                        <div style="margin-bottom: 20px; line-height: 23px;">
                             <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="#">Full Stack Development</a></li>
-                        <li><a href="#">Frontend Development</a></li>
-                        <li><a href="#">Backend Development</a></li>
-                        <li><a href="#">JavaScript Mastery</a></li>
-                        <li><a href="#">React & Next.js</a></li>
-                        <li><a href="#">Node.js & Express</a></li>
-                        <li><a href="#">Database Management</a></li>
-                        <li><a href="#">API Development</a></li>
+                        <li><a href="#">Software Development</a></li>
+                        <li><a href="#">Cloud & DevOps</a></li>
+                        <li><a href="#">AI & Data</a></li>
+                        <li><a href="#">Cybersecurity</a></li>
+                        <li><a href="#">Quality & Testing</a></li>
+                        <li><a href="#">Enterprise Tech</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="#">Success Stories</a></li>
-                        <li><a href="#">Mentorship Program</a></li>
+                        <li><a href="#">Mentorship & Alumni</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;">
-                        <p style="color:#000;">
-                            Copyright © 2025 <a href="#" style="color:#000; text-decoration:none;">Kode Pilot Learning Pvt Ltd</a> - All rights reserved.
-                        </p>
+                    <p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
+                        Copyright © 2025 <a href="#" style="color: #120ee2;">Kodepilot</a> - All
+                        rights
+                        reserved.
                     </p>
                 </div>
             </div>
diff --git a/main.css b/main.css
index a0bb5c0..434e2a9 100644
--- a/main.css
+++ b/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;
-     height: 60px;
+     width: 50px;
+     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,328 +1422,470 @@
      }
  }
 
+ .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;
+     }
+ }
+
  /*----------------------------------------------------------------------------------------------------------------------*/
 
 
  /* 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 * {
+     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-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-container {
+     max-width: 1300px;
+     width: 100%;
+ }
 
-.practice-title {
-    font-size: 32px;
-    font-weight: 700;
-    margin-bottom: 12px;
-    color: #111827;
-    text-align: left;
-}
+ .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-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-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 {
+     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:first-child {
+     border-radius: 11px 0 0 11px;
+ }
 
-.practice-card:last-child {
-    border-radius: 0 11px 11px 0;
-}
+ .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;
-}
+ .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; }
+ /* Color changes for active and hover states */
+ .practice-card.active {
+     background-color: #c6e0f1;
+ }
 
-/* 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:nth-child(1):hover,
+ .practice-card:nth-child(1).active {
+     background-color: #89CFF0;
+ }
 
-.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:nth-child(2):hover,
+ .practice-card:nth-child(2).active {
+     background-color: #FEB4CF;
+ }
 
-.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(3):hover,
+ .practice-card:nth-child(3).active {
+     background-color: #DFC5FE;
+ }
 
-.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:nth-child(4):hover,
+ .practice-card:nth-child(4).active {
+     background-color: #FFE186;
+ }
 
-.practice-card h3 {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 12px;
-    color: #111827;
-    transition: transform 0.5s ease;
-}
+ /* 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 p {
-    font-size: 15px;
-    color: #6b7280;
-    line-height: 1.5;
-    margin-bottom: 16px;
-    transition: transform 0.5s ease;
-}
+ .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-meta-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 16px;
-    font-size: 14px;
-    color: #4b5563;
-    transition: transform 0.5s ease;
-}
+ .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-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-card:nth-child(1) .practice-card-icon {
+     background-color: #1268f3;
+     color: white;
+ }
 
-.practice-footer-text {
-    font-size: 14px;
-    font-weight: 600;
-    color: #374151;
-    margin-top: auto;
-    transition: transform 0.5s ease;
-}
+ .practice-card:nth-child(2) .practice-card-icon {
+     background-color: #ef4444;
+     color: white;
+ }
 
-.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-card:nth-child(3) .practice-card-icon {
+     background-color: #8b5cf6;
+     color: white;
+ }
 
-.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-card:nth-child(4) .practice-card-icon {
+     background-color: #f59e0b;
+     color: white;
+ }
 
-.practice-cta-btn:hover::before {
-    left: 100%;
-}
+ .practice-card h3 {
+     font-size: 20px;
+     font-weight: 600;
+     margin-bottom: 12px;
+     color: #111827;
+     transition: transform 0.5s ease;
+ }
 
-.practice-cta-btn:hover {
-    background-color: #374151;
-    transform: translateY(-2px);
-    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
-}
+ .practice-card p {
+     font-size: 15px;
+     color: #6b7280;
+     line-height: 1.5;
+     margin-bottom: 16px;
+     transition: transform 0.5s ease;
+ }
 
-/* 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-meta-info {
+     display: flex;
+     align-items: center;
+     margin-bottom: 16px;
+     font-size: 14px;
+     color: #4b5563;
+     transition: transform 0.5s ease;
+ }
 
-.practice-card.active .practice-card-svg {
-    width: 45%;
-    opacity: 1;
-}
+ .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-card.active .practice-cta-btn {
-    opacity: 1;
-    transform: translateY(0);
-}
+ .practice-footer-text {
+     font-size: 14px;
+     font-weight: 600;
+     color: #374151;
+     margin-top: auto;
+     transition: transform 0.5s ease;
+ }
 
-.practice-card.active .practice-card-icon {
-    transform: scale(1.1) rotate(5deg);
-}
+ .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-card.active h3 {
-    transform: translateY(-3px);
-}
+ .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-card.active p,
-.practice-card.active .practice-meta-info,
-.practice-card.active .practice-footer-text {
-    transform: translateY(-2px);
-}
+ .practice-cta-btn:hover::before {
+     left: 100%;
+ }
 
-/* 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-cta-btn:hover {
+     background-color: #374151;
+     transform: translateY(-2px);
+     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+ }
 
-.practice-card:hover:not(.active) .practice-card-svg {
-    width: 25%;
-    opacity: 0.8;
-}
+ /* 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;
+ }
 
-/* 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 .practice-card-svg {
+     width: 45%;
+     opacity: 1;
+ }
 
-.practice-card.active::after,
-.practice-card:hover::after {
-    opacity: 1;
-}
+ .practice-card.active .practice-cta-btn {
+     opacity: 1;
+     transform: translateY(0);
+ }
 
-@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);
-    }
-}
\ No newline at end of file
+ .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);
+     }
+ }
\ No newline at end of file
diff --git a/main.js b/main.js
index c9ef5af..d261a7b 100644
--- a/main.js
+++ b/main.js
@@ -387,10 +387,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 function renderCourses(allCourses) {
     const container = document.querySelector('.corces');
-    if (!container) {
-        console.error("⚠️ No .corces container found in DOM");
-        return;
-    }
+    if (!container) return;
 
     container.innerHTML = '';
 
@@ -401,23 +398,53 @@ function renderCourses(allCourses) {
         grouped[course.category].push(course);
     });
 
-    // Render each category section
-    Object.keys(grouped).forEach(category => {
+    // Convert grouped object to array for merging
+    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' });
+    });
+});