  <!-- Debug Information --><!-- All Matches: --><!-- 
    Match ID: 25
    Date: 2024-10-17
    Time: 14:00:00
    Status: completed
    Teams: BLOCK B/C vs BLOCK D
    --><!-- 
    Match ID: 55
    Date: 2024-11-02
    Time: 14:00:00
    Status: completed
    Teams: BLOCK B/C vs BLOCK A
    --><!-- 
    Match ID: 71
    Date: 2024-11-16
    Time: 14:00:00
    Status: completed
    Teams: BLOCK B/C vs WHITE HOUSE
    --><!-- 
    Match ID: 44
    Date: 2024-11-27
    Time: 19:00:00
    Status: completed
    Teams: BLOCK F vs KAFUMBE
    --><!-- 
    Match ID: 52
    Date: 2024-10-30
    Time: 16:00:00
    Status: completed
    Teams: BLOCK F vs BLOCK G
    --><!-- 
    Match ID: 62
    Date: 2024-11-07
    Time: 16:00:00
    Status: completed
    Teams: BLOCK F vs BLOCK B/C
    --><!-- 
    Match ID: 75
    Date: 2024-11-17
    Time: 16:00:00
    Status: completed
    Teams: BLOCK F vs BLOCK D
    --><!-- 
    Match ID: 80
    Date: 2024-12-01
    Time: 19:00:00
    Status: completed
    Teams: BLOCK F vs CITY MALL
    --><!-- 
    Match ID: 81
    Date: 2024-12-06
    Time: 16:00:00
    Status: completed
    Teams: BLOCK F vs WHITE HOUSE
    --><!-- 
    Match ID: 84
    Date: 2024-12-12
    Time: 19:47:00
    Status: completed
    Teams: BLOCK F vs BLOCK G
    --><!-- 
    Match ID: 22
    Date: 2024-10-13
    Time: 04:00:00
    Status: completed
    Teams: BLOCK G vs WHITE HOUSE
    --><!-- 
    Match ID: 43
    Date: 2024-11-27
    Time: 16:00:00
    Status: completed
    Teams: BLOCK G vs BLOCK B/C
    --><!-- 
    Match ID: 45
    Date: 2024-10-24
    Time: 16:00:00
    Status: completed
    Teams: BLOCK G vs BLOCK A
    --><!-- 
    Match ID: 64
    Date: 2024-11-09
    Time: 16:00:00
    Status: completed
    Teams: BLOCK G vs KAFUMBE
    --><!-- 
    Match ID: 76
    Date: 2024-11-30
    Time: 16:00:00
    Status: completed
    Teams: BLOCK G vs BLOCK S
    --><!-- 
    Match ID: 82
    Date: 2024-12-06
    Time: 19:09:00
    Status: completed
    Teams: BLOCK G vs KAFUMBE
    --><!-- 
    Match ID: 18
    Date: 2024-10-12
    Time: 14:00:00
    Status: completed
    Teams: KAFUMBE vs BLOCK B/C
    --><!-- 
    Match ID: 54
    Date: 2024-10-31
    Time: 16:00:00
    Status: completed
    Teams: KAFUMBE vs WHITE HOUSE
    --><!-- 
    Match ID: 70
    Date: 2024-11-14
    Time: 16:00:00
    Status: completed
    Teams: KAFUMBE vs BLOCK A
    --><!-- 
    Match ID: 104
    Date: 2025-01-11
    Time: 17:00:00
    Status: completed
    Teams: KAFUMBE vs SCUSMO / SS PLAZA
    --><!-- 
    Match ID: 29
    Date: 2024-10-20
    Time: 14:00:00
    Status: completed
    Teams: WHITE HOUSE vs BLOCK A
    --><!-- 
    Match ID: 35
    Date: 2024-11-21
    Time: 16:00:00
    Status: completed
    Teams: WHITE HOUSE vs BLOCK D
    --><!-- 
    Match ID: 46
    Date: 2024-10-26
    Time: 14:00:00
    Status: completed
    Teams: WHITE HOUSE vs BLOCK F
    --><!-- 
    Match ID: 67
    Date: 2024-11-13
    Time: 14:00:00
    Status: completed
    Teams: WHITE HOUSE vs BLOCK T,U,V
    --><!-- 
    Match ID: 83
    Date: 2024-12-12
    Time: 16:46:00
    Status: completed
    Teams: WHITE HOUSE vs KAFUMBE
    --><!-- 
    Match ID: 19
    Date: 2024-10-12
    Time: 16:00:00
    Status: completed
    Teams: BLOCK D vs BLOCK T,U,V
    --><!-- 
    Match ID: 47
    Date: 2024-10-26
    Time: 16:00:00
    Status: completed
    Teams: BLOCK D vs KAFUMBE
    --><!-- 
    Match ID: 60
    Date: 2024-11-06
    Time: 16:00:00
    Status: completed
    Teams: BLOCK D vs BLOCK G
    --><!-- 
    Match ID: 24
    Date: 2024-10-16
    Time: 16:00:00
    Status: completed
    Teams: BLOCK A vs BLOCK F
    --><!-- 
    Match ID: 37
    Date: 2024-11-23
    Time: 14:00:00
    Status: completed
    Teams: BLOCK A vs BLOCK T,U,V
    --><!-- 
    Match ID: 66
    Date: 2024-11-10
    Time: 16:00:00
    Status: completed
    Teams: BLOCK A vs BLOCK D
    --><!-- 
    Match ID: 28
    Date: 2024-10-19
    Time: 16:00:00
    Status: completed
    Teams: BLOCK T,U,V vs KAFUMBE
    --><!-- 
    Match ID: 33
    Date: 2024-11-20
    Time: 16:00:00
    Status: completed
    Teams: BLOCK T,U,V vs BLOCK G
    --><!-- 
    Match ID: 36
    Date: 2024-10-23
    Time: 16:00:00
    Status: completed
    Teams: BLOCK T,U,V vs BLOCK B/C
    --><!-- 
    Match ID: 58
    Date: 2024-11-03
    Time: 16:00:00
    Status: completed
    Teams: BLOCK T,U,V vs BLOCK F
    --><!-- 
    Match ID: 26
    Date: 2024-10-17
    Time: 16:00:00
    Status: completed
    Teams: CHAINS OF LIBERTY vs CITY MALL
    --><!-- 
    Match ID: 38
    Date: 2024-10-24
    Time: 14:00:00
    Status: completed
    Teams: CHAINS OF LIBERTY vs HAM TOWERS
    --><!-- 
    Match ID: 42
    Date: 2024-11-27
    Time: 14:00:00
    Status: completed
    Teams: CHAINS OF LIBERTY vs BLOCK S
    --><!-- 
    Match ID: 49
    Date: 2024-10-27
    Time: 14:00:00
    Status: completed
    Teams: CHAINS OF LIBERTY vs BYA ALLAH
    --><!-- 
    Match ID: 63
    Date: 2024-11-09
    Time: 14:00:00
    Status: completed
    Teams: CHAINS OF LIBERTY vs BLOCK E/H
    --><!-- 
    Match ID: 78
    Date: 2024-11-30
    Time: 19:00:00
    Status: completed
    Teams: CHAINS OF LIBERTY vs KAFUMBE
    --><!-- 
    Match ID: 30
    Date: 2024-10-20
    Time: 16:00:00
    Status: completed
    Teams: BLOCK X vs BLOCK S
    --><!-- 
    Match ID: 31
    Date: 2024-11-20
    Time: 14:00:00
    Status: completed
    Teams: BLOCK X vs HAM TOWERS
    --><!-- 
    Match ID: 53
    Date: 2024-10-31
    Time: 14:00:00
    Status: completed
    Teams: BLOCK X vs BLOCK E/H
    --><!-- 
    Match ID: 61
    Date: 2024-11-07
    Time: 14:00:00
    Status: completed
    Teams: BLOCK X vs CHAINS OF LIBERTY
    --><!-- 
    Match ID: 79
    Date: 2024-12-01
    Time: 16:00:00
    Status: completed
    Teams: BLOCK X vs WHITE HOUSE
    --><!-- 
    Match ID: 20
    Date: 2024-10-12
    Time: 07:00:00
    Status: completed
    Teams: BLOCK S vs BLOCK E/H
    --><!-- 
    Match ID: 56
    Date: 2024-11-02
    Time: 16:00:00
    Status: completed
    Teams: BLOCK S vs BYA ALLAH
    --><!-- 
    Match ID: 73
    Date: 2024-11-16
    Time: 16:00:00
    Status: completed
    Teams: BLOCK S vs CITY MALL
    --><!-- 
    Match ID: 40
    Date: 2024-11-24
    Time: 14:00:00
    Status: completed
    Teams: CITY MALL vs BLOCK X
    --><!-- 
    Match ID: 68
    Date: 2024-11-13
    Time: 16:00:00
    Status: completed
    Teams: CITY MALL vs SIMBALAND
    --><!-- 
    Match ID: 27
    Date: 2024-10-19
    Time: 14:00:00
    Status: completed
    Teams: BLOCK E/H vs SIMBALAND
    --><!-- 
    Match ID: 57
    Date: 2024-11-03
    Time: 14:00:00
    Status: completed
    Teams: BLOCK E/H vs CITY MALL
    --><!-- 
    Match ID: 74
    Date: 2024-11-17
    Time: 14:00:00
    Status: completed
    Teams: BLOCK E/H vs BYA ALLAH
    --><!-- 
    Match ID: 32
    Date: 2024-10-23
    Time: 14:00:00
    Status: completed
    Teams: BYA ALLAH vs CITY MALL
    --><!-- 
    Match ID: 41
    Date: 2024-11-24
    Time: 16:00:00
    Status: completed
    Teams: BYA ALLAH vs SIMBALAND
    --><!-- 
    Match ID: 69
    Date: 2024-11-14
    Time: 14:00:00
    Status: completed
    Teams: BYA ALLAH vs BLOCK X
    --><!-- 
    Match ID: 21
    Date: 2024-10-13
    Time: 14:00:00
    Status: completed
    Teams: SIMBALAND vs BLOCK X
    --><!-- 
    Match ID: 34
    Date: 2024-11-21
    Time: 14:00:00
    Status: completed
    Teams: SIMBALAND vs CHAINS OF LIBERTY
    --><!-- 
    Match ID: 51
    Date: 2024-10-30
    Time: 14:00:00
    Status: completed
    Teams: SIMBALAND vs BLOCK S
    --><!-- 
    Match ID: 59
    Date: 2024-11-06
    Time: 14:00:00
    Status: completed
    Teams: SIMBALAND vs HAM TOWERS
    --><!-- 
    Match ID: 23
    Date: 2024-10-16
    Time: 14:00:00
    Status: completed
    Teams: HAM TOWERS vs BYA ALLAH
    --><!-- 
    Match ID: 39
    Date: 2024-11-23
    Time: 16:00:00
    Status: completed
    Teams: HAM TOWERS vs BLOCK E/H
    --><!-- 
    Match ID: 50
    Date: 2024-10-27
    Time: 16:00:00
    Status: completed
    Teams: HAM TOWERS vs CITY MALL
    --><!-- 
    Match ID: 65
    Date: 2024-11-10
    Time: 14:00:00
    Status: completed
    Teams: HAM TOWERS vs BLOCK S
    --><!-- 
    Match ID: 86
    Date: 2024-12-15
    Time: 16:00:00
    Status: completed
    Teams: UGANDA CUBS vs TANZANIA
    --><!-- 
    Match ID: 90
    Date: 2024-12-21
    Time: 16:00:00
    Status: completed
    Teams: UGANDA CUBS vs KENYA
    --><!-- 
    Match ID: 92
    Date: 2024-12-24
    Time: 16:00:00
    Status: completed
    Teams: UGANDA CUBS vs SOMALIA
    --><!-- 
    Match ID: 87
    Date: 2024-12-18
    Time: 13:00:00
    Status: completed
    Teams: TANZANIA vs KENYA
    --><!-- 
    Match ID: 91
    Date: 2024-12-24
    Time: 13:00:00
    Status: completed
    Teams: TANZANIA vs SOUTH SUDAN
    --><!-- 
    Match ID: 95
    Date: 2024-12-27
    Time: 15:30:00
    Status: completed
    Teams: TANZANIA vs UGANDA CUBS
    --><!-- 
    Match ID: 85
    Date: 2024-12-15
    Time: 13:00:00
    Status: completed
    Teams: SOMALIA vs SOUTH SUDAN
    --><!-- 
    Match ID: 89
    Date: 2024-12-21
    Time: 13:00:00
    Status: completed
    Teams: SOMALIA vs SUDAN
    --><!-- 
    Match ID: 88
    Date: 2024-12-18
    Time: 16:00:00
    Status: completed
    Teams: SOUTH SUDAN vs SUDAN
    --><!-- 
    Match ID: 94
    Date: 2024-12-27
    Time: 12:30:00
    Status: completed
    Teams: SOUTH SUDAN vs SOMALIA
    --><!-- 
    Match ID: 93
    Date: 2024-12-29
    Time: 18:00:00
    Status: completed
    Teams: UGANDA CRANES vs BURUNDI
    --><!-- 
    Match ID: 96
    Date: 2024-12-26
    Time: 18:00:00
    Status: completed
    Teams: BURUNDI vs UGANDA CRANES
    --><!-- 
    Match ID: 97
    Date: 2025-01-02
    Time: 19:00:00
    Status: completed
    Teams: EXPRESS FC vs BRIGHT STARS
    --><!-- 
    Match ID: 99
    Date: 2025-01-05
    Time: 18:00:00
    Status: completed
    Teams: WAKISO GIANTS FC vs KITARA FC
    --><!-- 
    Match ID: 100
    Date: 2025-01-07
    Time: 19:00:00
    Status: completed
    Teams: URA FC vs POLICE FC
    --><!-- 
    Match ID: 105
    Date: 2025-01-12
    Time: 13:00:00
    Status: completed
    Teams: I.S.B TOWERS vs MUKWANO/NGEYE TRANSPORTERS
    --><!-- 
    Match ID: 101
    Date: 2025-01-11
    Time: 14:00:00
    Status: completed
    Teams: JESCO BEAUTY CENTER vs PENTAGON PLAZA
    --><!-- 
    Match ID: 106
    Date: 2025-01-16
    Time: 16:00:00
    Status: completed
    Teams: NAMIBIA vs UGANDA
    --><!-- 
    Match ID: 109
    Date: 2025-01-19
    Time: 16:00:00
    Status: scheduled
    Teams: UGANDA vs NAMIBIA
    --><!-- Live Matches Query: 
    SELECT m.*, 
           ht.name as home_team, 
           at.name as away_team,
           ht.logo_url as home_logo,
           at.logo_url as away_logo,
           (
               SELECT COUNT(*) 
               FROM match_goals 
               WHERE match_id = m.id 
               AND team_id = m.home_team_id
           ) as home_score,
           (
               SELECT COUNT(*) 
               FROM match_goals 
               WHERE match_id = m.id 
               AND team_id = m.away_team_id
           ) as away_score
    FROM matches m
    LEFT JOIN teams ht ON m.home_team_id = ht.id
    LEFT JOIN teams at ON m.away_team_id = at.id
    WHERE m.status IN ('ongoing', 'half-time', 'second-half')
    ORDER BY m.match_date DESC, m.match_time DESC
    LIMIT 1
 --><!-- Number of live matches: 0 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamz Stadium - Nakivubo War Memorial Grounds</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <link rel="icon" type="image/jpeg" href="https://www.independent.co.ug/wp-content/uploads/2024/07/Nakivubo-2.jpg">
    <style>
        :root {
            --primary-color: #f39c12;    /* Yellow for "Hamz" */
            --background-color: #1a1a1a;  /* Dark background */
            --text-color: #ffffff;        /* White text */
            --navbar-height: 70px;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: 'Roboto', sans-serif;
        }

        .navbar {
            background: #000000;
            height: auto;
            min-height: var(--navbar-height);
            padding: 0.5rem 0;
        }

        .navbar-brand, .nav-link {
            color: var(--text-color) !important;
            transition: color 0.3s ease;
        }

        .navbar-brand:hover, .nav-link:hover {
            color: rgba(255, 255, 255, 0.8) !important;
            transform: translateY(-2px);
        }

        .navbar-toggler {
            border-color: var(--text-color);
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        @media (max-width: 991.98px) {
            .navbar-nav {
                background: #000000;
                padding: 1rem;
                border-radius: 10px;
                margin-top: 10px;
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
        }

        .logo-img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 2px solid var(--text-color);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
        }

        .logo-img:hover {
            transform: scale(1.05);
        }

        .logo-text {
            color: var(--text-color);
        }

        .logo-text h1 {
            font-size: 1.25rem;
            font-weight: bold;
            letter-spacing: 0.05em;
            margin-bottom: 0;
            color: var(--text-color);
        }

        .logo-text h1 span {
            color: var(--primary-color);  /* Only "Hamz" in yellow */
        }

        .logo-text p {
            font-size: 0.75rem;
            opacity: 0.9;
            margin-bottom: 0;
            color: var(--text-color);
        }

        .nav-link {
            position: relative;
            padding: 0.5rem 1rem;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            background-color: var(--text-color);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* Active nav item */
        .nav-item.active .nav-link {
            color: var(--text-color) !important;
            font-weight: 600;
        }

        .nav-link i {
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }

        .nav-link:hover i {
            transform: translateY(-2px);
        }

        @media (max-width: 991.98px) {
            .nav-link {
                display: flex;
                align-items: center;
                padding: 0.75rem 1rem;
            }
            
            .nav-link i {
                width: 24px;
                text-align: center;
            }
        }

        /* Updated Navbar Styles */
        .navbar {
            background: #000000;
            height: auto;
            min-height: var(--navbar-height);
            padding: 0.5rem 0;
        }

        /* Logo Styles */
        .logo-img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 2px solid var(--text-color);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        .logo-text h1 {
            font-size: 1.25rem;
            margin-bottom: 0;
        }

        .logo-text p {
            font-size: 0.75rem;
            margin-bottom: 0;
        }

        /* Mobile Menu Styles */
        @media (max-width: 991.98px) {
            .navbar-collapse {
                position: fixed;
                top: var(--navbar-height);
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.95);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                padding: 1rem;
                max-height: calc(100vh - var(--navbar-height));
                overflow-y: auto;
                transition: all 0.3s ease;
            }

            .navbar-nav {
                padding: 0.5rem;
                gap: 0.5rem;
            }

            .nav-item {
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            .nav-item:last-child {
                border-bottom: none;
            }

            .nav-link {
                padding: 0.75rem 1rem;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 12px;
            }

            .nav-link i {
                width: 20px;
                font-size: 1.1rem;
                text-align: center;
            }

            /* Improved Toggle Button */
            .navbar-toggler {
                padding: 0.4rem;
                border: none;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 8px;
            }

            .navbar-toggler:focus {
                box-shadow: none;
                outline: none;
            }

            /* Logo Container */
            .navbar-brand {
                max-width: calc(100% - 60px);
            }

            .logo-text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* Animation for menu items */
            .nav-item {
                opacity: 0;
                transform: translateX(-10px);
                transition: all 0.3s ease;
            }

            .navbar-collapse.show .nav-item {
                opacity: 1;
                transform: translateX(0);
            }

            /* Stagger animation delay for menu items */
            .nav-item:nth-child(1) { transition-delay: 0.1s; }
            .nav-item:nth-child(2) { transition-delay: 0.15s; }
            .nav-item:nth-child(3) { transition-delay: 0.2s; }
            .nav-item:nth-child(4) { transition-delay: 0.25s; }
            .nav-item:nth-child(5) { transition-delay: 0.3s; }
            .nav-item:nth-child(6) { transition-delay: 0.35s; }
            .nav-item:nth-child(7) { transition-delay: 0.4s; }
            .nav-item:nth-child(8) { transition-delay: 0.45s; }
            .nav-item:nth-child(9) { transition-delay: 0.5s; }
        }

        /* Small Mobile Devices */
        @media (max-width: 375px) {
            .logo-img {
                width: 40px;
                height: 40px;
            }

            .logo-text h1 {
                font-size: 1.1rem;
            }

            .logo-text p {
                font-size: 0.7rem;
            }
        }

        /* Add smooth scrolling */
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="index.php">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735151309/eudghdikekw619gp99rp.webp" alt="Stadium Logo" class="logo-img me-3">
                <div class="logo-text">
                    <h1><span>Hamz</span> Stadium</h1>
                    <p>Nakivubo War Memorial Grounds</p>
                </div>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">
                            <i class="fas fa-home me-2"></i>Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="tournaments.php">
                            <i class="fas fa-trophy me-2"></i>Tournaments
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="matches.php">
                            <i class="fas fa-futbol me-2"></i>Matches
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="teams.php">
                            <i class="fas fa-users me-2"></i>Teams
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="standings.php">
                            <i class="fas fa-list-ol me-2"></i>Standings
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="premier_league.php">
                            <i class="fas fa-star me-2"></i>Premier League
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="events.php">
                            <i class="fas fa-calendar-alt me-2"></i>Events
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="gallery.php">
                            <i class="fas fa-images me-2"></i>Gallery
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.php">
                            <i class="fas fa-newspaper me-2"></i>News
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div style="height: var(--navbar-height);"></div> <!-- Spacer for fixed navbar -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle mobile menu
        const navbarToggler = document.querySelector('.navbar-toggler');
        const navbarCollapse = document.querySelector('.navbar-collapse');
        const navLinks = document.querySelectorAll('.nav-link');

        // Close menu when clicking outside
        document.addEventListener('click', function(e) {
            if (!navbarCollapse.contains(e.target) && !navbarToggler.contains(e.target)) {
                navbarCollapse.classList.remove('show');
            }
        });

        // Close menu when clicking a link
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                navbarCollapse.classList.remove('show');
            });
        });

        // Add active class to current page
        const currentPage = window.location.pathname.split('/').pop() || 'index.php';
        navLinks.forEach(link => {
            if (link.getAttribute('href') === currentPage) {
                link.parentElement.classList.add('active');
            }
        });
    });
    </script>
