Major website redesign: Complete CSS architecture overhaul

- Reorganized CSS into modular architecture (core.css, pages.css, responsive.css, components.css)
- Implemented comprehensive design system with CSS custom properties for theming
- Added responsive navigation with hamburger menu and dropdown systems
- Created modern card-based component system for courses, expertise, and services
- Enhanced all HTML pages with updated styling and improved user experience
- Added extensive animation system with smooth transitions and hover effects
- Implemented mobile-first responsive design with comprehensive breakpoints
- Established industry-specific color theming system
- Moved old CSS files to backup folder for reference
- Updated all service, education, and industry pages with consistent styling

index.html

@@ -80,23 +80,10 @@
       pointer-events: none;
       display: none;    }
   </style>
-  
-    <!-- Core styles - load first -->
-    <link rel="stylesheet" href="css/01-base-variables.css">
-    <link rel="stylesheet" href="css/02-layout-components.css">
-    <link rel="stylesheet" href="css/03-navigation-header.css">
-    
-    <!-- Content styles -->
-  <link rel="stylesheet" href="css/04-hero-sections.css">
-    <link rel="stylesheet" href="css/05-technology-cards.css">
-    <link rel="stylesheet" href="css/06-forms-buttons.css">
-    <link rel="stylesheet" href="css/expertise-fix.css">
-  <link rel="stylesheet" href="css/card-heading-divider.css">
-  <link rel="stylesheet" href="css/fix-subheading.css">
-    
-    <!-- Responsive and effects - load last -->
-    <link rel="stylesheet" href="css/07-media-responsive.css">
-    <link rel="stylesheet" href="css/08-animations-effects.css">
+    <!-- CONSOLIDATED CSS - Optimized for Performance -->
+    <link rel="stylesheet" href="css/core.css">
+    <link rel="stylesheet" href="css/components.css">
+    <link rel="stylesheet" href="css/responsive.css">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <!-- Simplified Loading Script -->
@@ -373,12 +360,10 @@
         </div>
       </div>
     </div>
-  </section>
-
-  <!-- OUR SPECIALIZATIONS -->
+  </section>  <!-- OUR SPECIALIZATIONS -->
   <section id="specializations" class="container">
     <h2 class="section-heading">OUR SPECIALIZATIONS</h2>
-    <h3 class="section-subheading">AGENTIC AI AND AUTOMATION</h3>
+    <h3 class="section-subheading" style="color: white; font-size: 1.8rem; letter-spacing: 0.5px;">AGENTIC AI AND AUTOMATION</h3>
     <p class="section-intro">We specialize in creating autonomous AI systems that can independently execute complex workflows, make decisions, and continuously optimize processes.</p>
     
     <div class="specializations-cards-grid">
@@ -424,8 +409,7 @@
         <a href="Services/machine-learning.html" class="btn-primary specialization-btn">Learn More</a>
       </div>
     </div>
-  </section>
-  <!-- EXPERTISE -->
+  </section>  <!-- EXPERTISE -->
   <section id="expertise" class="container">
     <h2 class="section-heading">OUR EXPERTISE</h2>
     <div class="exp-grid">
@@ -433,11 +417,15 @@
         <img src="assets/predictive.png" alt="Innovation First Icon" />
         <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Innovation First</h3>
         <p class="exp-description">We prioritize cutting-edge innovation, staying ahead of industry trends to deliver groundbreaking AI solutions.</p>
-      </div>      <div class="exp-item">
+      </div>
+
+      <div class="exp-item">
         <img src="assets/technology.png" alt="Technical Excellence Icon" />
         <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Tech Mastery</h3>
         <p class="exp-description">Our team combines deep technical expertise with practical experience to build robust, scalable AI systems.</p>
-      </div>        <div class="exp-item">
+      </div>
+
+      <div class="exp-item">
         <img src="assets/analytics (1).png" alt="Results Driven Icon" />
         <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Results Driven</h3>
         <p class="exp-description">We deliver measurable business impact through AI solutions that generate real value and maximize ROI.</p>
@@ -446,7 +434,7 @@
       <div class="exp-item">
         <img src="assets/ai-customer-support.svg" alt="Ongoing Support Icon" />
         <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Ongoing Support</h3>
-        <p class="exp-description">We provide continuous monitoring, updates, and optimization to ensure your AI systems perform at their best long after deployment.</p>
+        <p class="exp-description">We provide continuous monitoring, updates, and optimization to ensure your AI systems perform at their best.</p>
       </div>
     </div>
   </section>