<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;">
					  <span class='title_icon_right_cont'>
						<i class="las la-braille title_icon white"></i>	
						<i class="las la-braille title_icon white" ></i>	
						<i class="las la-braille title_icon white" ></i>	
						<i class="las la-braille title_icon white" ></i>					
					  </span>			  
					  <span style='margin: 0 auto;display: inline-block;font-size: 26px;line-height: 30px;'>الاخبار
							<br> 
							<span style='color: var(--white);font-weight:200;font-size: 18px'>اخبار الجمعية</span>
					  </span>
					  <span class='title_icon_left_cont'>
						<i class="las la-braille title_icon white" ></i>	
						<i class="las la-braille title_icon white" ></i>	
						<i class="las la-braille title_icon white" ></i>	
						<i class="las la-braille title_icon white" ></i>					
					  </span>
					</h2>
				</div>

      <div class="owl-carousel owl6 owl-theme" style="padding-top:50px; padding-bottom:0px;">
        <?php
        	/*  اسم الجدول وبداية الكويرى */  
						$table='news';

						$news_query="select `id`,`title`,`desc`,`date`,`view`,`images`  from news where active=1 order by `priority` desc , `sort` desc , id desc limit 8";

						$news_result=mysqli_query($conn,$news_query);
						$news_num_rows=mysqli_num_rows($news_result);
						mysqli_data_seek($news_result,0);
						while($news_fetch = mysqli_fetch_array($news_result)) {
   		 $news_fetch = clean_array($news_fetch);	
								
								
     
  
							   /*استخراج جميع الصور*/  
							  $current_image=explode(",",$news_fetch['images']);
							  $current_image=explode('.',$current_image[1]);
															
							   /*الصورة الاساسية*/  
							  $first_image= $current_image[0].'_800.webp';
							  $page_title=$news_fetch['title'];
							  $date=explode(' ',$news_fetch['date']);
						
        ?>
        
						    <div class='news_div item'>   
								
								<div class="linear-background news_right" >
									

									<a   rel='nofollow' hrefx="<?php echo $website_url ;?>/news_article/<?php echo $news_fetch['id']; ?>/<?php echo  url_dash($news_fetch['title']); ?>"
										class='news_img' 
									>
									<div style="background-size:cover;height:25vh;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='news_left'>
									<div class=" news_date" ><span class='las la-calendar-alt' style='padding-left: 5px;'></span><?php echo $date[0]; ?></div>
									<div class='news_title'><a hrefx="<?php echo $website_url ;?>/news_article/<?php echo $news_fetch['id']; ?>/<?php echo  url_dash($news_fetch['title']); ?>" ><?php echo strip_tags($news_fetch['title']); ?></a></div>
									<div class='news_desc' ><?php echo strip_tags($news_fetch['desc']); ?></div>
									<a style='width:100%;' href="<?php echo $website_url ;?>/news_article/<?php echo $news_fetch['id']; ?>/<?php echo  url_dash($news_fetch['title']); ?>"  class=" read_more d-block d-md-none" >قراءة</a>
								</div>						   
						   </div>

        <?php } ?>
		
		
							
							
							
							
        </div>
	    <div id='news_preview' class=' item news_preview d-none d-lg-block' style='width:80%;margin:0 auto;'>   </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 ;?>/news/الأخبار" class="wow fadeInUp btn_2 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 ================== */
.owl6 {
  position: relative;
  width: 80%;
  margin: 0 auto; /* مركزة السلايدر */
}

.news_preview{
	width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border-radius: 20px;
}

.news_preview .news_right{
	width:30%;
	float:right;
}


.news_preview .news_left{
	width:70%;
	float:left;
	padding:20px;
}

.news_left .news_date{
	text-align:right;
	margin-top: 0px;
}

.news_left .news_title a{
	text-align:right;
}

.news_left .news_desc{
	text-align:right;
	margin-top: 0px;
	padding-top:0px;
	height:auto;
}

.news_div .news_desc{
	display:none;
}

.news_preview  .news_desc{
	display:block;
}

.news_preview  .news_left .read_more{
	display:block !important;
}



.owl-carousel.owl6 .item {
    margin-bottom: 30px;
    background: #fff;
    padding: 5px;
	border-radius: 0px 25px 25px 25px;

	width: 100%;
    float: left;
    border: solid 1px #ddd;
      border-raduis: solid 1px #ddd;
}

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

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

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

/* ===== أزرار السابق والتالي داخل السلايدر ===== */
.owl-carousel.owl6 .owl-nav button.owl-prev,
.owl-carousel.owl6 .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 #fff;
    color: var(--white) !important;
}

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

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

.owl-carousel.owl6 .owl-nav button.owl-prev{
	right:-70px  !important;
}
.owl-carousel.owl6 .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;
	
}

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

.news_div.active{
	background:#ffedb9 !important
}

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



</style>
<script>

	$(function(){

		$(".news_div").click(function(){

			$("#news_preview").html($(this).html());
			$(".news_div").removeClass('active');
			$(this).addClass('active');
			$("#news_preview .read_more").text("الذهاب لصفحة الخبر").css("width","auto");
			
		});
		
		$(".news_div").eq(0).click();
		
	});
</script>