<main class="main-content">
    <!-- Image Slider -->
    <div class="slider-container">
                    <div class="slider-image active" data-index="0">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150657/hamz/td3t2zcasxtkwijkpku8.jpg" alt="Slide 1">
            </div>
                    <div class="slider-image " data-index="1">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150649/hamz/fntjgqwn2cmq52dv4ikh.jpg" alt="Slide 2">
            </div>
                    <div class="slider-image " data-index="2">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150645/hamz/phy3ycygprhc9vnf6ukz.jpg" alt="Slide 3">
            </div>
                    <div class="slider-image " data-index="3">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150640/hamz/jrgxkt1llqdzpzgoh2bl.jpg" alt="Slide 4">
            </div>
                    <div class="slider-image " data-index="4">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150633/hamz/w6llkc7onavtr57polr9.jpg" alt="Slide 5">
            </div>
                    <div class="slider-image " data-index="5">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150628/hamz/bx1ebhbxiqmrya64tf4h.jpg" alt="Slide 6">
            </div>
                    <div class="slider-image " data-index="6">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150621/hamz/b2wmh8xi3pbgwuqfqouo.jpg" alt="Slide 7">
            </div>
                    <div class="slider-image " data-index="7">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150615/hamz/twsbhybp9qnatejb6vbx.jpg" alt="Slide 8">
            </div>
                    <div class="slider-image " data-index="8">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150605/hamz/dyfond4ajep5gpczwhln.jpg" alt="Slide 9">
            </div>
                    <div class="slider-image " data-index="9">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150605/hamz/dyfond4ajep5gpczwhln.jpg" alt="Slide 10">
            </div>
                    <div class="slider-image " data-index="10">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150603/hamz/ehktpzrvdcko1cticbm0.jpg" alt="Slide 11">
            </div>
                    <div class="slider-image " data-index="11">
                <img src="http://res.cloudinary.com/dkvgxdhqu/image/upload/v1735150595/hamz/udypmvogkgyrnrwbkym4.png" alt="Slide 12">
            </div>
                <button class="slider-nav prev">&lt;</button>
        <button class="slider-nav next">&gt;</button>
    </div>

    <div class="container">
        <!-- Matches Section -->
        <div class="row mt-4">
            <!-- Live Match Card -->
            
            <!-- Next Match Card -->
                            <div class="col-lg-6 mb-4">
                    <div class="match-card next-match-card">
                        <div class="card-header">
                            <h3 class="text-center mb-0">
                                <span class="upcoming-pulse me-2">●</span>
                                Next Match
                            </h3>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-4 text-center">
                                    <div class="team-icon">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                    <h4 class="team-name">UGANDA</h4>
                                </div>
                                <div class="col-md-4 text-center">
                                    <div class="match-details">
                                        <div class="match-date">
                                            Sunday, January 19                                        </div>
                                        <div class="match-time">
                                            4:00 PM                                        </div>
                                        <div class="vs-circle">
                                            <span>VS</span>
                                        </div>
                                        <div class="countdown" data-match-time="2025-01-19 16:00:00"></div>
                                    </div>
                                </div>
                                <div class="col-md-4 text-center">
                                    <div class="team-icon">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                    <h4 class="team-name">NAMIBIA</h4>
                                </div>
                            </div>
                            <div class="text-center mt-4">
                                <a href="https://hamztickets.com" class="btn-book-ticket">
                                    Book Tickets <i class="fas fa-ticket-alt ms-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                    </div>

        <!-- Highlights Section -->
        <div class="col-lg-12 mb-4">
            <div class="card highlights-card">
                <div class="card-header">
                    <h3 class="text-center mb-0">
                        <i class="fas fa-play-circle me-2"></i>Match Highlights
                    </h3>
                </div>
                <div class="card-body">
                    
                    <div class="highlights-grid">
                                                    <div class="highlight-item" data-type="video">
                                                                    <div class="highlight-video" 
                                         data-video-url="https://youtu.be/VAOC6eQrme8">
                                        <img src="uploads/thumbnails/676febb9cee18.jpeg" 
                                             alt=" TANZANIA vs UGANDA CUBS - CECAFA FINALS"
                                             class="highlight-thumbnail"
                                             loading="lazy">
                                        <div class="play-overlay">
                                            <i class="fas fa-play"></i>
                                        </div>
                                    </div>
                                                                
                                <div class="highlight-info">
                                    <div class="highlight-meta">
                                        <span class="highlight-date">
                                            <i class="far fa-calendar-alt"></i>
                                            Dec 27, 2024                                        </span>
                                        <span class="highlight-time">
                                            <i class="far fa-clock"></i>
                                            15:30                                        </span>
                                    </div>
                                    <h4 class="highlight-title">
                                         TANZANIA vs UGANDA CUBS - CECAFA FINALS                                    </h4>
                                    <p class="highlight-teams">
                                        TANZANIA vs 
                                        UGANDA CUBS                                    </p>
                                                                            <div class="highlight-description">
                                            History makers! Uganda Cubs crowned champions of the Total Energies U-17 Africa Cup of Nations CECAFA Q 2024. A moment of pride for Uganda!                                        </div>
                                                                    </div>
                            </div>
                                                    <div class="highlight-item" data-type="video">
                                                                    <div class="highlight-video" 
                                         data-video-url="https://youtu.be/NvhUTYw2qps">
                                        <img src="uploads/thumbnails/676fee1734803.jpeg" 
                                             alt="BURUNDI vs UGANDA CRANES - CHAN QUALIFIERS 1ST LEG"
                                             class="highlight-thumbnail"
                                             loading="lazy">
                                        <div class="play-overlay">
                                            <i class="fas fa-play"></i>
                                        </div>
                                    </div>
                                                                
                                <div class="highlight-info">
                                    <div class="highlight-meta">
                                        <span class="highlight-date">
                                            <i class="far fa-calendar-alt"></i>
                                            Dec 26, 2024                                        </span>
                                        <span class="highlight-time">
                                            <i class="far fa-clock"></i>
                                            18:00                                        </span>
                                    </div>
                                    <h4 class="highlight-title">
                                        BURUNDI vs UGANDA CRANES - CHAN QUALIFIERS 1ST LEG                                    </h4>
                                    <p class="highlight-teams">
                                        BURUNDI vs 
                                        UGANDA CRANES                                    </p>
                                                                            <div class="highlight-description">
                                            Victory in the Bag! 🏆 Uganda triumphs over Burundi with a stunning 1-0 win in the CHAN 2024 Qualifiers! 💪🇺🇬<br />
