<section id="departs_services" class="slide_section_multi " style='background:#fff;'>
	<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 blue" ></i>	
				<i class="las la-braille title_icon blue" ></i>	
				<i class="las la-braille title_icon blue" ></i>	
				<i class="las la-braille title_icon blue" ></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 blue" ></i>	
				<i class="las la-braille title_icon blue" ></i>	
				<i class="las la-braille title_icon blue" ></i>	
				<i class="las la-braille title_icon blue" ></i>					
			  </span>
			</h2>
		  </div>

		  <div class="container-fluid" style='padding-top:50px;padding-bottom:50px;'>
			<div class="row gy-3">
			  <div class="col-12 col-md-4 order-md-1">
				<div class="d-flex  flex-md-column list-boxes">
				  <div class="box mb-2 wow bounceIn animated" data-wow-duration="500ms" data-target="item1" role="button" tabindex="0" aria-pressed="true">
					<div class="inner g1"><i class="las la-info"></i> نبذة عن الجمعية </div>
				  </div>
				  <div class="box mb-2 wow bounceIn animated" data-wow-duration="500ms" data-target="item2" role="button" tabindex="0" aria-pressed="false">
					<div class="inner g1"><i class="las la-user-friends"></i> أعضاء مجلس الادارة </div>
				  </div>
				  <div class="box mb-2 wow bounceIn animated" data-wow-duration="500ms" data-target="item3" role="button" tabindex="0" aria-pressed="false">
					<div class="inner g1"><i class="las la-users"></i> أعضاء الجمعية العمومية </div>
				  </div>
				  <div class="box mb-2 wow bounceIn animated" data-wow-duration="500ms" data-target="item4" role="button" tabindex="0" aria-pressed="false">
					<div class="inner g1"><i class="las la-users-cog"></i> الإدارة التنفيذية </div>
				  </div>				  
				  <div class="box mb-2 wow bounceIn animated" data-wow-duration="500ms" data-target="item5" role="button" tabindex="0" aria-pressed="false">
					<div class="inner g1"><i class="las la-cloud-download-alt"></i> الملف التعريفى </div>
				  </div>
				  <div class="box mb-2 wow bounceIn animated" data-wow-duration="500ms"  data-target="item6" role="button" tabindex="0" aria-pressed="false">
					<div class="inner g1"><i class="las la-folder"></i> الحوكمة </div>
				  </div>				  
				  
				</div>
			  </div>

			  <div class="col-12 col-md-8 order-md-2" style="background: #fff;">
				<div id="contentArea" class="content-card" style="display: flex;align-items: center;justify-content: right;height: 100%;"> </div>
			  </div>

			</div>
		  </div>

		  <div id="templates" style="display:none">
			<div id="item1">
			  	<div  class="content-card" style="">
					<div class='about_img_cont'><img src='img/logo_v_tr.webp' >  </div>
					<div class='about_text_cont'>
						  <?php echo $_SESSION['comp_about']; ?>
					</div>
				</div>
			</div>

			<div id="item2">
				<div  class="content-card" style="">
					<?php include 'directors_board_noheader.php';?>
				</div>
			</div>
			
			<div id="item3">
				<div  class="content-card" style="">
					<?php include 'general_assembly_noheader.php';?>
				</div>
			</div>
			
			<div id="item4">
				<div  class="content-card" style="">
					<?php include 'assembly_minutes_noheader.php';?>
				</div>
			</div>

			<div id="item5">
				<div  class="content-card" style="">
					<?php include 'assembly_minutes_noheader.php';?>
				</div>
			</div>

			<div id="item6">
				<div  class="content-card" style="">
					<?php include 'assembly_minutes_noheader.php';?>
			    </div>
			</div>
			
			
		  </div>
		</div>
	</div>
</section>

  <script>
    $(function(){
      $('.box').on('click keypress', function(e){
        if(e.type === 'keypress'){
          if(!(e.which === 13 || e.which === 32)) return;
          e.preventDefault();
        }

        var target = $(this).data('target');
        if(!target) return;

        $('.box').removeClass('active').attr('aria-pressed','false');
        $(this).addClass('active').attr('aria-pressed','true');

        var html = $('#templates').find('#'+target).html();
        if(html){
          $('#contentArea').fadeOut(120, function(){
            $(this).html(html).fadeIn(160);
          });
        } else {
          $('#contentArea').html('<p class="text-danger">لا يوجد محتوى لهذا العنصر.</p>');
        }
      });

      $('.box').first().trigger('click');
	   
    });
  </script>
<style>

    .list-boxes{gap:12px;max-height:600px;overflow-y:hidden;overflow-x:hidden;height:auto;}
    .box{
		cursor: pointer;
		border-radius: 5px;
		padding: 0px;
		overflow: hidden;
		transition: transform .18s, box-shadow .18s;
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 0px !important;
	}
	.about_img_cont{
		float:right;
		width:40%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: right;
	}
	
	.about_text_cont{
		width:60%;
		float:right;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: right;
	}
	
	.list-boxes .wow:nth-child(1) { animation-delay: 0s; }
	.list-boxes .wow:nth-child(2) { animation-delay: 0.2s; }
	.list-boxes .wow:nth-child(3) { animation-delay: 0.4s; }
	.list-boxes .wow:nth-child(4) { animation-delay: 0.6s; }
	.list-boxes .wow:nth-child(5) { animation-delay: 0.8s; }
	.list-boxes .wow:nth-child(6) { animation-delay: 1s; }

    .box:active,.box.active{transform:translateY(2px);}

    .box .inner{
		border-radius: 8px;
		padding: 14px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: right;
		font-weight: 600;
		font-size:14px;
		height:45px;
    }
	.box .inner .las{
		font-size:20px;
		margin-left:5px;
	}
    .g1{background:linear-gradient(90deg,#6a11cb 0%,#2575fc 100%)}
	.g1{background:linear-gradient(90deg,#386378 0%,#2aabdf 100%)}
    .g2{background:linear-gradient(90deg,#ff7e5f 0%,#feb47b 100%)}
    .g3{background:linear-gradient(90deg,#00b09b 0%,#96c93d 100%)}

	.box.active .g1{background:linear-gradient(90deg, #ffa85f 0%, var(--yellow) 100%)}
	.box.active .g1{background:linear-gradient(90deg, #ab8769 0%, #d5baa3 100%)}
	.box.active:hover{filter: brightness(1);}
	.box:hover{  filter: brightness(1.3); }
    .content-card{
		border-radius:12px;
		height:100%;
		width:100%;
		background:#fff;
		max-height:450px;
		overflow-y:auto;  
		-ms-overflow-style: none;
	}

    @media (max-width:768px){
      .list-boxes{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;height:70px;border-bottom: solid 1px #f7fafc;margin-bottom: 20px;}
      .box{width:160px;margin-inline:6px;float:right;width:auto;}
      .list-boxes .col-12{width:auto;margin:0;}
	  .box .inner{height:50px;justify-content: center;font-size: 10px;}
	  .about_img_cont,.about_text_cont{width:100%;margin-bottom:20px;text-align:center;}
    }
  </style>