/* --- Photo Tour Page & Lightbox Styles --- */

/* Button on main property page to link to photo tour */
.main-image-container {
    position: relative; /* Needed to position the button inside */
}

.view-all-photos-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(15, 23, 42, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.view-all-photos-btn:hover {
    background-color: rgba(15, 23, 42, 1);
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.view-all-photos-btn .icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 18px;
    height: 18px;
}

.view-all-photos-btn .icon-grid span {
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 1px;
}


/* Photo Tour Page Specific Styles */
.photo-tour-page {
    padding: 40px 0;
    background-color: #f8f9fa;
}

.photo-tour-header {
    text-align: center;
    margin-bottom: 40px;
}

.photo-tour-header h1 {
    font-size: 2.5rem;
    color: var(--accent-color);
}

.photo-tour-header .back-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.photo-tour-header .back-link:hover {
    text-decoration: underline;
}

.photo-category {
    margin-bottom: 40px;
}

.photo-category h2 {
    font-size: 1.8rem;
    color: var(--accent-color);
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.photo-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    aspect-ratio: 4 / 3;
}

.photo-grid-item img,
.photo-grid-item .avif-img,
.photo-grid-item .jpeg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.photo-grid-item:hover img,
.photo-grid-item:hover .avif-img,
.photo-grid-item:hover .jpeg-img {
    transform: scale(1.1);
    filter: brightness(0.9);
}

.photo-grid-item .photo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.photo-grid-item:hover .photo-label {
    background: rgba(0, 0, 0, 0.75);
}

.photo-tour-page .photo-tour-header h1,
.photo-tour-page .photo-category h2 {
    background: rgba(15, 23, 42, 0.8);
    color: white;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    display: inline-block;
}

/* Lightbox Modal Styles */
.lightbox-modal {
    display: none; /* Hidden by default, JavaScript adds .active */
    position: fixed;
    z-index: 99999; /* Highest z-index to ensure it's always on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(15, 23, 42); /* Purple-black background like VRBO */
    padding: 20px;
    box-sizing: border-box; /* Include padding in width/height */
}

.lightbox-modal.active {
    display: flex; /* Show when active */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-content {
    position: relative; /* For z-index and containing image */
    max-width: 90vw;
    max-height: 80vh; /* A bit smaller to ensure caption is visible */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99998; /* Lower than arrows, higher than modal background */
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle frame border */
}

.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    cursor: pointer;
    color: white;
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker for better contrast */
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform to transition */
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Ensure arrows are on top of everything */
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    background-color: rgba(0, 0, 0, 0.9); /* Darker on hover */
}

.lightbox-close {
    top: 15px;
    right: 25px;
    font-size: 2.5rem;
    font-weight: bold;
    width: 40px;
    height: 40px;
    line-height: 40px; /* Center text vertically */
    text-align: center;
}

.lightbox-prev, .lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.5rem; /* Larger arrows */
    padding: 12px; /* Increased padding for larger click area */
    width: 70px;   /* Larger size */
    height: 70px;  /* Larger size */
    line-height: 70px; /* Center arrow character vertically */
    font-weight: bold; /* Make arrow character more prominent */
}

.lightbox-prev:hover, .lightbox-next:hover {
    transform: translateY(-50%) scale(1.1); /* Subtle scale effect on hover */
}

.lightbox-prev {
    left: 20px; /* Adjusted for better spacing from edge */
}

.lightbox-next {
    right: 20px; /* Adjusted for better spacing from edge */
}

.lightbox-modal .lightbox-caption {
    background-color: rgba(0, 0, 0, 0.25); /* Semi-transparent background */
    color: #fff; /* White text for caption */
    margin-top: 20px; /* More space between image and caption */
    padding: 10px 15px; /* Padding for the box */
    border-radius: var(--border-radius); /* Rounded corners */
    font-size: 1.1rem; /* Slightly larger text */
    text-align: center;
    z-index: 99998; /* Lower than arrows */
    line-height: 1.5; /* Better readability for multi-line captions */
    max-width: 80%; /* Adjust max-width */
    display: inline-block; /* Make background fit the text */
}

/* css/style.css */

/* --- Global Styles & Variables --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --accent-color: #1a3768;
    --light-gray: #f8f9fa;
    --dark-gray: #343a40;
    --text-color: #333;
    --heading-font: 'Open Sans', sans-serif; /* UPDATED */
    --body-font: 'Open Sans', sans-serif;    /* CONFIRMED */
    --border-radius: 5px;
    --box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--body-font);
    font-weight: 300; /* UPDATED global font weight */
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font); /* Will be Open Sans */
    font-weight: 300; /* UPDATED heading font weight */
    color: var(--accent-color);
    margin-bottom: 0.75em;
    line-height: 1.2;
}

/* Specific style for H1 elements */
h1 {
    font-family: 'Allerta', sans-serif;
    font-weight: 400; /* Allerta is generally available as Regular 400 */
}

/* If strong/b tags should also be light (font-weight: 300), uncomment the following: */
/*
strong, b {
    font-weight: 300;
}
*/

p {
    margin-bottom: 1em;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style-position: inside;
    padding-left: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Buttons --- */
.button, button {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-family: var(--heading-font); /* Will be Open Sans */
    font-weight: 300; /* UPDATED from bold */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
}

.button:hover, button:hover {
    background-color: #0056b3;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.button-primary {
    background-color: var(--primary-color);
}
.button-primary:hover {
    background-color: #0056b3;
    color: #fff;
}

.button-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
.button-secondary:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* --- Header & Navigation (Updated for Hamburger Menu) --- */
.site-header {
    background-color: #fff;
    padding: 1em 0;
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    max-width: 1560px;
}

.logo img {
    max-height: 50px;
    display: block;
}
.logo span { /* If using text logo */
    font-size: 1.8em;
    /* font-weight: bold; /* Commented out as global font-weight is 300 */
    /* If logo text needs specific weight, set it here, e.g., font-weight: 300; or another value */
    color: var(--accent-color);
    font-family: var(--heading-font); /* Ensure it uses Open Sans if it's text */
    font-weight: 300; /* Explicitly set for logo text if needed */
}

.main-nav {
    display: flex;
    align-items: center;
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.main-nav ul li {
    margin-left: 25px;
}

.main-nav ul li a {
    font-family: var(--heading-font); /* Will be Open Sans */
    font-weight: 300; /* UPDATED from 600 */
    color: var(--accent-color);
    padding: 5px 0;
    position: relative;
    text-decoration: none;
}
.main-nav ul li a:hover,
.main-nav ul li a.active {
    color: var(--primary-color);
    text-decoration: none;
}
.main-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}
.main-nav ul li a:hover::after {
    width: 100%;
}

/* Hamburger Menu Button */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 15px;
    z-index: 1005;
}
.hamburger-menu .hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}


