From 188193af7ed1e97eec744f19251eb4d81988285d Mon Sep 17 00:00:00 2001
From: "dhanush.s" <dhanush.s@opsmonsters.in>
Date: Mon, 29 Sep 2025 18:51:49 +0530
Subject: [PATCH] fix: ui

---
 index.html | 22 +++++-------
 main.css   | 98 +++++++++++++++++++++++++++++++-----------------------
 main.js    |  1 -
 3 files changed, 65 insertions(+), 56 deletions(-)

diff --git a/index.html b/index.html
index 41322c9..3543a99 100644
--- a/index.html
+++ b/index.html
@@ -269,7 +269,7 @@
             </div>
         </section>
 
-        <section id="slider">
+        <section class="slider" id="slider">
             <div class="slide1r-container">
                 <div class="slide1r-wrapper">
                     <div class="slide1r-track" id="slide1rTrack">
@@ -457,6 +457,7 @@
                 </div>
             </div>
         </section>
+
         <section class="move-slider-ruby">
             <div class="move-slider-container">
                 <div class="move-slider-box-static">
@@ -539,8 +540,8 @@
                 </div>
             </div>
         </section>
-        <section>
 
+        <section class="practice-container-parent">
             <div class="practice-container">
                 <div class="practice-container-box">
                     <div class="practice-container-text-box">
@@ -638,15 +639,6 @@
                 </div>
         </section>
 
-        <section class="move-slider" style="display: none;">
-            <div class="container-slider">
-                <div class="container-slider-baby container-slider-1"></div>
-                <div class="container-slider-baby container-slider-2"></div>
-                <div class="container-slider-baby container-slider-3"></div>
-                <div class="container-slider-baby container-slider-4"></div>
-            </div>
-        </section>
-
         <section class="our-numbers">
             <div class="stats-grid">
                 <div class="stat-item">
@@ -680,9 +672,11 @@
                 </div>
             </div>
         </section>
+
         <section class="corces-s">
             <div class="corces"></div>
         </section>
+
         <footer class="footer">
             <div class="footer-container">
                 <div class="footer-section company-section">
@@ -785,9 +779,9 @@
             </div>
 
             <div class="footer-bottom">
-                <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
-                    <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
+                <div>
+                    <p>
+                        Copyright © 2025 <a>KodePilot</a> - All
                         rights
                         reserved.
                     </p>
diff --git a/main.css b/main.css
index 74400c0..88ab790 100644
--- a/main.css
+++ b/main.css
@@ -1,6 +1,7 @@
  :root {
      --course-max-width: 1200px;
      --course-max-width-small: 1000px;
+     --section-margin: 30px 20px;
  }
 
  @media (max-width: 1360px) {
@@ -42,7 +43,8 @@
      border-bottom: 1px solid #eee;
      position: fixed;
      width: 100%;
-     height: 56px;
+     top: 0;
+     height: 60px;
      z-index: 9999;
  }
 
