From b9b8aa67c11c8d04df224c3e37667abf566139c2 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Sat, 31 May 2025 17:33:58 +0530
Subject: [PATCH] Improve corporate training page flow and center custom
 training section

- Repositioned custom training workflow section between key training areas and benefits for better page flow
- Added CSS rule to shift custom training section container slightly right for improved visual centering
- Enhanced logical progression: what we offer  how we customize  why choose us  testimonial  CTA
---
 Education/corporate-trainings.html |  247 ++++++-
 css/style.css                      | 1039 +++++++++++++++++++++++++---
 2 files changed, 1180 insertions(+), 106 deletions(-)

diff --git a/Education/corporate-trainings.html b/Education/corporate-trainings.html
index 5250dfe..742f2f6 100644
--- a/Education/corporate-trainings.html
+++ b/Education/corporate-trainings.html
@@ -56,7 +56,7 @@
                 </li>
                 <li class="dropdown"><a href="#" class="nav-link active">Education ▾</a>
                     <ul class="dropdown-menu education-dropdown">
-                        <li><a href="./workshops.html"><div class="dropdown-item-content"><img src="../assets/workshops.png" alt="Workshops Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Workshops</span><span class="item-description">Engaging and interactive sessions designed to introduce key AI concepts and practical skills.</span></div></div></a></li>
+                        <li><a href="./workshops.html"><div class="dropdown-item-content"><img src="../assets/workshops.png" alt="Webinars Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Webinars</span><span class="item-description">Engaging and interactive sessions designed to introduce key AI concepts and practical skills.</span></div></div></a></li>
                         <li><a href="./individual-trainings.html"><div class="dropdown-item-content"><img src="../assets/indi training.png" alt="Individual Training Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Individual Trainings</span><span class="item-description">Personalized learning programs tailored to your specific needs and learning pace.</span></div></div></a></li>
                         <li><a href="./corporate-trainings.html"><div class="dropdown-item-content"><img src="../assets/corpo training.png" alt="Corporate Training Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Corporate Trainings</span><span class="item-description">Customized training solutions to upskill your teams and drive AI adoption within your organization.
                         </span></div></div></a></li>
@@ -70,11 +70,10 @@
 
     <main>
         <section class="hero-section">
-            <div class="container hero-content-columns">
-                <div class="hero-text-content">
+            <div class="container hero-content-columns">                <div class="hero-text-content">
                     <h1>CORPORATE TRAINING</h1>
                     <p>We offer customized AI training programs for businesses, designed to meet your specific needs</p>
-                    <a href="../contact.html" class="btn-primary">Request a Training Proposal</a>
+                    <a href="mailto:education@gyannetra.com" class="btn-primary">Request a Training Proposal</a>
                 </div>
             </div>
         </section>
@@ -87,12 +86,11 @@
                         <img src="../assets/mlng.png" alt="AI Fundamentals Icon">
                     </div>
                     <h3>AI Fundamentals</h3>
-                    <p>Comprehensive introduction to AI concepts, machine learning basics, and practical applications in business contexts. Tailored for all experience levels.</p>
-                    <div class="program-highlights">
+                    <p>Comprehensive introduction to AI concepts, machine learning basics, and practical applications in business contexts. Tailored for all experience levels.</p>                    <div class="program-highlights">
                         <span class="highlight-item"><i class="fas fa-users"></i> For all teams</span>
                         <span class="highlight-item"><i class="fas fa-calendar"></i> 2-5 days</span>
                     </div>
-                    <a href="../contact.html" class="btn-primary">Learn More</a>
+                    <a href="mailto:education@gyannetra.com" class="btn-primary">Learn More</a>
                 </div>
                 
                 <div class="benefit-card">
@@ -100,12 +98,11 @@
                         <img src="../assets/gen ai.png" alt="Specific AI Technologies Icon">
                     </div>
                     <h3>Generative AI for Business</h3>
-                    <p>Focused training on generative AI tools and technologies that can transform content creation, product development, and customer experiences.</p>
-                    <div class="program-highlights">
+                    <p>Focused training on generative AI tools and technologies that can transform content creation, product development, and customer experiences.</p>                    <div class="program-highlights">
                         <span class="highlight-item"><i class="fas fa-users"></i> Technical teams</span>
                         <span class="highlight-item"><i class="fas fa-calendar"></i> 3-7 days</span>
                     </div>
