/* General Styles */
body {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333; /* Neutral color for body text */
    background-color: #fafafa; /* Subtle background */
    padding-top: 45px; /* Adjust based on your header height */
    font-family: 'Montserrat', sans-serif;
}
/* Prevent horizontal scrolling on the entire site */
html, body {
    overflow-x: hidden;
}
/* Tablet (768px–1023px) */
@media (max-width: 1023px) {
  h1 { font-size: 32px; } /* override if original is bigger */
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  /* body stays the same or reduce from 16px to 15px if you prefer */
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  body, p, li {
    font-size: 15px;
  }
}

/* Handle cases where child elements are causing overflow */
* {
    box-sizing: border-box;
}
/* Ensure all sections fit within the container */
.container, .section {
    max-width: 100%;
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;

}

/* Set site-wide max-width and center align */
.site-container {
    margin: 0 auto;
    padding: 0 var(--site-padding, 20px); /* Responsive side padding */
    box-sizing: border-box;
}
section {
    padding: 40px 20px;
}
.container {
    margin: 0 auto;
}

/* Buttons */
button, .btn {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 20px;
    background-color: #222; /* Elegant black */
    color: #fff;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover, .btn:hover {
    background-color: #444; /* Slightly lighter on hover */
    color: var(--secondary-color);
}



/* Full-width Section Styling */
.neighborhood-section {
    background-color: #000; /* Dark background */
    color: #fff; /* White text for the title */
    padding: 60px 20px; /* Add padding for spacing */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in the width */
    position: relative;
    text-align: center;
    overflow: hidden;
}

.neighborhood-section h2 {
    text-align: center; 
    color: #fff; 
    z-index: 1;
    position: relative;
    margin-bottom: 30px;
}
.neighborhood-section .neighborhood-overlay {
    z-index: 0;
}

/* Neighborhood Cards Container */
.neighborhood-cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four cards in a row */
    max-width: 1400px; /* Limit the width of the grid */
    margin: 0 auto; /* Center the container */
    gap: 20px;
    padding: 20px;
}

/* Individual Card Styling */
.neighborhood-card {
    position: relative;
    border-radius: 10px; /* Rounded corners */
    overflow: hidden;
    height: 250px; /* Consistent height for all cards */
    background: #000; /* Fallback background color */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    transition: transform 0.3s ease;
}

.neighborhood-card:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Background Image */
.neighborhood-card .neighborhood-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0; /* Ensure image is behind content */
}

/* Overlay and Content */
.neighborhood-card .overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark transparent overlay */
    padding: 20px;
    z-index: 1; /* Ensure it’s above the image */
    text-align: center;
}

.neighborhood-card h3 {
    font-size: 2em; /* Larger font for the location name */
    font-weight: bold;
    color: #fff; /* White text */
    margin: 0;
}