#UgandaCranes #CHAN2024 #Victory #UgandaVsBurundi #Hamzstadium                                        </div>
                                                                    </div>
                            </div>
                                                    <div class="highlight-item" data-type="video">
                                                                    <div class="highlight-video" 
                                         data-video-url="https://youtu.be/NvhUTYw2qps">
                                        <img src="uploads/thumbnails/6776b9803f285.jpeg" 
                                             alt="BURUNDI vs UGANDA CRANES - CHAN QUALIFIERS 1ST LEG"
                                             class="highlight-thumbnail"
                                             loading="lazy">
                                        <div class="play-overlay">
                                            <i class="fas fa-play"></i>
                                        </div>
                                    </div>
                                                                
                                <div class="highlight-info">
                                    <div class="highlight-meta">
                                        <span class="highlight-date">
                                            <i class="far fa-calendar-alt"></i>
                                            Dec 26, 2024                                        </span>
                                        <span class="highlight-time">
                                            <i class="far fa-clock"></i>
                                            18:00                                        </span>
                                    </div>
                                    <h4 class="highlight-title">
                                        BURUNDI vs UGANDA CRANES - CHAN QUALIFIERS 1ST LEG                                    </h4>
                                    <p class="highlight-teams">
                                        BURUNDI vs 
                                        UGANDA CRANES                                    </p>
                                                                            <div class="highlight-description">
                                            Victory in the Bag! 🏆 Uganda triumphs over Burundi with a stunning 1-0 win in the CHAN 2024 Qualifiers! 💪🇺🇬<br />
