
         <!-- footer section -->
        <div class="footer section-padding">
          <div class="container">
            <div class="row g-4">
              
              <!-- Footer Column 1: Logo and Social Links -->
              <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="single_footer footer-left-image">
                  <a href="<?= home_url();?>"><img src="http://localhost/sccst/wp-content/uploads/2025/12/scc.png" alt="Logo"></a>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis dignissim.</p>
                  <div class="social_profile">
                    <ul>
                      <li><a class="f_facebook" href="/"><i class="bi bi-facebook"></i></a></li>
                      <li><a class="f_twitter" href="/"><i class="bi bi-twitter"></i></a></li>
                      <li><a class="f_instagram" href="/"><i class="bi bi-instagram"></i></a></li>
                      <li><a class="f_linkedin" href="/"><i class="bi bi-linkedin"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
        
              <!-- Footer Column 2: About Eduleb -->
              <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="single_footer1">
                  <h4>About Eduleb</h4>
                  <ul>
                    <li><a href="/">About us</a></li>
                    <li><a href="/">Event</a></li>
                    <li><a href="/">Blog</a></li>
                    <li><a href="/">Contact us</a></li>
                  </ul>
                </div>
              </div>
        
              <!-- Footer Column 3: Popular Courses -->
              <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="single_footer1">
                  <h4>Popular Courses</h4>
                  <ul>
                    <li><a href="/">BIT</a></li>
                    <li><a href="/">Arts &amp; design</a></li>
                    <li><a href="/">BTechEdIT</a></li>
                    <li><a href="/">Digital Marketing</a></li>
                  </ul>
                </div>
              </div>

        
              <!-- Footer Column 4: Contact Info -->
              <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="single_footer1">
                  <h4>Contact Info</h4>
                  <div class="sf_contact">
                  <i class="fa-solid fa-location-dot"></i>
                    <p>Birgunj-15, Birgunj, Parsa</p>
                  </div>
                  <div class="sf_contact">
                    <i class="fa-solid fa-phone"></i>
                    <p>+97*********</p>
                  </div>
                  <div class="sf_contact">
                  <i class="fa-brands fa-whatsapp"></i>
                    <p><a href="tel:+88457845695">Contact via Whatsapp</a></p>
                  </div>
                  <div class="sf_contact">
                  <i class="fa-regular fa-envelope"></i>
                    <p>example@yourmail.com</p>
                  </div>
                </div>
              </div>
        
              <!-- Footer Column 5: Download App -->
              <!-- <div class="col-lg-2 col-sm-6 col-xs-12">
                <div class="single_footer">
                  <h4>Download App</h4>
                  <p>Download our app from the App Store and Google Play Store.</p>
                  <a href="/"><img src="./assets/images/googleplay.jpg" class="foot_img mb-3" alt="Google Play"></a>
                  <a href="/"><img src="./assets/images/app-store.jpg" class="foot_img" alt="App Store"></a>
                </div>
              </div> -->
        
            </div>
          </div>
        </div>

        <div class="foot_copy">
          <div class="footer_copyright">
            <p>© 2025. All Rights Reserved.</p>
          </div>
        </div>




<!-- popup fancybox -->
<?php if( is_front_page() ) : ?>
    <div style="display:none;">
        <?php
        $args = [
            'post_type'      => 'advertise',
            'posts_per_page' => 1,
            'post_status'    => 'publish',
        ];

        $advertise_query = new WP_Query($args);

        if( $advertise_query->have_posts() ) :
            while( $advertise_query->have_posts() ) : $advertise_query->the_post();
                $popup_image = get_field('image_ads'); // ACF field from this post
                if( $popup_image ) : ?>
                    <a href="<?php echo esc_url($popup_image['url']); ?>" rel="lightbox" id="popup">
                        popup image
                    </a>
                <?php endif;
            endwhile;
            wp_reset_postdata();
        endif;
        ?>
    </div>
<?php endif; ?>


<!-- Apply Now Modal -->
<div class="modal fade" id="applyModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content modal-content121">

      <!-- Modal Header -->
      <div class="modal-header border-0">
        <h3 class="modal-title w-100 text-center fw-bold">
          Pre-registration
        </h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body px-4 pb-4">
        <form id="preregistration-form">

          <!-- Guardian Name -->
          <div class="mb-3">
            <label class="form-label ">
              Name of the guardian <span class="text-danger">*</span>
            </label>
            <input type="text" name="guardian_name" class="form-control custom-input" required>
          </div>

          <!-- Child Name -->
          <div class="mb-3">
            <label class="form-label">
              Name of the student<span class="text-danger">*</span>
            </label>
            <input type="text" name="student_name" class="form-control custom-input" required>
          </div>

          <!-- Email -->
          <div class="mb-3">
            <label class="form-label">
              Email <span class="text-danger">*</span>
            </label>
            <input type="email" name="email" class="form-control custom-input" required>
          </div>

          <!-- Contact -->
          <div class="mb-3">
            <label class="form-label">
              Contact number <span class="text-danger">*</span>
            </label>
            <input type="tel" name="contact" class="form-control custom-input contact" required>
          </div>

          <!-- Grade -->
          <div class="mb-4">
            <label class="form-label">
              Choose your course: <span class="text-danger">*</span>
            </label>
            <select name="course" class="form-select custom-input" required>
              <option>BIT</option>
              <option>BTechEdIT</option>
            </select>
          </div>

          <!-- reCAPTCHA Placeholder -->
          <!-- <div class="mb-4">
            <div class="border rounded p-3 d-inline-flex align-items-center gap-3">
              <input type="checkbox">
              <span>I’m not a robot</span>
              <small class="text-muted ms-3">reCAPTCHA</small>
            </div>
          </div> -->

          <!-- Submit -->
          <button type="submit" class="submit btn w-100 py-2 fw-bold">
            SEND
          </button>

        </form>
      </div>

    </div>
  </div>
