body {
    background-color: black;
}

html {
    scroll-behavior: smooth;
}

/* Navigation bar styling */
nav {
    border-top: 1px solid #efd5ab;
    border-bottom: 1px solid #efd5ab;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 10px;
    margin: 0;
}

nav li {
    font-family: 'Forum', regular;
    color: #efd5ab;
    margin: 0 50px;
}

nav a {
    color: #efd5ab; /* Light gold color to match the website theme */
    text-decoration: none;
    font-size: 14px; /* Keeps the nav bar small */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    nav {
        width: 100%; /* Full width on mobile */
    }

    nav ul {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
    }

    nav li {
        margin: 10px 0; /* Reduce margin for mobile */
    }

    nav a {
        font-size: 12px; /* Slightly smaller font size */
    }
}

.boundary {
    text-align: center;
}


.container {
    padding: 20px;
}

.info-section {
    padding: 20px;
}

/* Scoped styles for the RSVP form component */

/* Container styling */
.rsvp-form {
    text-align: left;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    max-width: 600px; /* Reasonable width for form */
    margin: 40px auto; /* Center the form with vertical spacing */
}

/* RSVP title */
.rsvp-form h2 {
    font-weight: bold;
    text-transform: uppercase;
    color: #333333;
    font-size: 26px;
    margin-bottom: 10px;
}

/* Subtitle */
.rsvp-form p.subtitle {
    color: #666666;
    font-size: 16px;
    margin-bottom: 20px;
}

/* Section headings */
.rsvp-form h3 {
    font-weight: bold;
    color: #333333;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Flexbox for side-by-side fields */
.form-row {
    display: flex;
    gap: 20px;
}

/* Form group for individual field containers */
.form-group {
    flex: 1; /* Equal width for side-by-side fields */
}

/* Labels */
.label {
    color: #333333;
    font-size: 16px;
    margin-bottom: 5px;
    display: block; /* Ensure label is above input */
}

/* Input fields */
.input-field {
    width: 85%;
    height: 45px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background-color: #FFFFFF;
    padding: 10px;
    font-size: 16px;
}

.input-field::placeholder {
    color: #999999;
}

/* Guest card container */
.guest-card {
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Guest subsection heading */
.rsvp-form h4 {
    font-weight: bold;
    color: #333333;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Checkbox styling */
.form-check label {
    color: #333333;
    font-size: 14px;
    margin-left: 5px;
}

/* Add Guest button container */
.add-guest-container {
    border: 1px dashed #061029;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    margin-top: 20px;
}

/* Add Guest button */
.add-guest-btn {
    background-color: #061029;
    color: #FFFFFF;
    border: none;
    border-radius: 50px; /* Pill-shaped */
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Space between + and text */
}

/* Submit RSVP button */
.submit-btn {
    background-color: #061029;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    padding: 15px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 20px;
}

/* Feedback message */
.alert {
    background-color: #3d8f44;
    color: #FFFFFF;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    padding: 15px;
    width: 95%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 20px;
    text-align: center;
}

.alert-warning {
    background-color: #ff7824;
    color: #FFFFFF;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    padding: 15px;
    width: 95%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 20px;
    text-align: center;
}

/* Guest header styling to position guest number and delete button */
.guest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Delete button styling */
.delete-btn {
    background-color: #061029; /* Matches the red of Add Guest and Submit buttons */
    color: #FFFFFF;
    border: none;
    border-radius: 50%; /* Circular shape */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: #000000; /* Slightly darker red on hover for feedback */
}

.front-page {
    background-image: url('images/background.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: fadeIn 1s ease-in forwards;
}

.front-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay for text readability */
    z-index: 1;
}

.front-page h1, .front-page h2, .front-page h3, .front-page h4 {
    text-align: center;
    position: relative;
    z-index: 2;
    color: #efd5ab;
    margin-top: 0px;
    margin-bottom: 0px;
}

.front-page h1 {
    font-family: 'Pinyon Script', cursive;
    font-weight: 400;
    font-size: 5rem;
}

.front-page h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.5rem;
}

.front-page h3 {
    font-family: 'Forum', regular;
    font-style: normal;
}

.front-page h4 {
    font-family: 'Forum', regular;
    font-size: 1.5rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Style and position the scroll indicator container */
.scroll-indicator {
    position: absolute;           /* Keeps it fixed at the bottom of the viewport */
    bottom: 20px;             /* 20px from the bottom */
    left: 50%;                /* Centers it horizontally */
    transform: translateX(-50%); /* Adjusts for the container's width */
    display: flex;            /* Aligns dots in a column */
    flex-direction: column;   /* Stacks dots vertically */
    align-items: center;      /* Centers dots horizontally within the container */
}

/* Style the dots */
.dot {
    width: 10px;              /* Width of each dot */
    height: 10px;             /* Height of each dot */
    background-color: #000;   /* Black color (adjust as needed) */
    border-radius: 50%;       /* Makes the dots circular */
    margin: 5px 0;            /* 5px vertical spacing between dots */
    animation: flash 1.5s infinite; /* Applies the flash animation, repeating infinitely */
}

/* Add delays to the second and third dots for sequential flashing */
.dot:nth-child(2) {
    animation-delay: 0.5s;    /* Second dot starts flashing after 0.5 seconds */
}

.dot:nth-child(3) {
    animation-delay: 1.0s;    /* Third dot starts flashing after 1.0 second */
}

/* Define the flashing animation */
@keyframes flash {
    0% { opacity: 0.3; }      /* Starts at 30% opacity */
    20% { opacity: 1; }       /* Reaches full opacity */
    40% { opacity: 1; }       /* Holds full opacity */
    60% { opacity: 0.3; }     /* Fades back to 30% opacity */
    100% { opacity: 0.3; }
}

.direction-map {
    max-height: 500px;
    max-width: 800px;
    border-radius: 25px;
    border: 5px solid red;
    padding: 20px;
    
}

.info-section {
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 600px; /* Reasonable width for form */
    margin: 20px auto; /* Center the form with vertical spacing */
}

.info-section h1, .info-section h2, .info-section h3, .info-section h4 {
    color: #efd5ab;
    font-family: 'Forum', regular;
    font-style: normal;
    text-decoration: none;
}

.info-section p {
    font-family: 'Forum', regular;
    color: #efd5ab;
    font-style: normal;
}

.boundary h1, p {
    color: #efd5ab;
    font-family: 'Forum', regular;
    font-style: normal;
}

.photos-section {
    padding-top: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 25px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .photo-grid {
        grid-template-columns: 1fr;
    }
}

.photo-grid img {
    width: 100%;
    height: auto;
    object-fit: contain;
}