#UgandaCranes #CHAN2024 #Victory #UgandaVsBurundi #Hamzstadium                                        </div>
                                                                    </div>
                            </div>
                                                    <div class="highlight-item" data-type="video">
                                                                    <div class="highlight-video" 
                                         data-video-url="https://youtu.be/ofGt2HQZSNg">
                                        <img src="uploads/thumbnails/6763dff4b2a3f.jpeg" 
                                             alt="CAFU 17 SOUTH SUDAN vs SUDAN"
                                             class="highlight-thumbnail"
                                             loading="lazy">
                                        <div class="play-overlay">
                                            <i class="fas fa-play"></i>
                                        </div>
                                    </div>
                                                                
                                <div class="highlight-info">
                                    <div class="highlight-meta">
                                        <span class="highlight-date">
                                            <i class="far fa-calendar-alt"></i>
                                            Dec 18, 2024                                        </span>
                                        <span class="highlight-time">
                                            <i class="far fa-clock"></i>
                                            16:00                                        </span>
                                    </div>
                                    <h4 class="highlight-title">
                                        CAFU 17 SOUTH SUDAN vs SUDAN                                    </h4>
                                    <p class="highlight-teams">
                                        SOUTH SUDAN vs 
                                        SUDAN                                    </p>
                                                                    </div>
                            </div>
                                                    <div class="highlight-item" data-type="video">
                                                                    <div class="highlight-video" 
                                         data-video-url="https://youtu.be/MOhkffAxccg">
                                        <img src="uploads/thumbnails/6763e0ee34580.jpeg" 
                                             alt="TANZANIA  vs KENYA CAF U 17"
                                             class="highlight-thumbnail"
                                             loading="lazy">
                                        <div class="play-overlay">
                                            <i class="fas fa-play"></i>
                                        </div>
                                    </div>
                                                                
                                <div class="highlight-info">
                                    <div class="highlight-meta">
                                        <span class="highlight-date">
                                            <i class="far fa-calendar-alt"></i>
                                            Dec 18, 2024                                        </span>
                                        <span class="highlight-time">
                                            <i class="far fa-clock"></i>
                                            13:00                                        </span>
                                    </div>
                                    <h4 class="highlight-title">
                                        TANZANIA  vs KENYA CAF U 17                                    </h4>
                                    <p class="highlight-teams">
                                        TANZANIA vs 
                                        KENYA                                    </p>
                                                                    </div>
                            </div>
                                                    <div class="highlight-item" data-type="video">
                                                                    <div class="highlight-video" 
                                         data-video-url="https://youtu.be/BsuwWW23rWA">
                                        <img src="uploads/thumbnails/67618e5d69276.jpeg" 
                                             alt="It’s a thrilling draw! 🇺🇬 Uganda and 🇹🇿 Tanzania battle it out for a 1-1 finish"
                                             class="highlight-thumbnail"
                                             loading="lazy">
                                        <div class="play-overlay">
                                            <i class="fas fa-play"></i>
                                        </div>
                                    </div>
                                                                
                                <div class="highlight-info">
                                    <div class="highlight-meta">
                                        <span class="highlight-date">
                                            <i class="far fa-calendar-alt"></i>
                                            Dec 15, 2024                                        </span>
                                        <span class="highlight-time">
                                            <i class="far fa-clock"></i>
                                            16:00                                        </span>
                                    </div>
                                    <h4 class="highlight-title">
                                        It’s a thrilling draw! 🇺🇬 Uganda and 🇹🇿 Tanzania battle it out for a 1-1 finish                                    </h4>
                                    <p class="highlight-teams">
                                        UGANDA CUBS vs 
                                        TANZANIA                                    </p>
                                                                            <div class="highlight-description">
                                            ⏱️ FULL TIME! ⏱️<br />
