{% extends 'base.html' %}
 {% load static %}

 {% block script_css %}
    <style>
        /* Custom styles for darker backdrop */
        .modal-backdrop.show {
            opacity: 0.8;
        }
    </style>
  <style>
        .counter-card {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
        }
        .counter-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .counter-number {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .counter-label {
            font-size: 1.125rem;
            color: #6c757d;
        }
        .icon {
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        .icon.staff-strength {
            color: #198754; /* Dark green */
        }
        .icon.admission-year {
            color: #0d6efd; /* Dark blue */
        }
        .icon.outpatient-year {
            color: #dc3545; /* Dark red */
        }
        .icon.beds {
            color: #ffc107; /* Dark yellow */
        }
        .counter-number.staff-strength {
            color: #198754; /* Dark green */
        }
        .counter-number.admission-year {
            color: #0d6efd; /* Dark blue */
        }
        .counter-number.outpatient-year {
            color: #dc3545; /* Dark red */
        }
        .counter-number.beds {
            color: #ffc107; /* Dark yellow */
        }
        .scrollable-list {
            max-height: 150px; /* Adjust the height as needed */
            overflow-y: auto;
            padding: 0;
            margin: 0;
        }

        .partner-logo {
            max-width: auto;
            max-height: 100px;
            object-fit: contain;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .partner-logo:hover {
            transform: scale(1.1); /* Scales the image slightly */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow */
        }
        .custom-size {
            width: 380px;
            height: 250px;
        }

    /* For responsiveness */
    @media (max-width: 768px) {
        .custom-size {
            width: 100%; /* Adjusts width for smaller screens */
            height: auto; /* Allows height to adjust automatically */
        }
    }
    </style>
 {% endblock script_css %}

  {% block main_content %}
         {% if announcement %}
            <!-- Modal -->
            <div class="modal fade" id="announcementModal" tabindex="-1" aria-labelledby="announcementModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="announcementModalLabel">{{ announcement.title }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            {{ announcement.message }}
                        </div>
                        <div class="modal-footer">
                            <a href="{% url 'announcements_list' %}" class="btn btn-primary">More</a>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    const announcementModal = new bootstrap.Modal(document.getElementById('announcementModal'));
                    announcementModal.show();

                    setTimeout(() => {
                        announcementModal.hide();
                    }, 16000); // Hide after 16 seconds
                });
            </script>
        {% endif %}

  <!-- Carousel Start -->
    <div class="container-fluid p-0">
        <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">
                <!-- First Slide -->
                <div class="carousel-item active">
                    <img class="w-100" src="{% static 'main/img/slides/clinics_bhuth.jpg' %}" alt="Image">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;">
                            <h5 class="text-white text-uppercase mb-3 animated slideInDown">Clinics</h5>
                            <h3 class="display-1 text-white mb-md-4 animated zoomIn">Empowering Health</h3>
                            <a href="{% url 'departments' %}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Our Departments</a>
                            <a href="{% url 'contact' %}" class="btn btn-secondary py-md-3 px-md-5 animated slideInRight">Contact Us</a>
                        </div>
                    </div>
                </div>

                <!-- Second Slide -->
                <div class="carousel-item">
                    <img class="w-100" src="{% static 'main/img/slides/pinneo_centre_bhuth.jpg' %}" alt="Image">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;">
                            <h5 class="text-white text-uppercase mb-3 animated slideInDown">Pinneo Centre</h5>
                            <h3 class="display-1 text-white mb-md-4 animated zoomIn">1st Lassa Fever Patient</h3>
                            <a href="{% url 'centres' %}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Learn More</a>
                            <a href="{% url 'contact' %}" class="btn btn-secondary py-md-3 px-md-5 animated slideInRight">Contact Us</a>
                        </div>
                    </div>
                </div>

                <!-- Third Slide -->
                <div class="carousel-item">
                    <img class="w-100" src="{% static 'main/img/slides/bhuth_gate.jpg' %}" alt="Image">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;">
                            <h5 class="text-white text-uppercase mb-3 animated slideInDown">Research</h5>
                            <h3 class="display-1 text-white mb-md-4 animated zoomIn">Advancing Knowledge</h3>
                            <a href="{% url 'research' %}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Learn More</a>
                            <a href="{% url 'contact' %}" class="btn btn-secondary py-md-3 px-md-5 animated slideInRight">Get In Touch</a>
                        </div>
                    </div>
                </div>

                <!-- Third Slide -->
                <div class="carousel-item">
                    <img class="w-100" src="{% static 'main/img/league_of_friends_slides.jpg' %}" alt="Image">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;">
                            <h5 class="text-white text-uppercase mb-3 animated slideInDown">League of Friends</h5>
                            <h3 class="display-1 text-white mb-md-4 animated zoomIn">Support & Network</h3>
                            <a href="{% url 'league' %}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Learn More</a>
                            <a href="{% url 'league_contact' %}" class="btn btn-secondary py-md-3 px-md-5 animated slideInRight">Get In Touch</a>
                        </div>
                    </div>
                </div>

                <!-- Fourth Slide -->
                <div class="carousel-item">
                    <img class="w-100" src="{% static 'main/img/slides/school_bhuth.jpg' %}" alt="Image">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;">
                            <h5 class="text-white text-uppercase mb-3 animated slideInDown">Trainings</h5>
                            <h3 class="display-1 text-white mb-md-4 animated zoomIn">Learn, Heal, Innovate</h3>
                            <a href="" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Our Trainings</a>
                            <a href="" class="btn btn-secondary py-md-3 px-md-5 animated slideInRight">Support Us</a>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>

    <!-- Carousel End -->

    <!-- Banner Start -->
    <div class="container-fluid banner mb-5">
        <div class="container">
            <div class="row gx-0">
                <div class="col-lg-4 wow zoomIn" data-wow-delay="0.1s">
                    <div class="bg-primary d-flex flex-column p-5 rounded shadow" style="height: 300px;">
                        <h3 class="text-white mb-4">Our Vision</h3>
                        <p class="text-white mb-4">
                            To be a Christ-centered teaching hospital of excellence, leading with compassion, innovation, and integrity in healthcare.
                        </p>
                        <a class="btn btn-light mt-auto align-self-start" href="{% url 'statement' %}">Learn More</a>
                    </div>
                </div>

                <div class="col-lg-4 wow zoomIn" data-wow-delay="0.3s">
                    <div class="bg-dark d-flex flex-column p-5 rounded shadow" style="height: 300px;">
                        <h3 class="text-white mb-4">Our Mission</h3>
                        <p class="text-white mb-4">
                            To provide inclusive and qualitative healthcare services, training, and research in a Christ-centered manner to all people.
                        </p>
                        <a class="btn btn-light mt-auto align-self-start" href="{% url 'statement' %}">Learn More</a>
                    </div>
                </div>

                <div class="col-lg-4 wow zoomIn" data-wow-delay="0.6s">
                    <div class="bg-secondary d-flex flex-column p-5" style="height: 300px;">
                        <h3 class="text-white mb-3">Our Clinic Schedules</h3>
                        <ul class="text-white list-unstyled scrollable-list">
                            {% for clinic in clinics %}
                            <li><b>{{ clinic.title }}</b> - {{ clinic.opening_hour|time:"g:i A" }} to {{ clinic.closing_hour|time:"g:i A" }},</li>
                            {% endfor %}
                        </ul><br>
                        <a class="btn btn-light mt-auto align-self-start" href="{% url 'schedule' %}">For Details</a>
                    </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Banner Start -->

<!-- Counter Start -->
<div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container">
        <div class="row text-center">
            <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                <div class="counter-card">
                    <div class="icon staff-strength">
                        <i class="fas fa-user-md"></i>
                    </div>
                    <div class="counter-number staff-strength">450</div>
                    <div class="counter-label">Staff Strength</div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                <div class="counter-card">
                    <div class="icon admission-year">
                        <i class="fas fa-hospital"></i>
                    </div>
                    <div class="counter-number admission-year">3500</div>
                    <div class="counter-label">Admission/Year</div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                <div class="counter-card">
                    <div class="icon outpatient-year">
                        <i class="fas fa-user-injured"></i>
                    </div>
                    <div class="counter-number outpatient-year">65000</div>
                    <div class="counter-label">Outpatient/Year</div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                <div class="counter-card">
                    <div class="icon beds">
                        <i class="fas fa-bed"></i>
                    </div>
                    <div class="counter-number beds">400</div>
                    <div class="counter-label">Beds</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Counter End -->

    <!-- Welcome Start -->
    <div class="container-fluid bg-primary bg-appointment my-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container">
            <div class="row gx-5">
                <div class="col-lg-6 py-5">
                    <div class="py-5">
                        <h2 class="display-5 text-white mb-4">WELCOME TO BINGHAM UNIVERSITY TEACHING HOSPITAL (BHUTH)</h2>
                        <p class="text-white mb-0">At Bingham University Teaching Hospital,
                            our commitment to excellence has earned us both certification and accolades.
                            We offer trusted, top-tier medical services, ensuring the highest standards of care for our
                            patients and the best training for future healthcare professionals.</p>
                    </div>
                </div>
                <div class="col-lg-6" id="appointment">
                    <div class="h-100 d-flex flex-column justify-content-center text-center p-5 wow zoomIn" data-wow-delay="0.6s">
                        <img src="{% static 'main/img/staff/chief_medical_director.jpg' %}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Appointment End -->

 <!-- Service Start -->
    <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container">
            <div class="row g-5 mb-5">
                <div class="col-lg-5 wow zoomIn" data-wow-delay="0.3s" style="min-height: 400px;">
                    <div class="twentytwenty-container position-relative h-100 rounded overflow-hidden">
                        <img class="position-absolute w-100 h-100" src="{% static 'main/img/huth_buside_view_gate.jpg' %}" style="object-fit: cover;">
                        <img class="position-absolute w-100 h-100" src="{% static 'main/img/patience_waiting_area.jpg' %}" style="object-fit: cover;">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="section-title mb-5">
                        <h5 class="position-relative d-inline-block text-primary text-uppercase">Our Services</h5>
                        <h1 class="display-5 mb-0">We Offer The Best Quality Health Care Services</h1>
                    </div>
                    <div class="row g-5">
                        <div class="col-md-6 service-item wow zoomIn" data-wow-delay="0.6s">
                            <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/echocardiography_bhuth.jpg' %}" alt="">
                            </div>
                            <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Echocardiography</h5>
                            </div>
                        </div>
                        <div class="col-md-6 service-item wow zoomIn" data-wow-delay="0.9s">
                            <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/ambulance_bhuth.jpg' %}" alt="BHUTH Ambulance">
                            </div>
                            <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Ambulance & Emergencies</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-5 wow fadeInUp" data-wow-delay="0.1s">
                <div class="col-lg-7">
                    <div class="row g-5">
                        <div class="col-md-6 service-item wow zoomIn" data-wow-delay="0.3s">
                            <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/electrocardiography_bhuth.jpg' %}" alt="">
                            </div>
                            <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Electrocardiography</h5>
                            </div>
                        </div>
                        <div class="col-md-6 service-item wow zoomIn" data-wow-delay="0.6s">
                            <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/endoscopy.jpg' %}" alt="">
                            </div>
                            <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Endoscopy</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 service-item wow zoomIn" data-wow-delay="0.9s">
                    <div class="position-relative bg-primary rounded h-100 d-flex flex-column align-items-center justify-content-center text-center p-4">
                        <h3 class="text-white mb-3">Our Services </h3>
                        <p class="text-white mb-3">for your healthcare needs.</p>
                        <a href="{% url 'services' %}" class="btn btn-dark mb-3 py-3">For More Services</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Service End -->

    <!-- News & Events Start -->
    <div class="container-fluid bg-offer my-5 py-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-7 wow zoomIn" data-wow-delay="0.6s">
                    <div class="offer-text text-center rounded p-5">
                        <h1 class="display-5 text-white">News & Events</h1>
                        <p class="text-white mb-4">Stay updated on the latest news and events at Bingham University Teaching Hospital. Discover upcoming programs, research breakthroughs, and community engagement activities shaping the future of healthcare.</p>
                        <a href="{% url 'blog_home' %}" class="btn btn-light py-3 px-5">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- News & Events End -->

    <!-- Department Start -->
    <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container">
            <div class="row g-5 mb-5">
                <div class="col-lg-12">
                    <div class="section-title mb-5">
                        <h5 class="position-relative d-inline-block text-primary text-uppercase">Our Departments</h5>
                        <h1 class="display-5 mb-0">We Provide Exceptional Support and Resources.</h1>
                    </div>
                    <div class="row g-5">
                        <!-- Department Item 1 -->
                          <div class="col-md-6 col-lg-4 service-item wow zoomIn" data-wow-delay="0.6s">
                            <a href="{% url 'clinics' %}" class="text-decoration-none">
                              <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/clinic_bhuth.jpg' %}" alt="">
                              </div>
                              <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Clinics</h5>
                              </div>
                            </a>
                          </div>

                          <!-- Department Item 2 -->
                          <div class="col-md-6 col-lg-4 service-item wow zoomIn" data-wow-delay="0.9s">
                            <a href="{% url 'research' %}" class="text-decoration-none">
                              <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/research1.jpg' %}" alt="">
                              </div>
                              <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Research</h5>
                              </div>
                            </a>
                          </div>

                          <!-- Department Item 3 -->
                          <div class="col-md-6 col-lg-4 service-item wow zoomIn" data-wow-delay="0.9s">
                            <a href="{% url 'trainings' %}" class="text-decoration-none">
                              <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/training1.jpg' %}" alt="">
                              </div>
                              <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Trainings</h5>
                              </div>
                            </a>
                          </div>

                          <!-- Department Item 4 -->
                          <div class="col-md-6 col-lg-4 service-item wow zoomIn" data-wow-delay="0.9s">
                            <a href="{% url 'centres' %}" class="text-decoration-none">
                              <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/centre_bhuth.jpg' %}" alt="">
                              </div>
                              <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Centres</h5>
                              </div>
                            </a>
                          </div>

                          <!-- Department Item 5 -->
                          <div class="col-md-6 col-lg-4 service-item wow zoomIn" data-wow-delay="0.6s">
                            <a href="{% url 'clinical' %}" class="text-decoration-none">
                              <div class="rounded-top overflow-hidden">
                                <img class="img-fluid" src="{% static 'main/img/OBGYN_Pediatric.jpg' %}" alt="">
                              </div>
                              <div class="position-relative bg-light rounded-bottom text-center p-4">
                                <h5 class="m-0">Clinical</h5>
                              </div>
                            </a>
                          </div>

                        <!-- Add a custom class for the specific width and height -->
                        <div class="col-lg-5 service-item wow zoomIn custom-size" data-wow-delay="0.9s">
                            <div class="position-relative bg-primary rounded h-100 d-flex flex-column align-items-center justify-content-center text-center p-4">
                                <h3 class="text-white mb-3">Departments</h3>
                                <p class="text-white mb-3">for your healthcare needs.</p>
                                <a href="{% url 'departments' %}" class="btn btn-dark mb-3 py-3">For More Departments</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Department End -->


        <!-- Testimonial Start -->
    <div class="container-fluid bg-primary bg-testimonial py-5 my-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <div class="owl-carousel testimonial-carousel rounded p-5 wow zoomIn" data-wow-delay="0.6s">
                        <div class="testimonial-item text-center text-white">
                            <img class="img-fluid mx-auto rounded mb-4" src="{% static 'main/img/testimonial/testimonial1.jpg' %}" alt="">
                            <p class="fs-5">Exceptional care, compassionate staff, and effective treatment—my experience was truly outstanding.
                                Highly recommend their services for anyone seeking top-notch medical attention.</p>
                            <hr class="mx-auto w-25">
                            <h4 class="text-white mb-0">Simi David</h4>
                        </div>
                        <div class="testimonial-item text-center text-white">
                            <img class="img-fluid mx-auto rounded mb-4" src="{% static 'main/img/testimonial/testimonial2.jpg' %}" alt="">
                            <p class="fs-5">Fantastic experience with skilled professionals who genuinely care. My medical journey was handled with expertise and empathy. Highly recommend!</p>
                            <hr class="mx-auto w-25">
                            <h4 class="text-white mb-0">Nandir Manson</h4>
                        </div>
                        <div class="testimonial-item text-center text-white">
                            <img class="img-fluid mx-auto rounded mb-4" src="{% static 'main/img/testimonial/testimonial3.jpg' %}" alt="">
                            <p class="fs-5">Thorough, caring, and expert service. My medical needs were addressed with precision and kindness. A truly positive experience!</p>
                            <hr class="mx-auto w-25">
                            <h4 class="text-white mb-0">Pannam Paul</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- News and Events End -->

    <!-- Trainings Start -->
    <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container">
            <div class="row g-5">
                <h5 class="text-center d-inline-block text-primary text-uppercase">Our Partners</h5>
                <div class="d-flex justify-content-center gap-4 flex-wrap">
                    <a href="https://apin.org.ng/" target="_blank">
                        <img src="{% static 'main/img/partners/apin.png' %}" alt="APIN" class="partner-logo">
                    </a>
                    <a href="https://www.cbm.org/" target="_blank">
                        <img src="{% static 'main/img/partners/cbm.png' %}" alt="CBM" class="partner-logo">
                    </a>
                    <a href="https://handsnigeria.org/" target="_blank">
                        <img src="{% static 'main/img/partners/eye.png' %}" alt="eye" class="partner-logo">
                    </a>
                    <a href="https://fistulafoundation.org/" target="_blank">
                        <img src="{% static 'main/img/partners/fistula.png' %}" alt="fistula" class="partner-logo">
                    </a>
                    <a href="https://www.thejonahinheritance.org/" target="_blank">
                        <img src="{% static 'main/img/partners/jonah.png' %}" alt="Jonah" class="partner-logo">
                    </a>
                    <a href="https://www.sim.org/" target="_blank">
                        <img src="{% static 'main/img/partners/sim.png' %}" alt="SIM" class="partner-logo">
                    </a>
                </div>
            </div>

        </div>
    </div>
    <!-- Training End -->

 {% endblock main_content %}

     {% block script_js %}
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const counters = document.querySelectorAll('.counter-number');

        counters.forEach(counter => {
            const updateCount = () => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;
                const increment = target / 200;

                if (count < target) {
                    counter.innerText = Math.min(Math.ceil(count + increment), target);
                    setTimeout(updateCount, 10);
                } else {
                    counter.innerText = target;
                }
            };

            updateCount();
        });
    });
</script>
    {% endblock script_js %}