From 8d01e06660dc8560b363bf31615b5a72edd2c883 Mon Sep 17 00:00:00 2001
From: "dhanush.s" <dhanush.s@opsmonsters.in>
Date: Mon, 29 Sep 2025 12:00:00 +0530
Subject: [PATCH] fix: ui imp

---
 index.html |  14 ++-
 main.css   | 243 ++++++++++++++++++++++++++++++++++++++++++-----------
 main.js    | 198 +++++++------------------------------------
 3 files changed, 233 insertions(+), 222 deletions(-)

diff --git a/index.html b/index.html
index 3543a99..1858508 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="main.css">
     <link rel="stylesheet" href="templateapi/main.css">
     <link rel="icon" type="image/x-icon" href="templateapi/assets/images/logo/favicon.ico">
-    <link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
     <style>
         .center-container {
             display: flex;
@@ -777,15 +776,12 @@
                     </ul>
                 </div>
             </div>
-
             <div class="footer-bottom">
-                <div>
-                    <p>
-                        Copyright © 2025 <a>KodePilot</a> - All
-                        rights
-                        reserved.
-                    </p>
-                </div>
+                <p>
+                    Copyright © 2025
+                    <a href="https://kodepilot.com" target="_blank">KodePilot</a>
+                    - All rights reserved.
+                </p>
             </div>
         </footer>
     </div>
diff --git a/main.css b/main.css
index f186549..5197a7f 100644
--- a/main.css
+++ b/main.css
@@ -1,7 +1,7 @@
  :root {
      --course-max-width: 1200px;
      --course-max-width-small: 1000px;
-     --section-margin: 30px 20px;
+     --section-margin: 60px 20px;
  }
 
  @media (max-width: 1360px) {
@@ -45,7 +45,7 @@
      width: 100%;
      top: 0;
      height: 60px;
-     z-index: 9999;
+     z-index: 20;
  }
 
  .logo {
@@ -104,8 +104,8 @@
  .hero {
      text-align: start;
      margin: var(--section-margin);
-     line-height: 20px;
      padding-top: 11px;
+     line-height: 37px;
  }
 
  .hero h1 {
@@ -167,9 +167,10 @@
 
  .card small {
      display: block;
-     margin-top: 10px;
+     margin-top: -2px;
      font-weight: normal;
-     max-width: 120px;
+     max-width: 142px;
+     line-height: 23px;
  }
 
  .green {
@@ -384,10 +385,10 @@
  }
 
  .our-numbers {
-     width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
+     margin: var(--section-margin);
  }
 
  .our-numbers h2 {
@@ -399,14 +400,13 @@
  }
 
  .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;
-     min-width: 90%;
+     min-width: var(--course-max-width);
  }
 
  .stat-item {
@@ -511,7 +511,7 @@
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
-     min-width: 100px;
+     max-width: var(--course-max-width);
  }
 
  .card-add {
@@ -697,7 +697,7 @@
      font-size: 20px;
      color: #333;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-     z-index: 10;
+     z-index: 1;
  }
 
  .nav-button:hover {
@@ -809,6 +809,25 @@
      color: #ffffff;
  }
 
+ .footer-bottom {
+     border-top: 1px solid rgba(255, 255, 255, 0.2);
+     margin-top: 20px;
+     padding: 15px 0;
+     text-align: center;
+     font-size: 14px;
+     color: #ccc;
+ }
+
+ .footer-bottom a {
+     color: #fff;
+     text-decoration: none;
+     font-weight: 600;
+ }
+
+ .footer-bottom a:hover {
+     text-decoration: underline;
+ }
+
  .company-section {
      grid-column: 1;
  }
@@ -946,32 +965,6 @@
      opacity: 0.9;
  }
 
- .footer-bottom {
-     border-top: 1px solid #475569;
-     margin-top: 40px;
-     padding-top: 20px;
-     font-size: 12px;
-     color: #94a3b8;
-     text-align: left;
-     background: white;
- }
-
- .footer-bottom-links {
-     display: flex;
-     flex-wrap: wrap;
-     gap: 20px;
-     margin-top: 10px;
- }
-
- .footer-bottom-links a {
-     color: #94a3b8;
-     text-decoration: none;
- }
-
- .footer-bottom-links a:hover {
-     color: white;
- }
-
  .hiring-badge {
      background-color: #10b981;
      color: white;
@@ -1390,9 +1383,6 @@
 
  }
 
-
-
-
  .practice-cards-container * {
      margin: 0;
      padding: 0;
@@ -1460,7 +1450,6 @@
  }
 
  .practice-cards-wrapper {
-     margin: 30px 0;
      display: flex;
      height: 380px;
      border-radius: 12px;
@@ -1702,6 +1691,27 @@
      transform: translateY(-2px);
  }
 
+ .mobile-slide-menu {
+     position: fixed;
+     top: 0;
+     right: -100%;
+     width: 300px;
+     height: 100vh;
+     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 242, 247, 0.9));
+     backdrop-filter: blur(20px);
+     border-left: 1px solid rgba(255, 255, 255, 0.3);
+     z-index: 99;
+     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+     box-shadow: -20px 0 40px rgba(0, 0, 0, 0.15);
+     display: flex;
+     flex-direction: column;
+     padding: 80px 0 40px 0;
+     display: none;
+ }
+
+ .mobile-slide-menu.active {
+     right: 0;
+ }
 
  .practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
      opacity: 1;