It’s a thrilling draw! 🇺🇬 Uganda and 🇹🇿 Tanzania battle it out for a 1-1 finish in the CAF U-17 Africa Cup of Nations at Hamz Stadium. ⚽<br />
<br />
🔥 Both teams showed heart, skill, and determination—what a match! 🏟️<br />
<br />
📢 Stay updated on upcoming games and events at www.hamzstadium.com.<br />
<br />
#HamzStadium #FullTime #Uganda #Tanzania #CAFU17 #CECAFA #FootballThrills #GameOn                                        </div>
                                                                    </div>
                            </div>
                                            </div>
                </div>
            </div>
        </div>

        <!-- About Us Section -->
        <section class="about-us-section py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-5xl font-bold mb-12 text-center text-primary">About Hamz Stadium</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div class="about-item">
                        <h3 class="text-3xl font-semibold text-gray-800 mb-4">Modern Multi-Purpose Venue</h3>
                        <p class="text-lg text-gray-600 leading-relaxed">
                            Experience world-class events at our state-of-the-art facility. Hamz Stadium has been meticulously renovated to meet international standards, setting a new benchmark for sports venues in Uganda.
                        </p>
                    </div>
                    <div class="about-item">
                        <h3 class="text-3xl font-semibold text-gray-800 mb-4">Upcoming Major Events</h3>
                        <p class="text-lg text-gray-600 leading-relaxed">
                            Get ready for AFCON 2027 and CHAN 2024! Hamz Stadium is set to host these prestigious international tournaments, marking a new chapter in Uganda's sporting legacy.
                        </p>
                    </div>
                    <div class="about-item">
                        <h3 class="text-3xl font-semibold text-gray-800 mb-4">Rich History</h3>
                        <p class="text-lg text-gray-600 leading-relaxed">
                            From its roots as the home of SC Villa to now hosting URA FC and Express FC, Hamz Stadium continues to be the beating heart of Ugandan football, blending its storied past with an exciting future.
                        </p>
                    </div>
                    <div class="about-item">
                        <h3 class="text-3xl font-semibold text-gray-800 mb-4">Expanded Capacity</h3>
                        <p class="text-lg text-gray-600 leading-relaxed">
                            With an impressive capacity increase from 21,000 to 35,000 seats, Hamz Stadium now offers an unparalleled atmosphere for fans. Officially opened on April 25, 2024, it stands ready to create unforgettable memories.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Upcoming Events Section -->
        <section class="py-5" style="background-color: #fff8e1;">
            <div class="container">
                <h2 class="text-center mb-5" style="color: #f39c12;">Upcoming Events</h2>
                
                
                <div class="row">
                                        
                                            <div class="col-12 text-center py-5">
                            <p class="text-muted">No upcoming events at the moment.</p>
                        </div>
                                    </div>
                
                <div class="text-center mt-4">
                    <a href="events.php" class="btn btn-outline-custom">
                        View All Events <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- Update the announcements section in index.php -->
        <section class="announcements-section py-5">
            <div class="container">
                <div class="section-header mb-4">
                    <h2 class="text-center">
                        <i class="fas fa-bullhorn me-2"></i>
                        Latest Announcements
                    </h2>
                </div>

                <div class="announcements-grid">
                                            <div class="announcement-card">
                                                            <div class="announcement-image-container">
                                    <img src="uploads/announcements/6763dc99bbd0a.jpeg" 
                                         alt="DECEMBER PROGRAMME"
                                         class="announcement-full-image"
                                         loading="lazy"
                                         onclick="openImageModal(this.src)">
                                </div>
                                                        <div class="announcement-content">
                                <h3 class="announcement-title">
                                    DECEMBER PROGRAMME                                </h3>
                                <div class="announcement-text">
                                    DECEMBER PROGRAMME                                </div>
                                <div class="announcement-meta">
                                    <span class="announcement-date">
                                        <i class="far fa-calendar-alt me-1"></i>
                                        Dec 19, 2024                                    </span>
                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </section>

        <!-- Add Image Modal -->
        <div id="imageModal" class="image-modal">
            <span class="image-modal-close">&times;</span>
            <img id="modalImage" class="image-modal-content">
        </div>
    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Slider functionality
    const sliderImages = document.querySelectorAll('.slider-image');
    const prevBtn = document.querySelector('.slider-nav.prev');
    const nextBtn = document.querySelector('.slider-nav.next');
    let currentIndex = 0;

    function showSlide(index) {
        sliderImages.forEach(img => img.classList.remove('active'));
        sliderImages[index].classList.add('active');
    }

    function nextSlide() {
        currentIndex = (currentIndex + 1) % sliderImages.length;
        showSlide(currentIndex);
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + sliderImages.length) % sliderImages.length;
        showSlide(currentIndex);
    }

    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);

    // Auto-slide every 5 seconds
    setInterval(nextSlide, 5000);

    // Countdown functionality
    const countdownElement = document.querySelector('.countdown');
    if (countdownElement) {
        const matchTime = new Date(countdownElement.dataset.matchTime).getTime();

        setInterval(() => {
            const now = new Date().getTime();
            const distance = matchTime - now;

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000));

            countdownElement.innerHTML = `
                <div class="timer-item"><span>${days}</span>DAYS</div>
                <div class="timer-item"><span>${hours}</span>HOURS</div>
                <div class="timer-item"><span>${minutes}</span>MINUTES</div>
                <div class="timer-item"><span>${seconds}</span>SECONDS</div>
            `;
        }, 1000);
    }
});
</script>

