Update website structure with new CSS organization and file improvements

This commit is contained in:
2025-06-04 00:59:41 +05:30
parent 8fffdf9a8c
commit 46a0c20dcc
39 changed files with 10010 additions and 18350 deletions

View File

@@ -1,11 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corporate Trainings - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400">
<link rel="stylesheet" href="../css/gn-mobile-responsive.css?v=202412291400">
<!-- 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/card-heading-divider.css">
<link rel="stylesheet" href="../css/training-courses.css">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -70,46 +80,7 @@
<main> <section class="hero-section gn-responsive-container">
<h1>AI-Powered Corporate Training</h1>
<p>We offer customized AI training programs for businesses, designed to meet your specific needs and accelerate your team's AI expertise.</p>
<a href="mailto:education@gyannetra.com" class="btn btn-primary">Request a Training Proposal</a> </section> <section id="featured-courses" class="training-programs-section container">
<h2 class="section-heading gn-mobile-section-heading">FEATURED CORPORATE TRAINING COURSES</h2>
<div class="courses-grid"> <div class="course-card">
<div class="course-video-container">
<img
src="../assets/course-thumbnails/Applied Generative AI course.png"
alt="AI Fundamentals for Business Leaders Course Thumbnail"
class="course-thumbnail"
loading="lazy">
</div>
<div class="course-info">
<h3>AI Fundamentals for Business Leaders</h3>
<p>Comprehensive introduction to artificial intelligence concepts, machine learning basics, and strategic implementation approaches for business leaders and decision-makers.</p> <div class="course-highlights">
<span class="highlight-item"><i class="fas fa-users"></i> Leadership & Management</span>
<span class="highlight-item"><i class="fas fa-clock"></i> Self-paced</span>
<span class="highlight-item"><i class="fas fa-certificate"></i> Certificate included</span>
</div>
<a href="https://learn.gyannetra.com/wlp/course-mcgrpx-1737024309470" class="btn-primary gn-mobile-button" target="_blank" rel="noopener noreferrer">Start Learning</a>
</div> </div><div class="course-card">
<div class="course-video-container">
<img
src="../assets/course-thumbnails/Solar data analytics course.png"
alt="Practical AI Implementation Course Thumbnail"
class="course-thumbnail"
loading="lazy">
</div>
<div class="course-info">
<h3>Practical AI Implementation</h3>
<p>Hands-on training focused on implementing AI solutions in corporate environments, covering tools, frameworks, and best practices for successful AI adoption.</p>
<div class="course-highlights">
<span class="highlight-item"><i class="fas fa-code"></i> Technical Teams</span>
<span class="highlight-item"><i class="fas fa-clock"></i> Self-paced</span>
<span class="highlight-item"><i class="fas fa-project-diagram"></i> Project-based</span>
</div>
<a href="https://learn.gyannetra.com/wlp/course-mcgrpx-1737024821581" class="btn-primary gn-mobile-button" target="_blank" rel="noopener noreferrer">Start Learning</a>
</div>
</div>
</div>
</section>
<p>We offer customized AI training programs for businesses, designed to meet your specific needs and accelerate your team's AI expertise.</p> <a href="mailto:education@gyannetra.com" class="btn btn-primary">Request a Training Proposal</a> </section>
<section id="custom-training-workflow" class="container workflow-section">
<h2 class="section-heading gn-mobile-section-heading">CUSTOM TRAINING MODULES: TAILORED TO YOUR WORKFLOW</h2>
@@ -158,11 +129,11 @@
<div class="step-icon">
<i class="fas fa-search"></i>
</div> <div class="step-content">
<h4>Analyse With Us</h4>
<h4>Innovate with us</h4>
<p>We conduct comprehensive analysis of your current workflows, team capabilities, and business objectives to identify specific training requirements and learning gaps.</p><div class="step-details">
<span>• Workflow mapping sessions</span>
<span>• Skill gap analysis</span>
<span>• Stakeholder interviews</span>
<span>Workflow mapping sessions</span>
<span>Skill gap analysis</span>
<span>Stakeholder interviews</span>
</div>
</div>
<div class="step-connector"></div>
@@ -175,9 +146,9 @@
<div class="step-content">
<h4>Content Curation & Customization</h4>
<p>Our experts develop bespoke curriculum, real-world case studies, and practical examples directly relevant to your industry and operational context.</p> <div class="step-details">
<span>• Industry-specific content</span>
<span>• Custom case studies</span>
<span>• Relevant datasets</span>
<span>Industry-specific content</span>
<span>Custom case studies</span>
<span>Relevant datasets</span>
</div>
</div>
<div class="step-connector"></div>
@@ -190,9 +161,9 @@
<div class="step-content">
<h4>Module Development</h4>
<p>We build comprehensive training materials including interactive presentations, hands-on exercises, and practical simulations that mirror your actual work environment.</p> <div class="step-details">
<span>• Interactive presentations</span>
<span>• Practical exercises</span>
<span>• Simulation environments</span>
<span>Interactive presentations</span>
<span>Practical exercises</span>
<span>Simulation environments</span>
</div>
</div>
<div class="step-connector"></div>
@@ -205,9 +176,9 @@
<div class="step-content">
<h4>Delivery & Feedback</h4>
<p>Expert instructors deliver the training with continuous feedback collection and real-time adjustments to ensure maximum learning effectiveness and engagement.</p> <div class="step-details">
<span>• Expert-led sessions</span>
<span>• Real-time feedback</span>
<span>• Continuous optimization</span>
<span>Expert-led sessions</span>
<span>Real-time feedback</span>
<span>Continuous optimization</span>
</div>
</div>
<div class="step-connector"></div>
@@ -220,16 +191,14 @@
<div class="step-content">
<h4>Post-Training Support</h4>
<p>We provide ongoing support including implementation guidance, troubleshooting assistance, and additional resources to ensure sustained learning impact.</p> <div class="step-details">
<span>• Implementation support</span>
<span>• Follow-up sessions</span>
<span>• Resource library access</span>
<span>Implementation support</span>
<span>Follow-up sessions</span>
<span>Resource library access</span>
</div>
</div>
</div>
</div>
</div> </section>
<section id="transform-cta-section" class="why-choose-us-section container benefits-section">
</div> </section> <section id="transform-cta-section" class="why-choose-us-section container benefits-section">
<div class="workflow-cta">
<div class="cta-content">
<h2 class="section-heading gn-mobile-section-heading">READY TO TRANSFORM YOUR TEAM'S AI CAPABILITIES?</h2>
@@ -264,18 +233,13 @@
<h3>ROI-Focused Training</h3>
<p>Maximize your investment with training that delivers measurable business outcomes and practical implementation skills.</p> </div>
</div>
</div>
</div>
</section>
<!-- Separate CTA Buttons Section with increased spacing -->
<section class="cta-buttons-section">
<div class="container">
<div class="cta-buttons">
<div class="transform-cta-buttons">
<a href="mailto:education@gyannetra.com" class="btn-primary workflow-cta-btn gn-mobile-button">Request a Custom Training Proposal</a>
<a href="../contact.html" class="btn-primary workflow-cta-btn gn-mobile-button">Get In Touch</a>
</div>
</div>
</div>
</section>
</main>
@@ -299,13 +263,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -314,6 +271,17 @@
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
</div>
</div> <div class="footer-bottom">

View File

@@ -4,11 +4,22 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Individual Training - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400"
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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/card-heading-divider.css">
<link rel="stylesheet" href="../css/training-courses.css">
<link rel="stylesheet" href="../css/testimonials.css">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -68,93 +79,47 @@
<p>Gyannetra's training programs are designed for career advancement, skill development, and personal enrichment. Achieve your learning goals with our comprehensive AI education programs.</p>
<a href="../contact.html" class="btn btn-primary">Enroll in a Program Today</a>
</section>
<!-- TRAINING PROGRAMS -->
<section class="training-programs-section container">
<h2 class="section-heading gn-mobile-section-heading">TRAINING PROGRAMS</h2>
<div class="benefits-cards-grid">
<div class="benefit-card">
<div class="benefit-card-icon">
<img src="../assets/mlng.png" alt="Machine Learning Icon" class="gn-responsive-image">
<!-- FEATURED TRAINING COURSES -->
<section id="featured-courses" class="training-programs-section container">
<h2 class="section-heading gn-mobile-section-heading">FEATURED INDIVIDUAL TRAINING COURSES</h2>
<div class="courses-grid">
<div class="course-card">
<div class="course-video-container">
<img
src="../assets/course-thumbnails/Applied Generative AI course.png"
alt="AI Fundamentals for Business Leaders Course Thumbnail"
class="course-thumbnail"
loading="lazy">
</div>
<h3>Introduction to Machine Learning</h3>
<div class="program-details">
<p><strong>Skill Level:</strong> Beginner</p>
<p><strong>Format:</strong> Online, Self-paced</p>
<p><strong>Duration:</strong> 8 weeks</p>
<div class="course-info">
<h3>AI Fundamentals for Business Leaders</h3>
<p>Comprehensive introduction to artificial intelligence concepts, machine learning basics, and strategic implementation approaches for business leaders and decision-makers.</p>
<div class="course-highlights">
<span class="highlight-item"><i class="fas fa-users"></i> Leadership & Management</span>
<span class="highlight-item"><i class="fas fa-clock"></i> Self-paced</span>
<span class="highlight-item"><i class="fas fa-certificate"></i> Certificate included</span>
</div>
<div class="program-outcomes">
<p><strong>Key Learning Outcomes:</strong></p> <ul>
<li>Understand basic ML algorithms</li>
<li>Master data preprocessing techniques</li>
<li>Build and evaluate simple models</li>
<li>Apply ML to real-world problems</li>
</ul>
<a href="https://learn.gyannetra.com/wlp/course-mcgrpx-1737024309470" class="btn-primary gn-mobile-button" target="_blank" rel="noopener noreferrer">Start Learning</a>
</div>
<a href="../contact.html" class="btn-primary gn-mobile-button">Enroll Now</a>
</div>
<div class="benefit-card">
<div class="benefit-card-icon">
<img src="../assets/gen ai.png" alt="Deep Learning Icon" class="gn-responsive-image">
<div class="course-card">
<div class="course-video-container">
<img
src="../assets/course-thumbnails/Solar data analytics course.png"
alt="Practical AI Implementation Course Thumbnail"
class="course-thumbnail"
loading="lazy">
</div>
<h3>Deep Learning Fundamentals</h3>
<div class="program-details">
<p><strong>Skill Level:</strong> Intermediate</p>
<p><strong>Format:</strong> Instructor-led</p>
<p><strong>Duration:</strong> 10 weeks</p>
<div class="course-info">
<h3>Practical AI Implementation</h3>
<p>Hands-on training focused on implementing AI solutions in corporate environments, covering tools, frameworks, and best practices for successful AI adoption.</p>
<div class="course-highlights">
<span class="highlight-item"><i class="fas fa-code"></i> Technical Teams</span>
<span class="highlight-item"><i class="fas fa-clock"></i> Self-paced</span>
<span class="highlight-item"><i class="fas fa-project-diagram"></i> Project-based</span>
</div>
<div class="program-outcomes">
<p><strong>Key Learning Outcomes:</strong></p> <ul>
<li>Build neural networks from scratch</li>
<li>Implement CNNs for image processing</li>
<li>Create RNNs for sequence data</li>
<li>Deploy models to production</li>
</ul>
<a href="https://learn.gyannetra.com/wlp/course-mcgrpx-1737024821581" class="btn-primary gn-mobile-button" target="_blank" rel="noopener noreferrer">Start Learning</a>
</div>
<a href="../contact.html" class="btn-primary gn-mobile-button">Enroll Now</a>
</div>
<div class="benefit-card">
<div class="benefit-card-icon">
<img src="../assets/education-cap-icon.svg" alt="AI Ethics Icon" class="gn-responsive-image">
</div>
<h3>AI Ethics for Individuals</h3>
<div class="program-details">
<p><strong>Skill Level:</strong> Advanced</p>
<p><strong>Format:</strong> Hybrid</p>
<p><strong>Duration:</strong> 4 weeks</p>
</div>
<div class="program-outcomes">
<p><strong>Key Learning Outcomes:</strong></p> <ul>
<li>Understand ethical implications of AI</li>
<li>Identify and mitigate AI biases</li>
<li>Implement responsible AI practices</li>
<li>Develop ethical AI governance frameworks</li>
</ul>
</div>
<a href="../contact.html" class="btn-primary gn-mobile-button">Enroll Now</a>
</div>
<div class="benefit-card">
<div class="benefit-card-icon">
<img src="../assets/ai agent.png" alt="AI Applications Icon" class="gn-responsive-image">
</div>
<h3>Applied AI Projects</h3>
<div class="program-details">
<p><strong>Skill Level:</strong> Intermediate to Advanced</p>
<p><strong>Format:</strong> Project-based</p>
<p><strong>Duration:</strong> 6 weeks</p>
</div>
<div class="program-outcomes">
<p><strong>Key Learning Outcomes:</strong></p> <ul>
<li>Design end-to-end AI solutions</li>
<li>Work on real industry problems</li>
<li>Build a portfolio of AI projects</li>
<li>Collaborate with AI professionals</li>
</ul>
</div>
<a href="../contact.html" class="btn-primary gn-mobile-button">Enroll Now</a>
</div>
</div>
</section>
@@ -190,9 +155,307 @@
<h3>Hands-on Projects</h3>
<p>Apply your learning to real-world AI projects with personalized guidance, building a portfolio that demonstrates your practical skills to potential employers.</p>
</div>
</div>
<a href="../contact.html" class="btn-primary centered-btn gn-mobile-button">Enroll in a Program Today</a>
</div> <a href="../contact.html" class="btn-primary centered-btn gn-mobile-button">Enroll in a Program Today</a>
</section>
<!-- CUSTOMER TESTIMONIALS SECTION -->
<section class="testimonials-section">
<div class="atmospheric-particles"></div>
<div class="testimonials-container">
<div class="testimonials-heading">
<h2>What Our Students Say</h2>
<p>Discover how our AI training programs have transformed careers and empowered professionals across industries</p>
</div>
<div class="testimonials-track-container">
<div class="testimonials-track">
<!-- Testimonial 1 -->
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">RS</div>
<div class="customer-details">
<h4>Rajesh Sharma</h4>
<p class="customer-designation">Senior Data Analyst</p>
<p class="customer-company">TechCorp Solutions</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">Gyannetra's AI Fundamentals course completely transformed my understanding of machine learning. The hands-on projects and expert mentorship helped me transition from traditional data analysis to advanced AI implementation. I got promoted within 3 months!</p>
<span class="course-badge">AI Fundamentals for Business Leaders</span>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">AP</div>
<div class="customer-details">
<h4>Anita Patel</h4>
<p class="customer-designation">ML Engineer</p>
<p class="customer-company">InnovateAI Labs</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">The Practical AI Implementation course was exactly what I needed. The curriculum is cutting-edge, and the instructors bring real-world experience. I'm now leading AI projects at my company and feel confident in my abilities.</p>
<span class="course-badge">Practical AI Implementation</span>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">MK</div>
<div class="customer-details">
<h4>Michael Kumar</h4>
<p class="customer-designation">Product Manager</p>
<p class="customer-company">FinTech Innovations</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">As a non-technical professional, I was hesitant about AI training. Gyannetra's approach made complex concepts accessible. I now effectively collaborate with technical teams and make informed decisions about AI implementations.</p>
<span class="course-badge">AI Strategy & Leadership</span>
</div>
</div>
<!-- Testimonial 4 -->
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">SK</div>
<div class="customer-details">
<h4>Sakshi Khanna</h4>
<p class="customer-designation">Data Scientist</p>
<p class="customer-company">Healthcare Analytics Inc.</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">The personalized learning approach and one-on-one mentorship set Gyannetra apart. I gained practical skills in deep learning and neural networks that directly applied to my healthcare AI projects. Exceptional quality!</p>
<span class="course-badge">Advanced Deep Learning</span>
</div>
</div>
<!-- Testimonial 5 -->
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">VG</div>
<div class="customer-details">
<h4>Vikram Gupta</h4>
<p class="customer-designation">AI Consultant</p>
<p class="customer-company">Strategic AI Solutions</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">Gyannetra's comprehensive curriculum and industry connections helped me transition from software development to AI consulting. The practical projects built my portfolio, and I'm now running my own AI consultancy firm.</p>
<span class="course-badge">AI Business Applications</span>
</div>
</div>
<!-- Testimonial 6 -->
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">PM</div>
<div class="customer-details">
<h4>Priya Mehta</h4>
<p class="customer-designation">Research Scientist</p>
<p class="customer-company">National AI Research Lab</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">The depth of knowledge and research-oriented approach impressed me. The instructors are at the forefront of AI research, and the course content reflects the latest developments in the field. Highly recommend for serious AI practitioners.</p>
<span class="course-badge">AI Research Fundamentals</span>
</div>
</div>
<!-- Duplicate set for seamless loop -->
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">RS</div>
<div class="customer-details">
<h4>Rajesh Sharma</h4>
<p class="customer-designation">Senior Data Analyst</p>
<p class="customer-company">TechCorp Solutions</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">Gyannetra's AI Fundamentals course completely transformed my understanding of machine learning. The hands-on projects and expert mentorship helped me transition from traditional data analysis to advanced AI implementation. I got promoted within 3 months!</p>
<span class="course-badge">AI Fundamentals for Business Leaders</span>
</div>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">AP</div>
<div class="customer-details">
<h4>Anita Patel</h4>
<p class="customer-designation">ML Engineer</p>
<p class="customer-company">InnovateAI Labs</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">The Practical AI Implementation course was exactly what I needed. The curriculum is cutting-edge, and the instructors bring real-world experience. I'm now leading AI projects at my company and feel confident in my abilities.</p>
<span class="course-badge">Practical AI Implementation</span>
</div>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">MK</div>
<div class="customer-details">
<h4>Michael Kumar</h4>
<p class="customer-designation">Product Manager</p>
<p class="customer-company">FinTech Innovations</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">As a non-technical professional, I was hesitant about AI training. Gyannetra's approach made complex concepts accessible. I now effectively collaborate with technical teams and make informed decisions about AI implementations.</p>
<span class="course-badge">AI Strategy & Leadership</span>
</div>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">SK</div>
<div class="customer-details">
<h4>Sakshi Khanna</h4>
<p class="customer-designation">Data Scientist</p>
<p class="customer-company">Healthcare Analytics Inc.</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">The personalized learning approach and one-on-one mentorship set Gyannetra apart. I gained practical skills in deep learning and neural networks that directly applied to my healthcare AI projects. Exceptional quality!</p>
<span class="course-badge">Advanced Deep Learning</span>
</div>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">VG</div>
<div class="customer-details">
<h4>Vikram Gupta</h4>
<p class="customer-designation">AI Consultant</p>
<p class="customer-company">Strategic AI Solutions</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">Gyannetra's comprehensive curriculum and industry connections helped me transition from software development to AI consulting. The practical projects built my portfolio, and I'm now running my own AI consultancy firm.</p>
<span class="course-badge">AI Business Applications</span>
</div>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-right quote-icon"></i>
<div class="customer-info">
<div class="customer-avatar">PM</div>
<div class="customer-details">
<h4>Priya Mehta</h4>
<p class="customer-designation">Research Scientist</p>
<p class="customer-company">National AI Research Lab</p>
</div>
</div>
<div class="review-content">
<div class="rating">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
<p class="review-text">The depth of knowledge and research-oriented approach impressed me. The instructors are at the forefront of AI research, and the course content reflects the latest developments in the field. Highly recommend for serious AI practitioners.</p>
<span class="course-badge">AI Research Fundamentals</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GYANNETRA MOBILE APP SECTION - RESTRUCTURED DUAL-COLUMN LAYOUT -->
<section class="gyannetra-app-section-redesigned">
<div class="gn-app-section-wrapper">
@@ -260,7 +523,6 @@
<p>Receive personalized notifications for new content, assignment deadlines, and important course updates.</p>
</div>
</div>
<div class="gn-feature-item">
<div class="gn-feature-icon">
<i class="fas fa-download"></i>
@@ -270,6 +532,31 @@
<p>Download course materials for offline access, ensuring you can learn even without an internet connection.</p>
</div>
</div> </div>
<!-- App Download Links (Moved to left column) -->
<div class="gn-app-download-section">
<h3 class="gn-download-heading">Download the GyanNetra App</h3>
<div class="gn-download-links-container">
<a href="https://play.google.com/store/apps/details?id=co.sansa.pakif" target="_blank" class="gn-download-link gn-android-link">
<div class="gn-download-icon">
<i class="fab fa-google-play"></i>
</div>
<div class="gn-download-text">
<span class="gn-download-title">Get it on</span>
<span class="gn-download-store">Google Play</span>
</div>
</a>
<a href="https://apps.apple.com/in/app/myinstitute/id1472483563" target="_blank" class="gn-download-link gn-ios-link">
<div class="gn-download-icon">
<i class="fab fa-app-store-ios"></i>
</div>
<div class="gn-download-text">
<span class="gn-download-title">Download on the</span>
<span class="gn-download-store">App Store</span>
</div>
</a>
</div>
</div>
</div>
</div>
@@ -302,36 +589,13 @@
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div> <div class="gn-video-info">
</div>
<div class="gn-video-info">
<h4><i class="fab fa-apple"></i> GyanNetra App for iOS Apple Users</h4>
<p>Learn how to maximize your learning experience with the GyanNetra app on your iOS device. This tutorial covers all essential features and tips for iPhone and iPad users.</p>
</div>
</div>
<!-- App Download Links -->
<div class="gn-app-download-section">
<h3 class="gn-download-heading">Download the GyanNetra App</h3>
<div class="gn-download-links-container">
<a href="https://play.google.com/store/apps/details?id=co.sansa.pakif" target="_blank" class="gn-download-link gn-android-link">
<div class="gn-download-icon">
<i class="fab fa-google-play"></i>
</div>
<div class="gn-download-text">
<span class="gn-download-title">Get it on</span>
<span class="gn-download-store">Google Play</span>
</div> </a>
<a href="https://apps.apple.com/in/app/myinstitute/id1472483563" target="_blank" class="gn-download-link gn-ios-link">
<div class="gn-download-icon">
<i class="fab fa-app-store-ios"></i>
</div>
<div class="gn-download-text">
<span class="gn-download-title">Download on the</span>
<span class="gn-download-store">App Store</span>
</div>
</a>
</div>
</div>
</div>
</div>
@@ -359,13 +623,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -374,6 +631,17 @@
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
</div>
</div> <div class="footer-bottom">