@@ -91,7 +93,7 @@
 
  .business {
      background: #FFD700;
-       color: #030101;
+     color: #030101;
  }
 
  .login {
@@ -101,8 +103,9 @@
 
  .hero {
      text-align: start;
-     padding: 50px 20px;
+     margin: var(--section-margin);
      line-height: 20px;
+     padding-top: 11px;
  }
 
  .hero h1 {
@@ -131,6 +134,7 @@
      margin: auto;
      padding: 20px;
      flex-wrap: wrap;
+     margin-top: 50px;
  }
 
  .cards_box {
@@ -165,6 +169,7 @@
      display: block;
      margin-top: 10px;
      font-weight: normal;
+     max-width: 120px;
  }
 
  .green {
@@ -217,7 +222,7 @@
  }
 
  .users {
-     padding: 0px 20px;
+     margin: var(--section-margin);
      display: flex;
      justify-content: center;
      align-items: center;
@@ -314,7 +319,7 @@
  }
 
  .mnc {
-     padding: 40px 20px;
+     margin: var(--section-margin);
      display: flex;
      justify-content: center;
      align-items: center;
@@ -379,8 +384,10 @@
  }
 
  .our-numbers {
-     max-width: var(--course-max-width);
-     margin: 50px auto 50px auto;
+     width: 100%;
+     display: flex;
+     justify-content: center;
+     align-items: center;
  }
 
  .our-numbers h2 {
@@ -392,17 +399,19 @@
  }
 
  .stats-grid {
+     margin: var(--section-margin);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
+     min-width: var(--course-max-width);
      gap: 20px;
      justify-items: center;
      align-items: stretch;
+     max-width: 90%;
  }
 
  .stat-item {
      background: HSL(0, 0%, 96.5%);
      text-align: center;
-     padding: 20px 10px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
@@ -487,7 +496,7 @@
 
  .subtitle {
      color: #6b7280;
-     line-height: 0px;
+     line-height: 22px;
  }
 
  .arrow-icon {
@@ -551,6 +560,17 @@
      color: #1f2937;
  }
 
+ .slider {
+     margin: var(--section-margin);
+     display: flex;
+     justify-content: center;
+     align-items: center;
+ }
+
+ .opportunity-section {
+     margin: var(--section-margin);
+ }
+
  .hover-slider {
      display: none;
      padding: 0 0 50px 0;
@@ -572,12 +592,10 @@
  }
 
  .slide1r-container {
-     margin: 0 auto;
      max-width: var(--course-max-width-small);
      width: 100%;
      position: relative;
      border-radius: 20px;
-     padding: 25px;
      font-family: 'Arial', sans-serif;
  }
 
@@ -965,15 +983,14 @@
  }
 
  .move-slider-ruby {
-     width: 100%;
+     width: auto;
      overflow: hidden;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
-     margin-top: 76px;
-     padding-bottom: 40px;
+     margin: var(--section-margin);
  }
 
  .move-slider-box-static {
@@ -981,7 +998,6 @@
      height: 350px;
      min-width: 350px;
      border-radius: 10px;
-     padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
@@ -1136,8 +1152,10 @@
  }
 
  .card-simple {
-     max-width: var(--course-max-width);
-     margin: 70px auto 70px auto;
+     margin: var(--section-margin);
+     display: flex;
+     justify-content: center;
+     align-items: center;
  }
 
  .card-easy {
@@ -1145,7 +1163,7 @@
      background-color: #F6F8FA;
      border-radius: 20px;
      overflow: hidden;
-     margin: 20px;
+     max-width: var(--course-max-width);
  }
 
  .card-easy-left {
@@ -1391,11 +1409,8 @@
      align-items: flex-start;
  }
 
- .practice-container {
-     max-width: 1200px;
-     width: 100%;
-     margin: 0 auto;
-     padding: 0 20px;
+ .practice-container-parent {
+     margin: var(--section-margin);
  }
 
  .practice-container-box {
@@ -1542,7 +1557,6 @@
      justify-content: center;
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 0;
-     padding: 20px;
      background: transparent;
      flex-shrink: 0;
  }
@@ -1649,10 +1663,10 @@
  }
 
  .practice-cta-btn {
+     padding: 10px;
      margin-top: 16px;
      background-color: #111827;
      color: white;
-     padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
@@ -1757,12 +1771,8 @@
 
      .stat-item {
          min-height: 100px;
-         padding: 15px 8px;
      }
 
-     .our-numbers {
-         padding: 40px 20px;
-     }
 
      .our-numbers h2 {
          font-size: 2rem;
@@ -1780,7 +1790,6 @@
 
      .stat-item {
          min-height: 110px;
-         padding: 20px;
      }
 
      .mnc h2 {
@@ -1796,7 +1805,7 @@
  }
 
  @media (max-width: 768px) {
-     .practice-container {
+     .practice-container-parent {
          display: none;
      }
 
@@ -1804,11 +1813,9 @@
          display: flex;
          align-items: center;
          max-width: 90%;
-         padding: 20px;
      }
 
      .slide1r-container {
-         padding: 20px;
          width: 90%;
      }
 
@@ -1818,23 +1825,28 @@
      }
 
      .container {
-         padding: 20px;
          width: 90%;
      }
 
      .move-slider-container {
-         padding: 20px;
          width: 90%;
      }
 
+     .move-slider-ruby {
+         width: auto;
+     }
+
+     .card-simple {
+         min-width: 90%;
+     }
+
      .move-slider-animation-box {
          margin-top: 393px;
          margin-right: 0px;
      }
 
      .move-slider-box-static {
-         padding: 20px;
-         min-width: 90%;
+         min-width: 100%;
      }
 
      .card-simple {
@@ -1899,10 +1911,6 @@
          max-height: 100%;
      }
 
-     .our-numbers {
-         margin: 0 auto 0 auto;
-     }
-
      .corces-s {
          margin: 0px 0;
      }
@@ -2002,6 +2010,7 @@
 
  @media (max-width: 480px) {
      .stats-grid {
+         max-width: 90%;
          grid-template-columns: 1fr;
          gap: 25px;
      }
@@ -2032,6 +2041,13 @@
      .next-btn {
          right: -15px;
      }
+
+     .card-add {
+         width: 95%;
+         height: 100%;
+         max-width: 100%;
+         min-height: 280px;
+     }
  }
 
  @keyframes fadeInUp {
diff --git a/main.js b/main.js
index 7e622dd..20faa44 100644
--- a/main.js
+++ b/main.js
@@ -432,7 +432,6 @@ setInterval(() => {
     }, 500);
 }, 5000);
 
-
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll(".footer a").forEach(link => {
         link.setAttribute("href", "/apply");