F<style>{`
                                                                                                                            .carousel-partner .carousel-partner-icon {
                                                                                                                              height: 110px;
                                                                                                                              display: flex;
                                                                                                                              align-items: center;
                                                                                                                              justify-content: center;
                                                                                                                              margin-bottom: 16px;
                                                                                                                            }
                                                                                                                            .carousel-partner .carousel-partner-icon img {
                                                                                                                              max-height: 110px !important;
                                                                                                                              width: auto;
                                                                                                                              object-fit: contain;
                                                                                                                              display: block;
                                                                                                                              margin: 0 auto;
                                                                                                                            }
                                                                                                                          `}</style>
                                                                                                      <style>{`
                                                                                                        .partner-carousel .carousel-track {
                                                                                                          display: flex;
                                                                                                          gap: 24px;
                                                                                                          padding: 8px 0;
                                                                                                          overflow-x: auto;
                                                                                                          justify-content: center;
                                                                                                          align-items: center;
                                                                                                          width: 100%;
                                                                                                          max-width: 1100px;
                                                                                                          margin: 0 auto;
                                                                                                        }
                                                                                                        .carousel-partner {
                                                                                                          min-width: 140px;
                                                                                                          max-width: 140px;
                                                                                                          flex: 0 0 auto;
                                                                                                        }
                                                                                                        @media (min-width: 1200px) {
                                                                                                          .carousel-partner {
                                                                                                            min-width: 140px;
                                                                                                            max-width: 140px;
                                                                                                          }
                                                                                                          .partner-carousel .carousel-track {
                                                                                                            max-width: 900px;
                                                                                                          }
                                                                                                        }
                                                                                                        @media (min-width: 1200px) {
                                                                                                          .partner-carousel .carousel-track {
                                                                                                            max-width: 900px;
                                                                                                          }
                                                                                                          .carousel-partner {
                                                                                                            min-width: 140px;
                                                                                                            max-width: 140px;
                                                                                                          }
                                                                                                        }
                                                                                                        @media (min-width: 1200px) {
                                                                                                          .partner-carousel .carousel-track {
                                                                                                            max-width: 900px;
                                                                                                          }
                                                                                                          .carousel-partner {
                                                                                                            min-width: 140px;
                                                                                                            max-width: 140px;
                                                                                                          }
                                                                                                        }
                                                                                                        @media (max-width: 1023px) and (min-width: 769px) {
                                                                                                          .carousel-partner {
                                                                                                            min-width: 180px;
                                                                                                            max-width: 180px;
                                                                                                          }
                                                                                                          .partner-carousel .carousel-track {
                                                                                                            max-width: 360px;
                                                                                                          }
                                                                                                        }
                                                                                                        @media (max-width: 768px) {
                                                                                                          .carousel-partner {
                                                                                                            min-width: 48vw;
                                                                                                            max-width: 48vw;
                                                                                                          }
                                                                                                          .partner-carousel .carousel-track {
                                                                                                            max-width: 96vw;
                                                                                                            animation: scrollCarousel 18s linear infinite;
                                                                                                          }
                                                                                                          @keyframes scrollCarousel {
                                                                                                            0% { transform: translateX(0); }
                                                                                                            100% { transform: translateX(-48vw); }
                                                                                                          }
                                                                                                          .partner-carousel .carousel-track:hover {
                                                                                                            animation-play-state: paused;
                                                                                                          }
                                                                                                        }
                                                                                                        @media (max-width: 480px) {
                                                                                                          .carousel-partner {
                                                                                                            min-width: 98vw;
                                                                                                            max-width: 98vw;
                                                                                                          }
                                                                                                          .partner-carousel .carousel-track {
                                                                                                            max-width: 98vw;
                                                                                                            animation: scrollCarousel 14s linear infinite;
                                                                                                          }
                                                                                                          @keyframes scrollCarousel {
                                                                                                            0% { transform: translateX(0); }
                                                                                                            100% { transform: translateX(-98vw); }
                                                                                                          }
                                                                                                          .partner-carousel .carousel-track:hover {
                                                                                                            animation-play-state: paused;
                                                                                                          }
                                                                                                        }
                                                                                                      `}{`
                                                              .partner-carousel .carousel-track {
                                                                display: flex;
                                                                gap: 24px;
                                                                padding: 8px 0;
                                                                overflow-x: auto;
                                                                justify-content: center;
                                                                align-items: center;
                                                                width: 100%;
                                                                max-width: 1100px;
                                                                margin: 0 auto;
                                                                animation: scrollCarousel 30s linear infinite;
                                                              }
                                                              .carousel-partner {
                                                                min-width: 170px;
                                                                max-width: 170px;
                                                                flex: 0 0 auto;
                                                              }
                                                              @media (min-width: 1200px) {
                                                                .carousel-partner {
                                                                  min-width: 170px;
                                                                  max-width: 170px;
                                                                }
                                                                .partner-carousel .carousel-track {
                                                                  max-width: 1100px;
                                                                }
                                                              }
                                                              @media (min-width: 1024px) and (max-width: 1199px) {
                                                                .carousel-partner {
                                                                  min-width: 180px;
                                                                  max-width: 180px;
                                                                }
                                                                .partner-carousel .carousel-track {
                                                                  max-width: 800px;
                                                                }
                                                              }
                                                              @media (max-width: 1023px) and (min-width: 769px) {
                                                                .carousel-partner {
                                                                  min-width: 220px;
                                                                  max-width: 220px;
                                                                }
                                                                .partner-carousel .carousel-track {
                                                                  max-width: 660px;
                                                                }
                                                              }
                                                              @media (max-width: 768px) {
                                                                .carousel-partner {
                                                                  min-width: 90vw;
                                                                  max-width: 90vw;
                                                                }
                                                                .partner-carousel .carousel-track {
                                                                  max-width: 90vw;
                                                                }
                                                                .carousel-label-main {
                                                                  font-size: 1.3rem !important;
                                                                }
                                                                .trusted-industry-text {
                                                                  font-size: 13px !important;
                                                                }
                                                              }
                                                              @media (max-width: 480px) {
                                                                .carousel-partner {
                                                                  min-width: 98vw;
                                                                  max-width: 98vw;
                                                                }
                                                                .partner-carousel .carousel-track {
                                                                  max-width: 98vw;
                                                                }
                                                                .carousel-label-main {
                                                                  font-size: 1rem !important;
                                                                }
                                                                .trusted-industry-text {
                                                                  font-size: 11px !important;
                                                                }
                                                              }
                                                            `}</style>
                                        <style>{`
                                          .partner-carousel .carousel-track {
                                            display: flex;
                                            gap: 24px;
                                            padding: 8px 0;
                                            overflow-x: auto;
                                            justify-content: center;
                                            align-items: center;
                                            width: 100%;
                                            max-width: 1100px;
                                            margin: 0 auto;
                                            animation: scrollCarousel 30s linear infinite;
                                          }
                                          @keyframes scrollCarousel {
                                            0% { transform: translateX(0); }
                                            100% { transform: translateX(-50%); }
                                          }
                                          .partner-carousel .carousel-track:hover {
                                            animation-play-state: paused;
                                          }
                                          @media (max-width: 1024px) {
                                            .partner-carousel .carousel-track {
                                              animation: none;
                                            }
                                          }
                                          @media (max-width: 768px) {
                                            .partner-carousel .carousel-track {
                                              animation: none;
                                            }
                                          }
                                          @media (max-width: 480px) {
                                            .partner-carousel .carousel-track {
                                              animation: none;
                                            }
                                          }
                                        `}</style>
                    <style>{`
                      .partner-carousel .carousel-track {
                        display: flex;
                        gap: 24px;
                        padding: 8px 0;
                        overflow-x: auto;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                      }
                      .partner-carousel .carousel-track::-webkit-scrollbar {
                        height: 8px;
                      }
                      .partner-carousel .carousel-track::-webkit-scrollbar-thumb {
                        background: #e5e7eb;
                        border-radius: 4px;
                      }
                      @media (min-width: 1200px) {
                        .partner-carousel .carousel-track {
                          justify-content: center;
                        }
                        .carousel-partner {
                          min-width: 220px;
                          max-width: 220px;
                        }
                      }
                      @media (max-width: 1024px) {
                        .partner-carousel .carousel-track {
                          justify-content: center;
                        }
                        .carousel-partner {
                          min-width: 180px;
                          max-width: 180px;
                        }
                      }
                      @media (max-width: 768px) {
                        .partner-carousel .carousel-track {
                          justify-content: center;
                        }
                        .carousel-partner {
                          min-width: 90vw;
                          max-width: 90vw;
                        }
                        .carousel-label-main {
                          font-size: 1.3rem !important;
                        }
                        .trusted-industry-text {
                          font-size: 13px !important;
                        }
                      }
                      @media (max-width: 480px) {
                        .partner-carousel .carousel-track {
                          justify-content: center;
                        }
                        .carousel-partner {
                          min-width: 98vw;
                          max-width: 98vw;
                        }
                        .carousel-label-main {
                          font-size: 1rem !important;
                        }
                        .trusted-industry-text {
                          font-size: 11px !important;
                        }
                      }
                    `}</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="BFSI Sector Skill Council of India - Building Future-Ready Workforce for Banking, Financial Services and Insurance Sector through Training, Assessment, Certification and Employment Programs">
    <meta name="keywords" content="BFSI SSC, Skill India, Banking Skills, Insurance Training, FinTech, NSDC, Certification, Apprenticeship">
    <meta name="author" content="BFSI Sector Skill Council">
    <title>BFSI SSC | Future-Ready Workforce for BFSI Sector</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- AOS Animations -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    
    <!-- Custom Styles -->
    <link rel="stylesheet" href="css/styles.css?v=2">
    
    
    <!-- Smooth Scrolling -->
    <style>
        html {
            scroll-behavior: smooth;
        }
        
        /* Smooth scroll for all anchor links */
        a[href^="#"] {
            scroll-behavior: smooth;
        }
    </style>
    <!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1527054801336322');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1527054801336322&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KD78VJLT');</script>
<!-- End Google Tag Manager -->

