@charset "utf-8";
/* CSS Document */


html, body
{
	width: 100%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
	background-color: #EAF4E8;
}

.heroBanner
{
	position: relative;
    width: 100%;
    height: 100vh; /* Full height of the viewport */
    background-image: url("Images/dj-leads-party-stockcake.webp"); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
}

.overlay {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
  z-index: 1; /* Ensure overlay is on top of the content */
}

.hero-content {
    position: relative;
	 width: 100%;
    max-width: 1500px; /* optional, for nicer layout */
    z-index: 2; /* Keep text above the overlay */
    color: white;
    text-align: center;
	left: 12%;
    padding: 20px;
    top: 50%; /* Center the text vertically */
    transform: translateY(-50%); /* Fine-tuning for vertical centering */
}

.hero-content h1
{
	font-size: 9em;
}

.hero-content p
{
	padding-bottom: 25%;
	left: 10px;
}

.clickMeButton
{
	position: relative;
	background-color: green;
	margin-top: 50%;
	padding: 10px;
}

/* Add a black background color to the top navigation */
.topnav {
   display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #333;
    padding: 0 16px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: all 0.3s ease; /* Smooth transition for the popup */
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the links when the screen is small and show the hamburger icon */
.topnav .icon {
    display: none;
	font-size: 36px; /* Make the hamburger icon bigger */
}


.heroBanner
{
	position: relative;
	background-color: #EAF4E8;
	width: 100%;
	height: 100vh;
}

.heroBanner h1
{
	font-size: 4rem;
	margin: 10%;
}

.heroBanner p
{
	position: relative;
	font-size: 1.5rem;
	float: right;
	right: 5%;
}

.memories {
    padding: 40px 0;
    background-color: #f4f4f4;
}

.memories {
    padding: 60px 0;
    background-color: #f4f4f4;
}

.memories-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.memories-text {
    flex: 1;
    padding-left: 20px;
}

.memories-text h2 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
}

.divider {
    width: 1px;
    background-color: #333;
    height: 100px;
}

.memories-description {
    flex: 1;
    padding-left: 20px;
}

.memories-description p {
    font-size: 1.2em;
    color: #666;
}

.memories-image {
    text-align: center;
    padding-top: 30px;
}

.memories-image img {
    width: 100%;
    max-width: 800px;
    height: auto;
}

.our-approach {
    padding: 60px 0;
    background-color: black;
}

.approach-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.approach-text {
    flex: 1;
    padding-left: 20px;
}

.approach-text h2 {
    font-size: 2.5em;
    font-weight: bold;
    color: white;
}

.divider {
    width: 1px;
    background-color: #333;
    height: 80px;
}

.approach-description {
    flex: 1;
    padding-left: 20px;
}

.approach-description p {
    font-size: 1.2em;
    color: white;
}
#randomImage {
  width: 100%;
  padding-top: 56.25%; /* Aspect ratio for 16:9 (height/width = 9/16 = 0.5625) */
  position: relative;
}

.randomImageDiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.randomImageDiv img {
  width: 100%;
  height: 80%;
  object-fit: cover; /* Ensures the image covers the container without distortion */
}



.our-story {
		background: linear-gradient(to right, #ACC2D9, #784B84);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distribute content evenly */
  padding: 20px;
  width: 100%;  /* Set a fixed width for stability */
  max-width: 1200px;
}

.story-text {
	position: relative;
	min-width: 30vw;  /* Fix text width */
  text-align: left;
	  left: 5%;
	flex-wrap: wrap;
}
.overlayWedding {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
	pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
  z-index: 1;
}
.story-text h1 {
  font-size: 4em;
  margin-bottom: 10px;
	width: 100%;
}
.story-description p
{
	font-size: 1.5em;
	color: black;
}

.nav-logo
{
	display: none;
}
.story-description a
{
	position: relative;
	font-size: 1.5em;
	left: 35%
}

.story-description {
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 1);
  font-size: 14px;
	width: 100%;
	right: 15%;
}

.story-images {
	position: relative;
  display: flex;
  gap: 15px;
  left: 20%;
}

.story-image {
  width: 500px;  /* Increased width */
  height: 464px; /* Increased height */
  object-fit: cover;
  border-radius: 15px;
}



.serviceSection
{
	height: 92vh;
	background-color:#E0F7FA;
       display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
}

