<?php
// DB connection
include 'dbconn.php';
include 'fetch_details.php';
$president_image = $presidents[0]['image_path']; // assuming column is named 'image'
// Fetch president message
$president_msg = '';
$result = $mysqli->query("SELECT * FROM president_messages LIMIT 1");
if ($row = $result->fetch_assoc()) {
    $president_msg = $row['message'];
}

?>

<!DOCTYPE html>

<html class="no-js">

<head>
	<title>Shree Machhu Kathiya Darji Suthar Gnati Mandal</title>
	<meta charset="utf-8">
	
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="images/mkds.png" />
	 <link rel="shortcut icon" href="images/mkds.png" />
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/animations.css">
	<link rel="stylesheet" href="css/fonts.css">
	<link rel="stylesheet" href="css/main.css" class="color-switcher-link">
	<link rel="stylesheet" href="css/shop.css" class="color-switcher-link">
	<script src="js/vendor/modernizr-2.6.2.min.js"></script>
	
</head>

<body>
	
	<div class="preloader">
		<div class="preloader_image"></div>
	</div>
	
	<div id="canvas">
		<div id="box_wrapper">
			<!-- template sections -->
			<section class="page_topline ds table_section table_section_lg section_padding_top_15 section_padding_bottom_15 columns_margin_0">
				<div class="container-fluid">
					<div class="row">
						<div class="col-lg-6 text-center text-lg-left hidden-xs">
							<div class="inline-content big-spacing">
								<div class="page_social"> </div> <span class="xs-block">
						<i class="fa fa-phone highlight3 rightpadding_5" aria-hidden="true"></i>
						9825660827 / 9909015295
					</span> </div>
						</div>
						<div class="col-lg-6 text-center text-lg-right">
							<div id="topline-animation-wrap">
								<div id="topline-hide" class="inline-content big-spacing"> <span class="hidden-xs">
							<i class="fa fa-map-marker highlight3 rightpadding_5" aria-hidden="true"></i>
							C / O Baroda Dairy Parlour , Near Iskon Temple , Hari Nagar , Vasna Road , Vadodara - 390021 , Gujarat ,India.
						</span> 
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<header class="page_header header_white toggler_xs_right columns_margin_0">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12 display_table">
							<div class="header_left_logo display_table_cell"> <a href="index.html" class="logo logo_with_text">
                        <img src="images/mkds.png" alt="">
                        
                    </a> </div>
							<div class="header_mainmenu display_table_cell text-center">
								<!-- main nav start -->
							<nav class="mainmenu_wrapper">
									<ul class="mainmenu nav sf-menu">
										<li class="active"> <a href="index.php">Home</a>
											
										</li>
										<li> <a href="history.php">History</a>
											
										</li>
				
										<!-- eof pages -->
										<li> <a href="">commiittee</a>
											<ul>
												<li> <a href="president.php">President</a> </li>
												<li> <a href="vice_president.php">Vice President</a> </li>
												<li> <a href="secretory.php">Secretory</a> </li>
												<li> <a href="joint_secretory.php">Joint Secretory</a> </li>
												<li> <a href="treasurer.php">Treasurer</a> </li>
												<li> <a href="other_commiittee_members.php">Commiittee Members</a> </li>
											</ul>
										</li>
										<!-- eof features -->
										<!-- gallery -->
										<li> <a href="news_events.php">News & Events</a>
											
										</li>
										<li> <a href="">Gallary</a>
											<ul>
												<li> <a href="image_gallary.php">Photo Gallary</a> </li>
												<li> <a href="video_gallary.php">Video Gallary</a> </li>
											</ul>
										</li>
										<li> <a href="circular.php">Circular</a>
											
										</li>
										<li> <a href="members.php">Member</a>
											
										</li>
										<li> <a href="ContactList-Sorted-Final.pdf">Phone-Book</a>
											
										</li>
										
										<!-- eof contacts -->
									</ul>
								</nav>
								<!-- eof main nav -->
								<!-- header toggler --><span class="toggle_menu"><span></span></span>
							</div>
						
						</div>
					</div>
				</div>
			</header>
			<section class="intro_section page_mainslider ds all-scr-cover bottom-overlap-teasers">
				<div class="flexslider" data-dots="true" data-nav="true">
					<ul class="slides">
						<!-- <li>
							<div class="slide-image-wrap"> <img src="images/slide01.jpg" alt="" /> </div>
							<div class="container">
								<div class="row">
									<div class="col-sm-12 text-center">
										<div class="slide_description_wrapper">
											<div class="slide_description">
												<div class="intro-layer" data-animation="fadeInRight"> LGBT Community Center </div>
												<div class="intro-layer" data-animation="fadeInLeft">
													<h2> <span class="highlight3">Become The Change</span><br> You Want To See </h2>
												</div>
												<div class="intro-layer" data-animation="fadeInRight">
													<p class="thin"><em>Details on the huge Calvin Sandoval celebration coming to Hillcrest on February 27, 2018</em></p>
												</div>
												<div class="intro-layer" data-animation="fadeInUp">
													<div class="slide_buttons"> <a href="contact.html" class="theme_button color1 min_width_button">Be Proud!</a> </div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li> -->
						<li>
							<div class="slide-image-wrap"> <img src="images/banner-slider-mkds1.png" alt="" /> </div>
							<div class="container">
								<div class="row">
									<div class="col-sm-12 text-center">
										<div class="slide_description_wrapper">
											<div class="slide_description custom-gap-flex">
												<div class="intro-layer" data-animation="fadeInRight">આપનુ હાર્દિક સ્વાગત છે   </div>
												<div class="intro-layer" data-animation="fadeInLeft">
													<h2> <span class="highlight3 custom-line">શ્રી મચ્છુ કઠીયા દરજી-સુથાર જ્ઞાતિ મંડળ વડોદરા</span></h2>
												</div>
												<div class="intro-layer" data-animation="fadeInRight">
													<p class="thin"><em>"એકતાનું મજબૂત બંધન, ભાઈચારાનું અવ્યાહત ધ્યેય, સમાજના સર્વાંગી વિકાસ માટે શ્રી મચ્છુ કઠીયા દરજી-સુથાર જ્ઞાતિ મંડળ  સદૈવ પ્રતિબદ્ધ છે."</em></p>
												</div>
												<!-- <div class="intro-layer" data-animation="fadeInUp">
													<div class="slide_buttons"> <a href="contact.html" class="theme_button color1 min_width_button">Be Proud!</a> </div>
												</div> -->
											</div>
											<!-- eof .slide_description -->
										</div>
										<!-- eof .slide_description_wrapper -->
									</div>
									<!-- eof .col-* -->
								</div>
								<!-- eof .row -->
							</div>
						</li>
						<!-- <li>
							<div class="slide-image-wrap"> <img src="images/slide03.jpg" alt="" /> </div>
							<div class="container">
								<div class="row">
									<div class="col-sm-12 text-center">
										<div class="slide_description_wrapper">
											<div class="slide_description">
												<div class="intro-layer" data-animation="fadeInRight"> LGBT Community Center </div>
												<div class="intro-layer" data-animation="fadeInLeft">
													<h2> <span class="highlight3">Become The Change</span><br> You Want To See </h2>
												</div>
												<div class="intro-layer" data-animation="fadeInRight">
													<p class="thin"><em>Details on the huge Calvin Sandoval celebration coming to Hillcrest on February 27, 2018</em></p>
												</div>
												<div class="intro-layer" data-animation="fadeInUp">
													<div class="slide_buttons"> <a href="contact.html" class="theme_button color1 min_width_button">Be Proud!</a> </div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li> -->
					</ul>
				</div>
				<!-- eof flexslider -->
			</section>
			<section id="services" class="ls section_intro_overlap columns_padding_0 columns_margin_0 container_padding_0">
				<div class="container-fluid">
					<div class="row flex-wrap v-center-content">
						<div class="col-lg-3 col-sm-6 col-xs-12 to_animate" data-animation="fadeInUp">
							<div class="teaser main_bg_color transp with_padding big-padding margin_0">
								<div class="media xxs-media-left">
									<div class="media-left media-middle">
										<div class="teaser_icon size_small round light_bg_color thick_border_icon big_wrapper"> <i class="fa fa-twitter highlight" aria-hidden="true"></i> </div>
									</div>
									<div class="media-body media-middle">
										<h4><a href="#0">Community Events </a></h4>
										<p>They organize various cultural and social events</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-sm-6 col-xs-12 to_animate" data-animation="fadeInUp">
							<div class="teaser main_bg_color2 transp with_padding big-padding margin_0">
								<div class="media xxs-media-left">
									<div class="media-left media-middle">
										<div class="teaser_icon size_small round light_bg_color thick_border_icon big_wrapper"> <i class="fa fa-rocket highlight2" aria-hidden="true"></i> </div>
									</div>
									<div class="media-body media-middle">
										<h4><a href="#0">Member Directory</a></h4>
										<p> a detailed phonebook/member directory</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-sm-6 col-xs-12 to_animate" data-animation="fadeInUp">
							<div class="teaser main_bg_color3 transp with_padding big-padding margin_0">
								<div class="media xxs-media-left">
									<div class="media-left media-middle">
										<div class="teaser_icon size_small round light_bg_color thick_border_icon big_wrapper"> <i class="fa fa-users highlight3" aria-hidden="true"></i> </div>
									</div>
									<div class="media-body media-middle">
										<h4><a href="#0">Committee Leadership</a></h4>
										<p>The Mandal showcases its executive committee</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-sm-6 col-xs-12 to_animate" data-animation="fadeInUp">
							<div class="teaser main_bg_color4 transp with_padding big-padding margin_0">
								<div class="media xxs-media-left">
									<div class="media-left media-middle">
										<div class="teaser_icon size_small round light_bg_color thick_border_icon big_wrapper"> <i class="fa fa-briefcase highlight4" aria-hidden="true"></i> </div>
									</div>
									<div class="media-body media-middle">
										<h4><a href="#0">Communication Hub </a></h4>
										<p> “News & Events” & “Circular” sections </p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<section id="about" class="ls section_padding_top_110 columns_padding_30">
				<div class="container">
					 <div class="col-md-6 col-md-push-6 to_animate" data-animation="fadeInUp" data-delay="600">
              
				<div class="embed-responsive embed-responsive-3by2 fix-height">
					<img src="Admin/<?= htmlspecialchars($president_image) ?>" alt="President Image" class="img-responsive admin-full-image">
				</div>
			</div>
						
						<div class="col-md-6 col-md-pull-6 to_animate" data-animation="fadeInRight" data-delay="300">
							<h2 class="section_header color4"> Message From President </h2>
							<?php echo html_entity_decode($president_msg); ?>
						</div>
					</div>
				</div>
			</section>
			
			<section id="team" class="ls section_padding_top_0">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 bottommargin_0 to_animate" data-animation="fadeInUp">
							<h2 class="section_header color">Our Commiittee Members</h2>
							<div class="owl-carousel loop-colors topmargin_40" data-dots="false" data-nav="true" data-responsive-lg="3">

							<!--President-->
								<?php foreach ($presidents as $president): ?>
								<article class="vertical-item content-padding big-padding with_border bottom_color_border text-center">
									<div class="item-media">
										<img 
										src="Admin/<?php echo htmlspecialchars($president['image_path']); ?>" 
										alt="<?php echo htmlspecialchars($president['name']); ?>" 
										style="object-fit: cover;"
										>
									</div>
									<div class="item-content">
										<header class="entry-header">
											<h3 class="entry-title small bottommargin_0">
												<a href="#"><?php echo htmlspecialchars($president['name']); ?></a>
											</h3>
											<span class="small-text highlight">President</span>
										</header>
									</div>
								</article>
								<?php endforeach; ?>
                                <!--Vice President -->
								<?php foreach ($vice_presidents as $v_president): ?>
								<article class="vertical-item content-padding big-padding with_border bottom_color_border text-center">
									<div class="item-media">
										<img 
										src="Admin/<?php echo htmlspecialchars($v_president['image_path']); ?>" 
										alt="<?php echo htmlspecialchars($v_president['name']); ?>" 
										style="object-fit: cover;"
										>
									</div>
									<div class="item-content">
										<header class="entry-header">
											<h3 class="entry-title small bottommargin_0">
												<a href="#"><?php echo htmlspecialchars($v_president['name']); ?></a>
											</h3>
											<span class="small-text highlight">Vice President</span>
										</header>
									</div>
								</article>
								<?php endforeach; ?>

								<!--Secretory -->
								<?php foreach ($secretaries as $secretory): ?>
								<article class="vertical-item content-padding big-padding with_border bottom_color_border text-center">
									<div class="item-media">
										<img 
										src="Admin/<?php echo htmlspecialchars($secretory['image_path']); ?>" 
										alt="<?php echo htmlspecialchars($secretory['name']); ?>" 
										style="object-fit: cover;"
										>
									</div>
									<div class="item-content">
										<header class="entry-header">
											<h3 class="entry-title small bottommargin_0">
												<a href="#"><?php echo htmlspecialchars($secretory['name']); ?></a>
											</h3>
											<span class="small-text highlight">Secretory</span>
										</header>
									</div>
								</article>
								<?php endforeach; ?>

								<!--Joint Secretory -->
								<?php foreach ($joint_secretaries as $j_secretory): ?>
								<article class="vertical-item content-padding big-padding with_border bottom_color_border text-center">
									<div class="item-media">
										<img 
										src="Admin/<?php echo htmlspecialchars($j_secretory['image_path']); ?>" 
										alt="<?php echo htmlspecialchars($j_secretory['name']); ?>" 
										style="object-fit: cover;"
										>
									</div>
									<div class="item-content">
										<header class="entry-header">
											<h3 class="entry-title small bottommargin_0">
												<a href="#"><?php echo htmlspecialchars($j_secretory['name']); ?></a>
											</h3>
											<span class="small-text highlight">Joint Secretory</span>
										</header>
									</div>
								</article>
								<?php endforeach; ?>

								<!--Treasurer -->
								<?php foreach ($treasurers  as $treasurer): ?>
								<article class="vertical-item content-padding big-padding with_border bottom_color_border text-center">
									<div class="item-media">
										<img 
										src="Admin/<?php echo htmlspecialchars($treasurer['image_path']); ?>" 
										alt="<?php echo htmlspecialchars($treasurer['name']); ?>" 
										style="object-fit: cover;"
										>
									</div>
									<div class="item-content">
										<header class="entry-header">
											<h3 class="entry-title small bottommargin_0">
												<a href="#"><?php echo htmlspecialchars($treasurer['name']); ?></a>
											</h3>
											<span class="small-text highlight">Treasurer</span>
										</header>
									</div>
								</article>
								<?php endforeach; ?>

								<!--committee_members -->
								<?php foreach ($committee_members as $c_member): ?>
								<article class="vertical-item content-padding big-padding with_border bottom_color_border text-center">
									<div class="item-media">
										<img 
										src="Admin/<?php echo htmlspecialchars($c_member['image_path']); ?>" 
										alt="<?php echo htmlspecialchars($c_member['name']); ?>" 
										style="object-fit: cover;"
										>
									</div>
									<div class="item-content">
										<header class="entry-header">
											<h3 class="entry-title small bottommargin_0">
												<a href="#"><?php echo htmlspecialchars($c_member['name']); ?></a>
											</h3>
											<span class="small-text highlight">Committee Member</span>
										</header>
									</div>
								</article>
								<?php endforeach; ?>
								
							</div>
						</div>
					</div>
				</div>
			</section>
			<section id="events" class="ls section_padding_top_110">
				<div class="container">
					<div class="row">
						<div class="col-xs-12 bottommargin_0 to_animate" data-animation="fadeInUp">
							<div class="row masonry-feed columns_padding_1">
								<div class="col-xs-12 col-md-3">
									<div class="row">
										<div class="col-xs-12 col-sm-6 col-md-12">
											<div class="vertical-item content-absolute text-center ds">
												<div class="item-media"> <img src="images/1.png" alt=""> </div>
												
											</div>
										</div>
										<div class="col-xs-12 col-sm-6 col-md-12">
											<div class="vertical-item content-absolute text-center ds">
												<div class="item-media"> <img src="images/2.png" alt=""> </div>
												
											</div>
										</div>
									</div>
								</div>
								<div class="col-xs-12 col-md-6">
									<div class="vertical-item closest-event content-absolute text-center ds">
										<div class="item-media"> <img src="images/5.png" alt=""> </div>
										
									</div>
								</div>
								<div class="col-xs-12 col-md-3">
									<div class="row">
										<div class="col-xs-12 col-sm-6 col-md-12">
											<div class="vertical-item content-absolute text-center ds">
												<div class="item-media"> <img src="images/3.png" alt=""> </div>
												
											</div>
										</div>
										<div class="col-xs-12 col-sm-6 col-md-12">
											<div class="vertical-item content-absolute text-center ds">
												<div class="item-media"> <img src="images/4.png" alt=""> </div>
												
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			
			
			<section class="ds ms parallax page_copyright overlay_color section_padding_top_30 section_padding_bottom_30">
				<div class="container">
					<div class="row">
						<div class="col-sm-6 text-center">
							<p>&copy; Copyright © 2016 mkdsvadodara.org All rights reserved.</p>
						</div>
						<div class="col-sm-6 text-center">
							<p>Designed By : Pooja Infotech</p>
						</div>
					</div>
				</div>
			</section>
		</div>
		<!-- eof #box_wrapper -->
	</div>
	<!-- eof #canvas -->
	<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="js/compressed.js"></script>
	<script src="js/selectize.min.js"></script>
	<script src="js/main.js"></script>
	<script src="js/switcher.js"></script>
</body>


</html>