@php
    $counterElements = getContent('counter.element', orderById: false);
@endphp
<!--<div class="counter-section">-->
    
<!--    <div class="container">-->
<!--        <div class="row mb-none-30 text-center">-->
<!--            ddd-->
            <!--@foreach (@$counterElements ?? [] as $element)-->
            <!--    <div class="col-sm-4 mb-30">-->
            <!--        sss-->
            <!--        <div class="counter-card">-->
            <!--            <div class="counter-card__icon text--base">-->
            <!--                @php echo @$element->data_values->icon @endphp-->
            <!--            </div>-->
            <!--            <div class="counter-card__content">-->
            <!--                <h3 class="counter-amount">{{ __(@$element->data_values->heading) }}</h3>-->
            <!--                <p class="counter-content">{{ __(@$element->data_values->subheading) }}</p>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--@endforeach-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<style>
    
    /* Popup styles */
.popup {
  display: none; /* Hide by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Close button styles */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

    
</style>

<div class="text-center">
<!-- Button to trigger the popup -->
<!--<button  class="btn-primary mt-4 btn text-white" id="watch-video">Watch Video</button>-->
<!--</div>-->

<!-- Popup container -->
<div id="video-popup" class="popup">
  <!-- Close button -->
  <span class="close">&times;</span>
  <!-- Video embed or iframe -->
  <iframe src="https://cfxlegacy.pro/vid/guide.mp4" frameborder="0" allowfullscreen></iframe>
</div>

<script>
    // Get the popup and button elements
const videoPopup = document.getElementById('video-popup');
const watchVideoButton = document.getElementById('watch-video');

// Add event listener to the button
watchVideoButton.addEventListener('click', () => {
  // Show the popup
  videoPopup.style.display = 'block';
});

// Add event listener to the close button
document.querySelector('.close').addEventListener('click', () => {
  // Hide the popup
  videoPopup.style.display = 'none';
});

</script>