/* Basic Resets & Global Styles */
body {
    font-family: 'Montserrat', sans-serif; /* Example font from Google Fonts */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif; /* Example display font */
    color: #035a46; /* Darker tone for headings */
    margin-bottom: 0.5em;
}

a {
    text-decoration: none;
    color: #007bff; /* A nice blue for links */
}

a:hover {
    text-decoration: underline;
}

/* Section Padding */
.section-padded {
    padding: 40px 20px; /* Top/bottom, left/right */
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center content */
}

.text-center {
    text-align: center;
}

/* Hero Section (Header) */
.hero-section {
    background: url('images/landing1.jpg') no-repeat center center/cover; /* Replace with a beautiful hero image */
    color: white;
    text-align: center;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30vh; /* Minimum height for hero */
    position: relative; /* Needed for overlay */
}

.hero-section::before { /* Semi-transparent overlay for text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Ensure content is above overlay */
    max-width: 800px;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 0.2em;
    color: white; /* Ensure headings are white against dark overlay */
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 1.5em;
}


/* Buttons */
.btn {
    display: inline-block;
    background-color: #0f5b52; /* Primary button color */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.btn:hover {
    background-color: #0056b3;
    text-decoration: none; /* Remove underline on hover for buttons */
}

.btn-primary { /* For the main CTA button */
    background-color: #ff5722; /* A warm, inviting color */
}

.btn-primary:hover {
    background-color: #e64a19;
}

/* Amenities Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: 30px; /* Space between items */
}

.amenity-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensures image corners match card corners */
    text-align: center;
    padding-bottom: 20px; /* Space below text */
}

.amenity-item h3 {
    padding: 15px 10px 5px;
    margin-top: 0;
}

.amenity-item p {
    padding: 0 15px;
    font-size: 0.95em;
}

.amenity-img {
    width: 100%;
    height: 300px; /* Fixed height for consistent image size */
    object-fit: cover; /* Ensures image covers area without distortion */
    border-bottom: 1px solid #eee;
}

/* Community Amenities (simpler layout) */
.amenity-group {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px; /* Space between groups */
    padding: 25px;
}

.amenity-group h3 {
    margin-top: 15px;
    margin-bottom: 10px;
}

