body {
  font-family: "Dancing Script", cursive;
  /* font-family: 'Geraldine', sans-serif; */
  text-align: center;
  background-color: #f9f5f2; /* Light peach background */
  margin: 0;
  padding: 0;
  font-size: 20px; /* Adjust the base font size */
}

header {
  background-color: #04b3b9f5; /* Dark purple header */
  color: #fff;
  padding: 1em 0;
  animation: fadeIn 1.5s ease-in-out; /* Fade-in animation */
}

header img {
  max-width: 200px; /* Adjust the maximum width as needed */
  height: auto;
  margin-bottom: 5px; /* Adjust the margin to decrease the space */
}

h1 {
  margin: 5px 0;
}

footer {
  text-align: center;
  padding: 5px;
  background-color: #f5f5f5; /* Background color similar to the header */
}

footer a {
  color: #15c79a;
  text-decoration: none; /* Optional: Remove underline */
}

footer a:hover {
  text-decoration: underline; /* Optional: Add underline on hover */
}

/* Styling for the Wedding Events list */
#events ul {
  list-style: none;
  padding: 0;
}

#events li {
  background-color: #fff;
  border-radius: 4px;
  margin: 8px 0;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  margin: 0;
  font-size: 36px; /* Adjust header font size */
}

/* Updated styles for the navigation bar */

nav {
  display: flex;
  justify-content: center;
  background-color: #ff8fab; /* Medium blue nav background */
  padding: 1em; /* Increased padding for a more prominent look */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  margin: 0 1em;
}

nav a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 24px; /* Adjusted navigation font size */
  transition: color 0.3s ease-in-out;
  position: relative; /* Positioning for the hover effect */
}

nav a:before {
  content: ""; /* Empty content for the pseudo-element */
  position: absolute;
  bottom: -4px; /* Adjust the position of the pseudo-element */
  left: 0;
  width: 100%;
  height: 2px; /* Height of the underline */
  background-color: #ff8fab; /* Light purple color */
  transform: scaleX(0); /* Initial scale for the underline (invisible) */
  transform-origin: bottom right;
  transition: transform 0.3s ease-in-out;
}

nav a:hover {
  color: #a394c3; /* Light purple on hover */
}

nav a:hover:before {
  transform: scaleX(1); /* Scale the underline on hover */
  transform-origin: bottom left;
}

section {
  max-width: 800px;
  margin: 2em auto;
  padding: 1em;
  background-color: #90A4B0; /* Light blue section background */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 1.5s ease-in-out; /* Fade-in animation */
}

/* Add this CSS block to your styles.css file */
#venue {
  background-color: #efdef8; /* Light coral background for the venue section */
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#venue address {
  margin-bottom: 10px;
}

#venue img {
  max-width: 10%;
  height: auto;
  margin-bottom: 10px;
}

#venue h2 {
  font-size: 24px; /* Adjust the font size of the heading */
  margin-bottom: 10px;
}

#venue address {
  margin-bottom: 10px;
}

#venue strong {
  font-size: 20px; /* Adjust the font size of the strong element */
  display: block; /* Ensure it takes the full width */
  margin-bottom: 10px;
}

/* Add your existing CSS styles here */

/* Additional styles for the gallery section */

#gallery {
  text-align: center;
  padding: 20px;
  background-color: #f5f5f5;
}

.slick-carousel {
  max-width:200px;
  max-height: 400px;
  margin: 0 auto;
}

.slick-prev,
.slick-next {
  font-size: 24px;
  color: #333;
}

.slick-carousel img {
  max-width: 100%;
  max-height: 400px;
  height: auto;
}

@media screen and (max-width: 600px) {
  nav {
    padding: 0.5em; /* Decreased padding for smaller screens */
  }

  nav li {
    margin: 0 0.3em; /* Adjusted margin for smaller screens */
  }

  nav a {
    font-size: 16px; /* Adjusted font size for smaller screens */
  }

  .slick-carousel {
    max-width: 80%; /* Adjust the maximum width for smaller screens */
  }

  .slick-carousel img {
    max-height: 200px; /* Adjust the maximum height for smaller screens */
  }

  header img {
    max-width: 80%; /* Adjust the maximum width for smaller screens */
  }

  table{
    margin-left: -1.3em;
  }
}

/* Style for the table */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

/* Style for table header */
th {
  background-color: #ff8fab; /* Medium blue */
  color: #fff;
  padding: 8px;
  /* text-align: left; */
}

/* Style for table cells */
td {
  border: 1px solid #ddd;
  padding: 8px;
}

/* Alternate row color */
tr:nth-child(even) {
  background-color: #f2f2f2; /* Light gray */
}

/* Hover effect */
tr:hover {
  background-color: #ddd; /* Light gray */
}

/* Style for the "Add to Calendar" button */
button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #3b97d4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Hover effect for the button */
button:hover {
  background-color: #3e5697;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #ffffff;
  margin: 10% auto; /* 10% from the top and centered */
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
  width: 60%; /* Adjust width as needed */
  max-width: 600px; /* Maximum width for larger screens */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.submit-btn {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #3b97d4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Hover effect for the button */
.submit-btn:hover {
  background-color: #3e5697;
}

#rsvpTable {
  width: 100%;
}

#rsvpTable td {
  padding: 10px;
}

#rsvpTable label {
  font-weight: bold;
}

#rsvpTable input[type="text"],
#rsvpTable input[type="email"],
#rsvpTable input[type="number"],
#rsvpTable input[type="tel"] {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

.custom-alert {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 999; /* Lower z-index value */
}

.close {
  position: absolute;
  top: 5px;
  right: 10px;
  bottom: 10px;
  font-size: 20px;
  cursor: pointer;
}

#alertMessage {
  margin: 0;
}

.vendor-scroller {
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent wrapping of logos */
  padding: 10px 0; /* Add some padding */
  background-color: #f5f5f5; /* Add background color */
}

.vendor-carousel {
  width: 80%; /* Adjust the width of the carousel container */
  margin: 0 auto;
}

.vendor-logo {
  text-align: center;
  margin-right: 20px; /* Adjust spacing between logos */
}

.vendor-logo img {
  display: block;
  width: 100px; /* Adjust size of the circular logo */
  height: 100px; /* Adjust size of the circular logo */
  border-radius: 50%; /* Make the image circular */
  margin: 0 auto 10px; /* Center the image vertically and add some margin */
}

.vendor-logo p {
  margin: 0; /* Remove default paragraph margin */
}

/* Style for the Contact Details section */
#contact {
  max-width: 800px;
  margin: 2em auto;
  padding: 1em;
  background-color: #d0e3f0; /* Light blue section background */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 1.5s ease-in-out; /* Fade-in animation */
}

#contact h2 {
  font-size: 36px; /* Adjust header font size */
  margin-bottom: 20px;
}

#contact h3 {
  font-size: 24px; /* Subheader font size */
  margin-bottom: 10px;
}

#contact ul {
  list-style: none;
  padding: 0;
}

#contact li {
  margin-bottom: 8px;
}

#contact a {
  color: #3b97d4; /* Link color */
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

#contact a:hover {
  color: #1e6aa6; /* Hover color */
}