/* Gallery Section with Grid Layout */
    	.gallery {
        	background-color: white;
        	padding-top: 80px;
        	padding-bottom: 80px;
    	}
   	 
    	.gallery-grid {
        	display: grid;
        	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        	gap: 20px;
        	margin: 0 auto;
        	max-width: 1200px;
    	}
   	 
    	.gallery-item {
        	position: relative;
        	overflow: hidden;
        	border-radius: 8px;
        	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        	aspect-ratio: 1;
        	cursor: pointer;
        	transition: transform 0.3s, box-shadow 0.3s;
    	}
   	 
    	.gallery-item:hover {
        	transform: translateY(-5px);
        	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    	}
   	 
    	.gallery-item img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        	transition: transform 0.5s;
    	}
   	 
    	.gallery-item:hover img {
        	transform: scale(1.05);
    	}
   	 
    	/* Gallery Modal */
    	.gallery-modal {
        	display: none;
        	position: fixed;
        	z-index: 1000;
        	left: 0;
        	top: 0;
        	width: 100%;
        	height: 100%;
        	overflow: auto;
        	background-color: rgba(0, 0, 0, 0.9);
        	animation: fadeIn 0.3s;
    	}
   	 
    	.gallery-modal-content {
        	margin: auto;
        	display: block;
        	max-width: 90%;
        	max-height: 90%;
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	transform: translate(-50%, -50%);
    	}
   	 
    	.gallery-modal-close {
        	position: absolute;
        	top: 20px;
        	right: 30px;
        	color: #f1f1f1;
        	font-size: 40px;
        	font-weight: bold;
        	transition: 0.3s;
        	cursor: pointer;
    	}
   	 
    	.gallery-modal-close:hover {
        	color: var(--accent);
    	}
    	 
    	/* Timeline with Smaller Thumbnail Images */
    	.timeline-content {
        	display: flex;
        	flex-direction: row;
        	align-items: flex-start;
        	padding: 20px 30px;
        	background-color: white;
        	position: relative;
        	border-radius: 6px;
        	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        	gap: 15px;
    	}
   	 
    	.timeline-text {
        	flex: 3;
    	}
   	 
    	.timeline-image {
        	flex: 1;
        	border-radius: 6px;
        	overflow: hidden;
        	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        	max-width: 100px;
        	max-height: 100px;
        	cursor: pointer;
    	}
   	 
    	.timeline-image img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        	display: block;
        	transition: transform 0.3s;
    	}
   	 
    	.timeline-item:hover .timeline-image img {
        	transform: scale(1.05);
    	}
   	 
    	/* Gallery Carousel */
    	.gallery {
        	background-color: white;
        	padding-top: 80px;
        	padding-bottom: 80px;
    	}
   	 
    	.carousel-container {
        	position: relative;
        	max-width: 800px;
        	margin: 0 auto;
        	overflow: hidden;
        	border-radius: 10px;
        	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    	}
   	 
    	.carousel-slides {
        	display: flex;
        	transition: transform 0.5s ease;
    	}
   	 
    	.carousel-slide {
        	min-width: 100%;
        	box-sizing: border-box;
        	display: flex;
        	justify-content: center;
        	align-items: center;
    	}
   	 
    	.carousel-slide img {
        	width: 100%;
        	height: auto;
        	max-height: 500px;
        	object-fit: contain;
    	}
   	 
    	.carousel-controls {
        	position: absolute;
        	top: 50%;
        	left: 0;
        	right: 0;
        	display: flex;
        	justify-content: space-between;
        	align-items: center;
        	transform: translateY(-50%);
    	}
   	 
    	.carousel-control {
        	background-color: rgba(0, 0, 0, 0.3);
        	color: white;
        	border: none;
        	width: 50px;
        	height: 50px;
        	border-radius: 50%;
        	font-size: 24px;
        	cursor: pointer;
        	transition: background-color 0.3s;
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	margin: 0 10px;
    	}
   	 
    	.carousel-control:hover {
        	background-color: rgba(0, 0, 0, 0.5);
    	}
   	 
    	.carousel-indicators {
        	position: absolute;
        	bottom: 20px;
        	left: 50%;
        	transform: translateX(-50%);
        	display: flex;
        	gap: 10px;
    	}
   	 
    	.carousel-indicator {
        	width: 12px;
        	height: 12px;
        	border-radius: 50%;
        	background-color: rgba(255, 255, 255, 0.5);
        	border: none;
        	cursor: pointer;
        	transition: background-color 0.3s;
    	}
   	 
    	.carousel-indicator.active {
        	background-color: white;
    	}
   	 
    	/* Modal for Timeline Images */
    	.timeline-modal {
        	display: none;
        	position: fixed;
        	z-index: 1000;
        	left: 0;
        	top: 0;
        	width: 100%;
        	height: 100%;
        	overflow: auto;
        	background-color: rgba(0, 0, 0, 0.8);
        	animation: fadeIn 0.3s;
    	}
    	 
    	@keyframes fadeIn {
        	from { opacity: 0; }
        	to { opacity: 1; }
    	}
    	 
    	.modal-content {
        	position: relative;
        	background-color: var(--light);
        	margin: 10% auto;
        	padding: 30px;
        	border-radius: 10px;
        	width: 80%;
        	max-width: 800px;
        	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        	animation: slideIn 0.3s;
    	}
    	 
    	@keyframes slideIn {
        	from { transform: translateY(-50px); opacity: 0; }
        	to { transform: translateY(0); opacity: 1; }
    	}
    	 
    	.close-modal {
        	position: absolute;
        	top: 15px;
        	right: 20px;
        	color: var(--dark);
        	font-size: 28px;
        	font-weight: bold;
        	transition: 0.3s;
        	cursor: pointer;
    	}
    	 
    	.close-modal:hover {
        	color: var(--accent2);
    	}
    	 
    	.modal-image {
        	width: 100%;
        	max-height: 400px;
        	object-fit: contain;
        	margin-bottom: 20px;
        	border-radius: 5px;
    	}
    	 
    	.modal-title {
        	font-family: 'Playfair Display', serif;
        	color: var(--primary);
        	margin-bottom: 10px;
    	}
    	 
    	/* Responsive layout for timeline on mobile */
    	@media (max-width: 768px) {
        	.timeline-content {
            	flex-direction: row;
            	align-items: center;
        	}
       	 
        	.timeline-image {
            	max-width: 80px;
            	max-height: 80px;
        	}
    	}
    	 
    	/* Footer */
    	footer {
        	background-color: var(--dark);
        	color: var(--light);
        	padding: 50px 0 30px;
        	position: relative;
    	}
    	 
    	.footer-content {
        	text-align: center;
        	max-width: 700px;
        	margin: 0 auto;
        	position: relative;
        	z-index: 1;
    	}
    	 
    	.footer-logo {
        	font-family: 'Great Vibes', cursive;
        	color: var(--accent);
        	font-size: 2.5rem;
        	margin-bottom: 20px;
    	}
    	 
    	.footer-date {
        	font-family: 'Playfair Display', serif;
        	font-size: 1.2rem;
        	margin-bottom: 20px;
    	}
    	 
    	.footer-nav {
        	display: flex;
        	justify-content: center;
        	gap: 20px;
        	margin-bottom: 30px;
        	flex-wrap: wrap;
    	}
    	 
    	.footer-link {
        	color: var(--light);
        	text-decoration: none;
        	transition: color 0.3s;
    	}
    	 
    	.footer-link:hover {
        	color: var(--accent);
    	}
    	 
    	.copyright {
        	margin-top: 30px;
        	font-size: 0.9rem;
        	color: rgba(247, 244, 234, 0.7);
    	}
    	 
    	/* Responsive */
    	@media (max-width: 768px) {
        	.header-title {
            	font-size: 3.5rem;
        	}
         	 
        	.header-date {
            	font-size: 1.5rem;
        	}
         	 
        	.countdown {
            	gap: 10px;
        	}
         	 
        	.countdown-item {
            	padding: 10px;
            	min-width: 70px;
        	}
         	 
        	.countdown-value {
            	font-size: 1.5rem;
        	}
         	 
        	.countdown-label {
            	font-size: 0.7rem;
        	}
         	 
        	.nav-menu {
            	display: none;
            	flex-direction: column;
            	gap: 10px;
            	position: absolute;
            	top: 100%;
            	left: 0;
            	right: 0;
            	background-color: var(--dark);
            	padding: 20px;
            	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        	}
         	 
        	.nav-menu.active {
            	display: flex;
        	}
         	 
        	.mobile-menu-button {
            	display: block;
        	}
         	 
        	.timeline::after {
            	left: 31px;
        	}
         	 
        	.timeline-item {
            	width: 100%;
            	padding-left: 70px;
            	padding-right: 25px;
        	}
         	 
        	.timeline-item::before {
            	left: 60px;
            	border: medium solid white;
            	border-width: 10px 10px 10px 0;
            	border-color: transparent white transparent transparent;
        	}
         	 
        	.left::after, .right::after {
            	left: 18px;
        	}
         	 
        	.right {
            	left: 0%;
        	}
         	 
        	.details-grid {
            	grid-template-columns: 1fr;
        	}
         	 
        	.modal-content {
            	width: 95%;
            	margin: 20% auto;
        	}
       	 
        	.venue-info-overlay {
            	max-width: 100%;
            	padding: 15px;
        	}
       	 
        	.venue-image-container {
            	display: none;
        	}
       	 
        	.venue-overlay {
            	background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
        	}
       	 
        	.carousel-slide {
            	width: 80%;
            	height: 80%;
            	left: 10%;
            	top: 10%;
        	}
    	}
	</style>