View File

@@ -1,10 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webinars - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400">
<link rel="stylesheet" href="../css/gn-mobile-responsive.css?v=202412291400">
<!-- 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/webinar-video.css">
<link rel="stylesheet" href="../css/card-heading-divider.css">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -216,8 +226,7 @@
<h2><i class="fas fa-play-circle"></i> Missed Our Live Sessions? Watch Now!</h2>
<p>Don't miss out on the AI insights that could transform your business — catch up with our knowledge-packed webinar recordings</p>
</div> <div class="webinar-videos-grid">
<!-- Video 1 -->
<div class="webinar-video-card">
<!-- Video 1 --> <div class="webinar-video-card">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/BSk_YQ4NE_g"
title="AI Webinar 1"
@@ -227,14 +236,11 @@
</iframe>
</div>
<div class="video-info">
<h3>AI Solutions in Practice</h3>
<p>Comprehensive overview of AI implementation strategies and real-world applications</p>
<span class="video-duration">Live Session</span>
<h3>Webinar 1</h3>
</div>
</div>
<!-- Video 2 -->
<div class="webinar-video-card">
<!-- Video 2 --> <div class="webinar-video-card">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/F9Qy_217nqY"
title="AI Webinar 2"
@@ -244,14 +250,11 @@
</iframe>
</div>
<div class="video-info">
<h3>Advanced AI Technologies</h3>
<p>Deep dive into cutting-edge AI technologies and their business applications</p>
<span class="video-duration">Live Session</span>
<h3>Webinar 2</h3>
</div>
</div>
<!-- Video 3 -->
<div class="webinar-video-card">
<!-- Video 3 --> <div class="webinar-video-card">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/ctP9QgLDeHE"
title="AI Webinar 3"
@@ -261,14 +264,11 @@
</iframe>
</div>
<div class="video-info">
<h3>AI Strategy & Implementation</h3>
<p>Strategic approaches to AI adoption and successful implementation methodologies</p>
<span class="video-duration">Live Session</span>
<h3>Webinar 3</h3>
</div>
</div>
<!-- Video 4 -->
<div class="webinar-video-card">
<!-- Video 4 --> <div class="webinar-video-card">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/1dEoPuE8GXI"
title="AI Webinar 4"
@@ -278,9 +278,7 @@
</iframe>
</div>
<div class="video-info">
<h3>Future of AI & Innovation</h3>
<p>Exploring emerging AI trends and their impact on business transformation</p>
<span class="video-duration">Live Session</span>
<h3>Webinar 4</h3>
</div>
</div>
@@ -316,13 +314,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -332,6 +323,15 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div> <div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
</div>

View File

@@ -1,10 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Case Studies - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Case Studies - Gyannetra</title>
<!-- 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"> <!-- Page-specific Styles -->
<link rel="stylesheet" href="../css/10-case-studies-enhanced.css">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -144,8 +155,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -157,13 +167,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -173,6 +176,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div> <div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>

View File

@@ -1,11 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>AI in Finance - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -163,8 +173,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -176,13 +185,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -192,6 +194,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div> <div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>

View File

@@ -6,9 +6,20 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Healthcare - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<title>AI in Healthcare - Gyannetra</title>
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -21,6 +32,7 @@
<div class="overlay"></div>
<div class="noise"></div>
</div>
<!-- NAVBAR -->
<header class="site-header">
<nav class="navbar">
@@ -53,8 +65,7 @@
<li><a href="marketing.html"><div class="dropdown-item-content"><img src="../assets/marketing ind.png" alt="Marketing Icon" class="dropdown-icon" / class="gn-responsive-image"><div class="text-content"><span class="item-title">Marketing</span><span class="item-description">Personalizing campaigns, predicting consumer behavior, and optimizing marketing spend using AI.</span></div></div></a></li>
<li><a href="media-entertainment.html"><div class="dropdown-item-content"><img src="../assets/media and entertainment ind.png" alt="Media & Entertainment Icon" class="dropdown-icon" / class="gn-responsive-image"><div class="text-content"><span class="item-title">Media & Entertainment</span><span class="item-description">Creating engaging content, personalizing recommendations, and optimizing content delivery with AI.</span></div></div></a></li>
<li><a href="travel.html"><div class="dropdown-item-content"><img src="../assets/travel ind.png" alt="Travel Icon" class="dropdown-icon" / class="gn-responsive-image"><div class="text-content"><span class="item-title">Travel</span><span class="item-description">Enhancing customer journeys, optimizing pricing, and improving operational efficiency through AI.</span></div></div></a></li>
<li><a href="retail.html"><div class="dropdown-item-content"><img src="../assets/retail ind.png" alt="Retail Icon" class="dropdown-icon" / class="gn-responsive-image"><div class="text-content"><span class="item-title">Retail</span><span class="item-description">Personalizing shopping experiences, optimizing inventory, and predicting demand with AI.
</span></div></div></a></li>
<li><a href="retail.html"><div class="dropdown-item-content"><img src="../assets/retail ind.png" alt="Retail Icon" class="dropdown-icon" / class="gn-responsive-image"><div class="text-content"><span class="item-title">Retail</span><span class="item-description">Personalizing shopping experiences, optimizing inventory, and predicting demand with AI.</span></div></div></a></li>
<li><a href="case-studies.html"><div class="dropdown-item-content"><img src="../assets/case study ind.png" alt="Case Studies Icon" class="dropdown-icon" / class="gn-responsive-image"><div class="text-content"><span class="item-title">Case Studies</span><span class="item-description">Real-world examples showcasing how our AI solutions have delivered tangible results for our clients.</span></div></div></a></li>
</ul>
</li>
@@ -70,12 +81,14 @@
</ul>
</nav>
</header>
<!-- HERO SECTION -->
<section class="hero-section gn-responsive-container">
<h1>AI-Powered Healthcare Solutions</h1>
<p>AI is revolutionizing healthcare, and Gyannetra is at the forefront of this transformation, delivering advanced AI solutions for better patient care.</p>
<a href="../contact.html" class="btn btn-primary">Transform Healthcare</a>
</section>
<!-- AI SOLUTIONS FOR HEALTHCARE -->
<section class="industry-solutions container">
<h2 class="section-heading gn-mobile-section-heading">AI SOLUTIONS FOR HEALTHCARE</h2>
@@ -103,7 +116,8 @@
</div>
</section>
<!-- BENEFITS OF AI FOR HEALTHCARE --> <section class="industry-benefits container benefits-section">
<!-- BENEFITS OF AI FOR HEALTHCARE -->
<section class="industry-benefits container benefits-section">
<h2 class="section-heading gn-mobile-section-heading">BENEFITS OF AI FOR HEALTHCARE WITH GYANNETRA</h2>
<div class="benefits-cards-grid">
<div class="benefit-card">
@@ -136,6 +150,7 @@
</div>
</div>
</section>
<!-- BLOGS & CASE STUDIES -->
<section class="industry-blogs container">
<h2 class="section-heading gn-mobile-section-heading">BLOGS & CASE STUDIES</h2>
@@ -169,13 +184,13 @@
<!-- FOOTER -->
<footer class="site-footer">
<div class="container gn-responsive-container">
<div class="footer-content"> <div class="footer-col footer-col-logo">
<div class="footer-content">
<div class="footer-col footer-col-logo">
<a href="../index.html" class="logo">
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -187,38 +202,35 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
</div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p>
<div class="social-links">
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
<a href="https://wa.me/918949135299" aria-label="WhatsApp" target="_blank"><i class="fab fa-whatsapp"></i></a>
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
<a href="https://wa.me/918949135299" aria-label="WhatsApp" target="_blank"><i class="fab fa-whatsapp"></i></a>
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div> <div class="footer-bottom">
<div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
</div>
</div> </footer>
</div>
</footer>
<script src="../js/main.js" defer></script>
<script src="../js/menu-dropdown.js" defer></script>
<script src="../js/tech-marquee.js" defer></script>
<script src="../js/mobile-enhancements.js"></script>
</body>
</html>

View File

@@ -4,11 +4,21 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>AI in Manufacturing - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -168,8 +178,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -181,13 +190,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -197,6 +199,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div> <div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>

View File

@@ -1,10 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marketing - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marketing - Gyannetra</title>
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -175,8 +185,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -188,13 +197,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -204,6 +206,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -1,10 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI in Media & Entertainment - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI in Media & Entertainment - Gyannetra</title>
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -167,8 +177,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -180,13 +189,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -196,6 +198,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -4,10 +4,20 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>AI in Retail - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>AI in Retail - Gyannetra</title>
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -174,8 +184,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -187,13 +196,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -203,6 +205,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -4,10 +4,20 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>AI in Travel - Gyannetra</title>
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>AI in Travel - Gyannetra</title>
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -176,8 +186,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -189,13 +198,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -205,6 +207,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -66,10 +66,20 @@
visibility: visible;
}
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -315,15 +325,8 @@
<li><a href="automation-flows.html">Automation Flows</a></li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
</ul> </div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
@@ -331,7 +334,15 @@
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -66,10 +66,20 @@
visibility: visible;
}
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -303,8 +313,7 @@
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -316,13 +325,6 @@
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -331,6 +333,13 @@
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -66,10 +66,20 @@
visibility: visible;
}
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -290,15 +300,8 @@
<li><a href="automation-flows.html">Automation Flows</a></li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
</ul> </div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
@@ -306,7 +309,15 @@
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -66,10 +66,20 @@
visibility: visible;
}
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -314,15 +324,8 @@
<li><a href="automation-flows.html">Automation Flows</a></li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
</ul> </div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
@@ -331,6 +334,15 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>

View File

@@ -66,10 +66,20 @@
visibility: visible;
}
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
<link rel="stylesheet" href="../css/style.css?v=202412291401" />
<link rel="stylesheet" href="css/gn-mobile-responsive.css?v=202412291400" />
<!-- 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">
<!-- Responsive & Effects - Load Last -->
<link rel="stylesheet" href="../css/07-media-responsive.css">
<link rel="stylesheet" href="../css/08-animations-effects.css">
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -311,15 +321,8 @@
<li><a href="automation-flows.html">Automation Flows</a></li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
</ul> </div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
@@ -327,7 +330,15 @@
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -92,13 +92,23 @@
opacity: 0;
pointer-events: none;
}
html.loaded {
visibility: visible;
}
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
<link rel="stylesheet" href="css/style.css?v=202412291400">
<!-- 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">
<!-- Responsive and effects - load last -->
<link rel="stylesheet" href="css/07-media-responsive.css">
<link rel="stylesheet" href="css/08-animations-effects.css">
<link rel="stylesheet" href="css/09-about-page.css">
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -281,35 +291,26 @@
<main class="container">
<section id="about-us">
<h1>ABOUT US</h1>
<div class="about-section">
<h2>WHO WE ARE</h2>
<p>Gyannetra Put Ltd, as a leading provider of bespoke AI solutions. Asa focus on innovation, integrity, and excellence, we decvo to harnessing AI power to solve complex challenges and drive progress for clients.</p>
<div class="team-images">
<img src="assets/team1.jpg" alt="Team Member 1" / class="gn-responsive-image">
<img src="assets/team2.jpg" alt="Team Member 2" / class="gn-responsive-image">
<img src="assets/team3.jpg" alt="Team Member 3" / class="gn-responsive-image">
</div>
<button class="btn">MEET OUR TEAM</button>
</div>
<div class="about-section mission-vision">
<div class="mission">
<h2>OUR MISSION</h2>
<p>Empowering businesses and transforming industries through cutting-edge AI technologies.</p>
<button class="btn">EXPLORE OUR SOLUTIONS</button>
</div>
<h1>ABOUT US</h1> <div class="about-section">
<h2>WHAT WE DO</h2>
<p>At Gyannetra Pvt Ltd, we specialize in crafting intelligent, AI-powered solutions tailored to drive data-centric transformation across industries. Our core expertise lies in developing custom tools and models in Artificial Intelligence, Data Science, and Software Engineering — empowering businesses to unlock insights, automate processes, and accelerate innovation. Whether it's building large language model (LLM)-based applications, intelligent OCR systems, analytics dashboards, or workflow automations, we help organizations harness the full potential of modern AI and data technologies.</p>
</div><div class="about-section mission-vision">
<div class="vision">
<h2>OUR VISION</h2>
<p>A future where AI amplifies human potential and fosters a smarter, more connected world. We focus on our role in shaping this future thio innovative and ethical AI solutions.</p>
<p>To be a trusted global partner in AI-driven innovation — enabling businesses, governments, and educational institutions to evolve intelligently and sustainably. We envision a world where intelligent systems and human values work in harmony to solve real-world challenges, elevate decision-making, and create a better future for all.</p>
</div>
<div class="mission">
<h2>OUR MISSION</h2>
<p>Our mission is to deliver cutting-edge, purpose-built AI solutions that are not only technically robust but also aligned with each client's unique business context. We strive to:</p>
<ul>
<li><strong>Democratize access to AI</strong> through education, consultancy, and tools.</li>
<li><strong>Transform businesses</strong> with tailored AI models, data science solutions, and smart automation.</li>
<li><strong>Innovate with integrity</strong>, ensuring transparency, ethics, and long-term value creation.</li>
</ul>
</div>
<div class="about-section">
</div><div class="about-section">
<h2>OUR JOURNEY</h2>
<p>Gyannetra was founded in fim 2026. Enrvicing our expertise expansion. it expands strong telationships across partners and built with our parthers.</p>
<button class="btn">EXPLORE OUR CASE STUDIES</button>
<p>Gyannetra was founded in early 2024. Since our inception, we have focused on expanding our expertise and building strong relationships with partners across various industries.</p>
</div>
</section>
</main>
@@ -321,8 +322,7 @@
<img src="assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
@@ -334,13 +334,6 @@
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div> <div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -349,6 +342,13 @@
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div> <div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">