/* --- Hero Section (index.html) --- */
.hero {
    position: relative;
    color: #fff;
    text-align: center;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    transition: filter 0.3s ease-in-out;

    /* --- ADDED --- */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/Almost_Heaven.jpg'); /* Fallback */
    background-image: -webkit-image-set( /* Webkit browsers */
      url("../images/Almost_Heaven.avif") type("image/avif"),
      url("../images/Almost_Heaven.webp") type("image/webp"),
      url("../images/Almost_Heaven.jpg") type("image/jpeg")
    );
    background-image: image-set( /* Standard */
      url("../images/Almost_Heaven.avif") type("image/avif"),
      url("../images/Almost_Heaven.webp") type("image/webp"),
      url("../images/Almost_Heaven.jpg") type("image/jpeg")
    );
}

/* --- REMOVED --- 
.hero-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
*/

.hero::before { /* Overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.hero-content h1 { /* Will inherit font-family and font-weight from global h1 rule */
    font-size: 3em;
    color: #fff;
    margin-bottom: 0.5em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p { /* Will inherit font-family and font-weight from global body rule */
    font-weight: 500;
    font-size: 1.2em;
    margin-bottom: 1.5em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* --- Hero Content Animations --- */

/* Animation Keyframes */
@keyframes shiftUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(25px); /* Start elements 25px down */
    }
    to {
        opacity: 1;
        transform: translateY(0);   /* End at their normal position */
    }
}

/* Initial states for animated hero text elements */
/* Ensures they start hidden and are ready for animation */
.hero-notice-main,
.hero-title-main,
.hero-subtitle {
    opacity: 0; /* Start transparent */
}

/* Applying the animation to each text element with a slight stagger */
.hero-notice-main {
    /* The style="color:red;" from HTML will still apply */
    animation-name: shiftUpFadeIn;
    animation-duration: 0.7s;       /* How long the animation runs */
    animation-timing-function: ease-out; /* How the animation progresses */
    animation-delay: 0.2s;          /* Wait 0.2s before starting */
    animation-fill-mode: both;      /* Apply styles from the first keyframe before animation starts and retain last keyframe styles after */
}

.hero-title-main {
    /* This will be your main "SNOWSHOE RESORT RENTALS" title */
    animation-name: shiftUpFadeIn;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 0.4s; /* Start slightly after the notice message */
    animation-fill-mode: both;
}

.hero-subtitle {
    /* This will be the "BOOK YOUR MOUNTAIN ADVENTURES TODAY!" paragraph */
    animation-name: shiftUpFadeIn;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 0.6s; /* Start slightly after the main title */
    animation-fill-mode: both;
}

/* --- Properties Overview, Contact Sections --- */
:root {
    /* ... other variables ... */
    --property-card-width: 400px;      /* ADJUST THIS VALUE: Set your desired 'natural' width for property cards */
    --property-card-image-height: 220px; /* You can also adjust the image height if needed */
}
.properties-overview, .contact-section {
    padding: 60px 0;
}
.properties-overview h2, .contact-section h2 { /* Will inherit font styles */
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.5em;
}
.properties-overview .container h2 + p {
    text-align: center;     /* This will center the paragraph */
    margin-bottom: 40px;    /* Applies the bottom margin from the original intended style */
    font-size: 1.1em;       /* Applies the font size from the original intended style */
    color: var(--secondary-color); /* Applies the color from the original intended style */
}
.property-grid {
    display: grid;
    /* Create 2 columns, each with the fixed width defined by --property-card-width */
    grid-template-columns: repeat(2, var(--property-card-width));
    gap: 40px;
    /* Center the grid tracks (the columns) if the .property-grid container is wider */
    /* This prevents the fixed-width columns from sticking to the left */
    justify-content: center;
    /* You might want some padding on the grid container itself if the parent .container div's padding isn't enough */
    /* padding: 0 15px; */ /* Example */
}
.property-card {
    width: var(--property-card-width); /* Apply the fixed width to each card */
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* margin: 0 auto; /* Not needed here as the grid cell itself is sized */
}
.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}
.property-card a {
    text-decoration: none;
    color: inherit;
}
.property-card img {
    width: 100%; /* Image will take the full width of the now fixed-size .property-card */
    height: var(--property-card-image-height); /* Use the variable for height */
    object-fit: cover; /* This ensures the image covers the area, maintaining aspect ratio and cropping if necessary */
    display: block;    /* Removes any extra space below the image if it's treated as inline */
}
.property-card-content {
    padding: 20px;
}
.property-card-content h3 { /* Will inherit font styles */
    margin-top: 0;
    font-size: 1.5em;
    color: var(--accent-color);
}
.property-card-content .property-summary { /* Will inherit font styles */
    font-size: 0.9em;
    color: var(--secondary-color);
    margin-bottom: 15px;
    min-height: 3.6em;
}

.contact-section .container {
    max-width: 800px;
    text-align: center;
}
.contact-section p { /* General p in contact, will inherit font styles */
    font-size: 1em;
    color: var(--text-color);
    margin-bottom: 20px;
}
.contact-section > p { /* This is the subheading style, will inherit font styles */
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: var(--secondary-color);
}
.contact-section > p:last-of-type {
    margin-bottom: 30px;
}


/* --- What We Do Section --- */
.what-we-do-section {
    padding: 60px 0;
    background-color: #192024;
}

.what-we-do-section .section-title-main { /* Will inherit main font-family & weight, but size/color specific */
    text-align: center;
    margin-bottom: 25px;
    font-size: 2.5em;
    /* font-weight: bold; This was here, but global font-weight is 300. If needed bolder, set specific weight e.g. 400, 600 */
    font-weight: 300; /* Explicitly ensuring it's 300 if h2 global is not enough or overridden */
    text-transform: uppercase;
    color: #fff;
}