.amenity-img-large {
    max-width: 100%;
    height: 250px; /* Larger fixed height */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Call to Action Section */
.cta-background {
    background: linear-gradient(to right, #0f5b52, #0056b3); /* A nice gradient */
    color: white;
    padding: 60px 20px;
}

.cta-background h2 {
    color: white;
    font-size: 2.5em;
    margin-bottom: 15px;
}

/* Footer */
footer {
    background-color: #2c3e50; /* Darker footer */
    color: white;
    padding: 30px 20px;
    text-align: center;
    font-size: 0.9em;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-content p {
    margin-bottom: 15px;
}

.social-links a {
    color: white;
    margin: 0 15px;
    display: inline-flex; /* To align icon and text */
    align-items: center;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #ff5722; /* Highlight on hover */
    text-decoration: none;
}

.social-links img {
    width: 24px; /* Icon size */
    height: 24px;
    margin-right: 8px;
    filter: invert(1); /* Makes white icons visible on dark background */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.2em;
    }

    .amenities-grid {
        grid-template-columns: 1fr; /* Stack items on small screens */
    }

    .footer-content {
        flex-direction: column; /* Stack footer elements */
    }

    .social-links {
        margin-top: 15px;
    }
}
/* Basic Header & Navigation Styles */
header {
    background-color: #026758; /* Dark background */
    color: white;
    padding: 10px 20px;
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space out title and nav */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow items to wrap on small screens */
}

header h1 {
    margin: 0;
    font-size: 1.8em; /* Adjust size as needed */
}

nav ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: flex; /* Make nav items horizontal */
    flex-wrap: wrap; /* Allow nav items to wrap if screen is too small */
}

nav li {
    margin-left: 20px; /* Space between nav items */
    margin-bottom: 5px; /* Add small bottom margin for wrapped items on mobile */
}

nav a {
    color: white;
    text-decoration: none; /* Remove underline */
    padding: 5px 10px;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

nav a:hover, nav a:focus {
    background-color: #555; /* Darker background on hover */
    border-radius: 4px;
}

/* Basic styling for the content on amenities.html */
main {
    padding: 20px;
    line-height: 1.6;
}

.guidelines-content h2, .guidelines-content h3 {
    color: #333;
    margin-top: 25px;
    margin-bottom: 10px;
}

.guidelines-content ul {
    margin-bottom: 20px;
}

.guidelines-content ul li {
    margin-bottom: 5px;
}

/* --- Responsive adjustments for the header/nav --- */
@media screen and (max-width: 768px) {
    header {
        flex-direction: column; /* Stack items vertically on smaller screens */
        text-align: center;
    }

    nav ul {
        flex-direction: column; /* Stack nav items vertically */
        width: 100%;
        margin-top: 10px;
    }

    nav li {
        margin-left: 0;
        margin-bottom: 10px; /* Add more space between stacked items */
        width: 100%;
    }

    nav a {
        display: block; /* Make links take full width */
        padding: 10px;
        background-color: #444; /* Give background to stacked links */
        border-radius: 4px;
    }
}
/* --- NEW/REVISED AMENITIES PAGE STYLES (Replace old ones) --- */

/* Main content area on the amenities page */
main {
    max-width: 1200px; /* Limit content width for readability */
    margin: 30px auto; /* Center the main content area */
    padding: 0 25px; /* Add horizontal padding for responsiveness */
}

/* Styling for individual amenity sections (e.g., Common Areas, Pool, Kids' Playroom, Gym) */
.guidelines-intro,
.amenity-section,
.condo-info {
    background-color: #ffffff; /* Clean white background */
    border-radius: 12px; /* Nicely rounded corners */
    box-shadow: 0 6px 12px rgba(0,0,0,0.08); /* A slightly more noticeable, but still subtle, shadow */
    margin-bottom: 50px; /* More space between sections */
    padding: 35px; /* Increased inner padding for breathing room */
    border: 1px solid #f0f0f0; /* Very light, subtle border */
    overflow: hidden; /* Ensures content/shadows stay within bounds */
}

/* Main title for the amenities page */
.guidelines-intro h2 {
    color: #333;
    text-align: center;
    font-size: 2.8em; /* Larger, more prominent title */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #04635b; /* A distinct blue underline */
    display: inline-block; /* Makes the underline fit the text width */
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}

/* Titles for individual amenity sections (e.g., "Pool Rules") */
.amenity-section h3 {
    color: #096278; /* Consistent blue for section titles */
    text-align: center;
    margin-bottom: 25px;
    font-size: 2.2em; /* Clear and readable */
    font-weight: 600; /* Slightly bolder */
}

/* Styling for the "our condominium is called unique" text */
.condo-info p {
    text-align: center;
    font-size: 1.1em;
    color: #04561d;
    line-height: 1.5;
}

/* NEW CLEAN IMAGE PLACEHOLDER STYLES */
.amenity-image-placeholder,
.amenity-common-areas-image-placeholder {
    width: 100%;
    height: 320px; /* Slightly taller for better visual impact */
    background-color: #516e66; /* Very light gray, almost white */
    border: 1px solid #e0e0e0; /* A very light, clean border */
    border-radius: 10px; /* Matches section rounding */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999; /* Lighter text color for placeholder text */
    font-style: italic;
    font-size: 1.3em; /* Clearer placeholder text */
    margin-bottom: 30px; /* Space below placeholder */
    overflow: hidden; /* Ensures anything inside stays within bounds */
    /* Optional: If you add real images later, you can use object-fit */
}

/* When a real image is eventually put inside the placeholder, hide the text */
.amenity-image-placeholder img + p,
.amenity-common-areas-image-placeholder img + p {
    display: none;
}

/* Styles for lists within sections */
.guidelines-intro ul,
.amenity-section ul {
    list-style: disc; /* Standard bullet points */
    margin-left: 25px; /* Indent lists slightly more */
    padding-left: 0;
}

.guidelines-intro ul li,
.amenity-section ul li {
    margin-bottom: 1px; /* More space between list items */
    color: #444; /* Slightly softer text color */
    line-height: 1.6; /* Better readability */
}

/* --- Responsive Layout for Amenities Sections --- */

/* For screens 768px wide and up (e.g., tablets, small desktops) */
@media screen and (min-width: 768px) {
    main {
        padding: 0 40px; /* More padding on larger screens */
    }

    .amenity-section {
    
        gap: 20px; /* Space between image and text content */
    }

    /* Alternate the layout (image on right for every second section) */
    .amenity-section:nth-child(even) {
     
    }

    .amenity-image-placeholder,
    .amenity-common-areas-image-placeholder {
        width: 100%; /* Image takes roughly half width */
        height: 380px; /* Taller on desktop */

    }

    .amenity-section > *:not(.amenity-image-placeholder):not(.amenity-common-areas-image-placeholder) {
        /* This targets the text content beside the image */
        width: 100%; /* Text content takes the remaining width */
    }

    /* Make lists flow into two columns for better readability on wider screens */
    .guidelines-intro ul,
    .amenity-section ul {
        columns: 2;
        column-gap: 40px; /* Space between columns */
    }
}

/* For screens 1024px wide and up (e.g., larger desktops) */
@media screen and (min-width: 768px) {
    /* Keep general main padding adjustments */
    main {
        padding: 0 40px; /* More padding on larger screens */
    }

    /* Adjust image placeholder height for desktop (they will still be full width) */
    .amenity-image-placeholder,
    .amenity-common-areas-image-placeholder {
        height: 380px; /* Taller on desktop for more visual presence */
        margin-bottom: 30px; /* Add back bottom margin for spacing when stacked */
    }

    /* If you want lists to remain single column on desktop, ensure 'columns: 2' is NOT present here.
       If it was previously defined in the mobile-first section, it will naturally apply. */
    /* If you had .guidelines-intro ul, .amenity-section ul { columns: 2; } here, remove or comment it out. */
}

/* For screens 1024px wide and up (e.g., larger desktops) - keep this for even larger images if desired */
@media screen and (min-width: 1024px) {
    main {
        padding: 0 30px;
    }
    .amenity-image-placeholder,
    .amenity-common-areas-image-placeholder {
        height: 450px;
    }
}
/* --- Contact Form Styling Enhancements --- */

#aws-serverless-form {
    background-color: #f9f9f9; /* Light gray background for the box */
    border: 1px solid #e0e0e0; /* Light border for definition */
    border-radius: 10px; /* Rounded corners for the box */
    padding: 25px; /* Padding inside the box */
    margin-top: 20px; /* Space between heading and form */
    display: grid; /* Use grid for better layout control */
    grid-template-columns: 1fr; /* Single column layout for inputs */
    gap: 15px; /* Spacing between each label/input group */
    max-width: 600px; /* Optional: Limit form width for better readability */
    margin-left: auto; /* Center the form if max-width is set */
    margin-right: auto; /* Center the form if max-width is set */
}

#aws-serverless-form label {
    display: block; /* Make labels take full width, putting inputs on next line */
    margin-bottom: 5px; /* Space between label and its input */
    font-weight: bold; /* Make labels stand out */
    color: #333; /* Darker text color for labels */
}

