<section id="departs_services" class="slide_section_multi backcolor_0">
  <div class="container-fluid" style="max-width:1200px; background:transparent;"> 
    <div class="row" style="margin:0 auto; width:100%;">
      
      <div class="section-header" style="text-align:center;">
        <h2 class="section-title slide" style="visibility: visible; animation-duration: 1000ms; animation-delay: 0.3s; animation-name: fadeIn;">
          <i class="las la-compress-arrows-alt title_icon"></i> خدمات الجمعية
          <a style="float:left" rel="noopener" href="<?php echo $website_url ;?>/departs_services/خدمات-الجمعية" class="d-none d-lg-block wow fadeInUp btn_3 dark more_posts wow fadeInUp animated" data-wow-duration="500ms">الانتقال لخدمات الجمعية<span class="las la-arrow-left"></span> </a>
        </h2>
      </div>

      <div class="filters">
        <button data-filter="all" class="active"><i class="las la-compress-arrows-alt title_icon"></i> الكل</button>
        <button data-filter="electronics"><i class="las la-compress-arrows-alt title_icon"></i> إلكترونيات</button>
        <button data-filter="clothes"><i class="las la-compress-arrows-alt title_icon"></i> ملابس</button>
      </div>

      <div class="owl-carousel owl5 owl-theme" style="padding-top:50px; padding-bottom:0px;">
        <?php
        $table='departs_services';
        $departs_services_query="SELECT `id`,`title`,`desc`,`view`,`images` FROM departs_services WHERE active=1 ORDER BY `priority` DESC, `sort` DESC, id DESC LIMIT 8";
        $departs_services_result=mysqli_query($conn,$departs_services_query);
        $departs_services_num_rows=mysqli_num_rows($departs_services_result);
        mysqli_data_seek($departs_services_result,0);
        while($departs_services_fetch = mysqli_fetch_array($departs_services_result)) {
   		 $departs_services_fetch = clean_array($departs_services_fetch); {
          $current_image=explode(",",$departs_services_fetch['images']);
          $current_image=explode('.',$current_image[1]);
          $first_image= $current_image[0].'_800.webp';
        ?>
        <div class="departs_services_div item" data-category="electronics">
          <div class="linear-background">
            <a rel="nofollow" href="<?php echo $website_url ;?>/departs_services/<?php echo $departs_services_fetch['id']; ?>/<?php echo url_dash($departs_services_fetch['title']); ?>" class="departs_services_img">
              <div style="background-size:cover; height:120px; width:100%; background:url('<?php echo $img_path; ?><?php echo $table; ?>/<?php echo $first_image ; ?>') no-repeat center center /cover;"></div>
            </a>
          </div>
          <div class="departs_services_div_background">
            <div class="departs_services_title">
              <a href="<?php echo $website_url ;?>/departs_services/<?php echo $departs_services_fetch['id']; ?>/<?php echo url_dash($departs_services_fetch['title']); ?>">
                <?php echo strip_tags($departs_services_fetch['title']); ?>
              </a>
            </div>
            <div class="departs_services_desc"><?php echo strip_tags($departs_services_fetch['desc']); ?></div>
					
			<a class="btn_3 departs_services_btn" rel="nofollow" href="<?php echo $website_url ;?>/departs_services/<?php echo $departs_services_fetch['id']; ?>/<?php echo url_dash($departs_services_fetch['title']); ?>" >
            المزيد <i class="las la-arrow-left"></i>
			</a>
			
			<span class="btn_3 departs_services_btn share_btn" onclick="copyText()" rel="nofollow" href="<?php echo $website_url ;?>/departs_services/<?php echo $departs_services_fetch['id']; ?>/<?php echo url_dash($departs_services_fetch['title']); ?>" >
				<i class="las la-share-alt-square"></i>
			</span>
			
			
			
          </div>
        </div>
        <?php } ?>
      </div>


        <div class='d-block d-lg-none' style="text-align:left; width:100%; margin-top:20px;margin-left:40px;">
          <a rel="noopener" href="<?php echo $website_url ;?>/departs_services/خدمات-الجمعية" class="wow fadeInUp btn_3 more_posts_wide wow fadeInUp animated" data-wow-duration="500ms">المزيد<span class="las la-arrow-left"></span></a>
        </div>
		



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

<style>
/* ================== Owl Carousel Custom ================== */
.owl5 {
  position: relative;
  width: 80%;
  margin: 0 auto; /* مركزة السلايدر */
}

.owl-carousel.owl5 .item {
  margin-bottom: 30px;
  background: #fff;
  padding: 5px;
  border-radius: 15px;
  width: 100%;
  float: left;
  
}

.owl-carousel.owl5 .item img {
  width: 100%;
  border-radius: 15px;
}

.owl-carousel.owl5 .item h4 {
  display: block;
  min-width: 100%;
  color: var(--gray);
  padding: 10px;
  font-size: 16px;
  line-height: 20px;
}

.owl-carousel.owl5 .owl-item {
  float: left;
}

/* ===== أزرار السابق والتالي داخل السلايدر ===== */
.owl-carousel.owl5 .owl-nav button.owl-prev,
.owl-carousel.owl5 .owl-nav button.owl-next {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 126px;
    width: 55px;
    height: 55px;
    font-size: 20px !important;
    line-height: 5px;
    z-index: 10;
    left: -70px !important;
    border: solid 1px #ddd;
    color: var(--red) !important;
}

.owl-carousel.owl5 .owl-nav button.owl-prev { left: 0; }
.owl-carousel.owl5 .owl-nav button.owl-next { right: 0; }

.owl-carousel.owl5 .owl-nav button span {
  font-size: 25px;
}

.owl-carousel.owl5 .owl-nav button.owl-prev{
	right:-70px  !important;
}
.owl-carousel.owl5 .owl-nav button.owl-next{
	left:-70px !important;
}

.departs_services_title{
	margin-top:20px;
	font-size:16px;
	text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.departs_services_div_background{
	padding:10px;
}
.departs_services_desc{
	margin-top:10px;
	color:var(--gray);
	font-size:14px;
	text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	height:37px;
	
}

.departs_services_btn{
	height:40px;
	line-height:40px;
	margin-top:40px;
	margin-bottom:10px;
}


@media screen and (min-width: 1px) and (max-width: 575px) {
	.owl5 .owl-prev , .owl5 .owl-next{
		display:none;
	}
	
	.owl5{
		width:100%;
	}

}



</style>


<script>
$(document).ready(function(){
  $(".share_btn").click(function(){
    // النص اللي ينسخ
    var text = $(this).attr("href");
    navigator.clipboard.writeText(text);

    var $this = $(this);
    $this.addClass("active");

    // إزالة الكلاس بعد 2 ثانية
    setTimeout(function(){
      $this.removeClass("active");
    }, 2000);
  });
});
</script>

