
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>National AIDS Council Zimbabwe</title>
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts - Inter only -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/new-styles.css">
</head>
<body>
    <!-- Top Bar -->
    <div class="top-bar">
        <div class="container-fluid">
            <div class="top-bar-content">
                <div class="top-links">
                    <a href="tenders.php"><i class="fas fa-file-signature"></i> Tenders</a>
                    <a href="vacancies.php"><i class="fas fa-briefcase"></i> Vacancies</a>
                </div>
                <div class="top-right">
                    <div class="social-links">
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                    </div>
                    <div class="subscription-wrapper">
                        <button class="subscribe-btn" id="subscribeBtn">
                            <i class="fas fa-bell"></i> Subscribe
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Header -->
    <header class="header">
        <div class="container-fluid">
            <div class="header-wrapper">
                <div class="logo">
                    <a href="index.php">
                        <img src="images/logo.png" alt="National AIDS Council Zimbabwe">
                    </a>
                </div>
                <nav class="main-nav">
                    <ul class="nav-menu">
                        <li><a href="index.php" class="nav-link active">Home</a></li>
                        <li class="has-dropdown">
                            <a href="#">About Us <i class="fas fa-chevron-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="overview.php" class="">Overview</a></li>
                                <li><a href="leadership.php" class="">Board Members</a></li>
                                <li><a href="secretariat.php" class="">Secretariat</a></li>
                                <li><a href="governance.php" class="">Governance</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="#">Our Work <i class="fas fa-chevron-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="prevention.php" class="">Prevention</a></li>
                                <li><a href="treatment.php" class="">Treatment & Care</a></li>
                                <li><a href="gender.php" class="">Gender </a></li>
                                <li><a href="workplace.php" class=""> Workplace</a></li>
                                <li><a href="global-fund.php" class="">Global Fund</a></li>
                                <li><a href="mipa.php" class="">MIPA</a></li>
                                <li><a href="social.php" class="">Social Contracting</a></li>
                                <li><a href="youth.php" class="">Youth</a></li>
                                <li><a href="rad.php" class="">Research & Documentation</a></li>
                                <li><a href="monitoring.php" class="">Monitoring & Evaluation</a></li>
                                <li><a href="key-populations.php" class="">Key Populations</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="#">Resources <i class="fas fa-chevron-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="documents.php?category=Progress+Reports" class="">NAC Progress Reports</a></li>
                                <li><a href="documents.php?category=Policies" class="">Financial Statements</a></li>
                                <li><a href="documents.php?category=Guidelines" class="">Strategic Documents & Policies</a></li>

                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="#">Media Centre <i class="fas fa-chevron-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="news.php" class="">News</a></li>
                                <li><a href="gallery.php" class="">Gallery</a></li>
                                <li><a href="videos.php" class="">Videos</a></li>
                                <li><a href="documents.php?category=Speeches" class="">Speeches</a></li>

                            </ul>
                        </li>
                        <li><a href="contact.php" class="nav-link ">Contact</a></li>
                    </ul>
                </nav>
                <div class="mobile-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </header>
    <!-- Hero Section - 600px Height -->
    <section class="hero">
        <div class="hero-slider">
                                                <div class="hero-slide active">
                        <img src="uploads/hero_slides/692e5cded2fb5.jpg" alt="Ending AIDS in Zimbabwe by 2030">
                        
                    </div>
                                    <div class="hero-slide ">
                        <img src="uploads/hero_slides/692e5c0df1f6f.jpg" alt="HIV Prevention &amp; Education">
                        
                    </div>
                                    <div class="hero-slide ">
                        <img src="uploads/hero_slides/692e5bc9dabce.jpg" alt="Support &amp; Care Services">
                        
                    </div>
                                        
            <div class="hero-indicators">
                                    <span class="indicator active" data-slide="0"></span>
                                    <span class="indicator " data-slide="1"></span>
                                    <span class="indicator " data-slide="2"></span>
                            </div>
        </div>
    </section>

    <!-- Stats Bar - Desktop Only -->
    <section class="stats-bar desktop-only">
        <div class="container-fluid">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number" data-target="1.3">0</div>
                    <div class="stat-label">Million People Living with HIV</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-target="97">0<small>%</small></div>
                    <div class="stat-label">Know their Status</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-target="98">0<small>%</small></div>
                    <div class="stat-label">On Treatment</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-target="96">0<small>%</small></div>
                    <div class="stat-label">Viral Load Suppressed</div>
                </div>
            </div>
        </div>
    </section>

    <!-- News Section -->
    <section class="section news-section">
        <div class="container-fluid">
            <div class="section-header">
                <div>
                    <span class="section-subtitle">Latest Updates</span>
                    <h2 class="section-title">Latest <span class="text-gradient">News</span></h2>
                </div>
                <a href="news.php" class="btn btn-outline">View All News <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="news-grid">
                                                            <div class="news-card">
                            <div class="news-image">
                                <img src="uploads/news/n1.jpg" alt="Lenacapavir rollout aims to slash HIV infections in Zimbabwe">
                                <div class="news-date">
                                                                        <span class="date-day">09</span>
                                    <span class="date-month">MAR</span>
                                </div>
                                <div class="news-category">News</div>
                            </div>
                            <div class="news-content">
                                <h3>Lenacapavir rollout aims to slash HIV infections in Zimbabwe</h3>
                                <p>The United States has launched lenacapavir (LEN), the new long-acting HIV prevention drug, in Zimbabwe, with plans to support thousands op poeple.</p>
                                <a href="news-detail.php?id=13" class="read-more">Read Article <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                                            <div class="news-card">
                            <div class="news-image">
                                <img src="uploads/news/n2.jpg" alt="Zimbabwe Commissions Landmark Nucleic Acid Testing Platform to Strengthen Blood Safety">
                                <div class="news-date">
                                                                        <span class="date-day">09</span>
                                    <span class="date-month">MAR</span>
                                </div>
                                <div class="news-category">News</div>
                            </div>
                            <div class="news-content">
                                <h3>Zimbabwe Commissions Landmark Nucleic Acid Testing Platform to Strengthen Blood Safety</h3>
                                <p>Zimbabwe has taken a decisive step forward in strengthening its national health system with the official commissioning of Nucleic Acid Testing (NAT) for blood screening at the National Blood Service Zimbabwe (NBSZ) headquarters in Harare.</p>
                                <a href="news-detail.php?id=14" class="read-more">Read Article <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                                            <div class="news-card">
                            <div class="news-image">
                                <img src="uploads/news/injectable.jpg" alt="Zimbabwe rolls out new HIV prevention drug lenacapavir">
                                <div class="news-date">
                                                                        <span class="date-day">04</span>
                                    <span class="date-month">MAR</span>
                                </div>
                                <div class="news-category">News</div>
                            </div>
                            <div class="news-content">
                                <h3>Zimbabwe rolls out new HIV prevention drug lenacapavir</h3>
                                <p>Zimbabwe&#039;s health authorities on Thursday (19 February)  began administering the long-acting injectable HIV prevention drug lenacapavir, making the country one of the first globally to roll it out as the southern African nation seeks to curb new infections. Health Minister Douglas Mombeshora said the programme, funded by the US and the Global Fund, would initially target more than 46,000 people at high risk of contracting HIV across 24 sites nationwide.</p>
                                <a href="news-detail.php?id=12" class="read-more">Read Article <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                                            <div class="news-card">
                            <div class="news-image">
                                <img src="uploads/news/693153ee32d98.jpeg" alt="First Lady Calls For Inclusive Vaccination Efforts During African Vaccination Week">
                                <div class="news-date">
                                                                        <span class="date-day">04</span>
                                    <span class="date-month">DEC</span>
                                </div>
                                <div class="news-category">News</div>
                            </div>
                            <div class="news-content">
                                <h3>First Lady Calls For Inclusive Vaccination Efforts During African Vaccination Week</h3>
                                <p>As the African Vaccination Week (24-30 April 2025) unfolds, the First Lady of Zimbabwe, H.E. Dr. Auxillia Mnangagwa, has issued a powerful call to action. Her message is clear: no one and no area should be left behind in the quest for universal vaccination coverage.</p>
                                <a href="news-detail.php?id=9" class="read-more">Read Article <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                                                </div>
        </div>
    </section>

    <!-- Programs Section - Colorful with Background Images -->
    <section class="section programs-section">
        <div class="container-fluid">
            <div class="section-header centered">
                <span class="section-subtitle">What We Do</span>
                <h2 class="section-title">Our HIV <span class="text-gradient">Programmes</span></h2>
            </div>
            
            <div class="programs-grid">
                <div class="program-card" style="background-image: linear-gradient(135deg, rgba(150, 209, 170, 0.85) 0%, rgba(150, 209, 170, 0.85) 100%), url('images/prevention-bg.jpg');">
                    <div class="program-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Prevention</h3>
                    <p>Condom distribution, PrEP, and behavior change communication reaching millions across all provinces.</p>
                    <a href="prevention.php" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
                
                <div class="program-card" style="background-image: linear-gradient(135deg, rgba(204, 153, 0, 0.9) 0%, rgba(153, 115, 0, 0.9) 100%), url('images/treatment-bg.jpg');">
                    <div class="program-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h3>Treatment & Care</h3>
                    <p>Expanding access to antiretroviral therapy across all provinces with 92% coverage achieved.</p>
                    <a href="treatment.php" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
                
                <div class="program-card" style="background-image: linear-gradient(135deg, rgba(153, 0, 0, 0.9) 0%, rgba(102, 0, 0, 0.9) 100%), url('images/support-bg.jpg');">
                    <div class="program-icon">
                        <i class="fas fa-hands-helping"></i>
                    </div>
                    <h3 class="program-title">Social Contracting</h3>
                        <p class="program-description">Social Contracting uses domestic and public resources to support Civil Society Organizations (CSOs) that are better positioned to meet national health priorities</p>
                        <a href="social.php" class="program-link">Learn More</a>
                </div>
                
                <div class="program-card" style="background-image: linear-gradient(135deg, rgba(51, 51, 51, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%), url('images/research-bg.jpg');">
                    <div class="program-icon">
                        <i class="fas fa-flask"></i>
                    </div>
                    <h3>Research & Surveillance</h3>
                    <p>Monitoring the epidemic through cutting-edge research to inform evidence-based policy decisions.</p>
                    <a href="research.php" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Events Section -->
    <section class="section events-section">
        <div class="container-fluid">
            <div class="section-header">
                <div>
                    <span class="section-subtitle">Don't Miss Out</span>
                    <h2 class="section-title">Upcoming <span class="text-gradient">Events</span></h2>
                </div>
                <a href="events.php" class="btn btn-outline">View Calendar <i class="fas fa-calendar-alt"></i></a>
            </div>
            
            <div class="events-grid">
                                                            <div class="event-card">
                            <div class="event-date">
                                                                <span class="event-day">24</span>
                                <span class="event-month">MAR</span>
                            </div>
                            <div class="event-details">
                                <h3>World TB Day </h3>
                                <div class="event-meta">
                                    <span><i class="fas fa-map-marker-alt"></i> Zimbabwe</span>
                                    <span><i class="fas fa-clock"></i> 9:00 AM</span>
                                </div>
                                <p>World TB Day ...</p>
                                <a href="event-detail.php?id=1" class="event-link">View Details <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                                            <div class="event-card">
                            <div class="event-date">
                                                                <span class="event-day">07</span>
                                <span class="event-month">APR</span>
                            </div>
                            <div class="event-details">
                                <h3>World Health Day</h3>
                                <div class="event-meta">
                                    <span><i class="fas fa-map-marker-alt"></i> Zimbabwe</span>
                                    <span><i class="fas fa-clock"></i> 9:00 AM</span>
                                </div>
                                <p>World Health Day...</p>
                                <a href="event-detail.php?id=2" class="event-link">View Details <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                                            <div class="event-card">
                            <div class="event-date">
                                                                <span class="event-day">20</span>
                                <span class="event-month">APR</span>
                            </div>
                            <div class="event-details">
                                <h3>Zimbabwe International Trade Fair</h3>
                                <div class="event-meta">
                                    <span><i class="fas fa-map-marker-alt"></i> Bulawayo</span>
                                    <span><i class="fas fa-clock"></i> 9:00 AM</span>
                                </div>
                                <p>Zimbabwe International Trade Fair...</p>
                                <a href="event-detail.php?id=3" class="event-link">View Details <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                                                </div>
        </div>
    </section>

    <!-- Health Conditions Section -->
    <section class="section health-section">
        <div class="container-fluid">
            <div class="section-header">
                <div>
                    <span class="section-subtitle">Integrated Services</span>
                    <h2 class="section-title">Health <span class="text-gradient">Conditions</span></h2>
                </div>
                <a href="health-conditions.php" class="btn btn-outline">View All Conditions <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="health-grid">
                                    <!-- Diabetes -->
            <div class="health-card">
                <img src="images/diabetes.jpg" alt="Diabetes">
                <div class="health-overlay nac-green-overlay">
                    <h3>Diabetes</h3>
                    <p>Diabetes is a chronic disease that occurs when the pancreas does not produce enough insulin or when the body cannot effectively use the insulin it produces.</p>
                    <a href="diabetes.php" class="health-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <!-- Hypertension -->
            <div class="health-card">
                <img src="images/hypertension-symptoms.jpg" alt="Hypertension">
                <div class="health-overlay nac-green-overlay">
                    <h3>Hypertension</h3>
                    <p>Hypertension (high blood pressure) is when the pressure in your blood vessels is too high (140/90 mmHg or higher). It is common but can be serious if not treated.</p>
                    <a href="hypertension.php" class="health-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <!-- Tuberculosis -->
            <div class="health-card">
                <img src="images/tb.jpg" alt="Tuberculosis">
                <div class="health-overlay nac-green-overlay">
                    <h3>Tuberculosis</h3>
                    <p>Tuberculosis (TB) is an infectious disease caused by bacteria that most often affects the lungs. </p>
                    <a href="tuberculosis.php" class="health-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <!-- Hepatitis B -->
            <div class="health-card">
                <img src="images/hepatitis-b-symptoms.jpg" alt="Hepatitis B">
                <div class="health-overlay nac-green-overlay">
                    <h3>Hepatitis B</h3>
                    <p>Hepatitis B is a viral infection that attacks the liver and can cause both acute and chronic disease.</p>
                    <a href="hepatitis-b.php" class="health-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
                    </div>
                            </div>
        </div>
    </section>

    <!-- Videos Section -->
    <section class="section videos-section">
        <div class="container-fluid">
            <div class="section-header">
                <div>
                    <span class="section-subtitle">Watch & Learn</span>
                    <h2 class="section-title">Latest <span class="text-gradient">Videos</span></h2>
                </div>
                <a href="videos.php" class="btn btn-outline">View All Videos <i class="fas fa-play-circle"></i></a>
            </div>
            
            <div class="videos-grid">
                
                    <div class="video-card" data-video="videos/v1.mp4" data-title="NAC Annual General Meeting">
                        <div class="video-thumbnail">
                            <img src="images/vid1.jpg" alt="NAC Annual General Meeting">
                            <div class="video-play">
                                <i class="fas fa-play"></i>
                            </div>
                            <div class="video-duration">4:32</div>
                        </div>
                        <div class="video-info">
                            <h3>NAC Annual General Meeting</h3>
                            <p>Highlights from the National AIDS Council Annual General Meeting with key stakeholders.</p>
                        </div>
                    </div>
                    
                    <div class="video-card" data-video="videos/v2.mp4" data-title="Support to Parirenyatwa Hospital Blood Bank and Renal Unit">
                        <div class="video-thumbnail">
                            <img src="images/vid2.jpg" alt="Support to Parirenyatwa Hospital">
                            <div class="video-play">
                                <i class="fas fa-play"></i>
                            </div>
                            <div class="video-duration">6:18</div>
                        </div>
                        <div class="video-info">
                            <h3>Support to Parirenyatwa Hospital Blood Bank and Renal Unit</h3>
                            <p>Blood Bank and Renal Unit support for improved healthcare services.</p>
                        </div>
                    </div>
                    
                    <div class="video-card" data-video="videos/v3.mp4" data-title="World AIDS Day Commemoration 2025">
                        <div class="video-thumbnail">
                            <img src="images/vid3.jpg" alt="World AIDS Day 2025">
                            <div class="video-play">
                                <i class="fas fa-play"></i>
                            </div>
                            <div class="video-duration">8:45</div>
                        </div>
                        <div class="video-info">
                            <h3>World AIDS Day Commemoration 2025</h3>
                            <p>Commemorations with community engagement and awareness campaigns across Zimbabwe.</p>
                        </div>
                    </div>
            </div>
        </div>
    </section>

    <!-- Stats Bar - Mobile (Shows at bottom) -->
    <section class="stats-bar mobile-only">
        <div class="container-fluid">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number" data-target="1.3">0</div>
                    <div class="stat-label">Million People Living with HIV</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-target="92">0<small>%</small></div>
                    <div class="stat-label">On Antiretroviral Therapy</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-target="86">0<small>%</small></div>
                    <div class="stat-label">Viral Load Suppression</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-target="65">0<small>%</small></div>
                    <div class="stat-label">Reduction in New Infections</div>
                </div>
            </div>
        </div>
    </section>

    

    <!-- Video Modal - Only on pages with videos -->
    <div class="video-modal" id="videoModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Video Player</h3>
                <button class="close-modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <video id="modalVideo" controls>
                    <source src="" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>