.our-services {
  text-align: center;
  padding: 3rem 2rem;
height: 98%;
  background: linear-gradient(to left, #ACC2D9, #EAF4E8);
}

.our-services h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.services-description {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #555;
}

.services-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.ourService-item {
  position: relative;
  width: 30%;
  min-width: 250px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ourService-item img {
  width: 100%;
  height: 80%;
}

.serviceButton
{
	text-align: center;
	padding-top: 100px;
	padding-bottom: 200px;
}

.wedding-left .text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* dark semi-transparent background */
  pointer-events: none; /* So buttons and links still work */
}
.SeeMoreButton {
    text-align: center;
    margin-top: 80px;
}

.SeeMoreButton a
{
  color: white; /* Text color */
  padding: 10px 20px; /* Add padding around the text */
  border-radius: 5px; /* Optional: Add rounded corners */
  font-size: 2rem; /* Font size */
  font-weight: bold; /* Font weight */
  border: 2px solid white;
	background-color: #000; /* or your brand color */
  text-decoration: none;
}

.SeeMoreButton a:hover
{
	text-decoration: none;
	color: black;
	background-color: white;
}
.serviceButton a
{
  color: white; /* Text color */
  padding: 10px 20px; /* Add padding around the text */
  border-radius: 5px; /* Optional: Add rounded corners */
  font-size: 3rem; /* Font size */
  font-weight: bold; /* Font weight */
  border: 2px thick white;
}

.serviceButton a:hover
{
	text-decoration: none;
	background-color: white;
	color: black;
}

.portfolioSection
{
	position: relative;
	width: 100%;
	height: 100vh;
	background: linear-gradient(to right, #A4B0CC, #d9acc2);
}

.portfolio {
  text-align: center;
  padding: 50px 0;
}

.portfolioSectionHeader
{
	font-size: 4rem;
	text-align: center;
}

.portfolio-container1 {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.portfolio-item1 {
  width: 600px;
  height: 350px;
  overflow: hidden;
}

.portfolio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.portfolio-image:hover {
  transform: scale(1.05);
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}


	.portfolioButton {
    text-align: center;
    margin-top: 20px;
}

.portfolioButton2
{
	text-align: center;
	padding-top: 30px;
	padding-bottom: 300px;
}

.portfolioButton a
{
  color: white; /* Text color */
  padding: 10px 20px; /* Add padding around the text */
  border-radius: 5px; /* Optional: Add rounded corners */
  font-size: 2rem; /* Font size */
  font-weight: bold; /* Font weight */
  border: 2px solid white;
	    background-color: #000; /* or your brand color */
  text-decoration: none;
}

.portfolioButton a:hover
{
	text-decoration: none;
	color: black;
	background-color: white;
}

.portfolioButton2 a
{
  color: white; /* Text color */
  padding: 10px 20px; /* Add padding around the text */
  border-radius: 5px; /* Optional: Add rounded corners */
  font-size: 2rem; /* Font size */
  font-weight: bold; /* Font weight */
  border: 2px solid white;
	background-color: #000; /* or your brand color */
  text-decoration: none;
}

.portfolioButton2 a:hover
{
	text-decoration: none;
	color: black;
	background-color: white;
}

.modal-content {
  max-width: 90%;
  max-height: 80%;
  margin: auto;
  display: block;
}

.close {
  position: absolute;
  top: 10%;
  right: 25px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}


.quote-section {
            background-color: #D3D3D3;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 40px auto;
        }
        .quote-heading {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            font-size: 16px;
            color: #333;
            display: block;
            margin-bottom: 5px;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .form-group input[type="file"] {
            padding: 5px;
        }
        .form-group .checkbox-group {
            display: flex;
            flex-direction: column;
        }
        .form-group .checkbox-group label {
            margin-left: 5px;
        }
        .submit-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            text-align: center;
            width: 100%;
        }
        .submit-btn:hover {
            background-color: #218838;
        }

.footer {
            background-color: #333;
            color: white;
            padding: 40px 20px;
            text-align: center;
        }
        .footer a {
            color: #00aaff;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
        .footer .section {
            margin-bottom: 20px;
        }
        .footer .section h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .footer .social-links a {
            margin: 0 10px;
            font-size: 24px;
            color: white;
            transition: color 0.3s;
        }
        .footer .social-links a:hover {
            color: #00aaff;
        }
        .footer .contact-info {
            font-size: 16px;
        }

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Header */
header {
    background-color: #333;
    padding: 20px;
}

header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin-right: 20px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

/* Page Title */
.services-title {
    text-align: center;
    padding: 60px 20px;
    background-color: #f4f4f4;
}

.services-title h1 {
    font-size: 3em;
    color: #333;
}

.services-title p {
    font-size: 1.2em;
    color: #666;
}

/* Services Section */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 60px 20px;
    background-color: #fff;
}

.service-item {
    width: 45%;
    margin-bottom: 30px;
    text-align: center;
}

.service-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 20px;
}

.service-item h1 {
    font-size: 5rem;
    margin-bottom: 10px;
    color: #333;
}

.service-item p {
    font-size: 1.1em;
    color: #666;
}


.wedding-section {
  display: flex;
  padding: 20px;
	height: 70vh;
background-color: rgba(0, 0, 0, .6); /* Darker background with higher opacity */
  background-image: url("Images/wedding.jpg"); /* Add your parallax background image */
  background-attachment: fixed; /* This creates the parallax effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
	overflow: hidden;
}
.overloy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);  /* Semi-transparent dark overlay */
    filter: blur(5px);  /* Slight blur effect */
    z-index: 0;  /* Ensures the overlay stays behind the content */
}
.wedding-left {
  flex: 1;
  margin-left: 20%;
  padding: 20px;
	top: 10%;
	right: 10%;
  position: relative;
  z-index: 2; /* Ensures text is above the parallax background */
}

.weddingOverlay
{
	z-index: 1;
	background: rgba(0, 0, 0, 0.5); /* dark semi-transparent background */
	padding: 2%;
}
.wedding-left h1 {
  font-size: 5rem;
  margin-bottom: 10px;
}

.wedding-left p {
  font-size: 1.5em;
  margin-bottom: 20px;
}

.contact-button {
  background-color: #f8b400;
  border: none;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
	display: block;
	margin: 1rem auto;
	text-decoration: none;
}

.wedding-left a
{
	text-decoration: none;
}
.parallax-content a
{
	text-decoration: none;
}
.contact-button:hover {
  background-color: #e59400;
}

.wedding-right {
  flex: 1;
	position: relative;
	z-index: 1;
}

.slideshow-container {
  position: relative;
  max-width: 100%;
  width: 100%;
}

.overly
{
}

.slides {
  display: none;
  text-align: center;
}

.slides img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

.private-event-section {
  display: flex;
  justify-content: space-between;
  padding: 40px;
  background-color: #f5f5f5;
	height: auto;
}

.private-event-left {
  flex: 1;
  margin-right: 20px;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.private-event-left h1 {
  font-size: 3.5rem;
  margin-bottom: 10px;
}

.private-event-left p {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.rsvp-button {
  background-color: #f8b400;
  border: none;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
}

.rsvp-button:hover {
  background-color: #e59400;
}

.private-event-right {
  flex: 1;
  padding: 20px;
}

.private-event-right h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
	margin-left: 15%;
}

.testimonial-slideshow-container {
  position: relative;
  max-width: 100%;
  width: 100%;
}

.testimonial-slides {
  display: none;
  text-align: center;
  font-size: 1.2em;
  font-style: italic;
}

.testimonial-slides.fade {
  animation: fadeEffect 5s infinite;
}
.parallax-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('Images/dj-leads-party-stockcake.webp'); /* Use your image here */
  background-size: cover;
  background-position: center;
}

.parallax-section {
  position: relative;
  background-image: url(Images/dancing-on-a-cloud-1-scaled.jpg); /* Replace with your cloud image */
  background-attachment: fixed; /* Parallax effect */
  background-size: cover;
  background-position: center;
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.parallax-content {
  text-align: center;
  z-index: 2;
}

.parallax-content h1 {
  font-size: 4rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

.contact-button {
  background-color: #f8b400;
  border: none;
  padding: 10px 20px;
  font-size: 1.2em;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  margin-top: 20px;
}

.contact-button:hover {
  background-color: #e59400;
}


.footer-section {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 10px;
}

.footer-content p {
  font-size: 2em;
  font-weight: 600;
  margin: 0;
}

.footer-section:hover {
  background-color: #444;
}

.package {
    width: 300px;
    height: 450px;
    border: 2px solid #ddd;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
	align-items: center;
	justify-content: center;
	margin-top: 10%;
}

.package-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #ddd;
}

.package-content {
    padding: 15px;
    text-align: center;
}

.package-content h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #333;
}

.package-content ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
}

.package-content ul li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 5px;
}

