/* Sticky transparent header */
#masthead.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
background: transparent;
transition: background 0.3s ease;
}
/* Overlay appears only while scrolling + hover */
body.has-scrolled #masthead.site-header:hover {
background: rgba(0,0,0,0.25);
}
/* ============================================================
PROPERTY DETAILS PAGE - Corrected CSS v2
============================================================ */
/* === FIX ELEMENTOR e-con height collapse === */
/* Critical: Elementor sets e-con to height: 2px with overflow: hidden when no flex sizing */
.elementor-659 .elementor-element-739fad6,
.elementor-659 .elementor-element-739fad6 > .e-con {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding: 0 !important;
}
/* === SECTION 1: HERO === */
.elementor-659 .elementor-element-1d68847 {
background-color: #0f172a !important;
padding: 80px 40px 40px !important;
min-height: 180px !important;
}
.elementor-659 .elementor-element-1d68847 .elementor-heading-title {
color: #ffffff !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* Address subtitle (second widget in hero) */
.elementor-659 .elementor-element-1d68847 > .e-con:last-child .elementor-heading-title,
.elementor-659 .elementor-element-1d68847 .elementor-widget:nth-child(2) .elementor-heading-title {
color: #94a3b8 !important;
font-size: 16px !important;
font-weight: 400 !important;
margin-top: 8px !important;
}
/* === SECTION 2: COVER PHOTO (739fad6) === */
/* The e-con container is collapsing to 2px - use position trick */
.elementor-659 .elementor-element-739fad6 {
height: 480px !important;
min-height: 480px !important;
overflow: hidden !important;
padding: 0 !important;
position: relative !important;
}
.elementor-659 .elementor-element-739fad6 .elementor-widget-image {
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
line-height: 0 !important;
}
.elementor-659 .elementor-element-739fad6 .elementor-widget-container {
height: 100% !important;
line-height: 0 !important;
}
.elementor-659 .elementor-element-739fad6 img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
/* === SECTION 3: STATS STRIP (a78376d) ===
Structure: a78376d > 6x .e-con (direct children, NO e-con-inner)
*/
.elementor-659 .elementor-element-a78376d {
background-color: #f8fafc !important;
border-bottom: 1px solid #e2e8f0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0 !important;
overflow: hidden !important;
}
.elementor-659 .elementor-element-a78376d > .e-con {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
border-right: 1px solid #e2e8f0 !important;
padding: 18px 10px !important;
text-align: center !important;
background: #f8fafc !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.elementor-659 .elementor-element-a78376d > .e-con:last-child {
border-right: none !important;
}
/* Stat value (first heading = large number/text) */
.elementor-659 .elementor-element-a78376d > .e-con .elementor-widget:first-child .elementor-heading-title {
font-size: 20px !important;
font-weight: 700 !important;
color: #0f172a !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* Stat label (second heading = label like BEDROOMS) */
.elementor-659 .elementor-element-a78376d > .e-con .elementor-widget:last-child .elementor-heading-title {
font-size: 10px !important;
font-weight: 600 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
}
/* === SECTION 4: GALLERY (76c7537) ===
Structure: 76c7537 > .e-con-inner > [heading, divider, gallery-grid-container]
gallery-grid-container > 5x .e-con (flat list of image boxes)
*/
.elementor-659 .elementor-element-76c7537 {
background: #fff !important;
padding: 40px !important;
}
.elementor-659 .elementor-element-76c7537 > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
font-size: 24px !important;
font-weight: 700 !important;
color: #0f172a !important;
text-transform: none !important;
}
/* The gallery grid container (3rd child = rh-gallery-grid class) */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid {
display: grid !important;
grid-template-columns: 55% calc(45% - 8px) !important;
grid-template-rows: 240px 240px !important;
gap: 8px !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}
/* First image (large, spans 2 rows) */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
height: auto !important;
overflow: hidden !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) img {
height: 488px !important;
}
/* Images 2-5 (right column, 2x2 grid) */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(2),
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(3),
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(4),
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(5) {
grid-column: 2 !important;
height: auto !important;
overflow: hidden !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(2) { grid-row: 1 !important; }
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(3) { grid-row: 2 !important; }
/* Images 4 and 5 can't fit in 2x1 - make them sub-grid in row 1 and 2 */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(4) {
display: none !important; /* Hide to simplify layout - show only 1 large + 2 right */
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(5) {
display: none !important;
}
/* All gallery images */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid img {
width: 100% !important;
height: 240px !important;
object-fit: cover !important;
display: block !important;
border-radius: 8px !important;
}
/* Override for first (large) image */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) img {
height: 488px !important;
border-radius: 8px !important;
}
/* === SECTION 5: ABOUT + DETAILS (ae81477) ===
Structure: ae81477 > .e-con-inner > [left-col, right-col]
*/
.elementor-659 .elementor-element-ae81477 {
background: #ffffff !important;
padding: 40px !important;
border-top: 1px solid #e2e8f0 !important;
}
.elementor-659 .elementor-element-ae81477 > .e-con-inner {
display: flex !important;
flex-direction: row !important;
gap: 40px !important;
align-items: flex-start !important;
}
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:first-child {
flex: 0 0 58% !important;
max-width: 58% !important;
}
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:last-child {
flex: 1 1 0 !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 20px !important;
}
.elementor-659 .elementor-element-ae81477 .elementor-heading-title {
font-size: 20px !important;
font-weight: 700 !important;
color: #0f172a !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.elementor-659 .elementor-element-ae81477 .elementor-widget-text-editor,
.elementor-659 .elementor-element-ae81477 .elementor-widget-text-editor p {
font-size: 15px !important;
line-height: 1.7 !important;
color: #475569 !important;
}
/* Property detail rows in right column */
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:last-child > .e-con {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
border-bottom: 1px solid #e2e8f0 !important;
padding: 10px 0 !important;
gap: 8px !important;
}
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:last-child > .e-con:last-child {
border-bottom: none !important;
}
/* Label (left) and value (right) in detail rows */
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:last-child > .e-con > .e-con:first-child .elementor-heading-title {
font-size: 13px !important;
font-weight: 500 !important;
color: #64748b !important;
text-align: left !important;
}
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:last-child > .e-con > .e-con:last-child .elementor-heading-title {
font-size: 13px !important;
font-weight: 600 !important;
color: #0f172a !important;
text-align: right !important;
}
/* === SECTION 6: KEY AMENITIES (015ac08) === */
.elementor-659 .elementor-element-015ac08 {
background: #f8fafc !important;
padding: 40px !important;
border-top: 1px solid #e2e8f0 !important;
}
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
font-size: 24px !important;
font-weight: 700 !important;
color: #0f172a !important;
text-transform: none !important;
margin-bottom: 4px !important;
}
/* Grid wrapper containing 8 amenity cards */
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child {
width: 100% !important;
}
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con-inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 12px !important;
width: 100% !important;
}
/* Amenity card */
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con-inner > .e-con {
flex: 0 0 calc(25% - 9px) !important;
max-width: calc(25% - 9px) !important;
background: #fff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 20px 16px !important;
text-align: center !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
/* Emoji icon (first widget in card) */
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con-inner > .e-con .elementor-widget:first-child .elementor-heading-title {
font-size: 28px !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 6px !important;
}
/* Amenity name text */
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con-inner > .e-con .elementor-widget:last-child .elementor-heading-title {
font-size: 13px !important;
font-weight: 600 !important;
color: #334155 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* === SECTION 7: LOCATION (7a06f9e) === */
.elementor-659 .elementor-element-7a06f9e {
background: #fff !important;
padding: 40px !important;
border-top: 1px solid #e2e8f0 !important;
}
.elementor-659 .elementor-element-7a06f9e .elementor-heading-title {
font-size: 24px !important;
font-weight: 700 !important;
color: #0f172a !important;
text-transform: none !important;
}
.elementor-659 .elementor-element-7a06f9e .elementor-widget-heading:nth-child(3) .elementor-heading-title {
font-size: 15px !important;
font-weight: 400 !important;
color: #64748b !important;
}
/* ===== MOBILE ===== */
@media (max-width: 767px) {
.elementor-659 .elementor-element-1d68847 {
padding: 60px 20px 28px !important;
min-height: 140px !important;
}
.elementor-659 .elementor-element-1d68847 .elementor-heading-title { font-size: 22px !important; }
.elementor-659 .elementor-element-739fad6 { height: 250px !important; min-height: 250px !important; }
.elementor-659 .elementor-element-a78376d { flex-wrap: wrap !important; }
.elementor-659 .elementor-element-a78376d > .e-con {
flex: 0 0 calc(33.33% - 1px) !important;
border-bottom: 1px solid #e2e8f0 !important;
}
.elementor-659 .elementor-element-76c7537 { padding: 24px 16px !important; }
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) { grid-row: 1 !important; }
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(3) { grid-column: 1 !important; grid-row: 3 !important; }
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(4),
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(5) { display: none !important; }
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid img { height: 200px !important; }
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) img { height: 200px !important; }
.elementor-659 .elementor-element-ae81477 { padding: 24px 16px !important; }
.elementor-659 .elementor-element-ae81477 > .e-con-inner { flex-direction: column !important; }
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:first-child,
.elementor-659 .elementor-element-ae81477 > .e-con-inner > .e-con:last-child {
flex: 0 0 100% !important; max-width: 100% !important;
}
.elementor-659 .elementor-element-015ac08 { padding: 24px 16px !important; }
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con-inner > .e-con {
flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important;
}
.elementor-659 .elementor-element-7a06f9e { padding: 24px 16px !important; }
}
/* ===== TABLET ===== */
@media (max-width: 1024px) and (min-width: 768px) {
.elementor-659 .elementor-element-a78376d { flex-wrap: wrap !important; }
.elementor-659 .elementor-element-a78376d > .e-con { flex: 0 0 calc(33.33% - 1px) !important; }
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con-inner > .e-con {
flex: 0 0 calc(33.33% - 8px) !important; max-width: calc(33.33% - 8px) !important;
}
}
/* ============================================================
CRITICAL FIXES v3 - Fix Elementor widget height collapse
============================================================ */
/* Fix: All elementor widgets inside template 659 have height: 2px; overflow: hidden
from Elementor base CSS when created via $e.run() with empty IDs.
We need to override this for all sections. */
/* === HERO WIDGET FIX === */
.elementor-659 .elementor-element-1d68847 .elementor-widget {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
.elementor-659 .elementor-element-1d68847 .elementor-widget-container {
height: auto !important;
overflow: visible !important;
}
/* === GALLERY WIDGET HEADING/DIVIDER FIX === */
.elementor-659 .elementor-element-76c7537 .elementor-widget {
height: auto !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
.elementor-659 .elementor-element-76c7537 .elementor-widget-container {
height: auto !important;
overflow: visible !important;
}
/* === STATS STRIP WIDGET FIX === */
.elementor-659 .elementor-element-a78376d .elementor-widget {
height: auto !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
.elementor-659 .elementor-element-a78376d .elementor-widget-container {
height: auto !important;
overflow: visible !important;
}
/* === ABOUT+DETAILS WIDGET FIX === */
.elementor-659 .elementor-element-ae81477 .elementor-widget {
height: auto !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
.elementor-659 .elementor-element-ae81477 .elementor-widget-container {
height: auto !important;
overflow: visible !important;
}
/* === AMENITIES WIDGET FIX === */
.elementor-659 .elementor-element-015ac08 .elementor-widget {
height: auto !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
.elementor-659 .elementor-element-015ac08 .elementor-widget-container {
height: auto !important;
overflow: visible !important;
}
/* === LOCATION WIDGET FIX === */
.elementor-659 .elementor-element-7a06f9e .elementor-widget {
height: auto !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
.elementor-659 .elementor-element-7a06f9e .elementor-widget-container {
height: auto !important;
overflow: visible !important;
}
/* === GLOBAL FIX: ALL widgets inside template 659 === */
.elementor-659 .elementor-widget {
height: auto !important;
min-height: 0 !important;
}
.elementor-659 .elementor-widget.elementor-widget-heading {
overflow: visible !important;
}
.elementor-659 .elementor-widget.elementor-widget-image {
overflow: visible !important;
}
.elementor-659 .elementor-widget.elementor-widget-divider {
overflow: visible !important;
}
.elementor-659 .elementor-widget.elementor-widget-text-editor {
overflow: visible !important;
}
/* === FIX COVER PHOTO WIDGET INSIDE 739fad6 === */
.elementor-659 .elementor-element-739fad6 .elementor-widget-image {
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 480px !important;
overflow: hidden !important;
}
/* === FIX GALLERY: The rh-gallery-grid container needs overflow visible === */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid {
overflow: visible !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con {
overflow: hidden !important;
height: auto !important;
min-height: 240px !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) {
min-height: 488px !important;
}
/* === FIX STATS STRIP: Fix the border dividers between items === */
.elementor-659 .elementor-element-a78376d > .e-con .elementor-widget-divider {
display: none !important;
}
/* ============================================================
CRITICAL: Override Elementor post-659.css white bg on empty-ID elements
Elementor generates: .elementor-659 .elementor-element.elementor-element-:not(.elementor-motion-effects-element-type-background) { background: white }
We must override this for elements inside our sections.
============================================================ */
/* Override the Elementor-generated white background for ALL child elements in template 659 */
/* Hero section: make all inner elements transparent */
.elementor-659 .elementor-element-1d68847 .elementor-element {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
}
.elementor-659 .elementor-element-1d68847 .elementor-element.elementor-widget-image {
background: transparent !important;
}
/* Gallery section: transparent bg on inner elements */
.elementor-659 .elementor-element-76c7537 .elementor-widget {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
}
/* Location section: transparent bg on inner elements */
.elementor-659 .elementor-element-7a06f9e .elementor-element {
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* Stats strip: transparent except the outer box styling we applied */
.elementor-659 .elementor-element-a78376d .elementor-widget {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
}
/* Cover photo section: transparent */
.elementor-659 .elementor-element-739fad6 .elementor-element {
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* About+Details: keep the detail row bg, but make widgets transparent */
.elementor-659 .elementor-element-ae81477 .elementor-widget {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
}
/* Amenities section: keep card bg but make inner widgets transparent */
.elementor-659 .elementor-element-015ac08 .elementor-widget {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
}
/* === FIX GALLERY: Show all 5 images properly === */
/* The gallery uses rh-gallery-grid class with CSS grid */
/* First image: large, spans full height */
/* Images 2-5: shown in 2x2 grid on right */
/* Show images 4 and 5 as sub-items in a second column row */
/* Gallery image containers with grid */
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid {
display: grid !important;
grid-template-columns: 55% calc(45% - 8px) !important;
grid-template-rows: 240px 240px !important;
gap: 8px !important;
overflow: visible !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
height: auto !important;
overflow: hidden !important;
border-radius: 8px !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
overflow: hidden !important;
border-radius: 8px !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(3) {
grid-column: 2 !important;
grid-row: 2 !important;
overflow: hidden !important;
border-radius: 8px !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(4),
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(5) {
display: none !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid img {
width: 100% !important;
height: 240px !important;
object-fit: cover !important;
display: block !important;
}
.elementor-659 .elementor-element-76c7537 .rh-gallery-grid > .e-con:nth-child(1) img {
height: 488px !important;
}
/* === FIX: Remove the extra gap/white-space below cover photo === */
/* The cover photo section has absolute positioned image but might have extra margin */
.elementor-659 .elementor-element-739fad6 + * {
margin-top: 0 !important;
}
/* FIX: Amenity card container - direct children (no e-con-inner wrapper) */
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con {
flex: 0 0 calc(25% - 9px) !important;
max-width: calc(25% - 9px) !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 20px 16px !important;
text-align: center !important;
height: auto !important;
min-height: 80px !important;
overflow: visible !important;
}
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con .elementor-heading-title {
font-size: 13px !important;
font-weight: 600 !important;
color: #334155 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
@media (max-width: 767px) {
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con {
flex: 0 0 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
}
}
@media (max-width: 1024px) and (min-width: 768px) {
.elementor-659 .elementor-element-015ac08 > .e-con-inner > .e-con:last-child > .e-con {
flex: 0 0 calc(33.33% - 8px) !important;
max-width: calc(33.33% - 8px) !important;
}
}