.neighborhood-card .view-properties-button {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 15px;
    font-size: 13px;
    color: #fff;
    background-color: inherit;
    border: 1px solid #565454;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.neighborhood-card .view-properties-button:hover {
    background-color: #fff; /* Invert colors on hover */
    color: #000; /* Black text on hover */
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .neighborhood-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .neighborhood-cards-container {
        grid-template-columns: 1fr;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Featured Properties Section */
    .featured-properties .properties-grid {
        flex-direction: column;
        gap: 20px;
    }

    .featured-properties .property-item {
        max-width: 100%;
    }
}
.property-filters button:hover {
    background-color: #222;
}
.about-section {
   background-color: #f9f9f9; /* Optional background color */
    padding: 50px 0; /* Add spacing around the section */
    text-align: center; /* Default text alignment */
}
.about-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-section p {
    margin-bottom: 30px;
}
.about-section .button {
    background-color: var(--main-color);
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.about-section .button:hover {
    background-color: var(--secondary-color);
}
.site-width-container {
    display: flex; /* Align text and image side by side */
    gap: 20px; /* Space between text and image */
    margin: 0 auto; /* Center align */
    align-items: center; /* Vertical alignment */
    max-width: var(--site-width, 1200px); /* Fallback to 1200px */
    padding: 0 15px; /* Add some padding for smaller screens */
}

.about-text {
    flex: 1; /* Allow text to take up half the space */
    text-align: left; /* Align text to the left */
}

.about-title {
    font-size: 36px; /* Font size for the title */
    font-weight: 700; /* Bold font */
    margin-bottom: 20px; /* Space below the title */
    line-height: 1.2; /* Tight spacing between lines */
}

.about-description {
    font-size: 15px; /* Font size for description */
    line-height: 1.8; /* Better line spacing */
    color: #555; /* Subtle text color */
    margin-bottom: 30px; /* Space below the description */
    padding-right:45px;
}

.about-btn {
    display: inline-block; /* Make button inline */
    padding: 12px 25px; /* Button padding */
    font-weight: 700; /* Bold font */
    background-color: #000; /* Black button */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover transition */
    color: #fff;
}

.about-btn:hover {
    background-color: #444; /* Lighter on hover */
}

.about-image {
    flex: 1; /* Allow image to take up half the space */
    text-align: center; /* Center align image */
}

.about-image img {
    max-width: 100%; /* Make image responsive */
    border-radius: 12px; /* Rounded corners */
    object-fit: cover; /* Maintain image proportions */
    height: auto; /* Ensure natural height */
}

.agent-profiles {
    text-align: center;
    padding: 60px 20px;
    background-color: #f9f9f9; /* Light background */
}

.agent-profiles .section-title {
    font-size: 36px;
    margin-bottom: 40px;
}

.agents-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin: 50px 0;
}
.neighborhood-section h2 {
    padding: 30px 20px;
}

/* Container Styling */
.agent-page-container {
    margin: 0 auto;
    padding: 20px;
}

/* Agent Header */
.agent-header {
    text-align: center;
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

.agent-header-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 2px solid #eee;
}
.agent-header p {
    color: #555;
}
/* Right Column */

.contact-logo img {
    max-width: 100px;
    margin-bottom: 20px;
}
.agent-contact {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    width: 300px;
    box-sizing: border-box;
    margin: 60px auto;
}

.agent-contact h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.agent-contact p {
    margin-bottom: 10px;
}

/* Adjust Contact Form Styling */
/* Responsive Styling */
@media (max-width: 768px) {
    .agent-main {
        flex-direction: column;
    }

    .agent-contact,
    .agent-left {
        flex: 1;
    }

    .properties-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}
/* Hero Section */
.about-hero {
    position: relative;
    overflow: hidden;
}

.about-hero h1 {
    margin: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-title-overlay {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.about-content .container {
    text-align: justify;
    padding: 5px;
}

.about-content .container p {
    margin-bottom: 20px;
    line-height: 1.8;
    font-family: 'Montserrat';
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

.hero-section h1 {
    z-index: 2; /* Ensure the text is above the gradient */
    position: relative;
    color: #fff; /* Text color for better contrast */
}
.neighborhood-button {
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.neighborhood-button:hover {
    background-color: #fff;
    color: #000;
}
.team-member img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 0 auto 10px;
}
footer {
    border-top: 1px solid #ddd;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    color: #777;
}
/* Property List */
.property-list-container {
    width: 70%;
}

.property-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* Map Section */
.property-map-container {
    width: 30%;
    position: sticky;
    top: 20px;
}

#property-map {
    width: 100%;
    height: 40vh!important;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 55px;
}
.gm-err-container {
    Height: 100%;
}

/* Pagination */
.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    margin: 0 5px;
    padding: 5px 10px;
    color: #d4ae36;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
}

.pagination a:hover {
    background-color: #f1f1f1;
    color: #005f8d;
}

.pagination .current {
    padding: 5px 10px;
    background-color: #d4ae36;
    color: #fff;
    border-radius: 4px;
}

/* View All Photos Button on Last Image */
.view-all-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    opacity: 1; /* Always visible */
    border-radius: 8px;
}

.view-all-overlay:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Responsive Design */
@media (max-width: 768px) {
    .gallery-grid {
        flex-direction: column; /* Stack columns vertically */
    }

    .gallery-large,
    .gallery-thumbnails {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .gallery-thumbnails {
        grid-template-columns: repeat(2, 1fr); /* Maintain 2 columns for thumbnails */
    }
}

.gallery-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch; /* Ensures equal column heights */
}

/* Left Column: Large Image */
.gallery-large {
    flex: 1 1 50%;
    max-width: 50%;
}

.main-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Right Column: 2x2 Thumbnails Grid */
.gallery-thumbnails {
    flex: 1 1 50%;
    max-width: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr; /* Ensures all rows have equal height */
    gap: 10px;
}

.thumbnail-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.fancybox__toolbar {
    top: 20px;
}
.agent-contact {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 20px;
    width: 350px;
    position: sticky;
    top: 20px; /* Adjust as needed */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.agent-contact img {
    max-width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

.agent-contact h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.agent-contact p {
    margin: 0 0 10px;
    color: #555;
}

.agent-contact a {
    color: color: var(--secondary-color);
    text-decoration: none;
}

.agent-contact a:hover {
    text-decoration: underline;
}

.agent-contact .contact-button {
    display: inline-block;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    margin-top: 15px;
}

.agent-contact .contact-button:hover {
    background: #333;
}
.sticky-agent {
    position: sticky;
    top: 20px;
    max-width: 300px;
}

.property-description {
    margin-top: 20px;
    line-height: 1.6;
    text-align: left;
}
.property-hero h2 {
    font-size: 1.5rem!important;
    line-height: 38px;
}
.property-meta-details {
    background: #000; /* Black background */
    color: #fff; /* White text */
    padding: 20px;
    text-align: center;
}

.property-meta-icons {
    text-align: center;
    margin-bottom: 20px;
}

.property-meta-icons .meta-icons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px; /* Adjust width as needed */
}

.meta-item img {
    width: 40px; /* Icon size */
    height: 40px;
    margin-bottom: 10px;
}

.meta-item span {
    font-size: 14px;
    color: #333; /* Adjust text color */
}
.property-left {
    flex: 70%;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
}

.property-right {
    flex: 30%;
    display: flex;
    flex-direction: column;
}

.agent-contact {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.agent-contact img {
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    border-radius: 0;
    width: 85px; /* Adjust the size as needed */
    height: auto; /* Adjust the size as needed */
    object-fit: cover; /* Ensures the image fills the circle properly */
}

.agent-contact .button.contact-agent {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}
.virtual-tour-section p {
    font-size: 16px;
    color: #555; /* Light gray */
    font-style: italic;
}
.virtual-tour-link {
    color: #d4ae36;
    text-decoration: underline;
    font-weight: bold;
}
.virtual-tour-link:hover {
    color: #005177;
}
.property-video,
.virtual-tour {
    margin-top: 20px;
}
.property-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 80px 0;
    text-align: center;
    overflow: hidden;
}

.property-hero .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.property-hero .container {
    position: relative;
    z-index: 2;
    color: #fff;
}

.property-hero h1 {
    color: #fff;
}
.meta-icons-grid {
    display: flex;
    justify-content: space-around; /* Space items evenly */
    align-items: center;           /* Align icons and text */
    padding: 15px 20px;            /* Adjust padding for balance */
    margin: 20px auto;             /* Center the section */
    background-color: #fff;        /* Clean white background */
    border-radius: 12px;           /* Slightly round corners */
    border: 1px solid #e5e5e5;     /* Subtle border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    transition: box-shadow 0.3s ease;
}

.meta-icons-grid:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.meta-item {
    display: flex;
    flex-direction: column;        /* Stack icons and text */
    align-items: center;           /* Center-align items */
    text-align: center;            /* Center-align text */
    font-size: 14px;               /* Keep text clean and readable */
    font-weight: 500;              /* Medium weight for better hierarchy */
    color: #333;                   /* Neutral text color */
    transition: transform 0.2s ease, color 0.3s ease; /* Add hover effects */
}

.meta-item:hover {
    transform: translateY(-3px);   /* Slight hover lift */
    color: #000;                   /* Darker text on hover */
}

.meta-item img {
    width: 28px;                   /* Icon size proportional to text */
    height: 28px;
    margin-bottom: 8px;            /* Space between icon and text */
    opacity: 0.9;                  /* Subtle transparency */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth animations */
}

.meta-item img:hover {
    transform: scale(1.1);         /* Slight zoom effect on hover */
    opacity: 1;                    /* Fully visible icon */
}

@media (max-width: 768px) {
    .meta-icons-grid {
        flex-wrap: wrap;           /* Wrap items on smaller screens */
        gap: 10px;                 /* Add spacing between items */
        padding: 10px;             /* Reduce padding for smaller viewports */
    }

    .meta-item {
        font-size: 12px;           /* Smaller font size for mobile */
    }

    .meta-item img {
        width: 24px;               /* Reduce icon size */
        height: 24px;
    }
}
/* Property Header Container */
.property-header {
    display: flex;
    justify-content: space-between; /* Space between title and price */
    align-items: center; /* Align title and price vertically */
    margin-top: 20px; /* Add space above */
    padding: 10px 0; /* Add padding to the section */
    border-bottom: 1px solid #ddd; /* Optional: Underline for section */
}

/* Title Section */
.property-title-container {
    max-width: 70%; /* Adjust width for better balance */
}

.property-title {
    font-size: 39px; /* Title font size */
    font-weight: bold;
    margin: 0;
    color: #333;
}

.property-location {
    font-size: 16px;
    color: #555;
    margin-top: 5px; /* Add spacing below the title */
    display: block; /* Make location appear below the title */
}

/* Price Section */
.property-price-container {
    text-align: right; /* Align price to the right */
    max-width: 30%; /* Limit width for better alignment */
}

.property-price {
    font-size: 27px; /* Main price size */
    font-weight: bold;
    color: #000;
    margin: 0;
}
.property-hero {
    width: 100%; /* Ensure it takes the full width */
    height: 45vh; /* Adjust the height to your preference */
    background-size: cover; /* Ensures the image fully covers the container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    position: relative; /* To position the overlay and content correctly */
}

.property-hero .overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensures it appears behind the text */
}

.property-hero .container {
    text-align: center; /* Centers text inside the hero */
}
.property-columns {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 30px;
}
@media (max-width: 768px) {
.property-header {
    display: inline;
}
.property-title {
    padding-bottom: 10px;
}
.property-gallery {
    margin: 20px 0 0;
}
section {
    padding: 30px 15px;
}
.agent-contact {
    padding: 40px 20px;
}
.property-columns {
    display: inline-block !important;
    margin-top: 7px !important;
    margin-bottom: 30px;
}
}
/* Container */
.property-page-container {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
}

/* Active Filters */
.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 8px;
}

.active-filters span {
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 4px;
}

.active-filters a.reset-filters {
    color: #d4ae36;
    text-decoration: underline;
    cursor: pointer;
}
/* Content Area */
.content-area {
    display: flex;
    gap: 20px;
}

/* Property List */
.property-list {
    flex: 0 0 70%;
}

.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
/* No Results */
.no-results {
    text-align: center;
    font-size: 1.2em;
    color: #777;
    margin-top: 50px;
}

/* Pagination */
.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 12px;
    background-color: #f1f1f1;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #ddd;
}

.pagination span.current {
    background-color: #d4ae36;
    color: #fff;
    cursor: default;
}

/* Map Section */
.property-map-container {
    width: 30%;
    position: sticky;
    top: 20px;
}

#property-map {
    width: 100%;
    height: 85vh;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

#property-map .map-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #777;
    font-size: 1em;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .property-list {
        flex: 0 0 100%;
    }

    .property-map-container {
        width: 100%;
        height: 400px;
        position: static;
    }

    #property-map {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
    }

    .filter-item {
        flex: 1 1 100%;
    }
}
/* Main Layout */
.archive-layout {
    display: flex;
    gap: 20px; /* Space between property grid and map */
    align-items: flex-start;
}

/* Property List Section */
.property-list {
    flex: 0 0 65%; /* Takes 65% of the width */
}

.property-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 20px; /* Space between cards */
}
.hero-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.agents-head {
    padding: 150px 0px;
    text-align: center;
}
.agents-title {
    font-weight: bold;
    margin-bottom: 30px;
}

.agents-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.agent-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 768px) {
  .agent-card {
    text-align: center;
    margin: 0 10px !important;
  }
}
@media (max-width: 768px) {
    .agents-head {
        padding: 70px 0px;
    }
}
.agent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.agent-photo img {
    width: 55%;
    height: auto;
    object-fit: cover;
    border-radius: 150px;
}

.agent-info {
    padding: 20px;
    text-align: center;
}

.agent-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

.agent-phone,
.agent-email {
    font-size: 13px;
    margin-bottom: 5px;
    color: #555;
}

.agent-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    background-color: transparent;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    color: #d4ae36;
    text-decoration: none;
}

.agent-link:hover {
    background-color: #555;
}

.no-agents {
    font-size: 1.2rem;
    color: #999;
}

.agent-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
    align-items: start;
    justify-items: center;
    padding: 0;
}
.agent-properties-grid .property-card:hover {
      transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        transform: scale(1.02);
}