.what-we-do-section .section-subtitle-main { /* Will inherit font-family & weight */
    text-align: center;
    text-transform: uppercase;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    font-size: 1em;
    line-height: 1.7;
    color: #f8f9fa;
}

.what-we-do-columns {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.what-we-do-column {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    text-align: center;
    padding: 20px 15px;
}

.what-we-do-column .column-icon {
    font-size: 2.8em;
    color: #0095ff; /* Icon color was updated to this */
    margin-bottom: 20px;
    display: block;
}

.what-we-do-column h3 { /* Will inherit font-family & weight from global h3 */
    font-size: 1.5em;
    color:  #fff;
    margin-bottom: 15px;
    line-height: 1.3;
    text-transform: uppercase;
}

.what-we-do-column p { /* Will inherit font-family & weight */
    font-size: 0.95em;
    color: #ddd;
    line-height: 1.6;
}
/* --- CSS for Review Buttons in "What We Do" Section --- */
.what-we-do-column .review-buttons-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Reduced gap slightly for a tighter look with smaller buttons */
}

/* Updated style for the oval buttons */
.button.button-oval {
    border-radius: 20px;      /* Adjusted to maintain oval shape with new height */
    padding: 5px 18px;        /* Reduced top/bottom padding for shorter height, and some horizontal */
    font-size: 0.85em;        /* Reduced font size (e.g., if base button text is ~16px, this becomes ~13.6px) */
    line-height: 1.4;         /* Adjusted line height for better vertical centering with new padding/font size */
    text-decoration: none;    /* Inherited from .button but good to be explicit */
    display: inline-block;    /* Allows padding and text alignment */
    min-width: 190px;         /* Adjusted min-width to suit potentially shorter text/button */
    box-sizing: border-box;
    text-align: center;       /* Inherited from .button, ensures text is horizontally centered */
    /* background-color & color are inherited from .button (blue background, white text) */
}
/* Hover state is already handled by .button:hover, 
   but if specific hover for oval buttons is needed, you can add:
.button.button-oval:hover {
    background-color: #0056b3;
    color: #fff;
}
*/
/* Define General CSS Variables for Custom Circle Icons */
:root {
    --custom-icon-color: #0095ff; /* Color for circles (matches old .column-icon) */
    --custom-icon-inner-diameter: 60px; /* Diameter of the inner filled circle */
    --custom-icon-svg-scale: 0.5;       /* SVG takes up 50% of the inner circle's diameter */
    --custom-icon-user-friendly-svg-scale: 0.7; /* << NEW: Slightly larger scale for this icon */
    --custom-icon-gap: 4px;             /* Space between inner and outer circles */
    --custom-icon-outer-line-thickness: 2px; /* Thickness of the outer circle line */
}

/* General Style for the Custom Circle Icon Wrapper */
/* Replace/rename your previous .our-properties-icon rule with this .custom-circle-icon rule */
.custom-circle-icon {
    position: relative; /* For positioning the pseudo-element (outer circle) */
    width: var(--custom-icon-inner-diameter);
    height: var(--custom-icon-inner-diameter);
    background-color: var(--custom-icon-color); /* Inner circle is filled */
    border-radius: 50%; /* Makes it a circle */
    display: inline-flex; /* Allows centering of SVG child and respects parent's text-align:center */
    justify-content: center; /* Centers SVG horizontally */
    align-items: center;   /* Centers SVG vertically */
    margin-bottom: 20px;     /* Mimics spacing of the old .column-icon style */
    /* If not in a text-align:center parent, uncomment below to center the block itself */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* General Style for the SVG image inside any custom circle icon */
.custom-circle-icon .icon-svg { /* This rule remains the same, just ensure its parent has .custom-circle-icon */
    width: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-svg-scale));
    height: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-svg-scale));
    display: block; /* Good practice for images */
}
/* NEW RULE: For the User Friendly Platform icon SVG */
.user-friendly-platform-column .custom-circle-icon .icon-svg {
    width: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-user-friendly-svg-scale));
    height: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-user-friendly-svg-scale));
}
/* General Style for the outer circle using a pseudo-element */
.custom-circle-icon::before { /* This rule remains the same, just ensure its parent has .custom-circle-icon */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the pseudo-element on its parent */
    width: calc(var(--custom-icon-inner-diameter) + (2 * var(--custom-icon-gap)) + (2 * var(--custom-icon-outer-line-thickness)));
    height: calc(var(--custom-icon-inner-diameter) + (2 * var(--custom-icon-gap)) + (2 * var(--custom-icon-outer-line-thickness)));
    border: var(--custom-icon-outer-line-thickness) solid var(--custom-icon-color); /* The thin outer line */
    border-radius: 50%; /* Makes the border circular */
    box-sizing: border-box; /* Ensures the border thickness is included within the width/height */
}

/* --- Footer --- */
.site-footer {
    background-color: #ddd;/* color - #6A859C*/
    padding: 40px 0px 20px;
    font-size: 0.9em;
}
.site-footer a {
    color: #fff;
}
.site-footer a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Changed from space-between */
    gap: 30px;
    margin-bottom: 30px;
}
.footer-column {
    flex: 1;
    min-width: 200px;
}
.footer-column h4 { /* Will inherit global h4 font styles */
    color: #676770;
    margin-bottom: 15px;
    font-size: 1.1em;
    font-family: 'Open Sans', sans-serif; /* Explicit for clarity */
    font-weight: 500;
}
.footer-column p {
    color: #668cad;              /* New content text color */
    line-height: 1.6;
    margin-bottom: 0;            /* In case it's the only element */
    font-family: 'Open Sans', sans-serif; /* Explicit for clarity */
    font-weight: 300;            /* Ensure it uses light weight */
}
.footer-column ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-column ul li a {
    color: #668cad;              /* New link color */
    text-decoration: none;
    font-family: 'Open Sans', sans-serif; /* Explicit for clarity */
    font-weight: 300;            /* Ensure it uses light weight */
}

.footer-column ul li a:hover {
    color: var(--primary-color); /* Or your preferred hover color e.g., #4a6a87 */
    text-decoration: underline;
}
.footer-social ul li a i { /* Targeting icons within social links */
    margin-right: 8px;       /* Space between icon and text */
    font-size: 1.1em;        /* Adjust icon size if needed */
    width: 20px;             /* Give icon a fixed width for alignment if needed */
    text-align: center;      /* Center icon if using fixed width */
    /* Icon color will be inherited from the 'a' tag (#668cad) */
}
.copyright { /* Old .copyright class from original footer */
    text-align: center;
    font-size: 0.85em;
    /* Properties like border-top, padding-top specific to old design are removed */
    /* Color will be inherited or overridden by new location */
}