View File

@@ -162,12 +162,24 @@
}
.nav-links.active,
.nav-links.show {
left: 0 !important;
.nav-links.show { left: 0 !important;
} }
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
<link rel="stylesheet" href="css/style.css?v=202412291400">
<!-- 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">
<!-- Responsive and effects - load last -->
<link rel="stylesheet" href="css/07-media-responsive.css">
<link rel="stylesheet" href="css/08-animations-effects.css">
<!-- Enhanced widened contact styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -263,9 +275,8 @@
<section id="contact-us-section">
<div class="contact-header">
<h1>CONTACT US</h1>
<p>Reach out to our team for inquiries, consultations, or partnership opportunities.</p> </div>
<div class="contact-content">
<div class="contact-form-container">
<p>Reach out to our team for inquiries, consultations, or partnership opportunities.</p> </div> <div class="contact-content">
<!-- <div class="contact-form-container">
<h2>Get In Touch</h2>
<div id="form-message" class="form-message"></div>
<form id="contact-form"> <div class="form-group">
@@ -285,8 +296,8 @@
</div>
<button type="submit" class="btn-primary btn-send-message">Send Message</button>
</form>
</div>
<div class="contact-info-container">
</div> -->
<div class="contact-info-container widened-contact-info">
<h2>CONTACT INFORMATION</h2>
<ul class="contact-details">
<li><i class="fas fa-envelope"></i>info@gyannetra.com</li>
@@ -311,8 +322,7 @@
<img src="assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
@@ -325,13 +335,6 @@
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul> </div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
@@ -341,6 +344,13 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul> </div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="privacy-policy.html">Privacy Policy</a> | <a href="terms-of-service.html">Terms and Conditions</a></p>

324
css/01-base-variables.css Normal file
View File

@@ -0,0 +1,324 @@
/* ===== BASE VARIABLES AND IMPORTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap');
/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
/* Typography */
--font-body: 'Space Grotesk', sans-serif;
--font-headings: 'VT323', monospace;
--font-mono: 'VT323', monospace;
/* Base colors */
--fg: #ececec;
--btn-bg: rgba(20, 20, 40, 0.8);
--btn-hover: rgba(20, 20, 40, 1);
--gap: 2rem;
--max-w: 1200px;
/* Standardized card and text styles */
--card-bg: rgba(25, 35, 55, 0.7);
--text-light: #e0e0e0;
--text-muted: #b0b0b0;
/* Default primary color scheme (purple) */
--primary-color: #6d28d9;
--primary-color-rgb: 109, 40, 217;
--primary-color-hover: #5b21b6;
--primary-color-glow: rgba(109, 40, 217, 0.5);
--accent: #a2abff;
--accent-rgb: 162, 171, 255;
/* Industry-specific color schemes */
/* Finance - Professional Blue */
--finance-primary: #007bff;
--finance-primary-rgb: 0, 123, 255;
--finance-primary-hover: #0056b3;
/* Healthcare - Medical Blue */
--healthcare-primary: #00c6ff;
--healthcare-primary-rgb: 0, 198, 255;
--healthcare-primary-hover: #0099cc;
/* Retail - Commercial Red */
--retail-primary: #e74c3c;
--retail-primary-rgb: 231, 76, 60;
--retail-primary-hover: #c0392b;
/* Manufacturing - Industrial Blue */
--manufacturing-primary: #3498db;
--manufacturing-primary-rgb: 52, 152, 219;
--manufacturing-primary-hover: #2980b9;
/* Marketing - Creative Pink */
--marketing-primary: #ec4899;
--marketing-primary-rgb: 236, 72, 153;
--marketing-primary-hover: #db2777;
/* Travel - Sky Blue */
--travel-primary: #0ea5e9;
--travel-primary-rgb: 14, 165, 233;
--travel-primary-hover: #0284c7;
/* Media & Entertainment - Purple */
--media-primary: #9333ea;
--media-primary-rgb: 147, 51, 234;
--media-primary-hover: #7e22ce;
/* Services color schemes */
/* Machine Learning - Deep Blue */
--machine-learning-primary: #2563eb;
--machine-learning-primary-rgb: 37, 99, 235;
--machine-learning-primary-hover: #1d4ed8;
/* Generative AI - Emerald Green */
--generative-ai-primary: #10b981;
--generative-ai-primary-rgb: 16, 185, 129;
--generative-ai-primary-hover: #059669;
/* Data Analysis - Amber */
--data-analysis-primary: #f59e0b;
--data-analysis-primary-rgb: 245, 158, 11;
--data-analysis-primary-hover: #d97706;
/* Automation - Purple */
--automation-primary: #8b5cf6;
--automation-primary-rgb: 139, 92, 246;
--automation-primary-hover: #7c3aed;
/* Agentic AI - Pink */
--agentic-ai-primary: #ec4899;
--agentic-ai-primary-rgb: 236, 72, 153;
--agentic-ai-primary-hover: #db2777;
/* Spacing variables */
--section-margin: 2rem;
--section-padding: 1.5rem;
--card-padding: 25px;
--grid-gap: 30px;
}
/* ===== COLOR THEME UTILITY CLASSES ===== */
.theme-finance {
--primary-color: var(--finance-primary);
--primary-color-rgb: var(--finance-primary-rgb);
--primary-color-hover: var(--finance-primary-hover);
--primary-color-glow: rgba(var(--finance-primary-rgb), 0.5);
}
.theme-healthcare {
--primary-color: var(--healthcare-primary);
--primary-color-rgb: var(--healthcare-primary-rgb);
--primary-color-hover: var(--healthcare-primary-hover);
--primary-color-glow: rgba(var(--healthcare-primary-rgb), 0.5);
}
.theme-retail {
--primary-color: var(--retail-primary);
--primary-color-rgb: var(--retail-primary-rgb);
--primary-color-hover: var(--retail-primary-hover);
--primary-color-glow: rgba(var(--retail-primary-rgb), 0.5);
}
.theme-manufacturing {
--primary-color: var(--manufacturing-primary);
--primary-color-rgb: var(--manufacturing-primary-rgb);
--primary-color-hover: var(--manufacturing-primary-hover);
--primary-color-glow: rgba(var(--manufacturing-primary-rgb), 0.5);
}
.theme-marketing {
--primary-color: var(--marketing-primary);
--primary-color-rgb: var(--marketing-primary-rgb);
--primary-color-hover: var(--marketing-primary-hover);
--primary-color-glow: rgba(var(--marketing-primary-rgb), 0.5);
}
.theme-travel {
--primary-color: var(--travel-primary);
--primary-color-rgb: var(--travel-primary-rgb);
--primary-color-hover: var(--travel-primary-hover);
--primary-color-glow: rgba(var(--travel-primary-rgb), 0.5);
}
.theme-media {
--primary-color: var(--media-primary);
--primary-color-rgb: var(--media-primary-rgb);
--primary-color-hover: var(--media-primary-hover);
--primary-color-glow: rgba(var(--media-primary-rgb), 0.5);
}
.theme-machine-learning {
--primary-color: var(--machine-learning-primary);
--primary-color-rgb: var(--machine-learning-primary-rgb);
--primary-color-hover: var(--machine-learning-primary-hover);
--primary-color-glow: rgba(var(--machine-learning-primary-rgb), 0.5);
}
.theme-generative-ai {
--primary-color: var(--generative-ai-primary);
--primary-color-rgb: var(--generative-ai-primary-rgb);
--primary-color-hover: var(--generative-ai-primary-hover);
--primary-color-glow: rgba(var(--generative-ai-primary-rgb), 0.5);
}
.theme-data-analysis {
--primary-color: var(--data-analysis-primary);
--primary-color-rgb: var(--data-analysis-primary-rgb);
--primary-color-hover: var(--data-analysis-primary-hover);
--primary-color-glow: rgba(var(--data-analysis-primary-rgb), 0.5);
}
.theme-automation {
--primary-color: var(--automation-primary);
--primary-color-rgb: var(--automation-primary-rgb);
--primary-color-hover: var(--automation-primary-hover);
--primary-color-glow: rgba(var(--automation-primary-rgb), 0.5);
}
.theme-agentic-ai {
--primary-color: var(--agentic-ai-primary);
--primary-color-rgb: var(--agentic-ai-primary-rgb);
--primary-color-hover: var(--agentic-ai-primary-hover);
--primary-color-glow: rgba(var(--agentic-ai-primary-rgb), 0.5);
}
/* ===== BASE RESET AND TYPOGRAPHY ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
scroll-behavior: smooth;
visibility: visible !important;
}
body {
background: url('../assets/3293677.png') no-repeat center center fixed;
background-size: cover;
color: var(--fg);
font-family: var(--font-body);
font-weight: 400;
font-style: normal;
font-size: 1.3rem;
line-height: 1.5;
margin: 0;
padding: 0;
min-height: 100vh;
overflow-x: hidden;
padding-top: 80px;
}
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headings);
color: #52eef5;
letter-spacing: 0.7px;
font-size: 4.5rem;
font-weight: 100;
}
/* Card heading size exceptions */
.benefit-card h3,
.webinar-video-card .video-info h3,
.article-card h3,
.related-content-item h3 {
font-size: 2rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 10px;
}
/* Card heading styles are now handled in webinar-video.css */
/* ===== FOUC PREVENTION ===== */
.font-loading {
font-family: var(--font-mono), Consolas, 'Courier New', monospace;
}
/* Page loading transitions */
html.no-js {
visibility: hidden;
}
body.loading {
opacity: 1;
}
body.page-ready {
opacity: 1;
visibility: visible;
}
.fouc-prevention {
visibility: hidden !important;
}
.fouc-prevention .site-header,
.fouc-prevention #hero {
visibility: visible !important;
}
html:not(.fouc-prevention) {
transition: opacity 0.3s ease-in;
opacity: 1;
}
/* ===== PRELOADER STYLES ===== */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0a0a1a;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
body.page-ready #preloader {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader-container {
text-align: center;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(139, 92, 246, 0.2);
border-radius: 50%;
border-top-color: var(--primary-color);
margin: 0 auto 15px;
animation: spin 1s ease-in-out infinite;
}
.loader-text {
color: var(--primary-color);
font-size: 1.2rem;
letter-spacing: 2px;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}