.agent-properties-grid .property-card h3 {
    font-size: 16px;
    margin-top: 15px;
}
.property-card h3 a {
   color: #333; /* Neutral title color */
    font-weight: bold;
}
.property-card p.price a {
    color: #007BFF; /* Specific color for prices */
    font-weight: bold;
}
.property-card h3 a:hover {
    color: #007BFF; /* Add a hover effect if desired */
}
.property-card a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
}

.property-card a:hover {
    text-decoration: none; /* Ensure no underline on hover */
}
.agent-main {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 60px auto;
    padding: 0 20px;
    align-items: flex-start;
    position: relative;
}
.agent-main::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(65% - 20px); /* Adjust this to position between columns */
  width: 1px;
  background: #eee;
  opacity: 0.5;
}
.agent-left {
    flex: 1 1 60%;
    min-width: 300px;
}
.agent-contact h2 {
    font-size: 24px;
    margin-bottom: 20px;
}
.agent-contact {
    flex: 1 1 350px;
    max-width: 450px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    box-sizing: border-box;
    max-width: 450px;
    margin: 0 auto;
    margin-top: 20px; /* Adjust this until it feels aligned */

}
.agent-header {
    margin-bottom: 60px; /* Ensure consistent spacing here */
}

.agent-left h2 {
    margin-bottom: 30px; /* Same spacing style as other headings */
}
.contact-form button:hover {
    background: #111; 
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.agent-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0;
}
.agent-properties-grid .property-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Ensure the image fits within the card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.agent-properties-grid .property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.agent-properties-grid .property-image {
    display: block;
    width: 300px;
    height: 200px %;
    object-fit: cover;
    border-radius: 8px;
}
@media (max-width: 600px) {
    .agent-properties-grid {
        grid-template-columns: 1fr; /* Only one column on smaller screens */
    }
    .property-image {
        height: 150px; /* Slightly smaller on mobile */
    }
}
.neighborhood-card {
    background: #fff;
    border: 1px  #eee;
    border-radius: 0px;
    text-align: center;
    padding: 20px;
    transition: background 0.3s ease, transform 0.3s ease;
    border-right: 1px solid #fff;
}

.neighborhood-card:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.view-properties-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.view-properties-button:hover {
    background: #444;
}
.sold-banner {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #d32f2f; /* Red color */
    color: #fff;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    z-index: 10; /* Ensures it overlays the image */
}

/* Pagination */
.pagination {
    margin-top: 40px;
    text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    margin: 0 5px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 25px;
    color: #007bff;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover {
    background-color: #007bff;
    color: white;
}

.pagination .current {
    background-color: #007bff;
    color: white;
    pointer-events: none;
    font-weight: bold;
}
/* Adjust for responsiveness */
@media (max-width: 768px) {
    .sold-listings-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
    }
}

@media (max-width: 480px) {
    .sold-listings-grid {
        grid-template-columns: 1fr; /* 1 column for very small screens */
    }
}
/* Sold Property Container */
.sold-property-container {
    margin: 0 auto;
    padding: 20px;
}
.sold-property-image .sold-hero-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* Content Layout */
.sold-property-content .sold-property-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.sold-property-left {
    flex: 1 1 60%;
    padding-right: 35px;
}

/* Property Details */
.sold-property-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.sold-property-meta p {
    color: #555;
    margin-bottom: 10px;
}

.sold-property-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-top: 20px;
}

/* Call-to-Action Button */
.sold-property-cta {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 5px;
    transition: background 0.3s ease;
    margin-top: 20px;
}

.sold-property-cta:hover {
    background: #444;
}

/* Agent Contact */
.sold-property-contact h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.sold-property-contact p {
    font-size: 1.1rem;
    margin-bottom: 10px;
}
/* Gallery Section */
.sold-property-gallery {
    margin: 30px 0;
    width: 100%;
}

.sold-property-gallery .swiper-slide img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
 color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.swiper-pagination {
margin-top: 15px;
    text-align: center;
}
.sold-property-hero {
    width: 100vw; /* Full viewport width */
    overflow: hidden;
    position: relative;
    margin-bottom: 20px; /* Adjust spacing below the image if needed */
}

.sold-property-image {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.sold-property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
}

/* Responsive Design */
@media (max-width: 768px) {
    .sold-property-content .sold-property-row {
        flex-direction: column;
    }
    .sold-property-left, .sold-property-right {
        flex: 1 1 100%;
    }
}
.site-footer {
    color: #fff;
    padding: 0;
    text-align: center;
}

.footer-widgets-container {
    background-color: var(--footer-bg-color, #111);
}
.footer-widgets {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 100px;
    padding: 40px 0px;
    text-align: left;
}
.footer-widgets.columns-1 .footer-widget-column {
    flex: 0 0 100%; /* Full width for a single widget */
    max-width: 100%;
}

.footer-widgets.columns-2 .footer-widget-column {
    flex: 0 0 calc(50% - 20px); /* Half width minus gap for two widgets */
    max-width: calc(50% - 20px);
    text-align: left;
}

.footer-widgets.columns-3 .footer-widget-column {
    flex: 0 0 calc(33.333% - 20px); /* Third width minus gap for three widgets */
    max-width: calc(33.333% - 20px);
    text-align: left;
}

.footer-widget-column {
  display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.footer-widget-column h3.widget-title {
    font-size: 18px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
}

.footer-widget-column p, 
.footer-widget-column a {
    color: #ddd;
    font-size: 14px;
    line-height: 1.6;
}

.footer-bottom {
   text-align: center;
    padding: 15px 0;
    font-size: 14px;
    color: var(--footer-text-color, #fff);
}
@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.site-footer a {
    color: <?php echo esc_attr(get_theme_mod('footer_link_color', '#cccccc')); ?>;
    text-decoration: none;
}
.footer-widgets .footer-widget-column ul {
    list-style: none; /* Removes bullet points */
    margin: 0;
    padding: 0;
}

.footer-widgets .footer-widget-column ul li {
    margin-bottom: 8px; /* Adjust spacing between menu items */
}

.footer-widgets .footer-widget-column h3.widget-title {
    margin-bottom: 15px; /* Adds space below the title */
    font-size: 16px;
    font-weight: bold;
}
/* Section Styles */
.sold-properties-section {
    padding: 50px 20px;
    background-color: #f9f9f9; /* Optional */
}

.sold-properties-section .container {
    margin: 0 auto;
    padding: 0 15px;
}

/* Grid Styles */
.sold-properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
    gap: 20px; /* Spacing between the cards */
}

@media (max-width: 1024px) {
    .sold-properties-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 768px) {
    .sold-properties-grid {
        grid-template-columns: 1fr; /* 1 column on smaller screens */
    }
}

/* Card Styles */
.sold-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.sold-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.sold-card-image {
    position: relative;
}

.sold-card-image img {
    width: 100%;
    height: auto;
}

.sold-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ec2929!important;
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    font-weight: bold;
    padding: 5px 10px;
    z-index: 10;
    text-transform: uppercase;
    margin-top: 15px;
}

.sold-card-content {
    padding: 15px;
    text-align: center;
}

.sold-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.sold-card-price,
.sold-card-days {
    font-size: 14px;
    color: #555;
    margin: 5px 0;
}
.hero-section .filter-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Adjust spacing between buttons */
    margin-top: 20px;
}

.hero-section .filter-buttons button,
.hero-section .filter-buttons .button {
    background-color: #000; /* Elegant black background */
    color: #fff; /* Contrasting white text */
    padding: 12px 20px; /* Comfortable padding for a sleek look */
    font-size: 16px; /* Adjust font size for readability */
    font-weight: bold; /* Make text stand out */
    border: 2px solid #fff; /* Add a clean white border */
    border-radius: 30px; /* Rounded corners for a soft, modern feel */
    transition: all 0.3s ease; /* Smooth hover effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for a lifted effect */
}

.hero-section .filter-buttons button:hover,
.hero-section .filter-buttons .button:hover {
    background-color: #fff; /* Invert background on hover */
    color: #000; /* Change text color to black */
    border-color: #000; /* Change border color to black */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
    transform: translateY(-3px); /* Slight lift on hover */
}

.hero-section .filter-buttons button:active,
.hero-section .filter-buttons .button:active {
    transform: translateY(1px); /* Pressed effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow when pressed */
}
/* Search Page Container */
.search-page-container {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.search-page-title {
    font-size: 32px;
    margin-bottom: 30px;
    text-align: center;
    color: #333;
}

/* Search Results Grid */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Search Result Item */
.search-result-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-result-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.search-result-link {
    text-decoration: none;
    color: inherit;
}

/* Thumbnail */
.search-result-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #ddd;
}

/* Details */
.search-result-details {
    padding: 20px;
    text-align: left;
}

