@extends('layouts.public')
@section('title', 'Home | Kenya Diaspora Alliance')
@section('content')
    <style>
        #kdhc-countdown-section {
            background: transparent;
        }

        #kdhc-countdown-card {
            background: #0d0d0d;
            color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
        }

        #kdhc-countdown-card .label-muted {
            color: #c8c8c8;
            letter-spacing: 0.08em;
        }

        #kdhc-countdown-card .count-value {
            font-weight: 700;
        }

        #kdhc-countdown-card .count-label {
            color: #d8d8d8;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.08em;
        }

        /* Hero responsiveness */
        #hero-area {
            height: 90vh;
            min-height: 540px;
            background-position: center center;
        }

        .hero-mobile-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.55);
        }

        @media (max-width: 991.98px) {
            #hero-area {
                height: auto;
                min-height: 460px;
                background-position: center top;
            }
        }

        @media (max-width: 575.98px) {
            #hero-area {
                min-height: 380px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center top;
                padding-top: 90px;
                padding-bottom: 60px;
            }
        }
    </style>
    <div id="hero-area" class="hero-area-bg position-relative"
        style="background: url('{{ asset('assets/img/hero4.jpeg') }}') no-repeat center center / cover;">
        <div class="hero-mobile-overlay d-lg-none"></div>
        <div class="container d-none">
            <div class="row justify-content-center">
                <div class="col-lg-9 col-sm-12">
                    <div class="contents text-center">
                        <div class="icon d-none">
                            <i class="lni-mic"></i>
                        </div>
                        <h2 class="head-title mt-5">Annual Kenya Diaspora Homecoming Convention</h2>
                        <p class="banner-info">Date: 9th - 11th December, 2025</p>
                        <p class="banner-desc">
                            Theme: Knowledge & Skills for Resilience and Growth in the 4th Industrial Era
                        </p>
                        <div class="banner-btn d-none">
                            <a href="{{ route('events', ['year' => 2023]) }}" class="btn btn-success d-none">
                                Watch KDHC 2023 here
                            </a>
                            <a href="{{ route('register') }}" target="_blank" class="btn btn-success">Register</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section id="kdhc-countdown-section" class="py-4">
        <div class="container">
            <div class="mx-auto" style="max-width: 860px;">
                <div id="kdhc-countdown-card" class="p-3 p-md-4">
                    <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
                        <div class="mb-3 mb-md-0">
                            <div class="label-muted text-uppercase small mb-2">KDHC 2025 countdown</div>
                            <div id="kdhc-countdown-message" class="mb-0 h6">Starts 9th December 2025</div>
                        </div>
                        <div class="d-flex flex-wrap justify-content-between text-center" style="gap: 12px; min-width: 260px;">
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-days" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Days</div>
                            </div>
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-hours" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Hours</div>
                            </div>
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-minutes" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Minutes</div>
                            </div>
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-seconds" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Seconds</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="count" class="d-none">
        <div class="container">
            <div class="row justify-content-center bg-transparent">
                <div class="col-10">
                    <div class="count-wrapper text-center bg-transparent d-none">
                        <div class="time-countdown wow fadeInUp" data-wow-delay="0.2s">
                            <div id="clock" class="time-count"></div>
                        </div>
                    </div>
                    <div class="text-center mt-4 d-none">
                        <a href="{{ route('register') }}" class="btn btn-success">Register Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="about" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="img-thumb">
                        <img class="img-fluid rounded-2 shadow" src="{{ asset('assets/img/about.jpeg') }}" alt>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <div class="">
                            <div class="about-text">
                                <h2>About KDHC 2025</h2>
                                <p>
                                    The 12th Annual Kenya Diaspora Homecoming Convention (KDHC 2025). <br>
                                    Theme: Cooperative Models for Inclusive Growth and Sustainable Development . <br>
                                    Dates: December 9–11, 2025 . <br>
                                    Location: Nairobi, Kenya (with live streaming and virtual participation)

                                </p>
                                <p>
                                    KDHC is the premier annual platform that connects Kenyan and African diasporas globally with government, private sector, development partners, academia, and civil society.
                                    The 2025 edition aligns with the UN’s declaration of 2025 as the International Year of Cooperatives — spotlighting how diaspora-led cooperative models can drive inclusive economic transformation, democratize ownership, and promote shared prosperity.

                                </p>
                                <h2>Background</h2>
                                <p>
                                   Kenya’s cooperative sector has long been a pillar of collective empowerment — particularly in agribusiness, housing, and finance.
                                </p>
                               
                            </div>
                            <!-- <a class="btn btn-warning" href="{{ route('about') }}"
                                download="">
                                Read more
                            </a> -->
                            <a class="btn btn-warning" href="{{ route('about') }}">
                                Read more
                            </a>
                            <a href="{{ route('register') }}" class="btn btn-success d-none">Register</a>

                            <!-- Modal Body -->
                            <!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard -->
                            <div class="modal fade" id="aboutEvent" tabindex="-1" data-bs-backdrop="static"
                                data-bs-keyboard="false" role="dialog" aria-labelledby="aboutEventTitle"
                                aria-hidden="true">
                                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-fullscreen "
                                    role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            {{ $pdfResponse }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

    <section id="information-bar" class="bg-transparent" style="background-color: rgba(0, 0, 0, 0.5) !important;">
        <div class="container">
            <div class="row inforation-wrapper justify-content-center align-items-center shadow-none">
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 text-center">
                    <ul>
                        <li class="d-flex align-items-center justify-content-center">
                            <i class="lni-map-marker"></i>
                        </li>
                        <li class="d-flex align-items-center text-center justify-content-center"><span
                                class="text-center"><b>Location</b> <strong>Jacaranda Hotel, Westlands</strong>,
                                Nairobi, Kenya</span></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 text-center">
                    <ul>
                        <li class="d-flex align-items-center justify-content-center">
                            <i class="lni-calendar"></i>
                        </li>
                        <li class="d-flex align-items-center justify-content-center"><span class="text-center"><b>Date</b>
                                Tuesday 9th - Thursday 11th Dec 2025</span></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 text-center d-none">
                    <ul>
                        <li class="d-flex align-items-center">
                            <i class="lni-mic"></i>
                        </li>
                        <li class="d-flex align-items-center"><span><b>Speakers</b> 20+ Professionals</span></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 d-none">
                    <ul>
                        <li class="d-flex align-items-center">
                            <i class="lni-user"></i>
                        </li>
                        <li class="d-flex align-items-center"><span><b>Seats</b> 1000+ Attendees</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="intro" class="intro section-padding bg-transparent"
        style="background-color: rgba(0, 0, 0, 0.5) !important;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp text-white" data-wow-delay="0.2s">Why Attend KDHC 2025?</h2>
                        <p class="wow fadeInDown text-white" data-wow-delay="0.2s">
                        Be a part of diaspora-led cooperative models can drive <strong>inclusive economic transformation, democratize ownership,</strong> and <strong>promote shared prosperity</strong>.
                        </p>
                        <!-- <p class="text-white">
                            A commitment to ongoing and deepened collaboration and engagement among all stakeholders will be
                            emphasized.
                        </p> -->
                    </div>
                </div>
            </div>
            <div class="row intro-wrapper">
                <div class="col-lg-4 col-md-6 col-xs-12 h-100 shadow-none">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-microphone"></i>
                        <h6 class="fw-bold">🌍 Shape the Future Together</h6>
                        <p>
                         Be part of co-creating the <strong>Cooperative Engagement Action Plan (CEAP-2025)</strong> — a roadmap that will guide diaspora participation in Kenya’s cooperative development and inclusive growth.
                        </p>
                        <span class="count-number">01</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-users"></i>
                        <h6 class="fw-bold">💡 Be Among Visionary Leaders</h6>
                        <p>
                        Hear from <strong>policy makers, cooperative leaders, innovators, and investors</strong> on how collective ownership models are transforming housing, agribusiness, finance, and technology sectors.
                        </p>
                        <span class="count-number">02</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-heart"></i>
                        <h6 class="fw-bold">🤝 Network, Collaborate, and Grow</h6>
                        <p>
                        Connect with a global network of <strong>entrepreneurs, professionals, and diaspora organizations</strong>. Build partnerships that can unlock new cooperative ventures and investment opportunities.
                        </p>
                        <span class="count-number">03</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-bullhorn"></i>
                        <h6 class="fw-bold">🧭 Discover Innovative Models</h6>
                        <p>
                        Explore real success stories of <strong>diaspora SACCOs, joint ventures, and digital cooperatives</strong> that are redefining business ownership and social impact.
                        </p>
                        <span class="count-number">04</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-cup"></i>
                        <h6 class="fw-bold">🔗 Leverage Technology for Change</h6>
                        <p>
                            Experience how AI, blockchain, and mobile platforms are enabling transparent, tech-driven cooperatives and empowering communities for sustainable growth.
                        </p>
                        <span class="count-number">05</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-gallery"></i>
                        <h6 class="fw-bold">🌟 Empower Youth and Women</h6>
                        <p>
                        Celebrate and learn from young and women-led cooperatives driving innovation, leadership, and inclusivity in the cooperative economy.
                        </p>
                        <span class="count-number">06</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="counter-section section-padding d-none">
        <div class="container">
            <div class="row">

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-mic"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">20</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Speakers</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-bulb"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">1000</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Participants</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-briefcase"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">30</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Sponsors</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-coffee-cup"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">20</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Sessions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if (isset($event_schedue))
        <section id="schedules" class="schedule section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="section-title-header text-center">
                            <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Event Schedules</h2>
                            <p class="wow fadeInDown" data-wow-delay="0.2s">
                                Explore event schedules, plan your experience, and make the most of every moment <br> during
                                our
                                enriching and dynamic
                                gathering.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 mb-5 text-center">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="monday-tab" data-toggle="tab" href="#monday"
                                    role="tab" aria-controls="monday" aria-expanded="true">
                                    <div class="item-text">
                                        <h4>Day 01</h4>
                                        <h5>09 December 2025</h5>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tuesday-tab" data-toggle="tab" href="#tuesday" role="tab"
                                    aria-controls="tuesday">
                                    <div class="item-text">
                                        <h4>Day 02</h4>
                                        <h5>10 December 2025</h5>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="wednesday-tab" data-toggle="tab" href="#wednesday"
                                    role="tab" aria-controls="wednesday">
                                    <div class="item-text">
                                        <h4>Day 03</h4>
                                        <h5>11 December 4</h5>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-12">
                        <div class="schedule-area row wow fadeInDown" data-wow-delay="0.3s">
                            <div class="schedule-tab-content col-12 clearfix">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="monday" role="tabpanel"
                                        aria-labelledby="monday-tab">
                                        <div id="accordion">
                                            <div class="card">
                                                <div id="headingOne">
                                                    <div class="schedule-slot-time">
                                                        <span> 9.30 - 10.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne" aria-expanded="false"
                                                        aria-controls="collapseOne">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo">
                                                    <div class="schedule-slot-time">
                                                        <span> 10.30 - 11.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo" aria-expanded="false"
                                                        aria-controls="collapseTwo">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>15 Free Productive Design Tools</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingThree">
                                                    <div class="schedule-slot-time">
                                                        <span> 11.30 - 12.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseThree" aria-expanded="false"
                                                        aria-controls="collapseThree">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-3.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Getting Started With SketchApp</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="tuesday" role="tabpanel"
                                        aria-labelledby="tuesday-tab">
                                        <div id="accordion2">
                                            <div class="card">
                                                <div id="headingOne1">
                                                    <div class="schedule-slot-time">
                                                        <span> 1.30 - 2.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo2" aria-expanded="false"
                                                        aria-controls="collapseTwo2">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne1" class="collapse show"
                                                    aria-labelledby="headingOne1" data-parent="#accordion2">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo2">
                                                    <div class="schedule-slot-time">
                                                        <span> 9.30 - 10.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne1" aria-expanded="false"
                                                        aria-controls="collapseOne1">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2"
                                                    data-parent="#accordion2">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="wednesday" role="tabpanel"
                                        aria-labelledby="wednesday-tab">
                                        <div id="accordion3">
                                            <div class="card">
                                                <div id="headingOne3">
                                                    <div class="schedule-slot-time">
                                                        <span> 10.30 - 11.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne3" aria-expanded="false"
                                                        aria-controls="collapseOne3">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne3" class="collapse show"
                                                    aria-labelledby="headingOne3" data-parent="#accordion3">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo3">
                                                    <div class="schedule-slot-time">
                                                        <span> 11.30 - 12.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo3" aria-expanded="false"
                                                        aria-controls="collapseTwo3">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo3" class="collapse" aria-labelledby="headingTwo3"
                                                    data-parent="#accordion3">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingThree3">
                                                    <div class="schedule-slot-time">
                                                        <span> 1.30 - 2.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseThree3" aria-expanded="false"
                                                        aria-controls="collapseThree3">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-3.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseThree3" class="collapse" aria-labelledby="headingThree3"
                                                    data-parent="#accordion3">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="friday" role="tabpanel"
                                        aria-labelledby="friday-tab">
                                        <div id="accordion">
                                            <div class="card">
                                                <div id="headingOne">
                                                    <div class="schedule-slot-time">
                                                        <span> 9.30 - 10.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo" aria-expanded="false"
                                                        aria-controls="collapseTwo">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo">
                                                    <div class="schedule-slot-time">
                                                        <span> 10.30 - 11.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne" aria-expanded="false"
                                                        aria-controls="collapseOne">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingThree">
                                                    <div class="schedule-slot-time">
                                                        <span> 11.30 - 12.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseThree" aria-expanded="false"
                                                        aria-controls="collapseThree">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-3.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <section id="schedules" class="schedule section-padding" style="z-index: 999999 !important;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Event Speakers</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Unearth a world of wisdom and insight. Discover our speakers and embrace every <br> instant
                            at
                            our
                            vibrant speaker showcase. Join us for an enlightening journey.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <div class="section-title-header text-start text-md-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Event Speakers</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Unearth a world of wisdom and insight. Discover our speakers and embrace every <br> instant
                            at
                            our
                            vibrant speaker showcase. Join us for an enlightening journey.
                        </p>
                    </div>
                </div>
                <div class="col-md-6 text-md-end text-start">
                    <form method="get" action="{{ route('welcome') }}" class="d-inline-flex align-items-center">
                        <label class="me-2 mb-0 fw-semibold">Year:</label>
                        <select name="speaker_year" class="form-select form-control" onchange="this.form.submit()"
                            style="max-width: 160px;">
                            @foreach (($speakerYears ?? []) as $year)
                                <option value="{{ $year }}" {{ (string) $year === (string) ($speakerYear ?? '') ? 'selected' : '' }}>
                                    {{ $year }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                </div>
            </div>
            <div class="row g-3 mb-3">
                @if (isset($speakers) && count($speakers) > 0)
                    @foreach ($speakers as $speaker)
                        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center">
                            <div class=" position-relative text-center ">
                                <a href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}"
                                    class="rounded-2 ">
                                    <div class="rounded-2 overflow-hidden ">
                                        <img src="{{ asset('storage/speakers/' . $speaker->avatar) }}" alt=""
                                            class="img-fluid rounded-2">
                                    </div>
                                </a>
                                <div class="position-absolute bottom-0 bg-transparent "></div>
                            </div>
                            <div class="mt-2 ">
                                <div class="">
                                    <a class="text-decoration-none text-dark"
                                        href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}"><strong>{{ $speaker->name }}</strong></a>
                                </div>
                            </div>
                            <div class="">
                                {{ $speaker->title }}
                            </div>
                            <div class="">
                                {{ $speaker->organization }}
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-12 text-center">
                        <p>Coming Soon...</p>
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                @endif
            </div>

            <div class="text-center">
                <a href="{{ route('event.speakers') }}" class="btn btn-info text-center rounded-1">View More</a>
            </div>
        </div>
    </section>

    <section id="gallery" class="section-padding d-none">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Event Gallery</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Revisit memorable moments through our event gallery, capturing the essence and
                            <br>highlights of our extraordinary
                            gathering, ensuring lasting memories.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="{{ asset('assets/img/gallery/img-1.jpg') }}" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="{{ asset('assets/img/gallery/img-1.jpg') }}">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="{{ asset('assets/img/gallery/img-2.jpg') }}" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="{{ asset('assets/img/gallery/img-2.jpg') }}">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-3.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-3.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-4.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-4.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-5.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-5.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-6.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-6.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-7.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-7.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-8.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-8.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mt-3">
                <div class="col-xs-12">
                    <a href="#" class="btn btn-common">Browse All</a>
                </div>
            </div>
        </div>
    </section>

    <section id="packages">
        {{-- @include('pages.packages') --}}
    </section>

    <section id="pricing" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
                            Advert & Partnership Opportunities
                        </h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Stand out from the crowd with our budget friendly advertising and <br>sponsorship
                            opportunities.
                            sponsorship and advertising
                            opportunities are available to help<br> increase visibility for your brand and drive more
                            traffic to your booth/website or
                            office.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-12 mb-3">
                    <div class="row wow fadeInLeft bg-warning align-items-center p-3" data-wow-delay="0.5s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>PLATINUM
                                    PARTNERS</h5>
                            </div>
                            <div class="price">
                                <h2>USD 17,000</h2>
                                <span>PRINCIPAL PARTNER (1)</span>
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul class="">
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Key Speaker slot at the Convention’s main plenary session.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        CEO joins the Panel at the Press Conference with media exposure to over 12 million
                                        people globally.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Two Premier Exhibition Booths in high-traffic areas.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Priority branding and positioning with top visibility on all marketing materials.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        10 Delegate tickets for access to all sessions (incl. 4 at the exhibition booths).
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        6 Gala Dinner tickets*, providing networking opportunities with key stakeholders.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        4 Roll-up banners for co-branding in prominent event locations.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Company logo on all multi-media ads (TV, radio, social media, etc.).
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        2 Full-page advertisements in the Convention Catalogue.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        2 Joint Corporate Webinars with the Kenyan/African Diaspora in 2025 (worth $6,000).
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Branding on event signage, including banners and registration counters.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Exclusive networking opportunities with government and diaspora representatives.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Customized post-event report, detailing the impact of partnership and engagement.
                                    </span>
                                </li>
                                <li class="d-flex align-items-start text-center">
                                    <i class="lni-check-mark-circle mr-2"></i>
                                    <span class="text">
                                        Participation in the virtual exhibition, which is accessible to 10,000+
                                        Kenyan/African diaspora, expanding the partner's global reach.
                                    </span>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-primary">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow flex-md-row-reverse fadeInUp bg-info p-3 align-items-center"
                        data-wow-delay="0.3s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>GOLD PARTNERS</h5>
                            </div>
                            <div class="price">
                                <h2>USD 14,000</h2>
                                <span>3 Partners</span>
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Key Speaker slot
                                        at the Convention</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">CEO on the Press
                                        Conference Panel, offering media exposure to over 112 million people globally</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Two Premier
                                        Exhibition Booths in prime locations</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Priority branding
                                        and positioning in event marketing materials</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">8 Delegate tickets
                                        to all sessions (incl. 4 at the exhibition booths)</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">4 Gala Dinner
                                        tickets*, ensuring access to high-level networking</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">2 Roll-up banners
                                        co-branding in the Convention Hall</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Company logo on
                                        all multi-media advertisements</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">1 Full-page
                                        advertisement in the Convention Catalogue</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">1 Joint Corporate
                                        Webinar with the Kenyan/African Diaspora in 2025 (worth $3,000)</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Exclusive access
                                        to key networking sessions with diaspora and government officials</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Participation in
                                        the virtual exhibition, which is accessible to 10,000+ Kenyan/African diaspora,
                                        expanding the partner's global reach</span>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-common">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow fadeInRight" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>DIAMOND PARNTERS</h5>
                            </div>
                            <div class="price">
                                <h2>USD 10,000</h2>
                                <span>5 Partners</span>
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Moderator/Speaker
                                        role at one of the thematic panel discussions.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Two Exhibition
                                        Booths (1 Premium, 1 Standard) at the event.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Acknowledgment as
                                        a partner at every introduction of partners.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Banner placement
                                        at the Convention Hall.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Priority marketing
                                        positioning on printed materials.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">6 Delegate tickets
                                        for full access to the Convention (incl. 4 at the exhibition booths).</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">3 Gala Dinner
                                        tickets*.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">2 Roll up banners
                                        co-branding in prominent event locations. (incl. 1 at the Convention Hall)</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Half-page
                                        advertisement in the Convention Catalogue.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Company mentions
                                        on all Convention Media Adverts.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Opportunity to
                                        host a sponsored session during the event (limited to industry relevance).</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">Participation in
                                        the virtual exhibition, accessible to 10,000+ Kenyan and African diaspora, providing
                                        additional engagement with online attendees.</span>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-info">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow flex-md-row-reverse fadeInRight bg-success p-3 align-items-center"
                        data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>SILVER PARTNERS</h5>
                            </div>
                            <div class="price">
                                <h2 class="text-white">USD 4,500</h2>
                                <span>8 Partners</span>
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul class="text-white">
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        Speaker slot in one of the breakout sessions.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        One Premium Exhibition Booth at the event.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        Acknowledgment as a partner during the event.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        Banner placement in key areas at the Convention Hall.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        4 Delegate tickets to the Convention (incl. 2 at the exhibition booth).</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        2 Gala Dinner tickets*.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        Quarter-page advertisement in the Convention Catalogue.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        Company mentions on all media advertisements, including social media and event
                                        promotions.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2 text-white"></i><span class="text">
                                        Participation in the virtual exhibition, accessible to 10,000+ Kenyan/African
                                        diaspora, maximizing global engagement.</span>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-info">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow fadeInRight bg-dark p-3 align-items-center text-white" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">BRONZE PARTNERS</h5>
                            </div>
                            <div class="price">
                                <h2>USD 2,500</h2>
                                <span>10 Partners</span>
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Mentions in media advertisements, including social media and press releases.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        One Standard Exhibition Booth at the event.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        3 Delegate tickets for the Convention (incl. 2 at the exhibition booth).</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        1 Gala Dinner ticket*</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Partnership ribbon on all name badges of attendees, offering subtle branding.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Company logo on the program and event banners.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        One-eighth-page advertisement in the Convention Catalogue.</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Participation in the virtual exhibition, accessible to 10,000+ Kenyan/African
                                        diaspora, providing additional engagement with online attendees.</span>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-warning">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow flex-md-row-reverse fadeInRight bg-success p-3 align-items-center"
                        data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">PREMIER EXHIBITORS</h5>
                            </div>
                            <div class="price">
                                <h2>USD 1,800</h2>
                                <span>Open</span>
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Tent, table and 2 Chairs</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Power Source</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        One-eighth Page advert on Catalogue</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Partnership ribbons for all</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        3 delegates tickets for the conference</span>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-info">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow fadeInRight bg-dark p-3 align-items-center text-white" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">STANDARD EXHIBITORS</h5>
                            </div>
                            <div class="price">
                                <h2>USD 1,400</h2>
                                <span>Open</span>
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Tent, table and 2 Chairs</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Power Source</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Logo appearance on Catalogue</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        Partnership ribbons for all</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i><span class="text">
                                        2 delegates ticket for the conference</span>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-warning">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row p-0 wow fadeInRight bg-dark p-3 align-items-center text-white" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">ONE DAY PACKAGE</h5>
                            </div>
                            <div class="price">
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>
                                <li class="d-flex align-items-start">
                                    <span class="text-primary fw-bold"> If you would like to only participate on one day at
                                        the event</span>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i>
                                    <div class="d-flex justify-content-between align-items-center gap-4">
                                        <span class="text">Premier Booth</span> <span><strong>$700</strong></span>
                                    </div>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i>
                                    <div class="d-flex justify-content-between align-items-center gap-4">
                                        <span class="text">Standard Booth</span><span><strong>$550</strong></span>
                                    </div>
                                </li>
                                <li class="d-flex align-items-start">
                                    <i class="lni-check-mark-circle mr-3 mt-2"></i>
                                    <div class="d-flex justify-content-between align-items-center gap-4">
                                        <span class="text">Exhibition Desk</span><span><strong>from $150</strong></span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        {{-- <a href="#" class="btn btn-warning">Subscribe</a> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="blog" class="section-padding @if (isset($posts) && count($posts) > 0) @else d-none @endif">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Latest News</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">//</p>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach ($posts as $item)
                    <div class="col-lg-4 col-md-6 col-xs-12">
                        <div class="blog-item">
                            <div class="blog-image">
                                <a href="{{ route('view.post', $item->post_slug) }}">
                                    <img class="img-fluid" src="{{ asset('storage/posts/' . $item->post_image) }}" alt>
                                </a>
                            </div>
                            <div class="descr">
                                <div class="icon">
                                    <i class="lni-image"></i>
                                </div>
                                <h3 class="title">
                                    <a href="{{ route('view.post', $item->post_slug) }}">
                                        {{ Str::words($item->title, 5) }}
                                    </a>
                                </h3>
                                <p>{!! Str::words($item->post, 20) !!}</p>
                            </div>
                            <div class="meta-tags">
                                <span class="date"><i class="lni-calendar"></i>
                                    {{ date('jS M Y', strtotime($item->created_at)) }}</span>
                                <span class="comments"><i class="lni-comment-alt"></i> <a href="#"> 0
                                        Comment</a></span>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="col-12 text-center">
                    <a href="#" class="btn btn-common">View all Blogs</a>
                </div>
            </div>
        </div>
    </section>

    <section id="sponsors" class="section-padding position-relative" style="background-color: whitesmoke">
        <div class="container-fluid p-0">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp text-black" data-wow-delay="0.2s">Our Partners</h2>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">
                            {{-- // --}}
                        </p>
                    </div>
                </div>
            </div>
            <div class="row mb-30 text-center wow fadeInUp" data-wow-delay="0.3s">
                <!-- <div class="col-lg-12">
                    @include('pages.sponsors')
                </div> -->
                <div class="text-center">
                    <img src="{{ asset('assets/img/sponsors.jpg') }}" alt="Our Partners"
                        class="img-fluid rounded-2 shadow-sm" style="max-height: 420px; width: 100%; object-fit: contain;">
                </div>
                   
            </div>
        </div>
    </section>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg d-none" data-bs-toggle="modal" id="launchModalButton"
        data-bs-target="#changeOfVenue">
        CHange of venue
    </button>

    <!-- Modal -->
    <!-- <div class="modal fade" id="changeOfVenue" tabindex="-1" role="dialog" aria-labelledby="changeOfVenue"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 p-2 d-none">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <img src="{{ asset('assets/img/thank-you.jpg') }}" alt="" class="img-fluid rounded-2">
                </div>
            </div>
        </div>
    </div> -->

    <script>
        (function() {
            var daysEl = document.getElementById('kdhc-days');
            var hoursEl = document.getElementById('kdhc-hours');
            var minutesEl = document.getElementById('kdhc-minutes');
            var secondsEl = document.getElementById('kdhc-seconds');
            var messageEl = document.getElementById('kdhc-countdown-message');

            if (!daysEl || !hoursEl || !minutesEl || !secondsEl || !messageEl) {
                return;
            }

            var eventStart = new Date('2025-12-09T00:00:00+03:00').getTime();

            function pad(value) {
                return value.toString().padStart(2, '0');
            }

            function updateCountdown() {
                var now = Date.now();
                var diff = eventStart - now;

                if (diff <= 0) {
                    daysEl.textContent = '0';
                    hoursEl.textContent = '00';
                    minutesEl.textContent = '00';
                    secondsEl.textContent = '00';
                    messageEl.textContent = 'Event is live';
                    return;
                }

                var totalSeconds = Math.floor(diff / 1000);
                var days = Math.floor(totalSeconds / 86400);
                var hours = Math.floor((totalSeconds % 86400) / 3600);
                var minutes = Math.floor((totalSeconds % 3600) / 60);
                var seconds = totalSeconds % 60;

                daysEl.textContent = days;
                hoursEl.textContent = pad(hours);
                minutesEl.textContent = pad(minutes);
                secondsEl.textContent = pad(seconds);
                messageEl.textContent = days === 1 ? '1 day to go' : days + ' days to go';
            }

            updateCountdown();
            setInterval(updateCountdown, 1000);
        })();
    </script>

    <script>
        var changeOfVenueButton = document.getElementById('launchModalButton');
        window.onload = function() {
            changeOfVenueButton.click();
        }
    </script>

@endsection