-                    <a href="../contact.html" class="btn-primary">Learn More</a>
+                    <a href="mailto:education@gyannetra.com" class="btn-primary">Learn More</a>
                 </div>
                 
                 <div class="benefit-card">
@@ -113,12 +110,11 @@
                         <img src="../assets/education-cap-icon.svg" alt="AI Ethics Icon">
                     </div>
                     <h3>AI Ethics for Business</h3>
-                    <p>Understanding ethical considerations, responsible AI implementation, and governance frameworks to ensure your AI initiatives align with company values.</p>
-                    <div class="program-highlights">
+                    <p>Understanding ethical considerations, responsible AI implementation, and governance frameworks to ensure your AI initiatives align with company values.</p>                    <div class="program-highlights">
                         <span class="highlight-item"><i class="fas fa-users"></i> Leadership</span>
                         <span class="highlight-item"><i class="fas fa-calendar"></i> 1-3 days</span>
                     </div>
-                    <a href="../contact.html" class="btn-primary">Learn More</a>
+                    <a href="mailto:education@gyannetra.com" class="btn-primary">Learn More</a>
                 </div>
                 
                 <div class="benefit-card">
@@ -126,12 +122,143 @@
                         <img src="../assets/ai agent.png" alt="AI Implementation Icon">
                     </div>
                     <h3>AI Implementation Strategy</h3>
-                    <p>Strategic training for leadership on how to effectively implement AI solutions, manage change, and measure ROI from AI initiatives.</p>
-                    <div class="program-highlights">
+                    <p>Strategic training for leadership on how to effectively implement AI solutions, manage change, and measure ROI from AI initiatives.</p>                    <div class="program-highlights">
                         <span class="highlight-item"><i class="fas fa-users"></i> Executives</span>
                         <span class="highlight-item"><i class="fas fa-calendar"></i> 2-4 days</span>
                     </div>
-                    <a href="../contact.html" class="btn-primary">Learn More</a>
+                    <a href="mailto:education@gyannetra.com" class="btn-primary">Learn More</a>
+                </div>
+            </div>        </section>
+
+        <section id="custom-training-workflow" class="container workflow-section">
+            <h2 class="section-heading">CUSTOM TRAINING MODULES: TAILORED TO YOUR WORKFLOW</h2>
+            <div class="workflow-intro">
+                <p>At Gyannetra, we believe that effective corporate training goes beyond generic content. Our custom training modules are meticulously designed to integrate with your existing workflows, addressing your unique business challenges and maximizing the relevance and impact of every learning session.</p>
+            </div>
+
+            <div class="workflow-benefits">
+                <h3>Why Choose Custom Training Modules?</h3>
+                <div class="benefits-list">
+                    <div class="benefit-item">
+                        <i class="fas fa-bullseye"></i>
+                        <div>
+                            <h4>Direct Applicability</h4>
+                            <p>Training content mirrors your actual work scenarios and business processes</p>
+                        </div>
+                    </div>
+                    <div class="benefit-item">
+                        <i class="fas fa-rocket"></i>
+                        <div>
+                            <h4>Higher Engagement</h4>
+                            <p>Employees connect better with familiar contexts and real-world examples</p>
+                        </div>
+                    </div>
+                    <div class="benefit-item">
+                        <i class="fas fa-chart-growth"></i>
+                        <div>
+                            <h4>Improved ROI</h4>
+                            <p>Immediate implementation leads to faster results and measurable business impact</p>
+                        </div>
+                    </div>
+                    <div class="benefit-item">
+                        <i class="fas fa-puzzle-piece"></i>
+                        <div>
+                            <h4>Seamless Integration</h4>
+                            <p>Training seamlessly fits into your existing workflows without disruption</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="workflow-process">
+                <h3>Our Custom Training Development Process</h3>
+                <div class="workflow-visualization">
+                    <div class="workflow-step" data-step="1">
+                        <div class="step-icon">
+                            <i class="fas fa-search"></i>
+                        </div>
+                        <div class="step-content">
+                            <h4>Needs Assessment</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>
+                    </div>
+
+                    <div class="workflow-step" data-step="2">
+                        <div class="step-icon">
+                            <i class="fas fa-pencil-alt"></i>
+                        </div>
+                        <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>
+                            </div>
+                        </div>
+                        <div class="step-connector"></div>
+                    </div>
+
+                    <div class="workflow-step" data-step="3">
+                        <div class="step-icon">
+                            <i class="fas fa-code"></i>
+                        </div>
+                        <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>
+                            </div>
+                        </div>
+                        <div class="step-connector"></div>
+                    </div>
+
+                    <div class="workflow-step" data-step="4">
+                        <div class="step-icon">
+                            <i class="fas fa-chalkboard-teacher"></i>
+                        </div>
+                        <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>
+                            </div>
+                        </div>
+                        <div class="step-connector"></div>
+                    </div>
+
+                    <div class="workflow-step" data-step="5">
+                        <div class="step-icon">
+                            <i class="fas fa-life-ring"></i>
+                        </div>
+                        <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>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="workflow-cta">
+                <div class="cta-content">
+                    <h3>Ready to Transform Your Team's AI Capabilities?</h3>
+                    <p>Let us design a custom training solution that perfectly aligns with your business workflows and objectives.</p>
+                    <a href="mailto:education@gyannetra.com" class="btn-primary workflow-cta-btn">Request a Custom Training Proposal</a>
                 </div>
             </div>
         </section>
