<section id="services" class=" slide_section_multi " >
  <div class='container-fluid' style='max-width:1200px;background:transparent' > 
	<div class='row' style='margin:0 auto;width: 100%;position:relative;' >

	<div class='slide_side_title'><span>أرقام وإحصائيات</span></div>
	<div class="owl-carousel owl3 backcolor_3 owl-theme">
		
		<?php
			//بداية الاستعلام
			$query_achievements="select `id`,`title`,`achieve`,`desc` from achievements";		
			$result_achievements=mysqli_query($conn,$query_achievements);

			

			
   /*بداية التكرار */  
	while($fetch_achievements = mysqli_fetch_array($result_achievements)) {
   		 $fetch_achievements = clean_array($fetch_achievements);
		
		?>
		<div class="item">
			<div style='display:table-cell;vertical-align:middle;text-align:center;'>
				<div class='acheive_num'><?php echo $fetch_achievements['achieve']; ?></div>
				<div class='acheive_title'><?php echo $fetch_achievements['title']; ?></div>
			</div>
		</div>
			<?php }?>
		

	</div>
	

	</div>

  </div>
	  
	  
</section>	


<style>

.acheive_num{
	
    border-right: solid 3px var(--blue_light);
    padding-right: 10px;
    margin-bottom: 5px;
    font-size: 30px;
    font-family: arial;
    font-weight: bold;
    height: 25px;
    line-height: 30px;
	display:inline-block;
	color:var(--white);

}

.acheive_title{
	padding-right: 15px;
    font-size: 15px;
	color:var(--white);
}


.slide_side_title{
	padding:10px;
	height: 120px;
    position: absolute;
    width: 22%;
    bottom: 0px;
    background:var(--red_bg);
    z-index: 100;
    right: 0px;
	color:var(--white);
    line-height: 32px;
    font-size: 24px;
    font-family: 'kufi';
	display:table;

}

.slide_side_title span{
	display:table-cell;
	vertical-align:middle;
}


.owl3 .owl-stage{
	height:120px;

}

.owl-carousel.owl3 .item h4 {
    display: block;
   
    min-width: 100%;
	
	color:#333;
	padding:10px;
	font-size:16px;
	line-height:20px;
}

.owl-carousel.owl3 .item img{
	
	width:100%;
}

.owl-carousel.owl3 .item{
	margin-bottom: 0px;
    float: left;
    padding: 5px;
    height: 120px;
    border: 0;
    display: table;
    width: 100%;
    text-align: right;
    color:var(--white)f;
	border-left: solid 1px #151426;
}

.owl-carousel.owl3 .item img{
	border-radius:5px;
}

 .owl-carousel.owl3 .owl-item{
	 float:left
 }
 
 
 .owl-carousel.owl3 .owl-carousel .owl-nav {
	 position:relative !important;
	 margin-top:-420px;
	 background:000;
	 
 }
 
 .owl-carousel.owl3 .owl-nav{

	 position:absolute !important;
	 top:-70px;
	 margin-top:0px;
 }
 
 
 .owl-carousel.owl3 .owl-nav .owl-prev{
		
		font-size:30px !important;
		color:var(--white) !important;
		position:absolute;
		right:0px !important;
		height:40px;
		width:40px;	
		top:0px;
		background:var(--red_bg);		
		 -webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;
		border-radius: 5px;
		
	}
	
 .owl-carousel.owl3 .owl-nav .owl-next{
		
		font-size:30px !important;
		color:var(--white) !important;
		position:absolute;
		right:42px !important;
		left:auto !important;
		top:0px;		
		height:40px;
		width:40px;
		background:var(--red_bg);
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;
		border-radius: 5px;
		
	}
	
	.owl-carousel.owl3 .owl-nav .owl-prev:hover , .owl-carousel.owl3 .owl-nav .owl-next:hover{
		background:#d56d62;
	}
	
	
 
</style>