Update website styles and fix responsive design

css/style.css

@@ -1,5 +1,99 @@
 @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 
+/* Hero Section Typewriter Styles - Compressed for Desktop */
+.hero-typewriter-section {
+  margin: 1.2rem 0;
+}
+
+.hero-subheading {
+  font-size: 1.4rem;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 0.6rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.typewriter-container {
+  font-size: 1.8rem;
+  color: #52eef5;
+  font-weight: 600;
+  text-align: center;
+  min-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.8rem;
+}
+
+.hero-supporting-text {
+  font-size: 1.2rem;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.5;
+  margin: 1.5rem auto;
+  max-width: 600px;
+  text-align: center;
+}
+
+/* Hero CTA Buttons - Compact Layout */
+.hero-cta-buttons {
+  display: flex;
+  gap: 1.2rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1.8rem;
+  flex-wrap: wrap;
+}
+
+.primary-cta {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+  padding: 0.8rem 2rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  box-shadow: 
+    0 6px 24px rgba(109, 40, 217, 0.4),
+    0 3px 12px rgba(147, 51, 234, 0.3);
+}
+
+.primary-cta:hover {
+  transform: translateY(-2px) scale(1.03);
+  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 
+    0 10px 32px rgba(109, 40, 217, 0.6),
+    0 5px 16px rgba(147, 51, 234, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
+}
+
+.secondary-cta {
+  background: transparent;
+  border: 2px solid #52eef5;
+  color: #52eef5;
+  padding: 0.8rem 2rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(8px);
+}
+
+.secondary-cta:hover {
+  background: rgba(82, 238, 245, 0.1);
+  color: #ffffff;
+  border-color: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(82, 238, 245, 0.3);
+}
+
 /* Page loading transitions & FOUC prevention */
 html.no-js {
     visibility: hidden;
@@ -1234,8 +1328,8 @@ section h2 {
     width: 100%;
     margin: 0;
     overflow: hidden;
-    height: 80vh;
+    height: 70vh;
-    min-height: 600px;
+    min-height: 500px;
     background: none;
     /* Ensure visible during page load */
     visibility: visible !important;
@@ -1250,7 +1344,7 @@ section h2 {
     height: 100%;
     align-items: center;
     justify-content: center;
-    padding: 10rem 4% 2rem 4%;
+    padding: 8rem 4% 1.5rem 4%;
     /* Ensure consistent display */
     visibility: visible !important;
 }
@@ -1273,10 +1367,10 @@ section h2 {
 }
 
 .hero-content h1 {
-    font-size: 6rem;
+    font-size: 4.5rem;
     line-height: 1.1;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
-    letter-spacing: 2px;
+    letter-spacing: 1.5px;
     font-weight: 20;
     position: relative;
     text-shadow: none !important;

index.html

@@ -241,9 +241,18 @@
     <div class="hero-overlay"></div>
     
     <div class="hero-container">      <div class="hero-content">
-        <h1>AI SERVICES<br />AND <span class="typewriter-text" id="typewriter">SOLUTIONS</span><span class="cursor"></span></h1>
+        <h1>We Turn Ideas Into AI-Powered Reality</h1>
-        <p>Inventing the future, powered by intelligence: We unlock the infinite potential of artificial intelligence to create groundbreaking solutions that anticipate tomorrow's needs.</p>
+        <div class="hero-typewriter-section">
-        <a href="contact.html" class="btn-primary">Get Started</a>
+          <p class="hero-subheading">We deliver:</p>
+          <div class="typewriter-container">
+            <span class="typewriter-text" id="typewriter">AI Strategy & Roadmaps</span><span class="cursor"></span>
+          </div>
+        </div>
+        <p class="hero-supporting-text">Your partner in building intelligent, scalable AI systems that drive innovation and growth.</p>
+        <div class="hero-cta-buttons">
+          <a href="contact.html" class="btn-primary primary-cta">Book a Free Consultation</a>
+          <a href="Industries/case-studies.html" class="btn-secondary secondary-cta">See Our Work</a>
+        </div>
       </div>
     </div>
   </section><!-- TECHNOLOGIES -->
@@ -724,12 +733,19 @@
             const speed = this.isDeleting ? this.deleteSpeed : this.typeSpeed;
             setTimeout(() => this.type(), speed);
         }
-    }
+    }    // Initialize when page loads
-
-    // Initialize when page loads
     document.addEventListener('DOMContentLoaded', function() {
         const typewriterElement = document.getElementById('typewriter');
-        const words = ['SOLUTIONS', 'GENERATIVE AI', 'AUTOMATION FLOWS', 'AGENTIC AI'];
+        const words = [
+            'AI Strategy & Roadmaps',
+            'Custom LLM Solutions', 
+            'AI Automation & Workflows',
+            'Data-Driven Business Intelligence',
+            'Computer Vision Systems',
+            'NLP & Chatbot Integrations',
+            'AI for EdTech & Healthcare',
+            'Predictive Analytics Tools'
+        ];
         new TypewriterEffect(typewriterElement, words);
     });
     

js/typewriter-effect.js

@@ -0,0 +1,78 @@
+// Typewriter effect for hero section
+class TypewriterEffect {
+    constructor(element, words, options = {}) {
+        this.element = element;
+        this.words = words;
+        this.speed = options.speed || 100;
+        this.deleteSpeed = options.deleteSpeed || 50;
+        this.pauseBetweenWords = options.pauseBetweenWords || 2000;
+        this.pauseBeforeDelete = options.pauseBeforeDelete || 1500;
+        this.currentWordIndex = 0;
+        this.currentText = '';
+        this.isDeleting = false;
+        this.cursor = document.querySelector('.cursor');
+        
+        this.start();
+    }
+    
+    start() {
+        this.type();
+    }
+    
+    type() {
+        const currentWord = this.words[this.currentWordIndex];
+        
+        if (this.isDeleting) {
+            // Remove character
+            this.currentText = currentWord.substring(0, this.currentText.length - 1);
+        } else {
+            // Add character
+            this.currentText = currentWord.substring(0, this.currentText.length + 1);
+        }
+        
+        this.element.textContent = this.currentText;
+        
+        let delay = this.speed;
+        
+        if (this.isDeleting) {
+            delay = this.deleteSpeed;
+        }
+        
+        // If word is complete
+        if (!this.isDeleting && this.currentText === currentWord) {
+            delay = this.pauseBeforeDelete;
+            this.isDeleting = true;
+        } else if (this.isDeleting && this.currentText === '') {
+            this.isDeleting = false;
+            this.currentWordIndex = (this.currentWordIndex + 1) % this.words.length;
+            delay = this.pauseBetweenWords;
+        }
+        
+        setTimeout(() => this.type(), delay);
+    }
+}
+
+// Initialize typewriter effect when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    const typewriterElement = document.getElementById('typewriter');
+    
+    if (typewriterElement) {
+        const services = [
+            'AI Strategy & Roadmaps',
+            'Custom LLM Solutions',
+            'AI Automation & Workflows', 
+            'Data-Driven Business Intelligence',
+            'Computer Vision Systems',
+            'NLP & Chatbot Integrations',
+            'AI for EdTech & Healthcare',
+            'Predictive Analytics Tools'
+        ];
+        
+        new TypewriterEffect(typewriterElement, services, {
+            speed: 80,
+            deleteSpeed: 40,
+            pauseBetweenWords: 500,
+            pauseBeforeDelete: 2000
+        });
+    }
+});