@@ -167,8 +294,7 @@
                     <h3>ROI-Focused Training</h3>
                     <p>Maximize your investment with training that delivers measurable business outcomes and practical implementation skills.</p>
                 </div>
-            </div>
-        </section>
+            </div>        </section>
 
         <section id="testimonial" class="container">
             <div class="testimonial-container">
@@ -177,10 +303,8 @@
                     <footer>- Operations Manager at a Fortune 500 Company</footer>
                 </blockquote>
             </div>
-        </section>
-
-        <section id="request-proposal" class="container text-center">
-            <a href="../contact.html" class="btn-primary">REQUEST A CORPORATE TRAINING PROPOSAL</a>
+        </section>        <section id="request-proposal" class="container text-center">
+            <a href="mailto:education@gyannetra.com" class="btn-primary">REQUEST A CORPORATE TRAINING PROPOSAL</a>
         </section>
     </main>
 
@@ -204,15 +328,14 @@
             <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>Contact Us</h3>
           <ul>
-            <li><p><i class="fas fa-map-marker-alt"></i> 123 AI Street, Innovation City, Techland</p></li>
-            <li><p><i class="fas fa-phone"></i> +1 (555) 123-4567</p></li>
+            <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">
+        </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>
@@ -234,6 +357,76 @@
     // Add any page-specific JS here if needed
     document.addEventListener('DOMContentLoaded', function() {
       // Initialize any scripts needed for this page
+      
+      // Custom Training Workflow Interactive Features
+      const workflowSteps = document.querySelectorAll('.workflow-step');
+      
+      // Add scroll-triggered animation
+      const observerOptions = {
+        threshold: 0.3,
+        rootMargin: '0px 0px -50px 0px'
+      };
+      
+      const stepObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.style.opacity = '1';
+            entry.target.style.transform = 'translateX(0)';
+            
+            // Add staggered animation delay
+            const stepNumber = entry.target.dataset.step;
+            entry.target.style.animationDelay = `${stepNumber * 0.2}s`;
+            entry.target.classList.add('animate-in');
+          }
+        });
+      }, observerOptions);
+      
+      // Initialize workflow steps with initial hidden state
+      workflowSteps.forEach((step, index) => {
+        step.style.opacity = '0';
+        step.style.transform = 'translateX(-50px)';
+        step.style.transition = 'all 0.6s ease-out';
+        stepObserver.observe(step);
+        
+        // Add click interaction for mobile users
+        step.addEventListener('click', function() {
+          // Add a subtle pulse effect when clicked
+          this.style.transform = 'scale(1.02)';
+          setTimeout(() => {
+            this.style.transform = 'scale(1)';
+          }, 200);
+        });
+      });
+      
+      // Add floating animation to step icons
+      const stepIcons = document.querySelectorAll('.step-icon');
+      stepIcons.forEach((icon, index) => {
+        icon.style.animation = `float 3s ease-in-out infinite`;
+        icon.style.animationDelay = `${index * 0.5}s`;
+      });
+      
+      // Add CSS for floating animation
+      const style = document.createElement('style');
+      style.textContent = `
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-10px); }
+        }
+        .animate-in {
+          animation: slideInLeft 0.6s ease-out forwards;
+        }
+        @keyframes slideInLeft {
+          from {
+            opacity: 0;
+            transform: translateX(-50px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+      `;
+      document.head.appendChild(style);
     });
   </script>
   <script src="../js/main.js" defer></script>