<script>
// Add this to your existing JavaScript
function updateCountdown() {
    const countdownElement = document.querySelector('.countdown');
    if (!countdownElement) return;

    const matchTime = new Date(countdownElement.dataset.matchTime).getTime();

    function update() {
        const now = new Date().getTime();
        const distance = matchTime - now;

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000));

        countdownElement.innerHTML = `
            <div class="countdown-item">
                <div class="countdown-value">${days}</div>
                <div class="countdown-label">Days</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-value">${hours}</div>
                <div class="countdown-label">Hours</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-value">${minutes}</div>
                <div class="countdown-label">Minutes</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-value">${seconds}</div>
                <div class="countdown-label">Seconds</div>
            </div>
        `;
    }

    // Update immediately and then every second
    update();
    setInterval(update, 1000);
}

// Call the function when the document is ready
document.addEventListener('DOMContentLoaded', updateCountdown);
</script>

<!-- Add this modal HTML at the bottom of your page, before the closing body tag -->
<div class="video-modal" id="videoModal">
    <div class="video-modal-content">
        <button class="video-modal-close" aria-label="Close video">&times;</button>
        <div id="videoContainer"></div>
    </div>
</div>

<!-- Update the JavaScript for handling videos -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('videoModal');
    const videoContainer = document.getElementById('videoContainer');
    let currentVideo = null;

    // Function to safely load YouTube API
    function loadYouTubeAPI() {
        if (!window.YT) {
            const tag = document.createElement('script');
            tag.src = 'https://www.youtube.com/iframe_api';
            const firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        }
    }

    // Load YouTube API
    loadYouTubeAPI();

    // Function to get YouTube video ID
    function getYouTubeId(url) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
        const match = url.match(regExp);
        return (match && match[2].length === 11) ? match[2] : null;
    }

    // Function to create YouTube player
    function createYouTubePlayer(videoId) {
        return new Promise((resolve) => {
            if (window.YT && window.YT.Player) {
                resolve(new YT.Player('videoContainer', {
                    videoId: videoId,
                    playerVars: {
                        autoplay: 1,
                        modestbranding: 1,
                        rel: 0
                    },
                    events: {
                        onReady: (event) => event.target.playVideo()
                    }
                }));
            } else {
                window.onYouTubeIframeAPIReady = () => {
                    resolve(new YT.Player('videoContainer', {
                        videoId: videoId,
                        playerVars: {
                            autoplay: 1,
                            modestbranding: 1,
                            rel: 0
                        },
                        events: {
                            onReady: (event) => event.target.playVideo()
                        }
                    }));
                };
            }
        });
    }

    // Handle video clicks
    document.querySelectorAll('.highlight-video').forEach(video => {
        video.addEventListener('click', async function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const videoUrl = this.dataset.videoUrl;
            videoContainer.innerHTML = ''; // Clear previous content

            // Show loading indicator
            modal.style.display = 'flex';
            videoContainer.innerHTML = `
                <div class="video-loading">
                    <div class="spinner"></div>
                    <span>Loading video...</span>
                </div>
            `;
            document.body.style.overflow = 'hidden';

            try {
                if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
                    const videoId = getYouTubeId(videoUrl);
                    if (videoId) {
                        currentVideo = await createYouTubePlayer(videoId);
                    }
                } else {
                    videoContainer.innerHTML = `
                        <video id="customVideo" width="100%" height="100%" controls playsinline>
                            <source src="${videoUrl}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    `;
                    currentVideo = document.getElementById('customVideo');
                    currentVideo.play().catch(error => {
                        console.log('Video autoplay failed:', error);
                    });
                }
            } catch (error) {
                console.error('Error loading video:', error);
                videoContainer.innerHTML = `
                    <div class="video-error">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>Error loading video. Please try again.</span>
                    </div>
                `;
            }
        });
    });

    // Close modal function
    function closeModal() {
        if (currentVideo) {
            if (typeof currentVideo.stopVideo === 'function') {
                currentVideo.stopVideo(); // YouTube video
            } else {
                currentVideo.pause(); // HTML5 video
            }
        }
        videoContainer.innerHTML = '';
        modal.style.display = 'none';
        document.body.style.overflow = '';
        currentVideo = null;
    }

    // Close modal when clicking the close button
    document.querySelector('.video-modal-close').addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeModal();
    });

    // Close modal when clicking outside
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });

    // Close modal on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.style.display === 'flex') {
            closeModal();
        }
    });
});
</script>

<!-- Add or update these styles -->
<style>
.main-content {
    padding-top: 0;
}

