body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    scroll-behavior: smooth;
    background-image: url('https://richandbeth.com/images/background.jpg'); /* Replace with your image */
    background-size: cover;
    background-attachment: fixed; /* Make background image scroll with the page */
    background-position: center;
    background-color: rgba(0, 0, 0, 0.5); /* Add a dark overlay to the background image */
}
.splash-page {
    background-image: url('https://richandbeth.com/images/background.jpg'); /* Replace with your image */
    background-size: cover;
    background-attachment: fixed; /* Make background image scroll with the page */
    background-position: center;
    width: 100%;
    min-height: 100vh; /* Ensure the splash page covers the full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Add a dark overlay to the background image */
}
.navbar {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    gap: 15px; /* Add space between buttons */
    padding: 20px;
    background: none; /* Remove background */
    position: absolute; /* Fix navbar at the top without scrolling */
    top: 0;
    z-index: 1000; /* Ensure navbar stays on top */
}
.navbar a {
    color: white;
    text-decoration: none;
    font-size: 1.5em; /* Increase font size */
    font-family: 'Playfair Display', serif; /* Match font to subtitle */
    font-weight: bold; /* Make text bold */
    padding: 15px 30px; /* Add padding to make buttons larger */
    background: rgba(0, 0, 0, 0.3); /* Match background to subtitle */
    border-radius: 5px; /* Round the corners of the buttons */
    border: 2px solid gold; /* Add gold border */
    transition: background 0.3s; /* Smooth transition for hover effect */
}
.navbar a:hover {
    background: rgba(0, 0, 0, 0.5); /* Darken background on hover */
}
.title {
    font-size: 6.3em; /* Increase size by 40% */
    margin: 0;
    font-family: 'Pacifico', cursive; /* Fancy script font */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1); /* Increase text shadow for more contrast */
    position: relative;
    z-index: 1;
}
.subtitle {
    font-size: 3em; /* Keep the same size */
    margin: -30px 0 0 40px; /* Further overlap subtitle with title and increase indentation */
    font-family: 'Playfair Display', serif; /* Elegant font */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1); /* Increase text shadow for more contrast */
    font-weight: normal; /* Unbold the subtitle */
    position: relative;
    z-index: 0;
    display: inline-block; /* Limit background to text */
    background: rgba(0, 0, 0, 0.3); /* Make background more discrete */
    padding: 5px 10px; /* Add padding for better readability */
    border-radius: 5px; /* Add slight rounding to the corners */
    border: 2px solid gold; /* Add gold border */
}
.content {
    position: absolute; /* Ensure content stays in original position */
    bottom: 20%;
    left: 10%;
    text-align: left;
    padding: 20px; /* Add padding for better readability */
}
.content-box {
    position: absolute;
    top: 25%; /* Move up */
    right: 10%; /* Move left */
    width: 30%; /* Reduce width */
    background: rgba(0, 0, 0, 0.6); /* Increase background opacity for more contrast */
    padding: 15px; /* Reduce padding */
    border-radius: 10px;
    color: white;
    text-align: left;
    margin: 20px auto; /* Center the content box */
}
.content-box h2 {
    font-family: 'Playfair Display', serif; /* Match font to subtitle */
    font-size: 3em; /* Match font size to subtitle */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1); /* Increase text shadow for more contrast */
    margin-top: 0;
    text-align: center; /* Center the text */
    border: 2px solid gold; /* Add fancy border */
    padding: 10px; /* Add padding inside the border */
    border-radius: 10px; /* Round the corners of the border */
    position: relative; /* Allow overlapping */
    z-index: 1; /* Ensure it stays on top */
}
.content-box ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: 20px;
    margin-top: -20px; /* Move the list up */
    position: relative; /* Allow overlapping */
    z-index: 0; /* Ensure it stays below the title */
}
.content-box ul li {
    margin: 8px 0; /* Reduce margin */
    position: relative;
    padding-left: 25px; /* Add space for custom bullet */
}
.content-box ul li::before {
    content: '❦'; /* Custom floral heart bullet */
    font-size: 1.5em; /* Adjust size */
    color: gold; /* Elegant color */
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(45deg); /* Rotate the floral heart */
}
.content-box ul li a {
    font-family: 'Playfair Display', serif; /* Match font to subtitle */
    font-size: 1.5em; /* Choose a visually pleasing size */
    color: white;
    text-decoration: none;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1); /* Increase text shadow for more contrast */
    padding-left: 10px; /* Indent the link */
}
.content-box ul li a:hover {
    text-decoration: underline;
}
.video-box {
    display: none; /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid gold; /* Add gold border */
}
.video-box iframe {
    width: 100%;
    height: 100%;
}
.video-box .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    color: white;
    cursor: pointer;
}
.gallery-section {
    width: 80%; /* Take up most of the page */
    margin: 20px auto; /* Center the section with margin on each side */
    background: rgba(0, 0, 0, 0.6); /* Same translucent background */
    padding: 20px; /* Add padding */
    border-radius: 10px; /* Round the corners */
    border: 2px solid gold; /* Same gold border */
    color: white;
    text-align: center; /* Center the content of the gallery section */
}
.gallery-section h2 {
    font-family: 'Playfair Display', serif; /* Same font as "Tour / Gallery" */
    font-size: 2.5em; /* Make the font size a little bit smaller */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1); /* Same text shadow */
    margin-top: 0;
    border: 2px solid gold; /* Add fancy border */
    padding: 10px; /* Add padding inside the border */
    border-radius: 10px; /* Round the corners of the border */
    width: auto; /* Allow word wrapping */
    max-width: 100%; /* Ensure it doesn't exceed the container width */
    box-sizing: border-box; /* Include padding and border in element's total width */
    display: inline-block; /* Limit the border to the text */
}
.gallery-section .photos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}
.gallery-section .photos img {
    height: 200px; /* Set the same height for all images */
    width: auto; /* Maintain aspect ratio */
    border-radius: 10px;
    border: 2px solid gold;
    cursor: pointer;
}
.gallery-section .restaurant-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.gallery-section .restaurant-content .photos,
.gallery-section .restaurant-content .description,
.gallery-section .restaurant-content .map {
    flex: 1;
    margin: 10px;
}
.gallery-section .restaurant-content .photos img,
.gallery-section .restaurant-content .map iframe {
    width: 100%;
    height: 300px; /* Set a fixed height for images and maps */
    border-radius: 10px;
    border: 2px solid gold;
}
.gallery-section .activity-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.gallery-section .activity-content .photos,
.gallery-section .activity-content .description,
.gallery-section .activity-content .map {
    flex: 1;
    margin: 10px;
}
.gallery-section .activity-content .photos img,
.gallery-section .activity-content .map iframe {
    width: 100%;
    height: 300px; /* Set a fixed height for images and maps */
    border-radius: 10px;
    border: 2px solid gold;
}
.gallery-section .activity-content .description a {
    font-weight: bold;
    font-size: 1.4em; /* Make the font size a bit smaller */
    color: gold; /* Change to gold color */
}
.gallery-section .beach-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.gallery-section .beach-content .photos,
.gallery-section .beach-content .description,
.gallery-section .beach-content .map {
    flex: 1;
    margin: 10px;
}
.gallery-section .beach-content .photos img,
.gallery-section .beach-content .map iframe {
    width: 100%;
    height: 300px; /* Set a fixed height for images and maps */
    border-radius: 10px;
    border: 2px solid gold;
}
.gallery-section .beach-content .description a {
    font-weight: bold;
    font-size: 1.4em; /* Make the font size a bit smaller */
    color: gold; /* Change to gold color */
}
.full-size-display {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid gold;
}
.full-size-display img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.full-size-display .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    color: white;
    cursor: pointer;
}
.full-size-display .prev, .full-size-display .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    color: white;
    cursor: pointer;
    user-select: none;
}
.full-size-display .prev {
    left: 10px;
}
.full-size-display .next {
    right: 10px;
}
@media (max-width: 1024px) {
    .splash-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 160px; /* Adjust buffer space at the top */
    }
    .title, .subtitle {
        text-align: center; /* Center the title and subtitle */
        margin: 0 auto; /* Center the title and subtitle */
        order: 2; /* Ensure title and subtitle appear second */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .title {
        font-size: 4.2em; /* Adjusted for smaller screens */
    }
    .subtitle {
        font-size: 2.4em; /* Adjusted for smaller screens */
        margin: -15px 0 20px 0; /* Adjusted for smaller screens and add padding below the subtitle */
    }
    .navbar {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Allow buttons to wrap to the next line */
        gap: 10px; /* Add space between buttons */
        padding: 15px; /* Adjust padding */
        background: rgba(0, 0, 0, 0.6); /* Add background */
        position: absolute; /* Fix navbar at the top */
        top: 0;
        z-index: 1000; /* Ensure navbar stays on top */
        order: 1; /* Ensure navbar appears first */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .navbar a {
        font-size: 1.2em; /* Scale down font size */
        padding: 10px 20px; /* Adjust padding */
    }
    .content {
        position: static; /* Remove absolute positioning */
        padding: 10px; /* Adjust padding for smaller screens */
        text-align: center; /* Center the content */
        margin-bottom: 20px; /* Add margin to separate from other elements */
        order: 3; /* Ensure content appears third */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box {
        position: static; /* Remove absolute positioning */
        width: 90%;
        margin: 20px auto; /* Center the content box */
        padding: 10px; /* Adjust padding for smaller screens */
        margin-bottom: 20px; /* Add margin to separate from other elements */
        order: 4; /* Ensure content box appears fourth */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box h2 {
        font-size: 2.5em; /* Adjusted for smaller screens */
        padding: 8px; /* Adjust padding */
        border-width: 1.5px; /* Adjust border width */
        width: 100%; /* Ensure border scales properly */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box ul li {
        font-size: 1.2em; /* Adjust font size */
    }
    .gallery-section {
        width: 90%; /* Adjust width for smaller screens */
        padding: 10px; /* Adjust padding for smaller screens */
        margin-bottom: 20px; /* Add margin to separate from other elements */
        order: 5; /* Ensure gallery sections appear last */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .gallery-section .photos {
        flex-direction: column; /* Stack images vertically */
    }
    .gallery-section .photos img {
        width: 90%;
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 10px;
    }
    .gallery-section h2 {
        font-size: 2em; /* Adjusted for smaller screens */
        width: 100%; /* Ensure border scales properly */
        padding: 8px; /* Adjust padding */
        border-width: 1.5px; /* Adjust border width */
        box-sizing: border-box; /* Include padding and border in element's total width */
        margin-top: 4px; /* Reduce margin above the section title */
    }
    .gallery-section .restaurant-content {
        flex-direction: column; /* Stack columns vertically */
    }
    .gallery-section .restaurant-content .photos,
    .gallery-section .restaurant-content .description,
    .gallery-section .restaurant-content .map {
        margin: 10px 0; /* Add margin to separate stacked columns */
    }
    .gallery-section .activity-content {
        flex-direction: column; /* Stack columns vertically */
    }
    .gallery-section .activity-content .photos,
    .gallery-section .activity-content .description,
    .gallery-section .activity-content .map {
        margin: 10px 0; /* Add margin to separate stacked columns */
    }
    .gallery-section .beach-content {
        flex-direction: column; /* Stack columns vertically */
    }
    .gallery-section .beach-content .photos,
    .gallery-section .beach-content .description,
    .gallery-section .beach-content .map {
        margin: 10px 0; /* Add margin to separate stacked columns */
    }
}

@media (max-width: 768px) {
    .splash-page {
        margin-top: 120px; /* Adjust buffer space at the top */
    }
    .title, .subtitle {
        order: 2; /* Ensure title and subtitle appear second */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .title {
        font-size: 3.5em; /* Adjusted for smaller screens */
    }
    .subtitle {
        font-size: 2em; /* Adjusted for smaller screens */
        margin: -10px 0 15px 0; /* Adjusted for smaller screens and add padding below the subtitle */
    }
    .navbar {
        padding: 15px; /* Adjust padding */
        order: 1; /* Ensure navbar appears first */
        flex-wrap: wrap; /* Allow buttons to wrap to the next line */
        gap: 10px; /* Add space between buttons */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .navbar a {
        font-size: 1.2em; /* Scale down font size */
        padding: 10px 20px; /* Adjust padding */
    }
    .content {
        padding: 8px; /* Adjust padding */
        margin-bottom: 15px; /* Adjust margin */
        order: 3; /* Ensure content appears third */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box {
        width: 95%;
        padding: 8px; /* Adjust padding */
        margin-bottom: 15px; /* Adjust margin */
        order: 4; /* Ensure content box appears fourth */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box h2 {
        font-size: 2em; /* Adjusted for smaller screens */
        padding: 6px; /* Adjust padding */
        border-width: 1.2px; /* Adjust border width */
        width: 100%; /* Ensure border scales properly */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box ul li {
        font-size: 1em; /* Adjust font size */
    }
    .gallery-section {
        width: 95%; /* Adjust width */
        padding: 8px; /* Adjust padding */
        margin-bottom: 15px; /* Adjust margin */
        order: 5; /* Ensure gallery sections appear last */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .gallery-section .photos img {
        width: 95%;
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 8px; /* Adjust margin */
    }
    .gallery-section h2 {
        font-size: 1.8em; /* Adjusted for smaller screens */
        width: 100%; /* Ensure border scales properly */
        padding: 6px; /* Adjust padding */
        border-width: 1.2px; /* Adjust border width */
        box-sizing: border-box; /* Include padding and border in element's total width */
        margin-top: 4px; /* Reduce margin above the section title */
    }
    .gallery-section .restaurant-content,
    .gallery-section .activity-content,
    .gallery-section .beach-content {
        flex-direction: column; /* Stack columns vertically */
    }
    .gallery-section .restaurant-content .photos,
    .gallery-section .restaurant-content .description,
    .gallery-section .restaurant-content .map,
    .gallery-section .activity-content .photos,
    .gallery-section .activity-content .description,
    .gallery-section .activity-content .map,
    .gallery-section .beach-content .photos,
    .gallery-section .beach-content .description,
    .gallery-section .beach-content .map {
        margin: 8px 0; /* Adjust margin */
    }
}

@media (max-width: 480px) {
    .splash-page {
        margin-top: 100px; /* Adjust buffer space at the top */
        background-size: 300%;
        background-attachment: fixed;
        background-position: top 
    }
    .title, .subtitle {
        order: 2; /* Ensure title and subtitle appear second */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .title {
        font-size: 2.8em; /* Adjusted for smaller screens */
    }
    .subtitle {
        font-size: 1.8em; /* Adjusted for smaller screens */
        margin: -8px 0 10px 0; /* Adjusted for smaller screens and add padding below the subtitle */
    }
    .navbar {
        padding: 10px; /* Adjust padding */
        order: 1; /* Ensure navbar appears first */
        flex-wrap: wrap; /* Allow buttons to wrap to the next line */
        gap: 5px; /* Add space between buttons */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .navbar a {
        font-size: 1em; /* Scale down font size */
        padding: 8px 15px; /* Adjust padding */
    }
    .content {
        padding: 5px; /* Adjust padding */
        margin-bottom: 10px; /* Adjust margin */
        order: 3; /* Ensure content appears third */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box {
        width: 98%;
        padding: 5px; /* Adjust padding */
        margin-bottom: 10px; /* Adjust margin */
        order: 4; /* Ensure content box appears fourth */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box h2 {
        font-size: 1.8em; /* Adjusted for smaller screens */
        padding: 4px; /* Adjust padding */
        border-width: 1px; /* Adjust border width */
        width: 100%; /* Ensure border scales properly */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .content-box ul li {
        font-size: 0.9em; /* Adjust font size */
    }
    .gallery-section {
        width: 98%; /* Adjust width */
        padding: 5px; /* Adjust padding */
        margin-bottom: 10px; /* Adjust margin */
        order: 5; /* Ensure gallery sections appear last */
        max-width: 100%; /* Ensure max width is 100% */
        box-sizing: border-box; /* Include padding and border in element's total width */
    }
    .gallery-section .photos img {
        width: 98%;
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 5px; /* Adjust margin */
    }
    .gallery-section h2 {
        font-size: 1.5em; /* Adjusted for smaller screens */
        width: 100%; /* Ensure border scales properly */
        padding: 4px; /* Adjust padding */
        border-width: 1px; /* Adjust border width */
        box-sizing: border-box; /* Include padding and border in element's total width */
        margin-top: 4px; /* Reduce margin above the section title */
    }
    .gallery-section .restaurant-content,
    .gallery-section .activity-content,
    .gallery-section .beach-content {
        flex-direction: column; /* Stack columns vertically */
    }
    .gallery-section .restaurant-content .photos,
    .gallery-section .restaurant-content .description,
    .gallery-section .restaurant-content .map,
    .gallery-section .activity-content .photos,
    .gallery-section .activity-content .description,
    .gallery-section .activity-content .map,
    .gallery-section .beach-content .photos,
    .gallery-section .beach-content .description,
    .gallery-section .beach-content .map {
        margin: 5px 0; /* Adjust margin */
    }
}