</div>

    <!-- Video Modal -->
    <div class="modal fade modal1" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
        <div class="modal-dialog custom-video-modal">
            <div class="modal-content" id="model-content1">
                <div class="modal-header custom-modal-header">
                    <h5 class="modal-title" id="videoModalLabel">Educational Video</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Video iframe for YouTube videos, Video element for camera videos -->
                    <div id="videoContainer" class="custom-video-container">
                        <iframe id="videoIframe" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        <video id="videoElement" controls style="display: none;">
                            <source id="videoSource" src="" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>

          <!-- Link to Bootstrap JS (optional) -->
           <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
           <!-- popup ads -->
            
            <script>
              $(document).ready(function(){
                $("#popup").fancybox().trigger('click');
              });
            </script>
          <script src="/bootstraps/js/bootstrap.bundle.min.js">

            // popup modal of home
      
                  window.addEventListener("load", function () {
              if (!localStorage.getItem("noticeSeen")) {
                  document.getElementById("noticeOverlay").style.display = "flex";
              }
            });

function closeNotice() {
  localStorage.setItem("noticeSeen", "true");
  document.getElementById("noticeOverlay").style.display = "none";
}
document.getElementById("noticeOverlay").addEventListener("click", function(e){
  if(e.target === this){
      closeNotice();
  }
});



      // Add the 'active' class when the page loads
      window.onload = function () {
      document.getElementById('heroSection').classList.add('active');
  };



// Event swiper
  // Event slider part 
      var swiper = new Swiper(".swiper", {
            slidesPerView: 1, // One slide at a time (each slide contains 2 events)
            loop: true, // Infinite loop
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            autoplay: {
                delay: 3000, // Auto slide every 3 seconds
                disableOnInteraction: false,
            },
        });
    
        // Pause autoplay on hover over an event card and resume when hover ends
        var eventCards = document.querySelectorAll('.event-card');
    
        eventCards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                swiper.autoplay.stop(); // Stop autoplay
            });
    
            card.addEventListener('mouseleave', () => {
                swiper.autoplay.start(); // Restart autoplay
            });
        });

 

          </script>
          <script>
  const animatedItems = document.querySelectorAll('.animate');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, { threshold: 0.2 });

  animatedItems.forEach(item => observer.observe(item));
</script>


<!-- preregistration -->
<script>
jQuery(document).ready(function($){
    $('#preregistration-form').on('submit', function(e){
        e.preventDefault();
        var data = $(this).serialize();
        $.post('<?php echo admin_url("admin-ajax.php"); ?>', 
            data + '&action=submit_preregistration', 
            function(response){
                if(response.success){
                    alert(response.data);
                    $('#preregistration-form')[0].reset();
                    $('#applyModal').modal('hide');
                } else {
                    alert(response.data);
                }
            }
        );
    });
});
</script>
<script>

  // counter or number increaser 
    document.addEventListener('DOMContentLoaded', function () {
        const counters = document.querySelectorAll('.counter-num'); // Select all counter elements
        const speed = 200; // Adjust the speed of the animation
    
        counters.forEach(counter => {
            const target = +counter.getAttribute('data-target'); // Get the target value from data-target
            let count = 0; // Initialize the count
    
            const updateCount = () => {
                const increment = target / speed; // Calculate increment step
    
                if (count < target) {
                    count += increment; // Increment the count
                    counter.innerText = Math.ceil(count); // Update the counter text
                    setTimeout(updateCount, 10); // Recursive call for animation
                } else {
                    counter.innerText = target+'+'; // Ensure it ends exactly at the target
                }
            };
    
            updateCount();
        });
    });


    // subdropdown-menu toggle of side-bar
    document.addEventListener("DOMContentLoaded", () => {
    // Select all nav-link elements with dropdown functionality
    const navLinks = document.querySelectorAll(".nav-item.dropdown .nav-link");

    navLinks.forEach((navLink) => {
        navLink.addEventListener("click", (event) => {
            event.preventDefault(); // Prevent default anchor behavior

            // Toggle the visibility of the subdropdown-menu
            const subMenu = navLink.nextElementSibling;
            if (subMenu && subMenu.classList.contains("subdropdown-menu")) {
                subMenu.classList.toggle("show");

                // Optionally, close other open menus
                navLinks.forEach((link) => {
                    const otherMenu = link.nextElementSibling;
                    if (otherMenu && otherMenu !== subMenu) {
                        otherMenu.classList.remove("show");
                    }
                });
            }
        });
    });
});