.search-result-title {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.search-result-title:hover {
    color: #007bff;
}

.search-result-price {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

.search-result-excerpt {
    font-size: 16px;
    color: #555;
}

/* Pagination */
.search-pagination {
    margin-top: 40px;
    text-align: center;
}

/* No Results */
.no-results-message {
    font-size: 18px;
    text-align: center;
    margin-top: 40px;
    color: #555;
}
.location-archive-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.location-title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.location-description {
    font-size: 16px;
    text-align: center;
    margin-bottom: 40px;
    color: #555;
}
 
/* Responsive Design */
@media (max-width: 1024px) {
    .property-cards-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
}

@media (max-width: 768px) {
    .property-cards-container {
        grid-template-columns: 1fr; /* 1 column for mobile */
    }
}
.property-page-title {
    font-size: 3rem;
    text-align: center;
}
.contact-details {
    display: flex;
    justify-content: center; /* Center the details horizontally */
    gap: 25px; /* Add spacing between items */
    flex-wrap: wrap; /* Ensure responsiveness on smaller screens */
    text-align: center;
    padding: 20px 0;
}

.contact-details p {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin: 0;
}

.contact-details i {
    margin-right: 10px;
    font-size: 20px;
    color: #d4ae36; /* Adjust color to your theme */
}
.contact-form form {
    max-width: 800px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 20px !important;
}
/* General Mobile Styles */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        gap: 15px; /* Add space between buttons */
    }

    /* Hero Search Bar */
    .hero-search-bar {
        flex-direction: column;
        gap: 10px;
    }

    .hero-search-bar input,
    .hero-search-bar select {
        width: 100%; /* Full-width inputs for smaller screens */
    }

    /* Featured Properties */
    .properties-grid {
        grid-template-columns: 1fr; /* Single-column layout */
        gap: 20px;
    }

    /* About Section */
    .about-section .site-width-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .about-text {
        order: 2; /* Move text below image on smaller screens */
    }

    .about-image img {
        width: 100%;
        height: auto;
    }

    /* Neighborhood Section */
    .neighborhood-cards-container {
        grid-template-columns: 1fr; /* Single-column layout */
        gap: 15px;
    }

    .neighborhood-card {
        flex-direction: column;
        height: auto; /* Adjust height for smaller screens */
    }

    /* Agents Section */
    .agents-container {
        flex-direction: column;
        gap: 20px;
    }

    .agent-photo img {
        max-width: 150px;
        margin: 0 auto;
    }

    .agent-info h3 {
        font-size: 20px;
    }

    /* Sold Properties */
    .sold-properties .properties-grid {
        grid-template-columns: 1fr; /* Single-column layout */
        gap: 15px;
    }
}

/* Fine-tune for extra small screens (max-width: 480px) */
@media (max-width: 480px) {
    .hero-search-bar {
        gap: 5px;
    }

    .hero-buttons {
        gap: 10px;
    }

    .about-text h2 {
        font-size: 24px;
    }

    .about-text p {
        font-size: 14px;
    }

    .about-image img {
        width: 100%;
    }

    .property-card h3 {
        font-size: 16px;
    }

    .property-card .details,
    .property-card .price {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    .hero-search-bar {
        flex-direction: column;
        gap: 10px;
    }
    .hero-search-bar input,
    .hero-search-bar select {
        width: 100%;
        font-size: 14px;
        padding: 10px;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    /* About Section */
    .about-section .site-width-container {
        flex-direction: column;
        text-align: center;
    }
    .about-image img {
        width: 100%;
        height: auto;
    }

    /* Neighborhood Section */
    .neighborhood-cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .neighborhood-card {
        height: auto;
    }

    /* Agents Section */
    .agents-container {
        flex-direction: column;
        gap: 15px;
    }
    .agent-photo img {
        max-width: 120px;
        margin: 0 auto;
    }
    .agent-info h3 {
        font-size: 16px;
    }

    /* Sold Properties */
    .sold-properties .properties-grid {
        grid-template-columns: 2fr;
        gap: 15px;
    }

    /* Footer */
    .footer-section {
        padding: 20px;
        text-align: left;
    }
    .footer-section .about,
    .footer-section .contact {
        margin-bottom: 20px;
    }
    .footer-widgets {
    gap: 50px;
}
}

@media (min-width: 768px) {
    .properties-grid {
    grid-template-columns: repeat(2, 1fr); 
    display: grid;
    grid-template-columns: 1fr; /* Single column for small screens */
    gap: 20px;
    display: grid;
    gap: 20px;
}
}
@media (max-width: 768px) {
 .properties-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 35px !important;
        grid-template-columns: repeat(3, 1fr); 
    }
.property-card {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.property-image img {
    width: 100%;
    height: auto;
}
.neighborhood-cards-container {
    display: grid;
    grid-template-columns: 1fr; /* Single column for small screens */
    gap: 15px;
    margin-top: 20px;
}
    .neighborhood-cards-container {
    grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
}


.neighborhood-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #ddd;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    text-align: center;
}
}
.sold-property-right {
    padding: 0 20px;
    border: 1px  #ddd;
    border-radius: 8px;
    text-align: left;
    flex: 1 1 30%;
    background: #fff;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.agent-contact-form {
    margin-top: 20px;
}
div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
    background-color: #111!important;
}

div.wpforms-container-full input, div.wpforms-container-full label, div.wpforms-container-full select, div.wpforms-container-full button, div.wpforms-container-full textarea {
    border: 1px transparent !important;
    border-bottom: 1px solid #aaa !important;
}
div.wpforms-container-full:not(:empty) {
    margin: 1px auto;
    background-color: #fff;
}
.wpforms-container .wpforms-form * {
    background: transparent !important;
}
.sold-property-page-form {
        background: transparent !important;
        border: 1px transparent !important;
        border-bottom: 1px solid #ddd;
}
.contact-form form button[type="submit"]:hover {
    background-color: #d4ae36 !important;
}
.hero-search-bar input, .hero-search-bar select {
    padding: 10px 15px!important;
    font-size: 15px !important;
    border: 1px solid transparent;
    border-radius: 3px !important;
    width: 200px !important;
}
.property-filter .filter-item select, .property-filter .filter-item button {
    font-size: 13px;
    border-radius: 0;
}
.site-container {
    margin: 0 auto; /* Center the container */
    padding: 20px 15px;
}

.content {
    padding: 20px 0; /* Add padding to the content area */
}

.page-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
}

.page-content {
    font-size: 1rem;
    line-height: 1.6;
}
.footer-social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.footer-social-links a {
    text-decoration: none;
    font-size: 1.5rem;
    color: #fff;
}

.footer-social-links a:hover {
    color: #ddd;
}

.property-hero {
    position: relative;
    width: 100%;
    height: 500px; /* Adjust to your desired height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.property-hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust overlay opacity if needed */
}

.property-hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
    text-align: center;
    padding: 20px;
}
@media (max-width: 768px) {
    .property-cards-container {
        grid-template-columns: 2fr !important;
    }
    .property-grid {
    grid-template-columns: repeat(2, 1fr);
}
}
/* Base Header Styling */
.site-header {
    position: fixed;
    left: 0;
    width: 100%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: none; /* No shadow initially */
    display: flex;
}

