/* Existing Styles */
body {
    font-family: "adobe-garamond-pro", serif;
    margin: 0;
    padding-bottom: 50px;
    color: #333;
}


a {
  color: #007bff; /* Modern blue, similar to Bootstrap */
  text-decoration: none; /* Optional: removes underline */
}

a:hover {
  color: #0056b3; /* Darker shade on hover */
  text-decoration: underline;
}

a:active {
  color: #004494; /* Even darker for active state */
}

a:visited {
  color: #007bff; /* Subtle gray for visited links */
}

.title-date {
    font-size: 2.5rem;
}

.section-one {
    /* min-height: 700px; */
    min-height: 700px;
    aspect-ratio: 16 / 7;
    width: 100%;
    /* Overlay using linear-gradient */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('assets/wed_center.jpg');

    /* Set background size for each layer */
    background-size: cover, cover;

    /* Set background repeat for each layer */
    background-repeat: no-repeat, no-repeat;

    /* Set background position for each layer */
    background-position: center center, center -50px;

    /* Set background attachment for each layer */
    background-attachment: local, local;

    /* Fallback background color */
    background-color: #f4f4f4;

    /* Positioning context */
    position: relative;
}

.section-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 1000px; */
    width: 100%;
    max-width: 100%;
    padding-top: 20px;
    /* margin: auto; */
    /* padding-left: 20px; */
    /* padding-right: 20px; */
}

.section-two > div {
    width: 100%;
    padding-bottom: 80px;
    padding-top: 30px;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
}

#rsvp {
    background: hsla(36,33.33333333%,94.11764706%,1);
}

#attire {
    background: rgba(154,183,211, 0.4);
}

#map {
    padding-left: 0;
    padding-right: 0;
}

.section-two iframe {
    padding-top: 50px;
    margin: auto;
    width: 100%;
}

.section-two h2 {
    text-align: center;
}

.section-two p {
    width: 900px;
    max-width: 100%;
    margin: auto;
}

h3 {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: 600;
}

hr {
    background-color: #000;
    height: 1px;
    border: 0;
    width: 100%;
    margin-top: 50px;
}

h2 {
    font-size: 3rem;
    font-weight: 600;
}

p {
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
}

header {
    display: flex;
    justify-content: space-between; /* Spread elements across the container */
    align-items: center; /* Align items vertically in the center */
    padding: 30px 20px; /* Add some padding for spacing */
}

header > div {
    flex: 1; /* Make each section take up equal horizontal space */
    text-align: center; /* Center content within each section */
}

.nav {
    display: flex; /* Align links horizontally */
    gap: 20px; /* Space between the navigation links */
}

.nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
}

.title {
    flex-grow: 1; /* Allows the title to take up remaining space */
    text-align: center; /* Center-align the title text */
    color: #fff;
    font-size: 1.8rem;
}

.rsvp {
    text-align: right; /* Ensures the RSVP section is right-aligned */
    visibility: hidden;
}

main {
    color: #fff;
    // aspect-ratio: 16 / 7; /* width / height */
    // max-height: calc(100vh - 100px);
    // min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin-top: 100px;
}

.home div {
    text-align: center;
    width: 100%;
}

.one {
    font-size: 2rem;
}

.two {
    margin-top: 30px;
    font-size: 4rem;
    font-family: "orpheuspro", serif;
}

.faq {
    width: 1200px;
    margin: auto;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .section-one {
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url('assets/wed_center.jpg');
        background-position: center center, center center;
    }


}

@media (max-width: 768px) {
    .section-one {
        max-height: calc(100vh - 100px);
        min-height: auto;
    }

    
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 15px;
    }

    .nav {
        // flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 10px;
    }

    .nav a {
        font-size: 1rem;
    }

    .title {
        font-size: 1.5rem;
        margin-top: 10px;
    }

    .title-date {
        font-size: 1.8rem;
    }

    main {
        min-height: 400px;
    }

    /* Adjust background-attachment for better performance on mobile */
    .section-one {
        background-attachment: scroll, scroll;
    }

}

@media (max-width: 480px) {
    header {
        padding: 15px 10px;
    }

    .title {
        font-size: 1.5rem;
        margin-top: 10px;
    }

    /* .nav a { */
        /* font-size: 0.9rem; */
    /* } */

    /* .title { */
        /* font-size: 1.2rem; */
    /* } */

    /* .one { */
        /* font-size: 1rem; */
    /* } */

    .one {
        font-size: 1.8rem;
    }

    .two {
        font-size: 3rem;
    }

    .title-date {
        font-size: 2.2rem;
    }

   
    .section-two h2 {
        font-size: 2.5rem;
    }

    .section-two p {
        font-size: 1.3rem;
    }
}