Update website structure with new CSS organization and file improvements
This commit is contained in:
@@ -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>
|
||||
<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>
|
||||
<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>
|
||||
</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,16 +233,11 @@
|
||||
<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">
|
||||
<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 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>
|
||||
@@ -300,13 +264,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">
|
||||
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
<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 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>
|
||||
</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>
|
||||
<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 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>
|
||||
</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,8 +523,7 @@
|
||||
<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-item">
|
||||
<div class="gn-feature-icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</div>
|
||||
@@ -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>
|
||||
@@ -360,13 +624,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">
|
||||
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -317,13 +315,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">
|
||||
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
|
||||
@@ -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>© 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>
|
||||
|
||||
@@ -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>© 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
|
||||
|
||||
@@ -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>© 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
|
||||
|
||||
@@ -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>
|
||||
@@ -158,7 +173,7 @@
|
||||
<p>Navigating the complex ethical challenges of AI applications in healthcare while ensuring patient privacy and safety</p>
|
||||
<a href="case-studies.html" class="read-more-link">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EXPLORE SOLUTIONS BUTTON -->
|
||||
@@ -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>
|
||||
<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>
|
||||
<div class="footer-bottom">
|
||||
<p>© 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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>© 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -66,10 +66,20 @@
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
|
||||
<!-- 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">
|
||||
|
||||
<!-- 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" />
|
||||
<!-- 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">
|
||||
|
||||
@@ -66,10 +66,20 @@
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
|
||||
<!-- 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">
|
||||
|
||||
<!-- 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" />
|
||||
<!-- 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">
|
||||
|
||||
@@ -66,10 +66,20 @@
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
|
||||
<!-- 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">
|
||||
|
||||
<!-- 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" />
|
||||
<!-- 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">
|
||||
|
||||
@@ -66,10 +66,20 @@
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
|
||||
<!-- 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">
|
||||
|
||||
<!-- 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" />
|
||||
<!-- 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>© 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
|
||||
|
||||
@@ -66,10 +66,20 @@
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC -->
|
||||
<!-- 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">
|
||||
|
||||
<!-- 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" />
|
||||
<!-- 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">
|
||||
|
||||
76
about.html
76
about.html
@@ -92,13 +92,23 @@
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html.loaded {
|
||||
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>
|
||||
|
||||
<div class="about-section">
|
||||
<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><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">
|
||||
|
||||
46
contact.html
46
contact.html
@@ -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>© 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
324
css/01-base-variables.css
Normal 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
1830
css/02-layout-components.css
Normal file
File diff suppressed because it is too large
Load Diff
569
css/03-navigation-header.css
Normal file
569
css/03-navigation-header.css
Normal 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
474
css/04-hero-sections.css
Normal 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
509
css/05-technology-cards.css
Normal 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
609
css/06-forms-buttons.css
Normal 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
825
css/07-media-responsive.css
Normal 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;
|
||||
}
|
||||
}
|
||||
620
css/08-animations-effects.css
Normal file
620
css/08-animations-effects.css
Normal 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
297
css/09-about-page.css
Normal 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;
|
||||
}
|
||||
529
css/10-case-studies-enhanced.css
Normal file
529
css/10-case-studies-enhanced.css
Normal 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; }
|
||||
71
css/card-heading-divider.css
Normal file
71
css/card-heading-divider.css
Normal 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;
|
||||
}
|
||||
}
|
||||
7442
css/css new
7442
css/css new
File diff suppressed because it is too large
Load Diff
@@ -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
37
css/expertise-fix.css
Normal 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
16
css/fix-subheading.css
Normal 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 */
|
||||
}
|
||||
10433
css/style.css
10433
css/style.css
File diff suppressed because it is too large
Load Diff
1069
css/style.css.backup
1069
css/style.css.backup
File diff suppressed because it is too large
Load Diff
416
css/testimonials.css
Normal file
416
css/testimonials.css
Normal 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
775
css/training-courses.css
Normal 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
69
css/webinar-video.css
Normal 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;
|
||||
}
|
||||
}
|
||||
79
index.html
79
index.html
@@ -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 */
|
||||
/* 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 {
|
||||
.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">
|
||||
<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,8 +463,7 @@
|
||||
</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 class="footer-col">
|
||||
<h3>Quick Links</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user