1830
css/02-layout-components.css Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,569 @@
/* ===== NAVIGATION AND HEADER ===== */
/* ===== SITE HEADER ===== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent !important;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid transparent;
box-shadow: none;
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem 2.5rem;
}
.site-header.scrolled {
background: transparent !important;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* ===== NAVBAR ===== */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.3rem 2.5rem;
background: rgba(20, 20, 40, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border-radius: 16px;
max-width: 100%;
margin: 0 auto;
font-family: var(--font-mono);
}
/* Override any existing navbar container styles */
.site-header .navbar,
.site-header .container,
.navbar .container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 1rem 2rem;
max-width: none !important;
margin: 0 !important;
position: relative;
width: 100%;
}
/* ===== LOGO ===== */
.logo {
font-size: 1.9rem;
text-decoration: none;
letter-spacing: 1.5px;
background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 50%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 0.3rem 1rem;
border-radius: 10px;
transition: all 0.3s ease;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
.logo:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2);
}
/* Logo image styles */
.logo-img {
height: 50px;
width: auto;
max-width: 350px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: all 0.3s ease;
}
.logo:hover .logo-img {
filter: drop-shadow(0 4px 8px rgba(90, 107, 255, 0.4));
transform: scale(1.05);
}
/* ===== NAVIGATION LINKS ===== */
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
margin-right: 1rem;
position: static !important;
width: auto !important;
height: auto !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center !important;
z-index: auto !important;
transition: none !important;
padding: 0 !important;
overflow: visible !important;
box-shadow: none !important;
left: auto !important;
font-family: var(--font-mono);
}
.nav-link {
color: var(--fg);
text-decoration: none;
font-size: 1.5rem;
display: flex;
align-items: center;
padding: 0.7rem 1.2rem;
border-radius: 8px;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
font-family: var(--font-mono);
position: relative;
letter-spacing: 0.5px;
width: auto !important;
background: transparent !important;
border: none !important;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.nav-link:after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%);
transition: width 0.3s ease-out, left 0.3s ease-out;
border-radius: 3px;
}
.nav-link:hover:after {
width: 85%;
left: 7.5%;
}
.nav-links .nav-link.active {
color: #ffffff;
}
.nav-links .nav-link.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 7.5%;
width: 85%;
height: 3px;
background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%);
border-radius: 3px;
}
/* ===== DROPDOWN MENUS ===== */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: grid;
position: absolute;
background-color: #100732;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
z-index: 1;
top: 100%;
left: 0;
margin-top: 0.5rem;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s;
padding-top: 0.8rem;
}
.dropdown-menu::before {
content: '';
position: absolute;
top: -0.5rem;
left: 0;
width: 100%;
height: 0.5rem;
}
.industries-dropdown {
grid-template-columns: repeat(3, 1fr);
min-width: 600px;
}
.services-dropdown {
grid-template-columns: repeat(2, 1fr);
min-width: 450px;
}
.education-dropdown {
grid-template-columns: 1fr;
min-width: 320px;
}
.dropdown:hover .industries-dropdown,
.dropdown:hover .services-dropdown,
.dropdown:hover .education-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
margin-top: 0;
transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0s;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu a {
text-decoration: none;
color: var(--fg);
display: block;
padding: 0.5rem;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.dropdown-menu a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.dropdown-item-content {
display: flex;
align-items: center;
}
.dropdown-icon {
width: 24px;
height: 24px;
margin-right: 0.8rem;
flex-shrink: 0;
}
.text-content {
display: flex;
flex-direction: column;
}
.item-title {
font-size: 1.15rem;
}
.item-description {
font-size: 0.95rem;
opacity: 0.8;
}
.dropdown-menu h1,
.dropdown-menu h2,
.dropdown-menu h3,
.dropdown-menu h4,
.dropdown-menu h5,
.dropdown-menu h6,
.item-title,
.item-description {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--fg);
text-shadow: none;
}
/* ===== HAMBURGER MENU ===== */
.hamburger-menu {
display: none;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
z-index: 1010;
position: relative;
}
.hamburger-line {
width: 100%;
height: 3px;
background: #ffffff;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
margin: 3px 0;
box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
background: #52eef5;
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
background: #52eef5;
}
/* ===== MOBILE NAVIGATION ===== */
@media (max-width: 768px) {
.navbar {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 1rem 2rem !important;
position: relative;
}
/* Hamburger menu mobile styling */
.hamburger-menu {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: relative !important;
z-index: 9999 !important;
width: 50px !important;
height: 50px !important;
background: rgba(82, 238, 245, 0.4) !important;
border: 3px solid rgba(82, 238, 245, 0.8) !important;
border-radius: 8px !important;
cursor: pointer !important;
touch-action: manipulation !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.hamburger-menu:hover {
background: rgba(82, 238, 245, 0.6) !important;
transform: scale(1.05) !important;
}
.hamburger-menu:active {
transform: scale(0.95) !important;
background: rgba(82, 238, 245, 0.8) !important;
}
.hamburger-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 70% !important;
height: 3px !important;
background: #ffffff !important;
margin: 2px 0 !important;
transition: all 0.3s ease !important;
border-radius: 2px !important;
}
/* Mobile nav links */
.nav-links {
position: fixed !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100vh !important;
background: rgba(15, 15, 30, 0.98) !important;
backdrop-filter: blur(25px) !important;
z-index: 8888 !important;
transition: left 0.4s ease !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
padding-top: 100px !important;
}
.nav-links.active,
.nav-links.show {
left: 0 !important;
}
.nav-links li {
width: 90%;
text-align: center;
margin-bottom: 0.5rem;
}
.nav-link {
font-size: 1.4rem;
padding: 1.2rem 2rem;
width: 100%;
display: block;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
color: #ffffff;
text-decoration: none;
}
.nav-link:hover {
background: rgba(82, 238, 245, 0.2);
border-color: rgba(82, 238, 245, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(82, 238, 245, 0.2);
}
/* Mobile dropdown menus */
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
margin-top: 1rem;
background: rgba(30, 30, 50, 0.9);
border-radius: 12px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
width: 95%;
max-width: 450px;
border: 1px solid rgba(82, 238, 245, 0.2);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.dropdown-menu.show {
max-height: 600px;
}
.dropdown-menu a {
display: flex !important;
padding: 1.5rem 2rem;
font-size: 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
border-radius: 8px;
margin: 0.25rem;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
box-sizing: border-box !important;
}
.dropdown-menu a:last-child {
border-bottom: none;
margin-bottom: 0.5rem;
}
.dropdown-menu a:hover {
background: rgba(82, 238, 245, 0.15);
transform: translateX(5px);
}
.dropdown-item-content {
display: flex !important;
flex-direction: row !important;
text-align: left !important;
gap: 1rem !important;
align-items: center !important;
padding: 0.5rem !important;
justify-content: flex-start !important;
width: 100% !important;
border-left: 2px solid rgba(82, 238, 245, 0.3) !important;
}
.dropdown-icon {
width: 40px !important;
height: 40px !important;
margin-right: 0 !important;
margin-left: 0 !important;
flex-shrink: 0 !important;
filter: brightness(1.1);
display: block !important;
object-fit: contain !important;
}
.text-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
min-width: 0 !important;
}
.item-title {
font-size: 1.1rem !important;
color: #ffffff !important;
display: block !important;
margin-bottom: 0.25rem !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.item-description {
font-size: 0.9rem !important;
color: rgba(255, 255, 255, 0.8) !important;
line-height: 1.3 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
/* Desktop media query - Reset mobile styles for larger screens */
@media (min-width: 769px) {
.hamburger-menu {
display: none !important;
}
.dropdown-menu {
position: absolute !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
margin-top: 0.5rem !important;
background: #100732 !important;
}
.dropdown:hover .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
}

474
css/04-hero-sections.css Normal file
View File

@@ -0,0 +1,474 @@
/* ===== HERO SECTIONS ===== */
/* ===== MAIN HERO SECTION ===== */
#hero {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
width: 100%;
margin: 0;
overflow: hidden;
min-height: calc(100vh - 80px);
height: calc(100vh - 80px);
background: none;
visibility: visible !important;
opacity: 1 !important;
}
.hero-container {
display: flex;
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
height: 100%;
min-height: inherit;
align-items: center;
justify-content: center;
padding: 2rem 4% 2rem 4%;
visibility: visible !important;
}
.hero-content {
position: relative;
z-index: 20;
flex: 1;
max-width: 800px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
will-change: auto;
}
.hero-content h1 {
font-size: 4.5rem;
line-height: 1.1;
margin-bottom: 1rem;
letter-spacing: 1.5px;
font-weight: 100;
position: relative;
color: #52eef5 !important;
text-shadow: none !important;
filter: none !important;
-webkit-box-reflect: none !important;
box-shadow: none !important;
}
.hero-content h1.fallback {
background: none !important;
color: #52eef5 !important;
text-shadow: none !important;
}
.hero-content p {
margin: 1.5rem auto;
font-size: 1.55rem;
opacity: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
max-width: 600px;
color: var(--fg);
animation: none !important;
animation-delay: 0s !important;
}
/* ===== HERO TYPEWRITER SECTION ===== */
.hero-typewriter-section {
margin: 0.2rem 0;
}
.hero-subheading {
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0.6rem;
font-weight: 100;
text-align: center;
}
.typewriter-container {
font-size: 3rem;
color: #52eef5;
font-weight: 100;
text-align: center;
min-height: 3.8rem;
min-width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.4rem;
padding: 0.2rem 1rem;
line-height: 1.0;
}
.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;
}
/* ===== TYPEWRITER EFFECTS ===== */
.typewriter-text {
display: inline-block;
position: relative;
}
.cursor {
display: inline-block;
width: 3px;
height: 1em;
background-color: #52eef5;
margin-left: 2px;
animation: blink 1s infinite;
vertical-align: text-bottom;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* ===== HERO CTA BUTTONS ===== */
.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;
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;
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);
}
/* ===== HERO BUTTON STYLING ===== */
#hero .btn-primary,
.hero-section .btn-primary,
.industry-hero .btn-primary,
.travel-hero .btn-primary,
.finance-hero .btn-primary,
.manufacturing-hero .btn-primary,
.marketing-hero .btn-primary,
.media-hero .btn-primary {
background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.4),
0 4px 16px rgba(147, 51, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
padding: 18px 36px !important;
margin-top: 24px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
font-size: 1.3rem !important;
border-radius: 12px !important;
color: #ffffff !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(8px) !important;
animation: heroButtonPulse 3s ease-in-out infinite !important;
}
#hero .btn-primary:hover,
.hero-section .btn-primary:hover,
.industry-hero .btn-primary:hover,
.travel-hero .btn-primary:hover,
.finance-hero .btn-primary:hover,
.manufacturing-hero .btn-primary:hover,
.marketing-hero .btn-primary:hover,
.media-hero .btn-primary:hover {
transform: translateY(-3px) scale(1.05) !important;
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
box-shadow:
0 12px 40px rgba(109, 40, 217, 0.6),
0 6px 20px rgba(147, 51, 234, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 20px rgba(168, 85, 247, 0.5);
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
}
#hero .btn-primary:active,
.hero-section .btn-primary:active,
.industry-hero .btn-primary:active,
.travel-hero .btn-primary:active,
.finance-hero .btn-primary:active,
.manufacturing-hero .btn-primary:active,
.marketing-hero .btn-primary:active,
.media-hero .btn-primary:active {
transform: translateY(-1px) scale(1.02) !important;
transition: all 0.1s ease !important;
}
@keyframes heroButtonPulse {
0%, 100% {
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.4),
0 4px 16px rgba(147, 51, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
50% {
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.6),
0 4px 16px rgba(147, 51, 234, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
}
/* ===== OTHER HERO SECTIONS ===== */
.hero-section,
#automation-flows-hero {
padding-top: 8rem;
padding-bottom: 6rem;
text-align: center;
}
.hero-section h1,
#automation-flows-hero h1 {
font-size: 4.2rem;
margin-bottom: 1rem;
}
.hero-section p,
#automation-flows-hero p {
font-size: 1.45rem;
color: rgba(255, 255, 255, 0.8);
}
.hero-section.gn-responsive-container {
width: 92%;
max-width: 1200px;
margin: 0 auto;
padding-left: 2rem;
padding-right: 2rem;
}
/* ===== INDUSTRY HERO SECTIONS ===== */
.industry-hero {
padding: 64px 0;
text-align: left;
position: relative;
overflow: hidden;
min-height: 60vh;
background-size: cover;
background-position: center;
}
.industry-hero-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.industry-hero .hero-text {
max-width: 60%;
}
.industry-hero h1 {
font-family: 'VT323', monospace;
font-size: 4rem;
margin-bottom: 20px;
line-height: 1.2;
}
.industry-hero p {
font-family: 'VT323', monospace;
font-size: 1.45rem;
color: #e0e0e0;
line-height: 1.6;
margin-bottom: 30px;
}
.industry-hero .btn-primary {
margin-top: 20px;
}
.hero-image-container {
width: 200px;
height: 200px;
}
.hero-icon {
width: 100%;
height: 100%;
}
/* ===== SPECIALIZED HERO SECTIONS ===== */
.case-studies-hero {
padding-top: 8rem;
padding-bottom: 3rem;
text-align: left;
}
.case-studies-hero h1 {
font-size: 3.35rem;
margin-bottom: 1rem;
font-family: 'VT323', monospace;
}
.case-studies-hero p {
font-size: 1.3rem;
color: rgba(236, 236, 236, 0.8);
max-width: 700px;
margin-bottom: 2rem;
line-height: 1.6;
font-family: 'VT323', monospace;
}
#generative-ai {
padding-top: 9rem;
padding-bottom: 4rem;
text-align: center;
}
.generative-ai-header h1 {
font-size: 3.6em;
margin-bottom: 20px;
}
.generative-ai-header p {
font-size: 1.45em;
color: #ccc;
margin-bottom: 10px;
}
#agentic-ai {
padding: 80px 0;
}
.agentic-ai-header {
text-align: center;
margin-bottom: 60px;
}
.agentic-ai-header h1 {
font-size: 3.6em;
margin-bottom: 20px;
}
.agentic-ai-header p {
font-size: 1.45em;
color: var(--text-color-secondary);
max-width: 800px;
margin: 0 auto 15px auto;
}
/* ===== ANIMATIONS ===== */
@keyframes pulseGlow {
0% {
text-shadow: none;
filter: brightness(1.05);
}
100% {
text-shadow: none;
filter: brightness(1.08);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== HERO LAYOUT STABILIZATION ===== */
#hero .hero-content h1,
#hero .hero-content p,
#hero .hero-content .btn-primary {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
transition: none !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
#hero .hero-content.animate-on-scroll {
animation: none !important;
text-align: center !important;
}
#hero .hero-content.animate-on-scroll.animated {
transform: none !important;
opacity: 1 !important;
text-align: center !important;
}
#hero .hero-content {
text-align: center !important;
align-items: center !important;
justify-content: center !important;
}
#hero * {
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}

509
css/05-technology-cards.css Normal file
View File

