<?php  /****************************************** صفحة سلايدر الخاص بشركاء النجاح تعؤض فى الصفحة الرئيسية ***************************************/  ?>
<section id="services" class=" slide_section_multi  " style='background:#f7fafc;padding-bottom:100px;' >
	<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" ></i>	
				<i class="las la-braille title_icon" ></i>	
				<i class="las la-braille title_icon" ></i>	
				<i class="las la-braille title_icon" ></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" ></i>	
				<i class="las la-braille title_icon" ></i>	
				<i class="las la-braille title_icon" ></i>	
				<i class="las la-braille title_icon" ></i>					
			  </span>
			</h2>
		</div>
			
		<div class="owl-carousel owl4 owl-theme" style='padding-top:50px;padding-bottom:0px;'>

				<?php
					// بداية الاستعلام
					$query_partners="select id,title,images,website from partners order by `priority` desc , `sort` desc , id desc ";		
					$result_partners=mysqli_query($conn,$query_partners);
					// عدد الصفوف
					$partners_num_rows=mysqli_num_rows($result_partners);

					
				   /*بداية التكرار */  
				   while($fetch_partners = mysqli_fetch_array($result_partners)) {
   		 $fetch_partners = clean_array($fetch_partners);
				?>
					<div class="item">
						<a href="<?php echo $fetch_partners['website'] ?>" rel='nofollow'  class='inactive'><img height='100%' width='auto' loading='lazy' alt='<?php echo $fetch_partners['title']; ?>' src='<?php echo $img_path; ?>partners/img_<?php echo $fetch_partners['images']; ?>.webp'/></a>
					</div>
				<?php }?>
				
			
			</div>

		
		</div>

	</div>
	  
	  
</section>


<style>

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

.owl-carousel.owl4 .item img{
	height: 100% !important;
    width: auto !important;
	margin: 0 auto;
}

.owl-carousel.owl4 .item{
    overflow: hidden;
    margin-bottom: 30px;
    float: left;
    width: 100%;
    border: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    border-radius: 12px;
    padding: 10px;
}

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

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

	 position:absolute !important;
	 top:-70px;
	 margin-top:0px;
 }
 
 
 .owl-carousel.owl4 .owl-nav .owl-prev{
		
		font-size:30px !important;
		color:#fff !important;
		position:absolute;
		right:0px !important;
		height:40px;
		width:40px;	
		top:0px;
		background:#f47d3d;		
		 -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;
		display:none;
		
	}
	
 .owl-carousel.owl4 .owl-nav .owl-next{
		
		font-size:30px !important;
		color:#fff !important;
		position:absolute;
		right:42px !important;
		left:auto !important;
		top:0px;		
		height:40px;
		width:40px;
		background:#f47d3d;
		-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;
		display:none;
		
	}
	
	.owl-carousel.owl4 .owl-nav .owl-prev:hover , .owl-carousel.owl4 .owl-nav .owl-next:hover{
		background:var(--orange_light);
	}
	
	
 
</style>