/* --- Site Credit Bar (Below Footer) --- */
.site-credit-bar {
    background-color: #192024; /* This was requested for this new bar */
    color: #fff;
    text-align: center;
    padding: 30px 0;
}

.site-credit-bar .site-credit-text { /* Text will use global font-family and font-weight 300 */
    margin: 0;
    font-size: 0.85em;
    line-height: 1.4;
}


/* --- Property Detail Page --- */
.property-detail-page {
    padding: 40px 0;
}
.property-title-header h1 { /* Will inherit */
    font-size: 2.8em;
    margin-bottom: 10px;
    text-align: left;
}
.property-title-header p { /* Will inherit */
    color: var(--secondary-color);
    font-size: 0.9em;
    margin-bottom: 30px;
}

.property-gallery-main {
    margin-bottom: 20px;
}
.main-image-container {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}
#mainPropertyImage {
    width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius);
}
.thumbnail-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
.thumbnail-gallery .thumbnail {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: calc(var(--border-radius) / 2);
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease;
}
.thumbnail-gallery .thumbnail:hover {
    border-color: var(--secondary-color);
    transform: scale(1.05);
}
.thumbnail-gallery .thumbnail.active {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* --- Rate Calculator Styles --- */
.rate-calculator-section {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-top: 25px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
}
.rate-calculator-section h4 { /* Will inherit */
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 1.5em;
    color: var(--accent-color);
    text-align: center;
}
.rate-calculator-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 10px;
}
.rate-calculator-inputs .form-group {
    margin-bottom: 0;
    flex: 0 1 200px;
}
.rate-calculator-inputs .form-group label { /* Will inherit font-family */
    display: block;
    margin-bottom: 5px;
    font-size: 0.85em;
    font-weight: 300; /* UPDATED from bold */
    color: var(--text-color);
}
.rate-calculator-inputs input[type="date"] { /* Will inherit font-family & weight */
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 0.9em;
    line-height: 1.4;
}
.rate-calculator-inputs button#calculate-rate-btn { /* Button styles already updated globally */
    padding: 10px 20px;
    font-size: 0.95em;
    height: 38px;
    line-height: 1;
    align-self: flex-end;
}
p.rate-calculator-note { /* Will inherit font-family & weight */
    font-style: italic;
    font-size: 0.85em;
    color: var(--secondary-color);
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
}

.property-content-area {
    display: grid;
    grid-template-columns: 2fr 1fr; /* This defines the main two columns */
    gap: 40px;
    align-items: flex-start;
}

/* property-main-column and property-additional-details are structural divs for the left column */
/* No specific styles needed for them unless for spacing beyond what children provide */
.property-main-column {
    /* This div groups all items for the left (2fr) column */
}
.property-additional-details {
    margin-top: 20px; /* Add some space above this group of details */
}

.property-sidebar .booking-widget,
.property-sidebar .quick-info {
    background-color: var(--light-gray);
    padding: 25px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.property-sidebar h2, .property-sidebar h3 { /* Will inherit */
    margin-top: 0;
    color: var(--accent-color);
}
.booking-widget .form-group {
    margin-bottom: 15px;
}
.booking-widget label { /* Will inherit font-family */
    display: block;
    margin-bottom: 5px;
    font-weight: 300; /* UPDATED from bold */
    font-size: 0.9em;
}
.booking-widget input[type="date"],
.booking-widget input[type="number"],
.booking-widget input[type="email"],
.booking-widget input[type="text"] { /* Will inherit font-family & weight */
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    /* font-family: var(--body-font); Already Open Sans via body */
    font-size: 1em;
}
.booking-widget #price-estimate { /* Will inherit font-family */
    font-weight: 300; /* UPDATED from bold */
    font-size: 1.1em;
    margin: 15px 0;
    text-align: center;
    color: var(--accent-color);
}
.booking-widget button[type="submit"] { /* Button styles already updated globally */
    width: 100%;
}

.quick-info ul {
    list-style: none;
    padding-left: 0;
}
.quick-info ul li { /* Will inherit font-family & weight */
    margin-bottom: 8px;
    font-size: 0.95em;
}
.quick-info ul li strong { /* Addressed by global strong rule if uncommented, or inherits browser default bold for Open Sans */
    color: var(--accent-color);
}

.property-description-details h2 { /* Will inherit */
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.8em;
}
.property-description-details h2:first-child { /* Ensure the first H2 (Description) has no top margin if it's the first child */
    margin-top: 0;
}

/* --- Top Amenities Section --- */
.top-amenities-section {
    margin-top: 20px; /* Added to give some space from description */
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-gray);
}

.top-amenities-section h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
    border-bottom: none; /* H2 in top amenities doesn't need a bottom border like description's H2 */
    padding-bottom: 0;
    /* Optional: if you want a line like other h2s in property-description-details
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 10px;
    */
}

.top-amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 10px 20px; /* Row and column gap */
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.top-amenities-grid li {
    display: flex;
    align-items: center;
    font-size: 0.95em;
    padding: 5px 0;
}

.top-amenities-grid li i {
    margin-right: 10px;
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.top-amenities-section .show-all-amenities-btn { /* Uses existing .button styles */
    display: inline-block; /* Or block with margin: auto for centering */
    margin-top: 10px;
}


#availability-ical-placeholder {
    background-color: #e9ecef;
    padding: 20px;
    text-align: left;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    min-height: 100px;
}
#availability-ical-placeholder p { /* Will inherit */
    margin-bottom: 0;
    color: var(--secondary-color);
    text-align: center;
}
#availability-ical-placeholder ul {
    list-style: none;
    padding-left: 0;
}
#availability-ical-placeholder ul li { /* Will inherit */
    padding: 3px 0;
}

#map-placeholder {
    padding-top: 0;
    padding-bottom: 15px;
    text-align: center;
    margin-bottom: 20px;
}
#map-placeholder iframe {
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    margin-top: 0;
    margin-bottom: 15px;
}
#map-placeholder p { /* Will inherit */
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.9em;
    color: var(--text-color);
}