@@ -0,0 +1,509 @@
/* ===== TECHNOLOGY CARDS AND ANIMATIONS ===== */
/* ===== TECHNOLOGY SECTION ===== */
#technologies {
padding-top: 2rem;
padding-bottom: 2rem;
position: relative;
overflow: hidden;
}
#technologies .section-heading {
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
#technologies .section-heading::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
bottom: -10px;
left: 0;
animation: glowLine 3s ease-in-out infinite;
}
@keyframes glowLine {
0%, 100% {
opacity: 0.5;
box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3);
}
50% {
opacity: 1;
box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7);
}
}
/* ===== TECHNOLOGY CARDS CONTAINER ===== */
.tech-cards-container {
position: relative;
width: 100%;
overflow: hidden;
padding: 30px 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2));
border-radius: 20px;
margin: 10px 0;
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
}
.tech-cards-track {
display: flex;
animation: techCardsFlow 75s linear infinite;
will-change: transform;
gap: 70px;
}
.tech-cards-track:hover {
animation-play-state: paused;
}
@keyframes techCardsFlow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ===== INDIVIDUAL TECH CARDS ===== */
.tech-card {
flex: 0 0 auto;
width: 240px;
height: 220px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
transform-style: preserve-3d;
margin: 5px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.tech-card-inner {
position: relative;
width: 100%;
height: 100%;
background: rgba(20, 25, 45, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 25px 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
overflow: hidden;
transition: all 0.3s ease;
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
0 4px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tech-card-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 30%,
rgba(var(--primary-color-rgb), 0.2) 50%,
transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.tech-card:hover {
transform: translateY(-10px);
z-index: 10;
}
.tech-card:hover .tech-card-inner {
background: linear-gradient(135deg,
rgba(var(--primary-color-rgb), 0.2) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(var(--primary-color-rgb), 0.1) 100%);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 0 30px rgba(var(--primary-color-rgb), 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.tech-card:hover .tech-card-inner::before {
opacity: 1;
}
/* ===== TECH ICON WRAPPER ===== */
.tech-icon-wrapper {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.tech-icon-wrapper::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.tech-card:hover .tech-icon-wrapper {
transform: scale(1.1) rotateY(15deg);
}
/* ===== TECH ICONS ===== */
.tech-icon {
min-width: 40px;
min-height: 40px;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
flex: 1;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease;
aspect-ratio: 1;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
position: relative;
background-blend-mode: normal;
}
.tech-icon:hover {
background-color: rgba(255, 255, 255, 0.9) !important;
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1);
filter: brightness(1.1) contrast(1.1);
}
.tech-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
border-radius: 8px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.tech-icon:hover::before {
opacity: 1;
}
/* ===== TECH CARD TEXT ===== */
.tech-card h3 {
font-size: 1.45rem;
margin-bottom: 8px;
color: var(--fg);
transition: all 0.3s ease;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.tech-card:hover h3 {
color: #FFFFFF;
text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7);
transform: translateY(-2px);
}
.tech-card p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
line-height: 1.4;
}
.tech-card:hover p {
color: rgba(255, 255, 255, 0.95);
transform: translateY(-1px);
}
/* ===== TECHNOLOGY ICON BACKGROUNDS ===== */
/* Using direct image URLs from official sources */
.tech-icon.ollama {
background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4');
background-color: rgba(255, 255, 255, 0.95);
border-radius: 50%;
filter: brightness(1.1) contrast(1.1);
}
.tech-icon.langchain {
background-image: url('https://python.langchain.com/img/brand/wordmark.png');
background-color: rgba(255, 255, 255, 0.9);
}
.tech-icon.chroma {
background-image: url('../assets/tech-icons/Chroma.svg');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.4) contrast(1.5) saturate(1.3);
border: 2px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.tech-icon.pinecone {
background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg');
background-color: rgba(46, 160, 67, 0.9);
filter: brightness(1.4) contrast(1.5) hue-rotate(60deg);
border: 2px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 20px rgba(46, 160, 67, 0.3);
position: relative;
}
.tech-icon.pinecone::after {
content: '🌲';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 29px;
z-index: 2;
}
.tech-icon.vectordb {
background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4) hue-rotate(180deg);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}
.tech-icon.openai {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.2) contrast(1.3);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.tech-icon.huggingface {
background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg');
background-color: rgba(255, 255, 255, 0.95);
filter: brightness(1.1) contrast(1.1);
}
.tech-icon.pytorch {
background-image: url('https://pytorch.org/assets/images/pytorch-logo.png');
background-color: rgba(255, 255, 255, 0.9);
}
.tech-icon.tensorflow {
background-image: url('https://www.tensorflow.org/images/tf_logo_social.png');
background-color: rgba(255, 255, 255, 0.9);
}
.tech-icon.weaviate {
background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4');
background-color: rgba(255, 255, 255, 0.95);
border-radius: 50%;
filter: brightness(1.1) contrast(1.1);
}
.tech-icon.qdrant {
background-image: url('https://qdrant.tech/images/logo_with_text.png');
background-color: rgba(255, 255, 255, 0.9);
}
.tech-icon.haystack {
background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.tech-icon.mistral {
background-image: url('https://docs.mistral.ai/img/logo.svg');
background-color: rgba(255, 255, 255, 0.9);
}
.tech-icon.anthropic {
background-image: url('../assets/tech-icons/anthropic claude.png');
background-color: rgba(255, 255, 255, 0.95);
filter: brightness(1.2) contrast(1.3);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.tech-icon.groq {
background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg');
background-color: rgba(255, 255, 255, 0.95);
filter: brightness(1.1) contrast(1.1);
}
.tech-icon.gemini {
background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg');
background-color: rgba(255, 255, 255, 0.95);
filter: brightness(1.1) contrast(1.1);
}
.tech-icon.llamaindex {
background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4');
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
}
.tech-icon.vllm {
background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4');
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
}
.tech-icon.rag {
background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png');
background-color: rgba(255, 255, 255, 0.95);
filter: brightness(1.1) contrast(1.1);
}
.tech-icon.transformers {
background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png');
background-color: rgba(255, 255, 255, 0.95);
filter: brightness(1.1) contrast(1.1);
}
.tech-icon.spacy {
background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4) hue-rotate(10deg);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.tech-icon.llama {
background-image: url('../assets/tech-icons/meta-color.svg');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.tech-icon.milvus {
background-image: url('../assets/tech-icons/Milvus.svg');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4) saturate(1.2);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.tech-icon.docker {
background-image: url('../assets/tech-icons/docker.png');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.tech-icon.faiss {
background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png');
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
/* ===== SPECIAL ICON ADJUSTMENTS ===== */
.tech-icon.openai,
.tech-icon.anthropic,
.tech-icon.mistral {
filter: brightness(1.1) contrast(1.2);
}
.tech-icon.llamaindex,
.tech-icon.vllm,
.tech-icon.docker {
background-color: rgba(255, 255, 255, 0.98);
filter: brightness(1.3) contrast(1.4);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.tech-icon.faiss {
filter: brightness(1.1) saturate(1.1);
}
.tech-icon.weaviate {
background-color: rgba(0, 0, 0, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tech-icon.langchain,
.tech-icon.qdrant,
.tech-icon.haystack {
background-size: 80% auto;
background-color: rgba(255, 255, 255, 0.95) !important;
}
/* ===== TECH SHADOWS ===== */
.tech-shadow {
position: absolute;
top: 0;
width: 150px;
height: 100%;
pointer-events: none;
z-index: 1;
}
.tech-shadow-left {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
}
.tech-shadow-right {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
}
/* ===== ANIMATIONS ===== */
@keyframes shimmer {
0% {
transform: translateX(-100%) scaleX(1);
}
49.9% {
transform: translateX(0%) scaleX(1);
}
50% {
transform: translateX(0%) scaleX(1);
}
100% {
transform: translateX(100%) scaleX(1);
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0px);
}
}

609
css/06-forms-buttons.css Normal file
View File

@@ -0,0 +1,609 @@
/* ===== FORMS AND BUTTONS ===== */
/* ===== GENERAL BUTTON STYLES ===== */
.btn {
display: inline-block;
text-decoration: none;
padding: 14px 28px;
border-radius: 8px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
text-align: center;
color: #ffffff;
font-size: 1rem;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3);
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
}
.btn-primary {
display: inline-block;
text-decoration: none;
padding: 14px 28px;
border-radius: 8px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
text-align: center;
color: #ffffff;
font-size: 1rem;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3);
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
}
.btn-primary:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: all 0.8s ease;
z-index: -1;
}
.btn:hover,
.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 25px -10px rgba(var(--primary-color-rgb), 0.6);
background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color));
}
.btn-primary:hover:before {
left: 100%;
}
/* ===== CENTERED BUTTON STYLING ===== */
.centered-btn {
display: block !important;
width: fit-content !important;
margin: 2.5rem auto 0 auto !important;
text-align: center !important;
}
.btn-primary.centered-btn {
background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.4),
0 4px 16px rgba(147, 51, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
padding: 18px 36px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
font-size: 1.2rem !important;
border-radius: 12px !important;
color: #ffffff !important;
text-decoration: none !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(8px) !important;
}
.btn-primary.centered-btn:hover {
transform: translateY(-3px) scale(1.05) !important;
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
box-shadow:
0 12px 40px rgba(109, 40, 217, 0.6),
0 6px 20px rgba(147, 51, 234, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 20px rgba(168, 85, 247, 0.5) !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
}
.btn-primary.centered-btn:active {
transform: translateY(-1px) scale(1.02) !important;
transition: all 0.1s ease !important;
}
/* ===== BUTTON CONTAINER CENTERING ===== */
.cta-buttons,
.cta-buttons-section .cta-buttons,
.webinar-actions,
.hero-cta-buttons,
.program-buttons,
.section-buttons,
.training-buttons,
.course-actions,
.workflow-actions {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 1rem !important;
flex-wrap: wrap !important;
text-align: center !important;
margin: 0 auto !important;
}
.cta-buttons-section {
text-align: center !important;
padding: 2rem 0 !important;
}
.cta-buttons-section .container {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
div[style*="text-align: center"] {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 2.5rem auto !important;
}
.explore-button-section {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 4rem auto !important;
padding: 1rem 0 !important;
}
/* ===== SPECIALIZED BUTTONS ===== */
.btn-book-consultation {
display: inline-block;
padding: 0.8rem 1.5rem;
background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%);
border: none;
border-radius: 8px;
color: white;
text-decoration: none;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.btn-book-consultation:hover {
background: linear-gradient(90deg, #6d7dff 0%, #b5c0ff 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(90, 107, 255, 0.4);
}
.btn-discuss-project {
background-color: #1E1E2F;
color: var(--fg);
padding: 0.7rem 1.5rem;
border: 1px solid #3A3A5A;
border-radius: 8px;
text-decoration: none;
font-size: 1.2rem;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.btn-discuss-project:hover {
background-color: #2C2C44;
border-color: #4F4F6A;
transform: translateY(-2px);
}
/* ===== CONTACT FORM STYLING ===== */
body.contact-page {
padding-top: 1;
}
.contact-page-container {
padding-top: 0;
padding-bottom: 4rem;
color: #fff;
animation: none !important;
transition: none !important;
transform: none !important;
}
#contact-us-section {
animation: none !important;
transition: none !important;
transform: none !important;
}
#contact-us-section .contact-header {
text-align: center;
margin-bottom: 40px;
animation: none !important;
transition: none !important;
}
#contact-us-section .contact-header h1 {
font-size: 4rem;
margin-bottom: 20px;
}
#contact-us-section .contact-header p {
font-size: 1.3rem;
color: #ccc;
margin-bottom: 10px;
}
.contact-content {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.contact-form-container,
.contact-info-container {
background: rgba(20, 20, 40, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.contact-form-container {
flex: 1;
min-width: 300px;
max-width: 500px;
}
.contact-info-container {
flex: 1;
min-width: 300px;
max-width: 500px;
}
/* ===== ENHANCED CONTACT FORM STYLING ===== */
.form-group {
margin-bottom: 1.8rem;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 0.6rem;
font-size: 1.1rem;
color: #52eef5;
font-family: 'Inter', sans-serif;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem 1.2rem;
font-size: 1.1rem;
font-family: 'Inter', sans-serif;
background: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
color: #ffffff;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-sizing: border-box;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.form-group input[type="text"]:hover,
.form-group input[type="email"]:hover,
.form-group select:hover,
.form-group textarea:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(82, 238, 245, 0.4);
transform: translateY(-1px);
}
.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.6);
font-style: italic;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #52eef5;
background: rgba(255, 255, 255, 0.15);
box-shadow:
0 0 20px rgba(82, 238, 245, 0.3),
0 0 40px rgba(82, 238, 245, 0.1),
inset 0 1px 3px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.form-group select {
appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2352eef5%22%20d%3D%22M287%2C197.9L159.3%2C69.2c-3.7-3.7-9.7-3.7-13.5%2C0L5.4%2C197.9c-3.7%2C3.7-3.7%2C9.7%2C0%2C13.5l13.5%2C13.5c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l118.3-118.3l118.3%2C118.3c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l13.5-13.5C290.7%2C207.6%2C290.7%2C201.6%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 14px auto;
padding-right: 3rem;
cursor: pointer;
}
.form-group select option {
background: #1a1a2e;
color: #ffffff;
padding: 0.5rem;
}
/* ===== ENHANCED SUBMIT BUTTON ===== */
.btn-send-message,
.btn-primary.btn-send-message {
display: block;
width: 100%;
padding: 1.2rem 2rem;
background: linear-gradient(135deg, #52eef5 0%, #667eea 50%, #764ba2 100%);
border: none;
border-radius: 12px;
color: #ffffff;
font-size: 1.2rem;
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow:
0 8px 25px rgba(82, 238, 245, 0.3),
0 4px 12px rgba(102, 126, 234, 0.2);
margin-top: 1rem;
}
.btn-send-message::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.6s ease;
}
.btn-send-message:hover {
background: linear-gradient(135deg, #45d1dc 0%, #5a73e8 50%, #6b4ba8 100%);
transform: translateY(-3px) scale(1.02);
box-shadow:
0 12px 35px rgba(82, 238, 245, 0.4),
0 6px 18px rgba(102, 126, 234, 0.3);
}
.btn-send-message:hover::before {
left: 100%;
}
.btn-send-message:active {
transform: translateY(-1px) scale(1.01);
transition: all 0.1s ease;
}
/* ===== FORM VALIDATION ===== */
.form-message {
padding: 1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
text-align: center;
display: none;
}
.form-message.success {
background: rgba(34, 197, 94, 0.15);
border: 2px solid rgba(34, 197, 94, 0.3);
color: #22c55e;
}
.form-message.error {
background: rgba(239, 68, 68, 0.15);
border: 2px solid rgba(239, 68, 68, 0.3);
color: #ef4444;
}
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.form-group.success input,
.form-group.success select,
.form-group.success textarea {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.1);
}
/* ===== CONTACT INFO STYLING ===== */
.contact-details {
list-style: none;
padding: 0;
margin-bottom: 2rem;
}
.contact-details li {
margin-bottom: 1rem;
display: flex;
align-items: center;
padding: 1.2rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
font-size: 1.1rem;
border-left: 3px solid #52eef5;
border-radius: 0 8px 8px 0;
transition: all 0.3s ease;
}
.contact-details li:hover {
background: rgba(82, 238, 245, 0.08);
transform: translateX(5px);
}
.contact-details li i {
margin-right: 1rem;
color: #52eef5;
font-size: 1.45rem;
width: 20px;
text-align: center;
}
.expert-advice-card {
background: rgba(20, 20, 40, 0.7);
border-radius: 12px;
padding: 2rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.expert-advice-card h3 {
margin-top: 0;
color: #a2b0ff;
}
.expert-advice-card p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.8);
}
/* ===== ENHANCED CONTACT INFO STYLING ===== */
.contact-info-container h2 {
font-size: 1.8rem;
color: #52eef5;
margin-bottom: 1.5rem;
font-family: 'VT323', monospace;
text-transform: uppercase;
letter-spacing: 2px;
}
/* ===== FORM ANIMATION ENHANCEMENTS ===== */
.form-group.floating-label input:focus + label,
.form-group.floating-label input:not(:placeholder-shown) + label,
.form-group.floating-label textarea:focus + label,
.form-group.floating-label textarea:not(:placeholder-shown) + label {
transform: translateY(-1.5rem) scale(0.85);
color: #52eef5;
}
.btn-send-message.loading {
pointer-events: none;
opacity: 0.7;
position: relative;
color: transparent;
}
.btn-send-message.loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
border: 2px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: btn-loading-spinner 1s ease infinite;
}
@keyframes btn-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
.form-group.success::after {
content: '✓';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #22c55e;
font-size: 1.2rem;
animation: checkmark-appear 0.3s ease;
}
@keyframes checkmark-appear {
from {
opacity: 0;
transform: translateY(-50%) scale(0);
}
to {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
/* ===== INDUSTRY PAGES BUTTON CONSISTENCY OVERRIDE ===== */
/* Force "Explore Our Solutions" buttons on industry pages to use purple gradient */
.explore-button-section .btn.btn-primary.gn-mobile-button,
.explore-button-section .btn-primary.gn-mobile-button {
background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.4),
0 4px 16px rgba(147, 51, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.explore-button-section .btn.btn-primary.gn-mobile-button:hover,
.explore-button-section .btn-primary.gn-mobile-button:hover {
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
box-shadow:
0 12px 40px rgba(109, 40, 217, 0.6),
0 6px 20px rgba(147, 51, 234, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
transform: translateY(-3px) scale(1.05) !important;
}
/* Additional selector for buttons that might not have the exact same classes */
.explore-button-section .btn[href*="contact"],
.explore-button-section .btn[href*="Contact"] {
background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.4),
0 4px 16px rgba(147, 51, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.explore-button-section .btn[href*="contact"]:hover,
.explore-button-section .btn[href*="Contact"]:hover {
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
box-shadow:
0 12px 40px rgba(109, 40, 217, 0.6),
0 6px 20px rgba(147, 51, 234, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
transform: translateY(-3px) scale(1.05) !important;
}

825
css/07-media-responsive.css Normal file
View File

@@ -0,0 +1,825 @@
/* ===== MEDIA QUERIES AND RESPONSIVE DESIGN ===== */
/* ===== LARGE DESKTOP (1024px and up) ===== */
@media (min-width: 1024px) {
.hero-container {
padding: 12rem 4% 2rem 4%;
}
}
@media (min-height: 600px) {
#hero {
height: 80vh;
min-height: 600px;
}
}
@media (max-height: 599px) {
#hero {
height: auto;
min-height: 500px;
padding: 2rem 0;
}
.hero-container {
height: auto;
min-height: 500px;
}
}
/* ===== TABLET (769px - 1023px) ===== */
@media (min-width: 769px) and (max-width: 1023px) {
.hero-container {
padding: 10rem 4% 2rem 4%;
}
.exp-grid {
gap: 1.5rem;
max-width: 100%;
padding: 0 2rem;
grid-template-columns: repeat(4, 1fr);
}
.exp-item {
padding: 1.8rem;
max-width: 340px;
min-height: 320px;
}
.exp-item img {
width: 100px;
margin-bottom: 1.2rem;
}
.exp-item p:first-of-type {
font-size: 1.3rem;
margin-bottom: 0.9rem;
}
.exp-item .exp-description {
font-size: 0.95rem;
line-height: 1.5;
}
}
/* ===== MOBILE AND TABLET (768px and below) ===== */
@media (max-width: 768px) {
/* Base mobile adjustments */
body {
padding-top: 80px;
}
#hero {
min-height: calc(100vh - 80px);
height: calc(100vh - 80px);
padding-top: 2rem;
}
.hero-container {
padding: 3rem 5% 2rem 5%;
justify-content: center;
align-items: center;
}
.hero-content {
text-align: center;
max-width: 100%;
padding: 0 1rem;
margin-top: 1rem;
}
.hero-content h1 {
font-size: 4.5rem;
font-weight: 100;
line-height: 1.2;
margin-bottom: 1.5rem;
letter-spacing: 0.5px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.hero-content p {
font-size: 1.4rem;
line-height: 1.4;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.hero-content .btn-primary {
padding: 1rem 2rem;
font-size: 1.2rem;
border-radius: 12px;
min-width: 200px;
}
/* Navigation mobile styles */
.site-header {
padding: 0.5rem 1rem;
}
/* Logo adjustments */
.logo-img {
height: 55px;
max-width: 240px;
}
.logo {
min-height: 60px;
padding: 0.4rem 0.8rem;
}
/* Technology cards mobile */
.tech-icon {
min-width: 35px;
min-height: 35px;
max-width: 65px;
max-height: 65px;
}
#technologies {
padding-top: 1.5rem;
}
/* Expertise grid mobile */
.exp-grid {
gap: 1.2rem;
padding: 0 1.5rem;
grid-template-columns: repeat(2, 1fr);
}
.exp-item {
padding: 1.5rem;
max-width: 100%;
min-height: 300px;
}
.exp-item img {
width: 90px;
margin-bottom: 1rem;
}
.exp-item p:first-of-type {
font-size: 1.2rem;
margin-bottom: 0.8rem;
}
.exp-item .exp-description {
font-size: 0.9rem;
line-height: 1.4;
margin-top: 0.5rem;
}
/* Contact form mobile */
.contact-content {
flex-direction: column;
padding: 0;
}
.contact-form-container,
.contact-info-container {
max-width: 100%;
padding-left: 30px;
padding-right: 30px;
padding: 1.5rem;
}
.contact-info-container {
margin-top: 0;
}
/* Case studies mobile */
.case-studies-hero h1 {
font-size: 2.2rem;
}
.case-studies-hero p,
#contact-us-section .contact-header p {
font-size: 1.2rem;
}
.filter-controls {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.dropdown-filter .dropdown-toggle-filter {
width: 100%;
}
.search-filter {
max-width: none;
}
.discuss-project-cta .container {
flex-direction: column;
text-align: center;
}
.discuss-project-cta h2 {
margin-bottom: 1.5rem;
font-size: 1.9rem;
}
.btn-discuss-project {
width: 100%;
text-align: center;
}
#contact-us-section .contact-header h1 {
font-size: 3.35rem;
}
/* Enhanced Contact Form mobile */
.contact-form-container {
padding: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
padding: 1rem;
font-size: 1rem;
}
.form-group textarea {
min-height: 100px;
}
.btn-send-message {
padding: 1rem 1.5rem;
font-size: 1.1rem;
}
/* General mobile adjustments */
.nav-links {
display: none;
}
.section {
padding: 60px 0;
}
.section .container {
padding: 30px;
}
.page-header {
padding: 70px 0 40px;
}
.page-header h1 {
font-size: 3rem;
}
.grid-2 {
grid-template-columns: 1fr;
}
.btn-outline {
display: none;
}
/* Button adjustments */
.centered-btn {
margin: 2rem auto 0 auto !important;
}
.btn-primary.centered-btn {
padding: 14px 28px !important;
font-size: 1.1rem !important;
}
.cta-buttons,
.webinar-actions,
.hero-cta-buttons,
div[style*="text-align: center"] {
flex-direction: column !important;
gap: 1.5rem !important;
margin: 2rem auto !important;
}
.hero-section .btn,
.hero-section .btn-primary {
width: auto !important;
max-width: 280px !important;
margin: 1rem auto !important;
}
/* Footer mobile adjustments */
.footer-content {
gap: 20px;
text-align: center;
}
.footer-col {
min-width: 200px;
}
.footer-col-logo p {
max-width: 100%;
text-align: center;
}
.footer-col .social-links {
justify-content: center;
}
.footer-logo-img {
height: 120px;
max-width: 350px;
}
}
/* ===== EXTRA SMALL MOBILE (480px and below) ===== */
@media (max-width: 480px) {
#hero {
height: 65vh;
min-height: 450px;
padding-top: 1.5rem;
}
.hero-container {
padding: 2.5rem 3% 1rem 3%;
}
.hero-content {
margin-top: 1.5rem;
}
.hero-content h1 {
font-size: 4.5rem;
font-weight: 100;
line-height: 1.1;
margin-bottom: 0.8rem;
text-shadow: none !important;
letter-spacing: 0.3px;
filter: brightness(1.08);
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 1.2rem;
}
.hero-content .btn-primary {
padding: 0.8rem 1.5rem;
font-size: 1.1rem;
}
/* Logo extra small */
.logo-img {
height: 45px;
max-width: 180px;
}
.logo {
min-height: 50px;
padding: 0.3rem 0.6rem;
}
.footer-logo-img {
height: 100px;
max-width: 300px;
}
/* Technology cards extra small */
.tech-icon {
min-width: 30px;
min-height: 30px;
max-width: 50px;
max-height: 50px;
}
/* Expertise grid extra small */
.exp-grid {
gap: 1rem;
padding: 0 1rem;
grid-template-columns: 1fr;
}
.exp-item {
padding: 1.2rem;
max-width: 300px;
min-height: 260px;
margin: 0 auto;
}
.exp-item img {
width: 80px;
margin-bottom: 1rem;
}
.exp-item p:first-of-type {
font-size: 1.1rem;
margin-bottom: 0.7rem;
}
.exp-item .exp-description {
font-size: 0.85rem;
line-height: 1.5;
margin-top: 0.5rem;
}
/* Enhanced contact form mobile */
.contact-form-container,
.contact-info-container {
padding: 1rem;
margin: 0.5rem 0;
}
.form-group {
margin-bottom: 1.2rem;
}
.form-group label {
font-size: 0.9rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
padding: 0.8rem;
font-size: 0.95rem;
}
.btn-send-message {
padding: 1rem;
font-size: 1rem;
letter-spacing: 1px;
}
#contact-us-section .contact-header h1 {
font-size: 2.5rem;
}
#contact-us-section .contact-header p {
font-size: 1.1rem;
}
/* Button adjustments extra small */
.centered-btn {
margin: 1.5rem auto 0 auto !important;
}
.btn-primary.centered-btn {
padding: 12px 24px !important;
font-size: 1rem !important;
letter-spacing: 1px !important;
}
.cta-buttons,
.webinar-actions,
.hero-cta-buttons {
gap: 1rem !important;
margin: 1.5rem auto !important;
}
.btn-primary,
.btn {
padding: 0.8rem 1.5rem !important;
font-size: 0.95rem !important;
min-width: 200px !important;
text-align: center !important;
}
.hero-cta-buttons,
.cta-buttons,
.webinar-actions {
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
.btn-primary,
.btn-secondary,
.workflow-cta-btn,
.specialization-btn {
width: 100% !important;
max-width: 280px !important;
margin: 0.75rem auto !important;
}
/* Footer extra small */
.footer-content {
flex-direction: column;
gap: 25px;
}
.footer-col ul li p {
padding: 3px 0;
font-size: 0.9rem;
margin-bottom: 1px;
line-height: 1.2;
}
.footer-col ul li p i {
margin-right: 10px;
font-size: 1rem;
min-width: 18px;
}
.footer-col .social-links a {
min-width: 35px;
min-height: 35px;
font-size: 1.1rem;
}
}
/* ===== CASE STUDIES RESPONSIVE ===== */
@media (min-width: 768px) {
.case-studies-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== INDUSTRY HERO RESPONSIVE ===== */
@media (max-width: 768px) {
.industry-hero-content {
flex-direction: column;
text-align: center;
gap: 20px;
}
.industry-hero .hero-text {
max-width: 100%;
}
.industry-hero h1 {
font-size: 3rem;
}
.industry-hero p {
font-size: 1.3rem;
}
}
/* ===== SPECIALIZED SECTIONS RESPONSIVE ===== */
@media (max-width: 1024px) {
.specializations-cards-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.benefit-card {
padding: 20px;
}
.benefit-card h3 {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.specializations-cards-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.specialization-card {
padding: 25px;
}
.specialization-card h3 {
font-size: 1.6rem;
}
.benefit-card .btn-primary {
padding: 14px 20px;
font-size: 0.85rem;
max-width: 180px;
}
}
/* ===== WORKFLOW SECTION RESPONSIVE ===== */
@media (max-width: 768px) {
.workflow-section {
padding: 2.5rem 0;
margin: 2rem 0;
}
.workflow-intro p {
font-size: 1.1rem;
}
.workflow-benefits h3,
.workflow-process h3 {
font-size: 1.8rem;
}
.benefits-list {
grid-template-columns: 1fr;
gap: 1rem;
}
.benefit-item {
padding: 1.2rem;
flex-direction: column;
text-align: center;
gap: 0.8rem;
}
.workflow-step {
padding: 1.5rem;
margin-bottom: 2rem;
}
.workflow-step:hover {
transform: translateY(-5px);
}
.step-icon {
width: 70px;
height: 70px;
align-self: center;
}
.step-icon i {
font-size: 1.8rem;
}
.step-content {
text-align: center;
}
.step-content h4 {
font-size: 1.4rem;
}
.step-details span {
font-size: 0.9rem;
}
.workflow-cta {
padding: 2rem 1.5rem;
}
.cta-content h3 {
font-size: 1.6rem;
}
.cta-content p {
font-size: 1.1rem;
}
.workflow-cta-btn {
padding: 0.7rem 1.5rem;
font-size: 1rem;
max-width: 260px;
width: 100%;
}
}
@media (max-width: 480px) {
.workflow-intro {
margin-bottom: 2rem;
}
.workflow-step {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.step-connector {
display: none;
}
}
/* ===== COURSES AND WEBINARS RESPONSIVE ===== */
@media (max-width: 1024px) {
.courses-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.course-card {
padding: 1.25rem;
}
.webinar-videos-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 0.5rem 0;
}
.webinar-meta {
gap: 1rem;
}
}
@media (max-width: 768px) {
.courses-grid {
gap: 1.5rem;
}
.course-card {
padding: 1rem;
}
.course-info h3 {
font-size: 1.4rem;
}
.course-info p {
font-size: 1rem;
}
.course-highlights {
gap: 0.6rem;
}
.course-highlights .highlight-item {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
}
/* Webinar responsive */
.webinar-main-card {
padding: 1.5rem;
margin: 2rem 0 3rem 0;
}
.webinar-card-header h2 {
font-size: 2rem;
flex-direction: column;
gap: 0.5rem;
}
.upcoming-webinar-item {
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
}
.webinar-date-badge {
align-self: flex-start;
min-width: 80px;
}
.webinar-meta {
flex-direction: column;
gap: 0.8rem;
}
.webinar-actions {
flex-direction: column;
}
.register-btn, .add-calendar-btn {
justify-content: center;
text-align: center;
}
.webinar-videos-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.webinar-video-card {
padding: 1rem;
}
}
/* Responsive styles for webinar video cards */
@media (max-width: 768px) {
.webinar-video-card .video-container {
padding-bottom: 65%; /* Slightly increase height ratio on mobile */
}
.webinar-video-card {
padding: 1.2rem; /* Reduce padding to give more space to video */
}
}
@media (max-width: 480px) {
.course-video-container {
padding-bottom: 60%;
}
.course-info h3 {
font-size: 1.3rem;
}
.course-highlights {
flex-direction: column;
align-items: flex-start;
}
.course-highlights .highlight-item {
align-self: flex-start;
}
.gn-video-info h4 {
font-size: 1.2rem;
}
}

View File

@@ -0,0 +1,620 @@
/* ===== ANIMATIONS AND EFFECTS ===== */
/* ===== CORE ANIMATIONS ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulseGlow {
0% {
text-shadow: none;
filter: brightness(1.05);
}
100% {
text-shadow: none;
filter: brightness(1.08);
}
}
@keyframes glowLine {
0%, 100% {
opacity: 0.5;
box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3);
}
50% {
opacity: 1;
box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%) scaleX(1);
}
49.9% {
transform: translateX(0%) scaleX(1);
}
50% {
transform: translateX(0%) scaleX(1);
}
100% {
transform: translateX(100%) scaleX(1);
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0px);
}
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
/* ===== TECHNOLOGY CARD ANIMATIONS ===== */
@keyframes techCardsFlow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ===== BUTTON ANIMATIONS ===== */
@keyframes heroButtonPulse {
0%, 100% {
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.4),
0 4px 16px rgba(147, 51, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
50% {
box-shadow:
0 8px 32px rgba(109, 40, 217, 0.6),
0 4px 16px rgba(147, 51, 234, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
}
@keyframes btn-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
@keyframes checkmark-appear {
from {
opacity: 0;
transform: translateY(-50%) scale(0);
}
to {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
/* ===== WEBINAR ANIMATIONS ===== */
@keyframes slideInFromLeft {
from {
left: -100%;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}
@keyframes fadeInMenu {
from {
opacity: 0.8;
}
to {
opacity: 1;
}
}
/* ===== SPECIALIZED CARDS ANIMATIONS ===== */
.hero-content h1,
.hero-content p,
.section-heading,
.tech-item,
.exp-item {
animation: fadeInUp 0.8s ease forwards;
}
/* Disable animations for hero content to prevent layout shifts */
#hero .hero-content p {
animation: none !important;
}
/* Allow hero heading to have the glow animation only */
#hero .hero-content h1 {
animation: pulseGlow 3s ease-in-out infinite alternate !important;
animation-delay: 0s !important;
}
.hero-content p {
animation-delay: 0.4s;
}
/* Override hero animation delays */
#hero .hero-content h1,
#hero .hero-content p {
animation-delay: 0s !important;
}
.section-heading {
animation-delay: 0.6s;
}
.section-subheading {
animation-delay: 0.7s;
}
.section-intro {
animation-delay: 0.8s;
}
.tech-item {
animation-delay: 0.9s;
}
.exp-item {
animation-delay: 1s;
}
/* ===== SPECIALIZATION CARDS EFFECTS ===== */
.specialization-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.specialization-card:hover::before {
opacity: 1;
animation: shimmer 3s ease-in-out infinite;
}
/* ===== BENEFIT CARD ANIMATIONS ===== */
.benefit-card-icon {
transition: transform 0.3s ease, background-color 0.3s ease;
}
.benefit-card:hover .benefit-card-icon {
transform: scale(1.1);
background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.2);
}
.benefit-card-icon i {
transition: color 0.3s ease;
}
.highlight-badge {
transition: background 0.3s ease, transform 0.3s ease;
}
.specialization-card:hover .highlight-badge {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* ===== TECH CARD ADVANCED EFFECTS ===== */
.tech-card-inner::before {
animation: shimmer 3s ease-in-out infinite;
}
.tech-icon-wrapper::before {
transition: opacity 0.3s ease;
}
.tech-card:hover .tech-icon-wrapper::before {
opacity: 0;
}
/* Mobile responsive animations */
@media (max-width: 768px) {
.hero-content h1 {
animation-duration: 2.5s;
}
}
/* ===== FOOTER ANIMATIONS ===== */
.footer-col .social-links a {
transition: color 0.3s ease, transform 0.3s ease;
}
.footer-col .social-links a:hover {
transform: translateY(-2px);
background-color: rgba(var(--primary-color-rgb), 0.1);
}
/* ===== ADVANCED CARD EFFECTS ===== */
.article-card,
.solution-item,
.related-content-item,
.offering-item,
.exp-item {
position: relative;
overflow: hidden;
}
.article-card::before,
.solution-item::before,
.related-content-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.article-card:hover::before,
.solution-item:hover::before,
.related-content-item:hover::before {
left: 100%;
}
/* ===== CONTACT FORM ANIMATIONS ===== */
.form-group input,
.form-group textarea,
.form-group select {
position: relative;
}
.form-group::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #52eef5, #667eea);
transition: width 0.3s ease;
}
.form-group input:focus + label::after,
.form-group textarea:focus + label::after,
.form-group select:focus + label::after {
width: 100%;
}
/* ===== WORKFLOW SECTION ANIMATIONS ===== */
.workflow-step {
position: relative;
}
.step-icon::before {
animation: shimmer 3s ease-in-out infinite;
}
.benefit-item {
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-5px);
border-color: rgba(var(--primary-color-rgb), 0.6);
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
}
/* ===== WEBINAR SECTION ANIMATIONS ===== */
.webinar-main-card::before,
.webinar-video-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
max-width: 100%;
overflow: hidden;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
animation: shimmer 3s ease-in-out infinite;
border-radius: 0 2px 2px 0;
}
.upcoming-webinar-item::before {
animation: shimmer 3s ease-in-out infinite;
border-radius: 0 2px 2px 0;
max-width: 100%;
overflow: hidden;
}
/* ===== GYANNETRA APP SECTION ANIMATIONS ===== */
.gn-feature-item:hover {
background: rgba(var(--primary-color-rgb), 0.1);
transform: translateX(5px);
}
.gn-feature-icon {
transition: all 0.3s ease;
}
.gn-feature-item:hover .gn-feature-icon {
background: rgba(var(--primary-color-rgb), 0.25);
transform: scale(1.1);
}
.gn-download-link {
transition: all 0.3s ease;
}
.gn-download-link:hover .gn-download-icon {
transform: scale(1.1);
}
/* ===== NAVIGATION ANIMATIONS ===== */
.nav-link {
position: relative;
}
.nav-link:after {
transition: width 0.3s ease-out, left 0.3s ease-out;
}
.dropdown-menu {
transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s;
}
/* ===== HOVER EFFECTS COLLECTION ===== */
.tech-card,
.benefit-card,
.specialization-card,
.course-card,
.webinar-video-card,
.gn-video-tutorial-card {
transition: all 0.3s ease;
}
.tech-card:hover,
.course-card:hover,
.webinar-video-card:hover,
.gn-video-tutorial-card:hover {
transform: translateY(-5px);
}
.benefit-card:hover,
.specialization-card:hover {
transform: translateY(-8px);
}
/* ===== SCROLL ANIMATIONS ===== */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* Stagger animation delays */
.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.4s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.5s; }
/* ===== LOADING ANIMATIONS ===== */
.loading-spinner {
animation: spin 1s linear infinite;
}
.pulse-effect {
animation: pulse 2s ease-in-out infinite;
}
.float-effect {
animation: float 3s ease-in-out infinite;
}
/* ===== SPECIALIZED ANIMATION OVERRIDES ===== */
/* Ensure hero content is not affected by scroll animations */
#hero .hero-content.animate-on-scroll {
animation: none !important;
text-align: center !important;
}
#hero .hero-content.animate-on-scroll.animated {
transform: none !important;
opacity: 1 !important;
text-align: center !important;
}
/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.tech-cards-track {
will-change: transform;
}
.tech-card {
transform-style: preserve-3d;
}
/* ===== TRANSITION COLLECTIONS ===== */
.smooth-transition {
transition: all 0.3s ease;
}
.fast-transition {
transition: all 0.15s ease;
}
.slow-transition {
transition: all 0.6s ease;
}
/* ===== MOBILE ANIMATION ADJUSTMENTS ===== */
@media (max-width: 768px) {
/* Reduce animation intensity on mobile */
.tech-card:hover,
.benefit-card:hover,
.specialization-card:hover {
transform: translateY(-3px);
}
/* Simplify hover effects on mobile */
.workflow-step:hover {
transform: translateY(-5px);
}
/* Disable complex animations on mobile for performance */
.tech-card-inner::before {
animation: none;
}
.step-icon::before {
animation: none;
}
}
@media (max-width: 480px) {
/* Further reduce animations on very small screens */
.animate-on-scroll {
transition: all 0.3s ease;
}
/* Disable resource-intensive animations */
.shimmer-effect {
animation: none;
}
.webinar-main-card::before,
.webinar-video-card::before,
.upcoming-webinar-item::before {
animation: none;
}
}
/* ===== ACCESSIBILITY CONSIDERATIONS ===== */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== EXPERTISE SECTION DIVIDER ANIMATION ===== */
.exp-item h3 {
position: relative;
padding-bottom: 14px;
margin-bottom: 15px;
}
.exp-item h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 2px;
background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2));
border-radius: 2px;
box-shadow: 0 0 8px rgba(82, 238, 245, 0.5);
}
/* ===== CUSTOM SCROLL EFFECTS ===== */
.scroll-fade-in {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.scroll-slide-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-slide-left.visible {
opacity: 1;
transform: translateX(0);
}
.scroll-slide-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-slide-right.visible {
opacity: 1;
transform: translateX(0);
}
/* ===== FINAL PERFORMANCE OPTIMIZATIONS ===== */
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
.gpu-accelerated {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* Video container hover effects */
.webinar-video-card .video-container {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.webinar-video-card:hover .video-container {
transform: scale(1.02);
box-shadow: 0 6px 16px rgba(82, 238, 245, 0.15);
}

297
css/09-about-page.css Normal file
View File

@@ -0,0 +1,297 @@
/* ===== ABOUT US PAGE ENHANCED STYLING ===== */
/* Main about section styling */
#about-us {
padding: 4rem 0;
margin: 0 auto;
max-width: var(--max-w);
}
#about-us h1 {
font-family: var(--font-headings);
font-size: 4rem;
color: #52eef5;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 4rem;
text-shadow: 0 0 20px rgba(82, 238, 245, 0.5);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); }
to { text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3); }
}
/* About section styling */
.about-section {
background: rgba(20, 20, 40, 0.6);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
padding: 3rem;
margin-bottom: 3rem;
border: 1px solid rgba(82, 238, 245, 0.2);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.about-section::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(82, 238, 245, 0.1), transparent);
transition: left 0.5s ease;
}
.about-section:hover::before {
left: 100%;
}
.about-section:hover {
transform: translateY(-5px);
border-color: rgba(82, 238, 245, 0.4);
box-shadow: 0 15px 50px rgba(82, 238, 245, 0.2);
}
.about-section h2 {
font-family: var(--font-headings);
font-size: 2.5rem;
color: #52eef5;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
}
.about-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #52eef5, transparent);
border-radius: 2px;
}
.about-section p {
font-family: var(--font-body);
font-size: 1.3rem;
line-height: 1.8;
color: var(--text-light);
margin-bottom: 2rem;
text-align: justify;
}
/* Team images styling */
.team-images {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.team-images img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(82, 238, 245, 0.3);
transition: all 0.3s ease;
filter: grayscale(30%);
}
.team-images img:hover {
transform: scale(1.1) rotate(5deg);
border-color: #52eef5;
filter: grayscale(0%);
box-shadow: 0 15px 40px rgba(82, 238, 245, 0.3);
}
/* Mission and Vision section styling */
.mission-vision {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: stretch;
}
.mission, .vision {
background: rgba(15, 15, 30, 0.8);
padding: 2.5rem;
border-radius: 15px;
border: 1px solid rgba(82, 238, 245, 0.1);
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.mission::before, .vision::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #52eef5, #a2abff);
border-radius: 15px 15px 0 0;
}
.mission:hover, .vision:hover {
transform: translateY(-3px);
border-color: rgba(82, 238, 245, 0.3);
box-shadow: 0 10px 30px rgba(82, 238, 245, 0.15);
}
.mission h2, .vision h2 {
font-size: 2rem;
margin-bottom: 1rem;
text-align: center;
}
.mission p, .vision p {
text-align: center;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.vision p {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Styling for mission bullet points */
.mission ul {
list-style: none;
padding: 0;
margin: 1rem 0 0 0;
text-align: left;
}
.mission li {
margin-bottom: 1rem;
padding-left: 1.5rem;
position: relative;
font-size: 1.1rem;
line-height: 1.6;
}
.mission li::before {
content: '●';
color: #52eef5;
position: absolute;
left: 0;
font-size: 1.2rem;
}
.mission li strong {
color: #52eef5;
font-weight: 600;
}
/* Enhanced visual effects */
.about-section {
background:
radial-gradient(circle at 20% 50%, rgba(82, 238, 245, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(162, 171, 255, 0.05) 0%, transparent 50%),
rgba(20, 20, 40, 0.6);
}
/* Responsive design */
@media (max-width: 768px) {
#about-us {
padding: 2rem 0;
}
#about-us h1 {
font-size: 3rem;
margin-bottom: 2rem;
}
.about-section {
padding: 2rem;
margin-bottom: 2rem;
}
.about-section h2 {
font-size: 2rem;
}
.team-images {
gap: 1rem;
}
.team-images img {
width: 150px;
height: 150px;
}
.mission-vision {
grid-template-columns: 1fr;
gap: 2rem;
}
.mission, .vision {
padding: 2rem;
}
}
@media (max-width: 480px) {
#about-us h1 {
font-size: 2.5rem;
}
.about-section {
padding: 1.5rem;
}
.about-section h2 {
font-size: 1.8rem;
}
.team-images img {
width: 120px;
height: 120px;
}
.mission, .vision {
padding: 1.5rem;
}
}
/* Additional enhancements for better visual hierarchy */
.about-section:first-of-type {
background:
radial-gradient(circle at 30% 40%, rgba(82, 238, 245, 0.08) 0%, transparent 60%),
rgba(20, 20, 40, 0.6);
}
.about-section:last-of-type {
background:
radial-gradient(circle at 70% 60%, rgba(162, 171, 255, 0.08) 0%, transparent 60%),
rgba(20, 20, 40, 0.6);
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Focus states for accessibility */
.about-section:focus-within {
outline: 2px solid rgba(82, 238, 245, 0.5);
outline-offset: 4px;
}

View File

@@ -0,0 +1,529 @@
/* ===== CASE STUDIES PAGE ENHANCED STYLING ===== */
/* Enhanced Case Studies Hero Section */
.case-studies-hero {
padding: 8rem 0 4rem 0;
text-align: center;
background:
radial-gradient(circle at 30% 40%, rgba(82, 238, 245, 0.1) 0%, transparent 60%),
radial-gradient(circle at 70% 60%, rgba(162, 171, 255, 0.08) 0%, transparent 60%),
rgba(10, 10, 26, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(82, 238, 245, 0.2);
position: relative;
overflow: hidden;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.case-studies-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(82, 238, 245, 0.05) 0%, transparent 50%),
linear-gradient(45deg, transparent 50%, rgba(162, 171, 255, 0.05) 100%);
pointer-events: none;
z-index: 1;
}
.case-studies-hero .container {
position: relative;
z-index: 2;
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
}
.case-studies-hero h1 {
font-family: var(--font-headings);
font-size: 4rem;
color: #52eef5;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 2rem;
text-shadow: 0 0 30px rgba(82, 238, 245, 0.6);
animation: glow 3s ease-in-out infinite alternate;
line-height: 1.1;
font-weight: 400;
}
@keyframes glow {
from {
text-shadow: 0 0 20px rgba(82, 238, 245, 0.5);
transform: scale(1);
}
to {
text-shadow: 0 0 40px rgba(82, 238, 245, 0.8), 0 0 60px rgba(82, 238, 245, 0.3);
transform: scale(1.02);
}
}
.case-studies-hero p {
font-family: var(--font-body);
font-size: 1.4rem;
color: var(--text-light);
max-width: 800px;
margin: 0 auto 2rem auto;
line-height: 1.7;
opacity: 0.9;
text-align: center;
}
/* Enhanced Filters Section */
.case-studies-filters {
padding: 2rem 0;
background: rgba(15, 15, 30, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(82, 238, 245, 0.1);
position: sticky;
top: 80px;
z-index: 100;
}
.filter-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.dropdown-filter .dropdown-toggle-filter {
background: rgba(20, 20, 40, 0.8);
color: var(--fg);
padding: 1rem 2rem;
border: 2px solid rgba(82, 238, 245, 0.3);
border-radius: 12px;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
min-width: 200px;
transition: all 0.3s ease;
font-family: var(--font-body);
font-weight: 500;
}
.dropdown-filter .dropdown-toggle-filter:hover {
border-color: #52eef5;
background: rgba(82, 238, 245, 0.1);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(82, 238, 245, 0.2);
}
.dropdown-filter .dropdown-toggle-filter i {
margin-left: 0.8rem;
transition: transform 0.3s ease;
}
.dropdown-filter .dropdown-toggle-filter:hover i {
transform: rotate(180deg);
}
.search-filter {
display: flex;
align-items: center;
background: rgba(20, 20, 40, 0.8);
padding: 0.5rem 1.5rem;
border: 2px solid rgba(82, 238, 245, 0.3);
border-radius: 12px;
min-width: 300px;
transition: all 0.3s ease;
}
.search-filter:focus-within {
border-color: #52eef5;
background: rgba(82, 238, 245, 0.1);
box-shadow: 0 8px 25px rgba(82, 238, 245, 0.2);
}
.search-filter i {
margin-right: 1rem;
color: #52eef5;
font-size: 1.2rem;
}
.search-filter input[type="text"] {
background: transparent;
border: none;
color: var(--fg);
font-size: 1.1rem;
width: 100%;
padding: 0.8rem 0;
outline: none;
font-family: var(--font-body);
}
.search-filter input[type="text"]::placeholder {
color: rgba(236, 236, 236, 0.6);
transition: color 0.3s ease;
}
.search-filter input[type="text"]:focus::placeholder {
color: rgba(82, 238, 245, 0.8);
}
/* Enhanced Case Studies Grid */
.case-studies-grid-section {
padding: 4rem 0;
background: rgba(5, 5, 15, 0.8);
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
margin-top: 2rem;
}
.article-card {
background: rgba(20, 20, 40, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(82, 238, 245, 0.2);
border-radius: 20px;
padding: 2.5rem;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.article-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(82, 238, 245, 0.1), transparent);
transition: left 0.6s ease;
}
.article-card:hover::before {
left: 100%;
}
.article-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: rgba(82, 238, 245, 0.5);
box-shadow:
0 20px 60px rgba(82, 238, 245, 0.3),
0 0 40px rgba(82, 238, 245, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.case-study-img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 1.5rem;
filter: brightness(1.2) contrast(1.1);
transition: all 0.3s ease;
}
.article-card:hover .case-study-img {
transform: scale(1.1) rotate(5deg);
filter: brightness(1.4) contrast(1.2);
}
.article-card h3 {
font-family: var(--font-headings);
font-size: 1.8rem;
color: #52eef5;
margin-bottom: 1rem;
line-height: 1.3;
font-weight: 400;
transition: color 0.3s ease;
}
.article-card:hover h3 {
color: #ffffff;
text-shadow: 0 0 10px rgba(82, 238, 245, 0.5);
}
.article-card p {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--text-light);
line-height: 1.6;
margin-bottom: 2rem;
flex-grow: 1;
}
.read-more-link {
display: inline-flex;
align-items: center;
color: #52eef5;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
align-self: flex-start;
position: relative;
}
.read-more-link::after {
content: '→';
margin-left: 0.5rem;
transition: transform 0.3s ease;
}
.read-more-link:hover {
color: #ffffff;
text-shadow: 0 0 10px rgba(82, 238, 245, 0.8);
}
.read-more-link:hover::after {
transform: translateX(5px);
}
/* Enhanced CTA Section */
.discuss-project-cta {
padding: 5rem 0;
text-align: center;
background:
radial-gradient(circle at 50% 50%, rgba(82, 238, 245, 0.1) 0%, transparent 70%),
rgba(15, 15, 30, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(82, 238, 245, 0.2);
position: relative;
overflow: hidden;
}
.discuss-project-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(45deg, rgba(82, 238, 245, 0.05) 0%, transparent 50%),
linear-gradient(-45deg, transparent 50%, rgba(162, 171, 255, 0.05) 100%);
pointer-events: none;
}
.discuss-project-cta .container {
position: relative;
z-index: 2;
}
.discuss-project-cta h2 {
font-family: var(--font-headings);
font-size: 3rem;
color: #52eef5;
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 20px rgba(82, 238, 245, 0.5);
}
.btn-discuss-project {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.2rem 3rem;
background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%);
color: #ffffff;
text-decoration: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.btn-discuss-project::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.6s ease;
}
.btn-discuss-project:hover::before {
left: 100%;
}
.btn-discuss-project:hover {
transform: translateY(-3px) scale(1.05);
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
border-color: rgba(255, 255, 255, 0.3);
box-shadow:
0 15px 50px rgba(109, 40, 217, 0.4),
0 0 30px rgba(168, 85, 247, 0.3);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* Responsive Design */
@media (max-width: 1024px) {
.case-studies-hero h1 {
font-size: 3.5rem;
}
.articles-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
}
@media (max-width: 768px) {
.case-studies-hero {
padding: 6rem 0 3rem 0;
min-height: 50vh;
}
.case-studies-hero h1 {
font-size: 2.5rem;
letter-spacing: 2px;
margin-bottom: 1.5rem;
}
.case-studies-hero p {
font-size: 1.2rem;
padding: 0 1rem;
}
.case-studies-filters {
position: static;
padding: 1.5rem 0;
}
.filter-controls {
flex-direction: column;
gap: 1rem;
}
.dropdown-filter .dropdown-toggle-filter,
.search-filter {
width: 100%;
min-width: auto;
}
.articles-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.article-card {
padding: 2rem;
margin: 0 1rem;
}
.discuss-project-cta h2 {
font-size: 2.2rem;
margin-bottom: 1.5rem;
}
.btn-discuss-project {
padding: 1rem 2rem;
font-size: 1.1rem;
width: 100%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.case-studies-hero {
padding: 5rem 0 2rem 0;
min-height: 40vh;
}
.case-studies-hero h1 {
font-size: 2rem;
letter-spacing: 1px;
}
.case-studies-hero p {
font-size: 1.1rem;
}
.article-card {
padding: 1.5rem;
margin: 0 0.5rem;
}
.case-study-img {
width: 60px;
height: 60px;
}
.article-card h3 {
font-size: 1.5rem;
}
.discuss-project-cta {
padding: 3rem 0;
}
.discuss-project-cta h2 {
font-size: 1.8rem;
}
}
/* Enhanced focus states for accessibility */
.dropdown-filter .dropdown-toggle-filter:focus,
.search-filter input:focus,
.read-more-link:focus,
.btn-discuss-project:focus {
outline: 2px solid rgba(82, 238, 245, 0.6);
outline-offset: 2px;
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Performance optimizations */
.case-studies-hero,
.article-card,
.discuss-project-cta {
will-change: transform;
transform: translateZ(0);
}
/* Loading state animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.article-card {
animation: fadeInUp 0.6s ease forwards;
}
.article-card:nth-child(1) { animation-delay: 0.1s; }
.article-card:nth-child(2) { animation-delay: 0.2s; }
.article-card:nth-child(3) { animation-delay: 0.3s; }
.article-card:nth-child(4) { animation-delay: 0.4s; }
.article-card:nth-child(5) { animation-delay: 0.5s; }
.article-card:nth-child(6) { animation-delay: 0.6s; }

View File

@@ -0,0 +1,71 @@
/* Universal card heading divider for all major card types */
.exp-item h3,
.specialization-card h3,
.benefit-card h3,
.course-card h3,
.feature-card h3,
.offering-card h3,
.blog-card h3,
.solution-item h3,
.article-card h3,
.webinar-video-card h3,
.tech-card h3,
.video-info h3,
.case-study-card h3,
.webinar-main-card h3,
.service-card h3,
.industry-card h3 {
position: relative;
padding-bottom: 12px;
margin-bottom: 15px;
}
.exp-item h3::after,
.specialization-card h3::after,
.benefit-card h3::after,
.course-card h3::after,
.feature-card h3::after,
.offering-card h3::after,
.blog-card h3::after,
.solution-item h3::after,
.article-card h3::after,
.webinar-video-card h3::after,
.tech-card h3::after,
.video-info h3::after,
.case-study-card h3::after,
.webinar-main-card h3::after,
.service-card h3::after,
.industry-card h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2));
border-radius: 2px;
box-shadow: 0 0 8px rgba(82, 238, 245, 0.5);
}
/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
.exp-item h3::after,
.specialization-card h3::after,
.benefit-card h3::after,
.course-card h3::after,
.feature-card h3::after,
.offering-card h3::after,
.blog-card h3::after,
.solution-item h3::after,
.article-card h3::after,
.webinar-video-card h3::after,
.tech-card h3::after,
.video-info h3::after,
.case-study-card h3::after,
.webinar-main-card h3::after,
.service-card h3::after,
.industry-card h3::after {
width: 40px;
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,19 +0,0 @@
/* Additional CSS for expertise section divider */
.exp-item h3 {
position: relative;
padding-bottom: 12px;
margin-bottom: 15px;
}
.exp-item h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2));
border-radius: 2px;
box-shadow: 0 0 8px rgba(82, 238, 245, 0.5);
}