// swiper for testimonial and global company logo 
function initializeSwiper(swiperId, autoplayDelay, slidesPerView, breakpointsConfig = {}) {
  return new Swiper(swiperId, {
    slidesPerView: slidesPerView,  // Dynamic slides per view
    spaceBetween: 40,  // Space between slides
    loop: true,  // Loop the slides indefinitely
    autoplay: {
      delay: autoplayDelay,  // Dynamic autoplay delay
      disableOnInteraction: false,  // Continue autoplay after user interaction
    },
    touchEventsTarget: 'container',  // Enables touch/swipe events
    navigation: {
      nextEl: `${swiperId} .swiper-button-next`,  // Navigation for this swiper
      prevEl: `${swiperId} .swiper-button-prev`,
    },
    pagination: {
      el: `${swiperId} .swiper-pagination`,  // Pagination for this swiper
      clickable: true,
    },
    direction: 'horizontal',  // Horizontal direction (can be changed to 'vertical')
    breakpoints: breakpointsConfig,  // Apply breakpoints only if passed
  });
}

// Initialize Swipers with dynamic settings
const swiper1 = initializeSwiper('#testimonial-slider', 3000, 1);  // 1 slide per view, 3 seconds autoplay delay

// Add breakpoints only to the logo-slider
const swiper2 = initializeSwiper('#logo-slider', 4000, 4, {
  // Breakpoints for logo-slider only
  320: {
    slidesPerView: 2,  // Show 2 slides per view
    spaceBetween: 20,  // Adjust space between slides
  },
  992: {
    slidesPerView: 3,  // Show 3 slides per view
    spaceBetween: 30,  // Adjust space between slides
  },
  1200: {
    slidesPerView: 4,  // Default: 4 slides per view
    spaceBetween: 40,  // Default space between slides
  },
});
    </script>
                <script>
            const itemsPerPage = 2;
            const items = document.querySelectorAll(".gallery-item");
            const pagination = document.getElementById("pagination");
            const totalPages = Math.ceil(items.length / itemsPerPage);
            let currentPage = 1;

            function showPage(page) {
                currentPage = page;

                items.forEach((item, index) => {
                item.style.display =
                    index >= (page - 1) * itemsPerPage &&
                    index < page * itemsPerPage
                    ? ""
                    : "none";
                });

                renderPagination();
            }

            function renderPagination() {
                pagination.innerHTML = "";

                const createItem = (label, page, disabled = false, active = false) => {
                const li = document.createElement("li");
                li.className = "page-item";
                if (disabled) li.classList.add("disabled");
                if (active) li.classList.add("active");

                const a = document.createElement("a");
                a.className = "page-link";
                a.href = "#";
                a.innerHTML = label;

                a.onclick = e => {
                    e.preventDefault();
                    if (!disabled) showPage(page);
                };

                li.appendChild(a);
                pagination.appendChild(li);
                };

                // Prev
                createItem("«", currentPage - 1, currentPage === 1);

                let start = Math.max(1, currentPage - 2);
                let end = Math.min(totalPages, currentPage + 2);

                if (start > 1) {
                createItem("1", 1);
                if (start > 2) createItem("...", null, true);
                }

                for (let i = start; i <= end; i++) {
                createItem(i, i, false, i === currentPage);
                }

                if (end < totalPages) {
                if (end < totalPages - 1) createItem("...", null, true);
                createItem(totalPages, totalPages);
                }

                // Next
                createItem("»", currentPage + 1, currentPage === totalPages);
            }

            showPage(1);
            </script>
            <script>
            document.addEventListener("DOMContentLoaded", function() {
                var videoModal = document.getElementById('videoModal');
                var videoIframe = document.getElementById('videoIframe');

                videoModal.addEventListener('show.bs.modal', function(event) {
                    var button = event.relatedTarget; // clicked element
                    var videoSrc = button.getAttribute('data-video'); // get video URL
                    if(videoSrc) {
                        // Convert short YouTube URL to embed format if needed
                        if(videoSrc.includes("youtu.be")) {
                            var videoId = videoSrc.split("/").pop().split("?")[0];
                            videoSrc = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";
                        } else if(videoSrc.includes("watch?v=")) {
                            videoSrc = videoSrc.replace("watch?v=", "embed/") + "?autoplay=1";
                        }

                        videoIframe.src = videoSrc;
                        videoIframe.style.display = "block";
                    }
                });

                videoModal.addEventListener('hidden.bs.modal', function() {
                    videoIframe.src = ""; // Stop video when modal is closed
                });
            });
            </script>
</body>
</html>