/* --- Pricing Calendar Styles --- */
.pricing-calendar-table .day-price {
    display: none;
}

.pricing-calendar-table .day-number {
    font-size: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pricing-calendar-table td {
    position: relative;
}
/* H2 for Availability Calendar is styled by global H2 or .property-description-details h2 if still nested conceptually */
.pricing-calendar-controls {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 20px; /* Add space if H2 is separate */
}
.pricing-calendar-controls button { /* Button styles already updated globally */
    padding: 5px 10px;
    margin: 0 10px;
    background-color: var(--secondary-color);
}
.pricing-calendar-controls button:hover {
    background-color: var(--dark-gray);
}
#current-month-year-display { /* Will inherit font-family */
    font-weight: 300; /* UPDATED from bold */
    font-size: 1.2em;
    margin: 0 15px;
}
#pricing-calendar-placeholder {
    margin-top: 10px;
}
.pricing-calendar-table { /* Will inherit font-family & weight */
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.9em;
}
.pricing-calendar-table th, .pricing-calendar-table td {
    border: 1px solid #ddd;
    padding: 6px;
    text-align: center;
    vertical-align: top;
    height: 80px;
    width: calc(100% / 7);
}
.pricing-calendar-table th { /* Will inherit font-family */
    background-color: #f2f2f2;
    font-weight: 300; /* UPDATED from bold */
}
.pricing-calendar-table .day-number { /* Will inherit font-family */
    font-weight: 300; /* UPDATED from bold */
    display: block;
    text-align: left;
    font-size: 0.85em;
    margin-bottom: 4px;
    color: #555;
}
.pricing-calendar-table .day-price { /* Will inherit font-family */
    font-size: 1em;
    color: var(--primary-color);
    font-weight: 300; /* UPDATED from bold */
}
.pricing-calendar-table .day-price-na { /* Will inherit */
    font-size: 0.85em;
    color: #aaa;
    margin-top: 5px;
}
.pricing-calendar-table td.past-day .day-number,
.pricing-calendar-table td.past-day .day-price {
    color: #ccc;
    text-decoration: line-through;
}
.pricing-calendar-table td.ical-booked {
    background-color: #f0f0f0;
    position: relative;
}
.pricing-calendar-table td.ical-booked .day-number {
    text-decoration: line-through;
    color: #999;
}
.pricing-calendar-table td.ical-booked .day-price,
.pricing-calendar-table td.ical-booked .day-price-na {
    display: none;
}
.pricing-calendar-table td.ical-booked .day-price-booked { /* Will inherit font-family */
    font-size: 0.9em;
    color: #777;
    font-weight: 300; /* UPDATED from bold */
    margin-top: 5px;
}

/* --- House Rules Section Styling --- */
.house-rules-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--light-gray);
}
.house-rules-section h2 { /* Will inherit */
    font-size: 1.8em;
    margin-bottom: 25px;
    border-bottom: none; /* Removed border as it's handled by section border-top */
    padding-bottom: 0;
}
.house-rules-section h2 i.fa-scroll {
    margin-right: 12px;
    color: var(--accent-color);
}
.house-rules-section > p.intro-text { /* Will inherit */
    margin-bottom: 30px;
    font-size: 1.05em;
    line-height: 1.7;
}
.rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.rule-category {
    margin-bottom: 20px;
}
.rule-category h3 { /* Will inherit */
    font-size: 1.4em;
    color: var(--primary-color);
    margin-bottom: 18px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}
.rule-category h3 i {
    margin-right: 10px;
    width: 22px;
    text-align: center;
}
.rule-category ul {
    list-style: none;
    padding-left: 0;
}
.rule-category ul li { /* Will inherit */
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    line-height: 1.65;
}
.rule-category ul li i.fa-li {
    position: absolute;
    left: 0;
    top: 0.25em;
    color: var(--secondary-color);
    width: 20px;
    text-align: center;
}
.house-rules-section .important-note {
    background-color: #fff8e1;
    border-left: 5px solid #ffc107;
    padding: 18px 25px;
    margin: 30px 0;
    border-radius: var(--border-radius);
}
.house-rules-section .important-note p { /* Will inherit font-family */
    margin-bottom: 0;
    color: #856404;
    font-weight: 300; /* UPDATED from 500 */
}
.house-rules-section .important-note i.fa-exclamation-triangle {
    margin-right: 10px;
}
.house-rules-section .download-pdf-link {
    text-align: center;
    margin: 30px 0 15px 0;
}
.house-rules-section .download-pdf-link .button i { /* Button styles updated globally */
    margin-right: 8px;
}

/* --- All Amenities Section (Original styles, now mostly for modal content) --- */
/* .all-amenities-container is no longer a primary styled block on the page,
   but .all-amenities-grid styling is used within the modal via .all-amenities-grid-modal */

/* Styles for the button that triggers the modal if not covered by global button styles */
.show-all-amenities-btn { /* This class is used by the new button in .top-amenities-section */
    /* Existing styles are fine, or can be refined by .top-amenities-section .show-all-amenities-btn */
    /* display: inline-block; (from original)
    margin-top: 15px; (from original)
    padding: 12px 20px; (from original)
    font-size: 1em; (from original)
    font-weight: 300; (from original)
    border: 2px solid var(--primary-color); (from original)
    background-color: #fff; (from original)
    color: var(--primary-color); (from original)
    cursor: pointer; (from original)
    border-radius: var(--border-radius); (from original)
    transition: background-color 0.3s, color 0.3s; (from original) */
}
/* .show-all-amenities-btn:hover { (from original)
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
} */