diff --git a/css/style.css b/css/style.css
index 330587c..d12a2f4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3007,7 +3007,7 @@ h1,h2,h3,h4,h5,h6 {
 
 .btn-book-consultation {
     display: inline-block;
-    padding: 0.8rem 2rem;
+    padding: 0.8rem 1.5rem;
     background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%);
     border: none;
     border-radius: 8px;
@@ -3191,9 +3191,7 @@ h1,h2,h3,h4,h5,h6 {
     font-size: 1.7rem;
     color: #52eef5;
     margin-bottom: 0.75rem;
-    line-height: 1.3;
-    background: none;
-    gap: 1rem;
+    font-weight: 600;
 }
 
 .discuss-project-cta h2 {
@@ -3322,12 +3320,13 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .feature-card h3 {
-    font-size: 1.8em;
-    margin-bottom: 10px;
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: #52eef5;
 }
 
 .feature-card p {
-    font-size: 1.2em;
+    font-size: 1.2rem;
     color: #ccc;
 }
 
@@ -3487,9 +3486,9 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .solution-item h3 {    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
     color: var(--fg);
+    margin-bottom: 0.5rem;
+    font-weight: 600;
 }
 
 .solution-item p {
@@ -3524,7 +3523,7 @@ h1,h2,h3,h4,h5,h6 {
 .gyannetra-advantage-section .advantage-list li::before {
     content: "•";
     color: #3498db;
-    font-size: 1.8em;
+    font-size: 1.8rem;
     position: absolute;
     left: 0;
     top: 0.65em;
@@ -3539,7 +3538,7 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .insight-item {
-    background: rgba(20, 20, 40, 0.6);
+    background: rgba(20, 30, 50, 0.6);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 12px;
@@ -4079,41 +4078,373 @@ body {
             justify-content: space-between !important;
         }
     }
+
+
+/* ===== BACK TO TOP BUTTON ===== */
+.back-to-top-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    z-index: 1000;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    opacity: 0;
+    visibility: hidden;
 }
 
-/* ===== WEBINAR VIDEOS SECTION ===== */
-/* Webinar Videos Section */
-.webinar-videos-section {
-    padding: 80px 0;
-    background-color: #f8f9fa;
+.back-to-top-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
 }
 
+@media (max-width: 768px) {
+    .back-to-top-btn {
+        bottom: 20px;
+        right: 20px;
+        width: 45px;
+        height: 45px;
+        font-size: 18px;
+    }
+}
+
+/* ===== WEBINAR SECTIONS STYLES ===== */
+
+/* Hero Section for Webinars */
+#webinars-hero {
+    background: linear-gradient(135deg, rgba(25, 25, 45, 0.9) 0%, rgba(35, 35, 55, 0.95) 100%);
+    padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+#webinars-hero::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;
+}
+
+#webinars-hero h1 {
+    font-size: 3.5rem;
+    color: #52eef5;
+    margin-bottom: 1.5rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-shadow: 0 0 20px rgba(82, 238, 245, 0.5);
+    animation: pulseGlow 3s ease-in-out infinite alternate;
+}
+
+#webinars-hero p {
+    font-size: 1.4rem;
+    color: var(--text-light);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+/* Main Webinar Cards - Reduced padding for smaller height */
+.webinar-main-card {
+    background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%);
+    border-radius: 20px;
+    padding: 1.5rem;
+    margin: 0.25rem 0;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(var(--primary-color-rgb), 0.1);
+    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.webinar-main-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;
+}
+
+.webinar-main-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(var(--primary-color-rgb), 0.2);
+}
+
+/* Webinar Card Headers - Reduced margins for compact layout */
+.webinar-card-header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.3);
+    padding-bottom: 1rem;
+}
+
+.webinar-card-header h2 {
+    font-size: 2.5rem;
+    color: #52eef5;
+    margin-bottom: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.webinar-card-header h2 i {
+    color: var(--primary-color);
+    font-size: 2.2rem;
+    text-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.6);
+}
+
+.webinar-card-header p {
+    font-size: 1.2rem;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+/* Upcoming Webinars Content - Reduced gap between items */
+.upcoming-webinars-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+}
+
+.upcoming-webinar-item {
+    background: rgba(20, 30, 50, 0.6);
+    border-radius: 15px;
+    padding: 1.2rem;
+    display: flex;
+    gap: 1.5rem;
+    align-items: flex-start;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.upcoming-webinar-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(180deg, var(--primary-color), var(--primary-color-hover));
+    border-radius: 0 2px 2px 0;
+}
+
+.upcoming-webinar-item:hover {
+    background: rgba(25, 35, 55, 0.9);
+    transform: translateY(-5px);
+    box-shadow: 0 5px 20px rgba(var(--primary-color-rgb), 0.2);
+}
+
+/* Date Badge - Reduced padding for more compact appearance */
+.webinar-date-badge {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
+    border-radius: 12px;
+    padding: 0.8rem;
+    text-align: center;
+    min-width: 80px;
+    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
+    flex-shrink: 0;
+}
+
+.webinar-date-badge .date {
+    display: block;
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: #fff;
+    line-height: 1;
+}
+
+.webinar-date-badge .year {
+    display: block;
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-top: 0.2rem;
+}
+
+/* Webinar Details */
+.webinar-details {
+    flex: 1;
+}
+
+.webinar-details h3 {
+    font-size: 1.8rem;
+    color: #52eef5;
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+
+.webinar-meta {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.webinar-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-muted);
+    font-size: 1rem;
+}
+
+.webinar-meta i {
+    color: var(--primary-color);
+    font-size: 0.9rem;
+}
+
+.webinar-description {
+    color: var(--text-light);
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+    font-size: 1.1rem;
+}
+
+.webinar-takeaways {
+    margin-bottom: 2rem;
+}
+
+.webinar-takeaways h4 {
+    color: #52eef5;
+    font-size: 1.3rem;
+    margin-bottom: 0.8rem;
+    font-weight: 600;
+}
+
+.webinar-takeaways ul {
+    list-style: none;
+    padding: 0;
+}
+
+.webinar-takeaways li {
+    color: var(--text-light);
+    margin-bottom: 0.5rem;
+    padding-left: 1.5rem;
+    position: relative;
+    line-height: 1.5;
+}
+
+.webinar-takeaways li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--primary-color);
+    font-weight: bold;
+    font-size: 1.1rem;
+}
+
+/* Webinar Actions */
+.webinar-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.register-btn, .add-calendar-btn {
+    padding: 0.8rem 1.5rem;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.register-btn {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
+    color: #fff;
+    border: none;
+    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
+}
+
+.register-btn:hover {
+    background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color));
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4);
+    color: #fff;
+}
+
+.add-calendar-btn {
+    background: transparent;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+}
+
+.add-calendar-btn:hover {
+    background: var(--primary-color);
+    color: #fff;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
+}
+
+/* Already Done Webinars (Video Grid) */
 .webinar-videos-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 30px;