37
css/expertise-fix.css Normal file
View File

@@ -0,0 +1,37 @@
/* Expertise Cards Heading Styles */
.exp-item h3 {
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;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.exp-item h3 {
font-size: 1.6rem;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.exp-item h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
white-space: nowrap;
}
}
@media (max-width: 480px) {
.exp-item h3 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
white-space: nowrap;
}
}

16
css/fix-subheading.css Normal file
View File

@@ -0,0 +1,16 @@
/* Fix for section-subheading readability in specializations section */
#specializations .section-subheading {
/* Remove any gradient or transparent text */
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #52eef5 !important; /* Use solid color instead of transparent */
color: #52eef5 !important; /* Fallback */
text-shadow: 0 0 10px rgba(82, 238, 245, 0.3) !important; /* Add subtle glow but keep text readable */
opacity: 1 !important;
visibility: visible !important;
font-weight: 400 !important; /* Reduced font weight for better readability */
letter-spacing: 1.5px !important; /* Maintain increased letter spacing */
margin: 1rem auto 2rem !important; /* Keep same spacing */
font-size: 2.1rem !important; /* Increased font size for better readability */
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

416
css/testimonials.css Normal file
View File

@@ -0,0 +1,416 @@
/* ===== CUSTOMER TESTIMONIALS SECTION ===== */
.testimonials-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.3));
position: relative;
overflow: hidden;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(109, 40, 217, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.testimonials-container {
width: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 2;
}
.testimonials-heading {
text-align: center;
margin-bottom: 4rem;
padding: 0 2rem;
}
.testimonials-heading h2 {
font-size: 3.2rem;
color: #52eef5;
margin-bottom: 1rem;
font-family: 'VT323', monospace;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
}
.testimonials-heading h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
border-radius: 2px;
}
.testimonials-heading p {
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Floating Testimonials Track */
.testimonials-track-container {
position: relative;
width: 100%;
overflow: hidden;
height: 600px;
margin: 2rem 0;
}
.testimonials-track {
display: flex;
width: 200%;
animation: testimonialFloat 60s linear infinite;
gap: 2rem;
position: absolute;
top: 0;
left: 0;
}
.testimonials-track:hover {
animation-play-state: paused;
}
@keyframes testimonialFloat {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Individual Testimonial Card */
.testimonial-card {
flex: 0 0 380px;
background: linear-gradient(135deg, rgba(25, 35, 55, 0.95) 0%, rgba(35, 45, 65, 0.98) 100%);
border: 1px solid rgba(82, 238, 245, 0.2);
border-radius: 20px;
padding: 2.5rem;
margin: 1rem 0;
backdrop-filter: blur(15px);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
0 0 60px rgba(82, 238, 245, 0.1);
position: relative;
overflow: hidden;
transition: all 0.4s ease;
animation: cardFloat 8s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.testimonial-card:nth-child(1) { --delay: 0s; }
.testimonial-card:nth-child(2) { --delay: 1.5s; }
.testimonial-card:nth-child(3) { --delay: 3s; }
.testimonial-card:nth-child(4) { --delay: 4.5s; }
.testimonial-card:nth-child(5) { --delay: 6s; }
.testimonial-card:nth-child(6) { --delay: 7.5s; }
@keyframes cardFloat {
0%, 100% {
transform: translateY(0px) rotateX(0deg);
}
25% {
transform: translateY(-15px) rotateX(2deg);
}
50% {
transform: translateY(-8px) rotateX(0deg);
}
75% {
transform: translateY(-20px) rotateX(-2deg);
}
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 30%,
rgba(82, 238, 245, 0.1) 50%,
transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.testimonial-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 80px rgba(82, 238, 245, 0.2);
border-color: rgba(82, 238, 245, 0.5);
}
.testimonial-card:hover::before {
opacity: 1;
}
/* Quote Icon */
.quote-icon {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 2.5rem;
color: rgba(82, 238, 245, 0.3);
z-index: 1;
}
/* Customer Info */
.customer-info {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
}
.customer-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.5rem;
font-weight: 600;
margin-right: 1rem;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
transition: all 0.3s ease;
}
.testimonial-card:hover .customer-avatar {
transform: scale(1.1);
box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
}
.customer-details h4 {
font-size: 1.3rem;
color: #52eef5;
margin: 0 0 0.3rem 0;
font-family: 'Inter', sans-serif;
font-weight: 600;
}
.customer-designation {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 0.2rem 0;
font-style: italic;
}
.customer-company {
font-size: 0.9rem;
color: rgba(168, 85, 247, 0.8);
margin: 0;
font-weight: 500;
}
/* Review Content */
.review-content {
position: relative;
z-index: 2;
}
.review-text {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
margin-bottom: 1.5rem;
font-style: italic;
position: relative;
}
.review-text::before {
content: '"';
font-size: 3rem;
color: rgba(82, 238, 245, 0.3);
position: absolute;
left: -1rem;
top: -0.5rem;
font-family: Georgia, serif;
}
.review-text::after {
content: '"';
font-size: 3rem;
color: rgba(82, 238, 245, 0.3);
position: absolute;
right: -0.5rem;
bottom: -1.5rem;
font-family: Georgia, serif;
}
/* Rating Stars */
.rating {
display: flex;
align-items: center;
gap: 0.3rem;
margin-bottom: 1rem;
}
.star {
color: #fbbf24;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.testimonial-card:hover .star {
transform: scale(1.1);
text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
/* Course Badge */
.course-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
border: 1px solid rgba(99, 102, 241, 0.3);
color: #a2b0ff;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
position: relative;
z-index: 2;
}
/* Responsive Design */
@media (max-width: 1200px) {
.testimonial-card {
flex: 0 0 350px;
}
}
@media (max-width: 992px) {
.testimonials-track-container {
height: 500px;
}
.testimonial-card {
flex: 0 0 320px;
padding: 2rem;
}
.testimonials-heading h2 {
font-size: 2.8rem;
}
}
@media (max-width: 768px) {
.testimonials-section {
padding: 4rem 0;
}
.testimonials-track-container {
height: 450px;
}
.testimonial-card {
flex: 0 0 280px;
padding: 1.5rem;
margin: 0.5rem 0;
}
.testimonials-heading h2 {
font-size: 2.4rem;
}
.testimonials-heading p {
font-size: 1.2rem;
}
.customer-info {
flex-direction: row;
text-align: left;
}
.customer-avatar {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.review-text {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.testimonials-container {
padding: 0 1rem;
}
.testimonial-card {
flex: 0 0 260px;
padding: 1.2rem;
}
.testimonials-heading h2 {
font-size: 2rem;
}
}
/* Additional Visual Effects */
.testimonials-section .atmospheric-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.testimonials-section .atmospheric-particles::before,
.testimonials-section .atmospheric-particles::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(82, 238, 245, 0.4);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.testimonials-section .atmospheric-particles::before {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.testimonials-section .atmospheric-particles::after {
top: 60%;
right: 20%;
animation-delay: 3s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) scale(1);
opacity: 0.4;
}
50% {
transform: translateY(-20px) scale(1.2);
opacity: 0.8;
}
}

775
css/training-courses.css Normal file
View File

@@ -0,0 +1,775 @@
/* ===== ENSURE IDENTICAL SECTION WIDTHS ===== */
/* Force both sections to have identical container dimensions with high specificity */
section#custom-training-workflow.container.workflow-section,
section#transform-cta-section.why-choose-us-section.container.benefits-section,
section#transform-cta-section.container {
width: 98% !important;
max-width: 1600px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
box-sizing: border-box !important;
}
/* Additional override to ensure no padding conflicts */
.why-choose-us-section.container,
.benefits-section.container {
padding: 0 2rem !important;
}
/* ===== TRAINING COURSES AND WORKFLOW SECTION STYLES ===== */
/* ===== FEATURED COURSES SECTION STYLES ===== */
/* Training Programs Section Header */
.training-programs-section {
padding: 4rem 0;
position: relative;
}
.training-programs-section .section-heading {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.training-programs-section .section-heading::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%);
}
/* Courses Grid Layout */
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 2.5rem;
margin-top: 2rem;
}
/* Course Card Styling */
.course-card {
background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%);
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
border-radius: 15px;
padding: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 50px rgba(var(--primary-color-rgb), 0.1);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.course-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
animation: shimmer 3s ease-in-out infinite;
}
.course-card:hover {
transform: translateY(-8px);
border-color: rgba(var(--primary-color-rgb), 0.6);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(var(--primary-color-rgb), 0.2);
}
/* Course Video Container */
.course-video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
border-radius: 10px;
margin-bottom: 1.5rem;
background: rgba(0, 0, 0, 0.3);
}
.course-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 10px;
}
/* Course Thumbnail Styles - Static Display */
.course-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
display: block;
position: absolute;
top: 0;
left: 0;
}
/* Course Information */
.course-info {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.course-info h3 {
font-size: 1.6rem;
color: #52eef5;
margin-bottom: 1rem;
font-weight: 600;
}
.course-info p {
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1.1rem;
flex: 1;
}
/* Course Highlights */
.course-highlights {
display: flex;
flex-wrap: nowrap;
gap: 0.6rem;
margin-bottom: 1.5rem;
margin-top: auto;
align-items: center;
min-height: 40px;
flex-shrink: 0;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.course-highlights::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
.course-highlights .highlight-item {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
padding: 6px 10px;
border-radius: 20px;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 0.3rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: background 0.3s ease, transform 0.3s ease;
flex-shrink: 0;
white-space: nowrap;
line-height: 1.2;
}
.course-highlights .highlight-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.course-highlights .highlight-item i {
font-size: 0.8rem;
}
/* Course CTA Button */
.course-card .btn-primary {
width: 100%;
padding: 0.8rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-color-rgb), 0.8) 100%);
border: 2px solid var(--primary-color);
color: #ffffff;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
display: inline-block;
position: relative;
overflow: hidden;
margin-top: auto;
align-self: stretch;
}
.course-card .btn-primary::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.5s ease;
}
.course-card .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4);
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.9) 0%, var(--primary-color) 100%);
}
.course-card .btn-primary:hover::before {
left: 100%;
}
/* Responsive Design for Courses */
@media (max-width: 1024px) {
.courses-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.course-card {
padding: 1.25rem;
}
}
@media (max-width: 768px) {
.courses-grid {
gap: 1.5rem;
}
.course-card {
padding: 1rem;
}
.course-info h3 {
font-size: 1.4rem;
}
.course-info p {
font-size: 1rem;
}
.course-highlights {
gap: 0.5rem;
flex-wrap: nowrap;
overflow-x: auto;
min-height: 45px;
}
.course-highlights .highlight-item {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
white-space: nowrap;
flex-shrink: 0;
}
}
@media (max-width: 480px) {
.course-video-container {
padding-bottom: 60%; /* Slightly taller aspect ratio for mobile */
}
.course-info h3 {
font-size: 1.3rem;
}
.course-highlights {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
min-height: 50px;
overflow-x: auto;
gap: 0.4rem;
padding-bottom: 2px;
}
.course-highlights .highlight-item {
align-self: center;
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
white-space: nowrap;
flex-shrink: 0;
}
.course-card .btn-primary {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
/* Mobile play overlay adjustments */
.play-overlay {
width: 50px;
height: 50px;
font-size: 18px;
}
}
/* ===== END FEATURED COURSES SECTION STYLES ===== */
/* ===== CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */
.workflow-section {
padding: 4rem 0;
background: linear-gradient(135deg, rgba(15, 15, 25, 0.6) 0%, rgba(25, 25, 45, 0.7) 100%);
border-radius: 20px;
margin: 3rem 0;
position: relative;
overflow: hidden;
}
/* Widen the workflow section container for better visual impact */
#custom-training-workflow.container {
width: 98%;
max-width: 1600px;
margin: 0 auto;
padding: 0 2rem;
}
.workflow-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.workflow-intro {
text-align: center;
max-width: 900px;
margin: 0 auto 3rem auto;
position: relative;
z-index: 2;
padding: 0 1rem;
}
.workflow-intro p {
font-size: 1.3rem;
color: var(--text-light);
line-height: 1.7;
font-weight: 400;
}
.workflow-benefits {
margin: 3rem 0;
position: relative;
z-index: 2;
}
.workflow-benefits h3 {
font-size: 2.2rem;
color: #52eef5;
text-align: center;
margin-bottom: 2rem;
font-family: 'VT323', monospace;
letter-spacing: 1px;
}
.benefits-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin: 2rem auto;
max-width: 1200px;
padding: 0 1rem;
}
.benefit-item {
background: rgba(25, 35, 55, 0.5);
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
border-radius: 12px;
padding: 1.5rem;
display: flex;
align-items: flex-start;
gap: 1rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.benefit-item:hover {
transform: translateY(-5px);
border-color: rgba(var(--primary-color-rgb), 0.6);
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
}
.benefit-item i {
font-size: 1.8rem;
color: var(--primary-color);
margin-top: 0.2rem;
flex-shrink: 0;
}
.benefit-item h4 {
font-size: 1.3rem;
color: #52eef5;
margin-bottom: 0.5rem;
font-weight: 600;
}
.benefit-item p {
color: var(--text-light);
font-size: 1rem;
line-height: 1.5;
margin: 0;
}
.workflow-process {
margin: 4rem 0;
position: relative;
z-index: 2;
}
.workflow-process h3 {
font-size: 2.2rem;
color: #52eef5;
text-align: center;
margin-bottom: 3rem;
font-family: 'VT323', monospace;
letter-spacing: 1px;
}
.workflow-visualization {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
}
.workflow-step {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 3rem;
padding: 2rem;
background: rgba(20, 30, 50, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
transition: all 0.3s ease;
backdrop-filter: blur(15px);
}
.workflow-step:hover {
background: rgba(25, 35, 55, 0.6);
border-color: rgba(var(--primary-color-rgb), 0.4);
transform: translateX(10px);
}
.workflow-step:last-child {
margin-bottom: 0;
}
.workflow-step:last-child .step-connector {
display: none;
}
.step-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3);
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.step-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
animation: shimmer 3s ease-in-out infinite;
}
.step-icon i {
font-size: 2rem;
color: #fff;
z-index: 2;
position: relative;
}
.step-content {
flex: 1;
}
.step-content h4 {
font-size: 1.6rem;
color: #52eef5;
margin-bottom: 1rem;
font-weight: 600;
}
.step-content p {
color: var(--text-light);
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.step-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.step-details span {
color: var(--text-muted);
font-size: 0.95rem;
padding-left: 1rem;
position: relative;
}
.step-details span::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
font-size: 1.1rem;
}
.step-connector {
position: absolute;
right: -1rem;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), transparent);
z-index: 3;
}
.step-connector::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 8px solid var(--primary-color);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.workflow-cta {
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(82, 238, 245, 0.1) 100%);
border-radius: 16px;
padding: 3rem 2rem;
text-align: center;
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
position: relative;
z-index: 2;
margin-top: 3rem;
}
/* Widen the transform CTA section for better visual impact */
#transform-cta-section.container {
width: 98%;
max-width: 1600px;
margin: 0 auto;
padding: 0 2rem;
}
/* Enhanced workflow-cta styling for transform section */
#transform-cta-section .workflow-cta {
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(82, 238, 245, 0.1) 100%);
border-radius: 20px;
padding: 4rem 3rem;
text-align: center;
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
position: relative;
z-index: 2;
margin-top: 3rem;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 60px rgba(var(--primary-color-rgb), 0.15);
backdrop-filter: blur(15px);
}
/* Transform section CTA buttons styling */
.transform-cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.transform-cta-buttons .workflow-cta-btn {
margin: 0;
min-width: 280px;
padding: 1rem 2.5rem;
font-size: 1.1rem;
border-radius: 12px;
transition: all 0.3s ease;
}
.transform-cta-buttons .workflow-cta-btn:hover {
transform: translateY(-4px);
}
/* Responsive Design for Workflow Section */
@media (max-width: 1024px) {
.benefits-list {
grid-template-columns: repeat(2, 1fr);
gap: 1.3rem;
}
}
@media (max-width: 768px) {
.workflow-section {
padding: 2.5rem 0;
margin: 2rem 0;
} #custom-training-workflow.container {
width: 92%;
max-width: 1200px;
margin: 0 auto;
}
#transform-cta-section.container {
width: 92%;
max-width: 1200px;
margin: 0 auto;
}
.workflow-intro p {
font-size: 1.1rem;
}
.workflow-benefits h3,
.workflow-process h3 {
font-size: 1.8rem;
} .benefits-list {
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
padding: 0 1rem;
max-width: 100%;
}
.benefit-item {
margin: 0;
padding: 1.25rem;
}
.benefit-item {
padding: 1.2rem;
flex-direction: column;
text-align: center;
gap: 0.8rem;
}
.workflow-step {
padding: 1.5rem;
margin-bottom: 2rem;
flex-direction: column;
text-align: center;
gap: 1rem;
}
.workflow-step:hover {
transform: translateY(-5px);
}
.step-icon {
width: 70px;
height: 70px;
align-self: center;
}
.step-icon i {
font-size: 1.8rem;
}
.step-content {
text-align: center;
}
.step-content h4 {
font-size: 1.4rem;
}
.step-details span {
font-size: 0.9rem;
}
.step-connector {
display: none;
}
.workflow-cta {
padding: 2rem 1.5rem;
}
.cta-content h3 {
font-size: 1.6rem;
}
.cta-content p {
font-size: 1.1rem;
}
.workflow-cta-btn {
padding: 0.7rem 1.5rem;
font-size: 1rem;
max-width: 260px;
width: 100%;
}
.transform-cta-buttons {
gap: 1rem;
margin-top: 2rem;
}
.transform-cta-buttons .workflow-cta-btn {
min-width: 240px;
padding: 0.8rem 1.8rem;
}
}
@media (max-width: 480px) {
.workflow-intro {
margin-bottom: 2rem;
}
.workflow-step {
gap: 1rem;
}
.benefits-list {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Shimmer animation for course cards and step icons */
@keyframes shimmer {
0% {
transform: translateX(-100%) scaleX(1);
}
49.9% {
transform: translateX(0%) scaleX(1);
}
50% {
transform: translateX(0%) scaleX(1);
}
100% {
transform: translateX(100%) scaleX(1);
}
}
/* ===== END CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */

69
css/webinar-video.css Normal file
View File

@@ -0,0 +1,69 @@
/* webinar-video.css - Styling for webinar video cards */
/* Webinar Video Grid - 2x2 layout */
.webinar-videos-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 2.5rem;
padding: 0 2rem;
}
/* Video Card Styling */
.webinar-video-card {
background: rgba(20, 30, 50, 0.6);
border: 1px solid rgba(109, 40, 217, 0.2);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
min-height: 280px; /* Ensure consistent height for the 2x2 layout */
}
.webinar-video-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(109, 40, 217, 0.4);
border-color: rgba(109, 40, 217, 0.6);
}
/* Video Container - Make it cover more of the card */
.webinar-video-card .video-container {
position: relative;
width: 100%;
padding-bottom: 65%; /* Slightly larger aspect ratio for more prominence */
height: 0;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.webinar-video-card .video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Video Info Section */
.webinar-video-card .video-info {
padding: 12px;
text-align: center;
}
.webinar-video-card .video-info h3 {
margin: 0;
font-size: 1.8rem;
font-weight: 400;
color: #52eef5;
}
/* Responsive Layout */
@media (max-width: 900px) {
.webinar-videos-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}

View File

@@ -7,31 +7,28 @@
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Gyannetra — AI Services & Solutions</title>
<!-- CRITICAL CSS - Prevent FOUC -->
<style>
<!-- CRITICAL CSS - Prevent FOUC --> <style>
/* Simplified FOUC prevention */
html {
visibility: visible !important;
}
body {
font-family: 'VT323', monospace;
font-family: 'Space Grotesk', sans-serif;
background: #0a0a1a;
color: #ffffff;
margin: 0;
padding: 0;
opacity: 1;
}
/* Custom styles for hero section font sizes */
#hero .hero-content h1 {
font-size: 2.6rem; /* Decreased size for main heading */
font-size: 4.5rem; /* Main heading with required 4.5rem size */
margin-bottom: 0.4rem; /* Adjusted bottom margin */
line-height: 1.0; /* Lowered and uniform line spacing */
font-weight: 100; /* Lowered font weight to match others */
}
#hero .hero-subheading {
font-weight: 100; /* Required font weight 100 */
} #hero .hero-subheading {
font-size: 1.8rem; /* Increased size for "We deliver" text */
font-weight: 100; /* Lowered font weight */
font-weight: 100; /* Required font weight 100 */
margin-bottom: 0.4rem; /* Adjusted bottom margin */
line-height: 1.0; /* Lowered and uniform line spacing */
color: #52eef5; /* Changed text color to match typewriter text */
@@ -56,11 +53,10 @@
justify-content: center;
transition: opacity 0.5s ease;
}
.loader-text {
color: #52eef5;
font-size: 1.5rem;
font-family: 'VT323', monospace;
font-family: var(--font-mono);
animation: pulse 1.5s ease-in-out infinite;
}
@@ -82,13 +78,27 @@
body.loaded #page-preloader {
opacity: 0;
pointer-events: none;
display: none;
}
display: none; }
</style>
<link rel="preload" href="css/style.css?v=202412291400" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/style.css?v=202412291400"></noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap" rel="stylesheet">
<!-- 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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Simplified Loading Script -->
<script>
// Simple page loading
@@ -416,30 +426,28 @@
</div>
</div>
</section>
<!-- EXPERTISE -->
<section id="expertise" class="container">
<h2 class="section-heading">OUR EXPERTISE</h2>
<div class="exp-grid">
<div class="exp-item">
<img src="assets/predictive.png" alt="Innovation First Icon" />
<h3>Innovation First</h3>
<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">
<img src="assets/technology.png" alt="Technical Excellence Icon" />
<h3>Tech Mastery</h3>
<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">
<img src="assets/analytics (1).png" alt="Results Driven Icon" />
<h3>Results Driven</h3>
<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 focus on delivering measurable business impact through AI solutions that drive real value and ROI.</p>
</div>
<div class="exp-item">
<img src="assets/ai-customer-support.svg" alt="Ongoing Support Icon" />
<h3>Ongoing Support</h3>
<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>
</div>
</div>
@@ -455,7 +463,6 @@
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
<h3>Quick Links</h3>
<ul>
@@ -470,15 +477,6 @@
</ul>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p>
@@ -489,6 +487,15 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
</div>
<div class="footer-bottom">