pagination added in artical and other changes

src/components/Articles.tsx

@@ -134,7 +134,25 @@ const articles = [
     featured: false,
     views: '1.5k',
     likes: 28
-  }
+  },
+  {
+    id: '7',
+    slug: 'strategic-thinking-frameworks',
+    title: 'Strategic Thinking Frameworks for Modern Leaders',
+    excerpt: 'Master strategic thinking with proven frameworks that help leaders anticipate challenges and seize opportunities.',
+    content: 'Strategic thinking is a critical skill for leaders navigating complex business environments...',
+    author: 'Dr. Amanda Foster',
+    authorTitle: 'Strategic Leadership Coach',
+    authorAvatar: 'https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?w=150&h=150&fit=crop&crop=face',
+    date: '2024-02-05',
+    readTime: '11 min read',
+    category: 'Strategy',
+    tags: ['Strategic Thinking', 'Frameworks', 'Decision Making', 'Planning'],
+    thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop',
+    featured: false,
+    views: '2.1k',
+    likes: 39
+  },
 ];
 
 export function Articles() {
@@ -147,7 +165,9 @@ export function Articles() {
   const [sortBy, setSortBy] = useState('Most Recent');
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [currentPage, setCurrentPage] = useState(1);
-  const articlesPerPage = 6;
+  const articlesPerPage = 4;
+  const containerRef = useRef<HTMLDivElement>(null);
+  
 
   // Get unique values for filters
   const categories = ['All Categories', ...Array.from(new Set(articles.map(article => article.category)))];
@@ -172,8 +192,8 @@ export function Articles() {
     const matchesCategory = selectedCategory === 'All Categories' || article.category === selectedCategory;
     const matchesAuthor = selectedAuthor === 'All Authors' || article.author === selectedAuthor;
 
-    // Read time filter
+    // FIXED: Read time filter - properly parse the read time
-    const readTimeMinutes = parseInt(article.readTime);
+    const readTimeMinutes = parseInt(article.readTime.replace(' min read', '')) || 0;
     const matchesReadTime = selectedReadTime === 'All Read Times' ||
       (selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
       (selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
@@ -201,7 +221,8 @@ export function Articles() {
       case 'title':
         return a.title.localeCompare(b.title);
       case 'readTime':
-        return parseInt(a.readTime) - parseInt(b.readTime);
+        // FIXED: Sort by read time - properly parse the values
+        return (parseInt(a.readTime.replace(' min read', '')) || 0) - (parseInt(b.readTime.replace(' min read', '')) || 0);
       case 'popular':
         return parseInt(b.views) - parseInt(a.views);
       default:
@@ -320,8 +341,7 @@ export function Articles() {
               <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                 <button
                   onClick={() => setViewMode('grid')}
-                  className={`p-2 transition-colors ${
+                  className={`p-2 transition-colors ${viewMode === 'grid'
-                    viewMode === 'grid' 
                       ? 'text-white'
                       : 'bg-white text-gray-600 hover:bg-gray-50'
                     }`}
@@ -334,8 +354,7 @@ export function Articles() {
                 </button>
                 <button
                   onClick={() => setViewMode('list')}
-                  className={`p-2 transition-colors ${
+                  className={`p-2 transition-colors ${viewMode === 'list'
-                    viewMode === 'list' 
                       ? 'text-white'
                       : 'bg-white text-gray-600 hover:bg-gray-50'
                     }`}
@@ -521,7 +540,7 @@ export function Articles() {
                 <>
                   {/* Grid View */}
                   {viewMode === 'grid' && (
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                       {currentArticles.map((article) => (
                         <Card
                           key={article.id}
@@ -657,29 +676,71 @@ export function Articles() {
 
                   {/* Pagination */}
                   {totalPages > 1 && (
-                    <div className="flex items-center justify-center gap-4 mt-12">
+                    <div className="flex items-center justify-center gap-2">
                       <Button
                         variant="outline"
-                        onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
+                        size="sm"
+                        onClick={() => {
+                          setCurrentPage(prev => Math.max(1, prev - 1));
+                          containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }}
                         disabled={currentPage === 1}
-                        className="text-body"
+                        className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
                       >
-                        <ChevronLeft className="w-4 h-4 mr-2" />
+                        <ChevronLeft className="w-4 h-4" />
                         Previous
                       </Button>
 
-                      <span className="text-body">
+                      <div className="flex items-center gap-1">
-                        Page {currentPage} of {totalPages}
+                        {Array.from({ length: totalPages }, (_, i) => {
-                      </span>
+                          const page = i + 1;
+                          // Show limited pages for better UX
+                          if (totalPages > 7) {
+                            const showPage =
+                              page === 1 ||
+                              page === totalPages ||
+                              (page >= currentPage - 1 && page <= currentPage + 1);
+
+                            if (!showPage) {
+                              if (page === currentPage - 2 || page === currentPage + 2) {
+                                return <span key={page} className="px-2">...</span>;
+                              }
+                              return null;
+                            }
+                          }
+
+                          return (
+                            <Button
+                              key={page}
+                              variant={currentPage === page ? "default" : "outline"}
+                              size="sm"
+                              onClick={() => {
+                                setCurrentPage(page);
+                                containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                              }}
+                              className={`min-w-10 ${currentPage === page
+                                ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                                }`}
+                            >
+                              {page}
+                            </Button>
+                          );
+                        })}
+                      </div>
 
                       <Button
                         variant="outline"
-                        onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
+                        size="sm"
+                        onClick={() => {
+                          setCurrentPage(prev => Math.min(totalPages, prev + 1));
+                          containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }}
                         disabled={currentPage === totalPages}
-                        className="text-body"
+                        className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
                       >
                         Next
-                        <ChevronRight className="w-4 h-4 ml-2" />
+                        <ChevronRight className="w-4 h-4" />
                       </Button>
                     </div>
                   )}

src/components/LearningFacilityNew.tsx

@@ -735,142 +735,6 @@ export function LearningFacilityNew() {
                 </div>
             </section>
 
-            {/* Cultural Theme Images Section */}
-            <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-                <div className="container mx-auto section-margin-x">
-                    <div className="max-w-7xl mx-auto">
-                        {/* Header */}
-                        <div className="text-center mb-16">
-                            <div className="branded-tag-system mb-6 justify-center">
-                                <div className="dot"></div>
-                                <span className="text">Cultural Experience</span>
-                            </div>
-                            <h2 className="text-h2 mb-6">
-                                Journey Through Cultural Heritage
-                            </h2>
-                            <p className="text-body-lg text-muted max-w-3xl mx-auto">
-                                Experience the rich cultural tapestry woven throughout our leadership center. Each space tells a story of ancient wisdom, spiritual foundations, and timeless traditions that inspire modern leaders.
-                            </p>
-                        </div>
-
-                        {/* Cultural Images Carousel */}
-                        <div className="relative">
-                            {/* Navigation Controls */}
-                            <div className="flex gap-2 justify-center mb-8">
-                                <button
-                                    onClick={() => {
-                                        const container = document.getElementById('cultural-carousel');
-                                        if (container) {
-                                            container.scrollBy({ left: -400, behavior: 'smooth' });
-                                        }
-                                    }}
-                                    className="flex items-center justify-center w-12 h-12 bg-white border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:text-white transition-all duration-300 group"
-                                    aria-label="Previous cultural images"
-                                >
-                                    <ChevronLeft className="w-6 h-6" />
-                                </button>
-                                <button
-                                    onClick={() => {
-                                        const container = document.getElementById('cultural-carousel');
-                                        if (container) {
-                                            container.scrollBy({ left: 400, behavior: 'smooth' });
-                                        }
-                                    }}
-                                    className="flex items-center justify-center w-12 h-12 bg-white border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:text-white transition-all duration-300 group"
-                                    aria-label="Next cultural images"
-                                >
-                                    <ChevronRight className="w-6 h-6" />
-                                </button>
-                            </div>
-
-                            {/* Horizontal Scrolling Images */}
-                            <div
-                                id="cultural-carousel"
-                                className="flex overflow-x-auto scrollbar-hide gap-6 pb-4"
-                                style={{ scrollSnapType: 'x mandatory' }}
-                            >
-                                {[
-                                    {
-                                        title: "Meditation Spaces",
-                                        description: "Dedicated areas within our leadership center designed for mindful reflection and inner contemplation, where leaders find clarity and purpose.",
-                                        image: "https://images.unsplash.com/photo-1643793427422-d28ccb5f1f69?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhbmNpZW50JTIwaW5kaWFuJTIwd2lzZG9tJTIwbWVkaXRhdGlvbnxlbnwxfHx8fDE3NTY4OTU1NTZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-                                        category: "Spiritual Spaces"
-                                    },
-                                    {
-                                        title: "Cultural Architecture",
-                                        description: "Architectural elements throughout our center that pay homage to classical Indian design, creating inspiring spaces for leadership development.",
-                                        image: "https://images.unsplash.com/photo-1704788564069-d54cab4169aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFkaXRpb25hbCUyMGluZGlhbiUyMGFydCUyMHBhdHRlcm5zfGVufDF8fHx8MTc1Njg5NTU5NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-                                        category: "Architecture"
-                                    },
-                                    {
-                                        title: "Inspirational Sculptures",
-                                        description: "Carefully curated sculptures and artistic pieces that embody leadership virtues and spiritual wisdom, strategically placed throughout our facility.",
-                                        image: "https://images.unsplash.com/photo-1566890910598-c5768889e83e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoaW5kdSUyMGRlaXRpZXMlMjBzY3VscHR1cmUlMjBhcnR8ZW58MXx8fHwxNzU2ODk1NTcxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-                                        category: "Art & Culture"
-                                    },
-                                    {
-                                        title: "Wisdom Library",
-                                        description: "A collection of ancient texts and modern leadership resources that bridge timeless wisdom with contemporary leadership challenges.",
-                                        image: "https://images.unsplash.com/photo-1714250175994-008837c7e291?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhbmNpZW50JTIwaW5kaWFuJTIwbWFudXNjcmlwdHMlMjB3aXNkb218ZW58MXx8fHwxNzU2ODk1NTgxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-                                        category: "Learning Resources"
-                                    },
-                                    {
-                                        title: "Cultural Motifs",
-                                        description: "Traditional patterns and artistic motifs integrated into our center's design, creating an immersive cultural experience for visiting leaders.",
-                                        image: "https://images.unsplash.com/photo-1703145219083-6037d97decb5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFkaXRpb25hbCUyMGluZGlhbiUyMGFydCUyMHBhdHRlcm5zfGVufDF8fHx8MTc1Njg5NTU5NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-                                        category: "Design Elements"
-                                    },
-                                    {
-                                        title: "Sacred Symbols",
-                                        description: "Meaningful symbols and emblems placed throughout our leadership center that inspire reflection on values, purpose, and authentic leadership.",
-                                        image: "https://images.unsplash.com/photo-1753204392401-a424cb95d3e2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpbmRpYW4lMjBzcGlyaXR1YWwlMjBzeW1ib2xzJTIwb218ZW58MXx8fHwxNzU2ODk1NjA5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-                                        category: "Symbolic Elements"
-                                    }
-                                ].map((item, index) => (
-                                    <motion.div
-                                        key={index}
-                                        initial={{ opacity: 0, x: 50 }}
-                                        whileInView={{ opacity: 1, x: 0 }}
-                                        transition={{ duration: 0.6, delay: index * 0.1 }}
-                                        viewport={{ once: true }}
-                                        className="group flex-shrink-0 w-80"
-                                        style={{ scrollSnapAlign: 'start' }}
-                                    >
-                                        <div className="relative overflow-hidden rounded-2xl h-96 cursor-pointer">
-                                            <ImageWithFallback
-                                                src={item.image}
-                                                alt={item.title}
-                                                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-                                            />
-
-                                            {/* Category Badge */}
-                                            <div className="absolute top-4 left-4">
-                                                <Badge
-                                                    variant="secondary"
-                                                    className="bg-white/90 text-primary border border-gray-200"
-                                                >
-                                                    {item.category}
-                                                </Badge>
-                                            </div>
-
-                                            {/* Hover Text Overlay */}
-                                            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-end p-6">
-                                                <h3 className="text-white text-h4 mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-100" style={{ color: '#FFFFFF !important' }}>
-                                                    {item.title}
-                                                </h3>
-                                                <p className="text-white text-body leading-relaxed transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-200" style={{ color: '#FFFFFF !important' }}>
-                                                    {item.description}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </motion.div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
 
             {/* Deluxe Living & Recreation Section */}
             <section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>

src/components/VirtualSpaceSection.tsx

@@ -22,7 +22,7 @@ import { Label } from "./ui/label";
 import { Textarea } from "./ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 import { navigateTo } from "./Router";
-
+import kautilya from "../assets/Kautilya.png";
 // Calendar helper functions
 const getDaysInMonth = (date: Date) => {
   return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -325,7 +325,7 @@ function BookingModal({
         </div>
 
         {/* Calendar Footer - Compact */}
-        <div className="pt-2 border-t border-gray-200">
+        {/* <div className="pt-2 border-t border-gray-200">
           <div className="flex items-center justify-center gap-3 text-xs text-gray-500">
             <div className="flex items-center gap-1">
               <div className="w-2 h-2 rounded-full bg-primary"></div>
@@ -336,7 +336,7 @@ function BookingModal({
               <span>Available</span>
             </div>
           </div>
-        </div>
+        </div> */}
       </div>
     );
   };
@@ -417,33 +417,20 @@ function BookingModal({
                     data-tour-type="360-viewer" // Change to "video" for video fallback
                   >
                     {/* Fallback: Video iframe - Replace this entire section with 360 viewer */}
-                    <iframe
+                    {/* <iframe
                       src={facility.videoUrl}
                       title={`${facility.name} Virtual Tour`}
                       className="w-full h-full"
                       allowFullScreen
                       frameBorder="0"
+                    /> */}
+
+                    <ImageWithFallback
+                      src={kautilya}
+                      alt={`${facility.name} Virtual Tour`}
+                      className="w-full h-full object-cover"
                     />
 
-                    {/* 360 Viewer Placeholder - Remove iframe above and uncomment/implement below */}
-                    {/* 
-                    Example A-Frame 360 implementation:
-                    <a-scene 
-                      embedded 
-                      style={{width: '100%', height: '100%'}}
-                      vr-mode-ui="enabled: false"
-                    >
-                      <a-sky src={facility.panoramaUrl || facility.image} />
-                      <a-camera wasd-controls-enabled="false" look-controls="enabled: true" />
-                    </a-scene>
-                    */}
-                    
-                    {/* Alternative: Custom 360 Photo Viewer Container */}
-                    {/*
-                    <div className="w-full h-full" id={`pannellum-${facility.id}`}>
-                      // Pannellum or other 360 viewer initialization
-                    </div>
-                    */}
                   </div>
 
                   {/* Interactive Controls Overlay (optional) */}

src/components/Webinars.tsx

@@ -95,24 +95,25 @@ export function Webinars() {
     const matchesFormat = selectedFormat === 'All Formats' || webinar.format === selectedFormat;
     const matchesLevel = selectedLevel === 'All Levels' || webinar.level === selectedLevel;
 
-    // Updated status filter for multi-select with shared data structure
     const matchesStatus = selectedStatuses.length === 0 ||
       selectedStatuses.some(status => {
         if (status === 'featured') return webinar.featured;
         return webinar.status === status;
       });
 
-    // Duration filter using range
     const durationMinutes = parseDuration(webinar.duration);
     const matchesDuration = durationMinutes >= durationRange[0] && durationMinutes <= durationRange[1];
 
-    // Attendee filter using range
     const attendeeCount = parseAttendees(webinar.attendees);
     const matchesAttendees = attendeeCount >= attendeeRange[0] && attendeeCount <= attendeeRange[1];
 
     return matchesSearch && matchesCategory && matchesFormat && matchesLevel && matchesStatus && matchesDuration && matchesAttendees;
   }).sort((a, b) => {
     switch (sortBy) {
+      case 'Most Popular':
+        // Add logic for "Most Popular" - you might want to use views, attendees, or featured status
+        return (b.featured ? 1 : 0) - (a.featured ? 1 : 0) ||
+          parseAttendees(b.attendees) - parseAttendees(a.attendees);
       case 'newest':
         return new Date(b.date).getTime() - new Date(a.date).getTime();
       case 'oldest':
@@ -140,6 +141,11 @@ export function Webinars() {
   const totalPages = Math.ceil(filteredWebinars.length / webinarsPerPage);
   const currentWebinars = filteredWebinars.slice((currentPage - 1) * webinarsPerPage, currentPage * webinarsPerPage);
 
+  console.log('Filtered webinars:', filteredWebinars.length);
+console.log('Total pages:', totalPages);
+console.log('Current page:', currentPage);
+console.log('Current webinars count:', currentWebinars.length);
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -176,6 +182,11 @@ export function Webinars() {
     );
   };
 
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm, selectedCategory, selectedFormat, selectedLevel, selectedStatuses, durationRange, attendeeRange, sortBy]);
+
   // Updated WebinarCard component that navigates to consistent route
   const WebinarCard = ({ webinar }: { webinar: WebinarData }) => {
     const handleCardClick = () => {
@@ -435,8 +446,7 @@ export function Webinars() {
               <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                 <button
                   onClick={() => setViewType('grid')}
-                  className={`p-2 transition-colors ${
+                  className={`p-2 transition-colors ${viewType === 'grid'
-                    viewType === 'grid' 
                       ? 'text-white'
                       : 'bg-white text-gray-600 hover:bg-gray-50'
                     }`}
@@ -449,8 +459,7 @@ export function Webinars() {
                 </button>
                 <button
                   onClick={() => setViewType('list')}
-                  className={`p-2 transition-colors ${
+                  className={`p-2 transition-colors ${viewType === 'list'
-                    viewType === 'list' 
                       ? 'text-white'
                       : 'bg-white text-gray-600 hover:bg-gray-50'
                     }`}
@@ -714,23 +723,48 @@ export function Webinars() {
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                          onClick={() => {
+                            setCurrentPage(prev => Math.max(1, prev - 1));
+                            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                          }}
                           disabled={currentPage === 1}
+                          className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
-                          <ChevronLeft className="w-4 h-4 mr-1" />
+                          <ChevronLeft className="w-4 h-4" />
                           Previous
                         </Button>
 
                         <div className="flex items-center gap-1">
-                          {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                          {Array.from({ length: totalPages }, (_, i) => {
-                            const page = Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i;
+                            const page = i + 1;
+                            // Show limited pages for better UX
+                            if (totalPages > 7) {
+                              const showPage =
+                                page === 1 ||
+                                page === totalPages ||
+                                (page >= currentPage - 1 && page <= currentPage + 1);
+
+                              if (!showPage) {
+                                if (page === currentPage - 2 || page === currentPage + 2) {
+                                  return <span key={page} className="px-2">...</span>;
+                                }
+                                return null;
+                              }
+                            }
+
                             return (
                               <Button
                                 key={page}
                                 variant={currentPage === page ? "default" : "outline"}
                                 size="sm"
-                                onClick={() => setCurrentPage(page)}
+                                onClick={() => {
-                                className="w-10"
+                                  setCurrentPage(page);
+                                  containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                                }}
+                                className={`min-w-10 ${currentPage === page
+                                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                                  }`}
                               >
                                 {page}
                               </Button>
@@ -741,11 +775,15 @@ export function Webinars() {
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+                          onClick={() => {
+                            setCurrentPage(prev => Math.min(totalPages, prev + 1));
+                            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                          }}
                           disabled={currentPage === totalPages}
+                          className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                           Next
-                          <ChevronRight className="w-4 h-4 ml-1" />
+                          <ChevronRight className="w-4 h-4" />
                         </Button>
                       </div>
                     )}

src/components/services/CultureCompetence.tsx

@@ -198,7 +198,6 @@ export function CultureCompetence() {
       {/* 1. What Is This Service */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
           <div className="max-w-6xl mx-auto">
             <div className="text-center mb-12">
               <BrandedTag text="What Is This Service?" />
@@ -269,7 +268,6 @@ export function CultureCompetence() {
             </div>
           </div>
         </div>
-        </div>
       </section>
 
       {/* 2. Who Is It For */}
@@ -370,7 +368,7 @@ export function CultureCompetence() {
       {/* 4. Our Approach */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
+          <div className="w-full">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-16">
                 <BrandedTag text="Our Approach" />
@@ -380,116 +378,371 @@ export function CultureCompetence() {
                 </p>
               </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+              {/* Flowchart Container with Connecting Lines */}
-                {/* Left Column - Core Frameworks */}
+              <div className="relative mb-16 flex flex-col items-center">
-                <div>
+                {/* Desktop: Horizontal Flowchart */}
-                  <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
+                <div className="hidden lg:block w-full max-w-5xl">
-                  <div className="space-y-8">
+                  <div className="relative">
-                    <div className="flex items-start gap-4">
+                    {/* Row 1: Frameworks, Pedagogy, Delivery */}
-                      <div
+                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                      {/* Frameworks */}
-                        style={{ backgroundColor: '#04045B' }}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                      >
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
-                        <Eye className="w-5 h-5 text-white" />
+                          <Compass className="w-6 h-6 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Culture Assessment & Diagnosis</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Diagnostic models and competency frameworks for transformation
-                          Comprehensive evaluation of current culture, values alignment, and engagement drivers
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Culture Assessment
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Competency Models
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Values Alignment
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 1→2 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#F8C301]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
-                      >
-                        <Target className="w-5 h-5 text-white" />
                       </div>
-                      <div className="flex-1">
+
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Strategic Competency Modeling</h4>
+                      {/* Pedagogy */}
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                          Strategic competency frameworks aligned with business objectives and future needs
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                          <Brain className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Change management and organizational learning approaches
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Experiential Learning
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Change Management
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Organizational Learning
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 2→3 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                      >
-                        <Settings className="w-5 h-5 text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Change Management Integration</h4>
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
-                          Structured change approach for sustainable culture and competency transformation
-                        </p>
-                      </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Delivery Modes */}
-                      <div
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
-                        style={{ backgroundColor: '#04045B' }}
+                          <Settings className="w-6 h-6 text-white" />
-                      >
-                        <BarChart3 className="w-5 h-5 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Measurement & Analytics</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Multiple formats for culture and competency transformation
-                          Robust measurement framework to track progress and demonstrate impact
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Culture Workshops
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Leadership Alignment
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Development Programs
                           </div>
                         </div>
                       </div>
                     </div>
 
-                {/* Right Column - Delivery Modes */}
+                    {/* Vertical Connector - Center Flow Down */}
-                <div className="bg-white border border-gray-200 rounded-xl p-8">
+                    <div className="flex justify-center mb-6">
-                  <h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
+                      <div className="flex flex-col items-center">
-                  <div className="space-y-6">
+                        <div className="w-0.5 h-12 bg-[#F8C301]"></div>
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
-                      <div className="flex-1">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Culture Workshops</h5>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
-                          Interactive sessions to define and embed desired organizational culture
-                        </p>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Row 2: Assessment, Coaching */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
-                      <div className="flex-1">
+                      {/* Assessment Integration */}
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Competency Development</h5>
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
-                          Targeted programs to build critical organizational capabilities and skills
+                          <BarChart3 className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Comprehensive measurement to track culture transformation
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Engagement Surveys
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Culture Analytics
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Progress Tracking
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                      {/* Arrow 4→5 */}
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
+                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
-                      <div className="flex-1">
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Alignment</h5>
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                      </div>
-                          Executive sessions to ensure leadership commitment and cultural modeling
+
+                      {/* Coaching Integration */}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <Heart className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Leadership support for culture change and capability building
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Executive Coaching
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Team Coaching
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Change Leadership
+                          </div>
+                        </div>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Final Vertical Connector - Center Flow Down to Outcome */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="flex justify-center mb-6">
-                      <div className="flex-1">
+                      <div className="flex flex-col items-center">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Continuous Monitoring</h5>
+                        <div className="w-0.5 h-12 bg-[#04045B]"></div>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
-                          Ongoing assessment and adjustment to ensure sustainable transformation
+                      </div>
+                    </div>
+
+                    {/* Row 3: Expected Outcome - Centered */}
+                    <div className="flex justify-center w-full">
+                      <div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
+                        <div className="flex items-center gap-3 mb-4">
+                          <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                          <h3 className="text-h4 text-white">Expected Outcome</h3>
+                        </div>
+                        <p className="text-body text-white mb-4">
+                          A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
+                        </p>
+                        <div className="flex items-center gap-2 text-[#F8C301]">
+                          <CheckCircle className="w-6 h-6" />
+                          <span className="text-body text-white">Sustainable Culture Transformation</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Tablet & Mobile: Vertical Flowchart */}
+                <div className="lg:hidden space-y-8">
+                  {/* Frameworks */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Compass className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Diagnostic models and competency frameworks for transformation
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Culture Assessment
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Competency Models
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Values Alignment
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Pedagogy */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <Brain className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Change management and organizational learning approaches
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Experiential Learning
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Change Management
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Organizational Learning
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Delivery Modes */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Settings className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Multiple formats for culture and competency transformation
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Culture Workshops
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Leadership Alignment
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Development Programs
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Assessment Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <BarChart3 className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Comprehensive measurement to track culture transformation
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Engagement Surveys
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Culture Analytics
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Progress Tracking
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Coaching Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Heart className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Leadership support for culture change and capability building
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Executive Coaching
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Team Coaching
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Change Leadership
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Expected Outcome */}
+                  <div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
+                    <div className="flex items-center gap-3 mb-4">
+                      <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                      <h3 className="text-h4 text-white">Expected Outcome</h3>
+                    </div>
+                    <p className="text-body text-white mb-4">
+                      A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
+                    </p>
+                    <div className="flex items-center gap-2 text-[#F8C301]">
+                      <CheckCircle className="w-6 h-6" />
+                      <span className="text-body text-white">Sustainable Culture Transformation</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Framework Effectiveness */}
+              <div className="bg-gray-50 rounded-xl p-8">
+                <div className="text-center mb-8">
+                  <h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
+                  <p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
+                    Our systematic approach delivers measurable results across key culture and competency metrics.
                   </p>
                 </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Target className="w-7 h-7 text-white" />
                     </div>
+                    <div className="text-h2 text-[#04045B] mb-2">87%</div>
+                    <p className="text-body text-[#6F6F6F]">Culture Alignment Increase</p>
+                  </div>
+
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Users className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">91%</div>
+                    <p className="text-body text-[#6F6F6F]">Employee Engagement Growth</p>
+                  </div>
+
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <TrendingUp className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">82%</div>
+                    <p className="text-body text-[#6F6F6F]">Competency Development Impact</p>
                   </div>
                 </div>
               </div>

src/components/services/ExecutiveCoaching.tsx

@@ -199,7 +199,6 @@ export function ExecutiveCoaching() {
       {/* 1. What Is This Service */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
           <div className="max-w-6xl mx-auto">
             <div className="text-center mb-12">
               <BrandedTag text="What Is This Service?" />
@@ -270,7 +269,6 @@ export function ExecutiveCoaching() {
             </div>
           </div>
         </div>
-        </div>
       </section>
 
       {/* 2. Who Is It For */}
@@ -375,75 +373,381 @@ export function ExecutiveCoaching() {
       {/* 4. Our Approach */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
         <div className="section-margin-x">
+          <div className="w-full">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-16">
                 <BrandedTag text="Our Approach" />
-              <h2 className="text-h2 mb-8">Comprehensive Coaching & Mentoring Framework</h2>
+                <h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Coaching & Mentoring Framework</h2>
-              <p className="text-body-lg text-muted max-w-3xl mx-auto">
+                <p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
                   Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
                 </p>
               </div>
 
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+              {/* Flowchart Container with Connecting Lines */}
-              <div>
+              <div className="relative mb-16 flex flex-col items-center">
-                <h3 className="text-h3 mb-6">Core Frameworks & Methodologies</h3>
+                {/* Desktop: Horizontal Flowchart */}
-                <div className="space-y-6">
+                <div className="hidden lg:block w-full max-w-5xl">
-                  <div className="flex gap-4">
+                  <div className="relative">
-                    <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
+                    {/* Row 1: Frameworks, Pedagogy, Delivery */}
-                      <Eye className="w-4 h-4 text-white" />
+                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
+                      {/* Frameworks */}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <Eye className="w-6 h-6 text-white" />
                         </div>
-                    <div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
-                      <h4 className="text-h4 mb-2">Leadership Assessment & Profiling</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                      <p className="text-body text-muted">Comprehensive evaluation of leadership strengths, development areas, and growth potential</p>
+                          Comprehensive profiling and leadership capability evaluation
+                        </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Leadership Profiling
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            360° Feedback
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Psychometric Tools
                           </div>
                         </div>
-                  <div className="flex gap-4">
-                    <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
-                      <User className="w-4 h-4 text-white" />
                       </div>
-                    <div>
+
-                      <h4 className="text-h4 mb-2">Personalized Coaching Sessions</h4>
+                      {/* Arrow 1→2 */}
-                      <p className="text-body text-muted">One-on-one coaching tailored to individual needs, goals, and development priorities</p>
+                      <div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
+                        <div className="w-16 h-0.5 bg-[#F8C301]"></div>
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
+                      </div>
+
+                      {/* Pedagogy */}
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                          <Brain className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Coaching Pedagogy</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Evidence-based coaching methodologies for transformation
+                        </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Solution-Focused
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Strengths-Based
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Goal-Oriented
                           </div>
                         </div>
-                  <div className="flex gap-4">
-                    <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
-                      <Network className="w-4 h-4 text-white" />
                       </div>
-                    <div>
+
-                      <h4 className="text-h4 mb-2">Strategic Mentoring Relationships</h4>
+                      {/* Arrow 2→3 */}
-                      <p className="text-body text-muted">Long-term mentoring partnerships for career guidance and strategic development</p>
+                      <div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
                       </div>
+
+                      {/* Delivery Modes */}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <Settings className="w-6 h-6 text-white" />
                         </div>
-                  <div className="flex gap-4">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
-                    <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                      <BarChart3 className="w-4 h-4 text-white" />
+                          Flexible coaching formats for executive schedules
+                        </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            One-on-One Coaching
                           </div>
-                    <div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
-                      <h4 className="text-h4 mb-2">Progress Tracking & Measurement</h4>
+                            Virtual & In-Person
-                      <p className="text-body text-muted">Continuous assessment and measurement of development progress and impact</p>
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Mentoring Circles
                           </div>
                         </div>
                       </div>
                     </div>
-              <div className="bg-white p-8 rounded-2xl shadow-lg">
+
-                <h4 className="text-h4 mb-6">Delivery Modes & Support</h4>
+                    {/* Vertical Connector - Center Flow Down */}
-                <div className="space-y-4">
+                    <div className="flex justify-center mb-6">
-                  <div className="border-l-4 border-primary pl-4">
+                      <div className="flex flex-col items-center">
-                    <h5 className="font-semibold text-body mb-1">Individual Coaching</h5>
+                        <div className="w-0.5 h-12 bg-[#F8C301]"></div>
-                    <p className="text-small text-muted">One-on-one sessions with certified executive coaches</p>
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
                       </div>
-                  <div className="border-l-4 border-accent pl-4">
-                    <h5 className="font-semibold text-body mb-1">360-Degree Feedback</h5>
-                    <p className="text-small text-muted">Comprehensive feedback from peers, supervisors, and direct reports</p>
                     </div>
-                  <div className="border-l-4 border-primary pl-4">
+
-                    <h5 className="font-semibold text-body mb-1">Mentoring Circles</h5>
+                    {/* Row 2: Assessment, Coaching */}
-                    <p className="text-small text-muted">Group mentoring sessions with peer leaders and senior executives</p>
+                    <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
+                      {/* Progress Tracking */}
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                          <BarChart3 className="w-6 h-6 text-white" />
                         </div>
-                  <div className="border-l-4 border-accent pl-4">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Progress Tracking</h3>
-                    <h5 className="font-semibold text-body mb-1">Virtual & In-Person Options</h5>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                    <p className="text-small text-muted">Flexible delivery modes to accommodate busy executive schedules</p>
+                          Continuous measurement of development and impact
+                        </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Goal Achievement
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Behavior Change
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Impact Metrics
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Arrow 4→5 */}
+                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
+                      </div>
+
+                      {/* Mentoring Integration */}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <Network className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Strategic guidance for long-term career development
+                        </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Senior Mentors
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Networks
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Career Strategy
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Final Vertical Connector - Center Flow Down to Outcome */}
+                    <div className="flex justify-center mb-6">
+                      <div className="flex flex-col items-center">
+                        <div className="w-0.5 h-12 bg-[#04045B]"></div>
+                        <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
+                      </div>
+                    </div>
+
+                    {/* Row 3: Expected Outcome - Centered */}
+                    <div className="flex justify-center w-full">
+                      <div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
+                        <div className="flex items-center gap-3 mb-4">
+                          <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                          <h3 className="text-h4 text-white">Expected Outcome</h3>
+                        </div>
+                        <p className="text-body text-white mb-4">
+                          Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
+                        </p>
+                        <div className="flex items-center gap-2 text-[#F8C301]">
+                          <CheckCircle className="w-6 h-6" />
+                          <span className="text-body text-white">Transformational Leadership Growth</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Tablet & Mobile: Vertical Flowchart */}
+                <div className="lg:hidden space-y-8">
+                  {/* Frameworks */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Eye className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Comprehensive profiling and leadership capability evaluation
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Leadership Profiling
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          360° Feedback
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Psychometric Tools
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Pedagogy */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <Brain className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Coaching Pedagogy</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Evidence-based coaching methodologies for transformation
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Solution-Focused
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Strengths-Based
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Goal-Oriented
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Delivery Modes */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Settings className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Flexible coaching formats for executive schedules
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          One-on-One Coaching
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Virtual & In-Person
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Mentoring Circles
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Progress Tracking */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <BarChart3 className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Progress Tracking</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Continuous measurement of development and impact
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Goal Achievement
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Behavior Change
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Impact Metrics
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Mentoring Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Network className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Strategic guidance for long-term career development
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Senior Mentors
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Networks
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Career Strategy
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Expected Outcome */}
+                  <div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
+                    <div className="flex items-center gap-3 mb-4">
+                      <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                      <h3 className="text-h4 text-white">Expected Outcome</h3>
+                    </div>
+                    <p className="text-body text-white mb-4">
+                      Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
+                    </p>
+                    <div className="flex items-center gap-2 text-[#F8C301]">
+                      <CheckCircle className="w-6 h-6" />
+                      <span className="text-body text-white">Transformational Leadership Growth</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Framework Effectiveness */}
+              <div className="bg-gray-50 rounded-xl p-8">
+                <div className="text-center mb-8">
+                  <h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
+                  <p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
+                    Our systematic approach delivers measurable results across key coaching and mentoring metrics.
+                  </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Target className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">94%</div>
+                    <p className="text-body text-[#6F6F6F]">Goal Achievement Rate</p>
+                  </div>
+
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Users className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">88%</div>
+                    <p className="text-body text-[#6F6F6F]">Leadership Effectiveness Growth</p>
+                  </div>
+
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <TrendingUp className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">86%</div>
+                    <p className="text-body text-[#6F6F6F]">Career Advancement Success</p>
                   </div>
                 </div>
               </div>

src/components/services/LeadershipDevelopment.tsx

@@ -198,7 +198,6 @@ export function LeadershipDevelopment() {
       {/* 1. What Is This Service */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-12">
                 <BrandedTag text="What Is This Service?" />
@@ -269,7 +268,6 @@ export function LeadershipDevelopment() {
               </div>
             </div>
         </div>
-        </div>
       </section>
 
       {/* 2. Who Is It For */}
@@ -370,7 +368,7 @@ export function LeadershipDevelopment() {
       {/* 4. Our Approach */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
+          <div className="w-full">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-16">
                 <BrandedTag text="Our Approach" />
@@ -380,116 +378,371 @@ export function LeadershipDevelopment() {
                 </p>
               </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+              {/* Flowchart Container with Connecting Lines */}
-                {/* Left Column - Core Frameworks */}
+              <div className="relative mb-16 flex flex-col items-center">
-                <div>
+                {/* Desktop: Horizontal Flowchart */}
-                  <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
+                <div className="hidden lg:block w-full max-w-5xl">
-                  <div className="space-y-8">
+                  <div className="relative">
-                    <div className="flex items-start gap-4">
+                    {/* Row 1: Frameworks, Pedagogy, Delivery */}
-                      <div
+                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                      {/* Frameworks */}
-                        style={{ backgroundColor: '#04045B' }}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                      >
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
-                        <Eye className="w-5 h-5 text-white" />
+                          <Lightbulb className="w-6 h-6 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">360-Degree Leadership Assessment</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Executive leadership models and strategic thinking frameworks
-                          Comprehensive evaluation of leadership capabilities, strategic readiness, and executive presence
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Leadership Models
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Strategic Thinking
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Vision Creation
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 1→2 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#F8C301]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
-                      >
-                        <Brain className="w-5 h-5 text-white" />
                       </div>
-                      <div className="flex-1">
+
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Strategic Leadership Development</h4>
+                      {/* Pedagogy */}
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                          Frameworks for strategic thinking, vision creation, and organizational transformation
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                          <Brain className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Executive development through experiential and action learning
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Experiential Learning
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Action Learning
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Learning
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 2→3 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                      >
-                        <Network className="w-5 h-5 text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Executive Coaching Integration</h4>
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
-                          One-on-one coaching support with experienced executive coaches throughout the journey
-                        </p>
-                      </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Delivery Modes */}
-                      <div
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
-                        style={{ backgroundColor: '#04045B' }}
+                          <Settings className="w-6 h-6 text-white" />
-                      >
-                        <BarChart3 className="w-5 h-5 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Real-World Application</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Flexible formats designed for executive schedules
-                          Strategic projects and business challenges that drive immediate organizational impact
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Executive Workshops
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Leadership Simulations
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Strategic Projects
                           </div>
                         </div>
                       </div>
                     </div>
 
-                {/* Right Column - Delivery Modes */}
+                    {/* Vertical Connector - Center Flow Down */}
-                <div className="bg-white border border-gray-200 rounded-xl p-8">
+                    <div className="flex justify-center mb-6">
-                  <h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Assessments</h4>
+                      <div className="flex flex-col items-center">
-                  <div className="space-y-6">
+                        <div className="w-0.5 h-12 bg-[#F8C301]"></div>
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
-                      <div className="flex-1">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Workshops</h5>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
-                          Intensive strategic leadership workshops with peer learning and expert facilitation
-                        </p>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Row 2: Assessment, Coaching */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
-                      <div className="flex-1">
+                      {/* Assessment Integration */}
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Simulations</h5>
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
-                          Business simulations and strategic decision-making exercises for practical application
+                          <BarChart3 className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Comprehensive evaluation to measure executive readiness
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            360° Feedback
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Leadership Assessment
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Impact Measurement
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                      {/* Arrow 4→5 */}
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
+                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
-                      <div className="flex-1">
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Coaching</h5>
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                      </div>
-                          Individual coaching sessions with experienced executive coaches for personalized development
+
+                      {/* Coaching Integration */}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <UserCheck className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Personalized executive coaching throughout development
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Executive Coaching
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Strategic Advisement
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Coaching
+                          </div>
+                        </div>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Final Vertical Connector - Center Flow Down to Outcome */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="flex justify-center mb-6">
-                      <div className="flex-1">
+                      <div className="flex flex-col items-center">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Impact Measurement</h5>
+                        <div className="w-0.5 h-12 bg-[#04045B]"></div>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
-                          Ongoing assessment and measurement of leadership effectiveness and business impact
+                      </div>
+                    </div>
+
+                    {/* Row 3: Expected Outcome - Centered */}
+                    <div className="flex justify-center w-full">
+                      <div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
+                        <div className="flex items-center gap-3 mb-4">
+                          <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                          <h3 className="text-h4 text-white">Expected Outcome</h3>
+                        </div>
+                        <p className="text-body text-white mb-4">
+                          Transformational executive leaders with strategic capability, executive presence, and proven business impact.
+                        </p>
+                        <div className="flex items-center gap-2 text-[#F8C301]">
+                          <CheckCircle className="w-6 h-6" />
+                          <span className="text-body text-white">Enhanced Leadership Effectiveness</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Tablet & Mobile: Vertical Flowchart */}
+                <div className="lg:hidden space-y-8">
+                  {/* Frameworks */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Lightbulb className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Executive leadership models and strategic thinking frameworks
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Leadership Models
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Strategic Thinking
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Vision Creation
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Pedagogy */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <Brain className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Executive development through experiential and action learning
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Experiential Learning
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Action Learning
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Learning
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Delivery Modes */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Settings className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Flexible formats designed for executive schedules
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Executive Workshops
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Leadership Simulations
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Strategic Projects
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Assessment Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <BarChart3 className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Comprehensive evaluation to measure executive readiness
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          360° Feedback
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Leadership Assessment
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Impact Measurement
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Coaching Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <UserCheck className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Personalized executive coaching throughout development
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Executive Coaching
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Strategic Advisement
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Coaching
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Expected Outcome */}
+                  <div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
+                    <div className="flex items-center gap-3 mb-4">
+                      <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                      <h3 className="text-h4 text-white">Expected Outcome</h3>
+                    </div>
+                    <p className="text-body text-white mb-4">
+                      Transformational executive leaders with strategic capability, executive presence, and proven business impact.
+                    </p>
+                    <div className="flex items-center gap-2 text-[#F8C301]">
+                      <CheckCircle className="w-6 h-6" />
+                      <span className="text-body text-white">Enhanced Leadership Effectiveness</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Framework Effectiveness */}
+              <div className="bg-gray-50 rounded-xl p-8">
+                <div className="text-center mb-8">
+                  <h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
+                  <p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
+                    Our systematic approach delivers measurable results across key leadership development metrics.
                   </p>
                 </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Target className="w-7 h-7 text-white" />
                     </div>
+                    <div className="text-h2 text-[#04045B] mb-2">92%</div>
+                    <p className="text-body text-[#6F6F6F]">Leadership Effectiveness Increase</p>
+                  </div>
+                  
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Users className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">88%</div>
+                    <p className="text-body text-[#6F6F6F]">Executive Presence Enhancement</p>
+                  </div>
+                  
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <TrendingUp className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">85%</div>
+                    <p className="text-body text-[#6F6F6F]">Strategic Impact Improvement</p>
                   </div>
                 </div>
               </div>

src/components/services/LeadershipPipelineDevelopment.tsx

@@ -213,7 +213,7 @@ export function LeadershipPipelineDevelopment() {
           <div className="w-full section-margin-x">
             <div className="max-w-4xl">
               {/* Back Navigation */}
-              <div className="mb-8">
+              {/* <div className="mb-8">
                 <Button
                   variant="ghost"
                   onClick={() => navigateTo('/services')}
@@ -222,7 +222,7 @@ export function LeadershipPipelineDevelopment() {
                   <ArrowLeft className="w-4 h-4 mr-2" />
                   Back to Services
                 </Button>
-              </div>
+              </div> */}
 
               <div className="mb-8">
                 <h1 className="text-h1-white">
@@ -250,7 +250,6 @@ export function LeadershipPipelineDevelopment() {
       {/* 1. What Is This Service */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-12">
                 <BrandedTag text="What Is This Service?" />
@@ -321,7 +320,6 @@ export function LeadershipPipelineDevelopment() {
               </div>
             </div>
         </div>
-        </div>
       </section>
 
       {/* 2. Who Is It For */}
@@ -422,7 +420,7 @@ export function LeadershipPipelineDevelopment() {
       {/* 4. Our Approach */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
+          <div className="w-full">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-16">
                 <BrandedTag text="Our Approach" />
@@ -432,116 +430,372 @@ export function LeadershipPipelineDevelopment() {
                 </p>
               </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+              {/* Clean Grid Layout */}
-                {/* Left Column - Core Frameworks */}
+              {/* Flowchart Container with Connecting Lines */}
-                <div>
+              <div className="relative mb-16 flex flex-col items-center">
-                  <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
+                {/* Desktop: Horizontal Flowchart */}
-                  <div className="space-y-8">
+                <div className="hidden lg:block w-full max-w-5xl">
-                    <div className="flex items-start gap-4">
+                  <div className="relative">
-                      <div
+                    {/* Row 1: Frameworks, Pedagogy, Delivery */}
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
-                        style={{ backgroundColor: '#04045B' }}
+                      {/* Frameworks */}
-                      >
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        <Eye className="w-5 h-5 text-white" />
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <Layers className="w-6 h-6 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Talent Assessment & Identification</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Establish competency models and leadership progression pathways
-                          Systematic identification of high-potential talent using validated assessment tools
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Competency Models
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Leadership Levels
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Career Pathways
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 1→2 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#F8C301]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
-                      >
-                        <Target className="w-5 h-5 text-white" />
                       </div>
-                      <div className="flex-1">
+
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Multi-Level Development Programs</h4>
+                      {/* Pedagogy */}
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                          Tier-specific programs for emerging leaders, managers, and executives
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                          <Brain className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Apply evidence-based learning approaches for maximum impact
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Experiential Learning
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Action Learning
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Learning
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 2→3 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                      >
-                        <Users className="w-5 h-5 text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Mentoring & Coaching Integration</h4>
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
-                          Comprehensive support through mentoring relationships and executive coaching
-                        </p>
-                      </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Delivery Modes */}
-                      <div
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
-                        style={{ backgroundColor: '#04045B' }}
+                          <Settings className="w-6 h-6 text-white" />
-                      >
-                        <Building className="w-5 h-5 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Succession Planning Integration</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Flexible options to suit organizational needs and schedules
-                          Direct integration with organizational succession planning and talent management
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Workshops
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Online Modules
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Cohort Programs
                           </div>
                         </div>
                       </div>
                     </div>
 
-                {/* Right Column - Delivery Modes */}
+                    {/* Vertical Connector - Center Flow Down */}
-                <div className="bg-white border border-gray-200 rounded-xl p-8">
+                    <div className="flex justify-center mb-6">
-                  <h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
+                      <div className="flex flex-col items-center">
-                  <div className="space-y-6">
+                        <div className="w-0.5 h-12 bg-[#F8C301]"></div>
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
-                      <div className="flex-1">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Assessment Centers</h5>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
-                          Comprehensive leadership potential evaluation and 360-degree feedback
-                        </p>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Row 2: Assessment, Coaching */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
-                      <div className="flex-1">
+                      {/* Assessment Integration */}
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Development Cohorts</h5>
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
-                          Structured learning programs with peer networks and group projects
+                          <BarChart3 className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Comprehensive evaluation methods to measure progress and potential
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            360° Feedback
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Psychometrics
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Simulations
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                      {/* Arrow 4→5 */}
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
+                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
-                      <div className="flex-1">
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Stretch Assignments</h5>
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                      </div>
-                          Real-world leadership opportunities and cross-functional projects
+
+                      {/* Coaching Integration */}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <Heart className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Personalized support throughout the development journey
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Executive Coaching
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Mentoring
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Coaching
+                          </div>
+                        </div>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Final Vertical Connector - Center Flow Down to Outcome */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="flex justify-center mb-6">
-                      <div className="flex-1">
+                      <div className="flex flex-col items-center">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Succession Reviews</h5>
+                        <div className="w-0.5 h-12 bg-[#04045B]"></div>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
-                          Regular talent reviews and succession readiness assessments
+                      </div>
+                    </div>
+
+                    {/* Row 3: Expected Outcome - Centered */}
+                    <div className="flex justify-center w-full">
+                      <div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
+                        <div className="flex items-center gap-3 mb-4">
+                          <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                          <h3 className="text-h4 text-white">Expected Outcome</h3>
+                        </div>
+                        <p className="text-body text-white mb-4">
+                          A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
+                        </p>
+                        <div className="flex items-center gap-2 text-[#F8C301]">
+                          <CheckCircle className="w-6 h-6" />
+                          <span className="text-body text-white">Proven ROI on Leadership Investment</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Tablet & Mobile: Vertical Flowchart */}
+                <div className="lg:hidden space-y-8">
+                  {/* Frameworks */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Layers className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Establish competency models and leadership progression pathways
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Competency Models
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Leadership Levels
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Career Pathways
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Pedagogy */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <Brain className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Apply evidence-based learning approaches for maximum impact
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Experiential Learning
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Action Learning
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Learning
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Delivery Modes */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Settings className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Flexible options to suit organizational needs and schedules
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Workshops
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Online Modules
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Cohort Programs
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Assessment Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <BarChart3 className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Comprehensive evaluation methods to measure progress and potential
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          360° Feedback
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Psychometrics
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Simulations
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Coaching Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Heart className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Personalized support throughout the development journey
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Executive Coaching
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Mentoring
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Coaching
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Expected Outcome */}
+                  <div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
+                    <div className="flex items-center gap-3 mb-4">
+                      <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                      <h3 className="text-h4 text-white">Expected Outcome</h3>
+                    </div>
+                    <p className="text-body text-white mb-4">
+                      A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
+                    </p>
+                    <div className="flex items-center gap-2 text-[#F8C301]">
+                      <CheckCircle className="w-6 h-6" />
+                      <span className="text-body text-white">Proven ROI on Leadership Investment</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Framework Effectiveness */}
+              <div className="bg-gray-50 rounded-xl p-8">
+                <div className="text-center mb-8">
+                  <h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
+                  <p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
+                    Our systematic approach delivers measurable results across key leadership development metrics.
                   </p>
                 </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Target className="w-7 h-7 text-white" />
                     </div>
+                    <div className="text-h2 text-[#04045B] mb-2">85%</div>
+                    <p className="text-body text-[#6F6F6F]">Promotion Readiness Acceleration</p>
+                  </div>
+                  
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Users className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">92%</div>
+                    <p className="text-body text-[#6F6F6F]">Talent Retention Improvement</p>
+                  </div>
+                  
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <TrendingUp className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">78%</div>
+                    <p className="text-body text-[#6F6F6F]">Succession Planning Effectiveness</p>
                   </div>
                 </div>
               </div>

src/components/services/ManagementDevelopment.tsx

@@ -197,7 +197,6 @@ export function ManagementDevelopment() {
       {/* 1. What Is This Service */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
           <div className="max-w-6xl mx-auto">
             <div className="text-center mb-12">
               <BrandedTag text="What Is This Service?" />
@@ -268,7 +267,6 @@ export function ManagementDevelopment() {
             </div>
           </div>
         </div>
-        </div>
       </section>
 
       {/* 2. Who Is It For */}
@@ -369,7 +367,7 @@ export function ManagementDevelopment() {
       {/* 4. Our Approach */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
         <div className="section-margin-x">
-          <div className="w-full section-margin-x">
+          <div className="w-full">
             <div className="max-w-6xl mx-auto">
               <div className="text-center mb-16">
                 <BrandedTag text="Our Approach" />
@@ -379,116 +377,371 @@ export function ManagementDevelopment() {
                 </p>
               </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+              {/* Flowchart Container with Connecting Lines */}
-                {/* Left Column - Core Frameworks */}
+              <div className="relative mb-16 flex flex-col items-center">
-                <div>
+                {/* Desktop: Horizontal Flowchart */}
-                  <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
+                <div className="hidden lg:block w-full max-w-5xl">
-                  <div className="space-y-8">
+                  <div className="relative">
-                    <div className="flex items-start gap-4">
+                    {/* Row 1: Frameworks, Pedagogy, Delivery */}
-                      <div
+                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                      {/* Frameworks */}
-                        style={{ backgroundColor: '#04045B' }}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                      >
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
-                        <Users className="w-5 h-5 text-white" />
+                          <Users className="w-6 h-6 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">People Management Fundamentals</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Core management models and team leadership principles
-                          Essential skills for team leadership, delegation, and performance management
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            People Management
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Performance Systems
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Team Development
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 1→2 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#F8C301]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
-                      >
-                        <MessageCircle className="w-5 h-5 text-white" />
                       </div>
-                      <div className="flex-1">
+
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Communication Excellence</h4>
+                      {/* Pedagogy */}
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                          Advanced communication skills for difficult conversations and team engagement
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                          <Brain className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Practical learning through application and peer exchange
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Experiential Learning
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Action Learning
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Learning
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Arrow 2→3 */}
-                      <div
+                      <div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        style={{ backgroundColor: '#04045B' }}
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                      >
-                        <Target className="w-5 h-5 text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Performance Management Systems</h4>
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
-                          Tools and techniques for setting goals, providing feedback, and driving results
-                        </p>
-                      </div>
                       </div>
 
-                    <div className="flex items-start gap-4">
+                      {/* Delivery Modes */}
-                      <div
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
-                        style={{ backgroundColor: '#04045B' }}
+                          <Settings className="w-6 h-6 text-white" />
-                      >
-                        <Award className="w-5 h-5 text-white" />
                         </div>
-                      <div className="flex-1">
+                        <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
-                        <h4 className="text-h4 mb-3 text-[#26231A]">Team Development Strategies</h4>
+                        <p className="text-body text-[#6F6F6F] mb-4">
-                        <p className="text-body text-[#6F6F6F] leading-relaxed">
+                          Flexible formats for manager development needs
-                          Building high-performing teams and fostering collaborative work environments
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Interactive Workshops
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Cohorts
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Action Projects
                           </div>
                         </div>
                       </div>
                     </div>
 
-                {/* Right Column - Delivery Modes */}
+                    {/* Vertical Connector - Center Flow Down */}
-                <div className="bg-white border border-gray-200 rounded-xl p-8">
+                    <div className="flex justify-center mb-6">
-                  <h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
+                      <div className="flex flex-col items-center">
-                  <div className="space-y-6">
+                        <div className="w-0.5 h-12 bg-[#F8C301]"></div>
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                        <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
-                      <div className="flex-1">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Interactive Workshops</h5>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
-                          Hands-on learning with real-world scenarios and case studies for immediate application
-                        </p>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Row 2: Assessment, Coaching */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
-                      <div className="flex-1">
+                      {/* Assessment Integration */}
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Peer Learning Cohorts</h5>
+                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
-                          Manager groups for shared learning and best practice exchange across teams
+                          <BarChart3 className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Comprehensive evaluation to track manager effectiveness
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            360° Feedback
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Performance Metrics
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Team Engagement
+                          </div>
                         </div>
                       </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                      {/* Arrow 4→5 */}
-                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
+                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
-                      <div className="flex-1">
+                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Individual Coaching</h5>
+                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                      </div>
-                          One-on-one support for personalized development needs and leadership challenges
+
+                      {/* Coaching Integration */}
+                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
+                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                          <MessageCircle className="w-6 h-6 text-white" />
+                        </div>
+                        <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                        <p className="text-body text-[#6F6F6F] mb-4">
+                          Personalized coaching support for manager challenges
                         </p>
+                        <div className="space-y-2">
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Individual Coaching
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Group Coaching
+                          </div>
+                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                            Peer Coaching
+                          </div>
+                        </div>
                       </div>
                     </div>
 
-                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
+                    {/* Final Vertical Connector - Center Flow Down to Outcome */}
-                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
+                    <div className="flex justify-center mb-6">
-                      <div className="flex-1">
+                      <div className="flex flex-col items-center">
-                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Action Learning Projects</h5>
+                        <div className="w-0.5 h-12 bg-[#04045B]"></div>
-                        <p className="text-small text-[#6F6F6F] leading-relaxed">
+                        <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
-                          Real workplace challenges for immediate application and measurable business impact
+                      </div>
+                    </div>
+
+                    {/* Row 3: Expected Outcome - Centered */}
+                    <div className="flex justify-center w-full">
+                      <div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
+                        <div className="flex items-center gap-3 mb-4">
+                          <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                          <h3 className="text-h4 text-white">Expected Outcome</h3>
+                        </div>
+                        <p className="text-body text-white mb-4">
+                          Effective people managers who build high-performing teams, drive business results, and create positive work environments.
+                        </p>
+                        <div className="flex items-center gap-2 text-[#F8C301]">
+                          <CheckCircle className="w-6 h-6" />
+                          <span className="text-body text-white">Enhanced Management Effectiveness</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Tablet & Mobile: Vertical Flowchart */}
+                <div className="lg:hidden space-y-8">
+                  {/* Frameworks */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Users className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Core management models and team leadership principles
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          People Management
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Performance Systems
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Team Development
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Pedagogy */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <Brain className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Practical learning through application and peer exchange
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Experiential Learning
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Action Learning
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Learning
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Delivery Modes */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <Settings className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Flexible formats for manager development needs
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Interactive Workshops
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Cohorts
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Action Projects
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Assessment Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
+                        <BarChart3 className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Comprehensive evaluation to track manager effectiveness
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          360° Feedback
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Performance Metrics
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Team Engagement
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Coaching Integration */}
+                  <div className="relative">
+                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
+                        <MessageCircle className="w-6 h-6 text-white" />
+                      </div>
+                      <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
+                      <p className="text-body text-[#6F6F6F] mb-4">
+                        Personalized coaching support for manager challenges
+                      </p>
+                      <div className="space-y-2">
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Individual Coaching
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Group Coaching
+                        </div>
+                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
+                          Peer Coaching
+                        </div>
+                      </div>
+                    </div>
+                    {/* Connector Arrow */}
+                    <div className="flex justify-center my-4">
+                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
+                    </div>
+                  </div>
+
+                  {/* Expected Outcome */}
+                  <div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
+                    <div className="flex items-center gap-3 mb-4">
+                      <TrendingUp className="w-10 h-10 text-[#F8C301]" />
+                      <h3 className="text-h4 text-white">Expected Outcome</h3>
+                    </div>
+                    <p className="text-body text-white mb-4">
+                      Effective people managers who build high-performing teams, drive business results, and create positive work environments.
+                    </p>
+                    <div className="flex items-center gap-2 text-[#F8C301]">
+                      <CheckCircle className="w-6 h-6" />
+                      <span className="text-body text-white">Enhanced Management Effectiveness</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Framework Effectiveness */}
+              <div className="bg-gray-50 rounded-xl p-8">
+                <div className="text-center mb-8">
+                  <h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
+                  <p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
+                    Our systematic approach delivers measurable results across key management development metrics.
                   </p>
                 </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Target className="w-7 h-7 text-white" />
                     </div>
+                    <div className="text-h2 text-[#04045B] mb-2">89%</div>
+                    <p className="text-body text-[#6F6F6F]">Manager Effectiveness Increase</p>
+                  </div>
+
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Users className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">85%</div>
+                    <p className="text-body text-[#6F6F6F]">Team Performance Improvement</p>
+                  </div>
+
+                  <div className="text-center bg-white rounded-lg p-6">
+                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <TrendingUp className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="text-h2 text-[#04045B] mb-2">78%</div>
+                    <p className="text-body text-[#6F6F6F]">Employee Engagement Growth</p>
                   </div>
                 </div>
               </div>

src/data/webinarsData.ts

@@ -95,7 +95,7 @@ export const sharedWebinarsData: WebinarData[] = [
     category: 'Digital Transformation',
     tags: ['Leadership', 'Digital Strategy', 'Innovation', 'Change Management'],
     thumbnail: 'https://images.unsplash.com/photo-1560472355-536de3962603?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnNoaXAlMjBzdHJhdGVneXxlbnwwfHx8fDE3MzU4NTQyNzB8MA&ixlib=rb-4.0.3&q=80&w=1080',
-    status: 'live' as const,
+    status: 'live',
     featured: true,
     level: 'Advanced',
     format: 'Hybrid',
@@ -193,21 +193,6 @@ export const sharedWebinarsData: WebinarData[] = [
         rating: 4.8,
         participants: '2,400+',
         slug: 'strategic-leadership-programme'
-      },
-      {
-        id: 2,
-        title: 'Data-Driven Decision Making',
-        description: 'Learn to make strategic decisions using data analytics and business intelligence',
-        duration: '8 hours',
-        format: 'Cohort-based',
-        image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=240&fit=crop',
-        price: '₹37,267',
-        originalPrice: '₹45,567',
-        category: 'Decision Making & Strategy',
-        level: 'Advanced',
-        rating: 4.9,
-        participants: '1,800+',
-        slug: 'data-driven-decision-making'
       }
     ]
   },
@@ -229,7 +214,7 @@ export const sharedWebinarsData: WebinarData[] = [
     category: 'Team Development',
     tags: ['Team Building', 'Emotional Intelligence', 'Performance', 'Leadership'],
     thumbnail: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0ZWFtJTIwbGVhZGVyc2hpcCUyMGNvbGxhYm9yYXRpb258ZW58MHx8fHwxNzM1ODU0MjcwfDA&ixlib=rb-4.0.3&q=80&w=1080',
-    status: 'upcoming' as const,
+    status: 'upcoming',
     featured: true,
     level: 'Intermediate',
     format: 'In Person',
@@ -302,21 +287,6 @@ export const sharedWebinarsData: WebinarData[] = [
         rating: 4.7,
         participants: '3,200+',
         slug: 'team-leadership-masterclass'
-      },
-      {
-        id: 3,
-        title: 'Emotional Intelligence for Leaders',
-        description: 'Develop emotional intelligence to enhance your leadership effectiveness and team relationships',
-        duration: '5 hours',
-        format: 'Self-paced',
-        image: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=240&fit=crop',
-        price: '₹14,857',
-        originalPrice: '₹19,007',
-        category: 'Personal Development',
-        level: 'Beginner',
-        rating: 4.9,
-        participants: '4,300+',
-        slug: 'emotional-intelligence-leaders'
       }
     ]
   },
@@ -337,8 +307,8 @@ export const sharedWebinarsData: WebinarData[] = [
     maxAttendees: 4000,
     category: 'Strategy',
     tags: ['Strategic Thinking', 'Crisis Management', 'Leadership', 'Planning'],
-    thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHJhdGVnaWMlMjBwbGFubmluZyUyMGxlYWRlcnNoaXB8ZW58MHx8fHwxNzM1ODU0Mjcwfda&ixlib=rb-4.0.3&q=80&w=1080',
+    thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHJhdGVnaWMlMjBwbGFubmluZyUyMGxlYWRlcnNoaXB8ZW58MHx8fHwxNzM1ODU0MjcwfDA&ixlib=rb-4.0.3&q=80&w=1080',
-    status: 'recorded' as const,
+    status: 'recorded',
     featured: false,
     level: 'Advanced',
     format: 'Virtual',
@@ -431,8 +401,8 @@ export const sharedWebinarsData: WebinarData[] = [
     maxAttendees: 2800,
     category: 'Personal Development',
     tags: ['Innovation', 'Creativity', 'Communication', 'Leadership'],
-    thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpbm5vdmF0aW9uJTIwbGVhZGVyc2hpcCUyMGNyZWF0aXZpdHl8ZW58MHx8fHwxNzM1ODU0Mjcwfda&ixlib=rb-4.0.3&q=80&w=1080',
+    thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpbm5vdmF0aW9uJTIwbGVhZGVyc2hpcCUyMGNyZWF0aXZpdHl8ZW58MHx8fHwxNzM1ODU0MjcwfDA&ixlib=rb-4.0.3&q=80&w=1080',
-    status: 'upcoming' as const,
+    status: 'upcoming',
     featured: false,
     level: 'Intermediate',
     format: 'Hybrid',
@@ -528,10 +498,10 @@ export const sharedWebinarsData: WebinarData[] = [
     duration: '70 min',
     attendees: '2,800+',
     maxAttendees: 3500,
-    category: 'Crisis Management',
+    category: 'Global Leadership',
     tags: ['Global Leadership', 'Cultural Intelligence', 'Communication', 'Diversity'],
-    thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxnbG9iYWwlMjB0ZWFtJTIwbGVhZGVyc2hpcCUyMGRpdmVyc2l0eXxlbnwwfHx8fDE3MzU4NTQyNzB8da&ixlib=rb-4.0.3&q=80&w=1080',
+    thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxnbG9iYWwlMjB0ZWFtJTIwbGVhZGVyc2hpcCUyMGRpdmVyc2l0eXxlbnwwfHx8fDE3MzU4NTQyNzB8MA&ixlib=rb-4.0.3&q=80&w=1080',
-    status: 'upcoming' as const,
+    status: 'upcoming',
     featured: false,
     level: 'Advanced',
     format: 'Virtual',
@@ -611,6 +581,204 @@ export const sharedWebinarsData: WebinarData[] = [
         slug: 'global-leadership-certificate'
       }
     ]
+  },
+  {
+    id: '6',
+    slug: 'strategic-decision-making',
+    title: 'Strategic Decision Making: Data-Driven Approaches for Leaders',
+    description: 'Master the art of making informed, strategic decisions using data analytics, critical thinking frameworks, and proven decision-making methodologies.',
+    presenter: 'Dr. Michael Thompson',
+    presenterTitle: 'Data Strategy Consultant',
+    company: 'Analytics Leadership Partners',
+    date: '2024-04-12',
+    time: '11:00',
+    endTime: '12:15',
+    timezone: 'EST',
+    duration: '75 min',
+    attendees: '1,950+',
+    maxAttendees: 2200,
+    category: 'Decision Making',
+    tags: ['Data Analytics', 'Strategic Thinking', 'Decision Making', 'Leadership'],
+    thumbnail: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkYXRhJTIwYW5hbHl0aWNzJTIwbGVhZGVyc2hpcCUyMGRlY2lzaW9uJTIwbWFraW5nfGVufDB8fHx8MTczNTg1NDI3MHww&ixlib=rb-4.0.3&q=80&w=1080',
+    status: 'upcoming',
+    featured: true,
+    level: 'Intermediate',
+    format: 'Virtual',
+    rating: 4.7,
+    price: 'Free',
+    registrationOpen: true,
+    recordingReady: false,
+    recordingUrl: '',
+    zoomUrl: 'https://zoom.us/j/1234567894',
+    theme: 'Data Leadership',
+    abstract: 'In an era of information overload, leaders must master the art of data-driven decision making. This session provides practical frameworks for analyzing complex data, avoiding cognitive biases, and making strategic choices that drive organizational success.',
+    keyTakeaways: [
+      'Apply data analysis frameworks to complex business problems',
+      'Identify and mitigate common cognitive biases in decision making',
+      'Develop decision-making processes that balance speed and accuracy',
+      'Communicate data-driven decisions effectively to stakeholders',
+      'Build data-informed cultures within your organization'
+    ],
+    agenda: [
+      {
+        time: '11:00 - 11:15',
+        title: 'The Data-Driven Leader',
+        description: 'Understanding the role of data in modern leadership'
+      },
+      {
+        time: '11:15 - 11:35',
+        title: 'Decision-Making Frameworks',
+        description: 'Proven methodologies for structured decision making'
+      },
+      {
+        time: '11:35 - 11:55',
+        title: 'Overcoming Cognitive Biases',
+        description: 'Strategies for recognizing and mitigating decision-making pitfalls'
+      },
+      {
+        time: '11:55 - 12:10',
+        title: 'Case Studies & Applications',
+        description: 'Real-world examples of data-driven leadership success'
+      },
+      {
+        time: '12:10 - 12:15',
+        title: 'Implementation Roadmap',
+        description: 'Next steps for enhancing your decision-making capabilities'
+      }
+    ],
+    host: {
+      id: 6,
+      name: 'Dr. Michael Thompson',
+      title: 'Data Strategy Consultant',
+      company: 'Analytics Leadership Partners',
+      bio: 'Dr. Michael Thompson specializes in helping leaders leverage data for strategic decision making. With a PhD in Business Analytics and 12 years of consulting experience, he has transformed decision-making processes in organizations across multiple industries.',
+      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
+      linkedin: 'https://linkedin.com/in/drmichaelthompson',
+      email: 'michael@analyticsleadership.com'
+    },
+    panelists: [],
+    faqs: [
+      {
+        question: 'Do I need technical data analysis skills for this session?',
+        answer: 'No technical background required! This session focuses on leadership decision-making frameworks rather than technical data analysis. We\'ll provide accessible tools that any leader can implement immediately.'
+      }
+    ],
+    relatedProgrammes: [
+      {
+        id: 6,
+        title: 'Data-Driven Decision Making',
+        description: 'Learn to make strategic decisions using data analytics and business intelligence',
+        duration: '8 hours',
+        format: 'Cohort-based',
+        image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=240&fit=crop',
+        price: '₹37,267',
+        originalPrice: '₹45,567',
+        category: 'Decision Making & Strategy',
+        level: 'Advanced',
+        rating: 4.9,
+        participants: '1,800+',
+        slug: 'data-driven-decision-making'
+      }
+    ]
+  },
+  {
+    id: '7',
+    slug: 'change-management-excellence',
+    title: 'Change Management Excellence: Leading Organizational Transformation',
+    description: 'Develop comprehensive change management strategies to successfully lead organizational transformations, manage resistance, and ensure sustainable change adoption.',
+    presenter: 'Dr. Lisa Washington',
+    presenterTitle: 'Organizational Change Expert',
+    company: 'Change Leadership Institute',
+    date: '2024-04-19',
+    time: '10:00',
+    endTime: '11:30',
+    timezone: 'EST',
+    duration: '90 min',
+    attendees: '2,300+',
+    maxAttendees: 2800,
+    category: 'Change Management',
+    tags: ['Change Management', 'Transformation', 'Leadership', 'Organizational Development'],
+    thumbnail: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaGFuZ2UlMjBtYW5hZ2VtZW50JTIwbGVhZGVyc2hpcCUyMHRyYW5zZm9ybWF0aW9ufGVufDB8fHx8MTczNTg1NDI3MHww&ixlib=rb-4.0.3&q=80&w=1080',
+    status: 'recorded',
+    featured: false,
+    level: 'Advanced',
+    format: 'Hybrid',
+    rating: 4.8,
+    price: 'Free',
+    registrationOpen: false,
+    recordingReady: true,
+    recordingUrl: 'https://video.example.com/change-management',
+    zoomUrl: '',
+    theme: 'Change Leadership',
+    abstract: 'Successful organizational change requires more than just good planning—it demands exceptional leadership. This session provides comprehensive frameworks for leading change initiatives, managing stakeholder resistance, and creating cultures that embrace continuous transformation.',
+    keyTakeaways: [
+      'Develop comprehensive change management strategies for complex initiatives',
+      'Identify and address common sources of resistance to change',
+      'Build stakeholder engagement and commitment throughout the change process',
+      'Create measurement systems to track change adoption and success',
+      'Develop change-ready organizational cultures that thrive on innovation'
+    ],
+    agenda: [
+      {
+        time: '10:00 - 10:20',
+        title: 'Change Leadership Fundamentals',
+        description: 'Understanding the psychology of change and leadership requirements'
+      },
+      {
+        time: '10:20 - 10:40',
+        title: 'Change Management Frameworks',
+        description: 'Proven methodologies for planning and executing organizational change'
+      },
+      {
+        time: '10:40 - 10:55',
+        title: 'Managing Resistance',
+        description: 'Strategies for identifying and overcoming resistance to change'
+      },
+      {
+        time: '10:55 - 11:15',
+        title: 'Sustaining Change',
+        description: 'Ensuring long-term adoption and embedding change into culture'
+      },
+      {
+        time: '11:15 - 11:30',
+        title: 'Q&A and Case Studies',
+        description: 'Interactive discussion and real-world application examples'
+      }
+    ],
+    host: {
+      id: 7,
+      name: 'Dr. Lisa Washington',
+      title: 'Organizational Change Expert',
+      company: 'Change Leadership Institute',
+      bio: 'Dr. Lisa Washington has over 18 years of experience helping organizations navigate major transformations. She holds a doctorate in Organizational Psychology and has authored numerous publications on change leadership and organizational development.',
+      avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face',
+      linkedin: 'https://linkedin.com/in/drlisawashington',
+      email: 'lisa@changeleadership.com'
+    },
+    panelists: [],
+    faqs: [
+      {
+        question: 'How can I apply these concepts to small-scale changes?',
+        answer: 'The principles and frameworks covered scale effectively from small team changes to enterprise-wide transformations. We\'ll provide adaptable tools that work across different change magnitudes.'
+      }
+    ],
+    relatedProgrammes: [
+      {
+        id: 7,
+        title: 'Change Management Certification',
+        description: 'Comprehensive change management training for leaders driving organizational transformation',
+        duration: '10 weeks',
+        format: 'Online',
+        image: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=240&fit=crop',
+        price: '₹49,567',
+        originalPrice: '₹61,967',
+        category: 'Change Management',
+        level: 'Advanced',
+        rating: 4.7,
+        participants: '2,300+',
+        slug: 'change-management-certification'
+      }
+    ]
   }
 ];