.contact-btn {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.contact-btn:hover {
    background-color: #0056b3;
}
@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}




/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {

	.ourService-item img {
  width: 100%;
  height: auto;
}
}


@media (max-width: 768px) {
   .our-story {
    flex-direction: column;
    align-items: flex-start;
  }
	
	.package
	{
    width: 300px;
    height: 450px;
    border: 2px solid #ddd;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
	align-items: center;
	justify-content: center;
	margin-top: 40%;
	margin-left: 15%;
}
	
	
	.SeeMoreButton {
    text-align: center;
    margin-top: 80px;
	padding-bottom: 30%;
}

.SeeMoreButton a
{
  color: white; /* Text color */
  padding: 10px 20px; /* Add padding around the text */
  border-radius: 5px; /* Optional: Add rounded corners */
  font-size: 2rem; /* Font size */
  font-weight: bold; /* Font weight */
  border: 2px solid white;    background-color: #000; /* or your brand color */
  text-decoration: none;
}

	.private-event-section
	{
		padding-bottom: 15%;
	}
		}

	@media screen and (max-width: 768px) {
		.parallax-section
		{
		background-attachment: scroll; /* Disable parallax effect */

		}

		.wedding-left
		{
			right: 20%;
			top: 10%;
		}
  
		.wedding-left h1
		{
			z-index: 2;
		}
		
		.wedding-left
		{
			margin-top: 10%;
			right: 20%;
		}
		
		.weddingOverlay
		{
			padding: 4%;
		}
		.contact-button
		{
			
		}
		.private-event-section {
    flex-direction: column;
    align-items: center; /* optional: center content horizontally */
    text-align: center;  /* optional: center text */
  }

  .private-event-left,
  .private-event-right {
    width: 100%;
  }
		
		.private-event-right
		{
			margin-right: 10%;
		}
		
		.parallax-section
		{
			margin-top: 0%;
		}
  
		.nav-logo
		{
			display: block;
		}
		
		.nav-logo img
		{
			height: 40px;
			width: auto;
			padding: 10px 16px;
		}
  .story-text {
    max-width: 100%;
	  margin-right: 10%;
    margin-bottom: 20px;
  }

  .story-images {
    flex-direction: column;
    gap: 10px;
    align-items: center; /* Center images horizontally on mobile */
	  margin-right: 40%;
  }

  .story-image {
    width: auto;
    max-width: 100%; /* Optional: you can set a max width for the images */
    height: auto;
  }
	#GetAQuote {
            background-color: #D3D3D3;
padding: 40px 20px;  /* Add padding around the section */            
		border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 600px;
        }
	
	.portfolioSection {
  padding: 40px 20px;  /* Add padding around the section */
  margin-top: 208%;    /* Add margin at the top */
  background-color: rgba(255, 255, 255, 0.8);  /* Optional: semi-transparent background */
			bottom: 120%;

}
	