<!-- Footer -->
<footer class="footer">
    <div class="container-fluid">
        <!-- Main Footer Content -->
        <div class="footer-main">
            <div class="footer-grid">
                <!-- About Section -->
                <div class="footer-col about-col">
                    <div class="footer-logo">
                        <a href="index.php">
                            <img src="images/white_logo.png" alt="National AIDS Council Zimbabwe">
                        </a>
                    </div>
                    <p class="footer-about">Coordinating The Multi Sectoral National Response To HIV & AIDS</p>
                    <div class="footer-social">
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <!-- Quick Links -->
                <div class="footer-col">
                    <h4 class="footer-title">Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="overview.php"><i class="fas fa-chevron-right"></i> About Us</a></li>
                        <li><a href="prevention.php"><i class="fas fa-chevron-right"></i> Our Programs</a></li>
                        <li><a href="news.php"><i class="fas fa-chevron-right"></i> News & Events</a></li>
                        <li><a href="contact.php"><i class="fas fa-chevron-right"></i> Contact Us</a></li>
                    </ul>
                </div>
                
                <!-- Resources -->
                <div class="footer-col">
                    <h4 class="footer-title">Resources</h4>
                    <ul class="footer-links">
                        <li><a href="documents.php?category=Reports"><i class="fas fa-chevron-right"></i> Annual Reports</a></li>
                        <li><a href="documents.php?category=Policies"><i class="fas fa-chevron-right"></i> Policies</a></li>
                        <li><a href="documents.php?category=Guidelines"><i class="fas fa-chevron-right"></i> Guidelines</a></li>
                        <li><a href="documents.php?category=Research"><i class="fas fa-chevron-right"></i> Research Papers</a></li>
                    </ul>
                </div>
                
                <!-- Contact Info -->
                <div class="footer-col">
                    <h4 class="footer-title">Contact Info</h4>
                    <ul class="contact-info">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>100 Central Avenue, Harare, Zimbabwe</span>
                        </li>
                        <li>
                            <i class="fas fa-phone"></i>
                            <span>+263 242 791 901 / 791 911</span>
                        </li>
                        
                        <li>
                            <i class="fas fa-envelope"></i>
                            <span>secretariat@nac.org.zw</span>
                        </li>
                        <li>
                            <i class="fas fa-clock"></i>
                            <span>Mon-Fri: 8:00 AM - 4:30 PM</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Emergency Hotline & Newsletter Row -->
        
        
        <!-- Footer Bottom -->
        
    </div>