#aws-serverless-form input[type="text"],
#aws-serverless-form input[type="email"],
#aws-serverless-form input[type="date"], /* NEW: for date inputs */
#aws-serverless-form textarea {
    width: 100%; /* Make inputs/textareas take full width of their container */
    padding: 12px; /* Increased padding for better touch targets */
    border: 1px solid #ccc; /* Standard border */
    border-radius: 6px; /* Slightly rounded input corners */
    box-sizing: border-box; /* Include padding and border in the element's total width/height */
    font-size: 1.05em; /* Slightly larger font size */
    line-height: 1.4; /* Improve readability for textareas */
}

/* Focus style for inputs/textareas */
#aws-serverless-form input:focus,
#aws-serverless-form textarea:focus {
    border-color: #007bff; /* Blue border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle blue glow */
}

#aws-serverless-form button[type="submit"] {
    /* Keep your existing button styles if they are strong, or adjust with these: */
    background-color: #007bff; /* Primary blue button */
    color: white; /* White text */
    padding: 15px 25px; /* Generous padding */
    border: none; /* No border */
    border-radius: 8px; /* Rounded button corners */
    font-size: 1.15em; /* Larger font size */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    width: auto; /* Allow button to size itself */
    align-self: start; /* Align button to the start of its grid area */
    margin-top: 15px; /* Space above the button */
    /* If you want the button to take full width like inputs, change width to 100% */
    /* width: 100%; */
}

#aws-serverless-form button[type="submit"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Style for form status messages (success/error) */
.form-message {
    padding: 10px;
    border-radius: 5px;
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
}

.form-message.success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}

/* Adjustments for the form positioning within its section */
.content-section > h3 {
    text-align: center; /* Center the heading above the form */
    margin-bottom: 25px; /* Space below the heading */
}
/* --- Image Carousel Styling for Contact Page --- */
.image-carousel {
    width: 100%; /* Take full width of its container */
    max-width: 800px; /* Max width for the carousel container */
    margin: 40px auto; /* Center the carousel with vertical spacing */
    overflow: hidden; /* Hide overflowing images */
    border: 1px solid #e0e0e0; /* Subtle border around the carousel */
    border-radius: 10px; /* Rounded corners for the carousel box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow */
}

.carousel-inner {
    display: flex; /* Arrange images in a row */
    animation: scroll-carousel 10s linear infinite; /* Animation for auto-scrolling */
    /* Adjust the 30s based on number of images and desired speed */
    /* If you have more images, increase the time for smoother slower scroll */
}

.carousel-inner img {
    flex-shrink: 0; /* Prevent images from shrinking */
    width: 100%; /* Each image takes 100% width of the visible container */
    height: 350px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area without distorting, cropping as needed */
    display: block; /* Remove extra space below images */
}

/* Keyframe animation for scrolling */
@keyframes scroll-carousel {
    0% {
        transform: translateX(0); /* Start at the beginning */
    }
    100% {
        /* Move by the width of all original images (e.g., 4 images * 100% width = 400%) */
        /* If you have N images and you duplicated the first 2, the scroll should cover N images. */
        transform: translateX(-400%); /* Adjust based on number of original images */
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .image-carousel {
        margin: 30px auto;
        border-radius: 5px;
    }

    .carousel-inner img {
        height: 250px; /* Smaller height on mobile */
    }
}