.portfolio-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Creates a 4-column grid */
            gap: 15px;
            padding: 20px;
            box-sizing: border-box;
}

        .portfolio-item {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .portfolio-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .portfolio-item:hover {
            transform: scale(1.05);
        }
		.hero-content {
    position: relative;
	 width: 100%;
    max-width: 1500px; /* optional, for nicer layout */
    z-index: 2; /* Keep text above the overlay */
    color: white;
    text-align: center;
	left: 0%;
    padding: 20px;
    top: 45%; /* Center the text vertically */
    transform: translateY(-50%); /* Fine-tuning for vertical centering */
}

.hero-content p
{
	padding-bottom: 25%;
}

		
		.our-services {
  text-align: center;
  padding: 3rem 2rem;
height: 150%;
  background: linear-gradient(to left, #ACC2D9, #EAF4E8);
}

        .caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-item:hover .caption {
            opacity: 1;
        }

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

        .modal-content {
            max-width: 90%;
            max-height: 90%;
            overflow: hidden;
        }

        .modal-content img, .modal-content video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .close-modal {
            position: absolute;
            top: 100px;
            right: 10px;
            color: white;
            font-size: 30px;
            cursor: pointer;
		}
/* Hide the menu links by default */
.topnav a {
    display: none; /* Hide the links */
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    color: #f2f2f2;
    background-color: #333;
}

/* Styling for the hamburger icon */
.topnav .icon {
    display: block; /* Show the hamburger icon */
    padding: 14px 16px;
    background-color: #333;
    color: #f2f2f2;
    text-align: center;
}

/* Initially hide the menu off-screen */
.topnav.responsive {
    display: block;
    position: fixed;
    top: 0;
    left: -100%; /* Start hidden off-screen */
    width: 100%;
    background-color: rgba(51, 51, 51, 0.9); /* Slight transparency */
    z-index: 9999;
    transition: transform 0.3s ease-in-out; /* Smooth sliding effect */
}

/* When the responsive class is added, slide the menu in */
.topnav.responsive.open {
    transform: translateX(100%); /* Move it into view */
}

/* When the menu is opened, show the links in a vertical menu */
.topnav.responsive a {
    display: block; /* Show the links in a vertical menu */
    background-color: #333;
    text-align: left;
}
@media screen and (max-width: 768px) {
  .wedding-section {
    background-attachment: scroll !important; /* Force override if needed */
  }
}

@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
	}
}