/* .all-amenities-grid provides base styling for the content within the modal */
.all-amenities-grid { /* Base styles for the grid structure itself */
    display: grid !important; /* Original had !important */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 25px;
}
.all-amenities-grid .amenity-category {
    margin-bottom: 15px;
}
.all-amenities-grid .amenity-category h4 {
    font-size: 1.2em;
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
.all-amenities-grid .amenity-category h4 i {
    margin-right: 10px;
    width: 22px;
    text-align: center;
    color: var(--primary-color);
}
.all-amenities-grid .amenity-category ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.all-amenities-grid .amenity-category li {
    font-size: 0.95em;
    display: flex;
    align-items: flex-start;
    padding: 6px 0;
    line-height: 1.5;
}
.all-amenities-grid .amenity-category li > i {
    margin-right: 10px;
    color: var(--secondary-color);
    width: 20px;
    text-align: center;
    margin-top: 0.15em;
}
.all-amenities-grid .amenity-category li div {
    flex: 1;
}
.all-amenities-grid .amenity-item-details {
    font-size: 0.88em;
    color: #6c757d;
    display: block;
    margin-left: 30px; /* Original value */
    margin-top: 2px;
    line-height: 1.4;
}
.all-amenities-grid .unavailable-amenity {
    text-decoration: line-through;
    color: #adb5bd;
}
.all-amenities-grid .unavailable-amenity > i,
.all-amenities-grid .unavailable-amenity i {
    color: #ced4da !important;
}


/* --- Amenities Modal --- */
.amenities-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.65);
}
.amenities-modal-content {
    background-color: #fff;
    margin: 4% auto;
    padding: 25px 35px;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 750px; /* Can be adjusted if modal content is too cramped/wide */
    position: relative;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    max-height: 88vh;
    overflow-y: auto; /* This makes the content area scrollable if it exceeds max-height */
}
.amenities-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 18px;
    margin-bottom: 25px;
}
.amenities-modal-header h3 { /* Will inherit */
    margin-bottom: 0;
    font-size: 1.7em;
    color: var(--accent-color);
}
.amenities-modal .close-modal-btn { /* Will inherit font-family */
    color: #888;
    font-size: 32px;
    font-weight: 300; /* UPDATED from bold */
    line-height: 1;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer; /* Explicitly set cursor */
}
.amenities-modal .close-modal-btn:hover,
.amenities-modal .close-modal-btn:focus {
    color: var(--dark-gray);
    text-decoration: none;
    /* background-color: transparent; (already transparent) */
    /* transform: none; (already none) */
}

/* --- Amenities Modal Body Content (Specific styles for content within .amenities-modal-body) --- */
.amenities-modal-body .all-amenities-grid-modal { /* Using the .all-amenities-grid class for structure */
    display: grid; /* This will be overridden by the more specific rule below for single column */
    grid-template-columns: 1fr !important; /* Force single column for modal */
    gap: 15px; /* Adjust gap as needed */
}
/* These rules are now more specific to the modal context using .all-amenities-grid-modal */
.amenities-modal-body .all-amenities-grid-modal .amenity-category {
    margin-bottom: 20px; /* Space between categories in modal */
}
.amenities-modal-body .all-amenities-grid-modal .amenity-category h4 {
    /* Styles from .all-amenities-grid .amenity-category h4 are inherited or can be adjusted here if needed */
    font-size: 1.2em; /* Keep consistent */
}
.amenities-modal-body .all-amenities-grid-modal .amenity-category ul {
    display: block; /* Ensure UL items stack if they were displayed differently by general .all-amenities-grid ul */
    padding-left: 0; /* Reset padding if any was inherited */
    list-style: none; /* Ensure list style is none */
}
.amenities-modal-body .all-amenities-grid-modal .amenity-category li {
    /* Styles from .all-amenities-grid .amenity-category li are inherited */
    font-size: 0.95em;
}
.amenities-modal-body .all-amenities-grid-modal .amenity-category li i {
    /* Styles from .all-amenities-grid .amenity-category li i are inherited */
    margin-right: 12px; /* Original had 10px, keep consistent or choose one */
}
.amenities-modal-body .all-amenities-grid-modal .amenity-item-details {
    /* Styles from .all-amenities-grid .amenity-item-details are inherited */
    margin-left: 32px; /* Original modal had 32px, general grid had 30px. Choose one or make consistent. */
}
.amenities-modal-body .all-amenities-grid-modal .unavailable-amenity {
    /* Styles from .all-amenities-grid .unavailable-amenity are inherited */
}


/* --- Checkout Steps & Lease Modal --- */
.checkout-step {
    margin-bottom: 15px;
    padding-bottom:15px;
    border-bottom: 1px solid #eee;
}
.form-group-checkbox {
    display: flex;
    align-items: center;
}
.form-group-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: auto;
}
.form-group-checkbox label { /* Will inherit font-family & weight */
    margin-bottom: 0;
    /* font-weight: normal; /* Explicitly normal if needed, but 300 is already light */
}

/* General Modal Styles (for Lease & Rate Calculator Popup) */
.modal { /* This is a generic modal class, .amenities-modal is more specific */
    display: none;
    position: fixed;
    z-index: 2000; /* Ensure amenities-modal also has z-index: 2000 or higher if it's a separate type */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* This allows the modal itself to scroll if content overflows viewport height, but we prefer .amenities-modal-content to scroll */
    background-color: rgba(0,0,0,0.6); /* Slightly less opaque than amenities-modal for distinction if needed */
    padding-top: 60px;
}
.modal-content { /* General modal content */
    background-color: #fefefe;
    margin: 5% auto;
    padding: 25px;
    border: 1px solid #ccc;
    width: 90%;
    max-width: 700px;
    border-radius: var(--border-radius);
    position: relative;
    box-shadow: var(--box-shadow);
}
#rate-calculator-result-popup .modal-content { /* Specific for rate calc popup */
    max-width: 480px;
    padding: 20px 25px;
}

.close-button { /* Generic close button for .modal, not .amenities-modal */
    color: #aaa;
    font-size: 28px;
    font-weight: 300; /* UPDATED from bold */
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    /* background-color: transparent; (already transparent) */
    /* transform: none; (already none) */
}

