<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(--magenta);font-weight:200;font-size: 14px'>قصص نجاح ابناء الجمعية</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 owl7 owl-theme wow fadeInUp " data-wow-duration="1s" data-wow-delay="0.2s" style="padding-top:50px; padding-bottom:0px;">

        
						 <?php
						
						
						/*  اسم الجدول وبداية الكويرى */  
						$table='impressions';
						$impressions_query="select `id`,`name`,`job_desc`,`desc`,`evaluation`,`view`,`images`  from impressions where active=1 order by `priority` desc , `sort` desc , id desc limit 8 ";

						$impressions_result=mysqli_query($conn,$impressions_query);
						$impressions_num_rows=mysqli_num_rows($impressions_result);
						
							while($impressions_fetch = mysqli_fetch_array($impressions_result)) {
   		 $impressions_fetch = clean_array($impressions_fetch);	
								
								
															
							  /*الصورة الاساسية*/  
							  $first_image= 'img_'.$impressions_fetch['images'].'.webp';
															
					?>
       
        
						    <div class=' item'>   
								
							 
								<div class="item-boxes row" data-wow-delay="0.1s">
									<div class='col col-12 col-md-6 order-1 order-sm-0' style='padding-top:70px;'>
										<span class='light_color'>
											<p><?php echo $impressions_fetch['job_desc'] ;?></p>
											<h3 class='impressions_desc'><?php echo $impressions_fetch['desc'] ;?></h3>
											<h3><?php echo $impressions_fetch['name'] ;?></h3>
										</span>
									</div>	

									<div class='col col-12 col-md-6 order-0 order-sm-1'>
										<div class="icon" style='position:relative;'>
											<img style='position: absolute;bottom: -80px;left: 50%;transform: translate(-50%, 0%);height: 130%;width: auto;'
											src='<?php #echo $img_path; ?>img/impressions/<?php echo $first_image; ?>' />
										</div>
									</div>					 

								</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 ;?>/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 ================== */
.owl7 {
  position: relative;
  width: 80%;
  margin: 0 auto; /* مركزة السلايدر */
}

.owl-carousel.owl7 .item {
  margin-bottom: 30px;
  
  padding: 5px;
  border-radius: 15px;
  width: 100%;
  float: left;

  
}

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

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

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

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

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

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

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


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

</style>
