body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Georgia, serif; /* Base font family for all text */
    background-color: #fffee9; /* Set background color */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    height: 100%;
}

.logo-container {
    text-align: center; /* Center the logo */
    padding: 20px 0 0 0; /* Add padding around the logo but no padding at the bottom */
    background-color: #fffee9; /* Set background color */
}

.logo {
    max-width: 175px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
}

h2 {
    font-family: "Bad Script", cursive; /* Set font family for all h2 elements */
    font-weight: 700; /* Adjust weight as needed */
    text-align: center; /* Center align all h2 elements */
    font-size: 38px; /* Increased by 2px */
    margin-bottom: 10px; /* Decreased space below h2 */
    margin-top: 40px; /* Decreased space below h2 */
    color: #008080;
    transform: rotate(-3deg); /* Slightly tilt the text */
}

h3 {
    text-align: center; /* Center align all h2 elements */
}

.divider {
    text-align: center;
    font-size: 28px; /* Increased by 2px */
    color: #FF7F50; /* Heart color */
    margin: 20px 0; /* Space around the heart symbol */
}

button {
    background-color: #FF7F50; /* Coral background */
    color: white; /* White text */
    border: none; /* Remove default border */
    padding: 5px 10px; /* Increased padding */
    font-size: 12px; /* Increased by 2px */
    font-weight: 700;
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Light shadow */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
}

button:hover {
    background-color: #FF6347; /* Slightly darker coral on hover */
    transform: scale(1.05); /* Slight zoom on hover */
}

.container {
    display: flex;
    height: 100vh;
    overflow: hidden; /* Prevent any overflow issues */
}

.photo {
    flex: 0 0 50%;
    max-height: 100vh;
    overflow: hidden;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
    background-color: #fffee9; /* Keeping content background same as body for consistency */
}

section {
    flex: 1;
    margin-bottom: 40px;
    padding: 0 20px;
}

#map {
    flex: 1;
    padding: 0;
    margin: 0;
    height: 100%; /* Ensure the map section takes the full available height */
    width: 99%;
}

#map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Ensure it takes the full width */
}

.button-container {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: 10px; /* Set the gap between buttons */
    flex-wrap: wrap; /* Allow wrapping */
}

.button-container > div {
    flex: none; /* Ensure flex doesn't add space */
    margin: 0; /* Ensure no margin */
    padding: 0; /* Ensure no padding */
    display: flex; /* Ensure internal elements follow flex rules */
}

.timeline {
    position: relative;
    margin: 0 auto; /* Center align the timeline */
    padding-left: 0; /* Remove left padding */
    width: 80%; /* Adjust width as needed */
}

.timeline-item {
    position: relative;
    margin-bottom: 30px; /* Decreased margin for smaller spacing between items */
    display: flex;
    align-items: center; /* Center align the items vertically */
    justify-content: center; /* Center align the items horizontally */
    text-align: center; /* Center align the text */
}

.timeline-item:hover .timeline-content {
    background-color: #fcfbda; /* Slightly darker background on hover */
    transform: scale(1.1); /* Slight zoom on hover */
    z-index: 1; /* Bring to front */
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 30px; /* Adjust height as needed for smaller spacing */
    border-left: 1px dotted #FF7F50; /* Dotted line between items */
}

.timeline-item:last-child::after {
    display: none; /* Remove the line after the last item */
}

.timeline-content {
    padding: 20px; /* Adjust padding as needed */
    flex: 1;
    text-align: center; /* Center align the text */
    line-height: 1.6; /* Increased line spacing */
    transition: transform 0.3s, background-color 0.3s; /* Smooth transition for zoom and background color */
}

.timeline-content h3 {
    font-size: 20px; /* Increased by 2px */
    color: #FF7F50; /* Gold color */
    margin: 0;
    font-weight: normal;
    font-family: Georgia, serif;
}

.timeline-content h3 span {
    font-size: 17px; /* Increased by 2px */
    text-transform: uppercase; /* Keep text as capital letters */
    font-weight: 700;
}

.timeline-content p {
    margin: 10px 0; /* Increased margin between paragraphs */
    font-size: 17px; /* Increased by 2px */
    color: #008080; /* Adjust color for readability */
}

#intro p {
    margin: 10px 0; /* Increased margin between paragraphs */
    font-size: 18px; /* Increased by 2px */
    color: #008080; /* Adjust color for readability */
    text-align: center; /* Center align all p elements */
    line-height: 1.6; /* Adjust line height for better readability */
}

#contact p {
    margin: 10px 0; /* Increased margin between paragraphs */
    font-size: 18px; /* Increased by 2px */
    color: #008080; /* Adjust color for readability */
    text-align: center; /* Center align all p elements */
    line-height: 1.6; /* Adjust line height for better readability */
}

#dresscode p {
    margin: 10px 0; /* Increased margin between paragraphs */
    font-size: 18px; /* Increased by 2px */
    color: #008080; /* Adjust color for readability */
    text-align: center; /* Center align all p elements */
    line-height: 1.6; /* Adjust line height for better readability */
}

.timeline-content i {
    font-style: normal;
    color: #999;
    display: block;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    border: 0px solid #ddd;
    border-radius: 10px;
    background-color: #fcfbda;
    font-family: Georgia, serif;
}

.contact-form:hover {
    background-color: #fcfbda;
}

.contact-form label {
    text-transform: uppercase;
    font-weight: bold;
    color: #FF7F50;
    font-size: 15px;
}

.contact-form input, .contact-form textarea {
    width: 95%; /* Shortened width to fit within the form section */
    padding: 0.5rem;
    margin: 0.5rem 0;
    border: 1px solid #FF7F50;
    border-radius: 5px;
    font-family: Georgia, serif;
}

.contact-form button {
    background-color: #FF7F50;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.3s;
}

.contact-form button:hover {
    background-color: #FF6347;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto;
    }

    .photo {
        flex: 0 0 auto;
        max-height: auto;
    }

    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 0;
        background-color: #fffee9; /* Keeping content background same as body for consistency */
    }

    .timeline {
        padding-left: 0;
    }

    .timeline-item::after {
        left: 50%; /* Center the vertical line */
        transform: translateX(-50%); /* Adjust to perfectly center the line */
        height: 20px; /* Reduce height for smaller screens */
    }

    .timeline-item {
        margin-bottom: 20px; /* Adjusted for mobile */
    }

    .timeline-content h3 {
        font-size: 19px; /* Increased by 2px */
    }

    .timeline-content h3 span {
        font-size: 15px; /* Increased by 2px */
    }

    .timeline-content p {
        font-size: 15px; /* Increased by 2px */
        margin: 5px 0; /* Adjust margin for smaller screens */
    }

    #intro p {
        font-size: 17px; /* Increased by 2px for mobile */
    }

}