#leaseTextContent { /* Text will inherit font-family & weight */
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fdfdfd;
}
#leaseTextContent p,
#leaseTextContent h3, /* H3 will inherit global styles */
#leaseTextContent ul {
    margin-bottom: 0.75em;
}
#leaseTextContent h3 { /* Inherits from global H3, but if specific size/color needed, style here */
    font-size: 1.2em; /* Example of specific size if needed */
    color: var(--accent-color);
    margin-top: 1em;
}
#leaseTextContent ul {
    list-style-type: disc;
    padding-left: 20px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .property-content-area {
        grid-template-columns: 1fr;
    }
    .property-sidebar {
        margin-top: 30px;
    }
    /* .all-amenities-grid responsive behavior (used by .all-amenities-grid-modal) */
    .all-amenities-grid, .all-amenities-grid-modal {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }

    .what-we-do-columns {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .site-header .container {
        /* Flex properties remain */
    }
    .main-nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: var(--box-shadow);
        padding: 10px 0;
        border-top: 1px solid #eee;
    }
    .main-nav ul.active {
        display: flex;
    }
    .main-nav ul li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .main-nav ul li a {
        font-family: var(--heading-font); /* Stays as 'Open Sans' */
        font-weight: 500;                 /* CHANGED to 500 for medium weight */
        color: var(--accent-color);
        /* padding: 5px 0; (original) */
        position: relative;
        text-decoration: none;
        display: block;
        padding: 12px 20px; /* from original */
        border-bottom: 1px solid #f0f0f0; /* from original */
    }
     .main-nav ul li:last-child a {
        border-bottom: none;
    }
    .main-nav ul li a::after { /* Remove underline effect for mobile nav */
        display: none;
    }

    .hamburger-menu {
        display: block;
    }
    .hamburger-menu.open .hamburger-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-menu.open .hamburger-bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.open .hamburger-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-content h1 { font-size: 2.2em; } /* Font family/weight inherited */
    .hero-content p { font-size: 1em; } /* Font family/weight inherited */
      
    .pricing-calendar-table { font-size: 0.8em; } /* Font family/weight inherited */
    .pricing-calendar-table td { height: 60px; padding: 4px; }

    .rules-grid {
        /* No change needed */
    }
    /* .all-amenities-grid and .all-amenities-grid-modal become single column */
    .all-amenities-grid, .all-amenities-grid-modal {
        grid-template-columns: 1fr !important;
    }
    .modal-content { /* General modal content for smaller screens */
        width: 95%;
        margin: 10% auto; /* Adjust margin for smaller screens */
        padding: 20px;
    }
    /* Specific for amenities modal content on smaller screens if needed */
    .amenities-modal-content {
        width: 95%;
        margin: 5% auto; /* More space at top */
        padding: 20px 25px;
    }

    #leaseTextContent {
        max-height: 300px;
    }

    .what-we-do-section .section-title-main {
        font-size: 2.2em; /* Font family/weight inherited */
    }
    .what-we-do-section .section-subtitle-main {
        font-size: 0.9em; /* Font family/weight inherited */
        padding-left: 10px;
        padding-right: 10px;
    }
    .what-we-do-columns {
        flex-direction: column;
        align-items: center;
    }
    .what-we-do-column {
        max-width: 400px;
        width: 90%;
        margin-bottom: 20px;
    }
    .what-we-do-column:last-child {
        margin-bottom: 0;
    }

    .photo-grid-item .photo-label {
        font-size: 0.85rem; /* Smaller font for smaller screens */
        padding: 10px 14px; /* Reduced padding */
        bottom: 10px; /* Slightly closer to edge */
        left: 10px;
        right: 10px;
    }
}

/* Footer Container - for overall layout of columns */
.footer-content {
    display: flex;           /* Enables flexbox layout */
    flex-wrap: wrap;         /* Allows columns to wrap on smaller screens if needed */
    justify-content: center; /* THIS CENTERS THE GROUP OF (now two) COLUMNS HORIZONTALLY */
    gap: 30px;               /* Space between the two columns */
    margin-bottom: 30px;     /* Space below the footer content area */
}

/* Individual Footer Columns */
.footer-column {
    flex: 1;                 /* THIS MAKES THE TWO COLUMNS SHARE AVAILABLE SPACE EQUALLY, so they'll be equal width */
    min-width: 200px;        /* Optional: ensure columns don't get too narrow. Adjust if needed. */
    text-align: center;      /* Centers the text and other inline content *within* each column */
    padding: 10px;           /* Example padding inside each column - adjust as needed */
}
/* --- Guest Feedback Section --- */
.guest-feedback-section {
    padding: 40px 0;
    text-align: center;
    margin-top: 40px; /* Add some space above the reviews section */
    border-top: 2px solid var(--light-gray); /* Separator line */
}

.guest-feedback-section h2 {
    font-size: 2.2em;
    margin-bottom: 30px;
    color: var(--accent-color);
}

.reviews-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers cards if they don't fill the row */
    gap: 25px; /* Space between cards */
}

.guest-review-card {
    background-color: var(--light-gray);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 20px;
    /* margin: 10px auto; /* Removed as .reviews-container handles centering/spacing */
    width: 100%; /* Cards will take width defined by flex basis */
    max-width: 450px; /* Max width of a card */
    flex: 1 1 400px; /* Flex properties: grow, shrink, basis (min width before wrapping) */
    text-align: left;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
}

.guest-review-card .stars {
    color: #f0ad4e; /* Gold color for stars */
    margin-bottom: 10px;
    font-size: 1.1em;
}

.guest-review-card h3 {
    font-size: 1.3em;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.guest-review-card .review-text {
    font-style: italic;
    color: var(--text-color);
    margin-bottom: 15px; /* More space before reviewer info */
    line-height: 1.5;
    flex-grow: 1; /* Allows text to take available space, pushing info to bottom */
}

.guest-review-card .reviewer-info {
    font-size: 0.9em;
    color: var(--secondary-color);
    text-align: right;
    margin-top: auto; /* Pushes this to the bottom of the card */
}

@media (max-width: 520px) {
    /* For .amenities-modal-body .amenity-category ul from original CSS */
    .amenities-modal-body .amenity-category ul { /* This was for older modal structure */
         grid-template-columns: 1fr; /* This rule is fine as .all-amenities-grid-modal will handle its own list items */
    }
    /* New rule for .top-amenities-grid */
    .top-amenities-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}


@media (max-width: 480px) {
    .property-grid { grid-template-columns: 1fr; }
    .button, button { padding: 10px 18px; font-size: 0.9em; } /* Font family/weight inherited */
    .pricing-calendar-controls button { padding: 5px 8px; font-size: 0.85em; } /* Font family/weight inherited */
    #current-month-year-display { font-size: 1em; } /* Font family/weight inherited */
    .pricing-calendar-table { font-size: 0.7em; } /* Font family/weight inherited */
    .pricing-calendar-table td { height: 50px; padding: 3px; }
    .pricing-calendar-table .day-price { font-size: 0.9em; } /* Font family/weight inherited */

    .rate-calculator-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    .rate-calculator-inputs .form-group {
        flex-basis: auto;
        width: 100%;
    }
    .rate-calculator-inputs button#calculate-rate-btn { /* Button styles updated globally */
        width: 100%;
        margin-top: 10px;
    }

    .photo-grid-item .photo-label {
        font-size: 0.8rem; /* Even smaller for very small screens */
        padding: 8px 12px; /* Further reduced padding */
        bottom: 8px;
        left: 8px;
        right: 8px;
        border-radius: 4px; /* Smaller radius for proportionality */
    }
}
/* === Custom Checkbox Styling for Better Visibility === */

