<?php 
$page_title = 'Mentors Mission | About';
require 'assets/header.php';
?>

<body>

<div class="page-wrapper">
 	
  <?php require 'assets/navbar.php' ?>

	<!--FullScreen Menu-->
	<div class="fullscreen-menu">
		<!--Close Btn-->
		<div class="close-menu"><span class="flaticon-cancel-1"></span></div>
		
		<div class="menu-outer-container">
			<div class="menu-box">
				<nav class="full-menu">
					<ul class="navigation">
						
																	<li class="current"><a href="index">Home</a></li>
																	<li class="current"><a href="News">News</a></li>
																	<li class="current"><a href="Shabbatons">Shabbatons</a></li>
									<li><a href="about">About Us</a></li>
								<!--	<li><a href="campus.html">Campuses</a></li> -->
								    <li><a href="index#gallery">Gallery</a></li>
									
									<li><a href="mentorsmission.com/about#map-info-section">Contact us</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div><!--End FullScreen Menu-->
	<!--Page Title-->
    <section class="page-title" style="background-image:url(images/group.jpg);">
    	<div class="auto-container">
        	<h1>Shabbatons</h1>
        </div>
    </section>
    
    <!--Breadcrumb-->
    <div class="breadcrumb-outer">
    	<div class="auto-container">
        	<ul class="bread-crumb text-center">
            	<li><a href="index">Home</a> <span class="fa fa-angle-right"></span></li>
                <li>Shabbatons</li>
            </ul>
        </div>
    </div>
    <!--End Page Title-->
    
<style>
      
.photo-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
}

.photo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.photo-item {
    flex: 0 0 calc(50% - 20px); 
    margin: 10px;
    position: relative;
}

.photo-item:last-child {
    flex: 0 0 calc(50% - 20px); 
}

.photo-item img {
    max-width: 100%;
    height: auto;
    display: block;
}


.enlarged-image-container {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.enlarged-image {
    max-width: 90%;
    max-height: 90%;
}


.article-container {
    max-width: 700px; 
    margin: 0 auto 20px;
    padding: 20px; 
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  
   }
   
 
.article-image {
    display: block; 
    margin: 0 auto 10px; 
    max-width: 100%;
    height: auto;
}

.article-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

.article-paragraph {
    margin-top: 10px;
    line-height: 1.5;
    text-align: justify;
}

.article-link {
    text-decoration: none;
    color: #007bff;
    margin-top: 10px;
    display: inline-block;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    }
    
.blue-hr {
    border: none;
    height: 4px; 
    background-color: #446c93; 
    width: 70%;
}
    </style>
    <!-- End of the style -->
	

            </div>
        </div>
       
<center>
<img src="images/MentorsMission/BostonShabbaton.jpg" alt="Boston Shabbaton" width="600">
</center>





	<?php require 'assets/map_contact_form.php'; ?>
  <?php require 'assets/footer.php'; ?>
	
</div>

<!--End pagewrapper-->

<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-long-arrow-up"></span>


<?php require  'assets/package_popup.php'; ?>
<?php require 'assets/js_scripts.php'; ?>

</body>
</html>