</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-88HG4F0P7C"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-88HG4F0P7C');
</script>
<script type="text/babel" src="chatbot.js"></script>
<body>
    <div id="root" style="background: #0f172a;">

    <!-- React & ReactDOM CDN -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    
    <!-- Babel for JSX - MUST be loaded before any JSX scripts -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <!-- Babel Configuration & Warning Suppression -->
    <script>
        // Suppress Babel transformer warning for development
        window.BABEL_DISABLE_CACHE = true;
        if (typeof Babel !== 'undefined') {
            Babel.DEFAULT_PLUGINS = Babel.DEFAULT_PLUGINS || [];
        }
    </script>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- GSAP -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
    
    <!-- AOS -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <!-- Swiper -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    
    <!-- Debug Console -->
    <script>
        console.log("Page loading...");
        window.onerror = function(msg, url, lineNo, columnNo, error) {
            console.error('ERROR: ' + msg);
            console.error('URL: ' + url);
            console.error('Line: ' + lineNo);
            console.error(error);
            return false;
        };
    </script>

    <!-- Test React inline -->
    <script type="text/babel">
        console.log("Babel is working!");
        console.log("React version:", React.version);
        console.log("ReactDOM:", ReactDOM);

        // Global CMS Data
        let cmsData = {};

        // Load CMS content from API
        async function loadCmsContent() {
            try {
                const response = await fetch('cms/cms-api.php');
                cmsData = await response.json();
                console.log('CMS Data Loaded:', cmsData);
                initializeApp();
            } catch (error) {
                console.error('Error loading CMS data:', error);
                // Fallback: render app without dynamic data
                initializeApp();
            }
        }

        function initializeApp() {
            // Render the App
            console.log("Rendering React App...");
            const root = ReactDOM.createRoot(document.getElementById("root"))
            root.render(<App />)
            console.log("React render completed");
            console.log("Root element:", document.getElementById("root"));
            console.log("Root children:", document.getElementById("root").children.length);
        }

        // ===== TopBar Component =====
        const TopBar = () => {
          return (
            <div className="top-bar">
              <div className="container-custom">
                <div className="top-bar-content">
                  <div className="top-bar-left">
                    
                    <a href="mailto:info@bfsissc.com">
  <i className="fas fa-envelope"></i>
  info@bfsissc.com
</a>
                  </div>
                  <div className="top-bar-right">
                    <div className="top-bar-links">
                      <a href="News">
                        <i className="fas fa-check-circle"></i> News
                      </a>
                      <a href="https://bfsissc.com/blog2">
                        <i className="fas fa-bullhorn"></i> BLOGS
                      </a>
                      <a href="https://beep.bfsissc.com/candidate_register/mkt">
                        <i className="fas fa-globe"><span>  </span></i> BEEP (BFSI Employment Exchange Portal)
                      </a>
                    </div>
                    
                  </div>
                </div>
              </div>
            </div>
          )
        }

        // ===== MegaNavbar Component =====
        const MegaNavbar = () => {
          const [scrolled, setScrolled] = React.useState(false)
          const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
          const [activeMenu, setActiveMenu] = React.useState(null)
          const [expandedMobile, setExpandedMobile] = React.useState(null)

          React.useEffect(() => {
            const handleScroll = () => {
              setScrolled(window.scrollY > 50)
            }
            window.addEventListener("scroll", handleScroll)
            return () => window.removeEventListener("scroll", handleScroll)
          }, [])

          React.useEffect(() => {
            if (mobileMenuOpen) {
              document.body.classList.add('mobile-menu-open')
            } else {
              document.body.classList.remove('mobile-menu-open')
            }
            return () => document.body.classList.remove('mobile-menu-open')
          }, [mobileMenuOpen])

         const menuItems = [
  {
    title: "About Us",
    items: [
      { icon: "fa-building", title: "About BFSI SSC", desc: "Our mission and vision", link: "AboutPage", color: "#0ea5e9" },
      { icon: "fa-trophy", title: "News and Events", desc: "Latest updates", link: "EventsPage", color: "#ec4899" },
      { icon: "fa-newspaper", title: "Awards and Achievements", desc: "Our recognitions", link: "AwardsPage", color: "#0ea5e9" },
    ],
  },
  {
    title: "Standards",
    items: [
      { icon: "fa-file-alt", title: "QP/NOS Library", desc: "Qualification packs & standards", link: "QpNos", color: "#ec4899" },
      { icon: "fa-question", title: "Sample Question Bank", desc: "Sample Question Bank", link: "SampleQuestionBank", color: "#ec4899" },
      { icon: "fa-graduation-cap", title: "BFSI Sector Skill Gap Study 2020-25", desc: "BFSI Sector Skill Gap Study 2020-25", link: "https://bfsissc.com/courses/BFSI-Brochure.pdf", color: "#ec4899" },
    ],
  },
  {
    title: "Partners",
     items: [
      { icon: "fa-briefcase", title: "Industry & Corporate Partners", desc: "Academic partnerships", link: "IndustryPartners", color: "#10b981" },
      { icon: "fa-handshake", title: "Training Centers", desc: "Authorized training providers", link: "TrainingPartners", color: "#ec4899" },
      { icon: "fa-school", title: "Academic Partners", desc: "Authorized training partners", link: "Institutions", color: "#ec4899" },
      { icon: "fa-clipboard-list", title: "Assessment Agencies", desc: "Agencies", link: "Agencies", color: "#ec4899" },
      { icon: "fa-certificate", title: "Certification Framework", desc: "Certification", link: "CertificationFramework", color: "#ec4899" },
      { icon: "fa-graduation-cap", title: "Learners / Candidates", desc: "Learners", link: "Learners", color: "#ec4899" },
    ],
  },
  {
    title: "Career",
    items: [
      { icon: "fa-briefcase", title: "Apprenticeships", desc: "Apprenticeship programs", link: "Apprenticeships", color: "#8b5cf6" },
      { icon: "fa-rocket", title: "Employment", desc: "Job placement services", link: "Careers", color: "#0ea5e9" },
      { icon: "fa-bullseye", title: "Projects & Impact", desc: "Strategic goals and targets", link: "Projects", color: "#f59e0b" },
      { icon: "fa-book-open", title: "Courses", desc: "Upgrade Your Skills", link: "Courses", color: "#0ea5e9" },
    ],
  },
  {
    title: "Resources",
    items: [
      { icon: "fa-download", title: "TOT Calendar", desc: "TOT Calendar", link: "TotCalendar", color: "#0ea5e9" },
      { icon: "fa-download", title: "Accreditation and Affiliation Guidelines", desc: "Guidelines", link: "https://bfsissc.com/courses/guidelines.pdf", color: "#0ea5e9" },
    ],
  },
  {
  title: "Contact Us",
  items: [
    { icon: "fa-envelope", title: "Contact Us", desc: "Get in touch with BFSI SSC", link: "https://bfsissc.com/contact-us.php", color: "#f59e0b" },
  ],
},
]

          return (
            <React.Fragment>
            
              <nav className={`mega-navbar ${scrolled ? "scrolled" : ""}`}>
                <div className="navbar-container">
                  <a href="index.php" className="navbar-logo">
                    <img src="https://bfsissc.com/website/images/logo (1).png" alt="BFSI Sector Skill Council of India" className="navbar-logo-img" />
                  </a>
                  <a 
  href="index.php" 
  title="Home"
  style={{
    marginLeft: "8px",
    fontSize: "14px",
    color: "#0f172a",
    transition: "0.2s"
  }}
  onMouseDown={e => e.currentTarget.style.transform = "scale(0.85)"}
  onMouseUp={e => e.currentTarget.style.transform = "scale(1)"}
>
  <i className="fas fa-home"></i>
</a>

                  <div className="navbar-menu">
                    {menuItems.map((menu, index) => (
                      <div 
                        className="nav-item" 
                        key={index} 
                        onMouseEnter={() => setActiveMenu(index)} 
                        onMouseLeave={() => setActiveMenu(null)}
                      >
                        <a href="#" className="nav-link">
                          <i className={`fas ${menu.icon}`}></i>
                          {menu.title}
                          <i className="fas fa-chevron-down"></i>
                        </a>
                        <div className={`mega-menu ${activeMenu === index ? "active" : ""}`}>
                          <div className="mega-menu-header">
                            <h3>{menu.title}</h3>
                            <div className="header-line"></div>
                          </div>
                          <div className="mega-menu-grid">
                            {menu.items.map((item, idx) => (
                              <a href={item.link} className="mega-menu-item" key={idx} style={{"--item-color": item.color}}>
                                <div className="mega-menu-icon" style={{color: item.color}}>
                                  <i className={`fas ${item.icon}`}></i>
                                </div>
                                <div className="mega-menu-content">
                                  <h4>{item.title}</h4>
                                  <p>{item.desc}</p>
                                </div>
                                <div className="mega-menu-arrow">
                                  <i className="fas fa-arrow-right"></i>
                                </div>
                              </a>
                            ))}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="navbar-cta">
                    <a href="careers.php" className="btn-primary" style={{ backgroundColor: "#ef4444", color: "#fff" }}>
                      <i className="fas fa-arrow-right"></i>
                      Explore Jobs
                    </a>
                  </div>

                  <button className={`mobile-menu-toggle ${mobileMenuOpen ? "hidden" : ""}`} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
                    <i className="fas fa-bars"></i>
                  </button>
                </div>
              </nav>

              {/* Mobile Navigation */}
              <div className={`mobile-nav ${mobileMenuOpen ? "active" : ""}`}>
                <div className="mobile-nav-header">
                  <a href="index.php" className="navbar-logo">
                    <img src="https://bfsissc.com/website/images/logo (1).png" alt="BFSI Sector Skill Council of India" className="navbar-logo-img" />
                  </a>
                  <button className="mobile-nav-close" onClick={() => setMobileMenuOpen(false)}>
                    <i className="fas fa-times"></i>
                  </button>
                </div>
                <div className="mobile-nav-menu">
                  {menuItems.map((menu, index) => (
                    <div className="mobile-nav-item" key={index}>
                      <button 
                        className="mobile-nav-link"
                        onClick={() => setExpandedMobile(expandedMobile === index ? null : index)}
                      >
                        <i className={`fas ${menu.icon}`}></i>
                        {menu.title}
                        <i className={`fas fa-chevron-down ${expandedMobile === index ? "open" : ""}`}></i>
                      </button>
                      <div className={`mobile-submenu ${expandedMobile === index ? "active" : ""}`}>
                        {menu.items.map((item, idx) => (
                          <a href={item.link} key={idx} className="mobile-submenu-item">
                            <div className="mobile-submenu-icon" style={{color: item.color}}>
                              <i className={`fas ${item.icon}`}></i>
                            </div>
                            <div>
                              <div className="mobile-submenu-title">{item.title}</div>
                              <div className="mobile-submenu-desc">{item.desc}</div>
                            </div>
                          </a>
                        ))}
                      </div>
                    </div>
                  ))}
                  <div className="mobile-nav-footer">
                    <a href="media.php" className="mobile-footer-link">
                      <i className="fas fa-bell"></i> Updates
                    </a>
                    <a href="about.php" className="mobile-footer-link">
                      <i className="fas fa-phone"></i> Contact
                    </a>
                  </div>
                </div>
              </div>
            </React.Fragment>
          )
        }

        // ===== Minimalist Hero Carousel with Full Background Image =====
        const HeroCarousel = () => {
          const [currentSlide, setCurrentSlide] = React.useState(0)
          const [isAutoPlay, setIsAutoPlay] = React.useState(true)

          const slides = cmsData.hero?.slides || [
            {
              id: 1,
              category: "Industry Leadership",
              headline: "India's Official Skill Authority for the BFSI Sector",
              subtext: "Setting national standards for Banking, Financial Services, and Insurance roles in partnership with industry leaders.",
              cta: "Explore Standards",
              link: "qp-nos.php",
              accentColor: "#ef4444",
              bgImage: "1.webp"
            }
          ]

          // Auto-play logic with pause on hover
          React.useEffect(() => {
            if (!isAutoPlay) return
            const interval = setInterval(() => {
              setCurrentSlide((prev) => (prev + 1) % slides.length)
            }, 6000)
            return () => clearInterval(interval)
          }, [slides.length, isAutoPlay])

          const currentSlideData = slides[currentSlide]
          const goToSlide = (index) => {
            setCurrentSlide(index)
            setIsAutoPlay(false)
          }

          return (
            <section className="hero-section" style={{
              minHeight: "80vh",
              position: "relative",
              overflow: "hidden",
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-end",
              paddingTop: "0",
              width: "100%",
              boxSizing: "border-box"
            }}>
              <style>{`
                @keyframes fadeInContent {
                  from { opacity: 0; transform: translateY(20px); }
                  to { opacity: 1; transform: translateY(0); }
                }
                @keyframes slideInLeft {
                  from { opacity: 0; transform: translateX(-40px); }
                  to { opacity: 1; transform: translateX(0); }
                }
                @keyframes pulse {
                  0%, 100% { opacity: 1; }
                  50% { opacity: 0.6; }
                }
                .hero-content-animate {
                  animation: slideInLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
                }
                .hero-category-animate {
                  animation: fadeInContent 0.6s ease-out forwards;
                }
                .hero-headline-animate {
                  animation: fadeInContent 0.6s ease-out 0.1s forwards;
                  opacity: 0;
                }
                .hero-subtext-animate {
                  animation: fadeInContent 0.6s ease-out 0.2s forwards;
                  opacity: 0;
                }
                .hero-cta-animate {
                  animation: fadeInContent 0.6s ease-out 0.3s forwards;
                  opacity: 0;
                }
                .slider-dot {
                  cursor: pointer;
                  transition: all 0.3s ease;
                }
                .slider-dot:hover {
                  transform: scale(1.2);
                }
                .slider-arrow {
                  cursor: pointer;
                  transition: all 0.3s ease;
                  user-select: none;
                }
                .slider-arrow:hover {
                  transform: scale(1.15);
                }
                
                /* Responsive Hero Media Queries */
                @media (max-width: 1024px) {
                  .hero-section-content {
                    padding-left: 60px !important;
                    padding-right: 60px !important;
                  }
                  .hero-headline-animate {
                    font-size: 2rem !important;
                  }
                  .hero-subtext-animate {
                    font-size: 15px !important;
                  }
                  .hero-section {
                    min-height: 70vh !important;
                  }
                }
                
                @media (max-width: 768px) {
                  .hero-section-content {
                    padding-left: 30px !important;
                    padding-right: 30px !important;
                    justify-content: center !important;
                    align-items: center !important;
                  }
                  .hero-section {
                    min-height: 60vh !important;
                  }
                  .hero-content-animate {
                    max-width: 100% !important;
                    text-align: center;
                  }
                  .hero-headline-animate {
                    font-size: 1.5rem !important;
                    line-height: 1.3 !important;
                  }
                  .hero-category-animate {
                    font-size: 10px !important;
                    justify-content: center !important;
                  }
                  .hero-subtext-animate {
                    font-size: 14px !important;
                    margin-bottom: 24px !important;
                  }
                  .hero-buttons-container {
                    flex-direction: column !important;
                    justify-content: center !important;
                  }
                  .hero-btn {
                    width: 100% !important;
                    justify-content: center !important;
                  }
                  .hero-slider-dots {
                    bottom: 30px !important;
                  }
                  .hero-slider-counter {
                    bottom: 30px !important;
                    right: 30px !important;
                    font-size: 11px !important;
                  }
                }
                
                @media (max-width: 480px) {
                  .hero-section-content {
                    padding-left: 20px !important;
                    padding-right: 20px !important;
                    height: 60vh !important;
                  }
                  .hero-section {
                    min-height: 50vh !important;
                  }
                  .hero-headline-animate {
                    font-size: 1.2rem !important;
                  }
                  .hero-category-animate {
                    font-size: 9px !important;
                    display: inline-block !important;
                  }
                  .hero-subtext-animate {
                    font-size: 13px !important;
                    margin-bottom: 20px !important;
                  }
                  .hero-btn {
                    padding: 11px 20px !important;
                    font-size: 12px !important;
                  }
                  .hero-slider-counter {
                    display: none;
                  }
                  .hero-slider-dots {
                    gap: 6px !important;
                    bottom: 20px !important;
                  }
                  .slider-dot {
                    width: 6px !important;
                    height: 6px !important;
                  }
                  .slider-dot:not(.active) {
                    display: none;
                  }
                }
              `}</style>

              {/* Full Background Image */}
              <div style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                backgroundImage: `url('${currentSlideData.bgImage}')`,
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundRepeat: "no-repeat",
                transition: "background-image 0.7s ease-out",
                zIndex: 1
              }}></div>

              {/* Minimalist Dark Overlay - Left side gradient */}
              <div style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                background: "linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.6) 40%, transparent 100%)",
                zIndex: 2,
                transition: "all 0.7s ease-out"
              }}></div>

              {/* Content Container */}
              <div className="hero-section-content" style={{
                position: "relative",
                zIndex: 4,
                width: "100%",
                height: "80vh",
                display: "flex",
                alignItems: "center",
                justifyContent: "flex-start",
                paddingLeft: "80px",
                paddingRight: "120px"
              }}>
                <div className="hero-content-animate" style={{
                  maxWidth: "620px",
                  width: "100%"
                }}>
                  <div className="hero-category-animate" style={{
                    fontSize: "11px",
                    fontWeight: "800",
                    letterSpacing: "2.5px",
                    color: "#ffffff",
                    textTransform: "uppercase",
                    marginBottom: "16px",
                    display: "inline-block",
                    paddingBottom: "6px"
                  }}>
                    {currentSlideData.category}
                  </div>

                  <h3 className="hero-headline-animate" style={{
                    fontSize: "2.5rem",
                    fontWeight: "800",
                    lineHeight: "1.2",
                    color: "#ffffff",
                    marginBottom: "20px",
                    letterSpacing: "-0.5px",
                    fontFamily: "Arial, sans-serif"
                  }}>
                    {currentSlideData.headline}
                  </h3>

                  <p className="hero-subtext-animate" style={{
                    fontSize: "16px",
                    lineHeight: "1.75",
                    color: "#cbd5e1",
                    marginBottom: "36px",
                    fontWeight: "400",
                    letterSpacing: "0.3px"
                  }}>
                    {currentSlideData.subtext}
                  </p>

                  <div className="hero-buttons-container" style={{display: "flex", gap: "16px", alignItems: "center"}}>
                    <a 
                      href={currentSlideData.link}
                      className="hero-cta-animate hero-btn"
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        gap: "8px",
                        padding: "13px 32px",
                        background: currentSlideData.accentColor,
                        color: "#ffffff",
                        textDecoration: "none",
                        borderRadius: "6px",
                        fontSize: "14px",
                        fontWeight: "700",
                        transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
                        border: "none",
                        cursor: "pointer",
                        letterSpacing: "0.5px"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.transform = "translateY(-2px)";
                        e.currentTarget.style.boxShadow = `0 12px 24px ${currentSlideData.accentColor}35`;
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.transform = "translateY(0)";
                        e.currentTarget.style.boxShadow = "none";
                      }}
                    >
                      {currentSlideData.cta}
                      <i className="fas fa-arrow-right" style={{fontSize: "11px"}}></i>
                    </a>
                    <a 
                      href="about.php"
                      className="hero-cta-animate hero-btn"
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        gap: "8px",
                        padding: "13px 32px",
                        background: "transparent",
                        color: "#ffffff",
                        textDecoration: "none",
                        borderRadius: "6px",
                        fontSize: "14px",
                        fontWeight: "700",
                        transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
                        border: `2px solid ${currentSlideData.accentColor}`,
                        cursor: "pointer",
                        letterSpacing: "0.5px"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = currentSlideData.accentColor;
                        e.currentTarget.style.transform = "translateY(-2px)";
                        e.currentTarget.style.boxShadow = `0 12px 24px ${currentSlideData.accentColor}35`;
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = "transparent";
                        e.currentTarget.style.transform = "translateY(0)";
                        e.currentTarget.style.boxShadow = "none";
                      }}
                    >
                      Industry Partners
                      <i className="fas fa-handshake" style={{fontSize: "11px"}}></i>
                    </a>
                  </div>
                </div>
              </div>

              {/* Navigation Dots - Bottom Center */}
              <div className="hero-slider-dots" style={{
                position: "absolute",
                bottom: "40px",
                left: "50%",
                transform: "translateX(-50%)",
                display: "flex",
                gap: "10px",
                zIndex: 5,
                alignItems: "center"
              }}>
                {slides.map((_, idx) => (
                  <div
                    key={idx}
                    className="slider-dot"
                    onClick={() => goToSlide(idx)}
                    style={{
                      width: currentSlide === idx ? "28px" : "8px",
                      height: "8px",
                      background: currentSlide === idx ? currentSlideData.accentColor : "rgba(255, 255, 255, 0.3)",
                      borderRadius: "4px",
                      transition: "all 0.4s ease"
                    }}
                  />
                ))}
              </div>

              {/* Slide Counter */}
              <div className="hero-slider-counter" style={{
                position: "absolute",
                bottom: "40px",
                right: "40px",
                fontSize: "13px",
                fontWeight: "700",
                color: "rgba(255, 255, 255, 0.5)",
                letterSpacing: "1px",
                textTransform: "uppercase",
                zIndex: 5
              }}>
                {String(currentSlide + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
              </div>
            </section>
          )
        }

        // ===== TrustSection Component (NEW) =====
        const TrustSection = () => {
          // Handle both CMS data format and fallback format
          const trustMetrics = cmsData.trustSection?.metrics?.map(metric => ({
            number: metric.suffix ? `${metric.number} ${metric.suffix}` : metric.number,
            label: metric.label,
            icon: metric.icon,
            color: metric.color || "#094871"
          })) || [
            { number: "28", label: "States Covered", icon: "fa-map-location-dot", color: "#094871" },
            { number: "450+", label: "Training Partners", icon: "fa-chalkboard-teacher", color: "#094871" },
            { number: "1.5 L+", label: "Certified Candidates", icon: "fa-user-graduate", color: "#094871" },
            { number: "2.29 L+", label: "Apprenticeships Enabled", icon: "fa-university", color: "#094871" }
          ]

          const title = cmsData.trustSection?.title || "BFSI SSC at a Glance"
          const description = cmsData.trustSection?.description || "Empowering India's BFSI workforce since 2011 through Government-approved skill development"

          return (
            <section style={{padding: "100px 0", background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)", position: "relative", overflow: "hidden"}}>
              {/* Decorative Elements */}
              <div style={{position: "absolute", top: "-50px", right: "-50px", width: "400px", height: "400px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%)", borderRadius: "50%"}}></div>
              <div style={{position: "absolute", bottom: "-100px", left: "-100px", width: "500px", height: "500px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%)", borderRadius: "50%"}}></div>
              
              <div className="container-custom" style={{position: "relative", zIndex: "1"}}>
                {/* Header Section */}
                <div style={{textAlign: "center", marginBottom: "80px"}} data-aos="fade-up">
                  <div style={{display: "inline-block", padding: "8px 16px", background: "#0f172a", borderRadius: "50px", marginBottom: "16px"}}>
                    <span style={{fontSize: "13px", fontWeight: "700", color: "#ffffff", letterSpacing: "1px", textTransform: "uppercase"}}>Our Strength</span>
                  </div>
                  <h2 style={{fontSize: "2.8rem", fontWeight: "700", color: "#0f172a", marginBottom: "16px", lineHeight: "1.2", fontFamily: "Arial, sans-serif"}}>
                   {title}
                  </h2>
                  <p style={{fontSize: "17px", color: "#475569", fontWeight: "400", lineHeight: "1.7", maxWidth: "700px", margin: "0 auto"}}>
                    {description}
                  </p>
                </div>

                {/* Metrics Grid */}
                <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "32px", marginBottom: "100px"}}>
                  {trustMetrics.map((metric, idx) => (
                    <div key={idx} data-aos="fade-up" data-aos-delay={idx * 100} 
                      style={{
                        padding: "40px 32px",
                        background: "#ffffff",
                        borderRadius: "16px",
                        border: "2px solid #e5e7eb",
                        textAlign: "center",
                        transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
                        cursor: "pointer",
                        position: "relative",
                        overflow: "hidden"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.borderColor = "#2596be";
                        e.currentTarget.style.boxShadow = "0 16px 40px rgba(14, 165, 233, 0.15)";
                        e.currentTarget.style.transform = "translateY(-8px)";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.borderColor = "#e5e7eb";
                        e.currentTarget.style.boxShadow = "none";
                        e.currentTarget.style.transform = "translateY(0)";
                      }}>
                      {/* Icon Background Circle */}
                      <div style={{
                        position: "absolute",
                        top: "-40px",
                        right: "-40px",
                        width: "120px",
                        height: "120px",
                        background: "rgba(14, 165, 233, 0.08)",
                        borderRadius: "50%"
                      }}></div>
                      
                      <div style={{fontSize: "56px", color: "#094871", marginBottom: "20px", position: "relative", zIndex: "1"}}>
                        <i className={`fas ${metric.icon}`}></i>
                      </div>
                      <div style={{fontSize: "44px", fontWeight: "700", color: "rgb(9, 72, 113)", marginBottom: "12px", background: "linear-gradient(135deg, rgb(9, 72, 113) 0%, rgb(14, 165, 233) 100%)", backgroundClip: "text", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", marginTop: "0"}}>
                        {metric.number}
                      </div>
                      <div style={{fontSize: "15px", fontWeight: "600", color: "#0ea5e9", marginBottom: "8px"}}>
                        {metric.label}
                      </div>
                      <div style={{fontSize: "13px", color: "#64748b", fontWeight: "400", lineHeight: "1.5"}}>
                        {idx === 0 && "Across India"}
                        {idx === 1 && " Strong Network"}
                        {idx === 2 && "Skilled Professionals"}
                        {idx === 3 && "Career Opportunities"}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Backing Section */}
                <div style={{marginTop: "80px", paddingTop: "80px", borderTop: "2px solid rgba(14, 165, 233, 0.2)"}}>
                  <div style={{textAlign: "center", marginBottom: "80px"}} data-aos="fade-up">
                    <div style={{display: "inline-block", padding: "8px 16px", background: "#0f172a", borderRadius: "50px", marginBottom: "16px"}}>
                      <span style={{fontSize: "13px", fontWeight: "700", color: "#ffffff", letterSpacing: "1px", textTransform: "uppercase"}}>Government & Industry Support</span>
                    </div>
                    <h2 style={{fontSize: "2.8rem", fontWeight: "700", color: "#0f172a", marginBottom: "24px", lineHeight: "1.2", fontFamily: "Arial, sans-serif"}}>
                      Backed by Leading  Industry 
                    </h2>
                    <div style={{maxWidth: "800px", margin: "0 auto"}}>
                      <p style={{fontSize: "17px", color: "#475569", fontWeight: "400", lineHeight: "1.8", marginBottom: "0"}}>
                        BFSI Sector Skill Council of India operates under the guidance of key national bodies including <span style={{fontWeight: "600", color: "#0ea5e9"}}><a href="https://ncvet.gov.in/"> NCVET </a></span>, <span style={{fontWeight: "600", color: "#0ea5e9"}}><a href="https://www.msde.gov.in/en">MSDE</a></span>, and <span style={{fontWeight: "600", color: "#0ea5e9"}}><a href="https://nsdcindia.org/">NSDC</a></span>, ensuring alignment with India's skill development frameworks and national skilling objectives. Promoted by premier institutions such as <span style={{fontWeight: "600", color: "#0ea5e9"}}><a href="https://www.bseindia.com/">BSE</a></span> and <span style={{fontWeight: "600", color: "#0ea5e9"}}><a href="https://www.nseindia.com/">NSE</a></span>, we strengthen industry participation and ensure market-relevant standards across Banking, Financial Services, and Insurance sectors.
                      </p>
                    </div>
                  </div>
                  
                  {/* Organizations Grid */}
                  <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "24px", maxWidth: "1100px", margin: "0 auto", padding: "40px 0"}}>
                    {[
                    { name: "Ministry of Skills", logo: 'data:image/jpeg;base64,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', alt: "Ministry of Skills" },    
                      { name: "Ministry of Skills", logo: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUYAAACbCAMAAAAp3sKHAAABoVBMVEX///8AmNoAKmfQ1N62u8rBwcI1SXgAktgAldkAi9bs7fHcNjyoz0UmQHVteZh6hKDj5uvYAADGytYhOm/39/cAj9cvRHXr6+tBU38qKi309PQrQXOnrsAOiToqkElJWoTYAAx9tIv319iTk5QZNW25ubr76uowMDPbLDNiYmTfTlObm5y52/JptOQyod30ejDQ0NHaIir0x8j43t91vef4s5D97OR5eXpISErxu73g4ODtpKZSUlTI5PWizDDZEh0AAACqqqvb7PiczOxda47iY2dqbW+Ehojxv8A9PT8eHiLgV1vpio3ldXiIw+mNlq7s9NrdQEXvr7Hme37k8Mqt0lHE3oczhFi312vpjZA+qN8AgtOp1e/rmpziaGwACVu3dWLNbT+dyRrb67jufTqwn6TfdTn9gjXAZkDS5qZ9UlqYV04zT3MoblydrLUzZWkzmUozYms4gWHHOkw/dm0wjFD2+u4pocRXraxNgrhljYd5vIGPapKyfXCRxGmeXH68emTSgWG72XWay8rJ388AH2JZomz6wqj3o3j2lGCYwqKu+l2SAAAVzElEQVR4nO2ciX/iyJXHC5ubBowpwBwzEECcNi2OjUCAGQEWPtqmTR/TpmnvHJvp9GQymU02nWSz2ezOZiab/av3vRJgcxiwLbdnevT72EIqVRXoq1fvlUolEaJJkyZNmjRp0qRJkyZNmjRp0qRJkyZNmjRp0qRJkyZNmjRp0qRJk6afsAIb9L5/wvsg/T+v3/dPeB+kX9MwqiANoyrSMKoiDaMq+qlipNZFunbv5WYYrTco84PSun2R3MbrHuBSjKV+vzmd1vfsLCzjM/zQO6OOxUetd16zvqUYBybTYCqp6TFtLyzDHfqu+TPetRwbs2nr3BjFpuoYqdncn0o6MZmvyp3lcMn5JzByHUEQspdTYpDQkcTp0ryQTmffyRmYg5F7+Mm4KauI8fHwc8esm2qiOXNpuFacLiQcIJtJjELyoFwudy5nS2OK3x+bKuwvC/JBYOXffgtNYFwPdR3d0KcPgcQwWT2Mjz/7XFmpm5QmXN/J9dmK1WOqK7te5RNTpToHNTKFUUxmybTSAixox89dToyxjO/Gq17CqN+K24PeYPxfXofIL36hpKmH8fnu7tAedWYMKC2PWWf2oBkOTDplR6WRfzVVqlM+6IwxvmVJYtJwsX8IiWEkpCazD+VciNPGeZcaY7S23V4jyv7pwy8+eTg8rypa4+6DXYVDyWyipGnSoTxgh33TCUsv5FOn09YoyJLfMMQINbAKajVJkni2u+5RHMQQY6eMLfis8QQ3JP87ac6KRhgDW0EG0Wv/5PXD169/OfSOavrG3QcKhjrG6paCEbwiNXtYm07kU7ZpikRIEznpUzC+2d19imk8eEG/nxneicfCek9DjDHmCG35U2Sb9V/zp99GI4xtRtHrDX/5+vWnX34Z767r163qRmrg+IytmCBWl8wKxj606RwmJmxzKCJGWk5zSdaon78ZptKAT0qy9rLTYglDjEIZ+RX3Crgh3QPGkBshttvrJPSrL4x2+1e//uDrkMoYkeML/IRW3dxWrNHUgjaNrpKezqOIGAmfrB3M9lr80qWNSd+oiB/leBdte4gRKbrDXfzGjbD3Nx9/883vf4N71O03Pt7dRY7bJmjLOTRHs5k2WeAGiqk5FBlGIh3MYhTnYMxORmqBGSzE75n+pPpSMG4CRruedMlGiBLrx998+PG/xpnvVrn7/ZTZoxViNLHmTCaTrklOzB441kwqFZ1XgGGEDuAljL40apJsugxJ5aQwUZamk+lsp5yUyN1LwdgFz+gNwdYmoLT+9tdf2b3uTdyh9lXM58we+2ZozKQ+wNCSM+fQFhvgz6IzvW+4PMFlID2JUU7LnQkT67Akfrq0lPYnhZnUu5CCse01xjeswLHrBAptu5EZJ1HbNz5+C+EW7LEFDXqYBg38JHGayldINZXPZ2ZB/jg0wugN64k1tL4ZwjTvXWB8+mx3d/cNdMMfvIDu3mgwAgxz05bKn5FXDZsNVuY5yB+BhhjtW+AWCe0S8I2siRvdKmN8/NkDEHB8Bh8WnY71cqAPqdP9LpU6h16jDZU6nizFG1TQuwox+n/7/cfrwBG6OAEwRyeL2yr7xhcPmHbfvoXFH8xDc9yBaAMAKVzCMIy2zG0O5v4EGL/++INvPvztVxBd8NJFbw1sdoFjnO1WD+OzIcbHEK53/2hSzLHp0en+lM8XyfuA8YPf//vWJ18Yu0MAXeyNBxV+d4ER3OOfAR+aYx9izX80qrCbppRG/ejGR3KvAoyBrzfIX16//pV7CEAPn5trSrdczREehSOuP/tPwAjmOMBLmb8qBthjIcY2Na4V4NGxiRPejcpX9GG4w3u716CEGKD4iXfoDoGdmuONb0efz5CjMrjweFe5nmbXg78bdnIKGdvp8ShQj3jwfhynKY+HvHyCj9CDSyNll8X57xcj/1///Usc4XE7QixxXb2bCE93v33zVEH5fHf32+GQ44s+uxRkMM/GeYcMi4Wz8/yQLV8uZ+FaeYyRP1xwhXzfGK1/+WSDtiGueN0Oljoey701RnSJ0F989ubN52/fjiyTPP6DMsCDgxOjNJpIFCuvHp3m8/lUKnWkJPLJ7EEAMfpkf9lAuHRZlgg26mzyAPgaBLGGtikdJIXAvWMkATzHeq/bHow7JnbfFuPb59jp3lVY7j549uLFi2+/ff78xR9NI4zm80fHx+d7e0fIDwGm8DMzDDW83wfXxICR53zZpI/vHMQM5NBAOkkD548BvrRUK1MiiXy5c/8Yh1oPOR3OCQxqhJi3T58+//bB7jDEKPH6Z2OMf2LoUixQp/IN2/mj/egFDcAoHSiN2scf8LAdINRvYMNksTLlkiIkQQDy+Tq1HwzGWakXqd9+joY5D6PSYUzlU6dnlcQUCMAIESUdI4ZyGZsvbCNGdj+GS/q4JCUiYBQOarV7xejUL9wdUnWE5+3T5w92FYyeCYypxumjwrzLacSWTYM1wh9lGJk1BtAawWtyScwicpCavVeM1vDWIoVVn3zy+A30fCYwpvKZ6lUjO4gxkASG0OeRkojRwBp1rewTyzIkMYxS0ue7X2sEkONpT3bl1qC3fTE96tq1rTIV6vHzz/58gbFxtmB0jP/IB07wsEOkw8MsxuTaoUA+4oivdnhYCxDpIwpZRFo+LGcPCPfRD2Kqj904xHiLOlacUfY/Y9+YW7HiwLDDOBrA9U10IH9Ac3ysbgWj0X6LSlbE2Br3G3XLM/+45AiOMHZvXsmKGPtjjJ4lOesn21ZSf8luR5dypPlym+wo6Juoq4q1Xq76i1VWe0QRLgpvznFFjDl2LYgsTVeSYNqxmD07pK7c1S/pSNMCGBVHULJ4LJbZyZKKWpbr/OrWyXVyz9XG+gbT+iVtrCup1585uxpGnHpiLrGpEzOzHSdUt7QIrY8wYslLGE315sBsnh9WrodxPKXtxtq0d9dCRme77Qx34yFjN+x0tLtxfbBr70KaY3kFk1oNI/LDOY3QtmdmO06obhkoH01yAthLkxiB7bYFDKml0w3IAGcNlAak2UcoiJGWdLkBTl2jfV2LkMFJM9dvNvu5Ou4ygx3TnXpJV4IPXW7ndvOmN9wh5NUNdoNO9mFEjF0CBMOwtbW4dz6r1TDumBUrtGLAXnQAVo8H2xtgHFjq042a+QPdDml5tluWeh32NC31pqVUxzTAmDO1SmDNA0+/tAOn40SnK5lyuZIZTiCwLHkoteh2+p4W1HtLjNagox12bDnCYIROhwMXzvaWM9yGVKMj3HbEr1n9ahg9IyMEs1w8Ybmu85ibaJSewYxvZBhzfWIG0js7BOzqxIR5SN2DGLctOL6uI6yorg+06+QE1lvIGixSt00sO+w8YNFbqR13ettttzPYdo7VNjrdbVw4YBG/ZidyJYx1k84znBnKfORC7ZhyWADRXWGNnly/D5ggOVeC4NXv5yxNwNiygAmUPM2Bp4m1AEZKBpBWt9QHpn6/byoRdBl9FTBaN5bpLqyxdDH/e2Ba2uXpW8C8tqF1zsOIvtFyUt/eZnEIjAya6/b2NgWMA4xLJZN1wCZRmsHyESNFjNueAWRqUrUwqq6VMOZ0o2nKaI4X67PCjiG0SyB0AlBmMW7jlNP+8JyY+joKNseCOmAELwnV56BRQ2Qy7TCMLQUjtbAezgXGxQ+UvHutgrHpuXQJ2DItatXbL3UmAIfdb7jeKZmV7vcQI3QbLbkmBiDdjq6OfUykkbPsABnsfpcsOZyCCi1Y5wHkJ4Cw9RIwvqwDztyOh9CXA+ZcoeRV/c970ioYT8yXOovUtPCyervVggNstij8N+sDQmGzrgSl+mAwUA6+2WphhU1lc4BFmq1xYWjc2/gJpVlyk220WlALrm1vszK3HNUIjBeqaBWMkxfSO2bP3VrC4I7rR/3tQzwNjltcRU9qBYx1k/nk6s0ZiRx/rbMsCVMJg5cqYYQruyv2BD788GeEhOLxlS/7Npc8HbccI85ZvrydMy8Y5aGC3394sOJvI3wM59FPJVrragxDBrrxuDsed+C9/NDad5sTO//2wYffU+Lwjgd1Nr5bM86vx/rdGvQhu2trm/P3K1qOkerMk84QXOXVsTqNM49XnunZkZfnuZms3qAxGPQavXjrNGR3X0D4OS4+YNYYHE08IRt2b/iKitxeqMFhd4cWfd1yjDPPXjY9V7fq8Tx4Lp0GS/PJYpo3ZPm0LIJ9dNJpvEed5dLUkE4LASrUanKAE3ByBcvR4aS0oM6IuCPo3ep2nVtut3MK48O/kzkY3YsxbrQdC3/Xcox9s3mqSz9tnpeUVR7lINKhZDiQiZhMC6JUS3O1JCW1miGGt6xrtQ7heL4mkGytFqPZGgkcyLyQFIlcFjoHs4/G3UBWuzHIHGMI6VxgpOR/Hz78+WKMgfFT6RTWFIxjUetcx78UY9M0+wSr2XNVq+4Mn5wsC3hDVRRxPjw+fiX6ed4PbT0tgy8ckk4SIkOjBoxSEmf6ZImcZjlU0EbcGLw4MAUjDRvjesQYvQojIOuuh+PxOHOZ1AlrDmjugFFvtzMnuwVJ3jnxfflj6ebZ56mv7oFLQ2tEmxL9og/RSRBDfEnOgPcBhRpYI+yP+Wu1C4xZjDLlDpE7o2cZbiu6ZTTa26Hhu5oUjO1gHPzbPy2wRmvcu+WOu71GzEjCQaPdHTcaGUY31hB2g+xG9+xd7KUYzXOuoXMzzwaPxA8fVz2IsTupIsMIvHx+gwFnS4C9IUb+UCScfwpjTEWM0JnBBwHjRjaVlmF02u14+IsxGu2O9XWHF8mF3Ea7fkPvVTCyE6FfC21s6N3GtZmjX4ZxMNumsQd+5Ri47M+KokTA09F0mQwxZgMdv4/6BUYZMSLSdBKfvWQYeX+W4CObafUwEr3RjXdZgtCOEeN6yB1kg19LrJEZWhxvthqNrFe54b7AqMw/7AbdM52fZRh184htW0xXdh1jSf9hLUDlw8OySMRDxFjuHKKRGg4OgaTSqGuHB7FDSEp+JGbLSPoQSLKHt4TaapiWim52jdACjXErYPQ6Rz2axRiDzO8xjHHlxrXVfoHR6gxvtfWhG2DcMeXmDL1tn5xcOSAX8DH36PPhqcMF+EYlSdkTwAWFHT6WS9n2KbsCF/e3VZE1ZMdHNGDp9Rq3mC1dAyOL0NYLa6TeoN0YXjMar49RBUkrX9SoqI3h3RSn184wBsPeIMNyDYzMfC9Zo96Nu61t7/1gLN/1N8xRO+7EfuMGM50QonAE2YXIyhjDXvao0fqFNYJTxDpv0qh/pNKvGYP2rfBW0Og1KiGGWIMsZqyMUR+Hnk3I6Tb+QKzxXtRdC3pRdjSgkDuO3ZV40BuYwOgej/BsxIOIcU2ZOBFnQd0R9wbd8bbXzvqNWMOWnflGb/wngxGiSzu8FW7jw4BEj8/vA9p2u0v+/o9/AMbvv/+/cTJqo912oqG12QAE5gOF2lvhEGUbmywr7UKk3rxUbKz3FiPq1qMcsxVcUeV7jfHdScOoijSMqui9xhiYmuN7d7oZxkJ17s+b/6h/YfblHsUKVfInKgn4g9X9mUx0NumaCsiG2Lt4/wdZgLFwtLe3dzT/SCoR17xp9FHX/rzcticzSa9ciK7nKlZc0agLviTRmMmUcN36IeNAh+ssz6WGFmDMpDKZ+RiPMnPjfuJoBu7ZESGnsxirEcRYPKL7kWg0ghhnH8xONG6BURy+b6HTkQKixI+3DTwh8D/1Lgd+ogwUEC9yYFmRGOYVuKQFjboQKZDEfqAHTbhHsR1W8SVYvWqxeLpXILRXBRQVaJKFYqFKi9UiSRSghdJeBXJFq8V92F3MZArk9FEUsyZ6PVZttNoDjIFEJZooTGAs9rCOCq30WK5C/hEJsC8pVPexFLoAwmovVisrYJQ5WAhZXuZknuuww4/hS2s4WeRlSRI4A8eyxDpjjFkBGckG2ZeNKachBhi5tA9y4j6JFcDE62DcJ4V8xpaI7OUzpBc5jQDXo1SmepZPpUgqb4sUievIVThKRRqZfKNBCq5KFHI1XkGrh+0CvuAx5SIZSDoiCagJH2iPujIRwEgzKWjU0csYT49OG4liJBMBMyw0Gg1Isp2eVshepHFOInspG1QLO59AFUf5ZZbqi4myFBOJzAeEQIzjYkDDJ8XY2Dxgk0URZxmkA4TnYqObaIasoSNJxCdDjiyHT49KHfbeKlmkcsCAdzDlADFwnVmHuwxjA9wjJY8axV6jCs2Mst+fOSavGtFE6pg0bBW6Z0scNwq9RiEaqUQbTxKne0COVhEj2Tui5DRDjxuJVynCvGAP23M1X21ESa8xgZGS/UYvkT+nmVNybksUGmcJVxW4Rx5RCtEIvrEAgPcaZO+c9Ja9uQYasyzBkcu8D+xS5GIBmRMUjLzQ6QiAMdCRZApGiYnZGEdEmTcIfIfzgZUGspwIViwxYgYogBihgECynZtgxGPcc+XzxR6sNY7JUeMogRiPbRRdJEaGo3N8rWgiomDsDZOLEcR4vsd8I7B7krLZIhWkAtZaTYF9T2N85YqkegnYe5yiqSPmG22NPcq4k2NXIw8Y9wnwz9igqmUYDaLs42UK7VnOioSL+QQiAE2kIgMitEZJFvFlvByOzHPgMIWA1CFZKStLPkjnoYAvi8QkmeeZNWZlH5ENZE74XwEj/PBCZIQRDGkPMT5JAcYjgmFgDsb8OeCawmirVHoYgornkWg1fw4ZJzEWwfQiDON5ikL7R4z0Vf5RBfdXIoViZIixmNmDqpZcL/NyR+bTBnwkHlwjkWJw/D7CMBKRskZNCdghJzCMTFm5E5MEH5EEwAvWzPsUYlSEvhNipGCHUNN1MRYYxkf5wpPGCGMFogZi7EWqFTjiSxhdFxjJeb6ayTOMqd4QY6/Ri7LgA+ekMPSNkUsYzwqRKuRRMJIn+d4jqLtSPD1ORDKFKLiIMzib+fPoaQpaQiFaWEwRJeB9CXzlmUEOACoR3ycwIgaNukMJBV4d3nBBxaC83QHYShwxdEZvjoaukxDgO/jhox1fliPTWoQRuoEFcGfFfOS8EYV4QCLHiYYL8ABG8iQS2SM0omA8g9gAGDHE9AhwTmRsZ8w37jdcDCP0E48jrgbBLmPkiFRdEKPPAOO43wg+NwORo8ow5mni1HV89KTocqWKcI5cR4GUaw8xZiLw9YmjiGtvOcYLrT7SI/LXLDDUAow0Qdk/SUBXg63hSjHBEi4tErgTPujoj7kt1haVssp++KTDFCV/grId7CtYpuKlCnADv03ZlyAB2IaTsq9UnribV6Pxvs6c8LGK7uaaunL6JHKqfrX7rmX9xVtJhPBxw8ueu8FY2LM9uQODiR7f9jJ7sXxZIXazR5Tf6xGedycNoyrSMKoiDaMq0jCqIg2jKtIwqiINoyrSMKoiDaMq0jCqIg2jKtIwqiL9dxpGTZo0adKkSZMmTZo0adKkSZMmTZo0adKkSZMmTZo0adKkSZMmTZo03V7/D2TGluA3WcszAAAAAElFTkSuQmCC", alt: "Ministry of Skills" },
                      { name: "RBI", logo: "data:image/png;base64,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", alt: "RBI Logo" },
                      { name: "SEBI", logo: "data:image/png;base64,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", alt: "SEBI Logo" },
                      { name: "IRDA", logo: "data:image/png;base64,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", alt: "IRDA Logo" }
                    ].map((org, idx) => (
                      <div key={idx} style={{padding: "24px 20px", border: "1px solid #e5e7eb", borderRadius: "12px", textAlign: "center", background: "#ffffff", transition: "all 0.3s ease", display: "flex", alignItems: "center", justifyContent: "center", minHeight: "140px"}} 
                        onMouseEnter={(e) => {e.currentTarget.style.borderColor = "#0ea5e9"; e.currentTarget.style.boxShadow = "0 8px 16px rgba(14, 165, 233, 0.15)"; e.currentTarget.style.transform = "translateY(-4px)";}}
                        onMouseLeave={(e) => {e.currentTarget.style.borderColor = "#e5e7eb"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.transform = "translateY(0)";}}>
                        <img src={org.logo} alt={org.alt} style={{maxHeight: "90px", maxWidth: "100%", objectFit: "contain"}} />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </section>
          )
        }

        // ===== QuickServices Component =====
        const QuickServices = () => {
          const services = []

          return (
            <section className="quick-services">
              <div className="container-custom">
                <div className="quick-services-grid">
                  {services.map((service, index) => (
                    <a
                      href={service.link}
                      className="quick-service-card"
                      key={index}
                      data-aos="fade-up"
                      data-aos-delay={index * 100}
                    >
                      <div className="quick-service-icon">
                        <i className={`fas ${service.icon}`}></i>
                      </div>
                      <h4>{service.title}</h4>
                      <p>{service.desc}</p>
                    </a>
                  ))}
                </div>
              </div>
            </section>
          )
        }

        // ===== AboutSection Component =====
        const AboutSection = () => {
          const features = ["Industry-Led Standards", "NSQF Aligned Qualifications", "Pan-India Coverage", "Employment Linkages", "Quality Assurance", "Skill Development"]

          const aboutLabel = cmsData.aboutSection?.sectionLabel || "About BFSI SSC"
          const aboutTitle = cmsData.aboutSection?.title || "Empowering India's Financial Workforce"
          const aboutDesc = cmsData.aboutSection?.description || "The BFSI Sector Skill Council of India was established in 2011 with the objective of convening leading organizations within the BFSI industry to devise strategies and operational plans aimed at establishing standardized skill requirements for various job roles within the sector."

          // Featured partner companies from CMS
          const featuredPartners = cmsData.partnersCarousel?.partners?.filter(p => p.visible) || [];

          return (
            <section className="about-section" style={{padding: "100px 0", background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)", position: "relative", overflow: "hidden"}}>
              {/* Decorative Elements */}
              <div style={{position: "absolute", top: "-50px", right: "-50px", width: "400px", height: "400px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%)", borderRadius: "50%"}}></div>
              <div style={{position: "absolute", bottom: "-100px", left: "-100px", width: "500px", height: "500px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%)", borderRadius: "50%"}}></div>
              
              <div className="container-custom" style={{position: "relative", zIndex: "1"}}>
                {/* About Content */}
                <div className="about-content-wrapper" data-aos="fade-up">
                  <div style={{display: "inline-block", padding: "8px 16px", background: "#0f172a", borderRadius: "50px", marginBottom: "16px"}}>
                    <span className="section-label" style={{fontSize: "13px", fontWeight: "700", color: "#ffffff", letterSpacing: "1px", textTransform: "uppercase"}}>{aboutLabel}</span>
                  </div>
                  <h2 style={{fontSize: "2.8rem", fontWeight: "700", color: "#0f172a", marginBottom: "24px", lineHeight: "1.2", fontFamily: "Arial, sans-serif"}}>{aboutTitle}</h2>
                  <p style={{fontSize: "17px", color: "#475569", fontWeight: "400", lineHeight: "1.7", marginBottom: "16px"}}>
                    {aboutDesc}
                  </p>
                  
                  {/* Read More Button - Center Aligned */}
                  <div style={{display: "flex", justifyContent: "center"}}>
                    <a href="about.php" 
                      style={{
                        display: "inline-flex", 
                        alignItems: "center", 
                        gap: "8px", 
                        padding: "10px 24px", 
                        background: "transparent", 
                        color: "#0ea5e9", 
                        textDecoration: "none", 
                        borderRadius: "6px", 
                        fontSize: "14px", 
                        fontWeight: "600", 
                        transition: "all 0.3s ease", 
                        border: "1px solid #0ea5e9",
                        cursor: "pointer"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = "rgba(14, 165, 233, 0.08)";
                        e.currentTarget.style.color = "#0d96d9";
                        e.currentTarget.style.borderColor = "#0d96d9";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = "transparent";
                        e.currentTarget.style.color = "#0ea5e9";
                        e.currentTarget.style.borderColor = "#0ea5e9";
                      }}
                    >
                      Read More <i className="fas fa-arrow-right" style={{fontSize: "12px"}}></i>
                    </a>
                  </div>
                </div>

                {/* Trusted by Industry Leaders - Animated Carousel Section */}
                <div className="trusted-industry-section" data-aos="fade-up" data-aos-delay="100" style={{marginTop: "20px", paddingTop: "40px", borderTop: "2px solid rgba(14, 165, 233, 0.2)"}}>
                  {/* Section Header */}
                  <div style={{textAlign: "center", marginBottom: "40px"}}>
                    <div style={{display: "inline-block", padding: "8px 16px", background: "#0f172a", borderRadius: "50px", marginBottom: "16px"}}>
                      <span style={{fontSize: "13px", fontWeight: "700", color: "#ffffff", letterSpacing: "1px", textTransform: "uppercase"}}>Industry Partners</span>
                    </div>
                    <h2 className="trusted-heading" style={{fontSize: "3rem", fontWeight: "600", color: "#0f172a", marginBottom: "20px", fontFamily: "Arial, sans-serif", lineHeight: "1.2"}}>
                      Trusted By Industry Leaders
                    </h2>
                    <p className="trusted-description" style={{fontSize: "18px", color: "#64748b", maxWidth: "800px", margin: "0 auto", lineHeight: "1.8", fontWeight: "400"}}>
                      Collaborating with 500+ training partners and 1200+ institutions across India to deliver world-class skill development
                    </p>
                  </div>

                  {/* Animated Carousel Container */}
                  <div className="carousel-container" style={{
                    maxWidth: "100%",
                    overflow: "hidden",
                    position: "relative",
                    padding: "20px 0",
                    background: "linear-gradient(90deg, rgba(255,255,255,0.8) 0%, transparent 10%, transparent 90%, rgba(255,255,255,0.8) 100%)"
                  }}>
                    {/* Carousel Track */}
                    <div className="carousel-track" style={{
                      display: "flex",
                      gap: "28px",
                      animation: "scrollCarousel 100s linear infinite",
                      willChange: "transform",
                      paddingLeft: "20px"
                    }}>
                      {/* First set of partners */}
                      {featuredPartners.map((partner, index) => (
                        <div 
                          key={`partner-${index}`}
                          className="partner-card-carousel"
                          style={{
                            background: "#ffffff",
                            border: "2px solid #e5e7eb",
                            borderRadius: "18px",
                            padding: "36px 28px",
                            textAlign: "center",
                            transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
                            cursor: "pointer",
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                            justifyContent: "center",
                            position: "relative",
                            overflow: "hidden",
                            minWidth: "240px",
                            height: "250px",
                            flex: "0 0 240px",
                            boxShadow: "0 4px 15px rgba(0, 0, 0, 0.08)"
                          }}
                          onMouseEnter={(e) => {
                            e.currentTarget.parentElement.style.animationPlayState = "paused";
                            e.currentTarget.style.borderColor = "#0ea5e9";
                            e.currentTarget.style.boxShadow = "0 20px 50px rgba(14, 165, 233, 0.25)";
                            e.currentTarget.style.transform = "translateY(-12px) scale(1.02)";
                          }}
                          onMouseLeave={(e) => {
                            e.currentTarget.parentElement.style.animationPlayState = "running";
                            e.currentTarget.style.borderColor = "#e5e7eb";
                            e.currentTarget.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.08)";
                            e.currentTarget.style.transform = "translateY(0) scale(1)";
                          }}
                        >
                          {/* Top Accent Bar */}
                          <div style={{
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            height: "5px",
                            background: "linear-gradient(90deg, #0ea5e9, #06b6d4, #0ea5e9)",
                            backgroundSize: "200% 100%",
                            animation: "gradientShift 3s ease infinite"
                          }}></div>

                          {/* Logo Container */}
                          <div style={{
                            height: "70px",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            marginBottom: "8px",
                            width: "100%"
                          }}>
                            <img 
                              src={partner.logo} 
                              alt={partner.name} 
                              style={{
                                maxWidth: "75%",
                                maxHeight: "65px",
                                objectFit: "contain",
                                transition: "transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease",
                                filter: "brightness(0.95)"
                              }}
                              className="partner-logo-carousel"
                            />
                          </div>

                          {/* Partner Name */}
                          <h5 style={{
                            fontSize: "16px",
                            fontWeight: "700",
                            color: "#0f172a",
                            marginBottom: "8px",
                            transition: "color 0.3s ease",
                            lineHeight: "1.3"
                          }} className="partner-name-carousel">
                            {partner.name}
                          </h5>

                          {/* Partner Category Badge */}
                          <span style={{
                            fontSize: "11px",
                            fontWeight: "700",
                            color: "#0ea5e9",
                            textTransform: "uppercase",
                            letterSpacing: "1px",
                            display: "inline-block",
                            padding: "5px 12px",
                            background: "rgba(14, 165, 233, 0.12)",
                            borderRadius: "20px",
                            marginTop: "auto",
                            transition: "all 0.3s ease"
                          }} className="partner-badge">
                            {partner.category}
                          </span>
                        </div>
                      ))}

                          {/* Duplicate set for seamless loop */}
                      {featuredPartners.map((partner, index) => (
                        <div 
                          key={`partner-duplicate-${index}`}
                          className="partner-card-carousel"
                          style={{
                            background: "#ffffff",
                            border: "2px solid #e5e7eb",
                            borderRadius: "18px",
                            padding: "36px 28px",
                            textAlign: "center",
                            transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
                            cursor: "pointer",
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                            justifyContent: "center",
                            position: "relative",
                            overflow: "hidden",
                            minWidth: "240px",
                            height: "250px",
                            flex: "0 0 240px",
                            boxShadow: "0 4px 15px rgba(0, 0, 0, 0.08)"
                          }}
                          onMouseEnter={(e) => {
                            e.currentTarget.parentElement.style.animationPlayState = "paused";
                            e.currentTarget.style.borderColor = "#0ea5e9";
                            e.currentTarget.style.boxShadow = "0 20px 50px rgba(14, 165, 233, 0.25)";
                            e.currentTarget.style.transform = "translateY(-12px) scale(1.02)";
                          }}
                          onMouseLeave={(e) => {
                            e.currentTarget.parentElement.style.animationPlayState = "running";
                            e.currentTarget.style.borderColor = "#e5e7eb";
                            e.currentTarget.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.08)";
                            e.currentTarget.style.transform = "translateY(0) scale(1)";
                          }}
                        >
                          {/* Top Accent Bar */}
                          <div style={{
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            height: "5px",
                            background: "linear-gradient(90deg, #0ea5e9, #06b6d4, #0ea5e9)",
                            backgroundSize: "200% 100%",
                            animation: "gradientShift 3s ease infinite"
                          }}></div>

                          {/* Logo Container */}
                          <div style={{
                            height: "70px",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            marginBottom: "8px",
                            width: "100%"
                          }}>
                            <img 
                              src={partner.logo} 
                              alt={partner.name} 
                              style={{
                                maxWidth: "75%",
                                maxHeight: "65px",
                                objectFit: "contain",
                                transition: "transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease",
                                filter: "brightness(0.95)"
                              }}
                              className="partner-logo-carousel"
                            />
                          </div>

                          {/* Partner Name */}
                          <h5 style={{
                            fontSize: "16px",
                            fontWeight: "700",
                            color: "#0f172a",
                            marginBottom: "8px",
                            transition: "color 0.3s ease",
                            lineHeight: "1.3"
                          }} className="partner-name-carousel">
                            {partner.name}
                          </h5>

                          {/* Partner Category Badge */}
                          <span style={{
                            fontSize: "11px",
                            fontWeight: "700",
                            color: "#0ea5e9",
                            textTransform: "uppercase",
                            letterSpacing: "1px",
                            display: "inline-block",
                            padding: "5px 12px",
                            background: "rgba(14, 165, 233, 0.12)",
                            borderRadius: "20px",
                            marginTop: "auto",
                            transition: "all 0.3s ease"
                          }} className="partner-badge">
                            {partner.category}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Carousel Animations & Responsive Styles */}
                  <style>{`
                    @keyframes scrollCarousel {
                      0% {
                        transform: translateX(0);
                      }
                      100% {
                        transform: translateX(calc(-240px * ${featuredPartners.length} - 28px * ${featuredPartners.length}));
                      }
                    }

                    @keyframes gradientShift {
                      0%, 100% {
                        background-position: 0% center;
                      }
                      50% {
                        background-position: 100% center;
                      }
                    }

                    .partner-card-carousel:hover .partner-logo-carousel {
                      transform: scale(1.12);
                      filter: brightness(1) drop-shadow(0 4px 12px rgba(14, 165, 233, 0.2));
                    }

                    .partner-card-carousel:hover .partner-name-carousel {
                      color: #0ea5e9;
                    }

                    .partner-card-carousel:hover .partner-badge {
                      background: rgba(14, 165, 233, 0.25);
                      color: #0284c7;
                      transform: translateY(-2px);
                    }

                    /* Desktop - Large Screen */
                    @media (min-width: 1201px) {
                      .trusted-heading {
                        font-size: 3rem !important;
                      }
                      .carousel-track {
                        animation: scrollCarousel 100s linear infinite !important;
                      }
                    }

                    /* Laptop/iPad */
                    @media (max-width: 1200px) and (min-width: 769px) {
                      .trusted-heading {
                        font-size: 2.4rem !important;
                      }
                      .partner-card-carousel {
                        min-width: 200px !important;
                        flex: 0 0 200px !important;
                        height: 280px !important;
                        padding: 28px 20px !important;
                      }
                      .carousel-track {
                        gap: 20px !important;
                        animation: scrollCarousel 90s linear infinite !important;
                      }
                      @keyframes scrollCarousel {
                        0% {
                          transform: translateX(0);
                        }
                        100% {
                          transform: translateX(calc(-200px * ${featuredPartners.length} - 20px * ${featuredPartners.length}));
                        }
                      }
                    }

                    /* Tablet */
                    @media (max-width: 768px) {
                      .trusted-heading {
                        font-size: 1.8rem !important;
                      }
                      .trusted-description {
                        font-size: 15px !important;
                      }
                      .partner-card-carousel {
                        min-width: 160px !important;
                        flex: 0 0 160px !important;
                        height: 240px !important;
                        padding: 24px 16px !important;
                        border-radius: 14px !important;
                      }
                      .carousel-track {
                        gap: 16px !important;
                        animation: scrollCarousel 80s linear infinite !important;
                        padding-left: 10px !important;
                      }
                      .partner-logo-carousel {
                        max-height: 60px !important;
                      }
                      .partner-name-carousel {
                        font-size: 14px !important;
                      }
                      .partner-badge {
                        font-size: 9px !important;
                        padding: 4px 10px !important;
                      }
                      @keyframes scrollCarousel {
                        0% {
                          transform: translateX(0);
                        }
                        100% {
                          transform: translateX(calc(-160px * ${featuredPartners.length} - 16px * ${featuredPartners.length}));
                        }
                      }
                    }

                    /* Mobile */
                    @media (max-width: 480px) {
                      .trusted-heading {
                        font-size: 1.4rem !important;
                        margin-bottom: 16px !important;
                      }
                      .trusted-description {
                        font-size: 13px !important;
                      }
                      .carousel-container {
                        padding: 15px 0 !important;
                      }
                      .partner-card-carousel {
                        min-width: 140px !important;
                        flex: 0 0 140px !important;
                        height: 220px !important;
                        padding: 20px 12px !important;
                        border-radius: 12px !important;
                      }
                      .carousel-track {
                        gap: 12px !important;
                        animation: scrollCarousel 70s linear infinite !important;
                        padding-left: 8px !important;
                      }
                      .partner-logo-carousel {
                        max-height: 50px !important;
                      }
                      .partner-name-carousel {
                        font-size: 12px !important;
                        margin-bottom: 8px !important;
                      }
                      .partner-badge {
                        font-size: 8px !important;
                        padding: 3px 8px !important;
                      }
                      @keyframes scrollCarousel {
                        0% {
                          transform: translateX(0);
                        }
                        100% {
                          transform: translateX(calc(-140px * ${featuredPartners.length} - 12px * ${featuredPartners.length}));
                        }
                      }
                    }

                    /* Focus for accessibility */
                    .partner-card-carousel:focus-visible {
                      outline: 2px solid #0ea5e9;
                      outline-offset: 2px;
                    }
                  `}</style>
                </div>
              </div>
            </section>
          )
        }

        // ===== StatsCounter Component =====
        const StatsCounter = () => {
          const [counts, setCounts] = React.useState({
            states: 0,
            trainingPartners: 0,
            institutions: 0,
            candidates: 0,
            apprenticeships: 0,
          })

          const targetCounts = {
            states: 28,
            trainingPartners: 500,
            institutions: 1200,
            candidates: 250000,
            apprenticeships: 50000,
          }

          React.useEffect(() => {
            const duration = 2000
            const steps = 60
            const stepDuration = duration / steps

            let currentStep = 0
            const interval = setInterval(() => {
              currentStep++
              const progress = currentStep / steps

              setCounts({
                states: Math.round(targetCounts.states * progress),
                trainingPartners: Math.round(targetCounts.trainingPartners * progress),
                institutions: Math.round(targetCounts.institutions * progress),
                candidates: Math.round(targetCounts.candidates * progress),
                apprenticeships: Math.round(targetCounts.apprenticeships * progress),
              })

              if (currentStep >= steps) {
                clearInterval(interval)
              }
            }, stepDuration)

            return () => clearInterval(interval)
          }, [])

          const formatNumber = (num) => {
            if (num >= 1000000) return (num / 1000000).toFixed(1) + "M+"
            if (num >= 1000) return (num / 1000).toFixed(0) + "K+"
            return num + "+"
          }

       return null 

          
        }

        // ===== ProgramsGrid Component =====
        const ProgramsGrid = () => {
          const programs = [
            {
              icon: "fa-chalkboard-user",
              title: "Training & Skill Development",
              desc: "BFSI SSC designs and delivers industry-aligned training programs that equip students and professionals with practical skills required for careers in banking, financial services, and insurance. These include skill certificate courses, professional certifications, and specialized BFSI programs, delivered through an extensive training partner network.",
              link: "https://bfsissc.com/new7/courses.php",
            },
            {
              icon: "fa-clipboard-check",
              title: "Qualification Framework & Certification",
              desc: "BFSI SSC develops National Occupational Standards (NOS), Qualification Packs (QPs), and certification frameworks that define the competencies required for various BFSI job roles. The council also conducts third-party assessments and certifications to ensure standardized and industry-recognized qualifications.",
              link: "https://bfsissc.com/new7/qp-nos.php",
            },
            {
              icon: "fa-clipboard-check",
              title: "Employment & Career Opportunities",
              desc: "BFSI SSC facilitates employment opportunities and career pathways by connecting trained candidates with banks, NBFCs, insurance companies, fintech firms, and other financial institutions, helping bridge the gap between skilled talent and industry demand.",
              link: "https://bfsissc.com/new7/careers.php",
            },
            {
              icon: "fa-user-graduate",
              title: "Apprenticeships & Work-Integrated Learning",
              desc: "Through Apprenticeship Programs and work-integrated learning initiatives, BFSI SSC enables students and graduates to gain hands-on industry experience while earning a stipend, ensuring a smooth transition from education to employment.",
              link: "https://bfsissc.com/new7/apprenticeships.php",
            },
            {
              icon: "fa-handshake",
              title: "Industry & Corporate Partnerships",
              desc: "BFSI SSC collaborates with banks, financial institutions, fintech companies, training providers, and corporate partners to ensure that training programs remain aligned with industry needs while creating opportunities for recruitment, internships, and workforce development.",
              link: "https://bfsissc.com/new7/industry-corporate-partners.php",
            },
            {
              icon: "fa-chalkboard",
              title: "Trainer, Assessor & Ecosystem Development",
              desc: "The council strengthens the skill ecosystem through Training of Trainers (ToT) and Training of Assessors (ToA) programs, building a network of certified professionals who deliver high-quality training and standardized assessments across the BFSI sector.",
              link: "https://bfsissc.com/new7/tot.php",
            },
            {
              icon: "fa-seedling",
              title: "Special Projects, CSR & Social Impact",
              desc: "BFSI SSC undertakes special initiatives, government-supported projects, and CSR partnerships aimed at expanding access to BFSI skill development. These programs focus on empowering underserved communities, promoting financial sector careers, and creating inclusive employment opportunities.",
              link: "https://bfsissc.com/new7/projects.php",
            },
            {
              icon: "fa-microchip",
              title: "Research, Innovation & Future Skills",
              desc: "BFSI SSC conducts sector research, skill gap studies, digital learning initiatives, and FinTech skill programs to prepare the workforce for the future of financial services. The council also collaborates with government and industry stakeholders to support policy development and emerging skill requirements in the BFSI sector.",
              link: "https://bfsissc.com/new7/BFSI-Brochure.pdf",
            },
          ]

          const progLabel = cmsData.programsGrid?.sectionLabel || "Our Offerings"
          const progTitle = cmsData.programsGrid?.title || "Explore Services"
          const progDesc = cmsData.programsGrid?.description || "A complete ecosystem of quality skilling, certification and employment solutions"

          return (
            <section style={{padding: "100px 0", background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)", position: "relative", overflow: "hidden"}}>
              {/* Decorative Elements */}
              <div style={{position: "absolute", top: "-100px", right: "-100px", width: "500px", height: "500px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%)", borderRadius: "50%"}}></div>
              <div style={{position: "absolute", bottom: "-50px", left: "-50px", width: "400px", height: "400px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%)", borderRadius: "50%"}}></div>
              
              <div className="container-custom" style={{position: "relative", zIndex: "1"}}>
                <div style={{textAlign: "center", marginBottom: "80px"}} data-aos="fade-up">
                  <div style={{display: "inline-block", padding: "8px 16px", background: "#0f172a", borderRadius: "50px", marginBottom: "16px"}}>
                    <span style={{fontSize: "13px", fontWeight: "700", color: "#ffffff", letterSpacing: "1px", textTransform: "uppercase"}}>{progLabel}</span>
                  </div>
                  <h2 style={{fontSize: "2.8rem", fontWeight: "700", color: "#0f172a", marginBottom: "16px", lineHeight: "1.2", fontFamily: "Arial, sans-serif"}}>{progTitle}</h2>
                  <p style={{fontSize: "17px", color: "#475569", fontWeight: "400", lineHeight: "1.6", maxWidth: "700px", margin: "0 auto"}}>{progDesc}</p>
                </div>

                <div
                  className="quick-services-grid"
                  style={{
                    display: "grid",
                    gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
                    gap: "28px",
                    alignItems: "stretch"
                  }}
                >
                  {programs.map((program, idx) => (
                    <div 
                      key={idx} 
                      data-aos="fade-up" 
                      data-aos-delay={idx * 100}
                      style={{
                        background: "#ffffff",
                        border: "1px solid #e0e7ff",
                        borderRadius: "16px",
                        padding: "40px 32px",
                        transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
                        cursor: "pointer",
                        position: "relative",
                        overflow: "hidden",
                        display: "flex",
                        flexDirection: "column",
                        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.04)"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.borderColor = "#0ea5e9";
                        e.currentTarget.style.boxShadow = "0 16px 48px rgba(14, 165, 233, 0.12)";
                        e.currentTarget.style.transform = "translateY(-8px)";
                        const icon = e.currentTarget.querySelector(".program-icon");
                                        <style>{`
                                          @media (max-width: 1024px) {
                                            .quick-services-grid {
                                              grid-template-columns: repeat(2, 1fr) !important;
                                            }
                                          }
                                          @media (max-width: 768px) {
                                            .quick-services-grid {
                                              grid-template-columns: 1fr !important;
                                            }
                                          }
                                        `}</style>
                        if (icon) {
                          icon.style.transform = "scale(1.15)";
                        }
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.borderColor = "#e0e7ff";
                        e.currentTarget.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.04)";
                        e.currentTarget.style.transform = "translateY(0)";
                        const icon = e.currentTarget.querySelector(".program-icon");
                        if (icon) {
                          icon.style.transform = "scale(1)";
                        }
                      }}
                    >
                      {/* Top Accent Bar */}
                      <div style={{position: "absolute", top: "0", left: "0", width: "100%", height: "3px", background: "linear-gradient(90deg, #0ea5e9 0%, #00d4ff 100%)"}}></div>
                      
                      {/* Background Circle */}
                      <div style={{position: "absolute", top: "-30px", right: "-30px", width: "120px", height: "120px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%)", borderRadius: "50%"}}></div>
                      
                      {/* Icon Container */}
                      <div style={{position: "relative", zIndex: "1", marginBottom: "24px"}}>
                        <div style={{width: "56px", height: "56px", background: "linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0.06) 100%)", borderRadius: "12px", display: "flex", alignItems: "center", justifyContent: "center"}}>
                          <div className="program-icon" style={{fontSize: "28px", color: "#0ea5e9", transition: "all 0.4s ease"}}>
                            <i className={`fas ${program.icon}`}></i>
                          </div>
                        </div>
                      </div>

                      <h3 style={{fontSize: "1.3rem", fontWeight: "700", color: "#0f172a", marginBottom: "12px", lineHeight: "1.4", position: "relative", zIndex: "1"}}>
                        {program.title}
                      </h3>

                      <p style={{fontSize: "14px", color: "#64748b", lineHeight: "1.65", marginBottom: "auto", fontWeight: "400", position: "relative", zIndex: "1"}}>
                        {program.desc}
                      </p>

                      <div style={{display: "flex", flexDirection: "column", gap: "16px", marginTop: "28px", paddingTop: "20px", borderTop: "1px solid #f1f5f9", position: "relative", zIndex: "1"}}>
                        <div style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                          <span style={{fontSize: "12px", fontWeight: "700", color: "#0ea5e9", textTransform: "uppercase", letterSpacing: "0.8px"}}>
                            {program.metrics}
                          </span>
                        </div>
                        <a href={program.link} style={{background: "#ef4444", color: "#ffffff", fontSize: "14px", fontWeight: "600", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "8px", transition: "all 0.3s ease", width: "fit-content", padding: "10px 20px", borderRadius: "8px", cursor: "pointer"}}
                          onMouseEnter={(e) => {
                            e.currentTarget.style.background = "#dc2626";
                            e.currentTarget.style.transform = "translateY(-2px)";
                          }}
                          onMouseLeave={(e) => {
                            e.currentTarget.style.background = "#ef4444";
                            e.currentTarget.style.transform = "translateY(0)";
                          }}
                        >
                          Explore <i className="fas fa-arrow-right" style={{fontSize: "12px", transition: "transform 0.3s ease"}}></i>
                        </a>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          )
        }

        // ===== ExploreOpportunities Component =====


        // ===== NewsSlider Component =====
        const NewsSlider = () => {
          const [selectedCategory, setSelectedCategory] = React.useState('all')
          const [selectedMonth, setSelectedMonth] = React.useState(null)
          const [isMonthModalOpen, setIsMonthModalOpen] = React.useState(false)
          const [newsLightboxIndex, setNewsLightboxIndex] = React.useState(null)

          const news = cmsData.newsSection?.news || [
            { id: 1, date: "27/01/2026", title: "BFSI SSC signs MOU with Abuzz Webtech Pvt. Ltd.", category: "Partnerships", excerpt: "BFSI SSC signs a Memorandum of Understanding with Abuzz Webtech Pvt. Ltd. to develop an advanced ERP software solution, in the presence of its founder, Aravind Warade. This partnership will enhance operational efficiency and digital transformation initiatives.", image: "https://bfsissc.com/images/gallery/img-large/Abuzz-Webtech.webp" },
            { id: 2, date: "12/01/2026", title: "Skill Development Centre Inaugurated in Odisha", category: "Training", excerpt: "BFSI SSC proudly inaugurates its Skill Development Extended Training Centre under the NUA Odisha scheme at Paradeep College, Jagatsinghpur. The center was inaugurated by Mr. Sampad Chandra Swain, Hon'ble Minister of Industries, Skill Development & Technical Education, Government of Odisha.", image: "https://bfsissc.com/images/gallery/img-large/NUA.webp" },
            { id: 3, date: "06/01/2026", title: "Cybersecurity Training Program with KCPL", category: "Partnerships", excerpt: "BFSI SSC team has signed a Memorandum of Understanding with KCPL to collaboratively design, deliver, assess, and certify a comprehensive Cybersecurity Training Program. This initiative strengthens security awareness in the BFSI sector.", image: "https://bfsissc.com/images/gallery/img-large/KCPL.webp" },
            { id: 4, date: "27/12/2025", title: "Skill Development Discussions at Sri Venkateswara University", category: "Training", excerpt: "BFSI SSC team met with Mr. Vamsi Krishna Royala, Director, Sri Venkateswara University, to discuss on skill development initiatives and student opportunities. The meeting focused on implementing AEDP programs and placement assistance.", image: "https://bfsissc.com/images/gallery/img-large/RUSA.webp" },
            { id: 5, date: "26/12/2025", title: "BFSI Career Awareness at Gnambica Degree College", category: "Training", excerpt: "BFSI SSC team met with Dr. R. Guru Prasad, Secretary, Gnambica Degree College to discuss BFSI skill courses. Also addressed B.Com students on BFSI career opportunities and BEEP enrollment benefits.", image: "https://bfsissc.com/images/gallery/img-large/GDC.webp" },
            { id: 6, date: "26/12/2025", title: "PVKN Govt Degree College Partnership Discussion", category: "Partnerships", excerpt: "BFSI SSC team met with the Principal, PVKN Govt Degree College to discuss on skill development initiatives and opportunities for student engagement in BFSI sector programs.", image: "https://bfsissc.com/images/gallery/img-large/PVKN.webp" },
            { id: 7, date: "25/12/2025", title: "Datta Institute Association Partnership", category: "Partnerships", excerpt: "BFSI SSC team met with Mr. G. Lakshmidhar, Managing Partner, Datta Institute for handover of the Association Partner certificate and discussions on skill courses and BEEP enrollments in partner colleges.", image: "https://bfsissc.com/images/gallery/img-large/datta-institute.webp" },
            { id: 8, date: "24/12/2025", title: "Collaboration with Aditya Degree College", category: "Training", excerpt: "The BFSI SSC team met with Aditya Degree College of Commerce and Business Management Principal, Sriram Garu, to discuss BEEP registration and future collaboration opportunities for skill development.", image: "https://bfsissc.com/images/gallery/img-large/sriram-garu.webp" },
            { id: 9, date: "23/12/2025", title: "BFSI Awareness Session at Adarsh Degree College", category: "Training", excerpt: "BFSI SSC team meeting with Adarsh Degree College Principal, Theophilis Sir, on BEEP enrollment and addressing B.Com BFSI students at Adarsh Degree College, Vizag on career opportunities.", image: "https://bfsissc.com/images/gallery/img-large/ADC.webp" },
            { id: 10, date: "22/12/2025", title: "Apprenticeship Orientation at PBN College", category: "Training", excerpt: "BFSI SSC team meeting with PBN College Principal, Sivakumari Madam, to discuss BEEP enrollment and IIBF registration, and addressing B.Com BFSI AEDP students on apprenticeship opportunities.", image: "https://bfsissc.com/images/gallery/img-large/PBN.webp" },
            { id: 11, date: "24/11/2025", title: "MoU Signing with Institute of Management Accountants", category: "Partnerships", excerpt: "MoU signing between BFSI SSC and Institute of Management Accountants for the Certified Management Accountant USA Program, expanding professional certification opportunities.", image: "https://bfsissc.com/images/gallery/img-large/IMA.webp" },
            { id: 12, date: "21/11/2025", title: "Meeting with ICAI Hyderabad Chapter", category: "Partnerships", excerpt: "BFSI SSC team met with CMA Khaja Jalal Uddin, Chairman of The Institute of Cost Accountants of India, Hyderabad Chapter for industry collaboration and professional development initiatives.", image: "https://bfsissc.com/images/gallery/img-large/ICAI.webp" },
            { id: 13, date: "21/11/2025", title: "Strategic Discussion with TMI Group Leadership", category: "Partnerships", excerpt: "BFSI SSC team met with T. Muralidharan, Chairman of TMI Group, in Hyderabad to explore collaborative opportunities in skill development and training programs.", image: "https://bfsissc.com/images/gallery/img-large/TMI.webp" },
            { id: 14, date: "21/11/2025", title: "Partnership with Vishya Learning Solutions", category: "Partnerships", excerpt: "BFSI SSC team met with Harsha Gadiyaram, Director of Vishya Learning Solutions, in Hyderabad to discuss joint training and development initiatives.", image: "https://bfsissc.com/images/gallery/img-large/VLS.webp" },
            { id: 15, date: "19/11/2025", title: "Centre of Excellence at KIIT Bhubaneswar", category: "Training", excerpt: "BFSI SSC signed an MoU at Kalinga Institute of Social Sciences (Deemed University), KIIT Bhubaneswar, for the establishment of a Centre of Excellence for BFSI skill development.", image: "https://bfsissc.com/images/gallery/img-large/KIIT.webp" },
          ]

          const newsLabel = cmsData.newsSection?.sectionLabel || "Latest News & Updates"
          const newsTitle = cmsData.newsSection?.title || "News & Media Hub"
          const newsDesc = cmsData.newsSection?.description || "Stay updated with the latest announcements, partnerships, training initiatives, and industry insights from BFSI SSC"

          const categories = ['all', 'Partnerships', 'Training', 'Events', 'Announcements']
          const monthsData = [
            { label: "January", value: 1 },
            { label: "February", value: 2 },
            { label: "March", value: 3 },
            { label: "April", value: 4 },
            { label: "May", value: 5 },
            { label: "June", value: 6 },
            { label: "July", value: 7 },
            { label: "August", value: 8 },
            { label: "September", value: 9 },
            { label: "October", value: 10 },
            { label: "November", value: 11 },
            { label: "December", value: 12 },
          ]

          const parseDate = (dateStr) => {
            const parts = dateStr.split('/');
            if (parts.length === 3) {
              const day = parseInt(parts[0], 10);
              const month = parseInt(parts[1], 10);
              const year = parseInt(parts[2], 10);
              return new Date(year, month - 1, day);
            }
            return new Date(dateStr);
          };

          const getFilteredNews = () => {
            let filtered = [...news];
            
            if (selectedCategory !== 'all' && selectedCategory !== 'Month') {
              filtered = filtered.filter(n => n.category === selectedCategory);
            }
            
            if (selectedMonth !== null) {
              filtered = filtered.filter(item => {
                const itemDate = parseDate(item.date);
                return itemDate.getMonth() + 1 === selectedMonth;
              });
            }
            
            filtered.sort((a, b) => {
              if (a.featured && !b.featured) return -1;
              if (!a.featured && b.featured) return 1;
              return parseDate(b.date) - parseDate(a.date);
            });
            
            return filtered.slice(0, 6);
          }

          const filtered = getFilteredNews()

          const openNewsLightbox = (idx) => setNewsLightboxIndex(idx)
          const closeNewsLightbox = () => setNewsLightboxIndex(null)
          const closeMonthModal = () => setIsMonthModalOpen(false)
          const handleFilterClick = (filterName) => {
            if (filterName === 'Month') {
              setIsMonthModalOpen(true)
            } else {
              setSelectedCategory(filterName)
              setSelectedMonth(null)
            }
          }
          const handleMonthClick = (monthValue) => {
            setSelectedMonth(monthValue)
            setSelectedCategory('Month')
            closeMonthModal()
          }
          const clearMonthFilter = () => {
            setSelectedMonth(null)
            setSelectedCategory('all')
            closeMonthModal()
          }

          return (
            <section style={{padding: "100px 0", background: "linear-gradient(135deg, #f8fafc 0%, #ffffff 100%)", position: "relative", overflow: "hidden"}}>
              {/* Decorative Elements */}
              <div style={{position: "absolute", top: "-100px", right: "-100px", width: "500px", height: "500px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%)", borderRadius: "50%"}}></div>
              <div style={{position: "absolute", bottom: "-50px", left: "-50px", width: "400px", height: "400px", background: "radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%)", borderRadius: "50%"}}></div>

              <div className="container-custom" style={{position: "relative", zIndex: "1"}}>
                {/* Section Header */}
                <div style={{textAlign: "center", marginBottom: "80px"}} data-aos="fade-up">
                  <div style={{display: "inline-block", padding: "8px 16px", background: "#0f172a", borderRadius: "50px", marginBottom: "16px"}}>
                    <span style={{fontSize: "13px", fontWeight: "700", color: "#ffffff", letterSpacing: "1px", textTransform: "uppercase"}}>{newsLabel}</span>
                  </div>
                  <h2 style={{fontSize: "2.8rem", fontWeight: "700", color: "#0f172a", marginBottom: "16px", lineHeight: "1.2", fontFamily: "Arial, sans-serif"}}>{newsTitle}</h2>
                  <p style={{fontSize: "17px", color: "#475569", fontWeight: "400", lineHeight: "1.6", maxWidth: "700px", margin: "0 auto"}}>{newsDesc}</p>
                </div>

                {/* Category Filter */}
                <div style={{display: "flex", justifyContent: "center", gap: "12px", flexWrap: "wrap", marginBottom: "60px"}} data-aos="fade-up" data-aos-delay="50">
                  {categories.map((cat, idx) => (
                    <button 
                      key={idx}
                      onClick={() => handleFilterClick(cat)}
                      style={{
                        padding: "10px 20px",
                        border: selectedCategory === cat ? "2px solid #0ea5e9" : "1px solid #e5e7eb",
                        background: selectedCategory === cat ? "rgba(14, 165, 233, 0.08)" : "#ffffff",
                        color: selectedCategory === cat ? "#0ea5e9" : "#475569",
                        borderRadius: "8px",
                        fontSize: "14px",
                        fontWeight: selectedCategory === cat ? "600" : "500",
                        cursor: "pointer",
                        transition: "all 0.3s ease",
                        letterSpacing: "0.5px"
                      }}
                      onMouseEnter={(e) => {
                        if (selectedCategory !== cat) {
                          e.currentTarget.style.borderColor = "#0ea5e9";
                          e.currentTarget.style.background = "rgba(14, 165, 233, 0.04)";
                        }
                      }}
                      onMouseLeave={(e) => {
                        if (selectedCategory !== cat) {
                          e.currentTarget.style.borderColor = "#e5e7eb";
                          e.currentTarget.style.background = "#ffffff";
                        }
                      }}
                    >
                      {cat === 'all' ? 'All News' : cat}
                    </button>
                  ))}
                  {/* Month Filter Button */}
                  <button 
                    onClick={() => handleFilterClick('Month')}
                    style={{
                      padding: "10px 20px",
                      border: selectedCategory === 'Month' ? "2px solid #0ea5e9" : "1px solid #e5e7eb",
                      background: selectedCategory === 'Month' ? "rgba(14, 165, 233, 0.08)" : "#ffffff",
                      color: selectedCategory === 'Month' ? "#0ea5e9" : "#475569",
                      borderRadius: "8px",
                      fontSize: "14px",
                      fontWeight: selectedCategory === 'Month' ? "600" : "500",
                      cursor: "pointer",
                      transition: "all 0.3s ease",
                      letterSpacing: "0.5px",
                      display: "flex",
                      alignItems: "center",
                      gap: "6px"
                    }}
                    onMouseEnter={(e) => {
                      if (selectedCategory !== 'Month') {
                        e.currentTarget.style.borderColor = "#0ea5e9";
                        e.currentTarget.style.background = "rgba(14, 165, 233, 0.04)";
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (selectedCategory !== 'Month') {
                        e.currentTarget.style.borderColor = "#e5e7eb";
                        e.currentTarget.style.background = "#ffffff";
                      }
                    }}
                  >
                    <i className="fas fa-calendar"></i>
                    {selectedMonth ? monthsData.find(m => m.value === selectedMonth)?.label : "Month"}
                    <i className="fas fa-chevron-down"></i>
                  </button>
                </div>

                {/* Month Selection Modal */}
                {isMonthModalOpen && (
                  <div 
                    style={{
                      position: "fixed",
                      inset: 0,
                      background: "rgba(15, 23, 42, 0.6)",
                      backdropFilter: "blur(4px)",
                      zIndex: 9999,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      padding: "20px"
                    }}
                    onClick={closeMonthModal}
                  >
                    <div 
                      style={{
                        background: "white",
                        borderRadius: "20px",
                        width: "100%",
                        maxWidth: "500px",
                        boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
                        overflow: "hidden"
                      }}
                      onClick={e => e.stopPropagation()}
                    >
                      <div style={{padding: "20px 24px", background: "#0f172a", color: "white", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                        <h3 style={{fontSize: "1.2rem", fontWeight: 700, margin: 0}}>Select Month</h3>
                        <button 
                          onClick={closeMonthModal}
                          style={{
                            background: "rgba(255,255,255,0.1)",
                            border: "none",
                            color: "white",
                            width: "32px",
                            height: "32px",
                            borderRadius: "50%",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            cursor: "pointer"
                          }}
                        >
                          <i className="fas fa-times"></i>
                        </button>
                      </div>
                      <div style={{padding: "24px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px"}}>
                        {monthsData.map((month) => (
                          <button
                            key={month.value}
                            onClick={() => handleMonthClick(month.value)}
                            style={{
                              padding: "12px",
                              border: selectedMonth === month.value ? "2px solid #0ea5e9" : "1px solid #e5e7eb",
                              borderRadius: "12px",
                              background: selectedMonth === month.value ? "rgba(14, 165, 233, 0.08)" : "white",
                              color: selectedMonth === month.value ? "#0ea5e9" : "#374151",
                              fontWeight: 600,
                              fontSize: "14px",
                              cursor: "pointer",
                              transition: "all 0.2s ease",
                              display: "flex",
                              alignItems: "center",
                              justifyContent: "center",
                              gap: "8px"
                            }}
                          >
                            <i className="fas fa-calendar-day"></i>
                            {month.label}
                          </button>
                        ))}
                      </div>
                      <div style={{padding: "16px 24px", borderTop: "1px solid #e5e7eb", display: "flex", justifyContent: "center"}}>
                        <button 
                          onClick={clearMonthFilter}
                          style={{
                            padding: "10px 20px",
                            background: "transparent",
                            border: "none",
                            color: "#0ea5e9",
                            fontWeight: 600,
                            cursor: "pointer"
                          }}
                        >
                          Clear Filter
                        </button>
                      </div>
                    </div>
                  </div>
                )}

                {/* News Lightbox Modal */}
                {newsLightboxIndex !== null && filtered[newsLightboxIndex] && (
                  <div 
                    style={{
                      position: "fixed",
                      inset: 0,
                      background: "rgba(0,0,0,0.92)",
                      zIndex: 9999,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      padding: "24px",
                      backdropFilter: "blur(6px)"
                    }}
                    onClick={closeNewsLightbox}
                  >
                    <div 
                      style={{
                        background: "#0f172a",
                        border: "1px solid rgba(255,255,255,0.1)",
                        borderRadius: "20px",
                        overflow: "hidden",
                        maxWidth: "760px",
                        width: "100%",
                        position: "relative",
                        display: "flex",
                        flexDirection: "column"
                      }}
                      onClick={e => e.stopPropagation()}
                    >
                      <button 
                        onClick={closeNewsLightbox}
                        style={{
                          position: "absolute",
                          top: "14px",
                          right: "14px",
                          width: "36px",
                          height: "36px",
                          background: "rgba(255,255,255,0.1)",
                          border: "1px solid rgba(255,255,255,0.15)",
                          borderRadius: "50%",
                          color: "#ffffff",
                          fontSize: "14px",
                          cursor: "pointer",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          zIndex: 10
                        }}
                      >
                        <i className="fas fa-times"></i>
                      </button>
                      <div style={{background: "#ffffff", display: "flex", alignItems: "center", justifyContent: "center", padding: "32px", minHeight: "360px"}}>
                        <img src={filtered[newsLightboxIndex].image} alt={filtered[newsLightboxIndex].title} style={{maxWidth: "100%", maxHeight: "420px", objectFit: "contain", display: "block", borderRadius: "4px"}} />
                      </div>
                      <div style={{padding: "24px 28px", display: "flex", flexDirection: "column", gap: "10px"}}>
                        <span style={{
                          display: "inline-flex",
                          alignItems: "center",
                          gap: "6px",
                          background: "rgba(14, 165, 233, 0.12)",
                          color: "#0ea5e9",
                          border: "1px solid rgba(14, 165, 233, 0.25)",
                          padding: "5px 14px",
                          borderRadius: "20px",
                          fontSize: "11px",
                          fontWeight: 700,
                          width: "fit-content",
                          letterSpacing: "0.6px"
                        }}>
                          <i className="fas fa-tag"></i>
                          {filtered[newsLightboxIndex].category}
                        </span>
                        <h3 style={{fontSize: "1.1rem", fontWeight: 700, color: "#ffffff", lineHeight: 1.5, margin: 0}}>
                          {filtered[newsLightboxIndex].title}
                        </h3>
                        <p style={{fontSize: "0.95rem", color: "#94a3b8", lineHeight: 1.6, margin: 0}}>
                          {filtered[newsLightboxIndex].excerpt}
                        </p>
                        <div style={{display: "flex", gap: "16px", fontSize: "13px", color: "#94a3b8", marginTop: "8px"}}>
                          <span><i className="fas fa-calendar-alt"></i> {filtered[newsLightboxIndex].date}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* News Grid */}
                <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "24px", marginBottom: "60px"}}>
                  {filtered.map((item, idx) => (
                    <div 
                      key={idx}
                      onClick={() => openNewsLightbox(idx)}
                      data-aos="fade-up"
                      data-aos-delay={idx * 100}
                      style={{
                        background: "#ffffff",
                        border: "1px solid #e5e7eb",
                        borderRadius: "12px",
                        overflow: "hidden",
                        transition: "all 0.3s ease",
                        cursor: "pointer",
                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.borderColor = "#0ea5e9";
                        e.currentTarget.style.boxShadow = "0 12px 24px rgba(14, 165, 233, 0.15)";
                        e.currentTarget.style.transform = "translateY(-4px)";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.borderColor = "#e5e7eb";
                        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
                        e.currentTarget.style.transform = "translateY(0)";
                      }}
                    >
                      {/* Image */}
                      <div style={{height: "150px", background: "linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "3rem", color: "#d1d5db", overflow: "hidden"}}>
                        {item.image ? (
                          <img src={item.image} alt={item.title} style={{width: "100%", height: "100%", objectFit: "cover"}} />
                        ) : (
                          <i className="fas fa-newspaper"></i>
                        )}
                      </div>
                      
                      {/* Content */}
                      <div style={{padding: "16px"}}>
                        <span style={{display: "inline-block", background: "rgba(14, 165, 233, 0.1)", color: "#0ea5e9", padding: "4px 8px", borderRadius: "4px", fontSize: "10px", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: "8px"}}>
                          {item.category}
                        </span>
                        <h3 style={{fontSize: "1.1rem", fontWeight: "700", color: "#0f172a", marginBottom: "8px", lineHeight: "1.3"}}>
                          {item.title}
                        </h3>
                        <p style={{fontSize: "0.85rem", color: "#6b7280", lineHeight: "1.5", marginBottom: "12px", display: "-webkit-box", WebkitLineClamp: "2", WebkitBoxOrient: "vertical", overflow: "hidden"}}>
                          {item.excerpt}
                        </p>
                        <div style={{display: "flex", gap: "12px", fontSize: "11px", color: "#9ca3af"}}>
                          <span><i className="fas fa-calendar" style={{marginRight: "4px"}}></i>{item.date}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Call to Action */}
                <div style={{textAlign: "center"}} data-aos="fade-up">
                  <a href="/EventsPage" style={{display: "inline-flex", alignItems: "center", gap: "10px", padding: "14px 36px", background: "linear-gradient(135deg, #ef4444 0%, #f87171 100%)", color: "#ffffff", textDecoration: "none", borderRadius: "8px", fontSize: "15px", fontWeight: "600", transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)", border: "none", cursor: "pointer"}}>
                    View All News <i className="fas fa-arrow-right"></i>
                  </a>
                </div>
              </div>
            </section>
          )
        }

        // ===== Board of Directors Component =====
        const BoardOfDirectors = () => {
          const directors = [
            {
              name: "Mohan Tanksale",
              designation: "Chairman & Director",
              image: "https://bfsissc.com/website/images/leadership/mohan-tanksale.webp"
            },
            {
              name: "Vivek Jain",
              designation: "Additional Director",
              image: "https://bfsissc.com/website/images/leadership/Vivek-Jain.webp"
            },
            {
              name: "Ashish Krishna",
              designation: "Additional Director",
              image: "https://bfsissc.com/website/images/leadership/Ashish-Krishna.webp"
            },
            {
              name: "Dinesh Sharma",
              designation: "Director",
              image: "https://bfsissc.com/website/images/leadership/Dinesh-Sharma.webp"
            },
            {
              name: "V. Narayanan Iyer",
              designation: "Director",
              image: "https://bfsissc.com/website/images/leadership/narayan-iyer.webp"
            },
            {
              name: "Nitin Kapoor",
              designation: "Nominee Director",
              image: "https://bfsissc.com/website/images/leadership/Nitin-Kapoor.webp"
            },
            {
              name: "Nithiyanantham Angiya",
              designation: "Director",
              image: "https://bfsissc.com/website/images/leadership/nithiyanantham-angiya.webp"
            }
          ]

          return (
            <section style={{padding: "4rem 0", background: "#f9fafb", position: "relative"}}>
              <div className="container-custom">
                {/* Header */}
                <div style={{textAlign: "center", marginBottom: "3.5rem"}} data-aos="fade-up">
                  <h2 style={{fontSize: "2.2rem", fontWeight: "700", color: "#0f172a", marginBottom: "0.5rem", fontFamily: "Arial, sans-serif"}}>Board Of Directors</h2>
                  <div style={{width: "60px", height: "3px", background: "linear-gradient(90deg, #0ea5e9, #3b82f6)", margin: "1rem auto"}}></div>
                </div>

                {/* Directors Row */}
                <div style={{display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "1.5rem", marginBottom: "3rem"}}>
                  {directors.map((director, idx) => (
                    <div
                      key={idx}
                      data-aos="fade-up"
                      data-aos-delay={idx * 50}
                      style={{
                        background: "white",
                        borderRadius: "12px",
                        overflow: "hidden",
                        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
                        transition: "all 0.3s ease",
                        cursor: "pointer",
                        border: "1px solid #e5e7eb"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.boxShadow = "0 8px 16px rgba(15, 23, 42, 0.12)";
                        e.currentTarget.style.transform = "translateY(-4px)";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.08)";
                        e.currentTarget.style.transform = "translateY(0)";
                      }}
                    >
                      {/* Image */}
                      <div style={{position: "relative", overflow: "hidden", paddingBottom: "125%"}}>
                        <img
                          src={director.image}
                          alt={director.name}
                          style={{
                            position: "absolute",
                            top: 0,
                            left: 0,
                            width: "100%",
                            height: "100%",
                            objectFit: "cover",
                            transition: "transform 0.4s ease"
                          }}
                          onMouseEnter={(e) => {e.target.style.transform = "scale(1.08)"}}
                          onMouseLeave={(e) => {e.target.style.transform = "scale(1)"}}
                          onError={(e) => {e.target.src = "https://via.placeholder.com/160x200/0f172a/ffffff?text=" + director.name.split(" ")[0]}}
                        />
                        {/* Blue Overlay on Hover */}
                        <div style={{
                          position: "absolute",
                          inset: 0,
                          background: "rgba(14, 165, 233, 0.1)",
                          opacity: 0,
                          transition: "opacity 0.3s ease"
                        }}
                        className="overlay-hover"
                        ></div>
                      </div>

                      {/* Info */}
                      <div style={{padding: "1rem", textAlign: "center", background: "white"}}>
                        <h3 style={{fontSize: "0.9rem", fontWeight: "700", color: "#0f172a", margin: "0 0 0.3rem 0", lineHeight: "1.3"}}>{director.name}</h3>
                        <p style={{fontSize: "0.75rem", color: "#0ea5e9", fontWeight: "600", margin: 0}}>{director.designation}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          )
        }

        // ===== LeadershipSection Component =====
        const LeadershipSection = () => {
          const leadershipTeam = [
            { name: "Mohan Tanksale", designation: "Chairman", company: "BFSI SSC", image: "https://bfsissc.com/website/images/leadership/mohan-tanksale.webp" },
            { name: "Vivek Jain", designation: "Additional Director", company: "BSE Limited", image: "https://bfsissc.com/website/images/leadership/Vivek-Jain.webp" },
            { name: "Ashish Krishna", designation: "Additional Director", company: "NSE Investments Ltd", image: "https://bfsissc.com/website/images/leadership/Ashish-Krishna.webp" },
            { name: "Dinesh Sharma", designation: "Director", company: "FinX | CIEL", image: "https://bfsissc.com/website/images/leadership/Dinesh-Sharma.webp" },
            { name: "V. Narayanan Iyer", designation: "Director", company: "AMC Repo Clearing", image: "https://bfsissc.com/website/images/leadership/narayan-iyer.webp" },
            { name: "Nitin Kapoor", designation: "Nominee Director", company: "NSDC", image: "https://bfsissc.com/website/images/leadership/Nitin-Kapoor.webp" },
            { name: "Nithiyanantham Angiya", designation: "Director", company: "IRDA", image: "https://bfsissc.com/website/images/leadership/nithiyanantham-angiya.webp" }
          ]

          return (
            <section style={{padding: "6rem 0", background: "linear-gradient(180deg, #ffffff 0%, #f9fafb 100%)", position: "relative"}}>
              <div className="container-custom">
                {/* Section Header */}
                <div style={{textAlign: "center", marginBottom: "5rem"}} data-aos="fade-up">
                  <div style={{display: "inline-block", paddingBottom: "1rem", marginBottom: "1rem", borderBottom: "2px solid #0ea5e9"}}>
                    <span style={{fontSize: "0.875rem", fontWeight: "700", letterSpacing: "1px", color: "#0ea5e9", textTransform: "uppercase"}}>Board of Directors</span>
                  </div>
                  <h2 style={{fontSize: "3rem", fontWeight: "700", color: "#0f172a", marginBottom: "1.5rem", lineHeight: "1.2", fontFamily: "Arial, sans-serif"}}>Leadership Team</h2>
                  <p style={{fontSize: "1.125rem", color: "#6b7280", maxWidth: "500px", margin: "0 auto", lineHeight: "1.6"}}>Distinguished leaders driving industry transformation across BFSI sector</p>
                </div>

                {/* Leadership Grid */}
                <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: "3rem"}}>
                  {leadershipTeam.map((member, idx) => (
                    <div
                      key={idx}
                      data-aos="fade-up"
                      data-aos-delay={idx * 100}
                      style={{
                        background: "white",
                        borderRadius: "12px",
                        overflow: "hidden",
                        boxShadow: "0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08)",
                        transition: "all 0.3s ease",
                        cursor: "pointer"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.boxShadow = "0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.08)";
                        e.currentTarget.style.transform = "translateY(-8px)";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.boxShadow = "0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08)";
                        e.currentTarget.style.transform = "translateY(0)";
                      }}
                    >
                      {/* Image Container */}
                      <div style={{position: "relative", height: "320px", background: "linear-gradient(135deg, #0f172a 0%, #1a3a52 100%)", overflow: "hidden"}}>
                        <img 
                          src={member.image}
                          alt={member.name}
                          style={{
                            width: "100%",
                            height: "100%",
                            objectFit: "cover",
                            transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)"
                          }}
                          onMouseEnter={(e) => {e.target.style.transform = "scale(1.05)"}}
                          onMouseLeave={(e) => {e.target.style.transform = "scale(1)"}}
                          onError={(e) => {e.target.src = "https://via.placeholder.com/320x320/0f172a/ffffff?text=" + member.name.split(" ")[0]}}
                        />
                        {/* Overlay Gradient */}
                        <div style={{position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7))"}}></div>
                      </div>

                      {/* Content */}
                      <div style={{padding: "2rem"}}>
                        <h3 style={{fontSize: "1.25rem", fontWeight: "700", color: "#0f172a", marginBottom: "0.5rem"}}>{member.name}</h3>
                        <p style={{fontSize: "0.875rem", fontWeight: "600", color: "#0ea5e9", marginBottom: "1rem"}}>{member.designation}</p>
                        <div style={{height: "1px", background: "#e5e7eb", marginBottom: "1rem"}}></div>
                        <p style={{fontSize: "0.875rem", color: "#6b7280"}}>{member.company}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          )
        }

        // ===== Testimonials Component =====
        const Testimonials = () => {
          const testimonials = cmsData.testimonials?.items || [
            {
              avatar: "A",
              name: "Amit Yadav",
              role: "Certified Candidate",
              quote:
                "The certification helped me gain clarity and confidence. The assessment process was transparent and professional, opening new career opportunities.",
            },
            {
              avatar: "T",
              name: "Training Partner",
              role: "Skill Delivery Network",
              quote:
                "BFSI SSC provides structured QP/NOS, quality audits, and strong placement linkages. Their support has been invaluable to our operations.",
            },
            {
              avatar: "C",
              name: "Corporate HR",
              role: "Employer Partner",
              quote:
                "We hired certified candidates and saw clear job readiness. The CSR dashboard reporting is excellent and helps track our impact effectively.",
            },
          ]

          return (
            <section className="testimonials-section">
              <div className="container-custom">
                <div className="section-header" data-aos="fade-up">
                  <span className="section-label" style={{ color: "var(--accent-light)" }}>
                    Testimonials
                  </span>
                  <h2 style={{ color: "var(--white)" }}>Success Stories</h2>
                  <p style={{ color: "var(--gray-300)" }}>What learners and partners say about BFSI SSC</p>
                </div>
                <div className="testimonials-grid">
                  {testimonials.map((testimonial, index) => (
                    <div className="testimonial-card" key={index} data-aos="fade-up" data-aos-delay={index * 100}>
                      <p className="testimonial-quote">"{testimonial.quote}"</p>
                      <div className="testimonial-author">
                        <div className="testimonial-avatar">{testimonial.avatar}</div>
                        <div className="testimonial-info">
                          <h5>{testimonial.name}</h5>
                          <p>{testimonial.role}</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          )
        }

        // ===== Footer Component =====
      const Footer = () => {
  const quickLinks = [
    { title: "About Us", link: "AboutPage" },
    { title: "Projects & Impact", link: "Projects" },
    { title: "Media & Awards", link: "EventsPage" },
    { title: "Partners", link: "Institutions" },
    { title: "Contact Us", link: "ContactUs" },
  ];

  const services = [
    { title: "Apprenticeships", link: "Apprenticeships" },
    { title: "Careers", link: "Careers" },
  ];

  const resources = [
    { title: "QP/NOS Library", link: "QpNos" },
    { title: "News", link: "News" },
    { title: "TOT", link: "TotCalendar" },
    { title: "Accreditation and Affiliation Guidelines", link: "https://bfsissc.com/courses/guidelines.pdf" },
  ]

          return (
            <footer className="footer">
              <div className="container-custom">
                <div className="footer-grid">
                  <div className="footer-brand">
                    <a href="index.php" className="footer-logo">
                      <img src="https://bfsissc.com/website/images/logo (1).png" alt="BFSI Sector Skill Council of India" className="navbar-logo-img" />
                    </a>
                    <p>
                      Building future-ready workforce for India's Banking, Financial Services and Insurance sector through
                      industry-aligned skill development programs.
                    </p>
                    <div className="footer-social">
                      <a href="https://www.facebook.com/bfsisectorskillcouncilofindia/">
                        <i className="fab fa-facebook-f"></i>
                      </a>
                      <a href="https://www.instagram.com/bfsi_ssc_/">
                        <i className="fab fa-instagram"></i>
                      </a>
                      <a href="https://www.linkedin.com/company/bfsi-ssc/">
                        <i className="fab fa-linkedin-in"></i>
                      </a>
                      <a href="https://www.youtube.com/@BFSI-SSC">
                        <i className="fab fa-youtube"></i>
                      </a>
                    </div>
                  </div>
                  <div className="footer-column">
                    <h4>Quick Links</h4>
                    <ul>
                      {quickLinks.map((link, index) => (
                        <li key={index}>
                          <a href={link.link}>{link.title}</a>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="footer-column">
                    <h4>Services</h4>
                    <ul>
                      {services.map((link, index) => (
                        <li key={index}>
                          <a href={link.link}>{link.title}</a>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="footer-column">
                    <h4>Resources</h4>
                    <ul>
                      {resources.map((link, index) => (
                        <li key={index}>
                          <a href={link.link}>{link.title}</a>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
                <div className="footer-bottom">
                  <p>&copy; 2026 BFSI Sector Skill Council of India. All Rights Reserved.</p>
                  <div className="footer-bottom-links">
                    <a href="https://bfsissc.com/TermsandConditions">Privacy Policy</a>
                    <a href="https://bfsissc.com/TermsandConditions">Terms of Use</a>
                  </div>
                </div>
              </div>
            </footer>
          )
        }

        // ===== Main App Component =====
        // ===== Explore Opportunities Section Component =====
        const ExploreOpportunitiesSection = () => {
          const opportunities = [
            {
              icon: "💼",
              title: "Job Opportunities",
              btnLabel: "Explore Jobs", 
              bullets: [
                "Discover job openings across BFSI sector",
                "Apply directly to verified employers",
                "Explore roles suited to your qualifications",
                "Stay updated with latest opportunities",
                "Connect with organizations actively hiring"
              ],
              link: "careers.php"
            },
            {
              icon: "🎓",
              title: "Apprenticeship Opportunities",
              btnLabel: "Explore Opportunities",
              bullets: [
                "Gain real industry experience",
                "Earn stipend while learning skills",
                "Build job-ready capabilities",
                "Receive government recognised certification",
                "Improve chances of full-time employment"
              ],
              link: "apprenticeships.php"
            },
            {
              icon: "📘",
              title: "Training Programs & Courses",
              btnLabel: "Explore Courses",  
              bullets: [
                "Learn industry-relevant skills",
                "Certification programs for career growth",
                "Expert-led training sessions",
                "Prepare for BFSI sector careers",
                "Enhance employability through skill development"
              ],
              link: "courses.php"
            },
            {
              icon: "📚",
              title: "Learning Resources",
              btnLabel: "Explore Resources",
              bullets: [
                "Access guides and industry insights",
                "Improve knowledge of banking and finance",
                "Stay updated with industry trends",
                "Learn at your own pace",
                "Strengthen career readiness"
              ],
              link: "/Learners"
            }
          ]

          return (
            <section style={{padding: "100px 0", background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)", position: "relative", overflow: "hidden"}}>
              <div className="container-custom" style={{position: "relative", zIndex: "1"}}>
                {/* Header */}
                <div style={{textAlign: "center", marginBottom: "80px"}} data-aos="fade-up">
                  <div style={{display: "inline-block", padding: "8px 16px", background: "#0f172a", borderRadius: "50px", marginBottom: "16px"}}>
                    <span style={{fontSize: "13px", fontWeight: "700", color: "#ffffff", letterSpacing: "1px", textTransform: "uppercase"}}>Explore Options</span>
                  </div>
                  <h2 style={{fontSize: "2.8rem", fontWeight: "700", color: "#0f172a", marginBottom: "16px", lineHeight: "1.2", fontFamily: "Arial, sans-serif"}}>
                    Explore Opportunities
                  </h2>
                  <p style={{fontSize: "17px", color: "#475569", fontWeight: "400", lineHeight: "1.7", maxWidth: "700px", margin: "0 auto"}}>
                    Access jobs, apprenticeships, training programs, and learning resources designed to accelerate your career.
                  </p>
                </div>

                {/* Cards Grid */}
                <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "32px"}}>
                  {opportunities.map((opp, idx) => (
                    <div 
                      key={idx}
                      data-aos="fade-up"
                      data-aos-delay={idx * 100}
                      style={{
                        background: "#ffffff",
                        borderRadius: "16px",
                        padding: "40px 32px",
                        border: "2px solid #e5e7eb",
                        transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
                        cursor: "pointer",
                        position: "relative",
                        overflow: "hidden",
                        display: "flex",
                        flexDirection: "column"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.borderColor = "#0ea5e9";
                        e.currentTarget.style.boxShadow = "0 16px 40px rgba(14, 165, 233, 0.15)";
                        e.currentTarget.style.transform = "translateY(-8px)";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.borderColor = "#e5e7eb";
                        e.currentTarget.style.boxShadow = "none";
                        e.currentTarget.style.transform = "translateY(0)";
                      }}
                    >
                      <div style={{fontSize: "56px", marginBottom: "20px", position: "relative", zIndex: "1"}}>
                        {opp.icon}
                      </div>
                      <h3 style={{margin: "0 0 12px 0", fontSize: "18px", fontWeight: "600", color: "#0f172a", fontFamily: "Arial, sans-serif"}}>
                        {opp.title}
                      </h3>
                      <ul style={{fontSize: "15px", fontWeight: "400", color: "#475569", marginBottom: "25px", lineHeight: "1.8", fontFamily: "Arial, sans-serif", paddingLeft: "20px", margin: "0 0 25px 0"}}>
                        {opp.bullets.map((bullet, bidx) => (
                          <li key={bidx} style={{marginBottom: "8px"}}>{bullet}</li>
                        ))}
                      </ul>
                      <a 
                        href={opp.link}
                        style={{
                          marginTop: "auto",
                          display: "inline-block",
                          background: "#ef4444",
                          color: "white",
                          padding: "10px 20px",
                          borderRadius: "8px",
                          fontSize: "14px",
                          textDecoration: "none",
                          fontWeight: "600",
                          transition: "all 0.3s ease",
                          border: "none",
                          cursor: "pointer",
                          fontFamily: "Arial, sans-serif"
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.background = "#dc2626";
                          e.currentTarget.style.transform = "translateY(-2px)";
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.background = "#ef4444";
                          e.currentTarget.style.transform = "translateY(0)";
                        }}
                      >
                        {opp.btnLabel} 
                      </a>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          )
        }

        const App = () => {
          React.useEffect(() => {
            console.log("App mounted successfully");
            
            // Initialize AOS animations
            AOS.init({
              duration: 800,
              easing: "ease-out",
              once: true,
              offset: 100,
            })

            // Initialize GSAP animations
            gsap.registerPlugin(ScrollTrigger)

            // Animate stats on scroll
            gsap.utils.toArray(".stat-number").forEach((stat) => {
              gsap.from(stat, {
                scrollTrigger: {
                  trigger: stat,
                  start: "top 80%",
                },
                opacity: 0,
                y: 30,
                duration: 0.8,
              })
            })
          }, [])

          return (
            <React.Fragment>
              <JobOpportunityPopup />
              <TopBar />
              <MegaNavbar />
              <main>
                <HeroCarousel />
                <ExploreOpportunitiesSection />
                <TrustSection />
                <QuickServices />
                <AboutSection />
                <StatsCounter />
                <ProgramsGrid />
                <NewsSlider />
                <Testimonials />
              </main>
              <Chatbot />
              <Footer />
            </React.Fragment>
          )
        }

        // ===== BFSI Opportunities Popup Component =====
        const JobOpportunityPopup = () => {
          const [isVisible, setIsVisible] = React.useState(false)
          const [isClosing, setIsClosing] = React.useState(false)
          const [category, setCategory] = React.useState('jobs')
          const [index, setIndex] = React.useState(0)
          const autoScrollRef = React.useRef(null)

         const data = {
        jobs: [
             {title: 'Apprenticeship', company: 'Union Bank of India', location: 'Pan India', salary1: 'Rural/SemiUrban ₹15,000',salary2: 'Urban ₹18,000',salary3: 'Metro ₹20,000', new: true, featured: true, logo: "https://bfsissc.com/website/images/Union bank.png"}
              ],
        apprenticeship: [
                    {title: 'Banking Apprentice', company: 'Industry Partner', location: 'Across India', salary: '₹12K–₹18K', new: true}
                        ],
        training: [
                    {title: 'Banking Certification', company: 'Industry Training', location: 'Online / Classroom', salary: 'Placement Linked'}
                        ],
        career: [
                    {title: 'Career Launch Program', company: 'Career Coaching', location: 'Online', salary: 'Placement Assistance'}
                         ]
                    }

          React.useEffect(() => {
            const timer = setTimeout(() => {
              setIsVisible(true)
            }, 2000)
            return () => clearTimeout(timer)
          }, [])

          React.useEffect(() => {
            if (isVisible) {
              startAuto()
            }
            return () => {
              if (autoScrollRef.current) {
                clearInterval(autoScrollRef.current)
              }
            }
          }, [isVisible, category])

          const startAuto = () => {
            if (autoScrollRef.current) {
              clearInterval(autoScrollRef.current)
            }
            autoScrollRef.current = setInterval(() => {
              setIndex(prev => (prev + 1) % data[category].length)
            }, 4000)
          }

          const handleClose = () => {
            setIsClosing(true)
            if (autoScrollRef.current) {
              clearInterval(autoScrollRef.current)
            }
            setTimeout(() => {
              setIsVisible(false)
            }, 300)
          }

          const next = () => {
            setIndex(prev => (prev + 1) % data[category].length)
            startAuto()
          }

          const prev = () => {
            setIndex(prev => (prev - 1 + data[category].length) % data[category].length)
            startAuto()
          }

          const switchCategory = (cat) => {
            setCategory(cat)
            setIndex(0)
            startAuto()
          }

          if (!isVisible) return null

          const item = data[category][index]

          return (
            <div 
              id="popupOverlay"
              style={{
                position: 'fixed',
                inset: 0,
                background: isClosing ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,0.55)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 99999,
                transition: 'background 0.3s ease'
              }}
              onClick={handleClose}
            >
              <div 
                className="popup"
                style={{
                  width: 'min(640px, 92%)',
                  background: 'white',
                  borderRadius: '12px',
                  overflow: 'hidden',
                  boxShadow: '0 25px 80px rgba(0,0,0,0.25)',
                  transform: isClosing ? 'scale(0.95) translateY(10px)' : 'scale(1) translateY(0)',
                  opacity: isClosing ? 0 : 1,
                  transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)'
                }}
                onClick={e => e.stopPropagation()}
              >
                {/* Header */}
                <div 
                  className="header"
                  style={{
                    background: '#0b1f3b',
                    color: 'white',
                    padding: '16px',
                    textAlign: 'center',
                    fontSize: 'clamp(18px, 2vw, 22px)',
                    fontWeight: 700,
                    position: 'relative'
                  }}
                >
                  Explore Opportunities Across India
                  <div 
                    className="close"
                    onClick={handleClose}
                    style={{
                      position: 'absolute',
                      right: '14px',
                      top: '8px',
                      fontSize: '22px',
                      cursor: 'pointer'
                    }}
                  >
                    ✕
                  </div>
                </div>

                {/* States */}
                <div 
                  className="states"
                  style={{
                    padding: '10px',
                    textAlign: 'center',
                    background: '#f3f4f6',
                    fontSize: 'clamp(11px, 1vw, 13px)'
                  }}
                >
                  <strong>Hiring across the country - PAN India</strong>
                 
                </div>

                {/* Categories */}
               
               

                {/* Card */}
                <div 
                  className="cardWrap"
                  style={{
                    position: 'relative',
                    padding: '20px',
                    display: 'flex',
                    justifyContent: 'center'
                  }}
                >
                  <div 
                    className="nav left"
                    onClick={prev}
                    style={{
                      position: 'absolute',
                      top: '50%',
                      transform: 'translateY(-50%)',
                      background: 'white',
                      width: '36px',
                      height: '36px',
                      borderRadius: '50%',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      cursor: 'pointer',
                      boxShadow: '0 4px 14px rgba(0,0,0,0.25)',
                      fontSize: '16px',
                      left: '8px',
                      zIndex: 1
                    }}
                  >
                  ◀
                  </div>

                  <div 
                    className="card"
                    style={{
                      width: 'min(360px, 90%)',
                      background: '#f8fafc',
                      border: '1px solid #e5e7eb',
                      borderRadius: '10px',
                      padding: '18px',
                      textAlign: 'center',
                      position: 'relative'
                    }}
                  >
                    {item.new && (
                      <div 
                        className="badge new"
                        style={{
                          position: 'absolute',
                          top: '8px',
                          left: '8px',
                          fontSize: '11px',
                          padding: '4px 8px',
                          borderRadius: '20px',
                          color: 'white',
                          fontWeight: 600,
                          background: '#10b981'
                        }}
                      >
                        NEW
                      </div>
                    )}
                    {item.featured && (
                      <div 
                        className="badge featured"
                        style={{
                          position: 'absolute',
                          top: '8px',
                          right: '8px',
                          fontSize: '11px',
                          padding: '4px 8px',
                          borderRadius: '20px',
                          color: 'white',
                          fontWeight: 600,
                          background: '#f59e0b'
                        }}
                      >
                        FEATURED
                      </div>
                    )}
                    
                    
                    {/* Company Logo - Add this inside the card div, after the badges and before the title */}
{item.logo && (
  <div 
    className="logo-container"
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: '12px',
      marginTop: '5px'
    }}
  >
    <img 
      src={item.logo} 
      alt={`${item.company} logo`}
      style={{
        maxWidth: '80px',
        maxHeight: '50px',
        objectFit: 'contain',
        borderRadius: '4px'
      }}
      onError={(e) => {
        e.target.style.display = 'none'
      }}
    />
  </div>
)}



                    <div 
                      className="title"
                      style={{
                        fontSize: 'clamp(18px, 2vw, 22px)',
                        fontWeight: 700,
                        marginTop: '10px'
                      }}
                    >
                      {item.title}
                    </div>
                    <div 
                      className="company"
                      style={{
                        fontSize: 'clamp(14px, 1.3vw, 16px)',
                        marginTop: '6px'
                      }}
                    >
                      {item.company}
                    </div>
                    <div 
                      className="location"
                      style={{
                        fontSize: 'clamp(13px, 1vw, 15px)',
                        color: '#6b7280'
                      }}
                    >
                      {item.location}
                    </div>
                    <div 
                      className="salary"
                      style={{
                        fontSize: 'clamp(13px, 1vw, 15px)',
                        background: '#e0f2fe',
                        color: '#0369a1',
                        padding: '4px 10px',
                        borderRadius: '20px',
                        display: 'inline-block',
                        marginTop: '8px'
                      }}
                    >
                      {item.salary1}
                     
                    </div>
                    <div 
                      className="salary"
                      style={{
                        fontSize: 'clamp(13px, 1vw, 15px)',
                        background: '#e0f2fe',
                        color: '#0369a1',
                        padding: '4px 10px',
                        borderRadius: '20px',
                        display: 'inline-block',
                        marginTop: '8px'
                      }}
                    >
                      {item.salary2}
                     
                    </div>
                    <div 
                      className="salary"
                      style={{
                        fontSize: 'clamp(13px, 1vw, 15px)',
                        background: '#e0f2fe',
                        color: '#0369a1',
                        padding: '4px 10px',
                        borderRadius: '20px',
                        display: 'inline-block',
                        marginTop: '8px'
                      }}
                    >
                      {item.salary3}
                     
                    </div>

                    <div style={{marginTop: '14px'}}>
                      <a 
                        className="btn apply"
                        href="https://beep.bfsissc.com/candidate_register/mkt"
                        style={{
                          display: 'inline-block',
                          fontSize: 'clamp(13px, 1vw, 15px)',
                          padding: '8px 16px',
                          borderRadius: '6px',
                          textDecoration: 'none',
                          background: '#ef4444',
                          color: 'white',
                          cursor: 'pointer'
                        }}
                      >
                        Apply
                      </a>
                      <a 
                        className="btn details"
                        href="https://beep.bfsissc.com/candidate_register/mkt"
                        style={{
                          display: 'inline-block',
                          fontSize: 'clamp(13px, 1vw, 15px)',
                          padding: '8px 16px',
                          borderRadius: '6px',
                          textDecoration: 'none',
                          border: '1px solid #0b1f3b',
                          color: '#0b1f3b',
                          marginLeft: '6px',
                          cursor: 'pointer'
                        }}
                      >
                        Details
                      </a>
                    </div>
                  </div>

                  <div 
                    className="nav right"
                    onClick={next}
                    style={{
                      position: 'absolute',
                      top: '50%',
                      transform: 'translateY(-50%)',
                      background: 'white',
                      width: '36px',
                      height: '36px',
                      borderRadius: '50%',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      cursor: 'pointer',
                      boxShadow: '0 4px 14px rgba(0,0,0,0.25)',
                      fontSize: '16px',
                      right: '8px',
                      zIndex: 1
                    }}
                  >
                    ▶
                  </div>
                </div>

                {/* Footer */}
                <div 
                  className="footer"
                  style={{
                    textAlign: 'center',
                    padding: '12px',
                    fontSize: 'clamp(13px, 1vw, 15px)'
                  }}
                >
                  <a 
                    href="#"
                    style={{
                      color: '#0b1f3b',
                      textDecoration: 'none',
                      fontWeight: 600
                    }}
                  >
                    View All Opportunities
                  </a>
                </div>
              </div>
            </div>
          )
        }

        // Add popup animation keyframes
        const popupStyle = document.createElement('style')
        popupStyle.textContent = `
          @keyframes popupSlideIn {
            from {
              opacity: 0;
              transform: scale(0.8) translateY(30px);
            }
            to {
              opacity: 1;
              transform: scale(1) translateY(0);
            }
          }
        `
        document.head.appendChild(popupStyle)

        // Render the App
        console.log("Starting to load CMS content...");
        loadCmsContent()
        console.log("React App initialization started");
    </script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl485113'},{'dcenter':'p3'},{'cp_id':'9945165'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>