/* 1. Hide the default browser checkbox */
.form-group-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
  }
  
  /* 2. Style the label to be the main interactive element */
  .form-group-checkbox label {
    position: relative; /* Needed for positioning the custom box */
    cursor: pointer;   /* Show a hand cursor on hover */
    padding-left: 35px; /* Create space for the custom checkbox */
    line-height: 24px;  /* Vertically align text with the new box */
    display: inline-block;
    font-size: 1rem; /* Slightly increase label text size */
  }
  
  /* 3. Create the custom checkbox 'box' using a pseudo-element */
  .form-group-checkbox label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    
    /* --- Visual Appearance of the Box --- */
    width: 22px;        /* A larger, more touch-friendly size */
    height: 22px;
    border: 2px solid #5a6e7a; /* A strong, visible border color */
    border-radius: 4px;
    background-color: #f8f9fa; /* A very light background to stand out */
    transition: all 0.2s ease; /* Smooth transitions for hover/focus */
  }
  
  /* 4. Style the hover and focus states for better accessibility */
  .form-group-checkbox input[type="checkbox"]:hover + label::before,
  .form-group-checkbox input[type="checkbox"]:focus + label::before {
    border-color: #007bff; /* Highlight with your primary button color */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Add a 'glow' effect */
  }
  
  /* 5. Create the checkmark using another pseudo-element */
  .form-group-checkbox label::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
  
    width: 6px;
    height: 12px;
    
    border: solid #ffffff; /* White checkmark */
    border-width: 0 3px 3px 0;
    
    transform: rotate(45deg); /* Rotate a rectangle to form a checkmark */
    opacity: 0; /* Hide it by default */
    transition: opacity 0.2s ease;
  }
  
  /* 6. Reveal the checkmark and change the box color when checked */
  .form-group-checkbox input[type="checkbox"]:checked + label::before {
    background-color: #007bff; /* Use a solid background color when checked */
    border-color: #007bff;
  }
  
  .form-group-checkbox input[type="checkbox"]:checked + label::after {
    opacity: 1; /* Make the checkmark visible */
  }
  
  /* 7. Style for when the checkbox is disabled */
  .form-group-checkbox input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
    color: #868e96;
  }
  
  .form-group-checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #e9ecef;
    border-color: #ced4da;
  }

/* Make sure to test thoroughly, as changing all font weights to 300 is a drastic change. */
/* You may need to adjust font-sizes for various elements to maintain hierarchy and readability. */

/* --- Dark Mode Adjustment --- */
@media (prefers-color-scheme: dark) {
  .hero-background-image {
    filter: brightness(0.75);
  }
}

/* --- What We Do Section --- */
.what-we-do-section {
    padding: 60px 0;
    background-color: #192024;
}

.what-we-do-section .section-title-main {
    text-align: center;
    margin-bottom: 25px;
    font-size: 2.5em;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
}

.what-we-do-section .section-subtitle-main {
    text-align: center;
    text-transform: uppercase;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    font-size: 1em;
    line-height: 1.7;
    color: #f8f9fa;
}

.what-we-do-columns {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.what-we-do-column {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    text-align: center;
    padding: 20px 15px;
}

.what-we-do-column .column-icon {
    font-size: 2.8em;
    color: #0095ff;
    margin-bottom: 20px;
    display: block;
}

.what-we-do-column h3 {
    font-size: 1.5em;
    color:  #fff;
    margin-bottom: 15px;
    line-height: 1.3;
    text-transform: uppercase;
}

.what-we-do-column p {
    font-size: 0.95em;
    color: #ddd;
    line-height: 1.6;
}
/* --- CSS for Review Buttons in "What We Do" Section --- */
.what-we-do-column .review-buttons-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.button.button-oval {
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 0.85em;
    line-height: 1.4;
    text-decoration: none;
    display: inline-block;
    min-width: 190px;
    box-sizing: border-box;
    text-align: center;
}

/* Define General CSS Variables for Custom Circle Icons */
:root {
    --custom-icon-color: #0095ff;
    --custom-icon-inner-diameter: 60px;
    --custom-icon-svg-scale: 0.5;
    --custom-icon-user-friendly-svg-scale: 0.7;
    --custom-icon-gap: 4px;
    --custom-icon-outer-line-thickness: 2px;
}

.custom-circle-icon {
    position: relative;
    width: var(--custom-icon-inner-diameter);
    height: var(--custom-icon-inner-diameter);
    background-color: var(--custom-icon-color);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.custom-circle-icon .icon-svg {
    width: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-svg-scale));
    height: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-svg-scale));
    display: block;
}

.user-friendly-platform-column .custom-circle-icon .icon-svg {
    width: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-user-friendly-svg-scale));
    height: calc(var(--custom-icon-inner-diameter) * var(--custom-icon-user-friendly-svg-scale));
}

.custom-circle-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--custom-icon-inner-diameter) + (2 * var(--custom-icon-gap)) + (2 * var(--custom-icon-outer-line-thickness)));
    height: calc(var(--custom-icon-inner-diameter) + (2 * var(--custom-icon-gap)) + (2 * var(--custom-icon-outer-line-thickness)));
    border: var(--custom-icon-outer-line-thickness) solid var(--custom-icon-color);
    border-radius: 50%;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .what-we-do-columns {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .what-we-do-section .section-title-main {
        font-size: 2.2em;
    }
    .what-we-do-section .section-subtitle-main {
        font-size: 0.9em;
        padding-left: 10px;
        padding-right: 10px;
    }
    .what-we-do-columns {
        flex-direction: column;
        align-items: center;
    }
    .what-we-do-column {
        max-width: 400px;
        width: 90%;
        margin-bottom: 20px;
    }
    .what-we-do-column:last-child {
        margin-bottom: 0;
    }
}