/* Scrolled Header */
.site-header.scrolled {
    background-color: rgba(0, 0, 0, 0.9); /* Darker background on scroll */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add shadow on scroll */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Default Transparent Header */
.site-header.transparent-header {
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled Header */
.site-header.scrolled-header {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional for shadow effect */
    background: #111!important;
}

/* Header Container */
.header-container {
    display: flex;
    justify-content: space-between;
    height: var(--header-height, 80px); /* Adjustable height */
    margin: 0 auto; /* Center the header container */
}

/* Logo */
.logo img {
    max-height: 100%; /* Fit logo within the header */
    transition: transform 0.3s ease;
}

/* Adjust logo size on scroll */
.site-header.scrolled .logo img {
    max-height: 40px; /* Reduce logo size when scrolled */
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    justify-content: flex-end;
    gap: 20px; /* Increase gap between menu items */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    list-style: none;
    position: relative;
}

.nav-menu li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 15px; /* Spacing for clickable area */
    transition: color 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}
/* Dropdown Container Styling */
.nav-menu li ul {
    display: none; /* Hide dropdown by default */
    position: absolute;
    top: 100%; /* Align directly below the parent */
    left: 0;
    background-color: #000000!important; /* Dark background */
    padding: 0; /* Remove extra padding around items */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Add subtle shadow */
    z-index: 999;
    min-width: 180px; /* Ensure proper dropdown width */
}

/* Individual Dropdown Item Styling */
.nav-menu li ul li {
    display: block;
    margin: 0; /* Remove default margins */
    padding: 10px 20px; /* Adjust item padding for a compact look */
    text-align: left;
}

/* Dropdown Links */
.nav-menu li ul li a {
    text-decoration: none;
    font-size: 12px; 
    line-height: 1.4; 
    font-weight: 400; /* Regular weight */
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Top-Level Menu Items */
.nav-menu > li > a {
    text-decoration: none;
    padding: 15px 10px; /* Adjust spacing for top-level items */
    text-transform: uppercase;
}

/* Dropdown Alignment */
.nav-menu li {
    position: relative;
}

.nav-menu li:hover ul {
    display: block; /* Show dropdown on hover */
}

/* Luxurious Effects */
.site-header .nav-menu a:hover {
    text-decoration: none;
}

.nav-menu li::after {
    content: ''; /* Removes the dot separator */
    color: #ffffff; /* Match link color */
    margin: 0 10px;
}

.nav-menu li:last-child::after {
    content: ''; /* Remove separator for the last item */
}
/* General Header Styling for Mobile */
@media (max-width: 768px) {
.nav-menu {
    display: none; /* Hidden by default for mobile */
    flex-direction: column;
    background-color: #ffffff; /* Change as per your design */
    position: fixed;
    top: 0;
    right: 0;
    width: 100%; /* Full-screen width */
    height: 100%; /* Full-screen height */
    padding: 20px;
    z-index: 1000;
    transform: translateX(100%); /* Hidden off-screen */
    transition: transform 0.3s ease-in-out; /* Smooth open/close */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Show the Mobile Menu */
.nav-menu.open {
    display: flex;
    transform: translateX(0); /* Bring the menu into view */
    margin-top: 100px;
}

/* Mobile Menu Links */
.nav-menu a {
    color: #000000; /* Default link color */
    text-decoration: none;
    font-size: 16px; /* Adjust as needed */
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

/* Active Link Style */
.nav-menu a:hover,
.nav-menu a:focus {
    font-weight: bold;
}

/* Dropdown Styles */
.nav-menu .menu-item-has-children {
    position: relative;
}

.nav-menu .menu-item-has-children.open > .sub-menu {
    display: block;
    max-height: 300px; /* Adjust as needed */
    overflow: auto;
    transition: max-height 0.3s ease-in-out;
}

.nav-menu .menu-item-has-children > .dropdown-toggle {
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.nav-menu .menu-item-has-children > .sub-menu {
    display: none;
    padding-left: 20px;
    margin-top: 10px;
    list-style: none;
}

/* Menu Toggle Button for Mobile */
.menu-toggle {
    display: block;
    position: relative;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 1100;
    margin-left: 150px;
}

.menu-toggle:focus {
    outline: none;
}

/* Close Button for Mobile Menu */
.nav-menu .close-menu {
    font-size: 24px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    text-align: right;
    margin-bottom: 20px;
}
}
/* Responsive Styles */
@media (min-width: 1024px) {
    .menu-toggle {
        display: none; /* Hide mobile menu toggle on larger screens */
    }

    .nav-menu {
        display: flex; /* Show regular navigation */
        flex-direction: row;
        position: static; /* Inline for desktop view */
        transform: none; /* Reset for desktop */
        background: none;
        box-shadow: none;
        height: auto;
        width: auto;
    }

    .nav-menu a {
        color: inherit; /* Adjust based on parent styles */
        padding: 0 15px;
        font-size: 14px; /* Adjust font size for desktop */
        border: none;
    }

    .nav-menu .menu-item-has-children > .sub-menu {
        display: none; /* Hide dropdowns by default on desktop */
        position: absolute;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px;
        top: 100%;
        left: 0;
    }

    .nav-menu .menu-item-has-children:hover > .sub-menu {
        display: block; /* Show dropdown on hover for desktop */
    }
}


/* Optional Padding for Transparent Header on Home */
.home.has-transparent-header {
    padding-top: 0; /* Remove padding for transparent header */
}

/* Custom Scroll Styles for Transparent Header */
.site-header.transparent-header.scrolled {
    background-color: rgba(0, 0, 0, 0.8); /* Background color after scroll */
    color: #ffffff; /* Ensure text remains readable */
}

/* Smooth Transition for Height and Padding */
.site-header.scrolled {
    height: 70px; /* Smaller height after scroll */
    padding: 10px 20px; /* Reduce padding */
    transition: height 0.3s ease, padding 0.3s ease;
}

/* Sticky Header Shadow */
.site-header.sticky {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.hero-cta-button.secondary {
    background-color: #fff !important;
    color: #111 !important;
    width: 146px !important;
    border: 1px transparent !important;
    height: 42px !important;
    line-height: 38px!important;
}
button, .btn {
    font-weight: 500;
    padding: 14px 35px;
}
.hero-cta-button {
    padding: 3px 28px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    border-radius: 0 !important;
    border: 1px solid #fff !important;
    line-height: 35px;
    text-transform: uppercase;
}
.agent-properties-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}
@media (max-width: 768px) {
    .properties-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .nav-menu {
        height: auto;
    }
        .nav-menu a {
        color: #000000 !important;
}
}
@media (max-width: 768px) {
    .gallery-grid {
        flex-direction: inline-block!important;
    }
      .gallery-grid {
    gap: 5px;
}
.gallery-thumbnails {
    gap: 5px;
    }
.gallery-grid {
    gap: 5px;
}
.property-description {
    margin-top: 0px;
}
/* General Styles */
.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: var(--header-background-color, black);
    transition: background-color 0.3s, height 0.3s;
}
.menu-toggle {
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: black;
    color: white;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.mobile-menu-overlay.open {
    display: flex;
}

.mobile-menu {
    text-align: center;
    list-style: none;
}

.mobile-menu li {
    margin: 15px 0;
}

/* Prevent Hover Icon in Dropdown */
nav .menu li:hover span {
    display: none;
}

/* Ensure logo and toggle remain visible */
.site-header.menu-opened-header {
    background-color: black;
}
/* Mobile-specific padding for hero content */
    .hero-cta-button {
    font-size: 12px !important;
    width: 160px;
    display: inline-block;
}
    .hero-buttons {
        flex-direction: row;
}
    .about-text {
        padding-left: 15px;
    }
   .site-header.scrolled-header {
    height: 75px !important;
    padding: 0;
    }
}
 /* Sell Page General Styles */
.sell-page {
    font-family: 'Montserrat', sans-serif;
    color: #333;
}

/* Hero Section */
.sell-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px;
    text-align: center;
    color: #fff;
}
.sell-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust overlay opacity as needed */
    z-index: 1;
}
.sell-hero .container {
    position: relative;
    z-index: 2;
}
.sell-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
}
.sell-description {
    font-size: 20px;
    font-weight: 400;
}

/* Why Choose Section */
.why-choose {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}
.why-choose h2 {
    font-size: 32px;
    margin-bottom: 30px;
}
.why-choose-list {
    list-style: none;
    padding: 0;
}
.why-choose-list li {
    font-size: 18px;
    margin-bottom: 15px;
}

/* Testimonials Section */
.testimonials {
    padding: 60px 20px;
    background-color: #fff;
    text-align: center;
}
.testimonials h2 {
    font-size: 32px;
    margin-bottom: 30px;
}
.testimonials-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.testimonial-item {
    max-width: 400px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.testimonial-item blockquote {
    font-style: italic;
    margin: 0;
}
.testimonial-item cite {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

/* Contact Section */
.contact-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}
.contact-section h2 {
    font-size: 32px;
    margin-bottom: 20px;
}
.contact-section p {
    font-size: 18px;
    margin-bottom: 30px;
}
/* Prevent scrolling when menu is open */
.no-scroll {
    overflow: hidden;
}
/* Mobile Menu Overlay Styles */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

/* Show the Overlay When Active */
.mobile-menu-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Header */
.mobile-menu-header {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 40px);
}

/* Mobile Logo */
.mobile-logo a img {
    max-height: 50px; /* Adjust as needed */
}

/* Mobile Navigation Menu Styles */
.mobile-nav .mobile-menu {
    list-style: none;
    padding: 0;
    margin-top: 100px; /* Space below header */
    text-align: center;
}

.mobile-nav .mobile-menu li {
    margin: 20px 0;
}

.mobile-nav .mobile-menu a {
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav .mobile-menu a:hover {
    color: #ddd;
}

/* Mobile Menu Toggle (Hamburger Icon) */
.menu-toggle {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    display: none;
    color: #333;
}

@media (max-width: 767px) {
    .menu-toggle {
        display: block;
    }

    .main-navigation {
        display: none;
    }
}
/* General Page Styling */
.buy-home-page {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Hero Section */
.buy-home-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 20px;
}

.buy-home-hero-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 10px;
}

.buy-home-hero-description {
    font-size: 18px;
}

/* Features Section */
.buy-home-features {
    padding: 50px 0;
    background-color: #f9f9f9;
    text-align: center;
}

.features-checklist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
}

.features-checklist .feature-item {
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.features-checklist .check-icon {
    font-size: 24px;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.buy-home-contact {
    padding: 50px 0;
    color: #fff; /* Default text color for light backgrounds */
}

.buy-home-contact .contact-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.buy-home-contact h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.buy-home-contact .contact-form {
    margin-top: 20px;
}

.buy-home-contact button:hover {
    background-color: #b78e2d;
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

[type="submit"] {
    background-color: #111;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form input[type="submit"]:hover {
    background-color: #005a87;
}


/* Testimonials Section */
.testimonials {
    padding: 50px 20px;
    text-align: center;
    background-color: #f1f1f1;
}

.testimonial-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.testimonial {
    flex: 1 1 calc(33.333% - 20px);
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.testimonial p {
    font-style: italic;
}

/* Mortgage Calculator Section */
.mortgage-calculator {
    padding: 50px 0;
}

.calculator-content {
    margin: 0 auto;
    text-align: center;
}

/* === Blog Page Styling === */

/* Layout Width */
.blog-page.boxed {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.blog-page.full-width {
    width: 100%;
    padding: 0;
}

/* Blog Hero Section */

.blog-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay for better text visibility */
    z-index: 1;
}

.blog-hero .container {
    position: relative;
    z-index: 2;
}

.blog-title {
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif; /* Example: Replace with desired font */
}

.blog-intro-description {
    font-size: 1.2em;
    color: #dddddd;
}

/* Posts Grid */
.posts-grid {
    display: grid;
    grid-gap: 30px;
}

.posts-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.posts-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Blog Post Card */
.blog-post {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.post-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-title {
    /* Font size is adjusted inline via style attribute in home.php */
    margin-bottom: 10px;
}

.post-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title a:hover {
    color: #d4ae36;
}

.post-meta {
    font-size: 0.9em;
    color: #777777;
    margin-bottom: 15px;
}

.post-excerpt {
    flex: 1;
    color: #555555;
    margin-bottom: 15px;
    display:none;
}

.read-more {
    align-self: flex-start;
    padding: 10px 20px;
    background-color: #d4ae36;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.read-more:hover {
    background-color: #005177;
}

/* Pagination */
.navigation.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.navigation.pagination a,
.navigation.pagination span {
    margin: 0 5px;
    padding: 8px 16px;
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.navigation.pagination a:hover {
    background-color: #d4ae36;
    color: #ffffff;
}

.navigation.pagination .current {
    background-color: #111;
    color: #d4ae36;
}
/* === Blog Hero Section Styling === */

/* Default Hero Image Styles */
.blog-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 55px 0;
    color: #ffffff;
    text-align: center;
    position: relative;
    transition: padding 0.3s ease;
    margin: 15px 20px;
}

/* Overlay for Hero Image */
.blog-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay for better text visibility */
    z-index: 1;
}

.blog-hero .container {
    position: relative;
    z-index: 2;
}

/* Blog Title Styling */
.blog-title {
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif; /* Replace with desired font */
}

/* Intro Description Styling */
.blog-intro-description {
    font-size: 1.2em;
    color: #dddddd;
}

/* Adjustments When Hero Image is Hidden */
.blog-hero.no-hero-image {
    background-image: none;
    padding: 60px 0; /* Reduced padding when no image */
}

/* Optional: Remove Overlay When No Hero Image */
.blog-hero.no-hero-image::before {
    display: none;
}

/* === Responsive Design === */

/* Tablet: Adjust Columns */
@media (max-width: 992px) {
    .posts-grid.columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: Single Column */
@media (max-width: 600px) {
    .posts-grid.columns-2,
    .posts-grid.columns-3 {
        grid-template-columns: 1fr;
    }

    .blog-hero {
        padding: 60px 0;
    }

    .blog-title {
        /* Font size is already handled inline; adjust here if needed */
    }

    .post-content {
        padding: 15px;
    }
}

/* === Featured Image as Hero === */
.post-hero-image {
  width: 100%;
  height: 400px;          /* Fixed height */
  overflow: hidden;       /* Hide any overflow if the image is larger */
  position: relative;     /* For certain layout scenarios, optional */
}

.post-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;   /* For older Opera */
  object-fit: cover;      /* Crop/cover the container */
  object-position: center;/* Center the image within the container */
}


/* === Post Content and Sidebar Layout === */
.post-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

/* Main Content */
.post-content {
    flex: 3;
    min-width: 0;
}

.post-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
    text-align: left;
}

.post-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
}

.post-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px;
}

/* Sidebar */
post-sidebar {
    flex: 1;
    max-width: 350px;
    background: #fff;
    padding: 5px 30px;
}

/* Widget Styles */
.post-sidebar .widget {
    margin-bottom: 20px;
}

.post-sidebar .widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
}

.post-sidebar .widget ul {
    list-style: none;
    padding: 0;
}

.post-sidebar .widget ul li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.post-sidebar .widget ul li img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 5px;
}

