/* Add custom CSS styles below */ 
<!-- قسم سلايدر الأقلام -->
<div style="direction: rtl; max-width: 1200px; margin: 0 auto; text-align: center;">
  <h2 style="font-size: 1.8rem; margin-bottom: 1rem; color: #414042;">✒️ أقلام محفورة بالليزر</h2>
  <p style="color: #6b6b6b; margin-bottom: 2rem;">لمسة فخامة تحمل اسمك — هدية تعبّر دون كلمات</p>

  <div class="swiper pens-swiper" style="padding-bottom: 40px;">
    <div class="swiper-wrapper">
      <!-- شريحة 1 -->
      <div class="swiper-slide">
        <img src="ضع-رابط-صورة-القلم-هنا.jpg" alt="قلم محفور بالليزر" style="width:100%; border-radius: 12px;">
        <p style="margin-top: 10px;">قلم محفور بتصميم فاخر</p>
      </div>

      <!-- شريحة 2 -->
      <div class="swiper-slide">
        <img src="ضع-رابط-صورة-القلم-هنا.jpg" alt="قلم فاخر" style="width:100%; border-radius: 12px;">
        <p style="margin-top: 10px;">تفاصيل راقية.. هدية تليق بالذوق الرفيع</p>
      </div>

      <!-- شريحة 3 -->
      <div class="swiper-slide">
        <img src="ضع-رابط-صورة-القلم-هنا.jpg" alt="قلم أنيق" style="width:100%; border-radius: 12px;">
        <p style="margin-top: 10px;">نقش ليزر مميز بإطلالة أنيقة</p>
      </div>
    </div>

    <!-- الأسهم -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
</div>

<!-- ربط مكتبة Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- إعداد السلايدر -->
<script>
  var swiper = new Swiper('.pens-swiper', {
    slidesPerView: 3,
    spaceBetween: 20,
    loop: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      0: { slidesPerView: 1 },
      640: { slidesPerView: 2 },
      1024: { slidesPerView: 3 },
    },
  });
</script>