    <section class="testi_area  overflow-hidden">
          <div class="container">
            <!-- Section Title -->
            <div class="section-title" style="opacity: 1; transform: none; will-change: auto;">
              <h2>What Student’s Say To Do <br>Their Courses</h2>
            </div>
        
            <div class="row g-4">
              <!-- Left Image Section -->
              <div class="col-lg-6 col-sm-12 col-xs-12 animated-box" style="opacity: 1; transform: none; will-change: auto;">
                <div class="ab_img">
                  <img src="http://localhost/sccst/wp-content/uploads/2025/12/lab.png" class="img-fluid" alt="image">
                </div>
              </div>
        
              <!-- Right Testimonial Slider Section -->
              <div class="col-lg-6 col-sm-12 col-xs-12 animated-box2" style="opacity: 1; transform: none; will-change: auto;">
                <div class="swiper swiper-initialized swiper-horizontal owl-carousel swiper-backface-hidden" id="testimonial-slider">
                  <div class="swiper-wrapper">
                    <?php
                    // Query Testimonials
                    $args = [
                        'post_type' => 'testimonial',
                        'posts_per_page' => -1,
                        'post_status' => 'publish'
                    ];
                    $testimonials = new WP_Query($args);

                    if($testimonials->have_posts()) :
                        while($testimonials->have_posts()) : $testimonials->the_post();

                            $name = get_field('name');
                           
                            $text = get_field('testimonial_text');
                            $position = get_field('position');
                            $rating = get_field('rating'); // 1-5
                    ?> 
                    <!-- Testimonial 1 -->
                    <div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
                      <img src="./assets/images/message.png" alt="">
                      <div class="testimonial_content">
                           <?php 
                          for ($i = 1; $i <= 5; $i++) {
                              if ($i <= $rating) {
                                  echo '<i class="bi bi-star-fill" style="color:#ffc107"></i>';
                              } else {
                                  echo '<i class="bi bi-star" style="color:#ccc"></i>';
                              }
                          }
                          ?>
                        <p> <?php the_content(); ?></p>
                      </div>
                      <div class="testi_pic_title">
                        <img src="<?= get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>" alt="img">
                        <h4><?php echo esc_html($name); ?></h4>
                        <p><?php echo esc_html($position); ?></p>
                      </div>
                    </div>
                    <?php
                  endwhile;
                  wp_reset_postdata();
              endif;
              ?>
                      <!-- Testimonial 1 -->
                    <div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
                      <img src="./assets/images/message.png" alt="">
                      <div class="testimonial_content">
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                        <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur sapiente adipisci cumque! Ratione expedita fuga libero eveniet id quisquam delectus omnis, nihil, voluptate reprehenderit maiores temporibus velit aspernatur a commodi!</p>
                      </div>
                      <div class="testi_pic_title">
                        <img src="./assets/image/image3.png" alt="img">
                        <h4>hello hello</h4>
                        <p>developer</p>
                      </div>
                    </div>
                      <!-- Testimonial 1 -->
                    <div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
                      <img src="./assets/images/message.png" alt="">
                      <div class="testimonial_content">
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                        <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur sapiente adipisci cumque! Ratione expedita fuga libero eveniet id quisquam delectus omnis, nihil, voluptate reprehenderit maiores temporibus velit aspernatur a commodi!</p>
                      </div>
                      <div class="testi_pic_title">
                        <img src="./assets/image/image3.png" alt="img">
                        <h4>hello hello</h4>
                        <p>developer</p>
                      </div>
                    </div>
                      <!-- Testimonial 1 -->
                    <div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
                      <img src="./assets/images/message.png" alt="">
                      <div class="testimonial_content">
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                        <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur sapiente adipisci cumque! Ratione expedita fuga libero eveniet id quisquam delectus omnis, nihil, voluptate reprehenderit maiores temporibus velit aspernatur a commodi!</p>
                      </div>
                      <div class="testi_pic_title">
                        <img src="./assets/image/image3.png" alt="img">
                        <h4>hello hello</h4>
                        <p>developer</p>
                      </div>
                    </div>
                      <!-- Testimonial 1 -->
                    <div class="swiper-slide swiper-slide-active testimonial" style="width: 636px; margin-right: 40px;">
                      <img src="./assets/images/message.png" alt="">
                      <div class="testimonial_content">
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                          <i class="bi bi-star"></i>
                        <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur sapiente adipisci cumque! Ratione expedita fuga libero eveniet id quisquam delectus omnis, nihil, voluptate reprehenderit maiores temporibus velit aspernatur a commodi!</p>
                      </div>
                      <div class="testi_pic_title">
                        <img src="./assets/image/image3.png" alt="img">
                        <h4>hello hello</h4>
                        <p>developer</p>
                      </div>
                    </div>
        
                
        
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