.post-sidebar .widget ul li a {
    font-size: 0.95rem;
    color: #555;
    text-decoration: none;
    line-height: 1.2;
}

.post-sidebar .widget ul li a:hover {
    color: #c91eac; /* Accent color */
}

/* Adjust Spacing for Smaller Screens */
@media (max-width: 768px) {
    .post-content-wrapper {
        flex-direction: column;
    }

    .post-sidebar {
        max-width: 100%;
    }
}
.post-content {
    flex: 3; /* Take up more space */
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.post-sidebar {
    flex: 1; /* Sidebar width */
    background: #fff;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Mortgage Calculator Section */
.mortgage-calculator {
    padding: 40px 0px;
}

.mortgage-calculator h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

/* Grid Layout */
.mortgage-calculator-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
}

/* Calculator Form */
.calculator-form-wrapper {
    flex: 1 1 45%;
    max-width: 45%;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Additional Info Section */
.calculator-info-wrapper {
    flex: 1 1 45%;
    max-width: 45%;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.calculator-info-wrapper h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #d4ae36;
}

.calculator-info-wrapper p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

.calculator-info-wrapper ul {
    margin-top: 15px;
    padding-left: 20px;
    list-style: disc;
    color: #333;
}

    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.4;
}
.buy-home-contact button {
    padding: 10px 20px;
    background-color: #d4ae36; /* Gold button background */
    color: #fff; /* Button text color */
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.buy-home-contact button:hover {
    background-color: #b78e2d; /* Darker gold for hover effect */
}

/* Adjust form container for responsiveness */
.buy-home-contact .contact-form {
    max-width: 600px; /* Limit width of form */
    margin: 0 auto; /* Center form */
    text-align: left; /* Align text */
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .buy-home-contact input,
    .buy-home-contact textarea,
    .buy-home-contact button {
        font-size: 14px; /* Slightly smaller text size */
    }
}
.nav-tab-wrapper {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.nav-tab {
    padding: 10px 15px;
    text-decoration: none;
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ccc;
    border-bottom: none;
    cursor: pointer;
}

.nav-tab-active {
    background-color: #111;
    color: #fff;
    font-weight: bold;
}

.tab-content {
    display: none; /* Hide all tab content by default */
}

.tab-content.active {
    display: block; /* Show active tab content */
}
.breadcrumb {
    font-size: 14px;
    margin: 15px 0;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    display: inline-block;
}

.breadcrumb a {
    color: #d4ae36;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 5px;
    color: #555;
}
.breadcrumb-wrapper {
    margin: 10px 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}
/* General container padding adjustments for mobile */
@media (max-width: 768px) {
    .buy-home-page .container {
        padding: 15px;
    }

    /* Adjust hero section */
    .buy-home-intro {
        background-size: cover;
        background-position: center;
        padding: 50px 15px;
        text-align: center;
    }
    /* Features checklist */
    .buy-home-features ul {
        padding-left: 20px;
    }

    .buy-home-features li {
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* Contact section adjustments */
    .buy-home-contact {
        background-size: cover;
        background-position: center;
        padding: 40px 15px;
    }
    .buy-home-contact h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .buy-home-contact .contact-form {
        font-size: 16px;
    }

    /* Testimonials adjustments */
    .testimonial-wrapper {
        flex-direction: column;
    }

    .testimonial {
        flex: 1 1 100%;
        margin-bottom: 15px;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .calculator-info-wrapper,
    .calculator-form-wrapper {
        flex: 1 1 100%; /* Full width */
        max-width: 100%;
        margin-bottom: 15px; /* Add spacing between stacked elements */
    }

    .mortgage-calculator .container {
        flex-direction: column;
        gap: 15px;
    }
}

/* Adjustments for very small screens (phones) */
@media (max-width: 480px) {
    .calculator-info-wrapper,
    .calculator-form-wrapper {
        padding: 15px; /* Reduce padding for smaller screens */
    }

    .mortgage-calculator h2 {
        text-align: center; 
    }
}
/* Single-column layout for smaller screens */
@media (max-width: 768px) {
    .about-new-grid {
        flex-direction: column;
        gap: 15px; /* Adjust gap for stacked layout */
    }

    .about-new-grid .about-new-text,
    .about-new-grid .about-new-image {
        flex: 1 1 100%; /* Full width for each item */
        max-width: 100%;
    }

    .about-new-grid .about-new-text {
        text-align: center; /* Center-align text on smaller screens */
        font-size: 16px; /* Slightly smaller font size */
    }

    .about-new-grid .about-new-image img {
        max-width: 90%; /* Slight margin for smaller screens */
        margin: 0 auto; /* Center the image */
    }
}

/* Additional adjustments for very small screens */
@media (max-width: 480px) {
    .about-newgrid .about-new-text {
        font-size: 15px; /* Smaller font for readability */
        line-height: 1.4; /* Adjust line height */
        padding: 0 10px; /* Add padding for text */
    }

    .about-new-grid .about-new-image img {
        max-width: 100%; /* Ensure image uses full width */
    }
}

/* About Content Section Styling */
.about-new-content {
    padding: 0px; /* General padding for content section */
    border-radius: 8px; /* Rounded corners */
}

/* About Section Title */
.about-new-content h2 {
    color: #222; /* Darker text for the title */
    text-align: left;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Responsive title adjustments */
@media (max-width: 768px) {
    .about-new-content h2 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .about-new-content h2 {
        font-size: 18px;
        padding: 0 10px; /* Ensure spacing on smaller screens */
    }
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .contact-hero {
        height: 400px;
    }
}



/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .contact-details {
        flex-direction: column;
        gap: 15px;
    }
}
/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .contact-form input,
    .contact-form textarea {
        max-width: 100%;
        width: 100%;
    }
}
.buy-home-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 600px; /* Default height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
}

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

.buy-home-hero h1,
.buy-home-hero p {
    position: relative;
    z-index: 2;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .buy-home-hero {
        height: 400px; /* Reduce height on smaller screens */
    }
}
.read-more {
    display: none;
}
.nav-menu .menu-item-has-children > .sub-menu .sub-menu {
            left: 200px;
    }
    /* =============== Archive Property Responsive Grid =============== */
.property-filter .filter-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* Flexible width for items */
    min-width: 170px; /* Minimum width for items */
max-width: calc(20% - 10px); /* Ensure max-width to fit 5 items in one row */
}
.property-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Ensures vertical alignment */
    gap: 15px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.property-filter .filter-item label {
    font-size: 0.85rem; /* Smaller label font size */
    margin-bottom: 5px; /* Space below the label */
    color: #333; /* Neutral label color */
}
.property-filter .filter-item select {
    font-size: 0.95rem;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    height: 42px; /* Ensures all elements have the same height */
    display: flex;
    font-size: 14px;
    align-items: center; /* Aligns text within */
    line-height: 1.5; /* Centers the text vertically */
    padding: 0 10px; /* Adds padding inside the select box */
    border-radius: 5px; /* Makes the edges rounded */
    box-sizing: border-box; /* Includes padding and border in height */
}
.property-filter .filter-item button {
    background-color: #d4ae36;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    height: 42px; /* Matches the height of select elements */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    border-radius: 5px; /* Makes the edges rounded */
}
.property-filter .filter-item button:hover {
    background-color: #111; /* Darker button background on hover */
}
.sold-properties .properties-grid {
  display: grid;
  grid-gap: 20px;
  margin-top: 30px;
  /* 3 columns on desktop */
  grid-template-columns: repeat(3, 1fr);
}
.featured-properties .properties-grid {
  display: grid;
  grid-gap: 20px;
  margin-top: 30px;
  /* 3 columns on desktop */
  grid-template-columns: repeat(3, 1fr);
}

/* The main grid */
.property-grid {
  display: grid;
  grid-gap: 20px;
  margin-top: 20px;
  /* 3 columns on desktop */
  grid-template-columns: repeat(3, 1fr);
}

.property-card {
  background: #fff;
  transition: transform 0.2s, box-shadow 0.3s;
    margin: 15px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    width: 100%; /* Adjusts card width for responsiveness */
    max-width: 350px; /* Maximum width for each card */
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    flex-grow: 1; /* Allow cards to expand */
    max-width: 100%; /* Prevent overflow */
    margin-left: 0px;
}

.property-card:hover {
    transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.property-image img {
  width: 100%;
  height: auto;
  display: block;
    height: 200px;
    object-fit: cover;
}
.property-image {
     width: 100%;
  height: auto;
  display: block;
    height: 200px;
    object-fit: cover;
}
.agent-page-container {
    max-width: 1200px;
}
.property-info {
  padding: 10px 15px;
  text-align: left;
}
.property-info h3 {
  font-size: 20px;
  margin-bottom: 8px;
  line-height: 25px;
}
.property-info .price {
  color: #222;
  font-weight: bold;
  margin-bottom: 5px;
}
.property-info .details {
  font-size: 14px;
  color: #545455;
}

/* ========== Responsive Breakpoints ========== */
/* Medium screens (e.g., tablets): show 2 columns */
@media (max-width: 992px) {
  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 992px) {
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 992px) {
.featured-properties .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 992px) {
.sold-properties .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Small screens (mobile): show 1 column */
@media (max-width: 600px) {
  .property-grid {
    grid-template-columns: 1fr;
  }
.sold-properties .properties-grid {
    grid-template-columns: 1fr;
  }
  .agent-properties-grid .property-grid {
   grid-template-columns: 1fr;
  }
 .featured-properties .properties-grid {
    grid-template-columns: 1fr;
  }
  .property-filter .filter-row {
    display: block;
  }
  .filter-item {
    margin-bottom: 10px;
  }
}
.property-image img {
  transition: transform 0.3s;
}
.property-card:hover .property-image img {
  transform: scale(1.03);
}
@media (max-width: 600px) {
.container {
padding: 0 5px!important;
}
}
@media (max-width: 600px) {
.site-header {
    margin-top: 0px;
    padding-top: 55px;
}
}
@media (max-width: 600px) {
.menu-toggle {
    color: #fff!important;
}
}
.close-menu {
    position: absolute;
    top: -5px!important;
    right: 5px!important;
    font-size: 35px!important;
}

/* Style the comment form container */
.comment-respond {
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 20px;
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    margin-top: 30px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Style the text area */
.comment-form-comment textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style the submit button */
.form-submit input[type="submit"] {
    background-color: #111; /* Matches the footer or theme color */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-submit input[type="submit"]:hover {
    background-color: #333; /* Darker hover effect */
}

/* Add spacing between form fields */
.comment-form p {
    margin-bottom: 15px;
}

/* Style the comment form title */
.comment-reply-title {
    font-size: 20px;
    font-weight: bold;
    color: #111; /* Matches the theme */
    margin-bottom: 15px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}
@media (max-width: 768px) {
    .comment-form-comment textarea {
        font-size: 14px;
        padding: 10px;
    }

    .form-submit input[type="submit"] {
        font-size: 14px;
        padding: 8px 16px;
    }
}
.post-sidebar {
    height: fit-content;
    display: block;
}
.reset-filters {
    text-decoration: none;
    color: #fff;
    background-color: #333;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    display: inline-block;
    margin-top: -7px;
}

.reset-filters:hover {
    background-color: #d4ae36;
}
@media (max-width: 768px) {
 .featured-properties h2 {
        text-align: center;
    }
}
.contact-hero h1 {
    margin: 0; /* Remove any unwanted margin */
    padding: 10px 20px; /* Add internal padding for better readability */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Optional: Add subtle text shadow */
}
@media (max-width: 768px) {
    .contact-details {
        flex-direction: column; /* Stack the details vertically */
        text-align: center;
    }

    .contact-details div {
        max-width: 100%; /* Allow full-width on smaller screens */
        margin-bottom: 20px; /* Add spacing between blocks */
    }

    .contact-form {
        padding: 20px; /* Reduce padding for smaller screens */
    }

    .
@property-archive-container {
    width: 98%;
    margin: 20px auto;
    padding-right: 30px;
}
}
@media (max-width: 768px) {
.property-left {
    padding: 0 20px;
}
}
.property-description h2 {
    margin-bottom: 10px;
    font-size: 2rem !important;
}
@media (max-width: 768px) {
    section {
        padding: 10px 0px;
    }
}
@media (max-width: 768px) {
    h2 {
        font-size: 2rem;
    }
}
@media (max-width: 768px) {
    .gallery-grid {
        flex-direction: row;
    }
}
@media (max-width: 768px) {
.property-card {
    border: 1px solid #aaa;
    padding: 0;
}
.property-image img {
    height: 165px;
}
.property-price {
    font-size: 20px;
    font-weight: 400;
}
}
.footer-widgets {
    display: flex; /* Use Flexbox for alignment */
    justify-content: space-between; /* Distribute columns evenly */
    gap: 20px; /* Add spacing between columns */
    flex-wrap: nowrap; /* Prevent wrapping on larger screens */
}

.footer-widget-column:first-child {
    flex: 0 0 40%; /* First column takes 40% width */
            padding-right: 10px;    }
}

.footer-widget-column:not(:first-child) {
    flex: 0 0 20%; /* Other columns take 20% width each */
}

/* Mobile Layout */
@media (max-width: 768px) {
    .footer-widgets {
        display: grid; /* Switch to CSS Grid for better control */
        grid-template-columns: 1fr; /* First column full width */
        gap: 20px; /* Adjust spacing between items */
    }

    /* First column spans full width */
    .footer-widget-column:first-child {
        grid-column: span 2; /* Span across the entire row */
}
    /* Other columns display in two columns */
    .footer-widgets > .footer-widget-column:not(:first-child) {
        grid-column: span 1; /* Each occupies half the row */
        text-align: left; /* Optional: Center align text for smaller screens */
    }

    /* Ensure good spacing for mobile layout */
    .footer-widgets > .footer-widget-column p,
    .footer-widgets > .footer-widget-column ul {
        margin: 0 auto;
    }
}
.footer-widgets {
    max-width: 1320px;
}
.footer-bottom {
    padding: 1px 0;
    font-size: 14px;
    border-top: 1px solid #1a1a1a;
}
.about-new-content .container {
    text-align: justify;
    padding: 100px 5px;
}
@media (max-width: 768px) {
    .property-title {
       font-size: 28px !important;
    line-height: 35px;
        padding-bottom: 10px;
        font-weight: 500;
    }
}
@media (max-width: 768px) {
.view-all-overlay {
    font-size: 12px;
    text-align: center;
}
}
/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
    .meta-icons-grid .meta-item {
    }
}
.meta-item {
    font-size: 20px;
}
@media (max-width: 768px) {
.meta-icons-grid {
    display: flex;
}
.meta-item {
    font-size: 15px;
}
}
@media screen and (max-width: 768px) {
    footer .about-text {
        padding-left: 0px;
    }
}
@media (max-width: 768px) {
    .footer-widgets {
        text-align: left;
    }
}
.site-footer a:hover {
    color: var(--secondary-color);
}
.hero-cta-button:hover {
  color: var(--secondary-color);
}
.neighborhood-card .view-properties-button:hover {
      color: var(--secondary-color);
      background: transparent;
}
/* custom.css */

/* Style for the 'Featured' Badge */
.featured-badge {
    background-color: #ff9800;
    color: #fff;
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight: bold;
    border-radius: 3px;
}

.property-item.featured {
    border: 2px solid #ff9800;
    position: relative;
}

/* Style for Gallery Images */
#property-images-list li {
    border: 1px solid #ddd;
    padding: 5px;
    position: relative;
}

#property-images-list li .remove-property-image {
    background: #ff4d4d;
    border: none;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    top: -10px;
    right: -10px;
}
/* Show More Button Styling */
.show-more-neighborhoods {
    text-align: center;
    margin-top: 30px;
}

