<?php
require_once __DIR__ . '/_site_content.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php sc_text('home', 'meta_title', 'SmartThink  - Cyber Security ', $region); ?></title>
    <!-- Core CSS frameworks -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Project styles -->
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/modern-ux.css">
    <link rel="stylesheet" href="../assets/css/capgemini-theme.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Scroll Progress Bar -->
    <div class="scroll-progress" id="scrollProgress"></div>
    
    <!-- Utility Bar - Top -->
    <div class="utility-bar">
        <div class="container">
            <div class="utility-links">
                <a href="mailto:study@smartthinkllc.com">
                    <i class="fas fa-envelope"></i>
                    <span>study@smartthinkllc.com</span>
                </a>
                <a href="tel:+12027907745">
                    <i class="fas fa-phone"></i>
                    <span>(+1) 202-790-7745</span>
                </a>
            </div>
            <div class="utility-right">
                <div class="global-dropdown" id="globalDropdown">
                    <button class="global-dropdown-toggle" onclick="toggleGlobalDropdown()">
                        <i class="fas fa-globe"></i>
                        <span>Global | EN</span>
                        <i class="fas fa-chevron-down" style="font-size: 0.7em;"></i>
                    </button>
                    <div class="global-dropdown-menu">
                        <div class="global-dropdown-header">
                            <h4>Select your region</h4>
                        </div>
                        <div class="global-dropdown-regions">
                            <div class="region-group">
                                <div class="region-group-title">Americas</div>
                                <div class="region-options-list">
                                    <a href="#" class="region-option active" onclick="selectRegion('usa', this)">
                                        <span class="region-flag">🇺🇸</span>
                                        <span class="region-name">United States</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('canada', this)">
                                        <span class="region-flag">🇨🇦</span>
                                        <span class="region-name">Canada</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('brazil', this)">
                                        <span class="region-flag">🇧🇷</span>
                                        <span class="region-name">Brazil</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('mexico', this)">
                                        <span class="region-flag">🇲🇽</span>
                                        <span class="region-name">Mexico</span>
                                    </a>
                                </div>
                            </div>
                            <div class="region-group">
                                <div class="region-group-title">Europe</div>
                                <div class="region-options-list">
                                    <a href="#" class="region-option" onclick="selectRegion('uk', this)">
                                        <span class="region-flag">🇬🇧</span>
                                        <span class="region-name">United Kingdom</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('france', this)">
                                        <span class="region-flag">🇫🇷</span>
                                        <span class="region-name">France</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('germany', this)">
                                        <span class="region-flag">🇩🇪</span>
                                        <span class="region-name">Germany</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('netherlands', this)">
                                        <span class="region-flag">🇳🇱</span>
                                        <span class="region-name">Netherlands</span>
                                    </a>
                                </div>
                            </div>
                            <div class="region-group">
                                <div class="region-group-title">Asia Pacific</div>
                                <div class="region-options-list">
                                    <a href="#" class="region-option" onclick="selectRegion('india', this)">
                                        <span class="region-flag">🇮🇳</span>
                                        <span class="region-name">India</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('australia', this)">
                                        <span class="region-flag">🇦🇺</span>
                                        <span class="region-name">Australia</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('singapore', this)">
                                        <span class="region-flag">🇸🇬</span>
                                        <span class="region-name">Singapore</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('japan', this)">
                                        <span class="region-flag">🇯🇵</span>
                                        <span class="region-name">Japan</span>
                                    </a>
                                </div>
                            </div>
                            <div class="region-group">
                                <div class="region-group-title">Middle East & Africa</div>
                                <div class="region-options-list">
                                    <a href="#" class="region-option" onclick="selectRegion('uae', this)">
                                        <span class="region-flag">🇦🇪</span>
                                        <span class="region-name">UAE</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('southafrica', this)">
                                        <span class="region-flag">🇿🇦</span>
                                        <span class="region-name">South Africa</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('egypt', this)">
                                        <span class="region-flag">🇪🇬</span>
                                        <span class="region-name">Egypt</span>
                                    </a>
                                    <a href="#" class="region-option" onclick="selectRegion('nigeria', this)">
                                        <span class="region-flag">🇳🇬</span>
                                        <span class="region-name">Nigeria</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="utility-item">
                    <i class="fas fa-search"></i>
                    <span>Search</span>
                </div>
                <div class="theme-toggle" onclick="toggleTheme()">
                    <i class="fas fa-moon" id="themeIcon"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Capgemini-Style Header -->
    <header class="cap-header">
        <div class="container">
            <a class="cap-brand" href="index.php">
                <img src="../assets/images/logo.jpeg" alt="SmartThink" class="cap-logo">
                <span class="cap-brand-text">SmartThink</span>
            </a>
            
            <nav>
                <ul class="cap-nav">
                    <li class="cap-nav-item"><a class="cap-nav-link" href="about.php">About us</a></li>
                    <li class="cap-nav-item has-dropdown">
                        <a class="cap-nav-link" href="services.php" data-section-target="#services-section">
                            Services
                            <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="cap-dropdown">
                            <a class="cap-dropdown-link" href="advisory_it_solutions.php">Advisory and IT Solutions</a>
                            <a class="cap-dropdown-link" href="training.php">Training</a>
                            <a class="cap-dropdown-link" href="recruitment.php">Recruitment</a>
                        </div>
                    </li>
                    <li class="cap-nav-item"><a class="cap-nav-link" href="courses.php" data-section-target="#featured-courses-section">Courses</a></li>
                    <li class="cap-nav-item"><a class="cap-nav-link" href="careers.php">Careers</a></li>
                    <li class="cap-nav-item"><a class="cap-nav-link" href="appointment.php">Appointment</a></li>
                    <li class="cap-nav-item has-dropdown">
                        <a class="cap-nav-link" href="training.php">
                            Training
                            <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="cap-dropdown">
                            <a class="cap-dropdown-link" href="cyber_grc.php">Cyber GRC</a>
                            <a class="cap-dropdown-link" href="ai_governance.php">AI Governance</a>
                        </div>
                    </li>
                    <li class="cap-nav-item"><a class="cap-nav-link" href="news.php">News</a></li>
                </ul>
            </nav>

            <div class="d-flex align-items-center">
                <!-- Region Selector -->
                

                <!-- Auth Buttons -->
                <div class="cap-auth ms-4">
                    <a href="../lms/login.php" class="btn-cap-login">Login</a>
                    <a href="../lms/register.php" class="btn-cap-register">Register</a>
                </div>
                
                <button class="navbar-toggler d-lg-none ms-3" type="button" style="background: transparent; border: none; color: white;" onclick="document.querySelector('.cap-nav').classList.toggle('open')">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Capgemini-Style Hero Section -->
    <section class="cap-hero">
        <!-- Hero Background Image Slider -->
        <div class="hero-bg-slider">
            <div class="hero-bg-slide active" style="background-image: linear-gradient(135deg, rgba(3, 14, 40, 0.45), rgba(3, 25, 64, 0.45)), url('../assets/images/slider/cyberinsurance.webp');"></div>
            <div class="hero-bg-slide" style="background-image: linear-gradient(135deg, rgba(3, 14, 40, 0.45), rgba(3, 25, 64, 0.45)), url('../assets/images/anti-hacking.gif');"></div>
            <div class="hero-bg-slide" style="background-image: linear-gradient(135deg, rgba(3, 14, 40, 0.45), rgba(3, 25, 64, 0.45)), url('../assets/images/Cybersecurity.gif');"></div>
      
      
        </div>

        <!-- Abstract 3D Background -->
        <div class="hero-abstract-bg">
            <div class="abstract-shape shape-1"></div>
            <div class="abstract-shape shape-2"></div>
            <div class="abstract-shape shape-3"></div>
        </div>

        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="hero-content-wrapper">
                        <div class="hero-card-slider">
                            <!-- Slide 1: USA Learning Hub -->
                            <div class="hero-card-slide active">
                                <div class="hero-card">
                                    <span class="hero-tag"><?php sc_text('home', 'hero_badge', 'SmartThink Learning Hub', $region); ?></span>
                                    <h1 class="hero-title"><?php sc_text('home', 'hero_title', 'Advance Your Career with US-Focused Learning', $region); ?></h1>
                                    <p class="hero-description"><?php sc_html('home', 'hero_subtitle', 'Build in-demand skills with US-aligned certifications, bootcamps, and professional development programs tailored to the American market.', $region); ?></p>
                                    <div class="hero-buttons">
                                        <a href="../lms/courses.php" class="btn-cap-primary">
                                            <span>Learn More</span>
                                            <i class="fas fa-arrow-right"></i>
                                        </a>
                                        <a href="contact.php" class="btn-cap-secondary">
                                            <span>Contact Us</span>
                                            <i class="fas fa-phone"></i>
                                        </a>
                                    </div>
                                    <div class="hero-enterprise-cta">
                                        <span>For corporate training programs:</span>
                                        <div class="hero-enterprise-actions">
                                            <a href="consulting.php" class="hero-enterprise-link">
                                                <i class="fas fa-file-signature"></i>
                                                <span>Request proposal</span>
                                            </a>
                                            <a href="contact.php" class="hero-enterprise-link">
                                                <i class="fas fa-calendar-check"></i>
                                                <span>Schedule a call</span>
                                            </a>
                                        </div>
                                    </div>
                                    
                                    <!-- Stats -->
                                    <div class="hero-stats-cap">
                                        <div class="stat-cap">
                                            <span class="stat-cap-number"><?php sc_text('home', 'hero_stat_1_number', '50K+', $region); ?></span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_1_label', 'Active Learners', $region); ?></span>
                                        </div>
                                        <div class="stat-cap">
                                            <span class="stat-cap-number"><?php sc_text('home', 'hero_stat_2_number', '500+', $region); ?></span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_2_label', 'Professional Courses', $region); ?></span>
                                        </div>
                                        <div class="stat-cap">
                                            <span class="stat-cap-number"><?php sc_text('home', 'hero_stat_3_number', '98%', $region); ?></span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_3_label', 'Success Rate', $region); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Slide 2: Europe Learning Hub -->
                            <div class="hero-card-slide">
                                <div class="hero-card">
                                    <span class="hero-tag"><?php sc_text('home', 'hero_badge_eu', 'Europe Learning Hub', $region); ?></span>
                                    <h1 class="hero-title"><?php sc_text('home', 'hero_title_eu', 'Grow Your Skills for the European Market', $region); ?></h1>
                                    <p class="hero-description"><?php sc_html('home', 'hero_subtitle_eu', 'Access EU-focused programs on compliance, digital innovation, and cross-border collaboration.', $region); ?></p>
                                    <div class="hero-buttons">
                                        <a href="courses.php" class="btn-cap-primary">
                                            <span>View EU Programs</span>
                                            <i class="fas fa-arrow-right"></i>
                                        </a>
                                        <a href="consulting.php" class="btn-cap-secondary">
                                            <span>Talk to an Expert</span>
                                            <i class="fas fa-comments"></i>
                                        </a>
                                    </div>
                                    
                                    <!-- Stats -->
                                    <div class="hero-stats-cap">
                                        <div class="stat-cap">
                                            <span class="stat-cap-number">30K+</span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_eu_1_label', 'Learners in Europe', $region); ?></span>
                                        </div>
                                        <div class="stat-cap">
                                            <span class="stat-cap-number">200+</span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_eu_2_label', 'EU-Focused Programs', $region); ?></span>
                                        </div>
                                        <div class="stat-cap">
                                            <span class="stat-cap-number">95%</span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_eu_3_label', 'Learner Satisfaction', $region); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Slide 3: Global Remote Learning -->
                            <div class="hero-card-slide">
                                <div class="hero-card">
                                    <span class="hero-tag"><?php sc_text('home', 'hero_badge_global', 'Global Remote Learning', $region); ?></span>
                                    <h1 class="hero-title"><?php sc_text('home', 'hero_title_global', 'Learn Anywhere, Advance Everywhere', $region); ?></h1>
                                    <p class="hero-description"><?php sc_html('home', 'hero_subtitle_global', 'Flexible online programs designed for busy professionals across time zones and regions.', $region); ?></p>
                                    <div class="hero-buttons">
                                        <a href="../lms/register.php" class="btn-cap-primary">
                                            <span>Join SmartThink</span>
                                            <i class="fas fa-user-plus"></i>
                                        </a>
                                        <a href="services.php" class="btn-cap-secondary">
                                            <span>Explore Services</span>
                                            <i class="fas fa-layer-group"></i>
                                        </a>
                                    </div>
                                    
                                    <!-- Stats -->
                                    <div class="hero-stats-cap">
                                        <div class="stat-cap">
                                            <span class="stat-cap-number">80+</span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_global_1_label', 'Countries Reached', $region); ?></span>
                                        </div>
                                        <div class="stat-cap">
                                            <span class="stat-cap-number">24/7</span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_global_2_label', 'Learning Access', $region); ?></span>
                                        </div>
                                        <div class="stat-cap">
                                            <span class="stat-cap-number">4.8/5</span>
                                            <span class="stat-cap-label"><?php sc_text('home', 'hero_stat_global_3_label', 'Average Rating', $region); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="hero-card-indicators">
                            <span class="hero-card-indicator active"></span>
                            <span class="hero-card-indicator"></span>
                            <span class="hero-card-indicator"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Multi-Card Slider Section -->
  

    <!-- Services Section -->
    <section class="services-section reveal-on-scroll" id="services-section" data-scroll-spy="true">
        <div class="container">
            <div class="section-header">
                <h2>Our Services</h2>
                <p>Comprehensive learning solutions tailored to your needs</p>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h3>Professional Training</h3>
                        <p>Industry-leading certification programs and skill development courses</p>
                        <a href="training.php" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <h3>Consulting Services</h3>
                        <p>Expert guidance for organizational transformation and growth</p>
                        <a href="consulting.php" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3>Talent Recruitment</h3>
                        <p>Connecting top talent with leading organizations</p>
                        <a href="recruitment.php" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Courses Section (Slider) -->
    <section class="courses-section reveal-on-scroll" id="featured-courses-section" data-scroll-spy="true">
        <div class="container">
            <div class="section-header">
                <h2>Featured Courses</h2>
                <p>Discover our most popular learning programs</p>
            </div>

            <div class="course-filters">
                <button type="button" class="course-filter active" data-category="all">All</button>
                <button type="button" class="course-filter" data-category="cybersecurity">Cybersecurity</button>
                <button type="button" class="course-filter" data-category="awareness">Awareness</button>
                <button type="button" class="course-filter" data-category="cloud">Cloud Security</button>
            </div>

            <div class="multi-card-slider-wrapper">
                <!-- Slider Controls -->
                <button class="multi-slider-control multi-slider-prev" onclick="changeMultiCardSlide(-1)">
                    <i class="fas fa-chevron-left"></i>
                </button>

                <!-- Courses Slider -->
                <div class="multi-card-slider" id="multiCardSlider">
                    <div class="slider-card" data-category="cybersecurity" data-title="Cybersecurity Fundamentals" data-description="Master the essentials of modern cybersecurity practices" data-duration="8 weeks" data-level="Beginner" data-price="$299" data-image="../assets/images/coursep1.jpeg" data-badge="Popular">
                        <div class="course-card">
                            <div class="course-image">
                                <img src="../assets/images/coursep1.jpeg" alt="Course" class="img-fluid">
                                <div class="course-badge">Popular</div>
                            </div>
                            <div class="course-content">
                                <h3>Cybersecurity Fundamentals</h3>
                                <p>Master the essentials of modern cybersecurity practices</p>
                                <div class="course-meta">
                                    <span><i class="fas fa-clock"></i> 8 weeks</span>
                                    <span><i class="fas fa-signal"></i> Beginner</span>
                                </div>
                                <div class="course-price">$299</div>
                                <button type="button" class="course-quickview-btn">Quick view</button>
                            </div>
                        </div>
                    </div>

                    <div class="slider-card" data-category="awareness" data-title="Awareness Training" data-description="Learn data analysis and machine learning basics" data-duration="12 weeks" data-level="Intermediate" data-price="$499" data-image="../assets/images/downloadawarenesscourse.jpeg" data-badge="New">
                        <div class="course-card">
                            <div class="course-image">
                                <img src="../assets/images/downloadawarenesscourse.jpeg" alt="Course" class="img-fluid">
                                <div class="course-badge">New</div>
                            </div>
                            <div class="course-content">
                                <h3>Awareness Training</h3>
                                <p>Learn data analysis and machine learning basics</p>
                                <div class="course-meta">
                                    <span><i class="fas fa-clock"></i> 12 weeks</span>
                                    <span><i class="fas fa-signal"></i> Intermediate</span>
                                </div>
                                <div class="course-price">$499</div>
                                <button type="button" class="course-quickview-btn">Quick view</button>
                            </div>
                        </div>
                    </div>

                    <div class="slider-card" data-category="cloud" data-title="Cloud Security" data-description="Master AWS, Azure, and Google Cloud Security platforms" data-duration="10 weeks" data-level="Advanced" data-price="$599" data-image="../assets/images/downloadcybersecurtiy.jpeg" data-badge="Trending">
                        <div class="course-card">
                            <div class="course-image">
                                <img src="../assets/images/downloadcybersecurtiy.jpeg" alt="Course" class="img-fluid">
                                <div class="course-badge">Trending</div>
                            </div>
                            <div class="course-content">
                                <h3>Cloud Security</h3>
                                <p>Master AWS, Azure, and Google Cloud Security platforms</p>
                                <div class="course-meta">
                                    <span><i class="fas fa-clock"></i> 10 weeks</span>
                                    <span><i class="fas fa-signal"></i> Advanced</span>
                                </div>
                                <div class="course-price">$599</div>
                                <button type="button" class="course-quickview-btn">Quick view</button>
                            </div>
                        </div>
                    </div>

                    <!-- You can add more slider-card blocks here as you add more courses -->
                </div>

                <button class="multi-slider-control multi-slider-next" onclick="changeMultiCardSlide(1)">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- Course Quick View Modal -->
    <div class="modal fade course-modal" id="courseQuickViewModal" tabindex="-1" aria-labelledby="courseQuickViewLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <button type="button" class="course-modal-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
                <div class="modal-body course-modal-body">
                    <div class="row g-4">
                        <div class="col-md-5">
                            <div class="course-modal-image-wrapper">
                                <img src="" alt="Course image" class="course-modal-image">
                                <span class="course-modal-badge"></span>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <h3 id="courseQuickViewLabel" class="course-modal-title"></h3>
                            <p class="course-modal-description"></p>
                            <div class="course-modal-meta">
                                <span class="course-modal-duration"><i class="fas fa-clock"></i><span class="value"></span></span>
                                <span class="course-modal-level"><i class="fas fa-signal"></i><span class="value"></span></span>
                            </div>
                            <div class="course-modal-footer">
                                <span class="course-modal-price"></span>
                                <a href="../lms/courses.php" class="btn-cap-primary course-modal-cta">View all courses</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Section -->
    <section class="stats-section reveal-on-scroll" id="stats-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number" data-target="50000">0</div>
                        <div class="stat-label">Active Learners</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number" data-target="500">0</div>
                        <div class="stat-label">Professional Courses</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number" data-target="98">0</div>
                        <div class="stat-label">Success Rate %</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number" data-target="1000">0</div>
                        <div class="stat-label">Expert Instructors</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Trust & Compliance Section -->
    <section class="trust-section reveal-on-scroll" id="trust-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <h2 class="trust-title">Enterprise-grade security & compliance</h2>
                    <p class="trust-text">SmartThink protects your learners and data with modern security practices designed for corporate environments.</p>
                    <ul class="trust-list">
                        <li>
                            <i class="fas fa-shield-alt"></i>
                            <span>Secure-by-design platform with regular security reviews.</span>
                        </li>
                        <li>
                            <i class="fas fa-lock"></i>
                            <span>Role-based access and encryption in transit and at rest.</span>
                        </li>
                        <li>
                            <i class="fas fa-user-check"></i>
                            <span>Support for corporate onboarding, offboarding, and audit trails.</span>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <div class="trust-badges">
                        <div class="trust-badge">
                            <i class="fas fa-certificate"></i>
                            <span>ISO-aligned practices</span>
                        </div>
                        <div class="trust-badge">
                            <i class="fas fa-user-shield"></i>
                            <span>Data privacy first</span>
                        </div>
                        <div class="trust-badge">
                            <i class="fas fa-building"></i>
                            <span>Enterprise support</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Client Outcomes Strip -->
    <section class="case-strip-section reveal-on-scroll" id="case-strip-section">
        <div class="container">
            <div class="case-strip-grid">
                <div class="case-strip-item">
                    <h4>Global bank</h4>
                    <p>Reduced phishing-related incidents by 60% after rolling out awareness training to 5,000+ staff.</p>
                </div>
                <div class="case-strip-item">
                    <h4>Cloud services provider</h4>
                    <p>Accelerated cloud security upskilling for engineering teams across three regions.</p>
                </div>
                <div class="case-strip-item">
                    <h4>Public sector agency</h4>
                    <p>Standardized cybersecurity onboarding for new employees and contractors.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials-section reveal-on-scroll" id="testimonials-section">
        <div class="container">
            <div class="section-header">
                <h2>What Our Students Say</h2>
                <p>Real stories from successful learners</p>
            </div>
            <div class="testimonials-slider-wrapper">
                <div class="testimonials-slider" id="testimonialsSlider">
                    <div class="testimonial-slide active">
                        <div class="testimonial-content">
                            <div class="testimonial-image">
                                <img src="../assets/images/smarthink_paper.jpeg" alt="Student" class="slide-image">
                            </div>
                            <p>"SmartThink transformed my career. The cybersecurity course was comprehensive and instructors were amazing."</p>
                            <div class="testimonial-author">
                                <div class="author-info">
                                    <h4>Sarah Johnson</h4>
                                    <p>Cybersecurity Analyst</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide">
                        <div class="testimonial-content">
                            <div class="testimonial-image">
                                <img src="../assets/images/smarthinkllc.jpeg" alt="Student" class="slide-image">
                            </div>
                            <p>"The data science program gave me the skills I needed to advance in my career. Highly recommended!"</p>
                            <div class="testimonial-author">
                                <div class="author-info">
                                    <h4>Michael Chen</h4>
                                    <p>Data Scientist</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide">
                        <div class="testimonial-content">
                            <div class="testimonial-image">
                                <img src="../assets/images/smartthinkllcs.jpeg" alt="Student" class="slide-image">
                            </div>
                            <p>"Excellent learning platform with great support. The cloud computing course was exactly what I needed."</p>
                            <div class="testimonial-author">
                                <div class="author-info">
                                    <h4>Emily Rodriguez</h4>
                                    <p>Cloud Engineer</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide">
                        <div class="testimonial-content">
                            <div class="testimonial-image">
                                <img src="../assets/images/logo.jpeg" alt="Student" class="slide-image">
                            </div>
                            <p>"The AI and machine learning course opened new career opportunities for me. Best investment ever!"</p>
                            <div class="testimonial-author">
                                <div class="author-info">
                                    <h4>David Kim</h4>
                                    <p>AI Engineer</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide">
                        <div class="testimonial-content">
                            <div class="testimonial-image">
                                <img src="../assets/images/smartthinklogos.jpeg" alt="Student" class="slide-image">
                            </div>
                            <p>"Project management certification helped me get promoted. The practical approach was invaluable."</p>
                            <div class="testimonial-author">
                                <div class="author-info">
                                    <h4>Lisa Anderson</h4>
                                    <p>Project Manager</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slider Controls -->
                <button class="slider-btn prev-btn" onclick="changeSlide(-1)">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="slider-btn next-btn" onclick="changeSlide(1)">
                    <i class="fas fa-chevron-right"></i>
                </button>
                
                <!-- Slider Indicators -->
                <div class="slider-indicators">
                    <span class="indicator active" onclick="goToSlide(0)"></span>
                    <span class="indicator" onclick="goToSlide(1)"></span>
                    <span class="indicator" onclick="goToSlide(2)"></span>
                    <span class="indicator" onclick="goToSlide(3)"></span>
                    <span class="indicator" onclick="goToSlide(4)"></span>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners Section -->
    <section class="partners-section reveal-on-scroll" id="partners-section">
        <div class="container">
            <div class="section-header">
                <h2>Trusted by Leading Organizations</h2>
                <p>Partnering with industry leaders worldwide</p>
            </div>
            <div class="partners-grid">
                <div class="partner-item">
                    <img src="../assets/images/image.png" alt="Partner" class="partner-logo">
                </div>
                <div class="partner-item">
                    <img src="../assets/images/partner2.png" alt="Partner" class="partner-logo">
                </div>
                <div class="partner-item">
                    <img src="../assets/images/partner3.png" alt="Partner" class="partner-logo">
                </div>
                <div class="partner-item">
                    <img src="../assets/images/partner4.png" alt="Partner" class="partner-logo">
                </div>
                <div class="partner-item">
                    <img src="../assets/images/partner5.png" alt="Partner" class="partner-logo">
                </div>
                <div class="partner-item">
                    <img src="../assets/images/partner6.png" alt="Partner" class="partner-logo">
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section reveal-on-scroll" id="cta-section">
        <div class="container">
            <div class="cta-content">
                <h2>Ready to Transform Your Career?</h2>
                <p>Join thousands of professionals who have advanced their careers with SmartThink</p>
                <div class="cta-buttons">
                    <a href="../lms/register.php" class="btn-cap-primary">Get Started Today</a>
                    <a href="contact.php" class="btn-cap-secondary">Learn More</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Mobile Action Bar (small screens) -->
    <div class="mobile-action-bar">
        <a href="#featured-courses-section" class="mobile-action-link">
            <i class="fas fa-book-open"></i>
            <span>Courses</span>
        </a>
        <a href="contact.php" class="mobile-action-link">
            <i class="fas fa-envelope"></i>
            <span>Contact</span>
        </a>
        <a href="#whatsappWidget" class="mobile-action-link">
            <i class="fab fa-whatsapp"></i>
            <span>Chat</span>
        </a>
    </div>

    <!-- WhatsApp Chat Widget -->
    <div class="whatsapp-widget" id="whatsappWidget">
        <div class="whatsapp-button">
            <i class="fab fa-whatsapp"></i>
        </div>
        <div class="whatsapp-chat">
            <div class="chat-header">
                <h4>SmartThink Support</h4>
                <span class="status">Online</span>
            </div>
            <div class="chat-messages" id="chatMessages">
                <div class="message bot">
                    Hello! How can I help you today?
                </div>
            </div>
            <div class="chat-input">
                <input type="text" id="chatInput" placeholder="Type your message...">
                <button id="sendMessage"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>

    <!-- Capgemini-Style Dark Footer -->
    <footer class="cap-footer">
        <div class="container">
            <div class="footer-main">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="footer-brand-cap">
                            <img src="../assets/images/logo.jpeg" alt="SmartThink" class="footer-logo-cap">
                            <p><?php sc_html('home', 'footer_about', 'Empowering learners globally with cutting-edge educational technology and world-class content.', $region); ?></p>
                            <div class="footer-social-cap">
                                <a href="#"><i class="fab fa-linkedin"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-facebook"></i></a>
                                <a href="#"><i class="fab fa-youtube"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-2 col-md-4">
                        <div class="footer-links-cap">
                            <h4>About us</h4>
                            <ul>
                                <li><a href="about.php">Who we are</a></li>
                                <li><a href="leadership.php">Leadership</a></li>
                                <li><a href="sustainability.php">Sustainability</a></li>
                                <li><a href="awards.php">Awards</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="col-lg-2 col-md-4">
                        <div class="footer-links-cap">
                            <h4>Services</h4>
                            <ul>
                                <li><a href="training.php">Training</a></li>
                                <li><a href="consulting.php">Consulting</a></li>
                                <li><a href="recruitment.php">Recruitment</a></li>
                                <li><a href="support.php">Support</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="col-lg-2 col-md-4">
                        <div class="footer-links-cap">
                            <h4>Insights</h4>
                            <ul>
                                <li><a href="blog.php">Blog</a></li>
                                <li><a href="research.php">Research</a></li>
                                <li><a href="case-studies.php">Case studies</a></li>
                                <li><a href="events.php">Events</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="col-lg-2 col-md-4">
                        <div class="footer-links-cap">
                            <h4>Careers</h4>
                            <ul>
                                <li><a href="jobs.php">Search jobs</a></li>
                                <li><a href="culture.php">Our culture</a></li>
                                <li><a href="students.php">Students</a></li>
                                <li><a href="professionals.php">Professionals</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom-cap">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <p class="copyright-cap">&copy; 2026 SmartThink. All rights reserved.</p>
                    </div>
                    <div class="col-md-6">
                        <div class="footer-bottom-links-cap">
                            <a href="privacy-policy.php">Data Privacy Policy</a>
                            <a href="training-agreement.php">Training Non-Compete &amp; Materials</a>
                            <a href="payment-policy.php">Non-Refundable Payment Policy</a>
                            <a href="sitemap.php">Sitemap</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-newsletter">
                <div class="row align-items-center">
                    <div class="col-md-6 mb-3 mb-md-0">
                        <h4>Stay ahead in cybersecurity</h4>
                        <p>Get updates on new courses, insights, and security trends straight to your inbox.</p>
                    </div>
                    <div class="col-md-6">
                        <form class="footer-newsletter-form" action="#" method="post">
                            <input type="email" name="newsletter_email" placeholder="Work email address" required>
                            <button type="submit">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <script src="../assets/js/main.js"></script>
    <script src="../assets/js/modern-interactions.js"></script>
    <script src="../assets/js/global-theme.js"></script>
</body>
</html>
