<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title id="page-title">Events - TikulaTech Foundation</title>
  <meta name="description" id="page-description" content="Discover upcoming events, workshops, and programs organized by TikulaTech Foundation to empower Zambian youth with technology skills.">
  <meta name="keywords" content="TikulaTech, Zambia tech, events, workshops, training, technology education">
  <meta name="author" content="TikulaTech Foundation">
  
  <!-- Open Graph Meta Tags for Social Media -->
  <meta property="og:title" content="Events Calendar - TikulaTech Foundation">
  <meta property="og:description" content="Stay connected with TikulaTech events and workshops.">
  <meta property="og:image" content="assets/img/hero-img.png">
  <meta property="og:url" content="https://tikulatech.org/events">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="TikulaTech Foundation">

  <!-- Favicons -->
  <link href="assets/img/hero-img.png" rel="icon">
  <link href="assets/img/hero-img.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="assets/css/main.css" rel="stylesheet">
  
  <!-- Custom CSS for Font Size Adjustments -->
  <link href="assets/css/custom.css" rel="stylesheet">

  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

  <script>
    // TikulaTech Foundation - Events Page
    // Set page title and meta information
    document.addEventListener('DOMContentLoaded', function() {
      const pageTitle = "Events - TikulaTech Foundation";
      const pageDescription = "Discover upcoming events, workshops, and programs organized by TikulaTech Foundation to empower Zambian youth with technology skills.";
      const currentYear = new Date().getFullYear();
      
      // Set page title
      document.getElementById('page-title').textContent = pageTitle;
      document.title = pageTitle;
      
      // Set meta description
      document.getElementById('page-description').setAttribute('content', pageDescription);
      
      // Update copyright year
      document.querySelector('.copyright p').innerHTML = `${currentYear} © Copyright <strong class="sitename">TikulaTech Foundation Zambia.</strong> All Rights Reserved`;
    });
  </script>
  
  <style>
    /* Events Page Styles matching index page */
    :root {
      /* Match main.css color variables */
      --background-color: #ffffff;
      --default-color: #212529;
      --heading-color: #2d465e;
      --accent-color: #34bf49;
      --surface-color: #ffffff;
      --contrast-color: #ffffff;
      
      /* Font variables */
      --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --heading-font: "Roboto", sans-serif;
      --nav-font: "Lato", sans-serif;
      
      /* Additional variables for consistency */
      --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
      --rounded-sm: 4px;
      --rounded-md: 8px;
      --rounded-lg: 12px;
      --transition: all 0.3s ease-in-out;
    }
    
    /* Light Background */
    .light-background {
      --background-color: #f3f4f4;
      --surface-color: #ffffff;
    }
    
    /* Dark Background */
    .dark-background {
      --background-color: #060606;
      --default-color: #ffffff;
      --heading-color: #ffffff;
      --surface-color: #252525;
      --contrast-color: #ffffff;
    }
    
    /* Events Page Base Styling */
    .events-page {
      color: var(--default-color);
      font-family: var(--default-font);
      line-height: 1.6;
    }
    
    /* Hero Banner Section Styles */
    .events-hero {
      position: relative;
      overflow: hidden;
    }

    .animated-gradient {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        45deg,
        #1a4f2e 0%,
        #2d8049 25%,
        #204125 50%,
        #2d8049 75%,
        #1a4f2e 100%
      );
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      opacity: 0.7;
      z-index: 1;
    }

    .tech-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .tech-symbol {
      position: absolute;
      font-family: monospace;
      color: rgba(52, 191, 73, 0.15);
      animation: float 20s linear infinite;
    }

    .container {
      position: relative;
      z-index: 2;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes float {
      0% {
        opacity: 0;
        transform: translateY(100%) rotate(0deg);
      }
      10% {
        opacity: 0.15;
      }
      90% {
        opacity: 0.15;
      }
      100% {
        opacity: 0;
        transform: translateY(-100%) rotate(360deg);
      }
    }

    .hero-text {
      font-size: 1.25rem;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 2rem;
    }

    .hero-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .hero-buttons .btn {
      padding: 12px 30px;
      font-weight: 500;
      border-radius: 50px;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
    }

    .hero-buttons .btn-light {
      background: rgba(255, 255, 255, 0.9);
      color: #34bf49;
    }

    .hero-buttons .btn-light:hover {
      background: white;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transform: translateY(-3px);
    }

    .hero-buttons .btn-outline-light {
      border: 2px solid rgba(255, 255, 255, 0.7);
    }

    .hero-buttons .btn-outline-light:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: white;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transform: translateY(-3px);
    }

    @media (max-width: 768px) {
      .hero-buttons {
        flex-direction: column;
        align-items: center;
      }
      
      .hero-buttons .btn {
        width: 200px;
      }
    }
    
    /* Filter Section */
    .events-filter-section {
      background-color: var(--background-color);
      padding: 30px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      margin-bottom: 50px;
      box-shadow: var(--shadow-sm);
    }
    
    .filter-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    .filter-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 25px;
    }
    
    .view-toggle {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
    }
    
    .btn-toggle {
      padding: 10px 20px;
      border-radius: 50px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: var(--surface-color);
      color: var(--default-color);
      border: 1px solid rgba(45, 63, 50, 0.1);
      transition: var(--transition);
      font-size: 14px;
      letter-spacing: 0.2px;
    }
    
    .btn-toggle i {
      font-size: 16px;
    }
    
    .btn-toggle:hover {
      background-color: #f8f9fa;
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    
    .btn-toggle.active {
      background-color: var(--accent-color);
      color: var(--contrast-color);
      border-color: var(--accent-color);
      box-shadow: 0 2px 10px rgba(52, 191, 73, 0.25);
    }
    
    .filter-groups {
      display: flex;
      gap: 25px;
      flex-wrap: wrap;
    }
    
    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .filter-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--heading-color);
      letter-spacing: 0.3px;
      margin-bottom: 5px;
      text-transform: uppercase;
    }
    
    .filter-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-btn {
      padding: 8px 16px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 500;
      background-color: var(--surface-color);
      color: var(--default-color);
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: var(--transition);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .filter-btn i {
      font-size: 14px;
      color: var(--heading-color);
    }
    
    .filter-btn:hover {
      background-color: #f8f9fa;
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    
    .filter-btn.active {
      background-color: var(--accent-color);
      color: white;
      border-color: var(--accent-color);
      box-shadow: 0 2px 10px rgba(52, 191, 73, 0.2);
    }
    
    .filter-btn.active i {
      color: white;
    }
    
    /* Animation for filter select */
    .pulse {
      animation: pulse-animation 0.3s ease-out;
    }
    
    @keyframes pulse-animation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.03);
      }
      100% {
        transform: scale(1);
      }
    }
    
    /* No events found message */
    .no-events-found {
      text-align: center;
      padding: 50px 20px;
      background-color: var(--surface-color);
      border-radius: var(--rounded-md);
      margin: 40px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      border: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .no-events-found i {
      font-size: 3rem;
      color: var(--heading-color);
      margin-bottom: 5px;
      opacity: 0.7;
    }
    
    .no-events-found h4 {
      font-size: 1.5rem;
      color: var(--heading-color);
      margin-bottom: 10px;
      font-weight: 600;
    }
    
    .no-events-found p {
      color: var(--default-color);
      max-width: 500px;
      margin-bottom: 20px;
      line-height: 1.6;
    }
    
    .reset-filters-btn {
      padding: 10px 24px;
      border-radius: 50px;
      transition: var(--transition);
      background-color: var(--surface-color);
      border: 1px solid var(--accent-color);
      color: var(--accent-color);
    }
    
    .reset-filters-btn:hover {
      background-color: var(--accent-color);
      color: white;
      transform: translateY(-2px);
    }
    
    /* Events List */
    .upcoming-events {
      padding: 60px 0;
    }
    
    .section-header {
      text-align: center;
      margin-bottom: 60px;
    }
    
    .section-header h2 {
      font-weight: 700;
      margin-bottom: 15px;
      color: var(--heading-color);
      font-size: 2.2rem;
      position: relative;
      display: inline-block;
      letter-spacing: -0.5px;
      font-family: var(--heading-font);
    }
    
    .section-header h2:after {
      content: "";
      display: block;
      width: 60px;
      height: 3px;
      background-color: var(--accent-color);
      margin: 15px auto 0;
    }
    
    .section-header p {
      color: var(--default-color);
      max-width: 700px;
      margin: 15px auto 0;
      line-height: 1.7;
    }
    
    .events-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
      gap: 30px;
      margin-top: 40px;
    }
    
    .event-card {
      border-radius: var(--rounded-md);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: var(--surface-color);
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .event-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }
    
    .event-header {
      position: relative;
    }
    
    .event-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .event-type-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .event-type-workshop {
      background-color: var(--accent-color);
      color: white;
    }
    
    .event-type-training {
      background-color: #3498db;
      color: white;
    }
    
    .event-type-hackathon {
      background-color: #9b59b6;
      color: white;
    }
    
    .event-type-conference {
      background-color: #e67e22;
      color: white;
    }
    
    .event-type-other {
      background-color: #555;
      color: white;
    }
    
    .event-content {
      padding: 25px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .event-date-time {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 5px;
    }
    
    .event-date, .event-time {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.9rem;
      color: var(--default-color);
    }
    
    .event-title {
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 5px;
      line-height: 1.4;
      color: var(--heading-color);
      font-family: var(--heading-font);
    }
    
    .event-description {
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--default-color);
      margin-bottom: 10px;
    }
    
    .event-meta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 15px;
      margin-top: auto;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--default-color);
    }
    
    .meta-item i {
      color: var(--accent-color);
      font-size: 1rem;
    }
    
    .event-actions {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }
    
    .btn-register {
      flex: 1;
      padding: 10px 15px;
      background-color: var(--accent-color);
      color: white;
      border: none;
      border-radius: 50px;
      font-weight: 600;
      transition: var(--transition);
      text-align: center;
      text-decoration: none;
    }
    
    .btn-register:hover {
      background-color: #2aa540;
      transform: translateY(-2px);
      box-shadow: 0 3px 10px rgba(52, 191, 73, 0.3);
    }
    
    .btn-details {
      padding: 10px 15px;
      background-color: transparent;
      color: var(--default-color);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 50px;
      font-weight: 600;
      transition: var(--transition);
      text-align: center;
      text-decoration: none;
    }
    
    .btn-details:hover {
      background-color: #f8f9fa;
      color: var(--heading-color);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    
    /* Calendar View */
    .calendar-view {
      padding: 25px;
      background: var(--surface-color);
      border-radius: var(--rounded-md);
      box-shadow: var(--shadow-md);
      margin-bottom: 50px;
      border: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .current-month {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--heading-color);
      margin: 0;
      font-family: var(--heading-font);
    }
    
    .today-btn {
      margin: 0 10px;
      background-color: var(--accent-color);
      border-color: var(--accent-color);
      color: white;
      border-radius: 50px;
    }
    
    .calendar-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
      margin-bottom: 10px;
    }
    
    .calendar-weekdays div {
      text-align: center;
      font-weight: 600;
      padding: 10px;
      background-color: #f8f9fa;
      border-radius: var(--rounded-sm);
      color: var(--heading-color);
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.5px;
    }
    
    .calendar-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }
    
    .calendar-day {
      position: relative;
      min-height: 100px;
      padding: 10px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--rounded-sm);
      background-color: var(--surface-color);
      transition: var(--transition);
    }
    
    .calendar-day:hover {
      background-color: #f8f9fa;
      box-shadow: var(--shadow-sm);
    }
    
    .day-number {
      font-weight: 600;
      color: var(--heading-color);
      margin-bottom: 5px;
    }
    
    .today .day-number {
      color: #fff;
      background-color: var(--accent-color);
      width: 25px;
      height: 25px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Past Events Section */
    .past-events {
      padding: 70px 0;
      background-color: #f8f9fa;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .past-events .section-header {
      margin-bottom: 50px;
    }
    
    .past-event-card {
      padding: 25px;
      border-radius: var(--rounded-md);
      background-color: var(--surface-color);
      box-shadow: var(--shadow-md);
      margin-bottom: 25px;
      transition: var(--transition);
      border: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .past-event-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }
    
    .past-event-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .past-event-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--heading-color);
      font-family: var(--heading-font);
    }
    
    .past-event-type {
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .past-event-details {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 15px;
    }
    
    .past-event-detail {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.9rem;
      color: var(--default-color);
    }
    
    .past-event-description {
      margin-bottom: 20px;
      color: var(--default-color);
      line-height: 1.6;
    }
    
    .past-event-outcomes {
      background-color: #f8f9fa;
      padding: 20px;
      border-radius: var(--rounded-sm);
      margin-bottom: 20px;
    }
    
    .past-event-outcomes h5 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 15px;
      color: var(--heading-color);
      font-family: var(--heading-font);
    }
    
    .outcome-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .metric {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .metric i {
      color: var(--accent-color);
    }
    
    .show-more-container {
      text-align: center;
      margin-top: 40px;
    }
    
    .btn-show-more {
      padding: 12px 30px;
      background-color: #4CAF50;
      border: 2px solid #4CAF50;
      color: white;
      border-radius: 50px;
      font-weight: 600;
      transition: var(--transition);
      cursor: pointer;
    }
    
    .btn-show-more:hover {
      background-color: #45a049;
      border-color: #45a049;
      color: white;
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }
    
    .btn-show-more.disabled {
      background-color: #e0e0e0;
      border-color: #e0e0e0;
      color: #666;
      cursor: default;
      transform: none;
      box-shadow: none;
    }
    
    .no-more-events {
      display: none;
      text-align: center;
      padding: 15px;
      margin-top: 20px;
      color: #666;
      font-style: italic;
    }
    
    /* Entrance Animations */
    [data-aos] {
      opacity: 0;
      transition-property: opacity, transform;
    }
    
    [data-aos="fade-up"] {
      transform: translateY(30px);
    }
    
    [data-aos="fade-down"] {
      transform: translateY(-30px);
    }
    
    [data-aos="fade-right"] {
      transform: translateX(-30px);
    }
    
    [data-aos="fade-left"] {
      transform: translateX(30px);
    }
    
    [data-aos="zoom-in"] {
      transform: scale(0.9);
    }
    
    [data-aos].aos-animate {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1);
    }
    
    /* Responsive Styles */
    @media (max-width: 992px) {
      .events-hero-banner h1 {
        font-size: 2.5rem;
      }
      
      .events-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }
    }
    
    @media (max-width: 768px) {
      .events-hero-banner {
        padding: 80px 0 60px;
      }
      
      .events-hero-banner h1 {
        font-size: 2rem;
      }
      
      .events-hero-banner p {
        font-size: 1rem;
      }
      
      .filter-row {
        flex-direction: column;
        align-items: stretch;
      }
      
      .view-toggle {
        width: 100%;
        justify-content: center;
      }
      
      .btn-toggle {
        flex: 1;
        justify-content: center;
      }
      
      .filter-groups {
        flex-direction: column;
        width: 100%;
      }
      
      .filter-buttons {
        flex-wrap: wrap;
      }
      
      .filter-btn {
        flex: 1;
        min-width: calc(50% - 4px);
        justify-content: center;
      }
      
      .events-grid {
        grid-template-columns: 1fr;
      }
      
      .section-header h2 {
        font-size: 1.8rem;
      }
      
      .calendar-days {
        grid-template-columns: repeat(1, 1fr);
      }
      
      .calendar-weekdays {
        display: none;
      }
      
      .calendar-day {
        min-height: auto;
        margin-bottom: 10px;
      }
      
      .day-number::before {
        content: attr(data-day);
        margin-right: 5px;
      }
    }
    
    @media (max-width: 576px) {
      .events-hero-banner h1 {
        font-size: 1.7rem;
      }
      
      .section-header h2 {
        font-size: 1.5rem;
      }
      
      .event-content {
        padding: 20px 15px;
      }
      
      .event-meta {
        grid-template-columns: 1fr;
      }
      
      .past-event-header {
        flex-direction: column;
        gap: 10px;
      }
    }

    /* Modal Styles to match overall site design */
    .modal-content {
      border-radius: var(--rounded-md);
      border: none;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }
    
    .modal-header {
      background-color: var(--heading-color);
      color: white;
      border-bottom: none;
      padding: 1.25rem 1.5rem;
    }
    
    .modal-header .modal-title {
      font-weight: 600;
      font-family: var(--heading-font);
      font-size: 1.25rem;
    }
    
    .modal-header .btn-close {
      color: white;
      filter: invert(1) brightness(100%);
      opacity: 0.8;
      transition: var(--transition);
    }
    
    .modal-header .btn-close:hover {
      opacity: 1;
    }
    
    .modal-body {
      padding: 1.75rem;
    }
    
    .modal-footer {
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      padding: 1rem 1.5rem;
    }
    
    .event-summary {
      background-color: #f8f9fa;
      padding: 1.25rem;
      border-radius: var(--rounded-md);
      margin-bottom: 1.5rem;
    }
    
    .event-title-modal {
      color: var(--heading-color);
      font-weight: 700;
      font-size: 1.3rem;
      margin-bottom: 1rem;
      font-family: var(--heading-font);
    }
    
    .event-meta-modal {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      color: var(--default-color);
    }
    
    .event-meta-modal span {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .event-meta-modal i {
      color: var(--accent-color);
    }
    
    .form-label {
      font-weight: 500;
      color: var(--heading-color);
      margin-bottom: 0.5rem;
    }
    
    .form-control {
      border-radius: var(--rounded-sm);
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0.65rem 1rem;
      transition: var(--transition);
    }
    
    .form-control:focus {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 0.25rem rgba(52, 191, 73, 0.25);
    }
    
    .modal-footer .btn-primary {
      background-color: var(--accent-color);
      border-color: var(--accent-color);
      border-radius: 50px;
      padding: 0.6rem 1.5rem;
      font-weight: 500;
      transition: var(--transition);
    }
    
    .modal-footer .btn-primary:hover {
      background-color: #2ca83f;
      border-color: #2ca83f;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(52, 191, 73, 0.3);
    }
    
    .modal-footer .btn-secondary {
      background-color: transparent;
      color: var(--default-color);
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 50px;
      padding: 0.6rem 1.5rem;
      font-weight: 500;
      transition: var(--transition);
    }
    
    .modal-footer .btn-secondary:hover {
      background-color: #f1f1f1;
      border-color: rgba(0, 0, 0, 0.3);
      transform: translateY(-2px);
    }

    /* Event Detail Modal Styles */
    .event-detail-content {
      color: var(--default-color);
    }
    
    .event-detail-content h3 {
      color: var(--heading-color);
      font-weight: 700;
      font-family: var(--heading-font);
      margin-bottom: 1.5rem;
    }
    
    .event-detail-meta {
      background-color: #f8f9fa;
      padding: 1rem;
      border-radius: var(--rounded-md);
      margin-bottom: 1.5rem;
    }
    
    .event-detail-meta .meta-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .event-detail-meta .meta-item i {
      color: var(--accent-color);
      font-size: 1.1rem;
    }
    
    .event-detail-content h5 {
      color: var(--heading-color);
      font-weight: 600;
      font-family: var(--heading-font);
      font-size: 1.1rem;
      position: relative;
      padding-bottom: 0.5rem;
    }
    
    .event-detail-content h5:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 30px;
      background-color: var(--accent-color);
    }
    
    .event-detail-content p {
      line-height: 1.6;
      margin-bottom: 1rem;
    }
    
    .event-detail-content ul {
      padding-left: 1.2rem;
    }
    
    .event-detail-content ul li {
      margin-bottom: 0.5rem;
      position: relative;
      padding-left: 0.5rem;
    }
    
    .table {
      --bs-table-color: var(--default-color);
      --bs-table-bg: transparent;
      --bs-table-border-color: rgba(0,0,0,.1);
    }
    
    .table th {
      background-color: var(--heading-color);
      color: white;
      font-weight: 500;
    }
    
    .card {
      border: 1px solid rgba(0,0,0,.08);
      border-radius: var(--rounded-md);
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }
    
    .display-4 {
      color: var(--accent-color);
    }

    /* Additional Calendar Styling */
    .prev-month-day, .next-month-day {
      opacity: 0.5;
      background-color: #f8f9fa;
    }
    
    .calendar-event {
      margin: 3px 0;
      padding: 2px 6px;
      font-size: 11px;
      border-radius: 3px;
      background-color: #f1f1f1;
      cursor: pointer;
      transition: var(--transition);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .calendar-event:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    
    .event-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--accent-color);
      flex-shrink: 0;
    }
    
    .calendar-event.event-type-workshop .event-dot {
      background-color: var(--accent-color);
    }
    
    .calendar-event.event-type-training .event-dot {
      background-color: #3498db;
    }
    
    .calendar-event.event-type-hackathon .event-dot {
      background-color: #9b59b6;
    }
    
    .calendar-event.event-type-conference .event-dot {
      background-color: #e67e22;
    }
    
    .calendar-event.event-type-other .event-dot {
      background-color: #555;
    }
    
    .day-events {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 5px;
    }
    
    .text-muted {
      color: #6c757d;
    }

    .host-event {
      padding: 80px 0;
      background-color: #f8f9fa;
      position: relative;
      overflow: hidden;
    }
    
    .host-event:before {
      content: "";
      position: absolute;
      top: -50px;
      right: -50px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: rgba(76, 175, 80, 0.1);
      z-index: 1;
    }
    
    .host-event:after {
      content: "";
      position: absolute;
      bottom: -50px;
      left: -50px;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background-color: rgba(76, 175, 80, 0.05);
      z-index: 1;
    }
    
    .host-event-content {
      position: relative;
      z-index: 2;
    }
    
    .host-event-image img {
      transition: transform 0.5s;
    }
    
    .host-event-image:hover img {
      transform: scale(1.02);
    }
    
    .host-event h2 {
      color: #2e3135;
      font-weight: 700;
    }
    
    .host-event .lead {
      color: #484a4d;
      font-size: 1.1rem;
    }
    
    .host-benefits {
      margin-top: 25px;
    }
    
    .benefit-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .benefit-item i {
      font-size: 1.2rem;
      margin-right: 15px;
      color: #4CAF50;
    }
    
    .btn-get-started {
      display: inline-block;
      padding: 12px 30px;
      border-radius: 50px;
      background-color: #4CAF50;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 2px solid #4CAF50;
    }
    
    .btn-get-started:hover {
      background-color: #45a049;
      box-shadow: 0 8px 15px rgba(76, 175, 80, 0.3);
      transform: translateY(-3px);
    }

    /* Host Event Section Styling */
    .host-event {
      padding: 80px 0;
      background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), 
                  url('assets/img/patterns/tech-pattern.png');
      background-attachment: fixed;
      position: relative;
      overflow: hidden;
    }

    .host-event .section-title {
      color: #333;
      margin-bottom: 20px;
      font-weight: 700;
    }

    .host-event .section-divider {
      width: 80px;
      height: 3px;
      background-color: #4CAF50;
      margin: 0 auto 30px;
    }

    .btn-host-event {
      display: inline-block;
      padding: 12px 30px;
      background-color: #4CAF50;
      color: #fff;
      border-radius: 50px;
      font-weight: 600;
      transition: all 0.3s ease;
      text-decoration: none;
      margin-top: 10px;
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    }

    .btn-host-event:hover {
      background-color: #45a049;
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
      color: #fff;
    }

    .btn-host-event i {
      margin-left: 8px;
      transition: transform 0.3s ease;
    }

    .btn-host-event:hover i {
      transform: translateX(5px);
    }

    /* Add floating tech-themed elements */
    .host-event::before,
    .host-event::after {
      content: "</>"; 
      position: absolute;
      color: rgba(76, 175, 80, 0.1);
      font-size: 150px;
      font-weight: bold;
      font-family: monospace;
      z-index: 0;
    }

    .host-event::before {
      top: -30px;
      left: -30px;
      transform: rotate(-15deg);
    }

    .host-event::after {
      bottom: -30px;
      right: -30px;
      transform: rotate(15deg);
    }

    /* Blue icon color for event modals */
    .text-primary-blue {
      color: #2aa540 !important;
    }
    
    /* Modal header styling */
    .modal-header {
      background-color: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
    }
    
    .modal-title {
      color: #343a40;
      font-weight: 600;
    }
    
    /* Event meta items */
    .event-detail-meta {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
    }
    
    .meta-item i {
      font-size: 18px;
    }
    
    /* Section headings */
    .event-detail-content h5 {
      color: #343a40;
      border-bottom: 2px solid #e9ecef;
      padding-bottom: 8px;
      margin-bottom: 15px;
      font-weight: 600;
    }
    
    /* Outcome cards */
    .outcome-card {
      background-color: #f8f9fa;
      border: none;
      border-radius: 10px;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .outcome-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    
    .outcome-card .display-4 {
      font-size: 2.5rem;
    }
    
    /* Photo gallery */
    .gallery-img {
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .gallery-img img {
      transition: transform 0.3s ease;
    }
    
    .gallery-img:hover img {
      transform: scale(1.05);
    }
    
    /* Facilitator cards */
    .facilitator-card {
      background-color: #f8f9fa;
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    /* Table styling */
    .project-table {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .project-table thead {
      background-color: #f8f9fa;
    }
    
    .project-table th {
      font-weight: 600;
    }
    
    /* Footer buttons */
    .modal-footer .btn-blue {
      background-color: #2aa540;
      border-color:  #2aa540;
      color: white;
    }
    
    .modal-footer .btn-blue:hover {
      background-color:  #2eb447;
      border-color:  #2aa540;
    }

    /* Resources Section Styling */
    .resources-section {
      padding: 80px 0;
      background-color: #f8f9fa;
    }
    
    .resources-container {
      margin-top: 40px;
    }
    
    .resources-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 30px;
      margin-top: 20px;
    }
    
    .resource-card {
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      height: 100%;
    }
    
    .resource-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .resource-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      background-color: rgba(76, 175, 80, 0.1);
      color: #4CAF50;
      font-size: 2rem;
    }
    
    .resource-content {
      padding: 25px;
      flex: 1;
    }
    
    .resource-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }
    
    .resource-description {
      color: #666;
      margin-bottom: 15px;
      font-size: 0.95rem;
    }
    
    .resource-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.85rem;
      color: #777;
      background-color: #f8f9fa;
      padding: 5px 10px;
      border-radius: 50px;
    }
    
    .resource-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
    }
    
    .btn-download {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #4CAF50;
      color: white;
      padding: 8px 15px;
      border-radius: 5px;
      font-size: 0.9rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .btn-download:hover {
      background-color: #388E3C;
      transform: translateY(-2px);
    }
    
    .download-count {
      font-size: 0.85rem;
      color: #777;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .btn-more-resources {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background-color: transparent;
      color: #4CAF50;
      border: 2px solid #4CAF50;
      padding: 10px 25px;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .btn-more-resources:hover {
      background-color: #4CAF50;
      color: white;
      transform: translateY(-5px);
    }
    
    @media (max-width: 991px) {
      .resources-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      }
    }
    
    @media (max-width: 767px) {
      .resources-grid {
        grid-template-columns: 1fr;
      }
      
      .resource-card {
        flex-direction: column;
      }
      
      .resource-icon {
        width: 100%;
        height: 80px;
      }
    }

    /* Filter Styles */
    #resource-flters {
      list-style: none;
      text-align: center;
      padding: 0;
      margin-bottom: 30px;
    }

    #resource-flters li {
      display: inline-block;
      margin: 0 5px 10px;
      padding: 6px 15px;
      cursor: pointer;
      background: #f5f5f5;
      border-radius: 4px;
    }

    #resource-flters li.filter-active {
      background: #5cb874;
      color: white;
    }

    .no-past-events {
      background: var(--surface-color);
      border-radius: var(--rounded-md);
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .no-past-events i {
      color: var(--accent-color);
      opacity: 0.5;
    }

    .no-past-events h4 {
      color: var(--heading-color);
      font-weight: 600;
    }
  </style>
</head>

<body class="events-page">

  <header id="header" class="header d-flex align-items-center sticky-top">
    <!-- Zambian Flag Ribbon -->
    <div class="zambian-ribbon">
      <div class="ribbon-stripe green"></div>
      <div class="ribbon-stripe orange"></div>
      <div class="ribbon-stripe red"></div>
      <div class="ribbon-stripe black"></div>
    </div>
    
    <div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">

      <a href="/" class="logo d-flex align-items-center">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <img src="assets/img/hero-img.png" alt="TikulaTech Foundation Logo">
      </a>

      <nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/ai-initiative">AI Initiatives</a></li>
          <li><a href="/events" class="active">Events</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/volunteers">Volunteer</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>

    </div>
  </header>

  <main class="main">
    <!-- Hero Banner Section -->
    <section id="events-hero" class="events-hero section dark-background">
      <div class="animated-gradient"></div>
      <div class="container position-relative">
        <div class="row align-items-center justify-content-center text-center">
          <div class="col-lg-10" data-aos="fade-up">
            <h1 class="display-4 fw-bold text-white mb-3">Events & Workshops</h1>
            <p class="hero-text">Join us for exciting tech events, workshops, and training sessions to develop your skills and connect with the community</p>
            <div class="hero-buttons">
              <a href="#upcoming-events" class="btn btn-light">Upcoming Events</a>
              <a href="#past-events" class="btn btn-outline-light">Past Events</a>
              <a href="#resources" class="btn btn-outline-light">Resources</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Events Filter Section -->
    <section id="events-filter" class="events-filter-section">
      <div class="container">
        <div class="filter-container">
          <div class="filter-row" data-aos="fade-up" data-aos-delay="100">
            <div class="view-toggle">
              <button class="btn-toggle active" data-view="list"><i class="bi bi-list-ul"></i> List View</button>
              <button class="btn-toggle" data-view="calendar"><i class="bi bi-calendar3"></i> Calendar View</button>
              <a href="#resources" class="btn-toggle"><i class="bi bi-archive"></i> Resources</a>
            </div>
            <div class="filter-groups">
              <div class="filter-group" data-aos="fade-up" data-aos-delay="200">
                <div class="filter-label">Event Type</div>
                <div class="filter-buttons">
                  <button class="filter-btn" data-value="all"><i class="bi bi-grid-3x3"></i> All Types</button>
                  <button class="filter-btn" data-value="workshop"><i class="bi bi-tools"></i> Workshops</button>
                  <button class="filter-btn" data-value="training"><i class="bi bi-journal-code"></i> Training</button>
                  <button class="filter-btn" data-value="hackathon"><i class="bi bi-code-slash"></i> Hackathons</button>
                  <button class="filter-btn" data-value="conference"><i class="bi bi-people-fill"></i> Conferences</button>
                  <button class="filter-btn" data-value="other"><i class="bi bi-stars"></i> Other</button>
                </div>
              </div>
              <div class="filter-group" data-aos="fade-up" data-aos-delay="300">
                <div class="filter-label">Time</div>
                <div class="filter-buttons">
                  <button class="filter-btn" data-value="upcoming"><i class="bi bi-calendar-check"></i> Upcoming</button>
                  <button class="filter-btn" data-value="past"><i class="bi bi-calendar-x"></i> Past</button>
                  <button class="filter-btn" data-value="all"><i class="bi bi-calendar-date"></i> All</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Upcoming Events Section -->
    <section id="upcoming-events" class="upcoming-events">
      <div class="container">
        <div class="section-header" data-aos="fade-up">
          <h2>Upcoming Events</h2>
          <p>Join us at one of our upcoming events to learn new skills, connect with like-minded individuals, and contribute to the growing tech community in Zambia.</p>
        </div>
        
        <div class="events-list-view" data-aos="fade-up" data-aos-delay="200">
          <div class="events-grid">
            <!-- Event Card 1 -->
            <div class="event-card" data-event-type="workshop" data-event-date="2024-10-15" data-aos="fade-up" data-aos-delay="100">
              <div class="event-header">
                <img src="assets/img/events/workshop.jpg" alt="Python Workshop" class="event-image">
                <span class="event-type-badge event-type-workshop">Workshop</span>
              </div>
              <div class="event-content">
                <div class="event-date-time">
                  <div class="event-date"><i class="bi bi-calendar-event"></i> Oct 15, 2024</div>
                  <div class="event-time"><i class="bi bi-clock"></i> 10:00 AM - 4:00 PM</div>
                </div>
                <h3 class="event-title">Python for AI Development Workshop</h3>
                <p class="event-description">A comprehensive workshop covering the fundamentals of Python programming specifically for AI and machine learning applications. Perfect for beginners and intermediate programmers.</p>
                <div class="event-meta">
                  <div class="meta-item">
                    <i class="bi bi-geo-alt"></i>
                    <span class="event-location">Lusaka Hub, Northmead</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-people"></i>
                    <span>20 spots available</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-bar-chart"></i>
                    <span>Beginner</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-hourglass-split"></i>
                    <span>6 hours</span>
                  </div>
                </div>
                <div class="event-actions">
                  <a href="#" class="btn-register register-btn" data-event-id="workshop1">Register Now</a>
                  <a href="#" class="btn-details" data-bs-toggle="modal" data-bs-target="#eventDetailsModal1">Details</a>
                </div>
              </div>
            </div>
            
            <!-- Event Card 2 -->
            <div class="event-card" data-event-type="training" data-event-date="2024-10-20" data-aos="fade-up" data-aos-delay="200">
              <div class="event-header">
                <img src="assets/img/events/training.jpg" alt="Web Development Training" class="event-image">
                <span class="event-type-badge event-type-training">Training</span>
              </div>
              <div class="event-content">
                <div class="event-date-time">
                  <div class="event-date"><i class="bi bi-calendar-event"></i> Oct 20, 2024</div>
                  <div class="event-time"><i class="bi bi-clock"></i> 9:00 AM - 5:00 PM</div>
                </div>
                <h3 class="event-title">Modern Web Development Training Series</h3>
                <p class="event-description">A multi-day training series covering HTML5, CSS3, JavaScript, and modern frameworks. Learn to build responsive, interactive websites with current best practices.</p>
                <div class="event-meta">
                  <div class="meta-item">
                    <i class="bi bi-geo-alt"></i>
                    <span class="event-location">University of Zambia, Lusaka</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-people"></i>
                    <span>15 spots available</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-bar-chart"></i>
                    <span>Intermediate</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-hourglass-split"></i>
                    <span>8 hours</span>
                  </div>
                </div>
                <div class="event-actions">
                  <a href="#" class="btn-register register-btn" data-event-id="training1">Register Now</a>
                  <a href="#" class="btn-details" data-bs-toggle="modal" data-bs-target="#eventDetailsModal2">Details</a>
                </div>
              </div>
            </div>
            
            <!-- Event Card 3 -->
            <div class="event-card" data-event-type="hackathon" data-event-date="2024-11-05" data-aos="fade-up" data-aos-delay="300">
              <div class="event-header">
                <img src="assets/img/events/hackathon.jpg" alt="Innovation Hackathon" class="event-image">
                <span class="event-type-badge event-type-hackathon">Hackathon</span>
              </div>
              <div class="event-content">
                <div class="event-date-time">
                  <div class="event-date"><i class="bi bi-calendar-event"></i> Nov 5-7, 2024</div>
                  <div class="event-time"><i class="bi bi-clock"></i> 48 hours</div>
                </div>
                <h3 class="event-title">Zambia Innovation Hackathon 2024</h3>
                <p class="event-description">A 48-hour hackathon focused on creating tech solutions for local challenges. Teams will compete for prizes and potential funding for their innovations.</p>
                <div class="event-meta">
                  <div class="meta-item">
                    <i class="bi bi-geo-alt"></i>
                    <span class="event-location">Lusaka Business Hub</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-people"></i>
                    <span>30 teams max</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-bar-chart"></i>
                    <span>All levels</span>
                  </div>
                  <div class="meta-item">
                    <i class="bi bi-trophy"></i>
                    <span>Prizes available</span>
                  </div>
                </div>
                <div class="event-actions">
                  <a href="#" class="btn-register register-btn" data-event-id="hackathon1">Register Team</a>
                  <a href="#" class="btn-details" data-bs-toggle="modal" data-bs-target="#eventDetailsModal3">Details</a>
                </div>
              </div>
            </div>
          </div>
          
          <!-- No Events Found Message (hidden by default) -->
          <div id="no-results-message" class="no-events-found" style="display: none;">
            <i class="bi bi-calendar-x"></i>
            <h4>No events found</h4>
            <p>We couldn't find any events matching your current filters. Try adjusting your filter criteria or check back later for new events.</p>
            <button class="btn btn-outline-secondary reset-filters-btn">
              <i class="bi bi-arrow-repeat"></i> Reset Filters
            </button>
          </div>
        </div>
        
        <!-- Calendar View (Hidden by default) -->
        <div class="calendar-view" style="display: none;" data-aos="fade-up">
          <div class="calendar-container">
            <div class="calendar-header">
              <button class="btn btn-sm btn-outline-secondary prev-month"><i class="bi bi-chevron-left"></i></button>
              <h3 class="current-month">September 2024</h3>
              <button class="btn btn-sm btn-outline-secondary next-month"><i class="bi bi-chevron-right"></i></button>
            </div>
            <div class="calendar-grid">
              <div class="calendar-weekdays">
                <div>Sun</div>
                <div>Mon</div>
                <div>Tue</div>
                <div>Wed</div>
                <div>Thu</div>
                <div>Fri</div>
                <div>Sat</div>
              </div>
              <div class="calendar-days">
                <!-- Days will be populated by JavaScript -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Past Events Section -->
    <section id="past-events" class="past-events">
      <div class="container">
        <div class="section-header" data-aos="fade-up">
          <h2>Past Events</h2>
          <p>Explore our previous events that have helped shape the tech community in Zambia and provided valuable learning experiences for participants.</p>
        </div>

        <div class="text-center" data-aos="fade-up">
          <div id="no-results-message" class="no-events-found">
            <i class="bi bi-calendar-x"></i>
            <h4>No Past Events</h4>
            <p>We haven't held any events yet. Check back later to see our past events and their outcomes.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Resources Section -->
    <section id="resources" class="resources section-bg">
      <div class="container">
        <div class="section-header" data-aos="fade-up">
          <h2>Learning Resources</h2>
          <p>Access our collection of documentation, guides, and materials related to our events and workshops</p>
        </div>

        <div class="text-center" data-aos="fade-up">
          <div class="p-5 bg-light rounded">
            <i class="bi bi-archive fs-1 text-muted mb-3"></i>
            <h4>No Resources Available Yet</h4>
            <p class="mb-4">We're currently preparing our resources library. Please check back soon or contact us to request materials directly.</p>
            <a href="/contact" class="btn-show-more">Contact For Resources</a>
          </div>
        </div>
      </div>
    </section>

    <!-- Interested in Hosting Section -->
    <section id="host-event" class="host-event section bg-light">
      <div class="container text-center" data-aos="fade-up">
        <h2>Want to Host an Event?</h2>
        <p class="lead mb-4">
          If you're interested in hosting a technology workshop, training, or event in partnership with TikulaTech Foundation, we'd love to hear from you!
        </p>
        <a href="/contact" class="btn-show-more">Contact Us <i class="bi bi-arrow-right"></i></a>
      </div>
    </section>
  </main>

  <!-- Event Registration Modal -->
  <div class="modal fade" id="registrationModal" tabindex="-1" aria-labelledby="registrationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="registrationModalLabel">Register for Event</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="event-summary mb-4">
            <h4 class="event-title-modal">Event Title</h4>
            <div class="event-meta-modal">
              <span class="date-time"><i class="bi bi-calendar-event"></i> <span class="date-time-text">Sept 15, 2024, 14:00 - 17:00</span></span>
              <span class="location"><i class="bi bi-geo-alt"></i> <span class="location-text">Lusaka Hub</span></span>
            </div>
          </div>
          
          <form id="event-registration-form">
            <input type="hidden" id="event-id" name="event-id" value="">
            
            <div class="row g-3">
              <div class="col-md-6">
                <label for="first-name" class="form-label">First Name*</label>
                <input type="text" class="form-control" id="first-name" name="first-name" required>
              </div>
              <div class="col-md-6">
                <label for="last-name" class="form-label">Last Name*</label>
                <input type="text" class="form-control" id="last-name" name="last-name" required>
              </div>
              <div class="col-md-6">
                <label for="email" class="form-label">Email Address*</label>
                <input type="email" class="form-control" id="email" name="email" required>
              </div>
              <div class="col-md-6">
                <label for="phone" class="form-label">Phone Number*</label>
                <input type="tel" class="form-control" id="phone" name="phone" required>
              </div>
              <div class="col-12">
                <label for="organization" class="form-label">Organization/School</label>
                <input type="text" class="form-control" id="organization" name="organization">
              </div>
              <div class="col-md-6">
                <label for="experience-level" class="form-label">Experience Level</label>
                <select class="form-select" id="experience-level" name="experience-level">
                  <option value="beginner">Beginner</option>
                  <option value="intermediate">Intermediate</option>
                  <option value="advanced">Advanced</option>
                </select>
              </div>
              <div class="col-md-6">
                <label for="age-group" class="form-label">Age Group</label>
                <select class="form-select" id="age-group" name="age-group">
                  <option value="under18">Under 18</option>
                  <option value="18-24">18-24</option>
                  <option value="25-34">25-34</option>
                  <option value="35plus">35+</option>
                </select>
              </div>
              <div class="col-12">
                <label for="expectations" class="form-label">What do you hope to learn from this event?</label>
                <textarea class="form-control" id="expectations" name="expectations" rows="3"></textarea>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="terms-agree" name="terms-agree" required>
                  <label class="form-check-label" for="terms-agree">
                    I agree to the <a href="/terms">terms and conditions</a> and <a href="/privacy">privacy policy</a>
                  </label>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="submit-registration">Register</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Event Details Modals -->
  <div class="modal fade" id="eventDetailsModal1" tabindex="-1" aria-labelledby="eventDetailsModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="eventDetailsModalLabel1">Event Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="event-detail-content">
            <img src="assets/img/events/workshop.jpg" class="img-fluid mb-4 rounded" alt="Python Workshop">
            <h3 class="mb-3">Python for AI Development Workshop</h3>
            
            <div class="event-detail-meta d-flex flex-wrap gap-4 mb-4">
              <div class="meta-item">
                <i class="bi bi-calendar-event text-primary"></i>
                <span>Oct 15, 2024</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-clock text-primary"></i>
                <span>10:00 AM - 4:00 PM</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-geo-alt text-primary"></i>
                <span>Lusaka Hub, Northmead</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-tag text-primary"></i>
                <span>Workshop</span>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Description</h5>
              <p>A comprehensive workshop covering the fundamentals of Python programming specifically for AI and machine learning applications. Perfect for beginners and intermediate programmers.</p>
              <p>This hands-on workshop will guide you through Python basics to advanced AI concepts. You'll learn about:</p>
              <ul>
                <li>Python fundamentals and data structures</li>
                <li>NumPy, Pandas and data manipulation</li>
                <li>Introduction to machine learning algorithms</li>
                <li>Building your first AI model</li>
                <li>Practical applications and real-world examples</li>
              </ul>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">What to Bring</h5>
              <ul>
                <li>Laptop with Python 3.8+ installed</li>
                <li>Pre-installed Jupyter Notebook or Google Colab account</li>
                <li>Basic programming knowledge (helpful but not required)</li>
                <li>Enthusiasm to learn!</li>
              </ul>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Facilitators</h5>
              <div class="row g-4">
                <div class="col-md-6">
                  <div class="d-flex align-items-center gap-3">
                    <img src="assets/img/team/team-1.jpg" class="rounded-circle" width="60" height="60" alt="Facilitator">
                    <div>
                      <h6 class="mb-0">John Mumba</h6>
                      <small class="text-muted">AI Research Lead at TikulaTech</small>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="d-flex align-items-center gap-3">
                    <img src="assets/img/team/team-2.jpg" class="rounded-circle" width="60" height="60" alt="Facilitator">
                    <div>
                      <h6 class="mb-0">Sarah Phiri</h6>
                      <small class="text-muted">Data Scientist at Zambia Data Lab</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary register-modal-btn" data-event-id="workshop1" data-bs-toggle="modal" data-bs-target="#registrationModal" data-bs-dismiss="modal">Register Now</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Event Details Modal 2 -->
  <div class="modal fade" id="eventDetailsModal2" tabindex="-1" aria-labelledby="eventDetailsModalLabel2" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="eventDetailsModalLabel2">Event Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="event-detail-content">
            <img src="assets/img/events/training.jpg" class="img-fluid mb-4 rounded" alt="Web Development Training">
            <h3 class="mb-3">Modern Web Development Training Series</h3>
            
            <div class="event-detail-meta d-flex flex-wrap gap-4 mb-4">
              <div class="meta-item">
                <i class="bi bi-calendar-event text-primary"></i>
                <span>Oct 20, 2024</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-clock text-primary"></i>
                <span>9:00 AM - 5:00 PM</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-geo-alt text-primary"></i>
                <span>University of Zambia, Lusaka</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-tag text-primary"></i>
                <span>Training</span>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Description</h5>
              <p>A multi-day training series covering HTML5, CSS3, JavaScript, and modern frameworks. Learn to build responsive, interactive websites with current best practices.</p>
              <p>This comprehensive training program is designed to take you from the basics to advanced web development topics. The series includes:</p>
              <ul>
                <li>HTML5 semantic elements and accessibility best practices</li>
                <li>Modern CSS3 techniques including flexbox and grid layout</li>
                <li>JavaScript fundamentals and DOM manipulation</li>
                <li>Introduction to popular frameworks like React or Vue</li>
                <li>Responsive design principles and mobile-first approach</li>
                <li>Version control with Git and deployment workflows</li>
              </ul>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Schedule</h5>
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>Day</th>
                      <th>Topic</th>
                      <th>Duration</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Day 1</td>
                      <td>HTML5 & CSS3 Fundamentals</td>
                      <td>8 hours</td>
                    </tr>
                    <tr>
                      <td>Day 2</td>
                      <td>JavaScript & DOM Manipulation</td>
                      <td>8 hours</td>
                    </tr>
                    <tr>
                      <td>Day 3</td>
                      <td>Framework Introduction & Projects</td>
                      <td>8 hours</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Prerequisites</h5>
              <ul>
                <li>Basic understanding of HTML and CSS</li>
                <li>Laptop with code editor installed (VS Code recommended)</li>
                <li>Node.js and npm installed</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary register-modal-btn" data-event-id="training1" data-bs-toggle="modal" data-bs-target="#registrationModal" data-bs-dismiss="modal">Register Now</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Event Details Modal 3 -->
  <div class="modal fade" id="eventDetailsModal3" tabindex="-1" aria-labelledby="eventDetailsModalLabel3" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="eventDetailsModalLabel3">Event Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="event-detail-content">
            <img src="assets/img/events/hackathon.jpg" class="img-fluid mb-4 rounded" alt="Innovation Hackathon">
            <h3 class="mb-3">Zambia Innovation Hackathon 2024</h3>
            
            <div class="event-detail-meta d-flex flex-wrap gap-4 mb-4">
              <div class="meta-item">
                <i class="bi bi-calendar-event text-primary"></i>
                <span>Nov 5-7, 2024</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-clock text-primary"></i>
                <span>48 hours</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-geo-alt text-primary"></i>
                <span>Lusaka Business Hub</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-tag text-primary"></i>
                <span>Hackathon</span>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Description</h5>
              <p>A 48-hour hackathon focused on creating tech solutions for local challenges. Teams will compete for prizes and potential funding for their innovations.</p>
              <p>The Zambia Innovation Hackathon brings together developers, designers, and innovators to create technology solutions addressing local challenges in:</p>
              <ul>
                <li>Healthcare accessibility</li>
                <li>Education technology</li>
                <li>Agricultural innovation</li>
                <li>Financial inclusion</li>
                <li>Smart city solutions</li>
              </ul>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Prizes</h5>
              <div class="row g-4">
                <div class="col-md-4">
                  <div class="card h-100">
                    <div class="card-body text-center">
                      <h1 class="display-4 mb-2 text-primary"><i class="bi bi-trophy-fill"></i></h1>
                      <h6 class="card-title">1st Place</h6>
                      <p class="card-text">$5,000 + Incubation Program</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card h-100">
                    <div class="card-body text-center">
                      <h1 class="display-4 mb-2 text-primary"><i class="bi bi-award-fill"></i></h1>
                      <h6 class="card-title">2nd Place</h6>
                      <p class="card-text">$2,500 + Mentorship</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card h-100">
                    <div class="card-body text-center">
                      <h1 class="display-4 mb-2 text-primary"><i class="bi bi-award"></i></h1>
                      <h6 class="card-title">3rd Place</h6>
                      <p class="card-text">$1,000 + Resources</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Rules & Requirements</h5>
              <ul>
                <li>Teams of 2-5 people</li>
                <li>All code must be written during the hackathon</li>
                <li>Solutions must address one of the identified challenge areas</li>
                <li>Teams must present a working prototype at the end</li>
                <li>Judging criteria: innovation, technical implementation, impact, and presentation</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary register-modal-btn" data-event-id="hackathon1" data-bs-toggle="modal" data-bs-target="#registrationModal" data-bs-dismiss="modal">Register Team</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer id="footer" class="footer light-background">
    <div class="container">
      <div class="floating-elements"></div>
      <div class="row g-4">
        <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
          <div class="widget">
            <h3 class="widget-heading">About Us</h3>
            <p class="mb-4">
              TikulaTech Foundation is a youth-led nonprofit empowering young minds in Zambia with skills in software development, AI, cybersecurity, and more.
            </p>
            <p class="mb-0">
              <a href="/about" class="btn-learn-more">Learn more</a>
            </p>
          </div>
        </div>
        
        <!-- Quick Links -->
        <div class="col-md-6 col-lg-3 ps-lg-5 mb-3 mb-md-0">
          <div class="widget">
            <h3 class="widget-heading">Quick Links</h3>
            <ul class="list-unstyled">
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/ai-initiative">AI Initiatives</a></li>
              <li><a href="/events">Events</a></li>
              <li><a href="/team">Team</a></li>
              <li><a href="/volunteers">Volunteer</a></li>
              <li><a href="/contact">Contact</a></li>
              <li><a href="/privacy">Privacy Policy</a></li>
              <li><a href="/terms">Terms of Service</a></li>
            </ul>
          </div>
        </div>
        
        <!-- Services -->
        <div class="col-md-6 col-lg-3 pl-lg-5">
          <div class="widget">
            <h3 class="widget-heading">Our Programs</h3>
            <ul class="list-unstyled">
              <li><a href="#">Coding Bootcamps</a></li>
              <li><a href="#">Digital Literacy</a></li>
              <li><a href="#">Tech Workshops</a></li>
              <li><a href="#">STEM Education</a></li>
              <li><a href="#">Community Building</a></li>
            </ul>
          </div>
        </div>
        
        <!-- Contact and Social -->
        <div class="col-md-6 col-lg-3 pl-lg-5">
          <div class="widget">
            <h3 class="widget-heading">Contact Us</h3>
            <ul class="list-unstyled">
              <li><a href="tel:+260975102569">+260 975102569</a></li>
              <li><a href="tel:+260953995522">+260 953995522</a></li>
              <li><a href="mailto:info@tikulatech.org">info@tikulatech.org</a></li>
            </ul>
          </div>
          <div class="widget">
            <h3 class="widget-heading">Connect</h3>
            <div class="social-icons">
              <a href="https://web.facebook.com/profile.php?id=61566510794074" aria-label="Facebook">
                <i class="bi bi-facebook"></i>
              </a>
              <a href="https://www.linkedin.com/company/tikulatech-foundation-zambia/?viewAsMember=true" aria-label="LinkedIn">
                <i class="bi bi-linkedin"></i>
              </a>
              <a href="https://youtube.com/@tikulatechfoundationzambia?si=OD3Moog8xwWy75JR" aria-label="YouTube">
                <i class="bi bi-youtube"></i>
              </a>
              <a href="https://github.com/TikulaTech-Foundation" aria-label="GitHub">
                <i class="bi bi-github"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Copyright -->
      <div class="copyright text-center mt-4 pt-4">
        <p>2025 © Copyright <strong class="sitename">TikulaTech Foundation Zambia.</strong> All Rights Reserved</p>
      </div>
    </div>
  </footer>
  
  <style>
    .footer {
      position: relative;
      padding: 60px 0 30px;
      background-color: #f8f9fa;
      overflow: hidden;
    }
    
    .floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    
    .floating-element {
      position: absolute;
      color: rgba(76, 175, 80, 0.1);
      z-index: -1;
    }
    
    .widget-heading {
      position: relative;
      margin-bottom: 1.25rem;
      font-size: 1.25rem;
      font-weight: 600;
      color: #333;
      padding-bottom: 0.5rem;
    }
    
    .widget-heading:after {
      content: '';
      display: block;
      width: 50px;
      height: 2px;
      background-color: #4CAF50;
      margin-top: 8px;
    }
    
    .footer a {
      color: #555;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer a:hover {
      color: #4CAF50;
    }
    
    .list-unstyled {
      margin-bottom: 0;
    }
    
    .list-unstyled li {
      margin-bottom: 0.5rem;
    }
    
    .social-icons {
      display: flex;
      gap: 10px;
    }
    
    .social-icons a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #e9ecef;
      transition: all 0.3s;
    }
    
    .social-icons a:hover {
      background-color: #4CAF50;
      color: white;
    }
    
    .copyright {
      border-top: 1px solid #dee2e6;
      font-size: 14px;
    }
    
    .sitename {
      color: #4CAF50;
    }
    
    .widget {
      position: relative;
      z-index: 2;
    }
    
    .container {
      position: relative;
      z-index: 2;
    }
  </style>
  
  <script>
    // Create animated tech-themed elements in the background
    document.addEventListener('DOMContentLoaded', function() {
      const floatingContainer = document.querySelector('.floating-elements');
      if (floatingContainer) {
        const techSymbols = ['<>', '{}', '()', '//', '/*', '*/', '#', '[]', '=>', '&&', '||', '==', '!=', '+=', '-=', '0101', '1010', 'Youth', 'Community', 'TikulaTech'];
        const colors = ['#4CAF50', '#388E3C', '#66BB6A', '#81C784'];
        
        for (let i = 0; i < 25; i++) {
          createFloatingElement(floatingContainer, techSymbols, colors);
        }
      }
      
      function createFloatingElement(container, symbols, colors) {
        const element = document.createElement('div');
        element.className = 'floating-element';
        
        // Random symbol, size, position, and speed
        const symbol = symbols[Math.floor(Math.random() * symbols.length)];
        const size = Math.floor(Math.random() * 20) + 14;
        const left = Math.floor(Math.random() * 100);
        const top = Math.floor(Math.random() * 100);
        const color = colors[Math.floor(Math.random() * colors.length)];
        const duration = Math.floor(Math.random() * 50) + 30;
        const delay = Math.floor(Math.random() * 10);
        
        element.innerHTML = symbol;
        element.style.fontSize = `${size}px`;
        element.style.left = `${left}%`;
        element.style.top = `${top}%`;
        element.style.color = color;
        element.style.opacity = '0.15';
        
        // Animation
        element.style.animation = `float ${duration}s linear ${delay}s infinite`;
        container.appendChild(element);
      }
      
      // Add keyframe animation
      if (!document.querySelector('style#float-animation')) {
        const style = document.createElement('style');
        style.id = 'float-animation';
        style.textContent = `
          @keyframes float {
            0% {
              transform: translate(0, 0) rotate(0deg);
              opacity: 0;
            }
            10% {
              opacity: 0.15;
            }
            90% {
              opacity: 0.15;
            }
            100% {
              transform: translate(100px, -100px) rotate(360deg);
              opacity: 0;
            }
          }
        `;
        document.head.appendChild(style);
      }
    });
  </script>
  
  <!-- Past Event Details Modals -->
  <div class="modal fade" id="pastEventModal1" tabindex="-1" aria-labelledby="pastEventModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="pastEventModalLabel1">Past Event Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="event-detail-content">
            <img src="assets/img/events/workshop.jpg" class="img-fluid mb-4 rounded" alt="Python Workshop">
            <h3 class="mb-3">Introduction to Python Programming</h3>
            
            <div class="event-detail-meta d-flex flex-wrap gap-4 mb-4">
              <div class="meta-item">
                <i class="bi bi-calendar-event text-primary-blue"></i>
                <span>June 15, 2024</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-clock text-primary-blue"></i>
                <span>9:00 AM - 4:00 PM</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-geo-alt text-primary-blue"></i>
                <span>Lusaka Hub</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-tag text-primary-blue"></i>
                <span>Workshop</span>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Description</h5>
              <p>An introductory workshop where participants learned the fundamentals of Python programming language. The event covered basic concepts, syntax, and simple applications with hands-on exercises.
              </p>
              <p>The workshop was designed for beginners with little to no programming experience. Topics covered included:</p>
              <ul>
                <li>Setting up Python development environment</li>
                <li>Variables, data types, and basic operations</li>
                <li>Control structures (if statements, loops)</li>
                <li>Functions and modules</li>
                <li>Basic file I/O operations</li>
                <li>Introduction to Python libraries for data processing</li>
              </ul>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Event Outcomes</h5>
              <div class="row mb-4">
                <div class="col-md-4 mb-3">
                  <div class="card outcome-card h-100 text-center p-3">
                    <div class="display-4 mb-2 text-primary-blue"><i class="bi bi-people-fill"></i></div>
                    <h6>Participants</h6>
                    <p class="fs-4 fw-bold mb-0">42</p>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="card outcome-card h-100 text-center p-3">
                    <div class="display-4 mb-2 text-primary-blue"><i class="bi bi-laptop"></i></div>
                    <h6>Projects Completed</h6>
                    <p class="fs-4 fw-bold mb-0">40</p>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="card outcome-card h-100 text-center p-3">
                    <div class="display-4 mb-2 text-primary-blue"><i class="bi bi-star-fill"></i></div>
                    <h6>Average Rating</h6>
                    <p class="fs-4 fw-bold mb-0">4.8/5</p>
                  </div>
                </div>
              </div>
              <p>The workshop was very successful, with 95% of participants completing their final projects. Feedback from participants was overwhelmingly positive, with many requesting follow-up sessions on more advanced Python topics.</p>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Facilitators</h5>
              <div class="row g-4">
                <div class="col-md-6">
                  <div class="facilitator-card d-flex align-items-center gap-3">
                    <img src="assets/img/team/team-1.jpg" class="rounded-circle" width="60" height="60" alt="Facilitator">
                    <div>
                      <h6 class="mb-0">John Mumba</h6>
                      <small class="text-muted">AI Research Lead at TikulaTech</small>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="facilitator-card d-flex align-items-center gap-3">
                    <img src="assets/img/team/team-3.jpg" class="rounded-circle" width="60" height="60" alt="Facilitator">
                    <div>
                      <h6 class="mb-0">David Banda</h6>
                      <small class="text-muted">Software Developer at TikulaTech</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Photo Gallery</h5>
              <div class="row g-3">
                <div class="col-md-4">
                  <div class="gallery-img">
                    <img src="assets/img/Activities/webinar.jpg" alt="Workshop Gallery" class="img-fluid">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="gallery-img">
                    <img src="assets/img/Activities/community.jpg" alt="Workshop Gallery" class="img-fluid">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="gallery-img">
                    <img src="assets/img/Activities/engagements.jpg" alt="Workshop Gallery" class="img-fluid">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a href="#" class="btn btn-blue">View Resources</a>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Past Event Details Modal 2 -->
  <div class="modal fade" id="pastEventModal2" tabindex="-1" aria-labelledby="pastEventModalLabel2" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="pastEventModalLabel2">Past Event Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="event-detail-content">
            <img src="assets/img/events/training.jpg" class="img-fluid mb-4 rounded" alt="Data Science Training">
            <h3 class="mb-3">Data Science with Python</h3>
            
            <div class="event-detail-meta d-flex flex-wrap gap-4 mb-4">
              <div class="meta-item">
                <i class="bi bi-calendar-event text-primary-blue"></i>
                <span>May 20, 2024</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-clock text-primary-blue"></i>
                <span>10:00 AM - 5:00 PM</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-geo-alt text-primary-blue"></i>
                <span>University of Zambia</span>
              </div>
              <div class="meta-item">
                <i class="bi bi-tag text-primary-blue"></i>
                <span>Training</span>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Description</h5>
              <p>A training session focused on data science using Python. Participants learned about data manipulation with Pandas, visualization with Matplotlib, and basic machine learning concepts.</p>
              <p>This intensive one-day training covered the essential data science toolkit in Python, including:</p>
              <ul>
                <li>Data cleaning and preprocessing with Pandas</li>
                <li>Exploratory data analysis techniques</li>
                <li>Data visualization with Matplotlib and Seaborn</li>
                <li>Introduction to machine learning with scikit-learn</li>
                <li>Building simple predictive models</li>
                <li>Interpreting and communicating results</li>
              </ul>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Real-World Projects</h5>
              <p>Participants worked with real datasets to solve practical problems:</p>
              <div class="table-responsive">
                <table class="table table-bordered project-table">
                  <thead>
                    <tr>
                      <th>Project</th>
                      <th>Dataset</th>
                      <th>Techniques Used</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Market Basket Analysis</td>
                      <td>Local Retail Store Data</td>
                      <td>Association Rules, Pandas</td>
                    </tr>
                    <tr>
                      <td>Customer Segmentation</td>
                      <td>E-commerce Purchase History</td>
                      <td>Clustering, K-means</td>
                    </tr>
                    <tr>
                      <td>Crop Yield Prediction</td>
                      <td>Zambian Agricultural Data</td>
                      <td>Regression, Random Forest</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Event Outcomes</h5>
              <div class="row mb-4">
                <div class="col-md-4 mb-3">
                  <div class="card outcome-card h-100 text-center p-3">
                    <div class="display-4 mb-2 text-primary-blue"><i class="bi bi-people-fill"></i></div>
                    <h6>Participants</h6>
                    <p class="fs-4 fw-bold mb-0">35</p>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="card outcome-card h-100 text-center p-3">
                    <div class="display-4 mb-2 text-primary-blue"><i class="bi bi-file-earmark-code"></i></div>
                    <h6>Datasets Analyzed</h6>
                    <p class="fs-4 fw-bold mb-0">10</p>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="card outcome-card h-100 text-center p-3">
                    <div class="display-4 mb-2 text-primary-blue"><i class="bi bi-star-fill"></i></div>
                    <h6>Average Rating</h6>
                    <p class="fs-4 fw-bold mb-0">4.6/5</p>
                  </div>
                </div>
              </div>
              <p>The training received excellent feedback from participants, with many highlighting the practical nature of the content. Several students have gone on to apply the learned techniques in their academic research and professional work.</p>
            </div>
            
            <div class="mb-4">
              <h5 class="mb-3">Facilitators</h5>
              <div class="row g-4">
                <div class="col-md-6">
                  <div class="facilitator-card d-flex align-items-center gap-3">
                    <img src="assets/img/team/team-2.jpg" class="rounded-circle" width="60" height="60" alt="Facilitator">
                    <div>
                      <h6 class="mb-0">Sarah Phiri</h6>
                      <small class="text-muted">Data Scientist at Zambia Data Lab</small>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="facilitator-card d-flex align-items-center gap-3">
                    <img src="assets/img/team/team-4.jpg" class="rounded-circle" width="60" height="60" alt="Facilitator">
                    <div>
                      <h6 class="mb-0">Michael Chanda</h6>
                      <small class="text-muted">Professor at University of Zambia</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a href="#" class="btn btn-blue">Download Materials</a>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>

  <!-- Main JS File -->
  <script src="assets/js/main.js"></script>
  
  <!-- AOS (Animate On Scroll) Initialization -->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Initialize AOS
      AOS.init({
        duration: 800,
        easing: 'ease-in-out',
        once: true,
        mirror: false
      });
      
      // View Toggle
      const viewButtons = document.querySelectorAll('.btn-toggle');
      const listView = document.querySelector('.events-list-view');
      const calendarView = document.querySelector('.calendar-view');
      
      viewButtons.forEach(button => {
        button.addEventListener('click', function() {
          // Remove active class from all buttons
          viewButtons.forEach(btn => btn.classList.remove('active'));
          
          // Add active class to clicked button
          this.classList.add('active');
          
          // Toggle view based on button data attribute
          const view = this.getAttribute('data-view');
          
          if (view === 'list') {
            listView.style.display = 'block';
            if (calendarView) calendarView.style.display = 'none';
          } else if (view === 'calendar') {
            if (calendarView) calendarView.style.display = 'block';
            listView.style.display = 'none';
            // Initialize calendar when switching to calendar view
            renderCalendar();
          }
        });
      });
      
      // Filter Functionality
      const filterButtons = document.querySelectorAll('.filter-btn');
      const eventCards = document.querySelectorAll('.event-card');
      const pastEventCards = document.querySelectorAll('.past-event-card');
      const noResultsMessage = document.getElementById('no-results-message');
      const pastEventsSection = document.getElementById('past-events');
      const upcomingEventsSection = document.getElementById('upcoming-events');
      
      // Track active filters
      let activeFilters = {
        type: 'all',
        time: 'all'
      };
      
      // Filter event cards based on active filters
      function filterEvents() {
        let visibleUpcomingCount = 0;
        let visiblePastCount = 0;
        
        // Handle upcoming event cards
        eventCards.forEach(card => {
          const eventType = card.getAttribute('data-event-type');
          const eventDate = new Date(card.getAttribute('data-event-date'));
          const now = new Date();
          const isUpcoming = eventDate > now;
          
          // Check if card matches type filter
          const matchesType = activeFilters.type === 'all' || eventType === activeFilters.type;
          
          // Check if card matches time filter
          let matchesTime = true;
          if (activeFilters.time === 'upcoming') {
            matchesTime = isUpcoming;
          } else if (activeFilters.time === 'past') {
            matchesTime = !isUpcoming;
          } else if (activeFilters.time === 'all') {
            matchesTime = isUpcoming; // For "all" time filter, upcoming events still show in the upcoming section
          }
          
          // Show/hide card based on filter match
          if (matchesType && matchesTime) {
            card.style.display = '';
            visibleUpcomingCount++;
          } else {
            card.style.display = 'none';
          }
        });
        
        // Handle past event cards
        pastEventCards.forEach(card => {
          const eventType = card.getAttribute('data-event-type');
          
          // Check if card matches type filter
          const matchesType = activeFilters.type === 'all' || eventType === activeFilters.type;
          
          // Check if card matches time filter (past events are always past)
          let matchesTime = true;
          if (activeFilters.time === 'upcoming') {
            matchesTime = false;
          } else {
            matchesTime = true; // For "all" or "past" time filter, show past events
          }
          
          // Show/hide card based on filter match
          if (matchesType && matchesTime) {
            card.style.display = '';
            visiblePastCount++;
          } else {
            card.style.display = 'none';
          }
        });
        
        // Show/hide no results message in upcoming events section
        if (visibleUpcomingCount === 0 && noResultsMessage) {
          noResultsMessage.style.display = 'flex';
        } else if (noResultsMessage) {
          noResultsMessage.style.display = 'none';
        }
        
        // Show/hide entire sections based on time filter
        if (activeFilters.time === 'upcoming') {
          if (upcomingEventsSection) upcomingEventsSection.style.display = 'block';
          if (pastEventsSection) pastEventsSection.style.display = 'none';
        } else if (activeFilters.time === 'past') {
          if (upcomingEventsSection) upcomingEventsSection.style.display = 'none';
          if (pastEventsSection) pastEventsSection.style.display = 'block';
        } else {
          // For "all" time filter, show both sections
          if (upcomingEventsSection) upcomingEventsSection.style.display = 'block';
          if (pastEventsSection) pastEventsSection.style.display = 'block';
        }
        
        // Update calendar view if it's visible
        if (calendarView && calendarView.style.display === 'block') {
          renderCalendar();
        }
      }
      
      // Handle filter button clicks
      filterButtons.forEach(button => {
        button.addEventListener('click', function() {
          const filterGroup = this.closest('.filter-group');
          const filterType = filterGroup.querySelector('.filter-label').textContent.toLowerCase().includes('type') ? 'type' : 'time';
          const filterValue = this.getAttribute('data-value');
          
          // Update active filter for this group
          activeFilters[filterType] = filterValue;
          
          // Update active button in this group
          filterGroup.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('active');
          });
          this.classList.add('active');
          
          // Add pulse animation
          this.classList.add('pulse');
          setTimeout(() => {
            this.classList.remove('pulse');
          }, 300);
          
          // Filter events based on updated filters
          filterEvents();
        });
      });
      
      // Reset filters button
      const resetFiltersBtn = document.querySelector('.reset-filters-btn');
      if (resetFiltersBtn) {
        resetFiltersBtn.addEventListener('click', function() {
          // Reset active filters
          activeFilters = {
            type: 'all',
            time: 'all'
          };
          
          // Reset active buttons
          document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('active');
            if (btn.getAttribute('data-value') === 'all') {
              btn.classList.add('active');
            }
          });
          
          // Filter events with reset filters
          filterEvents();
        });
      }

      // Event Registration Button Click
      const registerBtns = document.querySelectorAll('.register-btn');
      
      registerBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.preventDefault();
          const eventId = this.getAttribute('data-event-id');
          const eventCard = this.closest('.event-card');
          const eventTitle = eventCard.querySelector('.event-title').textContent;
          const eventDate = eventCard.querySelector('.event-date').textContent;
          const eventTime = eventCard.querySelector('.event-time').textContent;
          const eventLocation = eventCard.querySelector('.event-location').textContent;
          
          // Populate modal with event details
          document.getElementById('event-id').value = eventId;
          document.querySelector('.event-title-modal').textContent = eventTitle;
          document.querySelector('.date-time-text').textContent = eventDate + ', ' + eventTime.replace('</i>', '');
          document.querySelector('.location-text').textContent = eventLocation;
          
          // Show the modal
          var registrationModal = new bootstrap.Modal(document.getElementById('registrationModal'));
          registrationModal.show();
        });
      });

      // Initialize with default filters
      document.querySelectorAll('.filter-group').forEach(group => {
        const defaultBtn = group.querySelector('.filter-btn[data-value="all"]');
        if (defaultBtn) {
          defaultBtn.classList.add('active');
        }
      });
      
      // Register Modal Button Click from event details modals
      const registerModalBtns = document.querySelectorAll('.register-modal-btn');
      
      registerModalBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          const eventId = this.getAttribute('data-event-id');
          const eventTitle = this.closest('.modal-content').querySelector('h3').textContent;
          const detailMeta = this.closest('.modal-content').querySelector('.event-detail-meta');
          const eventDate = detailMeta.querySelector('.meta-item:nth-child(1) span').textContent;
          const eventTime = detailMeta.querySelector('.meta-item:nth-child(2) span').textContent;
          const eventLocation = detailMeta.querySelector('.meta-item:nth-child(3) span').textContent;
          
          // Populate modal with event details
          document.getElementById('event-id').value = eventId;
          document.querySelector('.event-title-modal').textContent = eventTitle;
          document.querySelector('.date-time-text').textContent = eventDate + ', ' + eventTime;
          document.querySelector('.location-text').textContent = eventLocation;
        });
      });
      
      // Calendar View Functionality
      let currentDate = new Date();
      let currentMonth = currentDate.getMonth();
      let currentYear = currentDate.getFullYear();
      
      // Previous month button
      const prevMonthBtn = document.querySelector('.prev-month');
      if (prevMonthBtn) {
        prevMonthBtn.addEventListener('click', function() {
          currentMonth--;
          if (currentMonth < 0) {
            currentMonth = 11;
            currentYear--;
          }
          renderCalendar();
        });
      }
      
      // Next month button
      const nextMonthBtn = document.querySelector('.next-month');
      if (nextMonthBtn) {
        nextMonthBtn.addEventListener('click', function() {
          currentMonth++;
          if (currentMonth > 11) {
            currentMonth = 0;
            currentYear++;
          }
          renderCalendar();
        });
      }
      
      // Render calendar
      function renderCalendar() {
        const calendarDays = document.querySelector('.calendar-days');
        const currentMonthEl = document.querySelector('.current-month');
        
        if (!calendarDays || !currentMonthEl) return;
        
        // Clear calendar days
        calendarDays.innerHTML = '';
        
        // Update month and year display
        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        currentMonthEl.textContent = `${monthNames[currentMonth]} ${currentYear}`;
        
        // Get first day of month
        const firstDay = new Date(currentYear, currentMonth, 1).getDay();
        
        // Get last day of month
        const lastDay = new Date(currentYear, currentMonth + 1, 0).getDate();
        
        // Get all events
        const allEvents = [...document.querySelectorAll('.event-card'), ...document.querySelectorAll('.past-event-card')];
        
        // Create calendar grid
        let dayCount = 1;
        
        // Previous month days
        const prevMonthLastDay = new Date(currentYear, currentMonth, 0).getDate();
        for (let i = firstDay - 1; i >= 0; i--) {
          const dayEl = document.createElement('div');
          dayEl.className = 'calendar-day prev-month-day';
          dayEl.innerHTML = `<div class="day-number text-muted">${prevMonthLastDay - i}</div>`;
          calendarDays.appendChild(dayEl);
        }
        
        // Current month days
        for (let i = 1; i <= lastDay; i++) {
          const dayEl = document.createElement('div');
          dayEl.className = 'calendar-day';
          
          // Check if this is today
          const today = new Date();
          if (i === today.getDate() && currentMonth === today.getMonth() && currentYear === today.getFullYear()) {
            dayEl.classList.add('today');
          }
          
          // Add day number
          dayEl.innerHTML = `<div class="day-number" data-day="${i}">${i}</div>`;
          
          // Check for events on this day
          const dayDate = new Date(currentYear, currentMonth, i);
          const dayEvents = allEvents.filter(event => {
            const eventDate = new Date(event.getAttribute('data-event-date'));
            return eventDate.getDate() === i && 
                   eventDate.getMonth() === currentMonth && 
                   eventDate.getFullYear() === currentYear;
          });
          
          // Filter events based on active filters
          const filteredEvents = dayEvents.filter(event => {
            const eventType = event.getAttribute('data-event-type');
            const eventDate = new Date(event.getAttribute('data-event-date'));
            const now = new Date();
            const isUpcoming = eventDate > now;
            
            // Check if event matches type filter
            const matchesType = activeFilters.type === 'all' || eventType === activeFilters.type;
            
            // Check if event matches time filter
            let matchesTime = true;
            if (activeFilters.time === 'upcoming') {
              matchesTime = isUpcoming;
            } else if (activeFilters.time === 'past') {
              matchesTime = !isUpcoming;
            }
            
            return matchesType && matchesTime;
          });
          
          // Add events to calendar day
          if (filteredEvents.length > 0) {
            const eventsContainer = document.createElement('div');
            eventsContainer.className = 'day-events';
            
            filteredEvents.forEach(event => {
              const eventType = event.getAttribute('data-event-type');
              const eventTitle = event.querySelector('.event-title') ? 
                                 event.querySelector('.event-title').textContent : 
                                 event.querySelector('.past-event-title').textContent;
              
              const eventEl = document.createElement('div');
              eventEl.className = `calendar-event event-type-${eventType}`;
              eventEl.innerHTML = `<span class="event-dot"></span><span class="event-title-short">${eventTitle.substring(0, 15)}${eventTitle.length > 15 ? '...' : ''}</span>`;
              
              // Add click event to open modal
              eventEl.addEventListener('click', function() {
                if (event.querySelector('.btn-details')) {
                  event.querySelector('.btn-details').click();
                }
              });
              
              eventsContainer.appendChild(eventEl);
            });
            
            dayEl.appendChild(eventsContainer);
          }
          
          calendarDays.appendChild(dayEl);
          dayCount++;
        }
        
        // Next month days to fill the grid
        const totalDaysShown = firstDay + lastDay;
        const nextMonthDays = 42 - totalDaysShown; // 6 rows × 7 days
        
        for (let i = 1; i <= nextMonthDays; i++) {
          const dayEl = document.createElement('div');
          dayEl.className = 'calendar-day next-month-day';
          dayEl.innerHTML = `<div class="day-number text-muted">${i}</div>`;
          calendarDays.appendChild(dayEl);
        }
      }
      
      // Initialize filter on page load
      filterEvents();
    });
  </script>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Registration form validation and submission
      const submitRegistrationBtn = document.getElementById('submit-registration');
      const registrationForm = document.querySelector('#registrationModal form');
      
      if (submitRegistrationBtn && registrationForm) {
        // Add alert container for form messages
        const alertContainer = document.createElement('div');
        alertContainer.className = 'alert-container mt-3';
        alertContainer.style.display = 'none';
        registrationForm.prepend(alertContainer);
        
        submitRegistrationBtn.addEventListener('click', function() {
          // Reset previous alerts
          alertContainer.innerHTML = '';
          alertContainer.style.display = 'none';
          
          // Check if terms checkbox is checked
          const termsCheckbox = document.getElementById('terms-agree');
          if (!termsCheckbox || !termsCheckbox.checked) {
            // Show error message
            alertContainer.innerHTML = '<div class="alert alert-danger">Please agree to the terms and conditions and privacy policy to continue.</div>';
            alertContainer.style.display = 'block';
            return;
          }
          
          // Check other required fields
          const requiredFields = registrationForm.querySelectorAll('[required]');
          let isValid = true;
          
          requiredFields.forEach(field => {
            if (!field.value.trim()) {
              isValid = false;
              field.classList.add('is-invalid');
            } else {
              field.classList.remove('is-invalid');
            }
          });
          
          if (!isValid) {
            alertContainer.innerHTML = '<div class="alert alert-danger">Please fill in all required fields.</div>';
            alertContainer.style.display = 'block';
            return;
          }
          
          // If we get here, the form is valid - show success message
          alertContainer.innerHTML = '<div class="alert alert-success">Registration successful! We\'ll be in touch soon.</div>';
          alertContainer.style.display = 'block';
          
          // Reset form after 2 seconds and close modal
          setTimeout(() => {
            registrationForm.reset();
            alertContainer.style.display = 'none';
            const registrationModal = bootstrap.Modal.getInstance(document.getElementById('registrationModal'));
            if (registrationModal) {
              registrationModal.hide();
            }
          }, 2000);
        });
      }
      
      // Fix Download Materials button to prevent scrolling
      document.querySelectorAll('.modal-footer .btn-primary').forEach(btn => {
        if (btn.textContent.includes('Download') || btn.textContent.includes('View Resources')) {
          btn.addEventListener('click', function(e) {
            e.preventDefault();
            // Open in new tab instead
            window.open(this.getAttribute('href') || '#', '_blank');
          });
        }
      });
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Add Show More Past Events functionality
      const showMoreBtn = document.getElementById('showMoreBtn');
      const noMoreEvents = document.getElementById('noMoreEvents');
      const hiddenPastEvents = Array.from(document.querySelectorAll('.past-event-card.hidden'));
      let currentlyShown = 0;
      const eventsPerLoad = 3; // Number of events to show per click
      
      // Initially hide all past events after the first few
      function initPastEvents() {
        // Show only the first batch of past events
        const visiblePastEvents = Array.from(document.querySelectorAll('.past-event-card:not(.hidden)'));
        
        if (visiblePastEvents.length >= hiddenPastEvents.length && hiddenPastEvents.length === 0) {
          // No hidden events, disable the show more button
          showMoreBtn.classList.add('disabled');
          noMoreEvents.style.display = 'block';
        }
      }
      
      // Handle "Show More" button click
      if (showMoreBtn) {
        showMoreBtn.addEventListener('click', function() {
          if (showMoreBtn.classList.contains('disabled')) {
            return; // Exit if button is disabled
          }
          
          const start = currentlyShown;
          const end = Math.min(currentlyShown + eventsPerLoad, hiddenPastEvents.length);
          
          // Show the next batch of events
          for (let i = start; i < end; i++) {
            hiddenPastEvents[i].classList.remove('hidden');
            hiddenPastEvents[i].style.display = '';
          }
          
          currentlyShown = end;
          
          // If we've shown all events, disable the button and show the message
          if (currentlyShown >= hiddenPastEvents.length) {
            showMoreBtn.classList.add('disabled');
            noMoreEvents.style.display = 'block';
          }
        });
      }
      
      // Initialize past events display
      initPastEvents();
    });
  </script>

  <!-- Custom JavaScript for Resources section -->
  <script>
    // Smooth scrolling for anchor links
    document.addEventListener('DOMContentLoaded', function() {
      // Resource filtering
      const resourceFilterButtons = document.querySelectorAll('.resource-filters button');
      if (resourceFilterButtons.length > 0) {
        resourceFilterButtons.forEach(button => {
          button.addEventListener('click', function() {
            // Remove active class from all filter buttons
            resourceFilterButtons.forEach(btn => {
              btn.classList.remove('active');
            });
            
            // Add active class to clicked button
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            // Show all resources if "all" is selected, otherwise filter
            document.querySelectorAll('.resource-item').forEach(item => {
              if (filter === 'all' || item.classList.contains(filter)) {
                item.style.display = 'block';
                setTimeout(() => {
                  item.style.opacity = 1;
                }, 50);
              } else {
                item.style.opacity = 0;
                setTimeout(() => {
                  item.style.display = 'none';
                }, 300);
              }
            });
          });
        });
      }
      
      // Smooth scrolling for anchor links
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
          const targetId = this.getAttribute('href');
          if (targetId !== '#' && targetId.startsWith('#')) {
            e.preventDefault();
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
              window.scrollTo({
                top: targetElement.offsetTop - 80, // Offset for header
                behavior: 'smooth'
              });
            }
          }
        });
      });
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // First, check if modals exist, if not create them
      if (!document.getElementById('pastEventModal1')) {
        const modal1 = document.createElement('div');
        modal1.id = 'pastEventModal1';
        modal1.className = 'modal fade';
        modal1.setAttribute('tabindex', '-1');
        modal1.setAttribute('aria-hidden', 'true');
        modal1.innerHTML = `
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Past Event Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body"></div>
            </div>
          </div>
        `;
        document.body.appendChild(modal1);
      }
      
      if (!document.getElementById('pastEventModal2')) {
        const modal2 = document.createElement('div');
        modal2.id = 'pastEventModal2';
        modal2.className = 'modal fade';
        modal2.setAttribute('tabindex', '-1');
        modal2.setAttribute('aria-hidden', 'true');
        modal2.innerHTML = `
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Past Event Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body"></div>
            </div>
          </div>
        `;
        document.body.appendChild(modal2);
      }
      
      // Get all the "View Details" buttons
          }
        });
      });
    });
  </script>

  <script>
    // Add a click event handler for the "View Details" buttons
    document.addEventListener('DOMContentLoaded', function() {
      // Get all the view details buttons
      const viewDetailsButtons = document.querySelectorAll('.past-event-card .btn-outline-success');
      
      // Add click event listener to each button
      viewDetailsButtons.forEach(button => {
        button.addEventListener('click', function(e) {
          // Get the parent event card
          const eventCard = this.closest('.past-event-card');
          const eventTitle = eventCard.querySelector('.past-event-title').innerText;
          const eventType = eventCard.getAttribute('data-event-type');
          const eventDate = eventCard.getAttribute('data-event-date');
          const eventDescription = eventCard.querySelector('.past-event-description').innerText;
          
          // Get the modal elements
          const modalId = this.getAttribute('data-bs-target');
          const modal = document.querySelector(modalId);
          
          if (modal) {
            // Set the modal content based on the clicked event
            modal.querySelector('.modal-title').innerText = 'Past Event Details';
            
            // Create modal content
            const modalBody = modal.querySelector('.modal-body');
            modalBody.innerHTML = '';
          }
        });
      });
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Get all the view details buttons
      const detailButtons = document.querySelectorAll('.past-event-card .btn-outline-success');
      
      // Add click event handlers
      detailButtons.forEach(button => {
        button.addEventListener('click', function() {
          // Get the event card data
          const card = this.closest('.past-event-card');
          const title = card.querySelector('.past-event-title').textContent;
          const type = card.querySelector('.past-event-type').textContent;
          const date = card.querySelector('.past-event-detail:nth-child(1) span').textContent;
          const time = card.querySelector('.past-event-detail:nth-child(2) span').textContent;
          const location = card.querySelector('.past-event-detail:nth-child(3) span').textContent;
          const description = card.querySelector('.past-event-description').textContent;
          
          // Get the modal
          const modal = document.querySelector(this.getAttribute('data-bs-target'));
          
          if (modal) {
            const modalBody = modal.querySelector('.modal-body');
            
            // Get appropriate topics based on event title
            let topicsList = '';
            
            if (title.includes("Game Development")) {
              topicsList = `
                <li>Introduction to Unity game engine interface</li>
                <li>Creating basic 2D game objects and assets</li>
                <li>Understanding game mechanics and physics</li>
                <li>Implementing player controls and interactions</li>
                <li>Basic C# scripting for Unity development</li>
                <li>Building and exporting your first game</li>
              `;
            } else if (title.includes("Personal Branding")) {
              topicsList = `
                <li>Creating a professional online presence</li>
                <li>Building an effective technical portfolio</li>
                <li>LinkedIn profile optimization techniques</li>
                <li>Networking strategies in the tech industry</li>
                <li>Personal brand storytelling and messaging</li>
                <li>Leveraging social media for career growth</li>
              `;
            } else if (title.includes("EnrollPredict")) {
              topicsList = `
                <li>Data collection and preprocessing techniques</li>
                <li>Feature engineering for enrollment prediction</li>
                <li>Machine learning model selection and training</li>
                <li>Evaluation metrics for predictive modeling</li>
                <li>Model deployment and integration strategies</li>
                <li>Implementing feedback loops for model improvement</li>
              `;
            } else if (title.includes("Robotics")) {
              topicsList = `
                <li>Arduino board components and setup</li>
                <li>Basic electronics and circuit design</li>
                <li>Programming with the Arduino IDE</li>
                <li>Working with sensors and input devices</li>
                <li>Controlling motors and actuators</li>
                <li>Building simple robotic projects</li>
              `;
            } else if (title.includes("Opportunities")) {
              topicsList = `
                <li>Overview of tech hubs across Africa</li>
                <li>Internship and training programs</li>
                <li>Remote work opportunities in technology</li>
                <li>Startup ecosystems and funding sources</li>
                <li>Tech communities and networking platforms</li>
                <li>Skills development for international markets</li>
              `;
            }
            
            // Set modal content based on the event
            modalBody.innerHTML = `
              <h3>${title}</h3>
              
              <div class="event-meta d-flex gap-4 mb-4">
                <div class="d-flex align-items-center">
                  <i class="bi bi-calendar me-2"></i>
                  <span>${date}</span>
                </div>
                <div class="d-flex align-items-center">
                  <i class="bi bi-clock me-2"></i>
                  <span>${time}</span>
                </div>
                <div class="d-flex align-items-center">
                  <i class="bi bi-geo-alt me-2"></i>
                  <span>${location}</span>
                </div>
                <div class="d-flex align-items-center">
                  <i class="bi bi-tag me-2"></i>
                  <span>${type}</span>
                </div>
              </div>

              <div class="description mb-4">
                <h5>Description</h5>
                <p>${description}</p>
                <p>The workshop was designed for participants interested in this area. Topics covered included:</p>
                <ul>
                  ${topicsList}
                </ul>
              </div>

              <div class="event-outcomes mb-4">
                <h5>Event Outcomes</h5>
                <div class="row text-center">
                  <div class="col-md-4">
                    <div class="outcome-item">
                      <i class="bi bi-people-fill fs-2"></i>
                      <h4>35</h4>
                      <p>Participants</p>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="outcome-item">
                      <i class="bi bi-clock-fill fs-2"></i>
                      <h4>2 hours</h4>
                      <p>Duration</p>
                    </div>
                  
                </div>
              </div>

              <div class="facilitators mb-4">
                <h5>Facilitators</h5>
                <div class="row">
                  <div class="col-md-6">
                    <div class="facilitator d-flex align-items-center">
                      <img src="assets/img/team/team-1.jpg" class="rounded-circle me-3" width="50" height="50" onerror="this.src='assets/img/team-placeholder.jpg'" alt="Facilitator">
                      <div>
                        <h6 class="mb-0">TikulaTech Team</h6>
                        <small>Event Facilitator</small>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            `;
          }
        });
      });
    });
  </script>

  <!-- Resources Filtering Script -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Get resources filter buttons and items
      const filterBtns = document.querySelectorAll('#resource-flters li');
      const resourceItems = document.querySelectorAll('.resource-item');
      
      // Add click event to filter buttons
      filterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          // Remove active class from all buttons
          filterBtns.forEach(b => b.classList.remove('filter-active'));
          
          // Add active class to clicked button
          this.classList.add('filter-active');
          
          // Get filter value
          const filterValue = this.getAttribute('data-filter');
          
          // Show/hide items based on filter
          resourceItems.forEach(item => {
            if (filterValue === '*') {
              item.style.display = 'block';
            } else if (item.classList.contains(filterValue)) {
              item.style.display = 'block';
            } else {
              item.style.display = 'none';
            }
          });
        });
      });
      
      // Add smooth scrolling for Resources button in hero section
      const resourcesBtn = document.querySelector('a[href="#resources"]');
      if (resourcesBtn) {
        resourcesBtn.addEventListener('click', function(e) {
          e.preventDefault();
          const resourcesSection = document.querySelector('#resources');
          if (resourcesSection) {
            resourcesSection.scrollIntoView({ behavior: 'smooth' });
          }
        });
      }
      
      // Add effect to resource cards on hover
      const resourceCards = document.querySelectorAll('.resource-card');
      resourceCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
          this.querySelector('.resource-overlay').style.opacity = '1';
        });
        
        card.addEventListener('mouseleave', function() {
          this.querySelector('.resource-overlay').style.opacity = '0';
        });
      });
    });
  </script>

  <!-- Event Details Script -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Simple event details functionality
      const viewButtons = document.querySelectorAll('.past-event-card .btn-outline-success');
      
      viewButtons.forEach(button => {
        button.addEventListener('click', function() {
          // Basic functionality - just ensure modal works
          console.log('View details clicked');
        });
      });
    });
  </script>

  <!-- Resources Filter Script -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Simple resource filtering
      const filterButtons = document.querySelectorAll('#resource-flters li');
      const resourceItems = document.querySelectorAll('.resource-item');
      
      filterButtons.forEach(button => {
        button.addEventListener('click', function() {
          const filterValue = this.getAttribute('data-filter');
          
          // Remove active class from all buttons
          filterButtons.forEach(btn => {
            btn.classList.remove('filter-active');
          });
          
          // Add active class to clicked button
          this.classList.add('filter-active');
          
          // Filter resources
          if (filterValue === '*') {
            resourceItems.forEach(item => {
              item.style.display = 'block';
            });
          } else {
            resourceItems.forEach(item => {
              if (item.classList.contains(filterValue)) {
                item.style.display = 'block';
              } else {
                item.style.display = 'none';
              }
            });
          }
        });
      });
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // ...existing code...
      
      detailButtons.forEach(button => {
        button.addEventListener('click', function() {
          const card = this.closest('.past-event-card');
          // ...existing code...
          
          if (modal) {
            const modalBody = modal.querySelector('.modal-body');
            
            // Enhanced event outcomes based on event type
            let eventOutcomes = {
              participants: 0,
              duration: '',
              satisfaction: 0,
              projects: 0
            };
            
            if (title.includes("Game Development")) {
              eventOutcomes = {
                participants: 45,
                duration: '3 hours',
                satisfaction: 4.8,
                projects: 25
              };
              topicsList = `
                <li>Unity game engine fundamentals and interface navigation</li>
                <li>2D/3D game development principles and best practices</li>
                <li>Game physics, mechanics, and player interactions</li>
                <li>Advanced C# scripting for game logic and behaviors</li>
                <li>Asset management and game optimization techniques</li>
                <li>Game testing, debugging, and deployment strategies</li>
              `;
            } else if (title.includes("Personal Branding")) {
              // ...existing code for other event types...
            }
            
            modalBody.innerHTML = `
              <div class="event-detail-content">
                <div class="event-header mb-4">
                  <h3 class="mb-3">${title}</h3>
                  <div class="event-meta d-flex flex-wrap gap-4">
                    <div class="meta-item">
                      <i class="bi bi-calendar me-2 text-primary"></i>
                      <span>${date}</span>
                    </div>
                    <div class="meta-item">
                      <i class="bi bi-clock me-2 text-primary"></i>
                      <span>${time}</span>
                    </div>
                    <div class="meta-item">
                      <i class="bi bi-geo-alt me-2 text-primary"></i>
                      <span>${location}</span>
                    </div>
                    <div class="meta-item">
                      <i class="bi bi-tag me-2 text-primary"></i>
                      <span class="badge bg-${type.toLowerCase()}">${type}</span>
                    </div>
                  </div>
                </div>

                <div class="event-description mb-4">
                  <h5 class="border-bottom pb-2">Overview</h5>
                  <p class="lead">${description}</p>
                </div>

                <div class="event-outcomes mb-4">
                  <h5 class="border-bottom pb-2">Event Highlights</h5>
                  <div class="row g-4 mb-4">
                    <div class="col-md-3 col-sm-6">
                      <div class="outcome-card text-center p-3 h-100 rounded-3 bg-light">
                        <i class="bi bi-people-fill fs-1 text-primary mb-2"></i>
                        <h4 class="counter mb-1">${eventOutcomes.participants}</h4>
                        <p class="mb-0">Participants</p>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                      <div class="outcome-card text-center p-3 h-100 rounded-3 bg-light">
                        <i class="bi bi-clock-fill fs-1 text-primary mb-2"></i>
                        <h4 class="mb-1">${eventOutcomes.duration}</h4>
                        <p class="mb-0">Duration</p>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                      <div class="outcome-card text-center p-3 h-100 rounded-3 bg-light">
                        <i class="bi bi-star-fill fs-1 text-primary mb-2"></i>
                        <h4 class="mb-1">${eventOutcomes.satisfaction}/5.0</h4>
                        <p class="mb-0">Satisfaction</p>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                      <div class="outcome-card text-center p-3 h-100 rounded-3 bg-light">
                        <i class="bi bi-file-earmark-code fs-1 text-primary mb-2"></i>
                        <h4 class="counter mb-1">${eventOutcomes.projects}</h4>
                        <p class="mb-0">Projects</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="topics-covered mb-4">
                  <h5 class="border-bottom pb-2">Topics Covered</h5>
                  <ul class="topics-list">
                    ${topicsList}
                  </ul>
                </div>

                <div class="event-gallery mb-4">
                  <h5 class="border-bottom pb-2">Event Gallery</h5>
                  <div class="row g-3">
                    <div class="col-md-4">
                      <img src="assets/img/events/gallery/${type.toLowerCase()}-1.jpg" 
                           class="img-fluid rounded" 
                           alt="Event Photo"
                           onerror="this.src='assets/img/events/default-event.jpg'">
                    </div>
                    <div class="col-md-4">
                      <img src="assets/img/events/gallery/${type.toLowerCase()}-2.jpg" 
                           class="img-fluid rounded" 
                           alt="Event Photo"
                           onerror="this.src='assets/img/events/default-event.jpg'">
                    </div>
                    <div class="col-md-4">
                      <img src="assets/img/events/gallery/${type.toLowerCase()}-3.jpg" 
                           class="img-fluid rounded" 
                           alt="Event Photo"
                           onerror="this.src='assets/img/events/default-event.jpg'">
                    </div>
                  </div>
                </div>

                <div class="event-resources">
                  <h5 class="border-bottom pb-2">Event Resources</h5>
                  <div class="d-flex gap-3">
                    <a href="#" class="btn btn-outline-primary">
                      <i class="bi bi-file-pdf me-2"></i>Presentation Slides
                    </a>
                    <a href="#" class="btn btn-outline-primary">
                      <i class="bi bi-github me-2"></i>Project Repository
                    </a>
                    <a href="#" class="btn btn-outline-primary">
                      <i class="bi bi-camera-video me-2"></i>Recording
                    </a>
                  </div>
                </div>
              </div>
            `;
          }
        });
      });
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const techBackground = document.querySelector('.tech-background');
  const techSymbols = ['<>', '{}', '()', '//', '/*', '*/', '#', '[]', '=>', '&&', '||', '==', '!=', '+=', '-=', '0101', '1010'];
  
  for (let i = 0; i < 20; i++) {
    createTechSymbol(techBackground, techSymbols);
  }
  
  function createTechSymbol(container, symbols) {
    const symbol = document.createElement('div');
    symbol.className = 'tech-symbol';
    symbol.textContent = symbols[Math.floor(Math.random() * symbols.length)];
    
    const size = Math.floor(Math.random() * 20) + 14;
    const left = Math.floor(Math.random() * 100);
    const top = Math.floor(Math.random() * 100);
    const duration = Math.floor(Math.random() * 20) + 20;
    const delay = Math.floor(Math.random() * 10);
    
    symbol.style.fontSize = `${size}px`;
    symbol.style.left = `${left}%`;
    symbol.style.top = `${top}%`;
    symbol.style.animationDuration = `${duration}s`;
    symbol.style.animationDelay = `${delay}s`;
    
    container.appendChild(symbol);
  }
});
</script>
</body>
</html>