</footer>

<!-- Subscription Modal - Available on all pages -->
<div class="subscription-modal" id="subscriptionModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Subscribe to Updates</h3>
            <button class="close-modal"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div class="subscription-options">
                <div class="subscription-option">
                    <i class="fas fa-envelope"></i>
                    <h4>Email Newsletter</h4>
                    <p>Get weekly updates, news, and resources directly in your inbox.</p>
                    <form id="emailSubForm">
                        <input type="email" placeholder="Your email address" required>
                        <button type="submit" class="btn btn-primary">Subscribe</button>
                    </form>
                </div>
                <div class="subscription-option">
                    <i class="fab fa-whatsapp"></i>
                    <h4>WhatsApp Channel</h4>
                    <p>Join our WhatsApp channel for instant updates and alerts.</p>
                    <a href="#" class="btn btn-whatsapp">Join Channel</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Back to Top Button -->
<button class="back-to-top" id="backToTop" aria-label="Back to top">
    <i class="fas fa-arrow-up"></i>
</button>

<!-- JavaScript -->
<script src="js/new-script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Back to Top Button Functionality
    const backToTop = document.getElementById('backToTop');
    
    if (backToTop) {
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTop.classList.add('visible');
            } else {
                backToTop.classList.remove('visible');
            }
        });
        
        backToTop.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
    
    // Video Modal Functionality
    const videoModal = document.getElementById('videoModal');
    const videoCards = document.querySelectorAll('.video-card');
    const closeModalButtons = document.querySelectorAll('.close-modal');
    const modalVideo = document.getElementById('modalVideo');
    
    if (videoModal && videoCards.length > 0) {
        videoCards.forEach(card => {
            card.addEventListener('click', function() {
                const videoSrc = this.getAttribute('data-video');
                const title = this.getAttribute('data-title');
                
                if (videoSrc) {
                    const videoElement = modalVideo.querySelector('source');
                    if (videoElement) {
                        videoElement.src = videoSrc;
                    }
                    modalVideo.load();
                    
                    // Update modal title
                    const modalTitle = videoModal.querySelector('.modal-title');
                    if (modalTitle) modalTitle.textContent = title || 'Video Player';
                    
                    videoModal.classList.add('active');
                    document.body.style.overflow = 'hidden';
                }
            });
        });
    }
    
    // Close modal functionality for all modals
    closeModalButtons.forEach(button => {
        button.addEventListener('click', function() {
            const modal = this.closest('.video-modal, .subscription-modal');
            if (modal) {
                modal.classList.remove('active');
                document.body.style.overflow = '';
                
                // Pause video if it's the video modal
                if (modal.id === 'videoModal' && modalVideo) {
                    modalVideo.pause();
                    modalVideo.currentTime = 0;
                }
            }
        });
    });
    
    // Close modals when clicking outside
    window.addEventListener('click', function(e) {
        if (e.target.classList.contains('video-modal') || e.target.classList.contains('subscription-modal')) {
            e.target.classList.remove('active');
            document.body.style.overflow = '';
            
            // Pause video if it's the video modal
            if (e.target.id === 'videoModal' && modalVideo) {
                modalVideo.pause();
                modalVideo.currentTime = 0;
            }
        }
    });
    
    // Close modals with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const activeVideoModal = document.querySelector('.video-modal.active');
            const activeSubModal = document.querySelector('.subscription-modal.active');
            
            if (activeVideoModal) {
                activeVideoModal.classList.remove('active');
                document.body.style.overflow = '';
                if (modalVideo) {
                    modalVideo.pause();
                    modalVideo.currentTime = 0;
                }
            }
            
            if (activeSubModal) {
                activeSubModal.classList.remove('active');
                document.body.style.overflow = '';
            }
        }
    });
    
    // Subscription Modal Functionality
    const subModal = document.getElementById('subscriptionModal');
    const subscribeBtn = document.getElementById('subscribeBtn');
    
    if (subModal && subscribeBtn) {
        subscribeBtn.addEventListener('click', () => {
            subModal.classList.add('active');
            document.body.style.overflow = 'hidden';
        });
    }
    
    // Email subscription form
    const emailForm = document.getElementById('emailSubForm');
    if (emailForm) {
        emailForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const emailInput = emailForm.querySelector('input[type="email"]');
            const email = emailInput.value.trim();
            
            if (validateEmail(email)) {
                showNotification('Thank you for subscribing! Please check your email to confirm.', 'success');
                emailForm.reset();
                
                // Close modal
                const modal = document.getElementById('subscriptionModal');
                if (modal) {
                    modal.classList.remove('active');
                    document.body.style.overflow = '';
                }
            } else {
                showNotification('Please enter a valid email address', 'error');
            }
        });
    }
    
    // Newsletter Form Submission (footer)
    const newsletterForms = document.querySelectorAll('.footer-newsletter');
    newsletterForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const emailInput = this.querySelector('input[type="email"]');
            const email = emailInput.value.trim();
            
            if (validateEmail(email)) {
                showNotification('Thank you for subscribing!', 'success');
                emailInput.value = '';
            } else {
                showNotification('Please enter a valid email address', 'error');
            }
        });
    });
    
    // Email validation helper
    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }
    
    // Notification function
    function showNotification(message, type) {
        // Remove existing notifications
        const existingNotification = document.querySelector('.notification');
        if (existingNotification) {
            existingNotification.remove();
        }
        
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
                <span>${message}</span>
            </div>
        `;
        
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${type === 'success' ? 'linear-gradient(135deg, #2ecc71 0%, #27ae60 100%)' : 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)'};
            color: white;
            padding: 12px 24px;
            border-radius: 50px;
            z-index: 10000;
            animation: slideIn 0.3s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            font-size: 0.95rem;
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 300);
        }, 5000);
    }
    
    // Make tables responsive
    function makeTableResponsive() {
        const tables = document.querySelectorAll('.documents-table table, .data-table table');
        
        tables.forEach(table => {
            const headers = [];
            const ths = table.querySelectorAll('thead th');
            
            ths.forEach((th, index) => {
                headers[index] = th.textContent.trim();
            });
            
            const rows = table.querySelectorAll('tbody tr');
            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                cells.forEach((cell, index) => {
                    if (headers[index]) {
                        cell.setAttribute('data-label', headers[index]);
                    }
                });
            });
        });
    }
    
    makeTableResponsive();
    
    // Animate elements on scroll
    const animateElements = document.querySelectorAll('.function-card, .value-card-compact, .progress-card, .timeline-item');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in-up');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
    
    animateElements.forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(element);
    });
    
    // Add fade-in-up class for animation
    const style = document.createElement('style');
    style.textContent = `
        .fade-in-up {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }
    `;
    document.head.appendChild(style);
});
</script>

</body>
</html>