<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<style type="text/css">

	.staff-wrapper {
		display:grid;
		grid-auto-flow: dense;
		grid-template-columns:repeat(auto-fill, minmax( min(250px,100%),1fr));
		padding:2px 10px;
		gap:2px 14px;
		justify-items:center;
	}

	.purpleAliens {border:solid purple;}
	.supercool {box-shadow:0 0 9px 2px #911; }

	.staff-box {
		border:solid 2px #E3B40E;
		background: #F9A520;
		padding:50px 0px;
		padding-top:0;
		text-align:center;
		width:100%;
		max-width:280px;
		margin-top:50px;
		box-shadow:inset 0 10px #BB0505, 0 1px 10px #0343;
	}
	.staff-box img {
		margin-top:-60px;
		margin-bottom:24px;
		border-radius:50%; 
		border:solid 3px #BB0505;
		width:100%;
		max-width:128px; 
		aspect-ratio:1/1;
	}
	.staff-box header {
		font-size:1.2em;
		line-height:1;
		font-weight:bold;
		color: #44233B;
	}
	.staff-box p , .staff-box a {
		display:block;
		font-size:16px; 
		margin:0.5em 0;
		line-height:1.05;
	}
	.profileBtn{
		color: #AA1F32; border-radius: 20px; padding: 9px 16px; border-color: white; background: transparent !important; box-shadow: 1px 1px 10px #7e455561;border: 2px solid #bb0505;
	}
</style>
<main id="main">

	<!-- ======= About Committee Section ======= -->
	<section  style="background-image: url(<?=base_url('assets/img/elegant-background-with-mandala.png');?>);background-size: auto;">

		<!-- ======================Board of Directors========================= -->

		<div class="responsive-container">
    <center>
        <h2 class="bottomborder" style="font-weight:bold!important;font-size: 35px!important;">
            OUR COMMITTEE MEMBERS
        </h2>
    </center>
    <div class="row staff-wrapper py-5">
        <?php 
            $redvdv = json_decode(json_encode($committee->data), true);
            $committee = sortBySequenceId($redvdv);

            foreach ($committee as $key => $value) { ?>
                <div class="col-md-4 staff-box my-5">
                    <img src="<?= base_url('assets/img/user-no-image.png') ?>" alt="<?= $value['refDataName'].' '.$value['refDataName3']; ?>" />
                    
                    <!-- Management Category -->
                    <header><?= $value['managementCategory']; ?></header><br>
                    
                    <!-- Ref Data Name -->
                    <span style="font-size: 15px !important;font-weight: bold;"><?= $value['refDataName'].' '.$value['refDataName3']; ?></span><br>
                    
                    <!-- Designation -->
                    <span><?= $value['designation']; ?></span>
                </div>
        <?php } ?>
    </div>
</div>

	</section><!-- End About Committee Section -->


</main><!-- End #main -->
<script type="text/javascript">
	$(document).ready(function() {
		window.scrollTo({ top: 225, behavior: 'smooth'});
	});
</script>

<?php $this->load->view('includes/footer') ?>
<?php $this->load->view('includes/script') ?>