</head>
<body>
	<header id="home">
    	<div class="header-overlay"></div>
    	<h1 class="header-title">Morgan & Robert</h1>
    	<h2 class="header-date">September 6, 2025</h2>
    	<p>Join us to celebrate our special day</p>
    	<div class="countdown">
        	<div class="countdown-item">
            	<div class="countdown-value" id="days">00</div>
            	<div class="countdown-label">Days</div>
        	</div>
        	<div class="countdown-item">
            	<div class="countdown-value" id="hours">00</div>
            	<div class="countdown-label">Hours</div>
        	</div>
        	<div class="countdown-item">
            	<div class="countdown-value" id="minutes">00</div>
            	<div class="countdown-label">Minutes</div>
        	</div>
        	<div class="countdown-item">
            	<div class="countdown-value" id="seconds">00</div>
            	<div class="countdown-label">Seconds</div>
        	</div>
    	</div>
	</header>

	<nav>
    	<div class="container nav-container">
        	<a href="#home" class="nav-logo">M&R</a>
        	<button class="mobile-menu-button">&#9776;</button>
        	<ul class="nav-menu">
            	<li><a href="#home" class="nav-link">Home</a></li>
            	<li><a href="#our-story" class="nav-link">Our Story</a></li>
            	<li><a href="#details" class="nav-link">Details</a></li>
            	<li><a href="#registry" class="nav-link">Registry</a></li>
            	<li><a href="#rsvp" class="nav-link">RSVP</a></li>
            	<li><a href="#gallery" class="nav-link">Gallery</a></li>
        	</ul>
    	</div>
	</nav>

	<section id="our-story" class="our-story">
    	<div class="container">
        	<h2 class="section-title">Our Story</h2>
        	<div class="story-content">
            	<p>We met online and began our journey together with a memorable first date at Tropical Smoothie, where we talked for over an hour past closing time. Since then, we've been enjoying adventures from thrilling roller coasters to peaceful hikes, all while growing in our faith and love for each other.</p>
            	<div class="timeline">
                	<div class="timeline-item left">
                    	<div class="timeline-content">
                        	<div class="timeline-text">
                            	<h3 class="timeline-date">January 25, 2024</h3>
                            	<p>We had our first date at Tropical Smoothie, where we were so engrossed in conversation that we stayed talking an hour past closing time!</p>
                        	</div>
                        	<div class="timeline-image">
                            	<img src="pic2.jpg" alt="Our First Date">
                        	</div>
                    	</div>
                	</div>
                	<div class="timeline-item right">
                    	<div class="timeline-content">
                        	<div class="timeline-text">
                            	<h3 class="timeline-date">Easter 2024</h3>
                            	<p>We made our relationship official, beginning our journey together with faith at the center.</p>
                        	</div>
                        	<div class="timeline-image">
                            	<img src="pic3.jpg" alt="Making It Official">
                        	</div>
                    	</div>
                	</div>
                	<div class="timeline-item left">
                    	<div class="timeline-content">
                        	<div class="timeline-text">
                            	<h3 class="timeline-date">Summer 2024</h3>
                            	<p>We enjoyed trips to Carowinds where we conquered the Fury 325, spent time at the lake, went hiking, and visited the Noah's Ark in Kentucky.</p>
                        	</div>
                        	<div class="timeline-image">
                            	<img src="pic4.jpg" alt="Summer Adventures">
                        	</div>
                    	</div>
                	</div>
                	<div class="timeline-item right">
                    	<div class="timeline-content">
                        	<div class="timeline-text">
                            	<h3 class="timeline-date">Easter 2025</h3>
                            	<p>Robert proposed in the azalea gardens in Raleigh, exactly one year after we made our relationship official.</p>
                        	</div>
                        	<div class="timeline-image">
                            	<img src="pic5.jpg" alt="The Proposal">
                        	</div>
                    	</div>
                	</div>
                	<div class="timeline-item left">
                    	<div class="timeline-content">
                        	<div class="timeline-text">
                            	<h3 class="timeline-date">September 6, 2025</h3>
                            	<p>We will begin our life together, surrounded by our loved ones in a beautiful rustic farm ceremony and celebration.</p>
                        	</div>
                        	<div class="timeline-image">
                            	<img src="pic6.jpg" alt="Our Wedding Day">
                        	</div>
                    	</div>
                	</div>
            	</div>
        	</div>
    	</div>
	</section>

	<!-- Timeline Modal -->
	<div id="timelineModal" class="timeline-modal">
    	<div class="modal-content">
        	<span class="close-modal">&times;</span>
        	<img class="modal-image" id="modalImage" src="" alt="Timeline event">
        	<h3 class="modal-title" id="modalTitle"></h3>
        	<p id="modalDescription"></p>
    	</div>
	</div>

	<section id="details" class="details">
    	<div class="container">
        	<h2 class="section-title">Wedding Details</h2>
        	<div class="details-grid">
            	<div class="details-card">
                	<h3 class="details-title">
                    	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        	<path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/>
                    	</svg>
                    	Ceremony
                	</h3>
                	<div class="details-content">
                    	<p><strong>Date:</strong> September 6, 2025</p>
                    	<p><strong>Time:</strong> 1:00 PM</p>
                    	<p><strong>Location:</strong> Farm Venue</p>
                    	<p><strong>Address:</strong> 6622 NC 43, Fountain, NC</p>
                    	<p>Our ceremony will take place in a beautiful rustic farm setting. Please arrive 30 minutes early to be seated.</p>
                	</div>
            	</div>
           	 
            	<div class="details-card">
                	<h3 class="details-title">
                    	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        	<path d="M11 9h-5c-1.104 0-2 .896-2 2v8c0 1.104.896 2 2 2h5c1.104 0 2-.896 2-2v-8c0-1.104-.896-2-2-2zm1 10c0 .552-.448 1-1 1h-5c-.552 0-1-.448-1-1v-8c0-.552.448-1 1-1h5c.552 0 1 .448 1 1v8zm6-15c-2.209 0-4 1.791-4 4v11c0 1.104.896 2 2 2h5c1.104 0 2-.896 2-2v-11c0-2.209-1.791-4-4-4zm3 3v1h-6v-1c0-1.656 1.344-3 3-3s3 1.344 3 3zm-4 13c-.552 0-1-.448-1-1v-8h6v8c0 .552-.448 1-1 1h-4z"/>
                    	</svg>
                    	Reception
                	</h3>
                	<div class="details-content">
                    	<p><strong>Time:</strong> 2:30 PM - 7:00 PM</p>
                    	<p><strong>Location:</strong> Farm Venue (same location)</p>
                    	<p>Immediately following the ceremony, join us for cocktails, dinner, and dancing at the same beautiful farm location.</p>
                	</div>
            	</div>
           	 
            	<div class="details-card">
                	<h3 class="details-title">
                    	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        	<path d="M19 7h-8v-2h8v2zm-8 10h-3v-2h3v2zm0-4h-3v-2h3v2zm0-4h-3v-2h3v2zm-7 12c-1.104 0-2-.896-2-2v-16c0-1.104.896-2 2-2h8c1.104 0 2 .896 2 2h8c1.104 0 2 .896 2 2v16c0 1.104-.896 2-2 2h-18zm10-18h-10.002c-.551 0-.998.447-.998.998v16.004c0 .551.447.998.998.998h10.002v-18zm8.002 0h-8.002v18h8.002c.551 0 .998-.447.998-.998v-16.004c0-.551-.447-.998-.998-.998z"/>
                    	</svg>
                    	Accommodations
                	</h3>
                	<div class="details-content">
                    	<p><strong>Hotel:</strong> Hilton Greenville</p>
                    	<p><strong>Address:</strong> 207 SW Greenville Blvd, Greenville, NC 27834</p>
                    	<p><strong>Phone:</strong> (252) 355-5000</p>
                    	<p>We have reserved a block of rooms at the Hilton Greenville under "Morgan & Robert Wedding" at a special rate. Please book by August 6, 2025 to secure this rate.</p>
                    	<p><a href="https://www.hilton.com" target="_blank" style="color: var(--primary); text-decoration: none; font-weight: bold;">Book Your Room &rarr;</a></p>
                	</div>
            	</div>
           	 
            	<div class="details-card">
                	<h3 class="details-title">
                    	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        	<path d="M11 6.999c2.395.731 4.27 2.607 4.999 5.001.733-2.395 2.608-4.269 5.001-5-2.393-.731-4.268-2.605-5.001-5-.729 2.394-2.604 4.268-4.999 4.999zm7 7c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm-6 3c-2.395-.731-4.27-2.607-4.999-5.001-.733 2.395-2.608 4.269-5.001 5 2.393.731 4.268 2.606 5.001 5.001.729-2.395 2.604-4.27 4.999-5.001z"/>
                    	</svg>
                    	Dress Code
                	</h3>
                	<div class="details-content">
                    	<p>Our dress code is <strong>Formal/Semi-Formal</strong>.</p>
                    	<p>Ladies: Nice dresses with appropriate coverage (no exposed cleavage or extremely short hemlines).</p>
                    	<p>Gentlemen: Dress slacks with button-down shirts, ties, and dress shoes.</p>
                    	<p>Our ceremony and reception will take place on a farm, so please choose appropriate footwear for grassy/outdoor surfaces.</p>
                	</div>
            	</div>
        	</div>
       	 
        	<!-- Integrated venue map with barn image overlay - now clickable for directions -->
        	<div class="venue-map-container" id="venue-directions">
            	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.3029322251787!2d-77.2918486!3d35.5621995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89aec5f7cf66cbc3%3A0x8bda3c5c26d2d863!2s6622%20NC-43%2C%20Fountain%2C%20NC%2027829!5e0!3m2!1sen!2sus!4v1683909487279!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
           	 
            	<div class="venue-overlay">
                	<div class="venue-info-overlay">
                    	<h3>Our Beautiful Venue</h3>
                    	<p>We're excited to celebrate our special day at this beautiful rustic farm venue. The ceremony will take place in the garden area, with the reception following in the beautifully restored historic barn.</p>
                    	<p><strong>Parking:</strong> Ample parking is available on-site.</p>
                    	<p><strong>Accessibility:</strong> The venue is wheelchair accessible.</p>
                	</div>
            	</div>
           	 
            	<div class="venue-image-container">
                	<img src="barn.jpg" alt="Our Beautiful Wedding Venue Barn">
            	</div>
           	 
            	<div class="directions-hint">
                	<span>👆 Click for Directions</span>
            	</div>
        	</div>
    	</div>
	</section>

	<!-- Registry Section -->
	<section id="registry" class="registry">
    	<div class="container">
        	<h2 class="section-title">Registry</h2>
        	<p style="text-align: center; max-width: 700px; margin: 0 auto 40px auto;">Thank you for considering a gift to help us begin our married life together. We've created a registry with some items we would love to have in our new home.</p>
       	 
        	<div class="registry-container">
            	<a href="https://www.amazon.com/wedding/registry" target="_blank" class="registry-link">
                	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    	<path d="M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705c-.209.189-.512.201-.745.074-1.052-.872-1.238-1.276-1.814-2.106-1.734 1.767-2.962 2.297-5.209 2.297-2.66 0-4.731-1.641-4.731-4.925 0-2.565 1.391-4.309 3.37-5.164 1.715-.754 4.11-.891 5.942-1.095v-.41c0-.753.06-1.642-.383-2.294-.385-.578-1.124-.82-1.775-.82-1.205 0-2.277.618-2.54 1.897-.056.285-.27.567-.566.582l-3.145-.339c-.266-.06-.559-.283-.484-.703.719-3.782 4.155-4.918 7.229-4.918 1.572 0 3.625.42 4.862 1.611 1.572 1.469 1.424 3.427 1.424 5.557v5.023c0 1.512.63 2.178 1.225 2.996.209.291.256.642-.01.863-.647.549-1.794 1.555-2.424 2.117l-.009-.002zm-3.754-12.883c-1.343.031-2.765.261-3.865.791-.846.411-1.313 1.106-1.313 2.072 0 .872.474 1.609 1.313 1.88.62.199 1.343.199 1.982.199 1.343 0 2.471-.772 2.727-1.982.164-.79.117-1.724.117-2.486v-.474h-.961z"/>
                	</svg>
                	Amazon Wedding Registry
            	</a>
        	</div>
    	</div>
	</section>

	<section id="rsvp" class="rsvp">
    	<div class="container">
        	<h2 class="section-title">RSVP</h2>
       	 
        	<!-- Invitation code verification -->
        	<div class="form-container">
            	<div class="invite-verification" id="invite-verification">
                	<h3 style="margin-bottom: 15px; color: var(--primary);">Please Enter Your Invitation Code</h3>
                	<p style="margin-bottom: 20px;">Your invitation code can be found on your invitation card.</p>
                	<div class="code-input-container">
                    	<input type="text" id="invitation-code" class="code-input" placeholder="Enter your code (e.g. JS2025)" maxlength="10">
                    	<button type="button" id="verify-code" class="code-submit">Verify</button>
                	</div>
                	<p id="code-message" style="margin-top: 10px; min-height: 20px;"></p>
            	</div>
           	 
            	<!-- RSVP form - hidden until code is verified -->
            	<form id="rsvp-form" class="rsvp-form" action="process_rsvp.php" method="post">
                	<input type="hidden" id="verified-code" name="code" value="">
               	 
                	<div class="form-group">
                    	<label for="name" class="form-label">Full Name(s)</label>
                    	<input type="text" id="name" name="name" class="form-input" readonly>
                	</div>
               	 
                	<div class="form-group">
                    	<label for="email" class="form-label">Email Address</label>
                    	<input type="email" id="email" name="email" class="form-input" required>
                	</div>
               	 
                	<div class="form-group">
                    	<label class="form-label">Will you be attending?</label>
                    	<div class="radio-group">
                        	<label class="radio-label">
                            	<input type="radio" name="attending" value="yes" class="radio-input" required>
                            	Joyfully Accept
                        	</label>
                        	<label class="radio-label">
                            	<input type="radio" name="attending" value="no" class="radio-input">
                            	Regretfully Decline
                        	</label>
                    	</div>
                	</div>
               	 
                	<div class="form-group" id="guests-group">
                    	<label for="guests" class="form-label">Number of Guests (Including Yourself)</label>
                    	<select id="guests" name="guests" class="form-select">
                        	<!-- Options will be populated based on invitation -->
                    	</select>
                	</div>
               	 
                	<div class="form-group" id="allergies-group">
                    	<label for="allergies" class="form-label">Dietary Restrictions or Allergies</label>
                    	<textarea id="allergies" name="allergies" class="form-textarea" rows="2" placeholder="Please list any food allergies or dietary restrictions we should be aware of"></textarea>
                	</div>
               	 
                	<div class="form-group">
                    	<label for="message" class="form-label">Message for the Couple (Optional)</label>
                    	<textarea id="message" name="message" class="form-textarea" rows="3"></textarea>
                	</div>
               	 
                	<button type="submit" class="submit-btn">Submit RSVP</button>
            	</form>
        	</div>
    	</div>
	</section>
    
	<section id="gallery" class="gallery">
    	<div class="container">
        	<h2 class="section-title">Gallery</h2>
        	<!-- Simple Carousel -->
        	<div class="carousel-container">
            	<div class="carousel-slides" id="carouselSlides">
                	<div class="carousel-slide">
                    	<img src="pic7.jpg" alt="Wedding Photo 1">
                	</div>
                	<div class="carousel-slide">
                    	<img src="pic8.jpg" alt="Wedding Photo 2">
                	</div>
                	<div class="carousel-slide">
                    	<img src="pic9.jpg" alt="Wedding Photo 3">
                	</div>
                	<div class="carousel-slide">
                    	<img src="pic10.jpg" alt="Wedding Photo 4">
                	</div>
                	<div class="carousel-slide">
                    	<img src="pic11.jpg" alt="Wedding Photo 5">
                	</div>
                	<div class="carousel-slide">
                    	<img src="pic12.jpg" alt="Wedding Photo 6">
                	</div>
            	</div>
           	 
            	<div class="carousel-controls">
                	<button class="carousel-control" id="prevBtn">&lt;</button>
                	<button class="carousel-control" id="nextBtn">&gt;</button>
            	</div>
           	 
            	<div class="carousel-indicators" id="carouselIndicators">
                	<!-- Indicators will be added by JavaScript -->
            	</div>
        	</div>
    	</div>
	</section>
    
	<footer>
    	<div class="container">
        	<div class="footer-content">
            	<div class="footer-logo">Morgan & Robert</div>
            	<div class="footer-date">September 6, 2025 &bull; 1:00 PM</div>
            	<div class="footer-nav">
                	<a href="#home" class="footer-link">Home</a>
                	<a href="#our-story" class="footer-link">Our Story</a>
                	<a href="#details" class="footer-link">Details</a>
                	<a href="#registry" class="footer-link">Registry</a>
                	<a href="#rsvp" class="footer-link">RSVP</a>
                	<a href="#gallery" class="footer-link">Gallery</a>
            	</div>
            	<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Morgan & Robert's Wedding</title>
	<!-- Cache-busting meta tags -->
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
	<style>
    	:root {
        	--primary: #B06A82;     	/* Rose Pink */
        	--secondary: #5B8A72;   	/* Sage Green */
        	--accent: #F0B67F;      	/* Peach */
        	--accent2: #D14545;     	/* Deep Red */
        	--light: #F7F4EA;       	/* Off-white */
        	--dark: #32292F;        	/* Deep Plum */
        	--brown: #705D56;       	/* Warm Brown */
    	}
    	 
    	* {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
    	}
    	 
    	body {
        	font-family: 'Lato', sans-serif;
        	background-color: var(--light);
        	color: var(--dark);
        	line-height: 1.6;
    	}
    	 
    	.container {
        	max-width: 1200px;
        	margin: 0 auto;
        	padding: 0 20px;
    	}
    	 
    	/* Header Styles - Adjusted to avoid covering faces */
    	header {
        	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('pic1.jpg');
        	background-size: cover;
        	background-position: center;
        	height: 100vh;
        	display: flex;
        	flex-direction: column;
        	justify-content: flex-end; /* Align content to the bottom */
        	align-items: center;
        	text-align: center;
        	color: white;
        	position: relative;
        	padding-bottom: 10vh; /* Add padding at the bottom */
    	}

    	.header-overlay {
        	position: absolute;
        	bottom: 0;
        	left: 0;
        	right: 0;
        	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
        	height: 40%;
        	pointer-events: none;
    	}
    	 
    	.header-title {
        	font-family: 'Great Vibes', cursive;
        	font-size: 5rem;
        	margin-bottom: 1rem;
        	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        	position: relative;
        	z-index: 2;
    	}
    	 
    	.header-date {
        	font-family: 'Playfair Display', serif;
        	font-size: 1.8rem;
        	margin-bottom: 2rem;
        	letter-spacing: 3px;
        	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        	position: relative;
        	z-index: 2;
    	}
    	 
    	.countdown {
        	display: flex;
        	justify-content: center;
        	gap: 20px;
        	margin-top: 2rem;
        	position: relative;
        	z-index: 2;
    	}
    	 
    	.countdown-item {
        	background-color: rgba(255, 255, 255, 0.2);
        	padding: 15px;
        	border-radius: 5px;
        	min-width: 80px;
        	backdrop-filter: blur(5px);
    	}
    	 
    	.countdown-value {
        	font-size: 2rem;
        	font-weight: bold;
    	}
    	 
    	.countdown-label {
        	font-size: 0.9rem;
        	text-transform: uppercase;
        	letter-spacing: 1px;
    	}
    	 
    	/* Navigation */
    	nav {
        	background-color: var(--dark);
        	position: sticky;
        	top: 0;
        	z-index: 100;
        	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    	}
    	 
    	.nav-container {
        	display: flex;
        	justify-content: space-between;
        	align-items: center;
        	padding: 15px 0;
    	}
    	 
    	.nav-logo {
        	font-family: 'Great Vibes', cursive;
        	color: var(--accent);
        	font-size: 1.8rem;
        	text-decoration: none;
    	}
    	 
    	.nav-menu {
        	display: flex;
        	gap: 20px;
        	list-style: none;
    	}
    	 
    	.nav-link {
        	color: var(--light);
        	text-decoration: none;
        	font-weight: 500;
        	font-size: 1rem;
        	text-transform: uppercase;
        	letter-spacing: 1px;
        	transition: color 0.3s;
    	}
    	 
    	.nav-link:hover {
        	color: var(--accent);
    	}
    	 
    	.mobile-menu-button {
        	display: none;
        	background: none;
        	border: none;
        	color: var(--light);
        	font-size: 1.5rem;
        	cursor: pointer;
    	}
    	 
    	/* Section Styles */
    	section {
        	padding: 80px 0;
    	}
    	 
    	.section-title {
        	font-family: 'Playfair Display', serif;
        	text-align: center;
        	font-size: 2.5rem;
        	margin-bottom: 50px;
        	color: var(--primary);
        	position: relative;
    	}
    	 
    	.section-title::after {
        	content: '';
        	position: absolute;
        	bottom: -10px;
        	left: 50%;
        	transform: translateX(-50%);
        	width: 80px;
        	height: 3px;
        	background-color: var(--accent);
    	}
    	 
    	/* Our Story Section */
    	.our-story {
        	background-color: white;
        	position: relative;
    	}
    	 
    	.story-content {
        	max-width: 800px;
        	margin: 0 auto;
        	padding: 0 20px;
        	position: relative;
        	z-index: 1;
    	}
    	 
    	.timeline {
        	position: relative;
        	max-width: 1200px;
        	margin: 0 auto;
        	margin-top: 50px;
    	}
    	 
    	.timeline::after {
        	content: '';
        	position: absolute;
        	width: 6px;
        	background-color: var(--accent);
        	top: 0;
        	bottom: 0;
        	left: 50%;
        	margin-left: -3px;
    	}
    	 
    	/* Enhanced timeline item clickability */
    	.timeline-item {
        	padding: 10px 40px;
        	position: relative;
        	background-color: inherit;
        	width: 50%;
        	cursor: pointer;
        	transition: transform 0.3s, box-shadow 0.3s;
    	}
    	 
    	.timeline-item:hover {
        	transform: translateY(-5px) scale(1.03);
        	filter: brightness(1.05);
        	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    	}
   	 
    	/* Pulse animation for timeline dots */
    	@keyframes pulse {
        	0% { transform: scale(1); opacity: 1; }
        	50% { transform: scale(1.2); opacity: 0.7; }
        	100% { transform: scale(1); opacity: 1; }
    	}
   	 
    	.timeline-item::after {
        	content: '';
        	position: absolute;
        	width: 25px;
        	height: 25px;
        	right: -12.5px;
        	background-color: white;
        	border: 4px solid var(--accent);
        	top: 15px;
        	border-radius: 50%;
        	z-index: 1;
        	transition: background-color 0.3s;
        	animation: pulse 2s infinite;
    	}
    	 
    	.timeline-item:hover::after {
        	background-color: var(--accent);
        	animation: none;
    	}
    	 
    	.left {
        	left: 0;
    	}
    	 
    	.right {
        	left: 50%;
    	}
    	 
    	.left::before {
        	content: " ";
        	height: 0;
        	position: absolute;
        	top: 22px;
        	width: 0;
        	z-index: 1;
        	right: 30px;
        	border: medium solid white;
        	border-width: 10px 0 10px 10px;
        	border-color: transparent transparent transparent white;
    	}
    	 
    	.right::before {
        	content: " ";
        	height: 0;
        	position: absolute;
        	top: 22px;
        	width: 0;
        	z-index: 1;
        	left: 30px;
        	border: medium solid white;
        	border-width: 10px 10px 10px 0;
        	border-color: transparent white transparent transparent;
    	}
    	 
    	.right::after {
        	left: -12.5px;
    	}
    	 
    	.timeline-content {
        	padding: 20px 30px;
        	background-color: white;
        	position: relative;
        	border-radius: 6px;
        	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    	}
    	 
    	.timeline-date {
        	font-family: 'Playfair Display', serif;
        	color: var(--primary);
        	font-weight: bold;
        	margin-bottom: 10px;
    	}
   	 
    	/* More obvious click indicators */
    	.click-indicator {
        	position: absolute;
        	bottom: 8px;
        	right: 10px;
        	background-color: var(--accent);
        	padding: 3px 8px;
        	border-radius: 20px;
        	font-size: 0.9rem;
        	color: white;
        	transition: all 0.3s ease;
        	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    	}
   	 
    	.timeline-item:hover .click-indicator {
        	transform: scale(1.1);
        	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    	}
    	 
    	/* Timeline Modal */
    	.timeline-modal {
        	display: none;
        	position: fixed;
        	z-index: 1000;
        	left: 0;
        	top: 0;
        	width: 100%;
        	height: 100%;
        	overflow: auto;
        	background-color: rgba(0, 0, 0, 0.8);
        	animation: fadeIn 0.3s;
    	}
    	 
    	@keyframes fadeIn {
        	from { opacity: 0; }
        	to { opacity: 1; }
    	}
    	 
    	.modal-content {
        	position: relative;
        	background-color: var(--light);
        	margin: 10% auto;
        	padding: 30px;
        	border-radius: 10px;
        	width: 80%;
        	max-width: 800px;
        	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        	animation: slideIn 0.3s;
    	}
    	 
    	@keyframes slideIn {
        	from { transform: translateY(-50px); opacity: 0; }
        	to { transform: translateY(0); opacity: 1; }
    	}
    	 
    	.close-modal {
        	position: absolute;
        	top: 15px;
        	right: 20px;
        	color: var(--dark);
        	font-size: 28px;
        	font-weight: bold;
        	transition: 0.3s;
        	cursor: pointer;
    	}
    	 
    	.close-modal:hover {
        	color: var(--accent2);
    	}
    	 
    	.modal-image {
        	width: 100%;
        	max-height: 400px;
        	object-fit: contain;
        	margin-bottom: 20px;
        	border-radius: 5px;
    	}
    	 
    	.modal-title {
        	font-family: 'Playfair Display', serif;
        	color: var(--primary);
        	margin-bottom: 10px;
    	}
    	 
    	/* Details Section */
    	.details {
        	background-color: var(--light);
        	position: relative;
        	padding-top: 80px;
        	padding-bottom: 80px;
    	}
    	 
    	.details-card {
        	background-color: white;
        	border-radius: 10px;
        	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        	padding: 30px;
        	margin-bottom: 30px;
        	position: relative;
        	overflow: hidden;
        	transition: transform 0.3s;
    	}
    	 
    	.details-card:hover {
        	transform: translateY(-5px);
    	}
    	 
    	.details-card::before {
        	content: '';
        	position: absolute;
        	top: 0;
        	left: 0;
        	right: 0;
        	height: 5px;
        	background-color: var(--accent);
    	}
    	 
    	.details-grid {
        	display: grid;
        	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        	gap: 30px;
    	}
    	 
    	.details-title {
        	font-family: 'Playfair Display', serif;
        	color: var(--primary);
        	margin-bottom: 15px;
        	font-size: 1.5rem;
        	display: flex;
        	align-items: center;
    	}
    	 
    	.details-title svg {
        	margin-right: 10px;
        	fill: var(--accent);
    	}
    	 
    	.details-content {
        	line-height: 1.8;
    	}
    	 
    	.details-content strong {
        	color: var(--primary);
    	}
    	 
    	/* Integrated venue and map section */
    	.venue-map-container {
        	position: relative;
        	margin-top: 40px;
        	border-radius: 10px;
        	overflow: hidden;
        	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    	}
   	 
    	.venue-overlay {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100%);
        	z-index: 2;
        	display: flex;
        	align-items: center;
    	}
   	 
    	.venue-info-overlay {
        	color: white;
        	max-width: 400px;
        	padding: 30px;
        	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    	}
   	 
    	.venue-info-overlay h3 {
        	font-family: 'Playfair Display', serif;
        	color: var(--accent);
        	font-size: 1.8rem;
        	margin-bottom: 15px;
    	}
   	 
    	.venue-image-container {
        	position: absolute;
        	top: 20px;
        	right: 20px;
        	width: 300px;
        	height: 200px;
        	border-radius: 10px;
        	overflow: hidden;
        	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        	z-index: 3;
        	border: 5px solid white;
    	}
   	 
    	.venue-image-container img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
    	}
    	 
    	/* Registry Section */
    	.registry {
        	background-color: white;
        	position: relative;
        	padding-top: 80px;
        	padding-bottom: 40px;
    	}
   	 
    	.registry-container {
        	text-align: center;
        	margin-top: 40px;
    	}
   	 
    	.registry-link {
        	display: inline-block;
        	background-color: var(--accent);
        	color: var(--dark);
        	text-decoration: none;
        	padding: 15px 30px;
        	border-radius: 5px;
        	font-weight: bold;
        	font-size: 1.1rem;
        	transition: all 0.3s ease;
        	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    	}
   	 
    	.registry-link:hover {
        	background-color: var(--primary);
        	color: white;
        	transform: translateY(-3px);
        	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    	}
   	 
    	.registry-link svg {
        	margin-right: 10px;
        	vertical-align: middle;
    	}
    	 
    	/* RSVP Section */
    	.rsvp {
        	background-color: var(--light);
        	position: relative;
        	padding-top: 80px;
        	padding-bottom: 80px;
    	}
    	 
    	.form-container {
        	max-width: 700px;
        	margin: 0 auto;
        	background-color: white;
        	padding: 40px;
        	border-radius: 10px;
        	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        	position: relative;
    	}
    	 
    	.form-container::before {
        	content: '';
        	position: absolute;
        	top: 10px;
        	right: 10px;
        	bottom: 10px;
        	left: 10px;
        	border: 1px solid var(--accent);
        	border-radius: 5px;
        	pointer-events: none;
    	}
    	 
    	.form-group {
        	margin-bottom: 20px;
    	}
    	 
    	.form-label {
        	display: block;
        	margin-bottom: 5px;
        	font-weight: 700;
        	color: var(--primary);
    	}
    	 
    	.form-input,
    	.form-select,
    	.form-textarea {
        	width: 100%;
        	padding: 12px 15px;
        	border: 1px solid #ddd;
        	border-radius: 5px;
        	font-family: 'Lato', sans-serif;
        	color: var(--dark);
        	transition: border-color 0.3s;
    	}
    	 
    	.form-input:focus,
    	.form-select:focus,
    	.form-textarea:focus {
        	outline: none;
        	border-color: var(--accent);
    	}
    	 
    	.radio-group {
        	display: flex;
        	gap: 20px;
        	margin-top: 10px;
    	}
    	 
    	.radio-label {
        	display: flex;
        	align-items: center;
        	cursor: pointer;
    	}
    	 
    	.radio-input {
        	margin-right: 8px;
    	}
    	 
    	.submit-btn {
        	background-color: var(--primary);
        	color: white;
        	border: none;
        	padding: 15px 30px;
        	font-size: 1rem;
        	border-radius: 5px;
        	cursor: pointer;
        	transition: background-color 0.3s;
        	font-weight: bold;
        	letter-spacing: 1px;
        	text-transform: uppercase;
        	width: 100%;
        	margin-top: 10px;
    	}
    	 
    	.submit-btn:hover {
        	background-color: var(--accent2);
    	}
   	 
    	/* Invitation code verification */
    	.invite-verification {
        	margin-bottom: 30px;
        	text-align: center;
    	}
   	 
    	.code-input-container {
        	display: flex;
        	max-width: 400px;
        	margin: 0 auto;
    	}
   	 
    	.code-input {
        	flex: 1;
        	padding: 12px 15px;
        	border: 1px solid #ddd;
        	border-radius: 5px 0 0 5px;
        	font-family: 'Lato', sans-serif;
        	text-transform: uppercase;
    	}
   	 
    	.code-submit {
        	background-color: var(--secondary);
        	color: white;
        	border: none;
        	padding: 0 20px;
        	border-radius: 0 5px 5px 0;
        	cursor: pointer;
        	transition: background-color 0.3s;
    	}
   	 
    	.code-submit:hover {
        	background-color: var(--primary);
    	}
   	 
    	.rsvp-form {
        	display: none;
    	}
   	 
    	.rsvp-form.active {
        	display: block;
    	}