@@ -1764,11 +1774,6 @@
  }
 
  @media (max-width: 1024px) {
-     .stats-grid {
-         grid-template-columns: repeat(3, 1fr);
-         gap: 15px;
-     }
-
      .stat-item {
          min-height: 100px;
      }
@@ -1780,6 +1785,7 @@
      }
 
      .stats-grid {
+         min-width: var(--course-max-width);
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
      }
@@ -1809,6 +1815,10 @@
          display: none;
      }
 
+     .stats-grid {
+         min-width: 90%;
+     }
+
      .mnc-box {
          display: flex;
          align-items: center;
@@ -1837,7 +1847,7 @@
      }
 
      .card-simple {
-         min-width: 90%;
+         width: 90%;
      }
 
      .move-slider-animation-box {
@@ -1920,7 +1930,7 @@
      }
 
      .logo {
-         margin-left: 8px;
+         margin-left: 15px;
      }
 
      .slide1r-container {
@@ -2048,6 +2058,145 @@
          max-width: 100%;
          min-height: 280px;
      }
+
+     .cards_box {
+         margin-top: 28px;
+     }
+
+     .buttons {
+         display: none !important;
+     }
+
+     .mobile-hamburger {
+         display: flex !important;
+         flex-direction: column;
+         cursor: pointer;
+         padding: 10px;
+         padding-right: 15px;
+     }
+
+     .mobile-hamburger:hover {
+         transform: scale(1.05);
+         background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
+     }
+
+     .hamburger-line {
+         width: 26px;
+         height: 3px;
+         background: linear-gradient(135deg, #667eea, #764ba2);
+         margin: 3px 0;
+         border-radius: 3px;
+         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+         box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+     }
+
+     .mobile-hamburger.active .hamburger-line:nth-child(1) {
+         transform: rotate(45deg) translate(6px, 6px);
+         background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+     }
+
+     .mobile-hamburger.active .hamburger-line:nth-child(2) {
+         opacity: 0;
+         transform: translateX(20px);
+     }
+
+     .mobile-hamburger.active .hamburger-line:nth-child(3) {
+         transform: rotate(-45deg) translate(8px, -8px);
+         background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+     }
+
+     .mobile-menu-overlay {
+         position: fixed;
+         top: 0;
+         left: 0;
+         width: 100vw;
+         height: 100vh;
+         background: rgba(0, 0, 0, 0.6);
+         backdrop-filter: blur(8px);
+         z-index: 20;
+         opacity: 0;
+         visibility: hidden;
+         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+     }
+
+     .mobile-menu-overlay.active {
+         opacity: 1;
+         visibility: visible;
+     }
+
+     .mobile-menu-item {
+         padding: 20px 40px;
+         border: none;
+         background: none;
+         font-size: 18px;
+         font-weight: 600;
+         color: #2d3748;
+         cursor: pointer;
+         text-align: left;
+         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+         position: relative;
+         overflow: hidden;
+         opacity: 0;
+         transform: translateX(30px);
+     }
+
+     .mobile-slide-menu {
+         display: flex;
+     }
+
+     .mobile-menu-item::before {
+         content: '';
+         position: absolute;
+         top: 0;
+         left: -100%;
+         width: 100%;
+         height: 100%;
+         background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+     }
+
+     .mobile-menu-item:hover::before {
+         left: 0;
+     }
+
+     .mobile-menu-item:hover {
+         color: #667eea;
+         transform: translateX(15px);
+     }
+
+     .mobile-menu-item:active {
+         transform: translateX(15px) scale(0.98);
+     }
+
+     .menu-close-btn {
+         position: absolute;
+         top: 20px;
+         right: 20px;
+         width: 40px;
+         height: 40px;
+         border: none;
+         background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+         backdrop-filter: blur(10px);
+         border-radius: 50%;
+         color: #718096;
+         font-size: 24px;
+         cursor: pointer;
+         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+         display: flex;
+         align-items: center;
+         justify-content: center;
+     }
+
+     .menu-close-btn:hover {
+         background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
+         transform: rotate(90deg) scale(1.1);
+         color: #ff6b6b;
+     }
+
+     .mobile-hamburger {
+         display: none;
+     }
  }
 
  @keyframes fadeInUp {
diff --git a/main.js b/main.js
index 6d75639..d35db19 100644
--- a/main.js
+++ b/main.js
@@ -456,7 +456,6 @@ class ModernMobileMenu {
     }
 
     init() {
-        this.injectStyles();
         this.createMobileMenu();
         this.bindEvents();
         this.checkScreenSize();
@@ -464,169 +463,6 @@ class ModernMobileMenu {
 
         window.addEventListener('resize', () => this.checkScreenSize());
     }
-
-    injectStyles() {
-        const style = document.createElement('style');
-        style.textContent = `
-            @media (max-width: 480px) {
-                .buttons {
-                    display: none !important;
-                }
-                
-                .mobile-hamburger {
-                    display: flex !important;
-                    flex-direction: column;
-                    cursor: pointer;
-                    padding: 10px;
-                    border-radius: 12px;
-                    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
-
-                }
-                
-                .mobile-hamburger:hover {
-                    transform: scale(1.05);
-                    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.1));
-                }
-                
-                .hamburger-line {
-                    width: 26px;
-                    height: 3px;
-                    background: linear-gradient(135deg, #667eea, #764ba2);
-                    margin: 3px 0;
-                    border-radius: 3px;
-                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
-                }
-                
-                .mobile-hamburger.active .hamburger-line:nth-child(1) {
-                    transform: rotate(45deg) translate(6px, 6px);
-                    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
-                }
-                
-                .mobile-hamburger.active .hamburger-line:nth-child(2) {
-                    opacity: 0;
-                    transform: translateX(20px);
-                }
-                
-                .mobile-hamburger.active .hamburger-line:nth-child(3) {
-                    transform: rotate(-45deg) translate(8px, -8px);
-                    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
-                }
-                
-                .mobile-menu-overlay {
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100vw;
-                    height: 100vh;
-                    background: rgba(0, 0, 0, 0.6);
-                    backdrop-filter: blur(8px);
-                    z-index: 9998;
-                    opacity: 0;
-                    visibility: hidden;
-                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                }
-                
-                .mobile-menu-overlay.active {
-                    opacity: 1;
-                    visibility: visible;
-                }
-                
-                .mobile-slide-menu {
-                    position: fixed;
-                    top: 0;
-                    right: -100%;
-                    width: 300px;
-                    height: 100vh;
-                    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,242,247,0.9));
-                    backdrop-filter: blur(20px);
-                    border-left: 1px solid rgba(255,255,255,0.3);
-                    z-index: 9999;
-                    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-                    box-shadow: -20px 0 40px rgba(0,0,0,0.15);
-                    display: flex;
-                    flex-direction: column;
-                    padding: 80px 0 40px 0;
-                }
-                
-                .mobile-slide-menu.active {
-                    right: 0;
-                }
-                
-                .mobile-menu-item {
-                    padding: 20px 40px;
-                    border: none;
-                    background: none;
-                    font-size: 18px;
-                    font-weight: 600;
-                    color: #2d3748;
-                    cursor: pointer;
-                    text-align: left;
-                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                    border-bottom: 1px solid rgba(0,0,0,0.05);
-                    position: relative;
-                    overflow: hidden;
-                    opacity: 0;
-                    transform: translateX(30px);
-                }
-                
-                .mobile-menu-item::before {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: -100%;
-                    width: 100%;
-                    height: 100%;
-                    background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
-                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                }
-                
-                .mobile-menu-item:hover::before {
-                    left: 0;
-                }
-                
-                .mobile-menu-item:hover {
-                    color: #667eea;
-                    transform: translateX(15px);
-                }
-                
-                .mobile-menu-item:active {
-                    transform: translateX(15px) scale(0.98);
-                }
-                
-                .menu-close-btn {
-                    position: absolute;
-                    top: 20px;
-                    right: 20px;
-                    width: 40px;
-                    height: 40px;
-                    border: none;
-                    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
-                    backdrop-filter: blur(10px);
-                    border-radius: 50%;
-                    color: #718096;
-                    font-size: 24px;
-                    cursor: pointer;
-                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-                
-                .menu-close-btn:hover {
-                    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2));
-                    transform: rotate(90deg) scale(1.1);
-                    color: #ff6b6b;
-                }
-            }
-            
-            .mobile-hamburger {
-                display: none;
-            }
-        `;
-        document.head.appendChild(style);
-    }
-
     createMobileMenu() {
 
         this.hamburger = document.createElement('div');
@@ -729,11 +565,41 @@ class ModernMobileMenu {
             this.closeMenu();
         }
     }
-}
 
+}
 
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', () => new ModernMobileMenu());
 } else {
     new ModernMobileMenu();
-}
\ No newline at end of file
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const counters = document.querySelectorAll(".stat-number");
+
+    const animateCounter = (el, target) => {
+        let current = 0;
+        const step = Math.ceil(target / 50);
+        const interval = setInterval(() => {
+            current += step;
+            if (current >= target) {
+                current = target;
+                clearInterval(interval);
+            }
+            el.innerHTML = current + "<span class='highlight'>+</span>";
+        }, 20);
+    };
+
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const el = entry.target;
+                const finalNumber = parseInt(el.textContent);
+                animateCounter(el, finalNumber);
+                observer.unobserve(el);
+            }
+        });
+    }, { threshold: 0.3 });
+
+    counters.forEach(counter => observer.observe(counter));
+});
\ No newline at end of file