.slider-container {
    height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.slider-image {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
}

.slider-image.active {
    opacity: 1;
    transform: scale(1);
}

.slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #FFF;
    border: none;
    padding: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.slider-nav:hover {
    background: rgba(243, 156, 18, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev { left: 1rem; }
.slider-nav.next { right: 1rem; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.container {
    animation: fadeIn 1s ease-out;
}

/* Modern styling for live matches and next match sections */
.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card-header {
    background: linear-gradient(135deg, #f39c12, #f1c40f) !important;
    color: white;
    border-bottom: none;
    padding: 1.5rem;
}

.card-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.live-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.card-body {
    padding: 2rem;
}

.match-item, .next-match-details {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
}

.match-item:hover, .next-match-details:hover {
    background-color: #e9ecef;
}

.teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.vs {
    font-weight: bold;
    color: var(--secondary-color);
}

.match-time {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
}

.countdown {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
}

.timer-item {
    text-align: center;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 0.5rem;
    border-radius: 5px;
    min-width: 60px;
}

.timer-item span {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Modern styles for the About Us section */
.about-us-section {
    background-color: #f8f9fa;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.about-us-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%);
    z-index: 1;
}

.about-us-section .container {
    position: relative;
    z-index: 2;
}

.about-us-section h2 {
    background: linear-gradient(to right, #f39c12, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.about-item {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.about-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.about-item h3 {
    color: #f39c12;
    transition: color 0.3s ease;
}

.about-item:hover h3 {
    color: #e67e22;
}

.about-item p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a4a4a;
}

@media (max-width: 768px) {
    .about-us-section h2 {
        font-size: 2.5rem;
    }
    
    .about-item {
        margin-bottom: 2rem;
    }
}

.card {
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.badge {
    padding: 0.5em 1em;
}

.card-title {
    color: #333;
    font-weight: 600;
}

.text-yellow-600 {
    color: #d97706 !important;
}

.bg-yellow-500 {
    background-color: #f59e0b;
}

.btn-yellow {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

.btn-yellow:hover {
    background-color: #d97706;
    border-color: #d97706;
}

.btn-outline-yellow {
    color: #f59e0b;
    border-color: #f59e0b;
}

.btn-outline-yellow:hover {
    background-color: #f59e0b;
    color: white;
}

.live-matches {
    background-color: #f8f9fc;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.live-indicator {
    color: #f39c12 !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.live-match-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.card-header {
    background: #4e73df;
    color: white;
    padding: 1rem;
}

.live-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f39c12;
    border-radius: 50%;
    animation: pulseDot 1.5s infinite;
}

.team-name {
    font-weight: 600;
    margin: 0;
}

.score-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f39c12;
}

.score-divider {
    margin: 0 0.5rem;
    color: #858796;
}

.goals-section {
    background: #f8f9fc;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.goals-title {
    color: #f39c12;
    font-weight: 600;
}

.goals-timeline {
    position: relative;
}

.goal-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.goal-time {
    background: #f39c12;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 1rem;
    min-width: 45px;
    text-align: center;
}

.goal-details {
    flex: 1;
}

.scorer {
    font-weight: 600;
}

.assist {
    font-size: 0.9rem;
    color: #858796;
    margin-top: 0.25rem;
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(243, 156, 18, 0.15) !important;
}

.btn-book {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-book:hover {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    transform: translateY(-2px);
    color: white;
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
}

.btn-outline-custom {
    color: #f39c12;
    border: 2px solid #f39c12;
    padding: 10px 25px;
    border-radius: 5px;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-outline-custom:hover {
    background: #f39c12;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.2);
}

.list-group-item {
    margin-bottom: 5px;
    border-radius: 5px;
}

.badge {
    padding: 8px 12px;
    border-radius: 20px;
    color: white;
    font-weight: 500;
}

.card-title {
    font-weight: 600;
    font-size: 1.2rem;
}

.pricing-section {
    background-color: #fff8e1;
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
}

.next-match-card {
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.next-match-card .card-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.upcoming-pulse {
    color: #f39c12;
    animation: pulse 2s infinite;
}

.team-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.team-logo:hover {
    transform: scale(1.1);
}

.team-name {
    color: white;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.match-details {
    color: white;
    padding: 2rem 0;
}

.match-date {
    font-size: 1.2rem;
    color: #f39c12;
    margin-bottom: 0.5rem;
}

.match-time {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.vs-badge {
    display: inline-block;
    padding: 0.5rem 2rem;
    background: #f39c12;
    color: black;
    font-weight: bold;
    border-radius: 25px;
    margin: 1rem 0;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.countdown-item {
    background: rgba(243, 156, 18, 0.1);
    padding: 1rem;
    border-radius: 10px;
    min-width: 100px;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.countdown-value {
    font-size: 2rem;
    font-weight: bold;
    color: #f39c12;
}

.countdown-label {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
}

.btn-book-ticket {
    background: #f39c12;
    color: black;
    padding: 1rem 2.5rem;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none;
}

.btn-book-ticket:hover {
    background: #e67e22;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.match-card {
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-header {
    background: #111;
    padding: 1rem;
    border-bottom: 1px solid #222;
}

.card-header h3 {
    color: #fff;
    font-size: 1.2rem;
    margin: 0;
}

.live-pulse {
    color: #ff0000;
    animation: pulse 1.5s infinite;
}

.team-icon {
    font-size: 2.5rem;
    color: #f39c12;
    margin-bottom: 0.5rem;
}

.team-name {
    color: #fff;
    font-size: 1.1rem;
    margin: 0.5rem 0;
    font-weight: 500;
}

.score-container {
    background: #111;
    padding: 1rem;
    border-radius: 10px;
    margin: 0.5rem 0;
}

.score-display {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.5rem;
}

.score {
    color: #f39c12;
}

.score-divider {
    color: #666;
    margin: 0 0.5rem;
}

.match-time {
    color: #888;
    font-size: 1rem;
    margin: 0.5rem 0;
}

.status-badge {
    background: #f39c12;
    color: #000;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.goals-list {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #888;
}

.goal-item {
    margin: 0.3rem 0;
}

.goal-item i {
    color: #f39c12;
    margin-right: 0.3rem;
}

.btn-watch-live {
    display: inline-block;
    background: #ff0000;
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-watch-live:hover {
    background: #cc0000;
    color: #fff;
    transform: translateY(-2px);
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

@media (max-width: 768px) {
    .score-display {
        font-size: 2rem;
    }
    
    .team-icon {
        font-size: 2rem;
    }
    
    .team-name {
        font-size: 1rem;
    }
}

/* Add these new styles for the VS circle */
.vs-circle {
    width: 60px;
    height: 60px;
    background: rgba(243, 156, 18, 0.1);
    border: 2px solid #f39c12;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    position: relative;
    transition: transform 0.3s ease;
}

.vs-circle span {
    color: #f39c12;
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.vs-circle:hover {
    transform: scale(1.1);
    background: rgba(243, 156, 18, 0.2);
}

/* Update match details styles */
.match-details {
    padding: 1rem;
    background: rgba(17, 17, 17, 0.5);
    border-radius: 10px;
}

.match-date {
    color: #f39c12;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.match-time {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Update countdown styles */
.countdown {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.countdown-item {
    background: rgba(243, 156, 18, 0.1);
    padding: 0.5rem;
    border-radius: 8px;
    min-width: 60px;
    text-align: center;
}

.countdown-value {
    color: #f39c12;
    font-size: 1.2rem;
    font-weight: bold;
}

.countdown-label {
    color: #888;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

/* Add this to your existing media queries */
@media (max-width: 768px) {
    .vs-circle {
        width: 50px;
        height: 50px;
    }
    
    .vs-circle span {
        font-size: 1rem;
    }
    
    .match-date {
        font-size: 1rem;
    }
    
    .match-time {
        font-size: 1.1rem;
    }
}

/* Updated Goals List Styles */
.goals-list {
    margin-top: 1rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.goal-item {
    background: rgba(243, 156, 18, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.goal-item:hover {
    background: rgba(243, 156, 18, 0.2);
    transform: translateX(5px);
}

.goal-number {
    background: #f39c12;
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.goal-item i {
    color: #f39c12;
    font-size: 0.9rem;
}

.goal-minute {
    color: #f39c12;
    font-weight: 500;
    font-size: 0.9rem;
}

.goal-scorer {
    color: #fff;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

/* Add to your existing media queries */
@media (max-width: 768px) {
    .goal-item {
        padding: 0.4rem 0.8rem;
    }

    .goal-scorer {
        /* Remove max-width restriction */
        /* max-width: 80px; */
    }

    .goal-number {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

/* Modern Live Match Card Styles - Add this to your existing styles */
.live-match-card.modern {
    background: linear-gradient(165deg, #1a1c25 0%, #242837 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
}

/* Header Styles */
.live-match-card.modern .card-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Live Indicator */
.live-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 0, 0, 0.1);
    border-radius: 30px;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.live-pulse {
    width: 8px;
    height: 8px;
    background-color: #ff4444;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
}

.live-text {
    color: #ff4444;
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
}

/* Match Status Badge */
.status-badge {
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.06);
}

.status-badge.first-half { 
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.status-badge.half-time { 
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.status-badge.second-half { 
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

/* Teams and Score Section */
.teams-score-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    padding: 2rem 1.5rem;
}

/* Team Styles */
.team {
    text-align: center;
    padding: 1rem;
}

.team-logo {
    width: 85px;
    height: 85px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.team-logo img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Score Display */
.score-display {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.score-box {
    margin-bottom: 0.5rem;
}

.score {
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.score-divider {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 10px;
}

.match-time {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Match Events Section */
.match-events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 1.5rem 1.5rem;
}

.team-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.event-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
}

.event-time {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    min-width: 35px;
}

.event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.event-icon.yellow-card { 
    color: #fbbf24;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}

.event-icon.red-card { 
    color: #ef4444;
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

.event-icon i {
    font-size: 1rem;
}

.event-player {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .teams-score-container {
        gap: 15px;
        padding: 1.5rem 1rem;
    }

    .team-logo {
        width: 65px;
        height: 65px;
    }

    .team-name {
        font-size: 1rem;
    }

    .score {
        font-size: 2.2rem;
    }

    .score-divider {
        font-size: 2rem;
    }
}

/* Add these new styles for the VS circle */
.vs-circle {
    width: 60px;
    height: 60px;
    background: rgba(243, 156, 18, 0.1);
    border: 2px solid #f39c12;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    position: relative;
    transition: transform 0.3s ease;
}

.vs-circle span {
    color: #f39c12;
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.vs-circle:hover {
    transform: scale(1.1);
    background: rgba(243, 156, 18, 0.2);
}

/* Update match details styles */
.match-details {
    padding: 1rem;
    background: rgba(17, 17, 17, 0.5);
    border-radius: 10px;
}

.match-date {
    color: #f39c12;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.match-time {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Update countdown styles */
.countdown {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.countdown-item {
    background: rgba(243, 156, 18, 0.1);
    padding: 0.5rem;
    border-radius: 8px;
    min-width: 60px;
    text-align: center;
}

.countdown-value {
    color: #f39c12;
    font-size: 1.2rem;
    font-weight: bold;
}

.countdown-label {
    color: #888;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

/* Add this to your existing media queries */
@media (max-width: 768px) {
    .vs-circle {
        width: 50px;
        height: 50px;
    }
    
    .vs-circle span {
        font-size: 1rem;
    }
    
    .match-date {
        font-size: 1rem;
    }
    
    .match-time {
        font-size: 1.1rem;
    }
}

/* Updated Goals List Styles */
.goals-list {
    margin-top: 1rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.goal-item {
    background: rgba(243, 156, 18, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.goal-item:hover {
    background: rgba(243, 156, 18, 0.2);
    transform: translateX(5px);
}

.goal-number {
    background: #f39c12;
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.goal-item i {
    color: #f39c12;
    font-size: 0.9rem;
}

.goal-minute {
    color: #f39c12;
    font-weight: 500;
    font-size: 0.9rem;
}

.goal-scorer {
    color: #fff;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

/* Add to your existing media queries */
@media (max-width: 768px) {
    .goal-item {
        padding: 0.4rem 0.8rem;
    }

    .goal-scorer {
        /* Remove max-width restriction */
        /* max-width: 80px; */
    }

    .goal-number {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

/* Modern Live Match Card Styles - Add this to your existing styles */
.live-match-card.modern {
    background: linear-gradient(165deg, #1a1c25 0%, #242837 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
}

/* Header Styles */
.live-match-card.modern .card-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Live Indicator */
.live-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 0, 0, 0.1);
    border-radius: 30px;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.live-pulse {
    width: 8px;
    height: 8px;
    background-color: #ff4444;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.live-text {
    color: #ff4444;
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
}

/* Match Status Badge */
.status-badge {
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.06);
}

.status-badge.first-half { 
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.status-badge.half-time { 
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.status-badge.second-half { 
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

/* Teams and Score Section */
.teams-score-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    padding: 2rem 1.5rem;
}

/* Team Styles */
.team {
    text-align: center;
    padding: 1rem;
}

.team-logo {
    width: 85px;
    height: 85px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.team-logo img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Score Display */
.score-display {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.score-box {
    margin-bottom: 0.5rem;
}

.score {
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.score-divider {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 10px;
}

.match-time {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Match Events Section */
.match-events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 1.5rem 1.5rem;
}

.team-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.event-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
}

.event-time {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    min-width: 35px;
}

.event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.event-icon.yellow-card { 
    color: #fbbf24;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}

.event-icon.red-card { 
    color: #ef4444;
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

.event-icon i {
    font-size: 1rem;
}

.event-player {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .teams-score-container {
        gap: 15px;
        padding: 1.5rem 1rem;
    }

    .team-logo {
        width: 65px;
        height: 65px;
    }

    .team-name {
        font-size: 1rem;
    }

    .score {
        font-size: 2.2rem;
    }

    .score-divider {
        font-size: 2rem;
    }
}

/* Add these styles if not already present */
.match-events {
    margin-top: 10px;
    padding: 0 15px;
}

.team-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.event-time {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    min-width: 35px;
}

.event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.event-icon.yellow-card { 
    color: #ffc107;
    filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.3));
}

.event-icon.red-card { 
    color: #dc3545;
    filter: drop-shadow(0 2px 4px rgba(220, 53, 69, 0.3));
}

.event-icon i {
    font-size: 1rem;
}

.event-player {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Updated Match Highlights Styles with better mobile support */
.highlights-card {
    background: linear-gradient(165deg, #1a1c25 0%, #242837 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-bottom: 2rem;
}

.highlights-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.highlights-header h3 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.highlights-header i {
    color: #ff4444;
}

.highlights-grid {
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.highlight-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.highlight-video, 
.highlight-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.highlight-thumbnail,
.highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.play-overlay i {
    color: #1a1c25;
    font-size: 1.5rem;
    margin-left: 4px;
}

.highlight-info {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.highlight-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

.highlight-teams {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.highlight-teams::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #ff4444;
    border-radius: 50%;
}

.highlight-description {
    margin-top: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover Effects */
.highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.highlight-item:hover .highlight-thumbnail,
.highlight-item:hover .highlight-image img {
    transform: scale(1.05);
}

.highlight-item:hover .play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .highlights-header h3 {
        font-size: 1.25rem;
    }

    .highlight-item {
        margin-bottom: 0;
    }

    .play-overlay {
        width: 50px;
        height: 50px;
    }

    .play-overlay i {
        font-size: 1.2rem;
    }

    .highlight-info {
        padding: 12px;
    }

    .highlight-title {
        font-size: 1rem;
    }

    .highlight-teams,
    .highlight-description {
        font-size: 0.85rem;
    }
    
    /* Disable hover effects on mobile */
    .highlight-item:hover {
        transform: none;
    }
    
    /* Add active state for touch devices */
    .highlight-item:active {
        transform: scale(0.98);
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .highlights-header {
        padding: 1rem;
    }

    .highlights-grid {
        padding: 10px;
        gap: 12px;
    }

    .highlight-info {
        padding: 10px;
    }
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
    .highlights-card {
        background: linear-gradient(165deg, #1a1c25 0%, #242837 100%);
    }
}

/* Add these styles to your existing CSS */
.highlight-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
}

.highlight-date,
.highlight-time {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.highlight-date i,
.highlight-time i {
    font-size: 0.9rem;
    color: #fff;
    opacity: 0.8;
}

/* Mobile styles */
@media (max-width: 768px) {
    .highlight-meta {
        font-size: 0.8rem;
        gap: 12px;
    }

    .highlight-date,
    .highlight-time {
        padding: 3px 6px;
    }

    .highlight-date i,
    .highlight-time i {
        font-size: 0.85rem;
    }
}

/* Video Modal Styles - Replace your existing modal styles */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.video-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    z-index: 10000;
}

#videoContainer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

#videoContainer iframe,
#videoContainer video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Loading and Error States */
.video-loading,
.video-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 100%;
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .video-modal-content {
        width: 95%;
    }

    .video-modal-close {
        top: -50px;
        right: 0;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .video-modal {
        height: -webkit-fill-available;
    }
}

.announcement-image-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.announcement-full-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.announcement-image-container:hover .announcement-full-image {
    transform: scale(1.05);
}

/* Image Modal Styles */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.image-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.image-modal-content {
    max-width: 90%;
    max-height: 90vh;
    margin: auto;
    display: block;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    border-radius: 4px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.image-modal.show .image-modal-content {
    transform: scale(1);
}

.image-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .announcement-image-container {
        max-height: 300px;
        overflow: hidden;
    }
    
    .image-modal-close {
        top: 10px;
        right: 20px;
        font-size: 30px;
    }
}
</style>

<!-- Add JavaScript for image modal -->
<script>
function openImageModal(imgSrc) {
    const modal = document.getElementById('imageModal');
    const modalImg = document.getElementById('modalImage');
    
    modalImg.src = imgSrc;
    modal.style.display = 'flex';
    
    // Add show class after a small delay for animation
    setTimeout(() => {
        modal.classList.add('show');
    }, 10);
    
    // Prevent page scrolling when modal is open
    document.body.style.overflow = 'hidden';
}

// Close modal when clicking the close button or outside the image
document.querySelector('.image-modal-close').onclick = closeImageModal;
document.getElementById('imageModal').onclick = function(e) {
    if (e.target === this) {
        closeImageModal();
    }
};

function closeImageModal() {
    const modal = document.getElementById('imageModal');
    modal.classList.remove('show');
    
    // Wait for animation to complete before hiding
    setTimeout(() => {
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }, 300);
}

// Close modal with escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeImageModal();
    }
});
</script>

    <footer class="bg-dark text-light py-4 mt-5">
        <div class="container">
        <p class="mt-2">Hamz Stadium</p>
            <p>At Hamz Grounds Stadium Nakivubo Playground, our story is woven with a profound passion for sports and a deep appreciation for the spirit of community. Established in the heart of Kampala, Uganda, our journey began with a commitment to promoting healthy living, nurturing talent, and creating a vibrant, inclusive space for all.</p>
            <h5>Quick Links</h5>
            <p class="mb-0">&copy; 2025 Hamz Stadium Nakivubo War Memorial Grounds. All rights reserved.</p>
        
        </div>
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"903b3d2e0b6b2d1a","version":"2025.1.0","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"9b1c537d0258478b96f33650c8225b26","b":1}' crossorigin="anonymous"></script>
</body>
</html>