.show-more-button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #000;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.show-more-button:hover {
    background-color: #444;
    transform: translateY(-3px);
}
/* Leaflet Map Styling */
#property-map {
    height: 400px;
    width: 100%;
    margin-top: 20px;
}

@media (max-width: 768px) {
    #property-map {
        height: 300px;
    }
}
@media (max-width: 768px) {
.sold-listings-page {
    padding: 20px 30px 0 0px;
}
}
@media (max-width: 768px) {
    .property-cards-container {
        grid-template-columns: 2fr !important;
        padding: 0px;
}
}
.about-hero-section {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.about-hero-overlay {
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.about-new-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.about-new-text {
    flex: 1;
    max-width: 60%;
    line-height: 1.6;
    padding-right: 45px;
}

.about-new-image {
    flex: 1;
    max-width: 40%;
}

.about-new-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
footer .about-new-text {
    max-width: 100%;
    padding: 0px;
}
.property-grid {
    margin-left: -12px;
}
/* Mobile Styling */
@media (max-width: 768px) {
    .property-filter .filter-row {
        display: flex;
        flex-wrap: wrap;
        flex-direction: initial;
    }
.property-filter {
    gap: 0px;
}
}
@media (max-width: 768px) {
.hero-search-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
}
.blog-description {
    color: #fff !important;
}

@media (max-width: 768px) {
 .neighborhood-cards-container {
        height: 450px;
        margin-top: -39px;
    }
.neighborhood-section {
    padding: 15px 20px;
    padding: 0;
}
}
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

@media (max-width: 768px) {
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .properties-grid {
    grid-template-columns: 1fr;
  }
}
.menu-toggle {
  /* Remove any default background */
  background: none;
  border: none;
}

/* Also override hover or focus */
.menu-toggle:hover,
.menu-toggle:focus {
  background: transparent; 
  outline: none; 
}
.close-menu {
  background: none;
  border: none;
  color: #919191;
}

.close-menu:hover,
.close-menu:focus {
  background: transparent;
  outline: none; /* if you want to remove focus outlines */
}
@media (max-width: 768px) {
    .hero-content h1 {
    font-size: 40px !important;
  }
}
@media (max-width: 1023px) {
  h1 {
    font-size: 45px !important;
  }
}
@media (max-width: 768px) {
  h2 {
    font-size: 2rem !important;
  }
}
@media (max-width: 768px) {
  .hero-content p {
    font-size: 17px !important;
  }
}
@media (max-width: 768px) {
  .two-col-container {
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .property-grid {
    padding: 0 13px 0 25px;
  }
}
@media (max-width: 768px) {
  .two-col-section {
    height: auto !important; 
    flex-direction: column; 
  }
}
@media (max-width: 768px) {
  .sell-two-col-section {
    height: auto !important;      
    flex-direction: column;       
    justify-content: flex-start;  
    text-align: left;             
  }

  .two-col-container {
    flex-direction: column;       /* instead of side-by-side columns */
    gap: 10px;                    /* smaller vertical gap if you like */
    align-items: flex-start;      /* or center, depending on design */
  }
}
 .featured-properties h2 {
margin-top: 60px;
}
/* In style.css or a custom CSS file: */
@media (max-width: 768px) {
    .contact-hero {
        height: auto !important;
    }
    .contact-hero .hero-title-overlay {
        height: 100% !important; /* If your overlay also needs to fill the auto height */
    }
}
@media (max-width: 768px) {
  h2 {
    font-size: 28px !important;
  }
}
@media (max-width: 768px) {
  .property-description h2 {
    margin-bottom: 10px;
    font-size: 28px !important;
  }
}
/* allow the two items to wrap */
.sell-two-col > div {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

/* on small screens, force a column layout */
@media (max-width: 768px) {
  .sell-two-col > div {
    flex-direction: column;
  }
  /* make each child take full width */
  .sell-two-col > div > div {
    flex: 1 1 100%;
  }
}
@media (max-width: 768px) {
  .sell-why,
  .sell-two-col {
    /* “auto” will grow to fit content + padding */
    height: auto !important;
    min-height: 400px;    /* tweak this */
    padding: 60px 20px !important;
  }
}
@media (max-width: 768px) {
  .sell-hero {
    /* let it expand to fit */
    height: auto !important;
    /* add breathing room */
    padding: 40px 20px !important;
  }
  .sell-hero h1 {
    /* more legible on phone */
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .sell-hero p {
    font-size: 16px !important;
    margin-top: 1em !important;
  }
}
@media screen and (max-width: 768px) {
    /* Hero Section */
    .hero-section {
    padding-top: 140px !important;
	height: 600px !important;
    }
    }
    
    @media (max-width: 768px) {
    .footer-widgets {
    text-align: left !important;
	display: block
    flex-wrap: wrap!important;
    padding: 40px 15px;
    }
}

@media (max-width: 768px) {
    .property-hero {
    padding:0px;
	height: 592px !important
    }
}
.about-hero-overlay {
		width: 82%;
		 height: 75%;
    background-color: rgb(8 191 255 / 18%);
    backdrop-filter: blur(calc(35px * .5));
    margin-top: 80px;
    border-radius: 30px;
}
.location-archive-container {
    margin-top: 75px;
}