-    margin-top: 60px;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+    margin-top: 1rem;
 }
 
 .webinar-video-card {
-    background: white;
+    background: rgba(20, 30, 50, 0.6);
     border-radius: 15px;
-    overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    padding: 1.5rem;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+    transition: all 0.3s ease;
     position: relative;
+    overflow: hidden;
+}
+
+.webinar-video-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;
 }
 
 .webinar-video-card:hover {
+    background: rgba(25, 35, 55, 0.8);
     transform: translateY(-5px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.2);
 }
 
 .video-container {
     position: relative;
     width: 100%;
-    height: 200px;
+    height: 0;
+    padding-bottom: 56.25%; /*  16:9 aspect ratio */
+    margin-bottom: 1.5rem;
+    border-radius: 10px;
     overflow: hidden;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }
 
 .video-container iframe {
@@ -4123,75 +4454,194 @@ body {
     width: 100%;
     height: 100%;
     border: none;
-    border-radius: 15px 15px 0 0;
-}
-
-.video-info {
-    padding: 25px;
+    border-radius: 10px;
 }
 
 .video-info h3 {
     font-size: 1.4rem;
+    color: #52eef5;
+    margin-bottom: 0.8rem;
     font-weight: 600;
-    color: #333;
-    margin-bottom: 12px;
     line-height: 1.3;
 }
 
 .video-info p {
-    color: #666;
-    font-size: 0.95rem;
-    line-height: 1.6;
-    margin-bottom: 15px;
+    color: var(--text-light);
+    line-height: 1.5;
+    margin-bottom: 1rem;
+    font-size: 1.05rem;
 }
 
 .video-duration {
     display: inline-block;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 5px 12px;
-    border-radius: 20px;
-    font-size: 0.85rem;
-    font-weight: 500;
+    background: rgba(var(--primary-color-rgb), 0.2);
+    color: var(--primary-color);
+    padding: 0.3rem 0.8rem;
+    border-radius: 15px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
 }
 
-/* Responsive Design for Webinar Videos */
-/* Large Desktop: 4 columns (default above 1200px) */
+/* Section Spacing - Reduced for better layout */
+.upcoming-webinars-section {
+    padding: 0.5rem 0;
+    margin: 0;
+    position: relative;
+}
 
-/* Medium Desktop/Large Tablet: 3 columns */
-@media (max-width: 1200px) {
-    .webinar-videos-grid {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 25px;
+.webinar-videos-section {
+    padding: 0.5rem 0;
+    margin: 0;
+    position: relative;
+}
+
+/* Remove additional gap between sections */
+.webinar-videos-section::before {
+    display: none;
+}
+
+/* Shimmer Animation */
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
     }
 }
 
-/* Tablet/Medium Screens: 2 columns */
-@media (max-width: 900px) {
-    .webinar-videos-grid {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 20px;
+/* Pulse Glow Animation */
+@keyframes pulseGlow {
+    0% {
+        text-shadow: 0 0 20px rgba(82, 238, 245, 0.5);
+    }
+    100% {
+        text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3);
     }
 }
 
-/* Mobile/Small Screens: 1 column */
-@media (max-width: 600px) {
+/* Responsive Design for Webinars */
+@media (max-width: 1024px) {
+    .webinar-videos-grid {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .webinar-meta {
+        gap: 1rem;
+    }
+}
+
+@media (max-width: 768px) {
+    #webinars-hero h1 {
+        font-size: 2.8rem;
+    }
+    
+    #webinars-hero p {
+        font-size: 1.2rem;
+    }
+    
+    .webinar-main-card {
+        padding: 1.5rem;
+        margin: 2rem 0 3rem 0;
+    }
+      .already-done-webinars-card {
+        margin-top: 2rem !important;
+    }
+    
     .webinar-videos-section {
-        padding: 60px 0;
+        padding: 3rem 0 1.5rem 0;
+        margin-top: 2rem;
+    }
+    
+    .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: 20px;
-        margin-top: 40px;
+        gap: 1.5rem;
     }
     
-    .video-container {
-        height: 220px;
+    .webinar-video-card {
+        padding: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    #webinars-hero {
+        padding: 2.5rem 0;
     }
     
-    .video-info {
-        padding: 20px;
+    #webinars-hero h1 {
+        font-size: 2.2rem;
+        letter-spacing: 1px;
+    }
+    
+    #webinars-hero p {
+        font-size: 1.1rem;
+    }
+    
+    .webinar-main-card {
+        padding: 1rem;
+        margin: 1.5rem 0 2.5rem 0;
+    }
+      .already-done-webinars-card {
+        margin-top: 1.5rem !important;
+    }
+    
+    .webinar-videos-section {
+        padding: 2rem 0 1rem 0;
+        margin-top: 1.5rem;
+    }
+    
+    .webinar-card-header {
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+    }
+    
+    .webinar-card-header h2 {
+        font-size: 1.8rem;
+    }
+    
+    .upcoming-webinar-item {
+        padding: 1rem;
+    }
+    
+    .webinar-details h3 {
+        font-size: 1.5rem;
+    }
+    
+    .webinar-takeaways {
+        margin-bottom: 1.5rem;
     }
     
     .video-info h3 {
@@ -4199,26 +4649,457 @@ body {
     }
 }
 
-/* Extra Small Mobile: 1 column with optimizations */
-@media (max-width: 480px) {
-    .webinar-videos-grid {
-        grid-template-columns: 1fr;
-        gap: 15px;
+/* ===== CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */
+
+.workflow-section {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%);
+    border-radius: 20px;
+    margin: 3rem 0;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Shift workflow section container slightly to the right for better centering */
+#custom-training-workflow.container {
+    margin-left: auto;
+    margin-right: calc(50% - 580px - 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;
+}
+
+.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(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.benefit-item {
+    background: rgba(25, 35, 55, 0.8);
+    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 8px 25px rgba(var(--primary-color-rgb), 0.2);
+}
+
+.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;
+}
+
+.workflow-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 2rem;
+    margin-bottom: 3rem;
+    padding: 2rem;
+    background: rgba(20, 30, 50, 0.7);
+    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.9);
+    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;
+}
+
+.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;
+}
+
+.cta-content h3 {
+    font-size: 2rem;
+    color: #52eef5;
+    margin-bottom: 1rem;
+    font-family: 'VT323', monospace;
+}
+
+.cta-content p {
+    font-size: 1.2rem;
+    color: var(--text-light);
+    margin-bottom: 2rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.workflow-cta-btn {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
+    color: #fff;
+    padding: 1rem 2.5rem;
+    border-radius: 12px;
+    text-decoration: none;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: inline-block;
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.workflow-cta-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.4);
+    background: linear-gradient(135deg, var(--primary-color-hover) 0%, var(--primary-color) 100%);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    text-decoration: none;
+}
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
     }
-    
-    .video-container {
-        height: 200px;
+    100% {
+        transform: translateX(100%);
     }
-    
-    .video-info {
-        padding: 18px;
+}
+
+/* Responsive Design for Workflow Section */
+@media (max-width: 768px) {
+    .workflow-section {
+        padding: 2.5rem 0;
+        margin: 2rem 0;
     }
-    
-    .video-info h3 {
+
+    .workflow-intro p {
         font-size: 1.1rem;
     }
-    
-    .video-info p {
+
+    .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 {
+        flex-direction: column;
+        gap: 1.5rem;
+        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-content p {
+        font-size: 1rem;
+    }
+
+    .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.8rem 2rem;
+        font-size: 1.1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .workflow-intro {
+        margin-bottom: 2rem;
+    }
+
+    .workflow-benefits h3,
+    .workflow-process h3 {
+        font-size: 1.6rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .benefit-item {
+        padding: 1rem;
+    }
+
+    .benefit-item h4 {
+        font-size: 1.2rem;
+    }
+
+    .benefit-item p {
+        font-size: 0.95rem;
+    }
+
+    .workflow-step {
+        padding: 1.2rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .step-icon {
+        width: 60px;
+        height: 60px;
+    }
+
+    .step-icon i {
+        font-size: 1.5rem;
+    }
+
+    .step-content h4 {
+        font-size: 1.3rem;
+    }
+
+    .step-details span {
         font-size: 0.9rem;
     }
-}
\ No newline at end of file
+
+    .workflow-cta {
+        padding: 1.5rem 1rem;
+    }
+
+    .cta-content h3 {
+        font-size: 1.4rem;
+    }
+
+    .workflow-cta-btn {
+        padding: 0.7rem 1.5rem;
+        font-size: 1rem;
+    }
+}
+
+/* ===== END CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */
\ No newline at end of file