/* =====================================
CRITICAL: MOBILE HERO VISIBILITY - NITRO CACHE FIX
Must be visible immediately, even before JS loads
===================================== */
@media (max-width: 991px) {
.mobile-hero-system.site-showcase {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
height: calc(100vh - 15px) !important;
min-height: 450px !important;
max-height: 650px !important;
overflow: hidden !important;
}
.mobile-hero-system .hero-slider {
display: block !important;
visibility: visible !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: calc(100vh - 15px) !important;
min-height: 450px !important;
z-index: 1 !important;
opacity: 1 !important;
}
.mobile-hero-system .hero-slider.hidden-xs {
display: block !important;
visibility: visible !important;
}
.mobile-search-overlay-wrapper {
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
transform: translateY(-50%) !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 100 !important;
width: 100% !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
.mobile-search-overlay-wrapper .site-search-module {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
}
/* Prevent search bar from moving on scroll */
.mobile-hero-system.site-showcase {
position: relative !important;
top: auto !important;
transform: none !important;
}
}
/* =====================================
CLEAN APPLE-STYLE EXCERPT TEXT
===================================== */
.post-summary {
margin: 6px 0 0 0;
padding: 0;
display: block !important;
color: #444; /* Apple-like neutral grey */
font-size: 15.5px; /* Apple card text size */
line-height: 1.45; /* Apple tighter line spacing */
font-weight: 400;
max-height: 66px; /* ~3 lines */
overflow: hidden;
}
.post-summary a {
color: #444 !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important; /* EXACTLY 3 lines */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
font-weight: 400 !important;
font-size: 15.5px !important;
line-height: 1.45 !important;
}
/* ============================================================
GLOBAL HORIZONTAL SCROLL FIX - PREVENT OVERFLOW ON MOBILE
Optimized for performance - only apply overflow-x on body, not html
============================================================ */
html {
max-width: 100vw !important;
overflow-x: hidden !important;
position: relative !important;
-webkit-overflow-scrolling: touch !important;
}
body {
max-width: 100vw !important;
width: 100% !important;
overflow-x: hidden !important;
position: relative !important;
box-sizing: border-box !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: none !important;
}
/* Only apply box-sizing globally - don't force on all elements */
*, *::before, *::after {
box-sizing: border-box;
}
.cover {background-size:cover; background-repeat:no-repeat; background-position:center center;}
.newImg {float:left; height:180px; width:100%; position:relative;}
.special-image{max-width:450px }
.flex-fixed-width-item {
flex: 0 0 100px;
}
/* Scope box-desktop-size to listing/guide pages only */
.location-page .box-desktop-size {
min-height:250px; margin-top:20px;
}
/* REMOVED: guide-page .box-desktop-size - conflicts with 2-column grid */
.pageLeft {width: 100%;float:left;/* padding-left: 30px; */}
.pageRight {width: 100%;float:left;}
#categoryWidgetTitle i {display:none;}
.page-detailX .pageLeft {width: 100%;}
.page-detailX .pageRight {width: 100%;}
@media (min-width:993px) {
.newsList {min-height:300px}
#categoryWidgetList {display:block!important;}
}
@media (max-width:992px) {
.property-listing .property-info, .agents-listing .agent-info {height: inherit;}
.newImg {height:250px;}
.property-listing .property-featured-image, .agents-listing .agent-featured-image {margin-bottom:0px}
.property-listing .price {top:0px;float: right;position: absolute;right: 0;}
.property-info .summary {height: auto;}
.special-image{max-width:150px }
.alt-cizgi{ border-bottom: 1px solid rgba(153, 153, 153, .5); }
.mobil-bosluk{padding-top: 12px; }
.pageLeft {width:100%!important; float:left; padding-right:0px;}
.pageRight {width:100%!important; float:left;}
#categoryWidgetTitle {cursor:pointer;}
#categoryWidgetTitle i {float:right;}
#categoryWidgetList {display:none;}
.newsList {padding-bottom:15px;}
}
@media (max-width:600px) {
.property-amenities > span {width:100%;}
.property-listing .property-amenities {height:auto}
.property-amenities img.iconic {margin-left:0px;}
.special-image{max-width:150px }
.alt-cizgi{ border-bottom: 1px solid rgba(153, 153, 153, .5); }
.mobil-bosluk{padding-top: 12px; }
}
.fw {width:100%; float:left;}
/* OVERRIDE: Fix .fw.pageRightBox for 2-column grid on guides/news/blog */
.fw.page .pageRight .pageRightBox {
display: block !important;
width: 100% !important;
float: left !important;
overflow: visible !important;
clear: both !important;
}
.newPagination {padding:20px 0px;}
.newPagination ul {margin:0 auto; display:table; text-align:center;}
.newPagination ul>li {display:inline-block; margin-right:5px;}
.newPagination ul>li:last-child {margin-right:0px;}
.newPagination ul>li>a {width:40px; height:40px; color:#333; font-size:14px; text-align:center; line-height:40px; display:inline-block; border:1px solid rgba(0,0,0,0.1);}
.newPagination ul>li>a:hover {background:#333; color:#fff}
.newPagination ul>li.active>a {background:#333; color:#fff}
/* Rounded corners for modern design */
.newImg {
border-radius: 6px;
}
.property-block {
border-radius: 8px;
overflow: hidden;
}
/* Subtle shadow */
.property-block {
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
transition: box-shadow .25s ease;
}
.property-block:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
/* Tight spacing between property cards - luxury tight composition */
.owl-item {
padding: 0 6px !important;
}
/* Hide labels inside property info */
.property-block .property-info ul li .label {
display: none !important;
}
/* CRITICAL: Ensure value spans are NOT hidden - override any rules that hide them */
.property-block .property-info ul li .value,
.property-block .property-info ul li span.value {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
color: #222 !important;
font-size: 14px !important;
}
/* Add spacing before icons - FIX: Ensure emoji icons display properly */
.property-block .property-info ul li span:not(.label):before {
margin-right: 6px !important;
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
font-size: 18px !important; /* FIX: Larger font-size for emoji visibility */
}
/* Bedrooms = First LI - FIX: Ensure emoji displays fully */
.property-block .property-info ul li:nth-child(1) span:not(.label):before {
content: "π " !important;
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
font-size: 18px !important; /* Larger size to prevent clipping */
width: auto !important;
height: auto !important;
overflow: visible !important;
}
/* Bathrooms = Second LI - FIX: Ensure emoji displays fully */
.property-block .property-info ul li:nth-child(2) span:not(.label):before {
content: "π " !important;
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
font-size: 18px !important; /* Larger size to prevent clipping */
width: auto !important;
height: auto !important;
overflow: visible !important;
}
/* Sq Mt = Third LI - FIX: Ensure emoji displays fully */
.property-block .property-info ul li:nth-child(3) span:not(.label):before {
content: "π " !important;
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
font-size: 18px !important; /* Larger size to prevent clipping */
width: auto !important;
height: auto !important;
overflow: visible !important;
}
/* PRICE BOX β Option 2 (best layout) */
.property-block .price {
background: #f2f2f2;
border-radius: 6px;
padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
/* Currency symbol */
.property-block .price strong {
color: #555;
font-size: 18px;
font-weight: 700;
margin-right: 6px;
min-width: 20px;
}
/* Number */
.property-block .price span {
color: #008bd3 !important;
font-weight: 700;
font-size: 16px;
}
#morelink {
cursor: pointer;
font-weight: bold;
color: #0074c9;
}
#morelink:hover {
text-decoration: underline;
}
.home .row:last-of-type {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.home .row,
.home .posts-archive,
.home .col-md-6 {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#main,
#content,
.container,
.container .row {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* ============================================================
OLD SITE-SEARCH-MODULE STYLES - OVERRIDDEN BY UNIFIED STYLES BELOW
============================================================ */
.site-search-module {
position: relative !important;
z-index: 50 !important;
}
.bootstrap-select .dropdown-menu {
position: absolute !important;
}
.bootstrap-select {
width: 100% !important;
}
.bootstrap-select.form-control {
height: auto !important;
}
.bootstrap-select > .dropdown-toggle {
padding-right: 30px !important;
}
.advanced-search-wrapper {
position: relative;
z-index: 40;
margin-top: 10px;
}
.advanced-search-box {
background: #fff;
border: 1px solid #ddd;
padding: 20px;
z-index: 100;
position: relative;
}
/* Fix NitroPack breaking selectpicker β keep button visible, hide dropdown when closed */
.bootstrap-select {
visibility: visible !important;
opacity: 1 !important;
}
/* Dropdown menu: HIDDEN by default, only visible when .open */
.bootstrap-select .dropdown-menu {
display: none !important;
top: 100% !important;
}
.bootstrap-select.btn-group.open .dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* =====================================================
HERO SLIDER FIX β KEEP SLIDER ALWAYS FULL HEIGHT
===================================================== */
/* CRITICAL: Scope this ONLY to home page - DO NOT apply globally */
/* Home page hero slider needs full height - keep original behavior */
body.home .site-showcase,
html.home .site-showcase {
overflow: visible !important;
margin-top: 0 !important;
padding-top: 0 !important;
min-height: 570px !important; /* Increased by +10% from 518px */
height: auto !important;
margin-bottom: -5px !important; /* Reduce white background below slider by 5px */
}
/* Scope hero slider height ONLY to home page */
/* DO NOT apply globally - would conflict with gap fix on listing/guide pages */
body.home .hero-slider,
body.home .hero-slider .flex-viewport,
body.home .hero-slider ul.slides,
body.home .hero-slider .slides > li {
min-height: 570px !important; /* Increased by +10% from 518px */
height: 570px !important; /* Increased by +10% from 518px */
}
/* Hero slider background images - min-height moved from inline styles */
.hero-slider .slides li.parallax.hero-slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 600px;
}
/* Fix anchor tags containing block elements - make them block-level */
.ep-card-link,
.property-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.ep-card-link:hover,
.property-card-link:hover {
text-decoration: none;
color: inherit;
}
/* =====================================================
HEADER SPACING β FLAGS, LOGO BAR, MENU BAR
===================================================== */
/* Remove blue bar visual appearance - make transparent while keeping content */
/* Override inline style from header.php that sets background-color:#195385 */
.site-header,
.top-header,
#top-header,
header.site-header,
header.site-header .top-header,
.site-header .top-header {
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
/* Override inline margin-top:5px from header tag - ensure it's removed */
header.site-header,
header.site-header[style*="margin-top"],
header.site-header[style],
body header.site-header[style*="margin-top"] {
margin-top: 0 !important;
}
.top-header,
header.site-header .top-header,
.site-header .top-header {
padding-top: 2px !important; /* Reduced for tighter spacing */
padding-bottom: 2px !important; /* Reduced for tighter spacing */
height: auto !important;
min-height: 0 !important;
}
/* Fix Edge browser spacing above logo - remove clearfix spacing */
.site-header .clearfix {
display: block !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
overflow: hidden !important;
clear: both !important;
}
.middle-header {
margin-top: 0 !important;
padding-top: 4px !important; /* Reduced from 10px for tighter spacing */
padding-bottom: 4px !important; /* Reduced from 10px for tighter spacing */
box-shadow: none !important;
}
.main-menu-wrapper {
padding-top: 2px !important; /* Reduced from 6px for tighter spacing */
padding-bottom: 2px !important; /* Reduced from 6px for tighter spacing */
height: auto !important; /* allow natural height */
}
/* =====================================================
STICKY-KIT FIX β REMOVE FAKE HEIGHT + OVERLAY
===================================================== */
#undefined-sticky-wrapper,
.sticky-wrapper {
height: auto !important;
min-height: 0 !important;
padding-top: 4px !important;
display: block !important;
}
/* OVERRIDE: Guide page sidebar must NOT use sticky-kit wrapper */
html.guide-page .guide-sidebar,
html.guide-page .guide-sidebar.sticky-wrapper,
html.guide-page .guide-sidebar #undefined-sticky-wrapper {
height: auto !important;
min-height: 0 !important;
padding-top: 0 !important;
display: block !important;
position: sticky !important; /* Use native sticky, not sticky-kit */
}
/* =====================================================
ABSOLUTE FIX β STOP HEADER OVERLAYING THE SLIDER
===================================================== */
/* Ensure header pushes content down */
header.site-header {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
height: auto !important;
}
/* ============================
FINAL VISIBILITY + Z-INDEX FIX
============================ */
/* Keep header above slider */
.site-header {
position: relative !important;
z-index: 9999 !important;
/* Ensure header doesn't break fixed positioning of sticky menu */
transform: none !important;
will-change: auto !important;
/* CRITICAL: When menu is sticky, header must NOT create containing block */
perspective: none !important;
filter: none !important;
}
/* When menu is sticky, ensure header doesn't interfere */
.site-header:has(.main-menu-wrapper.sticky-menu),
.site-header:has(#mobile-menu.sticky-menu) {
transform: none !important;
perspective: none !important;
filter: none !important;
will-change: auto !important;
}
/* Middle header (logo + phone + email) */
.middle-header {
position: relative !important;
z-index: 9999 !important;
}
/* MAIN MENU must appear ABOVE slider, not behind */
.main-menu-wrapper {
position: relative !important;
z-index: 1000 !important;
overflow: visible !important; /* Allow dropdowns to show */
/* Ensure no transforms that break fixed positioning */
transform: none !important;
will-change: auto !important;
}
/* =====================================================
STICKY MENU - DESKTOP ONLY (min-width: 768px)
ALL sticky menu styles MUST be inside desktop media query
===================================================== */
@media screen and (min-width: 768px) {
/* CRITICAL: Override position: relative when sticky-menu class is present */
/* Works on ALL pages: homepage, blog, listings, etc. */
.main-menu-wrapper.sticky-menu,
#mobile-menu.sticky-menu,
#mobile-menu.main-menu-wrapper.sticky-menu,
body.home .main-menu-wrapper.sticky-menu,
body.home #mobile-menu.sticky-menu,
body.home #mobile-menu.main-menu-wrapper.sticky-menu {
position: fixed !important; /* MUST override the position: relative above */
}
/* =====================================================
STICKY MENU - ABSOLUTE HIGHEST SPECIFICITY
Must override ALL other rules
===================================================== */
.main-menu-wrapper.sticky-menu,
#mobile-menu.main-menu-wrapper.sticky-menu,
#mobile-menu.sticky-menu,
div#mobile-menu.main-menu-wrapper.sticky-menu,
div#mobile-menu.sticky-menu,
div.main-menu-wrapper.sticky-menu,
body .main-menu-wrapper.sticky-menu,
body #mobile-menu.main-menu-wrapper.sticky-menu,
body #mobile-menu.sticky-menu,
body div#mobile-menu.sticky-menu,
html body .main-menu-wrapper.sticky-menu,
html body #mobile-menu.main-menu-wrapper.sticky-menu,
html body #mobile-menu.sticky-menu,
html body div#mobile-menu.sticky-menu,
header .main-menu-wrapper.sticky-menu,
header #mobile-menu.main-menu-wrapper.sticky-menu,
header #mobile-menu.sticky-menu,
header div#mobile-menu.sticky-menu,
.site-header .main-menu-wrapper.sticky-menu,
.site-header #mobile-menu.main-menu-wrapper.sticky-menu,
.site-header #mobile-menu.sticky-menu,
.site-header div#mobile-menu.sticky-menu,
/* Homepage specific overrides */
body.home .main-menu-wrapper.sticky-menu,
body.home #mobile-menu.main-menu-wrapper.sticky-menu,
body.home #mobile-menu.sticky-menu,
body.home div#mobile-menu.sticky-menu,
html.home body .main-menu-wrapper.sticky-menu,
html.home body #mobile-menu.main-menu-wrapper.sticky-menu,
html.home body #mobile-menu.sticky-menu {
position: fixed !important;
top: 0 !important; /* Position at top of browser viewport */
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
z-index: 100 !important; /* Lower than price badge (150) to avoid conflicts */
background: #fff !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
transition: transform 0.3s ease, opacity 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease !important;
transform: translateY(0) !important;
opacity: 1 !important;
margin: 0 !important;
display: block !important;
}
/* Prevent body jump when menu becomes sticky - add padding to compensate */
body.menu-sticky-active {
padding-top: 0 !important; /* Menu height is already accounted for in header */
}
/* Smaller state at 10% scroll */
.main-menu-wrapper.sticky-menu.menu-smaller {
padding-top: 1px !important;
padding-bottom: 1px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
.main-menu-wrapper.sticky-menu.menu-smaller .navigation {
height: 45px !important;
}
.main-menu-wrapper.sticky-menu.menu-smaller .sf-menu > li > a {
padding: 10px 8px !important; /* Narrower horizontal spacing (8px instead of 14px) */
font-size: 14px !important;
}
/* Hidden state at 50% scroll */
.main-menu-wrapper.sticky-menu.menu-hidden {
transform: translateY(-100%) !important;
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* Hide all menu items when menu is hidden */
.main-menu-wrapper.sticky-menu.menu-hidden .navigation,
.main-menu-wrapper.sticky-menu.menu-hidden .sf-menu,
.main-menu-wrapper.sticky-menu.menu-hidden .sf-menu > li,
.main-menu-wrapper.sticky-menu.menu-hidden .sf-menu > li > a {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
display: none !important;
}
/* Ensure navigation stays visible when menu is sticky */
.main-menu-wrapper.sticky-menu .navigation {
transition: height 0.3s ease !important;
}
.main-menu-wrapper.sticky-menu .sf-menu > li > a {
transition: padding 0.3s ease, padding-left 0.3s ease, padding-right 0.3s ease, font-size 0.3s ease !important;
}
/* Initial load: WIDER horizontal spacing (20px padding) */
.main-menu-wrapper.sticky-menu:not(.menu-smaller) .sf-menu > li > a {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Ensure dropdowns work when menu is sticky */
.main-menu-wrapper.sticky-menu .sf-menu .dropdown {
z-index: 101 !important; /* Above sticky menu (100) */
position: absolute !important;
}
}
/* Mobile: COMPLETELY DISABLE sticky menu on mobile */
@media (max-width: 767px) {
/* Remove all sticky behavior on mobile */
.main-menu-wrapper.sticky-menu,
#mobile-menu.sticky-menu,
#mobile-menu.main-menu-wrapper.sticky-menu {
position: relative !important; /* Override fixed on mobile */
top: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
/* Remove smaller/hidden states on mobile */
.main-menu-wrapper.sticky-menu.menu-hidden,
.main-menu-wrapper.sticky-menu.menu-smaller {
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
padding-top: inherit !important;
padding-bottom: inherit !important;
}
.main-menu-wrapper.sticky-menu.menu-smaller .navigation {
height: auto !important;
}
.main-menu-wrapper.sticky-menu.menu-smaller .sf-menu > li > a {
padding: inherit !important;
font-size: inherit !important;
}
}
/* =====================================================
FIX HEADER/MENU STRETCHING AFTER PAGE LOAD
===================================================== */
/* Prevent header and menu from stretching when images load */
.site-header,
.top-header,
.middle-header {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
.main-menu-wrapper {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important; /* Allow dropdowns to show outside */
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
z-index: 1000 !important; /* Ensure menu stays above content */
position: relative !important;
}
/* DESKTOP ONLY: Additional overrides for sticky menu (min-width: 768px) */
@media screen and (min-width: 768px) {
/* Ensure parent header doesn't create containing block */
.site-header:has(.main-menu-wrapper.sticky-menu),
.site-header:has(#mobile-menu.sticky-menu),
header:has(.main-menu-wrapper.sticky-menu),
header:has(#mobile-menu.sticky-menu) {
transform: none !important;
perspective: none !important;
filter: none !important;
will-change: auto !important;
}
}
.site-header .container,
.middle-header .container,
.main-menu-wrapper .container {
width: 100% !important;
max-width: 1170px !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
/* Prevent images from causing layout shift */
.site-header img,
.middle-header img,
.main-menu-wrapper img {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* Fix logo dimensions to prevent stretching */
/* Base logo size (mobile) - will be overridden by desktop media query */
.logo img,
.yu-logo {
width: 243px !important;
height: 67px !important;
max-width: 243px !important;
object-fit: contain !important;
}
/* Fix flag images */
.flags {
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
object-fit: contain !important;
}
/* Prevent header flex from stretching */
.header-flex {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
}
/* Fix navigation menu */
.navigation,
.sf-menu {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Sticky wrapper must NOT hide under slider */
#undefined-sticky-wrapper,
.sticky-wrapper {
position: relative !important;
z-index: 9999 !important;
}
/* Hide WHAT WE DO image on mobile/tablet */
@media (max-width: 991px) {
.show-desktop-only {
display: none !important;
}
}
/* SAFE SPACING SYSTEM β DOES NOT TOUCH HEADER, FLAGS, SLIDER */
/* Apply spacing ONLY inside main content */
.main-content-section,
#featured-properties,
.posts-archive,
.seo-text {
margin-top: 18px !important;
margin-bottom: 22px !important;
}
.offers-img {
width: 100%;
height: 180px; /* SAME AS BEFORE */
object-fit: cover;
border-radius: 6px;
display: block;
}
/* ============================================================
GREAT OFFERS β APPLE STYLE UPGRADE
============================================================ */
/* 1) Card container: fluffy + equal height + Apple shadow */
.property-block {
border-radius: 14px !important;
background: #ffffff;
box-shadow: 0 8px 28px rgba(0,0,0,0.06);
padding: 0;
padding-bottom: 10px !important; /* Increase height downward by 1cm (10px) */
display: flex;
flex-direction: column;
height: auto !important; /* FIX: Changed from 100% to auto to allow expansion */
min-height: auto !important; /* Allow cards to expand */
overflow: visible !important; /* FIX: Ensure no clipping */
transition: transform .25s ease, box-shadow .25s ease;
}
/* Hover effect Apple style */
.property-block:hover {
transform: translateY(-4px);
box-shadow: 0 16px 38px rgba(0,0,0,0.10);
}
/* 2) Image top area β wider + taller + perfectly equal */
.property-featured-image {
height: 240px !important; /* Increased by 1cm (10px) from 230px to 240px */
border-top-left-radius: 14px;
border-top-right-radius: 14px;
overflow: hidden;
flex-shrink: 0;
}
/* Image itself */
.property-featured-image img,
.property-featured-image .newImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 3) Content area spacing (Apple airy look) */
.property-info {
padding: 18px 20px 20px 20px !important;
padding-bottom: 28px !important; /* Increase bottom padding to prevent clipping */
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: visible !important; /* Prevent clipping */
min-height: auto !important; /* Allow content to expand */
}
/* 4) Title styling β clean & strong */
.property-info h2,
.property-info .title,
.property-info h4 {
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.32;
margin: 0 0 8px 0;
color: #0f1d40;
}
/* 5) Location row */
.property-location,
.property-info .location {
margin-bottom: 14px;
font-size: 14px;
color: #6b7280;
display: flex;
align-items: center;
}
/* 6) Icons row β perfect spacing */
.property-info .detail-row {
margin: 6px 0;
font-size: 14px;
}
/* 7) Price area β always at the bottom */
.property-price-wrapper,
.property-info .price {
margin-top: auto;
padding-top: 16px;
}
/* 8) BUTTON alignment (Great Offers only) */
.property-info a.details-button {
margin-top: 10px;
}
/* 9) FIX: Ensure 4 cards visible β no 3.5 cards cut */
#great-offers .owl-stage-outer,
#featured-properties .owl-stage-outer {
padding-left: 0 !important;
padding-right: 100px !important; /* Increased to fully hide next card */
overflow: hidden !important;
}
/* FIX card spacing to remove excessive white gap below */
#great-offers,
#featured-properties {
margin-bottom: 20px !important;
}
/* ============================================================
GREAT OFFERS β APPLE GOLDEN BALANCE FIX
============================================================ */
/* 1) Increase card vertical presence */
.property-featured-image {
height: 255px !important; /* previously 230px β Apple-balanced */
}
/* 2) Add perfect breathing space between header and carousel */
#great-offers {
margin-top: 80px !important; /* OVERRIDE: 60px spacing after what-we-do image */
}
#featured-properties {
margin-top: 78px !important; /* Reduced by 2px (from 80px to 78px) to reduce space from Editors Picks - total 5px reduction with editors-picks bottom margin */
}
/* 3) Add internal card padding for luxury spacing */
.property-info {
padding: 22px 22px 24px 22px !important;
}
/* Title needs slight top spacing fix */
.property-info h2,
.property-info .title,
.property-info h4 {
margin-bottom: 10px !important;
}
/* Icons need more breathing room */
.property-info .detail-row {
margin: 8px 0 !important;
}
/* Fix bottom spacing consistency */
.property-price-wrapper,
.property-info .price {
padding-top: 18px !important;
}
/* ============================================
FIX: Add spacing between price and Details
Safe β no layout changes
============================================ */
.property-price-wrapper {
margin-bottom: 12px !important; /* space under price bar */
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.property-price-wrapper .price-text {
margin-right: 10px !important; /* space between price and button */
}
.property-price-wrapper + .details-button,
.property-info .details-button,
.property-info a.btn,
.property-info .btn {
margin-top: 10px !important; /* ensure button is detached */
display: inline-block !important;
}
/* ============================================
APPLE MICRO-POLISH PATCH (SAFE / NON-BREAKING)
============================================ */
/* 1) Reduce vertical gap under property image */
li.item.property-block .property-featured-image {
margin-bottom: -4px !important; /* was 0 β compact Apple style */
}
/* 2) Increase title line-height for better breathing */
li.item.property-block h3,
li.item.property-block .title,
.property-info .location + h3,
.property-info h4 {
line-height: 1.30 !important; /* increased for better readability */
}
/* ============================================
FINAL POLISH (SAFE + NON-BREAKING)
============================================ */
/* 1) Add spacing between price row and Details button */
.property-info .price {
margin-bottom: 8px !important; /* +4px breathing room */
}
/* 2) Increase title readability by +1px line-height */
li.item.property-block h3,
li.item.property-block .title,
.property-info h4 {
line-height: 1.30 !important;
}
/* 3) Reduce space under image by -3px (Apple compact style) */
.property-featured-image {
margin-bottom: -3px !important;
}
/* Green Price Badge */
.property-info .price {
display: flex !important;
align-items: center !important;
gap: 6px !important;
background: #e6f6ea !important;
border-radius: 8px !important;
padding: 8px 14px !important;
margin-top: 14px !important;
}
.property-info .price strong,
.property-info .price i,
.property-info .price span {
font-size: 15px !important;
font-weight: 600 !important;
color: #128c38 !important;
}
/* Remove Details button background to reduce clutter */
.property-info .details-btn,
.property-info .details-button,
.property-info a.btn-primary {
background: transparent !important;
border: 1px solid #ddd !important;
color: #444 !important;
}
/* 1 β Remove old price row + details button */
#featured-properties .price,
#featured-properties .details-badge {
display: none !important;
}
/* 2 β Add green price badge (same style as listing pages) */
#featured-properties .item.property-block {
position: relative;
}
#featured-properties .green-price-badge {
display: inline-block;
background: #33cc66; /* Same green as city hubs listings */
color: #fff;
padding: 8px 18px;
border-radius: 24px;
font-weight: 600;
font-size: 14px;
margin-top: 12px;
}
/* 3 β Make space for the nice badge */
#featured-properties .property-info {
padding-bottom: 18px !important;
}
/* ==============================
APPLE LUXURY CARD - ONE PATCH
============================== */
/* Make whole card clickable */
.property-block {
position: relative;
border-radius: 18px;
overflow: visible !important; /* FIX: Changed from hidden to visible to prevent clipping */
background: #fff;
transition: all 0.35s cubic-bezier(.25,.8,.25,1);
}
/* Full card click - entire card is one link */
.property-block .property-card-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.property-block .property-card-link:hover {
text-decoration: none;
color: inherit;
}
/* Price badge - part of clickable card */
.green-price-badge {
position: relative;
z-index: 1;
pointer-events: none !important; /* Allow click to pass through to parent link */
background: #33cc66; /* Same green as city hubs listings */
color: #ffffff;
border-radius: 12px;
padding: 8px 16px;
font-weight: 600;
font-size: 15px;
text-align: center;
margin-top: 12px;
text-decoration: none;
}
/* Apple hover: soft shadow, micro zoom, glossy blur */
.property-block:hover {
transform: translateY(-4px) scale(1.012);
box-shadow: 0 16px 35px rgba(0,0,0,0.12);
}
/* Image zoom */
.property-featured-image img,
.property-featured-image {
transition: transform 0.45s ease;
}
.property-block:hover .property-featured-image img {
transform: scale(1.04);
}
/* Glass blur overlay */
.property-block:hover::after {
content: "";
position: absolute;
inset: 0;
backdrop-filter: blur(3px);
opacity: 0.12;
pointer-events: none;
z-index: 1;
}
/* Remove legacy Details button if any remains */
.property-info .details,
.property-info .details-btn,
.property-info a[href*="details"] {
display: none !important;
}
/* ============================
EDITOR'S PICKS β PRICE BADGE ON IMAGE
OPTION C (BOTTOM-LEFT)
============================ */
/* Remove old price line completely */
.editor-picks-card .property-price,
.editor-picks-card .bottom-price,
.editor-picks-card .price-line,
.ep-card .ep-price {
display: none !important;
}
/* Position wrapper relative to allow badge overlay */
.editor-picks-card,
.editor-picks-card .featured-image,
.editor-picks-card .property-block,
.ep-card,
.ep-image-wrapper {
position: relative;
}
/* Price Badge on bottom-left of image */
.ep-card .green-price-badge {
position: absolute !important;
bottom: 14px;
left: 14px;
z-index: 50;
padding: 9px 22px;
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important; /* WHITE TEXT */
border-radius: 40px;
font-size: 16px;
font-weight: 600;
line-height: 1;
border: none !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.20);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease;
pointer-events: none; /* Allow click to pass through to card */
}
/* =======================================
EDITOR'S PICKS β SOLID GREEN PRICE BADGE
MATCHING GREAT OFFERS CARDS
======================================= */
/* Remove blur version */
.editor-picks-card .green-price-badge {
position: absolute !important;
bottom: 14px;
left: 14px;
z-index: 50;
padding: 9px 22px;
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important; /* WHITE TEXT */
border-radius: 40px;
font-size: 16px;
font-weight: 600;
line-height: 1;
border: none !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.20);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
/* Hover = Apple smooth zoom and deeper shadow */
.ep-card:hover .green-price-badge,
.editor-picks-card .green-price-badge:hover {
transform: scale(1.06);
box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
/* Make entire horizontal card clickable and animate like Great Offers */
.ep-card:hover,
.editor-picks-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
transition: all .30s cubic-bezier(.19,.7,.3,1);
}
/* ===========================================
DESKTOP HERO SECTION β LUXURY UPGRADE
=========================================== */
@media (min-width: 992px) {
/* --- SLIDE IMAGE IMPROVEMENT --- */
.hero-slider .slides li {
height: 784px !important; /* Increased by +10% from 713px */
background-size: cover !important;
background-position: center !important;
position: relative;
/* REMOVED animation for LCP optimization - images should appear immediately */
}
/* REMOVED heroFadeIn animation - causes delay in LCP */
/* DARK GRADIENT FOR TEXT CONTRAST */
.hero-slider .slides li::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.10),
rgba(0,0,0,0.35)
);
z-index: 1;
}
/* --- HERO CAPTION BLOCK --- */
.hero-slider .slides li .hero-caption.hero-right,
.hero-slider .slides li.parallax .hero-caption.hero-right,
.hero-caption.hero-right {
position: absolute !important;
top: 15% !important; /* Position near the top region - 15% from top */
right: 60px !important;
bottom: auto !important; /* Ensure bottom is not set */
transform: none !important; /* Remove centered alignment */
background: rgba(255,255,255,0.06);
backdrop-filter: blur(10px);
padding: 28px 32px;
border-radius: 12px;
box-shadow: 0 7px 26px rgba(0,0,0,0.22) !important;
width: 420px;
z-index: 2;
transition: 0.26s ease;
}
.hero-slider .slides li .hero-caption.hero-right:hover,
.hero-slider .slides li.parallax .hero-caption.hero-right:hover,
.hero-caption.hero-right:hover {
transform: scale(1.02) !important; /* Only scale on hover, no translateY */
box-shadow: 0 22px 48px rgba(0,0,0,0.34);
}
/* --- TITLE --- */
.hero-title {
font-size: 28px !important; /* +2β3px */
font-weight: 700 !important;
line-height: 1.25;
color: #fff !important;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* --- CITY SUBTITLE --- */
.hero-city {
font-size: 18px;
color: #fff !important;
font-weight: 500;
margin-bottom: 18px;
opacity: 0.9;
}
/* --- NEW GREEN PRICE BADGE (converted from old structure) --- */
.hero-price {
display: inline-block;
background: #19c37d;
padding: 8px 16px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
color: #fff !important;
margin-bottom: 18px;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.hero-price .hero-currency,
.hero-price .hero-value {
color: #fff !important;
font-weight: 600;
font-size: 16px;
}
/* --- CTA BUTTON --- */
.hero-btn {
display: inline-block;
height: 46px;
line-height: 46px;
padding: 0 26px;
border-radius: 6px;
background: #ffffff;
color: #111 !important;
font-weight: 600;
transition: 0.25s ease;
margin-top: 12px;
}
.hero-btn:hover {
background: #195385 !important; /* Deep muted blue - authority tone */
color: #fff !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
/* --- AGENT IMAGE (small circle) --- */
.hero-agent img {
width: 68px !important;
height: 68px !important;
object-fit: cover;
border-radius: 50%;
margin-top: 20px;
border: 2px solid rgba(255,255,255,0.7);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* ==========================================
HERO BUTTON & CAPTION FINAL LUXURY FIXES
========================================== */
/* FIX 1 β Remove thin grey border around button */
.hero-btn {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* FIX 2 β Smooth Apple fade hover */
.hero-btn {
transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}
.hero-btn:hover {
background: #195385 !important; /* Deep muted blue - authority tone */
color: #fff !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
/* FIX 3 β Increase caption padding bottom */
.hero-caption.hero-right {
padding-bottom: 32px !important;
}
/* FIX 4 β Gentle white glaze for premium look */
.hero-caption.hero-right::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(255,255,255,0.05),
rgba(255,255,255,0.12)
);
border-radius: inherit;
z-index: -1;
}
/* ==========================================
FIX ALL REMAINING HERO DEFECTS (DESKTOP)
========================================== */
/* 1 β REMOVE BORDER FROM HERO CAPTION BOX */
.hero-caption.hero-right {
border: none !important;
outline: none !important;
background: rgba(255,255,255,0.07) !important; /* clearer, glass */
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
/* REMOVE ANY PRE-INHERITED BORDER */
.hero-caption.hero-right * {
border: none !important;
outline: none !important;
}
/* 2 β FIX BUTTON BORDER OUTLINE COMPLETELY */
.hero-btn {
border: none !important;
outline: none !important;
box-shadow: none !important; /* remove thin edge */
background: #0d1b2a !important; /* premium dark */
}
.hero-btn:hover {
background: #19c37d !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.30) !important;
}
/* 3 β PERFECT GREEN BADGE */
.hero-price {
border: none !important;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}
/* PRICE BADGE β CENTERED + LARGER TEXT + BALANCED */
.hero-price {
display: flex !important;
align-items: center !important; /* vertical center */
justify-content: center !important; /* horizontal center */
text-align: center !important;
padding: 12px 22px !important;
border-radius: 10px !important; /* softer for centered text */
background: #19c37d !important;
}
.hero-price span {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
color: #fff !important;
}
/* Fix the β¬ spacing */
.hero-price .hero-currency {
margin-right: 4px !important;
}
/* PERFECT CENTERED PRICE BADGE FIX */
.hero-price {
display: flex !important;
flex-direction: row !important;
align-items: center !important; /* vertical centering */
justify-content: center !important; /* horizontal centering */
text-align: center !important;
background: #19c37d !important;
padding: 10px 26px !important; /* balanced padding */
border-radius: 14px !important; /* more premium */
height: 56px !important; /* FIX vertical balance */
}
.hero-price span {
font-size: 20px !important; /* bigger text */
font-weight: 700 !important;
color: white !important;
line-height: 1 !important; /* perfect vertical centering */
display: inline-block !important;
}
.hero-price .hero-currency {
margin-right: 6px !important; /* balanced spacing */
}
/* 4 β SOFTER GLASS BACKGROUND */
.hero-caption.hero-right {
box-shadow: 0 18px 42px rgba(0,0,0,0.22) !important;
}
.hero-caption.hero-right::before {
background: linear-gradient(
to top right,
rgba(255,255,255,0.12),
rgba(255,255,255,0.20)
) !important;
}
}
/* REMOVE DARK HERO OVERLAY */
.slider-mask,
.overlay-transparent {
background: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Reduce unnecessary spacers */
.spacer-20,
.spacer-40,
hr {
margin: 14px 0 !important;
}
/* Better reading width on mobile text blocks only */
@media (max-width: 768px) {
.seo-text,
.posts-archive {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* Premium title spacing */
.block-heading h2,
.block-heading h4,
.seo-text h1,
.seo-text h2 {
margin-bottom: 10px !important;
margin-top: 6px !important;
}
/* =============================
PREMIUM DESKTOP SPACING CLEANUP
============================= */
/* Limit maximum content width for premium look */
@media (min-width: 1200px) {
.content.full,
.main,
.seo-text,
.posts-archive {
max-width: 1250px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Belek alignment: #featured-properties matches Bootstrap container (1170px) */
#featured-properties {
max-width: 1170px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Remove excessive white gaps between sections */
#featured-properties,
.posts-archive,
.seo-text,
.featured-blocks {
margin-top: 25px !important;
margin-bottom: 25px !important;
}
/* Control long empty space below WHAT WE DO */
.featured-blocks + #featured-properties {
margin-top: 10px !important;
}
/* Reduce gap above the big TURKEY map */
img[usemap] {
margin-top: 10px !important;
}
/* Reduce gap BELOW map */
img[usemap] + * {
margin-top: 0 !important;
}
/* Clean up inconsistent spacer classes */
.spacer-20,
.spacer-40 {
margin: 10px 0 !important;
}
/* Titles spacing premium style */
.block-heading {
margin-bottom: 15px !important;
}
.block-heading h4 {
margin-top: 0 !important;
margin-bottom: 5px !important;
}
/* Ensure uniform vertical rhythm between cards */
#featured-properties ul.owl-carousel {
margin-top: 0 !important;
}
/* Reduce overall content padding */
.main {
padding-top: 10px !important;
}
/* Force global background to white (fixes blue left-right sides) */
html, body {
background: #ffffff !important;
}
/* Remove any inherited background from wrapper/containers */
.site-wrapper,
.wrapper,
#page,
.page-wrapper,
.main,
.content.full {
background: #ffffff !important;
}
@media (max-width: 991px) {
.page-section {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
}
/* =====================================================
PREMIUM DESKTOP SPACING FIX
===================================================== */
/* Universal section spacing (desktop) */
@media (min-width: 992px) {
/* Featured blocks (What We Do) better compact */
.featured-blocks {
padding-top: 30px !important;
padding-bottom: 20px !important;
}
/* Space before Featured Properties */
#featured-properties {
margin-top: 20px !important;
margin-bottom: 80px !important; /* OVERRIDE: 60px spacing to news/blog section */
}
/* News + Blog section compacted */
.posts-archive {
margin-top: 0px !important;
margin-bottom: 25px !important;
}
/* SEO text (long text section) */
.seo-text {
margin-top: 30px !important; /* OVERRIDE: 30px spacing from news/blog section */
margin-bottom: 30px !important;
max-width: 1150px !important;
}
/* Feature discovery section spacing */
.page-section.feature-discovery-section {
margin-top: -40px !important; /* Negative margin to reduce gap from SEO text */
padding-top: 80px !important;
padding-bottom: 80px !important;
}
/* Reduce gap before the Turkey map */
img[usemap] {
margin-top: 15px !important;
}
/* Remove gap under map */
img[usemap] + * {
margin-top: 0 !important;
}
/* Clean gaps around HR & spacers */
hr, .spacer-20, .spacer-40 {
margin: 12px 0 !important;
padding: 0 !important;
}
}
/* =====================================================
PREMIUM MOBILE SPACING FIX
===================================================== */
@media (max-width: 768px) {
/* Reduce vertical padding inside each section */
.page-section {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Tighten WHAT WE DO */
.featured-blocks {
padding-top: 20px !important;
padding-bottom: 10px !important;
}
/* Featured properties tighter */
#featured-properties {
margin-top: -50px !important;
margin-bottom: 3px !important; /* Reduced by 7px more (was 10px, now 3px) */
}
/* MOBILE: Reduce spacing between Editors Picks and Great Offers - OVERRIDE ALL */
body.home .main .content.full #featured-properties.page-section,
body.home #featured-properties.page-section,
.home .main .content.full #featured-properties.page-section,
.home #featured-properties.page-section,
#featured-properties.page-section {
margin-top: -50px !important;
padding-top: 0 !important;
}
/* =======================================================================
MOBILE: REDUCE SPACING BETWEEN EDITORS PICKS AND GREAT OFFERS
Using negative margins on both sections since they're in different containers
======================================================================= */
/* Negative margin BOTTOM on Editors Picks wrapper */
.editors-picks-wrapper {
margin-bottom: -30px !important;
}
/* Negative margin BOTTOM on featured-blocks page-section (parent of editors picks) */
.featured-blocks.page-section {
margin-bottom: -30px !important;
padding-bottom: 0 !important;
}
/* Negative margin BOTTOM on container that holds editors picks */
.featured-blocks.page-section .container {
margin-bottom: -30px !important;
padding-bottom: 0 !important;
}
/* Negative margin TOP on new main that contains Great Offers */
.main + .main,
body.home .main + .main {
margin-top: -30px !important;
}
/* Negative margin TOP on content.full that contains Great Offers */
body.home .main + .main .content.full,
.main + .main .content.full,
body.home .content.full,
.content.full {
margin-top: -30px !important;
padding-top: 0 !important;
}
/* Negative margin TOP on what-we-do-section (between the two sections) - OVERRIDE INLINE STYLE */
body.home .page-section.what-we-do-section,
.page-section.what-we-do-section,
div.page-section.what-we-do-section[style*="margin-top"],
div.page-section.what-we-do-section {
margin-top: -30px !important;
margin-bottom: -30px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Negative margin TOP on Great Offers section itself */
body.home .main + .main #featured-properties.page-section,
.main + .main #featured-properties.page-section,
body.home .content.full #featured-properties.page-section,
.content.full #featured-properties.page-section,
#featured-properties.page-section {
margin-top: -30px !important;
padding-top: 0 !important;
}
/* News & Blog compact */
.posts-archive {
margin-top: 0px !important;
margin-bottom: 15px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* SEO TEXT compact */
.seo-text {
padding-left: 12px !important;
padding-right: 12px !important;
margin-top: 25px !important;
margin-bottom: 20px !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
/* Remove giant gap above map */
img[usemap] {
margin-top: 10px !important;
}
/* Remove gap under map */
img[usemap] + * {
margin-top: 0 !important;
}
/* Eliminate unnecessary whitespace */
hr, .spacer-20, .spacer-40 {
margin: 8px 0 !important;
}
/* =======================================================================
MOBILE: REDUCE SPACING BETWEEN INTRO TEXT READ MORE BUTTON AND TOP PROPERTY SALES HEADER BY 2PX
======================================================================= */
/* Override inline style on homepage-intro - reduce margin-bottom by 2px only */
.homepage-intro,
div.homepage-intro[style*="margin-bottom"],
body.home .homepage-intro,
body.home .container .homepage-intro {
margin-bottom: 38px !important; /* Reduced from 40px to 38px (2px reduction) - OVERRIDE INLINE STYLE */
}
/* Reduce container padding-bottom that holds homepage-intro - OVERRIDE INLINE STYLE */
body.home .container:has(.homepage-intro),
.container:has(.homepage-intro),
body.home .container,
body.home div.container[style*="padding-bottom"],
div.container[style*="padding-bottom:10px"] {
padding-bottom: 8px !important; /* Reduced from 10px to 8px (2px reduction) - OVERRIDE INLINE STYLE */
}
/* Reduce top margin of editors-picks-wrapper */
.editors-picks-wrapper,
body.home .editors-picks-wrapper,
body.home .container ~ .editors-picks-wrapper {
margin-top: 38px !important; /* Reduced from 40px to 38px (2px reduction) */
}
}
/* =======================================================================
DESKTOP: REDUCE SPACING BETWEEN INTRO TEXT READ MORE BUTTON AND TOP PROPERTY SALES HEADER BY 5PX
Using negative margin-top on editors-picks-wrapper to pull it up
======================================================================= */
@media (min-width: 768px) {
/* Negative margin-top on editors-picks-wrapper to reduce spacing by 5px */
.editors-picks-wrapper,
body.home .editors-picks-wrapper,
body.home .container ~ .editors-picks-wrapper,
body.home div.container[style*="padding-bottom"] ~ .editors-picks-wrapper {
margin-top: -5px !important; /* Pull up by 5px to reduce spacing */
}
/* Move intro section UP by 4px from current position - use transform to reliably move UP */
body.home .anavit .container,
body.home .col-md-12.anavit .container,
body.home .featured-blocks .container:has(.homepage-intro),
body.home .featured-blocks .container:has(.homepage-h1) {
transform: translateY(-4px) !important; /* Move UP by 4px - negative moves UP */
}
/* Override inline padding-top:75px style */
body.home .anavit .container[style*="padding-top:75px"],
body.home .col-md-12.anavit .container[style*="padding-top:75px"] {
padding-top: 67px !important; /* Reduce from 75px to 67px to move content UP */
}
/* Reduce space between Editors Picks cards and What We Do section by 2px */
body.home .featured-blocks.page-section {
margin-bottom: -2px !important; /* Negative margin to reduce spacing */
}
/* Also reduce margin-top on What We Do section */
body.home .page-section.what-we-do-section {
margin-top: -2px !important; /* Negative margin to pull it up */
}
}
/* FINAL FIX β unify section spacing (desktop + mobile) */
.page-section {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
@media (max-width: 991px) {
.page-section {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
}
/* REMOVE invisible empty gap sections */
.page-section:empty {
padding: 0 !important;
margin: 0 !important;
height: 0 !important;
min-height: 0 !important;
display: none !important;
}
/* REMOVE all extra spacing between homepage sections */
.home #content.content_full > div,
.home .page-section,
.home .featured-blocks,
.home .row,
.home .container {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* REMOVE empty pseudo-elements used by theme */
.home .page-section:before,
.home .page-section:after {
display: none !important;
height: 0 !important;
}
/* REMOVE hard-coded
spacing */
.home br {
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: none !important;
}
.page-section {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
/* REMOVE ALL HARDCODED WHITE GAPS - BUT ALLOW spacer after featured-properties */
.spacer-30,
.spacer-40,
.spacer-50 {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* EXCEPTION: Allow spacer-20 after featured-properties to create space */
#featured-properties + .spacer-20,
#featured-properties ~ .spacer-20 {
height: 50px !important; /* INCREASED: Create space between property cards and News/Blog */
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
#featured-properties {
margin-bottom: 3px !important; /* Reduced by 7px more (was 10px, now 3px) */
padding-bottom: 0 !important;
}
/* Remove empty wrappers before Turkey map */
.page-section img[alt="Turkiye Map"] {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* FINAL HOMEPAGE SPACING FIX */
.home .page-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Remove gaps above and below Turkey map */
.home .page-section img[alt="Turkiye Map"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ============================================================
1 β REMOVE EMPTY SPACES & WHITE GAPS ON HOMEPAGE
============================================================ */
.page-section:empty {
display: none !important;
padding: 0 !important;
margin: 0 !important;
height: 0 !important;
}
.home #content.content_full > div,
.home .page-section,
.home .featured-blocks,
.home .row {
margin: 0 !important;
padding: 0 !important;
}
.home .page-section:before,
.home .page-section:after {
display: none !important;
}
/* =======================================
OVERRIDE: SPACING AFTER EDITORS PICKS
Force 10px spacing - MUST come after conflicting rules
======================================= */
body.home .main .content.full .page-section.what-we-do-section,
body.home .page-section.what-we-do-section,
.home .main .content.full .page-section.what-we-do-section,
.home .page-section.what-we-do-section {
margin-top: 10px !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.home br {
line-height: 0 !important;
display: none !important;
}
.spacer-20,
.spacer-30,
.spacer-40,
.spacer-50 {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#featured-properties {
margin-bottom: 10px !important;
padding-bottom: 0 !important;
}
/* Turkey map spacing */
.page-section img[alt="Turkiye Map"],
.home .page-section img[alt="Turkiye Map"] {
margin: 0 !important;
padding: 0 !important;
}
/* ============================================================
2 β ADVANCED SEARCH DEFAULT STATE
============================================================ */
.advanced-search-box {
display: none;
padding: 20px 20px !important;
height: auto !important;
overflow: visible !important;
}
.advanced-search-box.search-open {
display: block !important;
}
@media (max-width: 991px) {
/* Hide advanced search on mobile */
.advanced-search-toggle,
.advanced-search-box {
display: none !important;
}
/* CRITICAL: Override absolute positioning from style.css line 1166-1173 */
/* The desktop CSS sets position:absolute with bottom:-220px which hides it on mobile */
/* Use very specific selectors to override all possible conflicts */
body.home .site-search-module,
body.home .page-section .site-search-module,
.body .site-search-module,
.body .page-section .site-search-module,
div.site-search-module,
.site-search-module {
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
width: 100% !important;
z-index: 100 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
background: rgba(255, 255, 255, 0.40) !important;
backdrop-filter: blur(18px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
border-radius: 18px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
}
/* Override site-search-module-inside height and positioning */
.site-search-module-inside {
height: auto !important;
padding: 15px !important;
background: #fff !important;
border-radius: 0 !important;
position: relative !important;
display: block !important;
visibility: visible !important;
}
/* Ensure container is visible */
.site-search-module .container {
display: block !important;
visibility: visible !important;
width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Ensure page-section wrapper is visible and doesn't clip */
.page-section {
position: relative !important;
overflow: visible !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
}
/* Ensure site-showcase doesn't block or clip search module */
.site-showcase {
overflow: visible !important;
position: relative !important;
height: auto !important;
min-height: 0 !important;
}
/* Ensure search form is visible */
.site-search-module form,
.site-search-module .form-group,
.site-search-module .row {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
}
/* Stack all columns on mobile */
.site-search-module .col-md-3,
.site-search-module .col-md-9,
.site-search-module .col-md-2,
.site-search-module .col-md-1 {
width: 100% !important;
float: none !important;
display: block !important;
margin-bottom: 12px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Title styling */
.site-search-module h3,
.site-search-module .col-md-3 h3 {
font-size: 18px !important;
margin: 3px 0 20px 0 !important;
padding: 3px 15px 0 15px !important;
}
/* Dropdowns full width - unified style */
.site-search-module select,
.site-search-module .selectpicker,
.site-search-module .bootstrap-select,
.site-search-module .form-control {
width: 100% !important;
display: block !important;
margin-bottom: 12px !important;
border-radius: 8px !important;
padding: 10px 14px !important;
min-height: 44px !important;
}
/* Search button full width - unified style */
.site-search-module button[type="submit"],
.site-search-module .btn-primary {
width: 100% !important;
display: block !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: #1a3a7a !important;
border-color: #1a3a7a !important;
border-radius: 8px !important;
min-height: 44px !important;
}
}
/* ============================================================
3 β CHIP WRAPPER & LAYOUT
============================================================ */
.advanced-search-box .list-inline.popsearch {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 0 !important;
margin: 5px 0 !important;
}
/* ============================================================
4 β CHIP STYLE (SPAN.applied)
============================================================ */
.adv-chip {
display: inline-flex !important;
align-items: center !important;
background: #e6e6e6 !important;
padding: 8px 14px !important;
border-radius: 6px !important;
font-size: 15px !important;
line-height: 1.3 !important;
color: #333 !important;
cursor: pointer !important;
white-space: normal !important;
max-width: 100% !important;
margin: 3px !important;
height: auto !important;
}
.adv-chip:hover {
background: #d5d5d5 !important;
}
/* ============================================================
5 β FULL GREEN WHEN SELECTED
============================================================ */
.adv-chip.active {
background-color: #2ecc71 !important;
color: #fff !important;
border: 1px solid #27ae60 !important;
box-shadow: none !important;
}
.adv-chip.active:hover,
.adv-chip.active:focus,
.adv-chip.active:active {
background-color: #2ecc71 !important;
color: #fff !important;
}
/* ============================================================
6 β SEARCH BUTTON
============================================================ */
.adv-search-submit-wrapper {
width: 100%;
text-align: right;
margin-top: 20px;
}
.adv-search-submit-btn {
background: #08255d;
color: #fff;
border: none;
padding: 10px 22px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
}
.adv-search-submit-btn:hover {
background: #0a377e;
}
/* BASE CHIP (neutral state) */
.adv-chip {
display: inline-block !important;
background: #e6e6e6 !important;
color: #333 !important;
padding: 10px 16px !important;
margin: 6px !important;
border-radius: 6px !important;
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 500 !important;
border: 1px solid #ccc !important;
white-space: nowrap !important;
overflow: visible !important; /* β FIX CUT TEXT */
vertical-align: middle !important; /* β FIX BASELINE CUT */
}
/* HOVER */
.adv-chip:hover {
background: #d5d5d5 !important;
}
/* ACTIVE CHIP β FULL GREEN + READABLE */
.adv-chip.active {
background: #2ecc71 !important;
color: #fff !important;
border: 1px solid #27ae60 !important;
padding: 10px 16px !important; /* β FIX CLIPPING */
line-height: 1.4 !important; /* β FIX CLIPPING */
overflow: visible !important; /* β FIX CLIPPING */
}
/* MAKE THE WHOLE ADVANCED SEARCH BOX TALLER */
.advanced-search-box {
display: none;
padding: 30px 30px !important;
height: auto !important;
min-height: 420px !important; /* β BIGGER HEIGHT */
overflow: visible !important; /* β UNLOCK SPACE */
}
/* WHEN OPEN β FORCE FULL EXPANSION */
.advanced-search-box.search-open {
display: block !important;
height: auto !important;
min-height: 420px !important;
overflow: visible !important;
}
/* THE WRAPPER OF THE CHIPS MUST EXPAND */
.list-inline.popsearch {
height: auto !important;
min-height: 60px !important;
overflow: visible !important;
flex-wrap: wrap !important;
}
/* ======================================
1 β POPSEARCH LIST UNLOCK HEIGHT
====================================== */
.advanced-search-box .list-inline.popsearch {
display: flex !important;
flex-wrap: wrap !important;
height: auto !important;
min-height: 0 !important; /* remove theme minimums */
max-height: none !important; /* allow full expansion */
overflow: visible !important; /* remove clipping */
padding: 0 !important;
margin: 10px 0 !important;
gap: 10px !important;
}
/* Each LI also must be free */
.advanced-search-box .list-inline.popsearch li {
display: flex !important;
height: auto !important;
overflow: visible !important;
}
/* ======================================
2 β CHIP ITSELF MUST NOT CLIP
====================================== */
.adv-chip,
.advanced-search-box .list-inline.popsearch li a {
display: inline-flex !important;
align-items: center !important;
padding: 10px 16px !important;
white-space: normal !important; /* allow multi-line */
height: auto !important;
overflow: visible !important; /* CRITICAL */
max-width: 100% !important;
}
/* Selected chip full green */
.adv-chip.active {
background: #2ecc71 !important;
color: #fff !important;
border: 1px solid #27ae60 !important;
}
/* Scope overflow rules to listing/guide pages only */
.location-page .content.full,
.location-page .page-section,
.guide-page .content.full,
.guide-page .page-section {
overflow: visible !important;
}
/* =======================================
PREMIUM CARD STYLE β CLEAN & OPTIMIZED
======================================= */
/* CARD WRAPPER - SCOPE to listing pages only (removed guide-page to allow 2-column grid) */
.location-page .col-md-12.col-sm-12.box-desktop-size {
background: #fff;
border-radius: 12px;
padding: 22px 24px 28px 24px;
margin-bottom: 35px;
box-shadow: 0px 6px 18px rgba(0,0,0,0.10);
border: 1px solid #eee;
transition: all .25s ease;
display: flex;
flex-direction: column;
gap: 15px;
}
/* OVERRIDE: Remove guide-page rules that break 2-column grid */
.guide-page .col-md-12.col-sm-12.box-desktop-size {
display: block !important;
flex-direction: unset !important;
gap: 0 !important;
}
/* CARD HOVER - SCOPE to listing pages only */
.location-page .col-md-12.col-sm-12.box-desktop-size:hover {
transform: translateY(-4px);
box-shadow: 0px 12px 32px rgba(0,0,0,0.18);
}
/* TITLE - SCOPE to listing pages only */
.location-page .col-md-12.col-sm-12.box-desktop-size h2 {
font-size: 23px;
font-weight: 600;
color: #222;
margin: 0;
font-family: "Montserrat", sans-serif;
}
/* DATE - SCOPE to listing pages only */
.location-page .col-md-12.col-sm-12.box-desktop-size h2 small {
color: #999 !important;
font-size: 13px;
margin-left: 10px;
}
/* =======================================
FLEX ROW FOR IMAGE + TEXT (DESKTOP)
SCOPE to listing/guide pages only
======================================= */
.location-page .content-row,
.guide-page .content-row {
display: flex;
flex-direction: row;
align-items: flex-start; /* <-- Align text top with image */
gap: 22px;
}
/* IMAGE COLUMN - SCOPE to listing/guide pages only */
.location-page .content-row .col-md-5.col-sm-6,
.guide-page .content-row .col-md-5.col-sm-6 {
width: 230px;
flex-shrink: 0;
padding: 0 !important;
}
/* IMAGE STYLE - SCOPE to listing/guide pages only */
.location-page .content-row img,
.guide-page .content-row img {
width: 100%;
border-radius: 10px;
object-fit: cover;
transition: .25s ease;
}
.location-page .col-md-12.col-sm-12.box-desktop-size:hover img,
.guide-page .col-md-12.col-sm-12.box-desktop-size:hover img {
transform: scale(1.04);
}
/* TEXT COLUMN - SCOPE to listing/guide pages only */
.location-page .content-row .col-md-7.col-sm-6,
.guide-page .content-row .col-md-7.col-sm-6 {
flex: 1;
padding: 0 !important;
}
/* TEXT - SCOPE to listing/guide pages only */
.location-page .content-row p,
.guide-page .content-row p {
font-size: 16px;
line-height: 1.65;
color: #555;
margin: 0;
font-family: "Montserrat", sans-serif;
}
/* =======================================
MOBILE VERSION
======================================= */
@media (max-width: 767px) {
/* SCOPE to listing/guide pages only */
.location-page .content-row,
.guide-page .content-row {
flex-direction: column;
gap: 10px;
}
.location-page .content-row .col-md-5.col-sm-6,
.location-page .content-row .col-md-7.col-sm-6,
.guide-page .content-row .col-md-5.col-sm-6,
.guide-page .content-row .col-md-7.col-sm-6 {
width: 100% !important;
}
/* SCOPE to listing pages only */
.location-page .col-md-12.col-sm-12.box-desktop-size {
padding: 16px;
gap: 12px;
}
/* OVERRIDE: Guide page mobile - ensure full width */
.guide-page .col-md-6.col-sm-6 {
width: 100% !important;
float: none !important;
margin-bottom: 20px !important;
}
.location-page .content-row img,
.guide-page .content-row img {
margin-bottom: 5px;
width: 100%;
}
.location-page .col-md-12.col-sm-12.box-desktop-size h2,
.guide-page .col-md-12.col-sm-12.box-desktop-size h3.guide-title {
font-size: 20px;
}
}
/* Reduce gap - SCOPE to listing/guide pages only */
.location-page .col-md-12.col-sm-12.box-desktop-size,
.guide-page .col-md-12.col-sm-12.box-desktop-size {
margin-bottom: 20px !important;
}
/* Make column spacing uniform - SCOPE to listing/guide pages only */
.location-page .row,
.guide-page .row {
row-gap: 20px;
}
/* Remove Bootstrap leftover spacing - SCOPE to listing pages only */
.location-page .col-md-6.col-sm-6 {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* OVERRIDE: Ensure guide-page columns work for 2-column grid */
.guide-page .col-md-6.col-sm-6 {
width: 50% !important;
float: left !important;
display: block !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
position: relative !important;
min-height: 1px !important;
margin-bottom: 20px !important;
padding-bottom: 0 !important;
}
/* Make entire guide card clickable - SCOPE to listing/guide pages only */
.location-page .box-desktop-size,
.guide-page .box-desktop-size {
position: relative;
}
.location-page .box-desktop-size a.full-link,
.guide-page .box-desktop-size a.full-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
.location-page .box-desktop-size h2 a,
.location-page .box-desktop-size p a,
.guide-page .box-desktop-size h3.guide-title a,
.guide-page .box-desktop-size p a {
pointer-events: none; /* avoid double click */
}
/* ============================================================
SHOWCASE WHITE GAP FIX - CSS ONLY (NO JAVASCRIPT)
============================================================ */
/* Hide showcase ONLY on listing, guide and generic pages */
body.archive .site-showcase,
body.tax-property_location .site-showcase,
body.page-template-guide .site-showcase,
body.search .site-showcase,
.location-page .site-showcase,
.guide-page .site-showcase {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* DO NOT hide showcase on property detail pages */
html.property-listing-page .site-showcase {
display: block !important;
height: auto !important;
min-height: auto !important;
padding: initial !important;
margin: initial !important;
overflow: visible !important;
}
/* Ensure main content area is visible on property detail pages */
html.property-listing-page .main,
html.property-listing-page #content.content.full,
html.property-listing-page .main .row {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
html.property-listing-page .main .row::after {
content: "";
display: table;
clear: both;
}
html.property-listing-page .main .col-md-9 {
display: block !important;
float: left !important;
width: 75% !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
html.property-listing-page .main .col-md-3 {
display: block !important;
float: left !important;
width: 25% !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
html.property-listing-page .single-property {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
/* Ensure header and footer containers have proper constraints */
html.property-listing-page .site-header .container,
html.property-listing-page .top-header .container,
html.property-listing-page .middle-header .container,
html.property-listing-page .main-menu-wrapper .container,
html.property-listing-page footer .container,
html.property-listing-page .site-footer .container,
html.property-listing-page .site-header .container,
html.property-listing-page .top-header .container,
html.property-listing-page .middle-header .container,
html.property-listing-page .main-menu-wrapper .container,
html.property-listing-page footer .container,
html.property-listing-page .site-footer .container {
width: 100% !important;
max-width: 1170px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
/* FOOTER OVERRIDE: Remove container constraints to allow full-width footer grid */
html.property-listing-page .site-footer-bottom1 .container,
html.property-listing-page .site-footer-bottom1,
html.property-listing-page .yu-footer {
max-width: 100% !important;
width: 100% !important;
}
/* Ensure header and footer wrappers don't stretch */
html.property-listing-page .site-header,
html.property-listing-page .top-header,
html.property-listing-page .middle-header,
html.property-listing-page .main-menu-wrapper,
html.property-listing-page footer,
html.property-listing-page .site-footer,
html.property-listing-page .site-footer-bottom1 {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Ensure content containers have proper layout */
html.property-listing-page .main .container {
display: block !important;
width: 100% !important;
max-width: 1170px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
html.property-listing-page .main .row {
display: block !important;
margin-left: -15px !important;
margin-right: -15px !important;
}
/* Fix horizontal overflow on mobile - remove negative margins */
@media (max-width: 767px) {
/* Global overflow prevention */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
position: relative !important;
left: 0 !important; /* Ensure no left shift */
right: 0 !important; /* Ensure no right shift */
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Fix container and row overflow - optimized for performance */
.container,
.container-fluid {
max-width: 100vw !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Fix Bootstrap row negative margins that cause overflow */
.row {
max-width: calc(100% + 0px) !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Fix any columns that might overflow */
[class*="col-"] {
max-width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
/* Fix property listing page row overflow */
html.property-listing-page .main .row {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure container doesn't overflow on mobile */
html.property-listing-page .main .container {
padding-left: 15px !important;
padding-right: 15px !important;
width: 100% !important;
max-width: 100% !important;
}
/* Fix header overflow - NO SCROLLING */
.site-header,
.top-header,
.middle-header,
.main-menu-wrapper,
header.site-header,
header.site-header .container,
.top-header .container,
.middle-header .container {
max-width: 100% !important;
width: 100% !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
position: relative !important;
}
/* Fix flags container overflow */
.horiz-nav.flagpoints,
.horiz-nav.flagpoints li,
.horiz-nav.flagpoints li a {
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* Fix property cards and galleries - ensure full width on mobile */
/* ============================================================
GALLERY RESTORATION - Mobile Property Detail Page
Remove conflicting rules and restore flexslider functionality
============================================================ */
/* Clean gallery rules - no height constraints */
.property-images-modern,
.property-thumbs-modern {
width: 100%;
}
.property-images-modern .slides img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
.property-thumbs-modern .slides img {
width: 100px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.flexslider .flex-direction-nav a {
opacity: 1 !important;
}
.flexslider .slides > li {
margin: 0;
}
.property-grid-related,
.related-properties-list,
.property-card,
.listing-card {
max-width: 100% !important;
width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* Fix images - prevent overflow and layout shifts */
img,
.img-responsive,
img.img-responsive {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
display: block !important;
object-fit: contain !important;
}
/* Prevent layout shifts - ensure images have aspect ratio */
img[width][height] {
aspect-ratio: attr(width) / attr(height);
}
/* Fix property detail layout on mobile - but DON'T affect gallery */
html.property-listing-page .property-detail-layout {
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
gap: 0 !important;
overflow-x: hidden !important;
}
html.property-listing-page .property-detail-layout .left-column,
html.property-listing-page .property-detail-layout .right-column {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Prevent any element with position absolute from causing overflow */
[class*="col-"],
.col-xs-12,
.col-sm-12,
.col-md-12 {
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Fix sliders and carousels */
/* Fix sliders and carousels - exclude gallery from forced overflow rules */
/* Exclude featured-properties from overflow-x: auto to prevent conflicts */
.owl-carousel:not(#featured-properties .owl-carousel) {
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
box-sizing: border-box !important;
-webkit-overflow-scrolling: touch !important;
}
/* Featured properties should NOT have overflow-x: auto */
#featured-properties .owl-carousel {
overflow-x: hidden !important;
overflow-y: hidden !important;
}
/* Ensure flexslider is visible and working on mobile - EXCLUDE HERO SLIDER */
/* Hero slider needs flexslider's native display control for slideshow */
.flexslider:not(.hero-slider) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
}
.flexslider:not(.hero-slider) .slides {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.flexslider:not(.hero-slider) .slides li {
display: list-item !important;
visibility: visible !important;
opacity: 1 !important;
float: left !important;
}
.flexslider:not(.hero-slider) .slides img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Critical: Prevent elements from exceeding viewport width (selective) */
/* EXCEPTION: Gallery elements excluded - let flexslider calculate widths naturally */
body > *:not(.property-slider-modern):not(.property-images-modern):not(#property-images):not(.property-thumbs-modern):not(#property-thumbs),
.container:not(:has(.property-slider-modern)),
.container-fluid:not(:has(.property-slider-modern)),
.row:not(:has(.property-slider-modern)),
[class*="col-"]:not(:has(.property-slider-modern)),
img:not(html.property-listing-page .property-slider-modern img):not(html.property-listing-page .property-images-modern img):not(html.property-listing-page #property-images img):not(html.property-listing-page .property-thumbs-modern img):not(html.property-listing-page #property-thumbs img),
.img-responsive:not(html.property-listing-page .property-slider-modern .img-responsive):not(html.property-listing-page .property-images-modern .img-responsive):not(html.property-listing-page #property-images .img-responsive),
.property-detail-layout:not(:has(.property-slider-modern)),
.site-header,
.site-footer,
.yu-footer {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* CRITICAL: Explicitly exclude gallery from max-width rules - let flexslider calculate widths */
html.property-listing-page .property-slider-modern,
html.property-listing-page .property-images-modern,
html.property-listing-page #property-images,
html.property-listing-page .property-thumbs-modern,
html.property-listing-page #property-thumbs {
/* DO NOT apply max-width: 100% to these - let flexslider calculate widths naturally */
box-sizing: border-box !important;
}
/* Smooth scrolling optimization - critical for performance */
html, body {
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: none !important; /* Prevent horizontal bounce/scroll */
overscroll-behavior-y: auto !important; /* Allow pull-to-refresh on mobile */
transform: translateZ(0) !important; /* Force GPU acceleration */
}
/* Prevent horizontal scroll completely - optimized approach */
html {
position: relative !important;
width: 100% !important;
overflow-x: hidden !important;
}
body {
position: relative !important;
width: 100% !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
}
html.property-listing-page .main .row::after,
html.property-listing-page .main .row::before {
content: "";
display: table;
clear: both;
}
html.property-listing-page .main .col-md-9 {
display: block !important;
float: left !important;
width: 75% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
html.property-listing-page .main .col-md-3 {
display: block !important;
float: right !important;
width: 25% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ============================================================
PROPERTY DETAIL PAGE - MODERN DESIGN
Match location.php listing style exactly
============================================================ */
/* 1. CONTAINER & LAYOUT - Center content with max-width 1220px */
html.property-listing-page .property-detail-wrapper {
max-width: 1220px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: 24px !important;
overflow: visible !important;
}
/* 2. PROPERTY SLIDER - Modernize */
html.property-listing-page .property-slider-modern {
background: #ffffff;
border-radius: 12px;
padding: 0;
margin-bottom: 32px;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
overflow: visible !important;
position: relative !important;
display: block !important; /* Changed from flex to block for sticky to work */
}
/* Hide hero slider on mobile homepage */
@media (max-width: 767px) {
body.home .site-showcase,
html.home .site-showcase,
body.home .hero-slider,
html.home .hero-slider {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* CRITICAL: Override flexslider default CSS that hides slides - ONLY PROPERTY GALLERY, NOT HERO SLIDER */
/* EXCLUDE hero-slider - it needs flexslider's native display control for slideshow to work */
#property-images.flexslider .slides > li,
.property-images-modern.flexslider .slides > li,
#property-images.flexslider .slides li,
.property-images-modern.flexslider .slides li {
display: block !important; /* Override flexslider's default display:none */
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
float: left !important;
}
/* Ensure ALL slides are visible, not just first - ONLY PROPERTY GALLERY */
#property-images.flexslider .slides > li.flex-active-slide,
.property-images-modern.flexslider .slides > li.flex-active-slide {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* HERO SLIDER - Must use flexslider's native display control for slideshow to work */
/* Flexslider controls display automatically - no CSS needed */
/* Hide flexslider loading spinner background */
.flexslider {
background: none !important;
background-image: none !important;
}
/* Ensure property images flexslider doesn't show loader */
html.property-listing-page .property-images-modern.flexslider,
html.property-listing-page #property-images.flexslider {
background: none !important;
background-image: none !important;
}
/* CRITICAL: Restore Flexslider-native behavior - NO height constraints */
.flexslider {
overflow: hidden !important;
}
.flex-viewport {
height: auto !important;
}
/* Clean gallery rules - ensure no collapsed height */
/* CRITICAL: Ensure thumbnails are BELOW gallery, not overlapping */
html.property-listing-page .property-slider-modern {
display: flex !important;
flex-direction: column !important; /* Stack gallery and thumbnails vertically */
position: relative !important;
}
/* Gallery container - first in order */
html.property-listing-page .property-slider-modern #property-images,
html.property-listing-page .property-slider-modern .property-images-modern {
order: 1 !important; /* Gallery first */
position: relative !important;
z-index: 2 !important;
width: 100% !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Thumbnails container - MUST be below gallery */
/* CRITICAL: Fix thumbnail slider - allow flexslider width calculations */
html.property-listing-page .property-thumbs-modern,
html.property-listing-page #property-thumbs {
order: 2 !important; /* Thumbnails second (below gallery) */
position: relative !important;
z-index: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 12px !important; /* Space between gallery and thumbnails */
margin-bottom: 0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
display: block !important;
clear: both !important; /* Clear any floats from gallery */
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
overflow: visible !important; /* CRITICAL: Allow flexslider width calculations */
overflow-x: auto !important; /* Enable horizontal scrolling */
box-sizing: border-box !important;
}
/* CRITICAL: Fix thumbnail viewport - let flexslider calculate width */
html.property-listing-page .property-thumbs-modern .flex-viewport,
html.property-listing-page #property-thumbs .flex-viewport {
width: auto !important; /* Let flexslider calculate */
max-width: 100% !important;
overflow: visible !important;
overflow-x: auto !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
}
/* CRITICAL: Fix thumbnail slides container - allow width calculation */
html.property-listing-page .property-thumbs-modern .slides,
html.property-listing-page #property-thumbs .slides {
width: auto !important; /* Let flexslider calculate total width */
display: block !important;
visibility: visible !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
position: relative !important;
white-space: nowrap !important;
}
/* CRITICAL: Fix thumbnail items - flexslider needs 80px width + 5px margin */
html.property-listing-page .property-thumbs-modern .slides li,
html.property-listing-page #property-thumbs .slides li,
html.property-listing-page .property-thumbs-modern .slides .item,
html.property-listing-page #property-thumbs .slides .item {
width: 80px !important; /* Flexslider itemWidth: 80 */
min-width: 80px !important;
max-width: 80px !important;
margin-right: 5px !important; /* Flexslider itemMargin: 5 */
margin-left: 0 !important;
visibility: visible !important;
opacity: 1 !important;
list-style: none !important;
float: left !important; /* Flexslider requires float */
position: relative !important;
flex: 0 0 80px !important;
}
/* CRITICAL: Fix thumbnail images - NOT 100% width, use fixed 80px */
html.property-listing-page .property-thumbs-modern img,
html.property-listing-page #property-thumbs img,
html.property-listing-page .property-thumbs-modern .slides img,
html.property-listing-page #property-thumbs .slides img,
html.property-listing-page .property-thumbs-modern .slides li img,
html.property-listing-page #property-thumbs .slides li img {
width: 80px !important; /* Fixed width to match flexslider itemWidth */
min-width: 80px !important;
max-width: 80px !important;
height: 60px !important; /* Match original thumbnail height */
object-fit: cover !important;
object-position: center center !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
border-radius: 8px !important;
border: 1px solid #e5e7eb !important;
cursor: pointer !important;
}
/* Clean gallery rules - ensure no collapsed height */
}
html.property-listing-page .property-images-modern {
border-radius: 12px 12px 0 0;
overflow: hidden;
position: relative;
}
/* =====================================================
ZILLOW GALLERY - Clean SwiperJS
===================================================== */
.zillow-gallery,
.gallery-container {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 20px;
position: relative !important;
overflow: visible !important;
box-sizing: border-box !important;
/* CRITICAL: Prevent gallery from expanding */
flex-shrink: 0 !important;
flex-grow: 0 !important;
display: block !important;
}
/* Gallery Price Badge Wrapper - Sticky positioning */
/* Maximum specificity to override any conflicting rules */
html.property-listing-page .property-slider-modern .zillow-gallery .gallery-price-wrapper,
html.property-listing-page .property-slider-modern .gallery-container .gallery-price-wrapper,
html.property-listing-page .zillow-gallery .gallery-price-wrapper,
html.property-listing-page .gallery-container .gallery-price-wrapper,
.property-slider-modern .zillow-gallery .gallery-price-wrapper,
.property-slider-modern .gallery-container .gallery-price-wrapper,
.zillow-gallery .gallery-price-wrapper,
.gallery-container .gallery-price-wrapper,
.gallery-price-wrapper {
position: sticky !important;
top: 20px !important; /* Mobile default */
right: 20px !important;
z-index: 150 !important;
width: fit-content !important;
margin-left: auto !important;
margin-right: 20px !important;
margin-bottom: -60px !important;
margin-top: 20px !important;
float: right !important;
align-self: flex-start !important;
display: block !important;
visibility: visible !important;
}
/* Ensure parent containers allow sticky positioning */
.zillow-gallery,
.gallery-container,
.property-slider-modern {
position: relative !important;
overflow: visible !important; /* Allow sticky to work */
height: auto !important; /* Ensure container has height for sticky */
}
/* Override any inline styles or JavaScript that might set position to static */
html.property-listing-page .gallery-price-wrapper[style*="position"],
.gallery-price-wrapper[style*="position"],
.gallery-price-wrapper[style] {
position: sticky !important;
}
/* Desktop: Price badge should be at same height as menu bar */
@media screen and (min-width: 768px) {
html.property-listing-page .property-slider-modern .zillow-gallery .gallery-price-wrapper,
html.property-listing-page .property-slider-modern .gallery-container .gallery-price-wrapper,
html.property-listing-page .zillow-gallery .gallery-price-wrapper,
html.property-listing-page .gallery-container .gallery-price-wrapper,
.property-slider-modern .zillow-gallery .gallery-price-wrapper,
.property-slider-modern .gallery-container .gallery-price-wrapper,
.zillow-gallery .gallery-price-wrapper,
.gallery-container .gallery-price-wrapper,
.gallery-price-wrapper {
top: 60px !important; /* Match menu bar height (approximately 50-60px) */
}
}
.price-badge {
background: #33cc66 !important; /* Same green as city hubs listings */
color: #fff !important;
padding: 12px 22px !important;
font-size: 18px !important;
font-weight: 700 !important;
border-radius: 30px !important;
display: inline-block !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
white-space: nowrap;
}
/* Gallery wrapper for sticky badge */
.property-slider-modern {
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
/* CRITICAL: Prevent container from expanding */
flex-shrink: 0 !important;
flex-grow: 0 !important;
display: block !important;
}
/* Swiper containers - CORRECT LAYOUT (don't override Swiper's transform) */
.zillow-gallery .swiper,
.gallery-container .swiper {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
}
/* Zillow-style rounded corners for main swiper */
.zillow-gallery .main-swiper,
.gallery-container .main-swiper {
border-radius: 12px !important;
overflow: hidden !important; /* Clip overflow but allow Swiper transforms */
}
/* Don't override Swiper's transform - let Swiper control it */
.zillow-gallery .swiper-wrapper,
.gallery-container .swiper-wrapper {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
/* NOTE: overflow: hidden is on .main-swiper container, not wrapper, to allow Swiper transforms */
}
.zillow-gallery .swiper-slide,
.gallery-container .swiper-slide {
flex-shrink: 0 !important;
width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.zillow-gallery .swiper-slide img,
.gallery-container .swiper-slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Main Swiper - Premium Zillow-Style Height (+26% increase, reduced by 10%) */
.main-swiper,
.swiper-main {
width: 100% !important;
max-width: 100% !important;
height: calc(55vh * 1.26) !important; /* Reduced by 10%: 1.4 * 0.9 = 1.26 (69.3vh) */
min-height: calc(600px * 1.26) !important; /* Reduced by 10%: 840px * 0.9 = 756px */
max-height: calc(720px * 1.26) !important; /* Reduced by 10%: 1008px * 0.9 = 907.2px */
margin-bottom: 15px;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
border-radius: 12px !important; /* Zillow-style rounded corners */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Zillow-style shadow */
/* CRITICAL: Lock height to prevent white space */
flex-shrink: 0 !important;
flex-grow: 0 !important;
}
/* Main swiper specific overrides - Correct layout */
.main-swiper .swiper-wrapper {
height: 100% !important;
display: flex !important;
width: auto !important; /* Allow Swiper to calculate width for loop mode */
/* Don't override transform - let Swiper control it */
/* CRITICAL: Prevent wrapper from expanding */
flex-shrink: 0 !important;
flex-grow: 0 !important;
position: relative !important;
/* NOTE: overflow: hidden is on .main-swiper container, not wrapper, to allow Swiper transforms */
}
.main-swiper .swiper-slide {
flex-shrink: 0 !important;
flex-grow: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important; /* Allow images to display properly */
box-sizing: border-box !important;
border-radius: 12px !important; /* Ensure slide respects rounded corners */
/* CRITICAL: Lock slide dimensions to prevent white space */
position: relative !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important; /* Ensure slides are visible */
visibility: visible !important; /* Ensure slides are visible */
}
.main-swiper .swiper-slide img,
.swiper-main .swiper-slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
border-radius: 12px !important; /* Zillow-style rounded corners */
/* CRITICAL: Ensure images are always visible */
position: relative !important;
z-index: 1 !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Thumbnail Swiper */
.thumb-swiper {
width: 100% !important;
max-width: 100% !important;
margin-top: 10px;
overflow: hidden !important;
box-sizing: border-box !important;
}
.thumb-swiper .swiper-wrapper {
display: flex !important;
width: auto !important;
/* Let Swiper control transform */
}
.thumb-swiper .swiper-slide {
flex-shrink: 0 !important;
width: auto !important;
height: 80px !important;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s ease;
box-sizing: border-box !important;
}
.thumb-swiper .swiper-slide:hover {
opacity: 1;
}
.thumb-swiper .swiper-slide-thumb-active {
opacity: 1;
}
.thumb-swiper img {
width: 100% !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 6px !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Navigation - ALWAYS VISIBLE - OVERRIDE ALL SWIPER DEFAULTS */
.main-swiper .swiper-button-next,
.main-swiper .swiper-button-prev,
.zillow-gallery .main-swiper .swiper-button-next,
.zillow-gallery .main-swiper .swiper-button-prev,
.gallery-container .main-swiper .swiper-button-next,
.gallery-container .main-swiper .swiper-button-prev {
color: #fff !important;
background: rgba(0, 0, 0, 0.5) !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 250 !important;
position: absolute !important;
cursor: pointer !important;
pointer-events: auto !important;
margin-top: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
/* CRITICAL: Override Swiper's disabled state */
opacity: 1 !important;
display: flex !important;
}
/* Position buttons */
.main-swiper .swiper-button-prev,
.zillow-gallery .main-swiper .swiper-button-prev,
.gallery-container .main-swiper .swiper-button-prev {
left: 10px !important;
right: auto !important;
}
.main-swiper .swiper-button-next,
.zillow-gallery .main-swiper .swiper-button-next,
.gallery-container .main-swiper .swiper-button-next {
right: 10px !important;
left: auto !important;
}
/* Override Swiper's disabled state */
.main-swiper .swiper-button-next.swiper-button-disabled,
.main-swiper .swiper-button-prev.swiper-button-disabled,
.zillow-gallery .main-swiper .swiper-button-next.swiper-button-disabled,
.zillow-gallery .main-swiper .swiper-button-prev.swiper-button-disabled,
.gallery-container .main-swiper .swiper-button-next.swiper-button-disabled,
.gallery-container .main-swiper .swiper-button-prev.swiper-button-disabled {
opacity: 0.5 !important;
cursor: pointer !important;
pointer-events: auto !important;
display: flex !important;
visibility: visible !important;
}
/* Style the FontAwesome icons inside buttons - PRIMARY METHOD */
.main-swiper .swiper-button-next .fa,
.main-swiper .swiper-button-prev .fa,
.zillow-gallery .main-swiper .swiper-button-next .fa,
.zillow-gallery .main-swiper .swiper-button-prev .fa,
.gallery-container .main-swiper .swiper-button-next .fa,
.gallery-container .main-swiper .swiper-button-prev .fa {
font-size: 20px !important;
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Hide Swiper's default :after when we have HTML icons */
.main-swiper .swiper-button-next:has(.fa):after,
.main-swiper .swiper-button-prev:has(.fa):after,
.zillow-gallery .main-swiper .swiper-button-next:has(.fa):after,
.zillow-gallery .main-swiper .swiper-button-prev:has(.fa):after,
.gallery-container .main-swiper .swiper-button-next:has(.fa):after,
.gallery-container .main-swiper .swiper-button-prev:has(.fa):after {
display: none !important;
content: '' !important;
}
/* Fallback: Use :after with FontAwesome font if no HTML icon */
.main-swiper .swiper-button-next:after,
.main-swiper .swiper-button-prev:after,
.zillow-gallery .main-swiper .swiper-button-next:after,
.zillow-gallery .main-swiper .swiper-button-prev:after,
.gallery-container .main-swiper .swiper-button-next:after,
.gallery-container .main-swiper .swiper-button-prev:after {
font-size: 20px !important;
font-family: 'FontAwesome' !important;
font-weight: normal !important;
font-style: normal !important;
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
line-height: 1 !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.main-swiper .swiper-button-prev:after,
.zillow-gallery .main-swiper .swiper-button-prev:after,
.gallery-container .main-swiper .swiper-button-prev:after {
content: '\f053' !important; /* FontAwesome 4 fa-chevron-left */
}
.main-swiper .swiper-button-next:after,
.zillow-gallery .main-swiper .swiper-button-next:after,
.gallery-container .main-swiper .swiper-button-next:after {
content: '\f054' !important; /* FontAwesome 4 fa-chevron-right */
}
.main-swiper .swiper-button-next:hover,
.main-swiper .swiper-button-prev:hover,
.zillow-gallery .main-swiper .swiper-button-next:hover,
.zillow-gallery .main-swiper .swiper-button-prev:hover,
.gallery-container .main-swiper .swiper-button-next:hover,
.gallery-container .main-swiper .swiper-button-prev:hover {
background: rgba(0, 0, 0, 0.7) !important;
opacity: 1 !important;
}
.main-swiper .swiper-pagination-bullet {
background: rgba(255, 255, 255, 0.8);
}
.main-swiper .swiper-pagination-bullet-active {
background: #fff;
}
/* --- CRITICAL: Force navigation buttons to be visible --- */
.swiper-button-next,
.swiper-button-prev,
.main-swiper .swiper-button-next,
.main-swiper .swiper-button-prev,
.zillow-gallery .swiper-button-next,
.zillow-gallery .swiper-button-prev,
.gallery-container .swiper-button-next,
.gallery-container .swiper-button-prev {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* --- Remove blue/focus highlight from gallery elements --- */
.swiper-slide,
.swiper-wrapper,
.swiper-container,
.zillow-gallery,
.main-swiper,
.thumb-swiper,
.main-swiper img,
.thumb-swiper img {
outline: none !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-focus-ring-color: transparent !important;
}
.swiper-slide {
user-select: none !important;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-button-next:focus,
.swiper-button-prev:focus {
outline: none !important;
box-shadow: none !important;
}
/* Prevent blue selection during swipe */
.swiper-slide img {
user-select: none !important;
-webkit-user-drag: none !important;
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.main-swiper,
.swiper-main {
height: calc(50vh * 1.4) !important; /* 70vh */
min-height: calc(480px * 1.4); /* 672px */
max-height: calc(650px * 1.4); /* 910px */
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.main-swiper,
.swiper-main {
height: calc(45vh * 1.4) !important; /* 63vh */
min-height: calc(400px * 1.4); /* 560px */
max-height: calc(500px * 1.4); /* 700px */
}
.thumb-swiper img {
height: 60px;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.main-swiper,
.swiper-main {
height: calc(40vh * 1.4) !important; /* 56vh */
min-height: calc(350px * 1.4); /* 490px */
max-height: calc(450px * 1.4); /* 630px */
}
}
html.property-listing-page .property-thumbs-modern {
padding: 12px;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
}
html.property-listing-page .property-thumbs-modern .item {
margin: 0 6px;
}
html.property-listing-page .property-thumbs-modern img {
border-radius: 8px;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
cursor: pointer;
width: 100%;
height: 82px;
object-fit: cover;
display: block;
}
html.property-listing-page .property-thumbs-modern img:hover {
border-color: #195385;
transform: scale(1.05);
}
/* 3. PRICE BADGE */
/* Premium floating pill price badge - sticky behavior inside gallery - 25% ENLARGEMENT */
html.property-listing-page .property-slider-modern {
display: block !important;
position: relative !important;
overflow: visible !important;
}
html.property-listing-page .property-images-modern {
position: relative;
}
/* Old price badge styles - keeping for compatibility */
html.property-listing-page .property-slider-modern .property-price-badge,
html.property-listing-page .property-images-modern .property-price-badge,
.property-price-badge {
/* Note: New implementation uses .gallery-price-wrapper and .price-badge */
display: none; /* Hide old badge if it exists */
}
/* Ensure gallery images don't block badge */
html.property-listing-page .property-slider-modern #property-images {
position: relative;
z-index: 1;
}
/* Mobile: 25% enlargement applied, sticky behavior maintained */
@media (max-width: 767px) {
html.property-listing-page .property-slider-modern .property-price-badge,
html.property-listing-page .property-images-modern .property-price-badge {
position: sticky !important;
/* Mobile 25% enlargement: top was 12px, now 15px */
top: 15px !important;
right: 15px !important;
/* Mobile: Additional 15-20% increase on top of 25% base */
/* Base was 8px 15px, font-size 18px - now increase by 20%: 10px 18px, font-size 22px */
padding: 10px 18px !important;
font-size: 22px !important;
border-radius: 15px !important;
margin-right: 15px !important;
margin-top: 15px !important;
/* Mobile 25% enlargement: margin-bottom was -50px, now -63px */
margin-bottom: -63px !important;
/* Mobile: Enhanced shadow for larger size */
box-shadow: 0 3px 13px rgba(0,0,0,0.18) !important;
letter-spacing: 0.13px !important;
}
}
/* 4. DETAILS ICON GRID - Modern flexbox card */
html.property-listing-page .property-details-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e5e7eb;
padding: 24px;
margin-top: 24px;
margin-bottom: 24px;
/* Prevent layout shift when tab is clicked - AGGRESSIVE */
contain: layout style paint;
will-change: auto;
min-height: 0;
/* Force stable layout - prevent reflow */
transform: translateZ(0);
backface-visibility: hidden;
/* Lock dimensions to prevent recalculation */
width: 100%;
box-sizing: border-box;
/* Prevent any layout shifts */
position: relative;
}
html.property-listing-page .detail-icon-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 calc(16.666% - 14px);
min-width: 120px;
text-align: center;
/* Prevent icon movement on tab click - AGGRESSIVE FIX */
position: relative;
will-change: auto;
contain: layout style paint;
/* Force stable positioning - prevent movement */
transform: translateZ(0);
backface-visibility: hidden;
/* Lock position during tab transitions */
transition: none !important;
/* Lock flex properties to prevent recalculation */
flex-basis: calc(16.666% - 14px);
flex-grow: 1;
flex-shrink: 1;
/* Prevent any layout shifts */
box-sizing: border-box;
}
html.property-listing-page .detail-icon {
width: 32px;
height: 32px;
margin-bottom: 8px;
filter: brightness(0) saturate(100%) invert(20%);
/* Prevent icon movement */
display: block;
flex-shrink: 0;
}
/* Prevent layout shift when General Details tab is clicked */
html.property-listing-page #description[data-tab-content="general"] {
/* Force stable layout - prevent any reflow */
contain: layout style paint;
transform: translateZ(0);
backface-visibility: hidden;
/* Lock display mode to prevent flex recalculation */
display: block !important;
/* Prevent any layout changes */
min-height: 0;
overflow: visible;
}
html.property-listing-page #description[data-tab-content="general"].active {
/* When active, maintain block display to prevent flex reflow */
display: block !important;
}
html.property-listing-page #description[data-tab-content="general"] .property-details-grid {
/* Ensure grid doesn't reflow on tab click */
position: relative;
z-index: 1;
/* Lock grid dimensions */
width: 100%;
max-width: 100%;
/* Prevent any flex recalculation */
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
html.property-listing-page .detail-icon-item span {
font-size: 14px;
color: #333;
font-weight: 500;
line-height: 1.4;
}
/* 5. TABS - Modern pill tabs */
html.property-listing-page .tabs-modern {
margin-bottom: 24px;
}
html.property-listing-page .nav-tabs-pills {
display: flex;
gap: 8px;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 8px;
background: #ffffff;
margin-bottom: 0;
list-style: none;
}
html.property-listing-page .nav-tabs-pills li {
margin: 0;
}
html.property-listing-page .nav-tabs-pills li a {
padding: 10px 18px;
border-radius: 8px;
border: none;
background: transparent;
color: #666;
font-weight: 500;
transition: all 0.2s ease;
text-decoration: none;
}
html.property-listing-page .nav-tabs-pills li.active a,
html.property-listing-page .nav-tabs-pills li a:hover {
background: #195385;
color: white;
}
html.property-listing-page .tab-content {
margin-top: 24px;
}
/* 6. DESCRIPTION TEXT */
/* Property Description Section - Complete Styling */
html.property-listing-page .property-description,
html.property-listing-page .property-description-modern {
margin-top: 24px;
margin-bottom: 32px;
padding: 0;
width: 100%;
display: block;
clear: both;
}
html.property-listing-page .property-description .section-title,
html.property-listing-page .property-description-modern .section-title {
font-size: 24px;
font-weight: 600;
color: #111;
margin-bottom: 16px;
margin-top: 0;
padding-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
font-family: "Inter", "SF Pro Display", Arial, sans-serif;
}
html.property-listing-page .property-description-modern {
max-width: 760px;
margin: 40px auto;
line-height: 1.6;
font-size: 16px;
color: #444;
padding: 0 15px;
}
html.property-listing-page .property-description-modern p {
margin-bottom: 16px;
line-height: 1.6;
}
/* Read More / Read Less styling - premium Apple/Sotheby's style - Fixed to prevent gaps */
/* Property Description Section - Complete Styling */
html.property-listing-page .property-description,
html.property-listing-page .property-description-modern {
margin-top: 24px;
margin-bottom: 32px;
padding: 0;
width: 100%;
display: block;
clear: both;
}
html.property-listing-page .property-description .section-title,
html.property-listing-page .property-description-modern .section-title {
font-size: 24px;
font-weight: 600;
color: #111;
margin-bottom: 16px;
margin-top: 0;
padding-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
font-family: "Inter", "SF Pro Display", Arial, sans-serif;
}
/* Property Description Content - Fixed */
html.property-listing-page .property-description-content {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
line-height: 1.7;
color: #333;
font-size: 15px;
width: 100%;
max-width: 100%;
overflow: visible;
}
html.property-listing-page .property-description-content p {
margin-bottom: 12px;
line-height: 1.7;
}
html.property-listing-page .property-description-content .description-wrapper {
display: block;
width: 100%;
}
html.property-listing-page .property-description-content .desc-visible,
html.property-listing-page .property-description-content .desc-hidden,
html.property-listing-page .property-description-content #desc-short,
html.property-listing-page .property-description-content #desc-full {
display: block;
width: 100%;
line-height: 1.7;
color: #333;
}
html.property-listing-page .property-description-content .desc-hidden,
html.property-listing-page .property-description-content #desc-full {
display: none;
}
html.property-listing-page .property-description-content #desc-full[style*="display: block"],
html.property-listing-page .property-description-content .desc-hidden[style*="display: block"] {
display: block !important;
}
/* Read More Button - Below Text (Not Inline) */
html.property-listing-page .property-description-content .btn-read-more,
html.property-listing-page .property-description-content #read-more-btn {
background: transparent !important;
border: none !important;
color: #195385 !important;
text-decoration: underline !important;
cursor: pointer !important;
font-size: 15px !important;
padding: 0 !important;
margin-top: 15px !important;
margin-bottom: 0 !important;
display: inline-block !important;
font-weight: 500 !important;
font-family: inherit !important;
}
html.property-listing-page .property-description-content .btn-read-more:hover,
html.property-listing-page .property-description-content #read-more-btn:hover {
color: #0d3d5c !important;
text-decoration: none !important;
}
html.property-listing-page .property-description-content {
overflow: visible !important; /* Allow read more expansion */
overflow-x: hidden !important; /* Prevent horizontal scroll only */
max-width: 100%;
width: 100%;
}
/* Property description full wrapper - ensures button at bottom when expanded */
html.property-listing-page .property-description-content .property-desc-full-wrapper {
display: block;
width: 100%;
}
html.property-listing-page .property-description-content .property-desc-full-wrapper .btn-read-less {
margin-top: 25px !important;
margin-bottom: 0 !important;
display: inline-block !important;
}
/* Ensure H2/H3 in property description are black, not gold/yellow */
html.property-listing-page .property-description-content h2,
html.property-listing-page .property-description-content h3 {
color: #1a1a1a !important;
font-weight: 600 !important;
font-family: "Poppins", "Inter", "SF Pro Display", Arial, sans-serif !important;
letter-spacing: 0.3px !important;
}
html.property-listing-page .property-description-content h2 {
font-size: 28px !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
font-weight: 600 !important;
}
html.property-listing-page .property-description-content h3 {
font-size: 24px !important;
margin-top: 30px !important;
margin-bottom: 16px !important;
font-weight: 500 !important;
}
html.property-listing-page .property-description-content .specifications-label {
color: #1a1a1a !important;
font-size: 24px !important;
font-weight: 500 !important;
margin-top: 30px !important;
margin-bottom: 16px !important;
font-family: "Poppins", "Inter", "SF Pro Display", Arial, sans-serif !important;
letter-spacing: 0.3px !important;
}
/* Ensure bullets are visible in property description lists */
html.property-listing-page .property-description-content ul {
list-style-type: disc !important;
list-style-position: outside !important;
padding-left: 20px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
display: block !important;
}
html.property-listing-page .property-description-content ul li {
display: list-item !important;
list-style-type: disc !important;
list-style-position: outside !important;
margin-bottom: 8px !important;
padding-left: 5px !important;
}
/* ============================================================
READ MORE / READ LESS - NEW STRUCTURE (Fixed Implementation)
============================================================ */
.collapse-wrapper {
overflow: visible !important; /* Allow content to expand vertically */
overflow-x: hidden !important; /* Prevent horizontal scroll only */
line-height: 1.6;
display: block;
width: 100%;
max-width: 100%;
position: relative;
}
.collapse-content {
display: block;
width: 100%;
max-width: 100%;
overflow: visible !important;
overflow-x: hidden !important;
}
.collapse-content.collapsed {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.collapse-content.full {
display: none !important;
visibility: hidden !important;
}
.collapse-content.full[style*="display: block"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.collapse-toggle {
color: #007aff !important;
cursor: pointer !important;
margin-top: 15px !important;
font-weight: 600 !important;
display: block !important;
user-select: none !important;
-webkit-user-select: none !important;
transition: color 0.2s ease !important;
text-decoration: none !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 16px !important;
pointer-events: auto !important;
z-index: 10 !important;
position: relative !important;
-webkit-tap-highlight-color: rgba(0, 122, 255, 0.2) !important;
}
.collapse-toggle:hover {
color: #0056b3 !important;
text-decoration: underline !important;
}
.collapse-toggle:active {
color: #004085 !important;
}
/* Ensure toggle is always at the end, not inline */
.collapse-wrapper .collapse-content.collapsed + .collapse-toggle {
display: block !important;
margin-top: 15px !important;
}
.collapse-wrapper .collapse-content.full + .collapse-toggle {
display: block !important;
margin-top: 15px !important;
}
/* Smooth transition for mobile */
@media (max-width: 767px) {
.collapse-wrapper {
transition: all 0.3s ease;
}
.collapse-content {
transition: opacity 0.3s ease, max-height 0.3s ease;
}
.collapse-toggle {
margin-top: 15px !important;
}
}
/* Prevent any inline insertion issues */
.collapse-wrapper .collapse-content {
display: block !important;
position: relative !important;
}
.collapse-wrapper .collapse-content.collapsed {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.collapse-wrapper .collapse-content.full {
display: none !important;
visibility: hidden !important;
}
.collapse-wrapper .collapse-content.full[style*="display: block"],
.collapse-wrapper .collapse-content.full[style*="display:block"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure wrapper doesn't clip content */
.collapse-wrapper {
min-height: 0 !important;
height: auto !important;
}
html.property-listing-page .property-description-content .description-collapse {
margin: 0 !important;
padding: 0 !important;
line-height: 1.6 !important;
overflow: hidden !important;
}
html.property-listing-page .property-description-content .description-collapse {
display: block;
}
html.property-listing-page .property-description-content .description-collapse .visible-text {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
html.property-listing-page .property-description-content .description-collapse .hidden-text {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.property-listing-page .property-description-content .description-collapse .hidden-text.expanded {
display: inline !important;
}
html.property-listing-page .property-description-content .description-collapse .read-toggle {
color: #195385 !important;
font-weight: 600 !important;
text-decoration: none !important;
cursor: pointer !important;
margin-left: 4px !important;
font-size: 16px !important;
transition: color 0.2s ease, opacity 0.2s ease !important;
display: inline !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
white-space: nowrap !important;
}
html.property-listing-page .property-description-content .description-collapse .read-toggle:hover {
color: #0d5aa7 !important;
text-decoration: underline !important;
opacity: 0.85 !important;
}
html.property-listing-page .property-description-content .description-collapse .read-toggle:active {
opacity: 0.7 !important;
}
/* Ensure no extra spacing or gaps - handle block elements properly */
html.property-listing-page .property-description-content .description-collapse p:empty,
html.property-listing-page .property-description-content .description-collapse br:last-child {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
html.property-listing-page .property-description-content .description-collapse p {
margin-bottom: 16px !important;
line-height: 1.6 !important;
margin-top: 0 !important;
}
html.property-listing-page .property-description-content .description-collapse p:last-child {
margin-bottom: 0 !important;
}
/* Ensure hidden text with block elements doesn't create gaps */
html.property-listing-page .property-description-content .description-collapse .hidden-text p,
html.property-listing-page .property-description-content .description-collapse .hidden-text div,
html.property-listing-page .property-description-content .description-collapse .hidden-text br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
line-height: 0 !important;
}
html.property-listing-page .property-description-content .description-collapse .hidden-text.expanded p,
html.property-listing-page .property-description-content .description-collapse .hidden-text.expanded div,
html.property-listing-page .property-description-content .description-collapse .hidden-text.expanded br {
display: block !important;
margin-bottom: 16px !important;
line-height: 1.6 !important;
height: auto !important;
}
html.property-listing-page .property-description-content .description-collapse .hidden-text.expanded p:last-child {
margin-bottom: 0 !important;
}
html.property-listing-page .features-title {
font-size: 22px;
font-weight: 700;
color: #1a3a7a;
margin-top: 32px;
margin-bottom: 16px;
}
html.property-listing-page .features-modern {
margin-bottom: 32px;
}
html.property-listing-page .additional-amenities-modern {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
html.property-listing-page .available-modern {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
color: #333;
font-weight: 500;
}
html.property-listing-page .available-modern i {
color: #195385;
font-size: 16px;
}
/* 7. RIGHT SIDEBAR CONTACT BOX - Modern Apple-style design */
html.property-listing-page .sidebar-card-modern {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
margin-bottom: 24px !important;
overflow: visible !important;
}
/* Modern minimal header - replaces old colored bars */
html.property-listing-page .sidebar-modern-header,
html.property-listing-page h3.sidebar-modern-header {
font-size: 18px !important;
font-weight: 600 !important;
color: #111 !important;
padding-bottom: 10px !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
border-bottom: 1px solid #e5e7eb !important;
background: none !important;
padding: 0 0 10px 0 !important;
font-family: "Inter", "SF Pro Display", sans-serif !important;
}
/* Remove old colored headers completely */
html.property-listing-page .sidebar-card-header,
html.property-listing-page #manager-title,
html.property-listing-page .sidebar-card-header.ask {
display: none !important;
}
html.property-listing-page .sidebar-card-body {
padding: 0 !important;
}
/* Advantages of This Property - Modern inner card style */
html.property-listing-page #advan_bl {
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
/* Header row - left aligned - Property Advantages */
html.property-listing-page #advan_bl h3.sidebar-modern-header,
html.property-listing-page #advan_bl .sidebar-modern-header,
html.property-listing-page #advan_bl strong.sidebar-card-header {
padding: 16px 20px !important;
font-weight: 600 !important;
font-size: 18px !important;
background: #f8f9fb !important;
border-bottom: 1px solid #e5e7eb !important;
margin: 0 !important;
color: #1f2937 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.3 !important;
text-align: left !important;
box-sizing: border-box !important;
}
/* List rows */
html.property-listing-page #advan_bl a,
html.property-listing-page #advan_bl span {
display: block !important;
padding: 14px 20px !important;
font-size: 15px !important;
line-height: 1.5 !important;
color: #1f2937 !important;
text-decoration: none !important;
border-bottom: 1px solid #f0f0f0 !important;
transition: color 0.2s ease, background-color 0.2s ease !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
}
html.property-listing-page #advan_bl a:hover,
html.property-listing-page #advan_bl span:hover {
color: #195385 !important;
background-color: #f8f9fb !important;
}
html.property-listing-page #advan_bl a:last-child,
html.property-listing-page #advan_bl span:last-child {
border-bottom: none !important;
}
/* Disable pointer events and remove link styling for Property Advantages spans */
html.property-listing-page #advan_bl span {
cursor: default !important;
text-decoration: none !important;
pointer-events: none !important;
}
/* Company info box - modern centered layout */
html.property-listing-page #seller {
text-align: center !important;
padding: 0 !important;
}
/* Remove company name text */
html.property-listing-page #seller strong {
display: none !important;
}
/* Logo wrapper with padding */
html.property-listing-page #seller .company-logo-wrapper {
padding: 16px !important;
margin-bottom: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Large logo - fills available width, spans row from right to left */
html.property-listing-page #seller .company-logo-large,
html.property-listing-page #seller img.company-logo-large,
html.property-listing-page #seller .company-logo-wrapper img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 140px !important;
min-height: 80px !important;
display: block !important;
margin: 0 auto !important;
object-fit: contain !important;
object-position: center !important;
}
/* Your Company logo - reduce by 30% on mobile (70% of original) */
@media (max-width: 767px) {
html.property-listing-page #seller .company-logo-large,
html.property-listing-page #seller img.company-logo-large,
html.property-listing-page #seller .company-logo-wrapper img,
html.property-listing-page .mobile-clone .company-logo-large,
html.property-listing-page .mobile-clone .company-logo-wrapper img {
width: 70% !important;
max-width: 70% !important;
height: auto !important;
max-height: 98px !important; /* 140px * 0.7 = 98px */
min-height: 56px !important; /* 80px * 0.7 = 56px */
margin: 0 auto !important;
}
}
/* ============================================================
LOGO SIZE FIXES - MOBILE OPTIMIZATION
============================================================ */
/* Header logo - reduce by 10% on mobile */
@media (max-width: 767px) {
.yu-logo,
.logo img,
.logo .yu-logo,
.site-header .logo img {
width: 90% !important;
max-width: 90% !important;
height: auto !important;
}
/* Footer logo - reduce by 30% on mobile */
.footer-logo img,
.yu-footer .footer-logo img,
.yu-footer img[src*="maximos-real-estate-belek-logo"],
.site-footer-bottom1 .footer-logo img {
width: 70% !important;
max-width: 70% !important;
height: auto !important;
margin: 0 auto !important;
}
/* Google reviews logo - make 20% bigger and center properly */
.yu-footer img[src*="google-review"],
.site-footer-bottom1 img[src*="google-review"],
img[alt*="start ratings"],
img[alt*="star ratings"],
a[href*="google.com"] img[src*="google-review"] {
max-width: 180px !important; /* 150px * 1.2 = 180px (20% bigger) */
width: auto !important;
height: auto !important;
display: block !important;
margin: 0 auto !important; /* Center the image */
text-align: center !important;
}
/* Center the Google reviews link container and fix positioning */
.yu-footer a[href*="google.com"],
.site-footer-bottom1 a[href*="google.com"],
a[href*="google.com"][href*="search"] {
display: block !important;
text-align: center !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 180px !important;
}
/* Footer spacing restoration */
.yu-footer,
.site-footer-bottom1 {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.yu-footer .row,
.site-footer-bottom1 .row {
margin-bottom: 20px !important;
}
.yu-footer .padding-tb20,
.site-footer-bottom1 .padding-tb20 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.footer-logo {
margin-bottom: 20px !important;
padding: 10px !important;
}
}
/* =====================================================
GLOBAL FOOTER: Move up logo and address column
===================================================== */
/* Ensure all footer columns align at the top */
.site-footer-bottom1 .footer-grid {
align-items: flex-start !important;
}
/* Reduce top spacing on footer-maximos column to align with other columns */
.site-footer-bottom1 .footer-col.footer-maximos {
padding-top: 0 !important;
margin-top: 0 !important;
align-items: flex-start !important;
}
/* Reduce logo margin-bottom to bring it up */
.site-footer-bottom1 .footer-col.footer-maximos .footer-logo {
margin-top: 0 !important;
margin-bottom: 10px !important;
padding: 8px !important;
}
/* Add space above address section */
.site-footer-bottom1 .footer-col.footer-maximos .footer-address {
margin-top: 10px !important;
padding-top: 0 !important;
}
/* Spacing between address paragraphs */
.site-footer-bottom1 .footer-col.footer-maximos .footer-address p {
margin-top: 0 !important;
margin-bottom: 6px !important;
line-height: 1.5 !important;
}
/* Override for About Us and Contact spacing - more specific selector */
.site-footer-bottom1 .footer-col.footer-maximos .footer-address > div p {
margin: 0 !important;
line-height: 2 !important;
}
.site-footer-bottom1 .footer-col.footer-maximos .footer-address > div p:last-child {
margin-top: 4px !important;
}
/* Increase the spacer div height between ISTANBUL and ANTALYA addresses */
.site-footer-bottom1 .footer-col.footer-maximos .footer-address div[style*="height"] {
height: 15px !important;
}
/* Mobile: Format footer addresses on 2 lines */
@media (max-width: 768px) {
.site-footer-bottom1 .footer-col li .footer-address-line1 {
display: block;
line-height: 1.4;
}
.site-footer-bottom1 .footer-col li .footer-address-line2 {
display: block;
line-height: 1.4;
margin-top: 2px;
}
.site-footer-bottom1 .footer-col li .footer-city {
display: inline;
}
}
/* Your Company header - same grey background style as Advantages */
html.property-listing-page #seller .sidebar-modern-header {
margin-bottom: 8px !important;
padding: 16px 20px !important;
font-weight: 600 !important;
font-size: 18px !important;
background: #f8f9fb !important;
border-bottom: 1px solid #e5e7eb !important;
margin: 0 0 0 0 !important;
color: #1f2937 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.3 !important;
text-align: left !important;
}
/* Phone line with icons - single line, side by side */
html.property-listing-page #seller .company-phone-line {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin-bottom: 12px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
html.property-listing-page #seller .company-phone-line .phone-icon-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
color: #195385 !important;
text-decoration: none !important;
transition: color 0.2s ease, transform 0.2s ease !important;
font-size: 16px !important;
flex-shrink: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Modern solid thin-line icon style matching location listing page */
html.property-listing-page #seller .company-phone-line .phone-icon-link i {
font-size: 16px !important;
font-weight: normal !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
line-height: 1 !important;
}
html.property-listing-page #seller .company-phone-line .phone-icon-link:hover {
color: #0d5aa7 !important;
transform: scale(1.1) !important;
}
/* WhatsApp button in sidebar - Enhanced premium CTA style */
html.property-listing-page #seller .company-phone-line .whatsapp-icon-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: 24px !important; /* +20% from 20px */
padding: 12px 18px !important; /* Premium padding */
color: #25D366 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
font-size: 18px !important; /* +2px from 16px */
flex-shrink: 0 !important;
visibility: visible !important;
opacity: 1 !important;
border-radius: 8px !important; /* Rounded Apple look */
box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2) !important; /* Soft drop-shadow */
background: rgba(37, 211, 102, 0.08) !important; /* Subtle background */
}
html.property-listing-page #seller .company-phone-line .whatsapp-icon-link i {
font-size: 20px !important; /* +25% from 16px */
font-weight: normal !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
line-height: 1 !important;
}
html.property-listing-page #seller .company-phone-line .whatsapp-icon-link svg {
width: 20px !important; /* +25% from 16px */
height: 20px !important; /* +25% from 16px */
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
fill: #25D366 !important;
}
html.property-listing-page #seller .company-phone-line .whatsapp-icon-link:hover {
color: #128C7E !important;
background: rgba(37, 211, 102, 0.12) !important;
box-shadow: 0 3px 12px rgba(37, 211, 102, 0.3) !important;
transform: translateY(-1px) !important;
}
html.property-listing-page #seller .company-phone-line .whatsapp-icon-link:hover svg {
fill: #128C7E !important;
}
html.property-listing-page #seller .company-phone-line .whatsapp-icon-link:hover i {
color: #128C7E !important;
}
html.property-listing-page #seller .company-phone-line .phone-number {
display: inline-block !important;
font-size: 15px !important;
color: #374151 !important;
line-height: 1.5 !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-weight: 500 !important;
margin: 0 !important;
white-space: nowrap !important;
margin-left: 0 !important;
}
/* Email line with icon */
html.property-listing-page #seller .company-email-line {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin-bottom: 0 !important;
font-size: 14px !important;
color: #374151 !important;
line-height: 1.55 !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
}
html.property-listing-page #seller .company-email-line i {
font-size: 14px !important;
color: #195385 !important;
flex-shrink: 0 !important;
}
html.property-listing-page #seller .company-email-line a {
color: #374151 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
font-size: 14px !important;
}
html.property-listing-page #seller .company-email-line a:hover {
color: #195385 !important;
}
/* Contact form - modern card style */
html.property-listing-page .asktoseller,
html.property-listing-page .propertybottom {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 20px 20px 20px 20px !important;
padding-bottom: 20px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
margin-bottom: 0 !important;
overflow: visible !important;
}
/* Contact Us header - same grey background style as others */
html.property-listing-page .asktoseller .sidebar-modern-header,
html.property-listing-page .asktoseller h3.sidebar-modern-header,
/* Brochure and Appointment containers - match Property Advantages structure */
html.property-listing-page #brochure_request,
html.property-listing-page #appointment_request {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Brochure and Appointment headers - aligned with Property Advantages */
html.property-listing-page #brochure_request .sidebar-modern-header,
html.property-listing-page #brochure_request h3.sidebar-modern-header,
html.property-listing-page #appointment_request .sidebar-modern-header,
html.property-listing-page #appointment_request h3.sidebar-modern-header {
padding: 16px 20px !important;
font-weight: 600 !important;
font-size: 18px !important;
background: #f8f9fb !important;
border-bottom: 1px solid #e5e7eb !important;
margin: 0 !important;
color: #1f2937 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.3 !important;
text-align: left !important;
background-image: none !important;
box-sizing: border-box !important;
}
/* Other contact form headers */
html.property-listing-page .asktoseller .title,
html.property-listing-page .asktoseller p.title,
html.property-listing-page .asktoseller .title.ask,
html.property-listing-page .propertybottom .title,
html.property-listing-page .propertybottom p.title {
padding: 16px 20px !important;
font-weight: 600 !important;
font-size: 18px !important;
background: #f8f9fb !important;
border-bottom: 1px solid #e5e7eb !important;
margin: -20px -20px 16px -20px !important;
color: #1f2937 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.3 !important;
text-align: left !important;
background-image: none !important;
}
html.property-listing-page .asktoseller .title span,
html.property-listing-page .asktoseller p.title span,
html.property-listing-page .asktoseller .title.ask span {
color: #1f2937 !important;
font-weight: 600 !important;
}
/* Hide old title if it still exists */
html.property-listing-page .asktoseller p.title.ask {
display: none !important;
}
/* Form wrapper spacing */
html.property-listing-page .asktoseller .fieldwrap,
html.property-listing-page .propertybottom .fieldwrap,
html.property-listing-page #brochure_request .fieldwrap,
html.property-listing-page #appointment_request .fieldwrap {
margin: 0 0 12px 0 !important;
}
/* Brochure and Appointment form content padding - match Property Advantages list alignment */
html.property-listing-page #brochure_request form,
html.property-listing-page #appointment_request form {
padding: 0 20px 15px 20px !important;
}
html.property-listing-page .asktoseller .sbmt,
html.property-listing-page .propertybottom .sbmt,
html.property-listing-page #brochure_request .sbmt,
html.property-listing-page #appointment_request .sbmt {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
/* Submit button wrapper columns - override Bootstrap grid for button */
html.property-listing-page .asktoseller .sbmt .col-md-6,
html.property-listing-page .propertybottom .sbmt .col-md-6 {
padding: 0 !important;
width: 100% !important;
}
html.property-listing-page .asktoseller .sbmt .col-md-6:first-child {
margin-bottom: 8px !important;
}
/* Modern input fields - match location.php filter style */
html.property-listing-page .asktoseller .fmtext,
html.property-listing-page .propertybottom .fmtext,
html.property-listing-page #brochure_request .fmtext,
html.property-listing-page #appointment_request .fmtext,
html.property-listing-page .asktoseller input[type="text"],
html.property-listing-page .propertybottom input[type="text"],
html.property-listing-page #brochure_request input[type="text"],
html.property-listing-page #brochure_request input[type="email"],
html.property-listing-page #appointment_request input[type="text"],
html.property-listing-page #appointment_request input[type="tel"],
html.property-listing-page #appointment_request input[type="date"] {
width: 100% !important;
height: 41px !important;
border: 1px solid #d1d5db !important;
border-radius: 10px !important;
background: #ffffff !important;
padding-left: 14px !important;
padding-right: 14px !important;
font-size: 14px !important;
margin-bottom: 12px !important;
box-sizing: border-box !important;
box-shadow: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html.property-listing-page .asktoseller .fmtext:focus,
html.property-listing-page .propertybottom .fmtext:focus,
html.property-listing-page #brochure_request .fmtext:focus,
html.property-listing-page #appointment_request .fmtext:focus,
html.property-listing-page #appointment_request input[type="date"]:focus,
html.property-listing-page .asktoseller input[type="text"]:focus,
html.property-listing-page .propertybottom input[type="text"]:focus,
html.property-listing-page #brochure_request input[type="text"]:focus,
html.property-listing-page #brochure_request input[type="email"]:focus,
html.property-listing-page #appointment_request input[type="text"]:focus,
html.property-listing-page #appointment_request input[type="tel"]:focus {
outline: none !important;
border-color: #195385 !important;
box-shadow: 0 0 0 2px rgba(25,83,133,0.15) !important;
}
/* Modern select dropdown */
html.property-listing-page .asktoseller .question,
html.property-listing-page .propertybottom .question,
html.property-listing-page .asktoseller select,
html.property-listing-page .propertybottom select {
width: 100% !important;
height: 46px !important;
border: 1px solid #d1d5db !important;
border-radius: 10px !important;
background: #ffffff !important;
padding-left: 14px !important;
padding-right: 14px !important;
font-size: 14px !important;
margin-bottom: 12px !important;
box-sizing: border-box !important;
box-shadow: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
appearance: none !important;
}
html.property-listing-page .asktoseller .question:focus,
html.property-listing-page .propertybottom .question:focus,
html.property-listing-page .asktoseller select:focus,
html.property-listing-page .propertybottom select:focus {
outline: none !important;
border-color: #195385 !important;
box-shadow: 0 0 0 2px rgba(25,83,133,0.15) !important;
}
/* Modern textarea */
html.property-listing-page .asktoseller .fmtextarea,
html.property-listing-page .propertybottom .fmtextarea,
html.property-listing-page .asktoseller textarea,
html.property-listing-page .propertybottom textarea {
width: 100% !important;
min-height: 110px !important;
border: 1px solid #d1d5db !important;
border-radius: 10px !important;
background: #ffffff !important;
padding: 14px !important;
font-size: 14px !important;
margin-bottom: 8px !important;
box-sizing: border-box !important;
box-shadow: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
resize: vertical !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
}
html.property-listing-page .asktoseller .fmtextarea:focus,
html.property-listing-page .propertybottom .fmtextarea:focus,
html.property-listing-page .asktoseller textarea:focus,
html.property-listing-page .propertybottom textarea:focus {
outline: none !important;
border-color: #195385 !important;
box-shadow: 0 0 0 2px rgba(25,83,133,0.15) !important;
}
/* Send button - darker grey for better visibility, closer to textarea */
html.property-listing-page .asktoseller input[type="submit"],
html.property-listing-page .propertybottom input[type="submit"],
html.property-listing-page #brochure_request input[type="submit"],
html.property-listing-page #appointment_request input[type="submit"],
html.property-listing-page .btn-brochure,
html.property-listing-page .btn-appointment,
html.property-listing-page .asktoseller button[type="submit"],
html.property-listing-page .propertybottom button[type="submit"],
html.property-listing-page .asktoseller input[type="submit"][style],
html.property-listing-page .propertybottom input[type="submit"][style] {
background: #1a3a7a !important; /* Navy blue - matches View Details button */
background-image: none !important;
background-color: #1a3a7a !important;
color: #ffffff !important;
border: 1px solid #1a3a7a !important;
border-radius: 10px !important;
height: 46px !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 0.2px !important;
text-shadow: none !important;
width: 100% !important;
max-width: 200px !important;
padding: 0 !important;
margin: 0 auto 0 auto !important;
cursor: pointer !important;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
display: block !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
html.property-listing-page .asktoseller input[type="submit"]:hover,
html.property-listing-page .propertybottom input[type="submit"]:hover,
html.property-listing-page #brochure_request input[type="submit"]:hover,
html.property-listing-page #appointment_request input[type="submit"]:hover,
html.property-listing-page .btn-brochure:hover,
html.property-listing-page .btn-appointment:hover,
html.property-listing-page .asktoseller button[type="submit"]:hover,
html.property-listing-page .propertybottom button[type="submit"]:hover,
html.property-listing-page .asktoseller input[type="submit"][style]:hover,
html.property-listing-page .propertybottom input[type="submit"][style]:hover {
background: #0d5aa7 !important; /* Navy blue hover - matches View Details button */
background-image: none !important;
background-color: #0d5aa7 !important;
color: #ffffff !important;
text-shadow: none !important;
border-color: #0d5aa7 !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Ensure submit button wrapper is centered */
html.property-listing-page .asktoseller .sbmt .col-md-6:last-child {
width: 100% !important;
text-align: center !important;
}
html.property-listing-page .asktoseller .sbmt {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* 8. RELATED PROPERTIES - Match listing card style */
html.property-listing-page .related-properties-title {
font-size: 24px;
font-weight: 700;
color: #1a3a7a;
margin-top: 48px;
margin-bottom: 24px;
}
html.property-listing-page .related-properties-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
list-style: none;
padding: 0;
margin: 0;
}
html.property-listing-page .related-property-card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
min-height: 520px;
}
html.property-listing-page .related-property-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
html.property-listing-page .related-property-image {
width: 100%;
height: 200px !important;
min-height: 200px !important;
max-height: 200px !important;
overflow: hidden;
position: relative;
background-color: #f5f5f5; /* Placeholder color */
/* Apple-style rounded corners */
border-radius: 18px 18px 0 0; /* Rounded top corners only */
}
html.property-listing-page .related-property-image img {
width: 100% !important;
height: 100% !important;
min-height: 200px !important;
max-height: 200px !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
/* Fix blur - ensure HD quality rendering */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: bicubic;
/* Force high-quality scaling */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1);
transform: translateZ(0) scale(1);
/* Prevent subpixel rendering blur */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.property-listing-page .related-property-content {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 320px;
position: relative;
overflow: visible; /* Allow fade-out gradient to be visible */
}
html.property-listing-page .related-property-price-badge {
display: inline-flex;
align-items: center;
background: #33cc66;
color: #ffffff;
padding: 6px 14px;
border-radius: 14px;
font-size: 16px;
font-weight: 700;
margin-top: 12px !important; /* Equal space above badge */
margin-bottom: 12px !important; /* Equal space below badge */
width: max-content;
}
html.property-listing-page .related-property-price-badge .price-prefix {
font-weight: 600;
margin-right: 4px;
font-size: 14px;
text-transform: lowercase;
}
html.property-listing-page .related-property-price-badge .price-number {
font-weight: 700;
}
html.property-listing-page .related-property-price-badge .price-currency {
font-weight: 700;
margin-left: 2px;
font-size: 14px;
}
html.property-listing-page .related-property-title {
font-size: 18px;
font-weight: 600;
color: #2C3E50;
margin-bottom: 8px;
line-height: 1.3;
/* Allow flexible height but clamp to 4 lines max */
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
html.property-listing-page .related-property-title a {
color: #2C3E50;
text-decoration: none;
}
html.property-listing-page .related-property-title a:hover {
color: #195385;
}
html.property-listing-page .related-property-summary {
font-size: 14px;
color: #666;
line-height: 1.5;
margin-bottom: 12px;
flex-grow: 1; /* Make flexible - fills space between title and meta */
flex-shrink: 1;
/* Fade-out effect - show 3 lines only, but allow flexible height */
position: relative;
max-height: calc(14px * 1.5 * 3); /* font-size * line-height * 3 lines = 63px */
overflow: hidden;
padding-right: 0;
min-height: calc(14px * 1.5 * 1); /* Minimum 1 line */
}
/* Fade-out gradient overlay - visible white gradient matching card background */
html.property-listing-page .related-property-summary::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 28px; /* Slightly taller for smoother fade */
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 30%,
rgba(255, 255, 255, 0.8) 70%,
rgba(255, 255, 255, 1) 100%
);
pointer-events: none;
z-index: 2;
}
html.property-listing-page .related-property-meta {
display: flex;
flex-direction: column;
margin-bottom: 12px;
font-size: 14px;
color: #1a1a1a;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #ffffff;
padding: 8px 0;
flex-shrink: 0; /* Don't shrink - maintain size */
/* Push meta section to bottom - directly above button */
margin-top: auto;
}
html.property-listing-page .related-property-meta span {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid #e5e7eb;
font-size: 14px;
color: #1a1a1a;
line-height: 1.5;
}
html.property-listing-page .related-property-meta span:last-child {
border-bottom: none;
}
html.property-listing-page .related-property-meta .iconic,
html.property-listing-page .related-property-meta .fa {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.9;
}
html.property-listing-page .related-property-meta .fa {
font-size: 16px;
color: #333;
}
html.property-listing-page .related-property-meta .emoji-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
font-size: 16px;
line-height: 1;
opacity: 0.9;
color: #333;
}
html.property-listing-page .btn-view-related {
background: #1a3a7a;
color: #ffffff;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
text-align: center;
display: block;
transition: background 0.2s ease;
/* Button stays right below meta section */
flex-shrink: 0;
margin-top: 0; /* No auto margin - meta section handles positioning */
}
html.property-listing-page .btn-view-related:hover {
background: #0d5aa7;
color: white;
}
/* Mobile responsive for property detail page */
@media (max-width: 991px) {
html.property-listing-page .related-properties-list {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 767px) {
html.property-listing-page .property-details-grid {
grid-template-columns: repeat(2, 1fr);
}
html.property-listing-page .detail-icon-item {
flex: 1 1 calc(50% - 8px);
min-width: auto;
}
html.property-listing-page .nav-tabs-pills {
flex-wrap: wrap;
}
html.property-listing-page .related-properties-list {
grid-template-columns: 1fr;
}
html.property-listing-page .property-description-modern {
padding: 0 10px;
}
}
/* Property detail two-column layout */
html.property-listing-page .property-detail-layout {
display: flex;
gap: 24px;
align-items: flex-start;
overflow: visible !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
html.property-listing-page .property-detail-wrapper {
overflow: visible !important;
}
html.property-listing-page .property-detail-layout .left-column {
width: 73%;
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start;
}
html.property-listing-page .property-detail-layout .left-column .single-property {
margin-top: 0 !important;
padding-top: 0 !important;
}
html.property-listing-page .property-slider-modern {
margin-top: 0 !important;
padding-top: 5px !important;
margin-bottom: 32px;
}
/* ============================================================
KALKAN FIRST CHUNK: Semantic intro card (under H1)
============================================================ */
html.property-listing-page .property-headline-block {
margin: 0 0 14px 0;
padding: 0;
}
html.property-listing-page .semantic-intro.apple-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
padding: 14px 16px;
margin: 12px 0 16px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
html.property-listing-page .semantic-intro.apple-card p {
margin: 0 0 10px 0;
line-height: 1.65;
color: #263238;
}
html.property-listing-page .semantic-intro.apple-card p:last-child {
margin-bottom: 0;
}
.city-definition-intro {
font-size: 16px;
line-height: 1.6;
color: #4a5568;
margin: 12px 0 16px 0;
font-style: italic;
}
.ai-summary {
position: relative;
max-width: 980px;
margin: 28px 0 16px;
padding: 26px 30px 26px 34px;
background: rgba(0,0,0,0.02) !important; /* Neutral warmth - Apple-like paper feel */
border-left: 3px solid rgba(0,122,255,0.75) !important; /* Softened muted system blue accent */
border-radius: 0 !important; /* Remove rounded corners for editorial feel */
box-shadow: none !important; /* Remove shadow for cleaner look */
}
.ai-summary::before {
content: "Overview";
position: absolute;
top: -11px;
left: 22px;
padding: 2px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0,122,255,0.75) !important; /* Match muted blue accent */
background: #ffffff;
border-radius: 6px;
}
.ai-summary p {
margin: 0 0 10px;
font-size: 15.5px !important; /* Improved clarity through type */
line-height: 1.7 !important; /* Better readability */
color: #333 !important; /* Apple-like neutral dark grey */
}
.ai-summary p:last-child {
margin-bottom: 0;
}
.ai-summary strong {
font-weight: 600;
color: #111827;
}
.location-internal-links {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
font-size: 15px;
line-height: 1.7;
color: #374151;
}
.location-internal-links a {
color: #2563eb;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.location-internal-links a:hover {
color: #1d4ed8;
border-bottom-color: #2563eb;
}
html.property-listing-page .property-detail-layout .right-column {
width: 27%;
position: relative;
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start;
}
/* REPLICATE RIGHT COLUMN STYLING FOR GUIDE PAGE - SAME AS DETAIL.PHP */
html.guide-page .col-lg-3.col-md-4.col-sm-12 {
position: relative !important;
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start !important;
overflow: visible !important;
float: none !important;
clear: none !important;
}
/* Ensure first sidebar card aligns with gallery top */
html.property-listing-page .right-column .sidebar-card-modern:first-child,
html.property-listing-page .right-column #advan_bl:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
html.property-listing-page .right-column {
position: relative;
}
html.property-listing-page .contact-sidebar {
position: sticky !important;
top: 110px !important;
z-index: 10;
height: max-content;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* REPLICATE EXACT STRUCTURE FROM DETAIL.PHP FOR GUIDE PAGE */
/* Ensure all parent containers allow sticky */
html.guide-page .main,
html.guide-page .main.articil,
html.guide-page #content,
html.guide-page #content.content,
html.guide-page #content.full {
overflow: visible !important;
position: relative !important;
}
/* Use same wrapper width as detail.php */
html.guide-page .property-detail-wrapper {
max-width: 1220px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: 24px !important;
overflow: visible !important;
}
/* Desktop grid layout moved to style.css - see @media (min-width: 992px) */
/* Mobile/tablet: keep flex layout */
html.guide-page .property-detail-layout {
display: flex;
gap: 24px;
align-items: flex-start;
overflow: visible !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
html.guide-page .property-detail-layout .left-column {
width: 85% !important; /* Increased by ~40% from 73% to 85% */
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start;
position: relative;
overflow: visible !important;
transform: none !important; /* Remove transform that breaks sticky */
}
html.guide-page .property-detail-layout .left-column .single-property {
margin-top: 0 !important;
padding-top: 0 !important;
}
html.guide-page .property-detail-layout .right-column {
width: 15% !important; /* Reduced by ~40% from 27% to 15% */
position: relative;
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start;
overflow: visible !important;
transform: none !important; /* Remove transform that breaks sticky */
}
/* Desktop override: use CSS Grid with Apple 2025 spacing */
@media (min-width: 992px) {
html.guide-page .property-detail-layout {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 40px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
overflow: visible !important; /* Allow sticky sidebar */
transform: none !important; /* Remove transform that breaks sticky */
}
html.guide-page .property-detail-layout .left-column {
max-width: 860px !important;
width: 860px !important;
flex: 0 0 860px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important; /* Allow sticky sidebar */
transform: none !important; /* Remove transform that breaks sticky */
}
html.guide-page .property-detail-layout .left-column .single-property {
overflow: visible !important; /* Allow sticky sidebar */
transform: none !important; /* Remove transform that breaks sticky */
}
html.guide-page .property-detail-layout .right-column {
max-width: 340px !important;
width: 340px !important;
flex: 0 0 340px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important; /* Allow sticky sidebar */
transform: none !important; /* Remove transform that breaks sticky */
}
/* Remove inline-block everywhere - sticky cannot work inside inline-block */
html.guide-page .property-detail-layout,
html.guide-page .guide-content-wrapper,
html.guide-page .guide-content-sections,
html.guide-page .guide-card,
html.guide-page .guide-card-modern,
html.guide-page .left-column,
html.guide-page .right-column,
html.guide-page .guide-right-sidebar,
html.guide-page .sidebar,
html.guide-page .right-sidebar {
display: block !important;
}
/* Left + Right columns must be flex container */
html.guide-page .property-detail-layout,
html.guide-page .guide-content-wrapper {
display: flex !important;
align-items: flex-start !important;
}
/* Prevent sticky from being blocked */
html.guide-page .property-detail-layout * {
overflow: visible !important;
transform: none !important;
position: static !important;
}
/* Exception: Hero image container can have overflow hidden for image clipping */
html.guide-page .guide-hero-image {
overflow: hidden !important;
}
}
/* STICKY SIDEBAR - Apply sticky to the right-column.contact-sidebar element */
html.guide-page .right-column.contact-sidebar,
html.guide-page .property-detail-layout .right-column.contact-sidebar,
html.guide-page .sidebar.right-sidebar.right-column.contact-sidebar,
html.guide-page .guide-right-sidebar {
position: sticky !important;
top: 110px !important;
z-index: 10 !important;
height: auto !important;
max-height: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
width: 100% !important;
align-self: flex-start !important;
overflow: visible !important;
transform: none !important;
}
/* Also ensure the contact-sidebar class works */
html.guide-page .contact-sidebar {
position: sticky !important;
top: 110px !important;
z-index: 10 !important;
height: max-content !important;
margin-top: 0 !important;
padding-top: 0 !important;
width: 100% !important;
}
/* Ensure first element in sidebar aligns (same as detail.php) */
html.guide-page .contact-sidebar > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Removed duplicate - using html.guide-page .contact-sidebar above */
/* Ensure first element in sidebar aligns with gallery */
html.property-listing-page .contact-sidebar > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Duplicate rules removed - styles are defined above in section 7 */
@media (max-width: 767px) {
html.property-listing-page .property-detail-layout {
flex-direction: column;
}
html.property-listing-page .property-detail-layout .left-column,
html.property-listing-page .property-detail-layout .right-column {
width: 100%;
}
html.property-listing-page .right-column {
position: static;
}
/* ============================================================
MOBILE LAYOUT IMPROVEMENTS FOR PROPERTY DETAIL PAGES
============================================================ */
/* 1. Mobile reordering - hide ONLY Property Advantages and Your Company box in sidebar */
/* Contact Form stays visible in sidebar on mobile (will appear at bottom after related properties) */
html.property-listing-page .right-column .mobile-reorder-advantages,
html.property-listing-page .right-column .mobile-reorder-company {
display: none !important;
}
html.property-listing-page .left-column .mobile-clone {
display: block !important;
width: 100% !important;
margin-bottom: 24px !important;
}
/* 2. Spacing improvements */
/* Add 20-30px margin-top above General Features */
html.property-listing-page .prop-general-features,
html.property-listing-page .features-modern {
margin-top: 25px !important;
}
/* Add 5-8% left/right padding to description on mobile */
html.property-listing-page .property-description-modern {
padding-left: 6% !important;
padding-right: 6% !important;
max-width: 100% !important;
}
/* Reduce line-length for readability */
html.property-listing-page .property-description-modern .property-description-content {
max-width: 100% !important;
line-height: 1.65 !important;
}
/* Floating WhatsApp button - keep original size (reverted) */
/* Original size restored - no changes needed */
/* Mobile: WhatsApp button stays inline like desktop - no full-width, same style */
html.property-listing-page #seller .company-phone-line .whatsapp-icon-link {
width: auto !important; /* Keep inline, not full-width */
display: inline-flex !important; /* Same as desktop */
justify-content: center !important;
padding: 12px 18px !important; /* Premium padding maintained */
height: 24px !important; /* Same as desktop */
margin-top: 0 !important; /* No extra margin */
}
/* Ensure mobile clones have proper styling */
html.property-listing-page .mobile-clone.sidebar-card-modern {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
margin-bottom: 24px !important;
}
/* Spacing between Your Company box (last mobile clone) and Description */
html.property-listing-page .left-column .mobile-clone.mobile-reorder-company + .property-description-modern {
margin-top: 22px !important;
}
}
/* ============================================================
LISTING & GUIDE PAGES - SCOPED LAYOUT RULES
============================================================ */
/* Scope sidebar and column layout ONLY to listing/guide pages */
.location-page .sidebar.right-sidebar,
.advantage-page .sidebar.right-sidebar {
clear: none !important;
float: right !important;
margin-top: 0 !important;
}
/* OVERRIDE: Guide page sidebar must NOT float - breaks sticky */
html.guide-page .sidebar.right-sidebar,
html.guide-page .guide-sidebar {
float: none !important;
clear: none !important;
}
.location-page .col-md-9,
.advantage-page .col-md-9 {
float: left !important;
}
/* OVERRIDE: Guide page columns must NOT float - breaks sticky */
html.guide-page .col-md-9,
html.guide-page .col-lg-9,
html.guide-page .col-md-3,
html.guide-page .col-md-4,
html.guide-page .col-lg-3 {
float: none !important;
clear: none !important;
}
/* Align sidebar to listing list - SCOPE to location-page only */
.location-page .right-sidebar {
margin-top: calc(var(--listing-list-top)) !important;
}
/* STICKY SIDEBAR - Location, Search, and Advantage pages (NOT property detail page) */
@media (min-width: 992px) {
/* Ensure parent containers allow sticky positioning for location/search/advantage pages */
.location-page .main,
.location-page #content,
.location-page .content.full,
.location-page .container,
.search-page .main,
.search-page #content,
.search-page .content.full,
.search-page .container,
.advantage-page .main,
.advantage-page #content,
.advantage-page .content.full,
.advantage-page .container {
overflow: visible !important;
height: auto !important;
position: relative !important;
}
/* Critical: Ensure row container doesn't break sticky */
.location-page .container .row,
.search-page .container .row,
.advantage-page .container .row {
overflow: visible !important;
height: auto !important;
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
}
/* Sticky sidebar for location, search, and advantage pages - exactly like property detail page */
.location-page .sidebar.right-sidebar,
.location-page .right-sidebar,
.search-page .sidebar.right-sidebar,
.search-page .right-sidebar,
.advantage-page .sidebar.right-sidebar,
.advantage-page .right-sidebar {
position: sticky !important;
top: 67px !important;
z-index: 100 !important;
height: max-content !important;
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start !important;
float: none !important; /* Remove float to allow sticky */
clear: none !important;
}
/* Ensure col-md-3 wrapper allows sticky */
.location-page .col-md-3,
.search-page .col-md-3,
.advantage-page .col-md-3 {
overflow: visible !important;
position: relative !important;
height: auto !important;
}
/* Ensure col-md-9 doesn't float when using flexbox layout */
.advantage-page .col-md-9 {
float: none !important;
}
}
/* NEW PREMIUM PROPERTY CARD - SCOPE to listing/guide pages only */
.location-page .property-card,
.guide-page .property-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
margin-bottom: 30px;
padding: 0;
display: flex;
border: 1px solid #ddd;
transition: box-shadow .2s ease, transform .2s ease;
}
.location-page .property-card:hover,
.guide-page .property-card:hover {
box-shadow: 0 12px 28px rgba(0,0,0,.15);
transform: translateY(-3px);
}
/* IMAGE SIDE - SCOPE to listing/guide pages only */
.location-page .property-card-img,
.guide-page .property-card-img {
width: 35%;
min-height: 180px;
position: relative;
}
.location-page .property-card-img .img-wrap,
.guide-page .property-card-img .img-wrap {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.code-badge {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0,0,0,0.65);
color: #fff;
padding: 4px 10px;
font-size: 12px;
border-radius: 4px;
}
/* BODY - SCOPE to listing/guide pages only */
.location-page .property-card-body,
.guide-page .property-card-body {
width: 65%;
padding: 18px 22px;
}
.location-page .property-price,
.guide-page .property-price {
font-size: 20px;
font-weight: 700;
margin-bottom: 5px;
color: #1c4e80;
}
.location-page .property-price .price-main,
.guide-page .property-price .price-main {
font-size: 21px;
}
.location-page .property-title a,
.guide-page .property-title a {
color: #222;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.location-page .property-location,
.guide-page .property-location {
font-size: 14px;
margin: 6px 0 10px;
color: #666;
}
.location-page .property-summary,
.guide-page .property-summary {
font-size: 14px;
color: #444;
margin-bottom: 10px;
}
.location-page .property-specs,
.guide-page .property-specs {
display: flex;
justify-content: space-between;
align-items: center;
}
.location-page .property-specs span,
.guide-page .property-specs span {
font-size: 13px;
color: #222;
margin-right: 10px;
}
.location-page .btn-details,
.guide-page .btn-details {
background: #1c4e80;
color: #fff;
padding: 6px 14px;
border-radius: 4px;
text-decoration: none;
font-size: 13px;
}
.location-page .btn-details:hover,
.guide-page .btn-details:hover {
background: #163b60;
color: #fff;
}
/* MOBILE - SCOPE to listing/guide pages only */
@media(max-width: 767px) {
.location-page .property-card,
.guide-page .property-card {
flex-direction: column;
}
.location-page .property-card-img,
.guide-page .property-card-img {
width: 100%;
height: 220px;
}
.location-page .property-card-body,
.guide-page .property-card-body {
width: 100%;
}
}
/* ============================================================
APPLE MINIMAL WHITE STYLE - LISTING CARDS
Clean, bright, modern UI similar to Apple, Airbnb, Knight Frank
SCOPE to listing/guide pages only
============================================================ */
.location-page .listing-card,
.guide-page .listing-card,
.search-page .listing-card,
.advantage-page .listing-card {
display: flex;
align-items: stretch;
background: #ffffff !important;
border-radius: 18px !important;
overflow: hidden;
margin-bottom: 32px !important;
padding: 0;
border: 1px solid rgba(0,0,0,0.08) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.location-page .listing-card:hover,
.guide-page .listing-card:hover,
.search-page .listing-card:hover,
.advantage-page .listing-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
/* IMAGE SIDE - SCOPE to listing/guide/search/advantage pages */
.location-page .listing-image,
.guide-page .listing-image,
.search-page .listing-image,
.advantage-page .listing-image {
width: 35%; /* Reduced from 38% to create more breathing space */
min-height: 260px;
position: relative;
flex-shrink: 0; /* Prevent image from shrinking */
}
.location-page .listing-image .image,
.guide-page .listing-image .image,
.search-page .listing-image .image,
.advantage-page .listing-image .image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.code-tag {
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(0,0,0,0.65);
color: #fff;
padding: 5px 12px;
border-radius: 6px;
font-size: 13px;
}
/* CONTENT SIDE - Apple Minimal spacing (24-32px padding) - SCOPE to listing/guide/search/advantage pages */
.location-page .listing-content,
.guide-page .listing-content,
.search-page .listing-content,
.advantage-page .listing-content {
width: 65%;
padding: 28px 32px 28px 32px !important; /* 24-32px padding, 32px gap from image */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
/* ============================================================
OLD PRICE-LINE STYLING - NO LONGER USED (Commented out)
Now using .price-badge instead
============================================================ */
/*
.property-listing ul li.listing-card .listing-content .price-line,
.listing-card .listing-content .price-line,
.listing-content .price-line,
.price-line {
font-size: 20px !important;
font-weight: 700 !important;
color: #333 !important;
margin-bottom: 12px !important;
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
line-height: 1.3 !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
position: relative !important;
float: none !important;
left: auto !important;
top: auto !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
*/
/* ============================================================
PREMIUM PRICE DESIGNS - CHOOSE ONE:
1. Sotheby's Luxury Minimalist
2. Knight Frank Bold Badge (Green)
3. Knight Frank Bold Badge (Red)
4. Christie's Ultra-Modern Clean Grey
Uncomment the design you want below:
============================================================ */
/*
=== OPTION 1: SOTHEBY'S LUXURY MINIMALIST ===
.listing-card .price-line {
font-size: 22px !important;
font-weight: 300 !important;
color: #000 !important;
letter-spacing: 0.5px !important;
font-family: 'Georgia', 'Times New Roman', serif !important;
}
.listing-card .price-line .price {
font-weight: 400 !important;
color: #000 !important;
}
.listing-card .price-line .currency {
font-weight: 300 !important;
color: #666 !important;
margin-left: 4px !important;
}
.listing-card .price-line .price-prefix {
font-weight: 300 !important;
color: #666 !important;
text-transform: lowercase !important;
}
*/
/*
=== OPTION 2: KNIGHT FRANK BOLD BADGE (GREEN) ===
.listing-card .price-line {
display: inline-flex !important;
background: #2d8659 !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 4px !important;
font-size: 18px !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
}
.listing-card .price-line .price {
color: #fff !important;
font-weight: 700 !important;
}
.listing-card .price-line .currency {
color: rgba(255,255,255,0.9) !important;
margin-left: 4px !important;
}
.listing-card .price-line .price-prefix {
color: rgba(255,255,255,0.9) !important;
text-transform: lowercase !important;
margin-right: 4px !important;
}
*/
/*
=== OPTION 2 RED: KNIGHT FRANK BOLD BADGE (RED) ===
.listing-card .price-line {
display: inline-flex !important;
background: #c41e3a !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 4px !important;
font-size: 18px !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
}
.listing-card .price-line .price {
color: #fff !important;
font-weight: 700 !important;
}
.listing-card .price-line .currency {
color: rgba(255,255,255,0.9) !important;
margin-left: 4px !important;
}
.listing-card .price-line .price-prefix {
color: rgba(255,255,255,0.9) !important;
text-transform: lowercase !important;
margin-right: 4px !important;
}
*/
/*
=== OPTION 3: CHRISTIE'S ULTRA-MODERN CLEAN GREY ===
.listing-card .price-line {
font-size: 24px !important;
font-weight: 500 !important;
color: #2c2c2c !important;
letter-spacing: -0.3px !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.listing-card .price-line .price {
font-weight: 600 !important;
color: #1a1a1a !important;
}
.listing-card .price-line .currency {
font-weight: 400 !important;
color: #6b6b6b !important;
margin-left: 6px !important;
font-size: 20px !important;
}
.listing-card .price-line .price-prefix {
font-weight: 400 !important;
color: #6b6b6b !important;
text-transform: lowercase !important;
font-size: 18px !important;
margin-right: 4px !important;
}
*/
/* OLD PRICE-LINE ELEMENT STYLES - NO LONGER USED (Commented out) */
/*
.property-listing ul li.listing-card .listing-content .price-line .price-prefix,
.listing-card .listing-content .price-line .price-prefix,
.listing-content .price-line .price-prefix,
.price-line .price-prefix {
font-size: 16px !important;
font-weight: 600 !important;
color: #666 !important;
margin-right: 0 !important;
display: inline-block !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
text-transform: none !important;
}
.property-listing ul li.listing-card .listing-content .price-line .price,
.listing-card .listing-content .price-line .price,
.listing-content .price-line .price,
.price-line .price {
color: #111 !important;
font-size: 20px !important;
font-weight: 700 !important;
white-space: nowrap !important;
display: inline-block !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
position: static !important;
float: none !important;
left: auto !important;
top: auto !important;
line-height: 1.3 !important;
}
.property-listing ul li.listing-card .listing-content .price-line .currency,
.listing-card .listing-content .price-line .currency,
.listing-content .price-line .currency,
.price-line .currency {
font-size: 16px !important;
font-weight: 600 !important;
color: #666 !important;
white-space: nowrap !important;
margin-left: 0 !important;
display: inline-block !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
*/
/* APPLE MINIMAL TITLE - Navy blue, larger, bold, unified typography - SCOPE to listing/guide/search/advantage pages */
.location-page .listing-title,
.guide-page .listing-title,
.search-page .listing-title,
.advantage-page .listing-title {
margin: 0 0 12px 0 !important;
line-height: 1.3 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
}
.location-page .listing-title a,
.guide-page .listing-title a,
.search-page .listing-title a,
.advantage-page .listing-title a {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 24px !important;
line-height: 1.3 !important;
color: #2C3E50 !important; /* Unified color */
font-weight: 600 !important; /* Unified weight */
text-decoration: none;
display: block;
}
.location-page .listing-title a:hover,
.guide-page .listing-title a:hover,
.search-page .listing-title a:hover,
.advantage-page .listing-title a:hover {
color: #0d5aa7 !important;
}
/* APPLE MINIMAL LOCATION - Unified typography - SCOPE to listing/guide/search/advantage pages */
.location-page .listing-location,
.guide-page .listing-location,
.search-page .listing-location,
.advantage-page .listing-location {
margin: 0 0 14px 0 !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
color: #444 !important; /* Unified body color */
display: flex;
align-items: center;
gap: 6px;
line-height: 1.5;
}
.location-page .listing-location i,
.guide-page .listing-location i,
.search-page .listing-location i,
.advantage-page .listing-location i {
color: #2C3E50 !important; /* Unified icon color */
font-size: 14px !important;
}
/* APPLE MINIMAL SUMMARY - Unified typography - SCOPE to listing/guide/search/advantage pages */
.location-page .listing-summary,
.guide-page .listing-summary,
.search-page .listing-summary,
.advantage-page .listing-summary {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important; /* Unified line-height */
color: #444 !important; /* Unified body color */
margin: 0 0 20px 0 !important;
flex-grow: 1;
}
/* Advantage page: Limit summary text to 2 lines with fade-out effect */
.advantage-page .listing-summary {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.5 !important;
max-height: calc(1.5em * 2) !important; /* 2 lines */
position: relative !important;
}
/* Fade-out effect for advantage page summary text */
.advantage-page .listing-summary::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 1.5em !important; /* Height of one line */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important;
pointer-events: none !important;
}
/* Advantage page: Studio properties - limit to 1 line only with fade-out */
.advantage-page .listing-summary.listing-summary-studio {
-webkit-line-clamp: 1 !important;
line-clamp: 1 !important;
max-height: 1.5em !important; /* 1 line */
}
/* Fade-out effect for Studio properties (shorter fade) */
.advantage-page .listing-summary.listing-summary-studio::after {
height: 0.75em !important; /* Half line height for Studio */
}
/* APPLE MINIMAL META - Consistent 14px spacing - SCOPE to listing/guide/search/advantage pages */
.location-page .listing-meta,
.guide-page .listing-meta,
.search-page .listing-meta,
.advantage-page .listing-meta {
display: flex;
align-items: center;
gap: 14px !important; /* Consistent 14px spacing */
flex-wrap: wrap;
margin-top: auto;
width: 100%;
}
.location-page .listing-meta span,
.guide-page .listing-meta span,
.search-page .listing-meta span,
.advantage-page .listing-meta span {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
color: #444 !important; /* Unified body color */
display: flex;
align-items: center;
gap: 6px;
line-height: 1.5;
}
/* =======================================================================
LISTING CARD ICONS - UNIFIED SIZE AND STYLE
Match bed icon size and style for all icons (bed, bath, sqm)
======================================================================= */
.location-page .listing-meta img.iconic,
.search-page .listing-meta img.iconic,
.guide-page .listing-meta img.iconic,
.advantage-page .listing-meta img.iconic,
.location-page .listing-meta img[src*="bed.png"],
.location-page .listing-meta img[src*="bath.png"],
.location-page .listing-meta img[src*="size.png"],
.search-page .listing-meta img[src*="bed.png"],
.search-page .listing-meta img[src*="bath.png"],
.search-page .listing-meta img[src*="size.png"],
.guide-page .listing-meta img[src*="bed.png"],
.guide-page .listing-meta img[src*="bath.png"],
.guide-page .listing-meta img[src*="size.png"],
.advantage-page .listing-meta img[src*="bed.png"],
.advantage-page .listing-meta img[src*="bath.png"],
.advantage-page .listing-meta img[src*="size.png"] {
width: auto !important;
height: 20px !important;
max-height: 20px !important;
min-height: 20px !important;
object-fit: contain !important;
display: inline-block !important;
vertical-align: middle !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/* APPLE MINIMAL VIEW DETAILS BUTTON - Unified Apple style - SCOPE to listing/guide/search/advantage pages */
.location-page .btn-view,
.guide-page .btn-view,
.search-page .btn-view,
.advantage-page .btn-view {
margin-left: auto !important;
background: #1a3a7a !important; /* Same blue as property cards */
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 8px !important; /* Unified 8px rounded */
text-decoration: none;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
transition: background 0.2s ease;
box-shadow: none !important; /* No shadows for clean look */
border: none !important;
}
.location-page .btn-view:hover,
.guide-page .btn-view:hover,
.search-page .btn-view:hover,
.advantage-page .btn-view:hover {
background: #0d5aa7 !important;
}
/* MOBILE - Apple Minimal Style - SCOPE to listing/guide/search/advantage pages */
@media(max-width: 768px) {
.location-page .listing-card,
.guide-page .listing-card,
.search-page .listing-card,
.advantage-page .listing-card {
flex-direction: column;
margin-bottom: 24px !important;
}
.location-page .listing-image,
.guide-page .listing-image,
.search-page .listing-image,
.advantage-page .listing-image {
width: 100%;
height: 220px;
min-height: 220px;
}
.location-page .listing-content,
.guide-page .listing-content,
.search-page .listing-content,
.advantage-page .listing-content {
width: 100%;
padding: 24px !important; /* Consistent 24px padding on mobile */
}
.location-page .listing-title a,
.guide-page .listing-title a,
.search-page .listing-title a,
.advantage-page .listing-title a {
font-size: 20px !important;
}
.location-page .btn-view,
.guide-page .btn-view,
.search-page .btn-view,
.advantage-page .btn-view {
width: 100%;
text-align: center;
margin-left: 0 !important;
margin-top: 8px;
}
}
/* OLD .liste STYLES REMOVED - Now using .listing-card structure */
/* These old styles are kept commented for reference but no longer active */
/*
.property-listing ul li.liste {
display: flex;
width: 100%;
background: #fff;
border-radius: 14px;
margin-bottom: 30px;
border: 1px solid #d6dce3;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
*/
/* Ensure listing-image and listing-content align properly - SCOPE to listing/guide/search/advantage pages */
.location-page .listing-image,
.guide-page .listing-image,
.search-page .listing-image,
.advantage-page .listing-image {
display: flex;
align-items: stretch;
}
.location-page .listing-image a,
.guide-page .listing-image a,
.search-page .listing-image a,
.advantage-page .listing-image a {
display: flex;
width: 100%;
height: 100%;
}
.location-page .listing-image .image,
.guide-page .listing-image .image,
.search-page .listing-image .image,
.advantage-page .listing-image .image {
flex: 1;
min-height: 260px;
}
/* ============================================================
APPLE MINIMAL PRICE BADGE
Pill-shaped green badge, clean and modern
SCOPE to listing/guide/search/advantage pages
============================================================ */
.location-page .price-badge,
.guide-page .price-badge,
.search-page .price-badge,
.advantage-page .price-badge {
display: inline-flex !important;
align-items: center !important;
background: #33cc66 !important; /* Apple green */
color: #ffffff !important;
padding: 6px 18px !important;
border-radius: 14px !important;
font-size: 18px !important;
font-weight: 700 !important;
width: max-content !important;
margin-bottom: 16px !important;
gap: 6px !important;
position: relative !important;
float: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
.location-page .price-badge .price-prefix,
.guide-page .price-badge .price-prefix,
.search-page .price-badge .price-prefix,
.advantage-page .price-badge .price-prefix {
font-weight: 600 !important;
opacity: 0.95 !important;
text-transform: lowercase !important;
font-size: 16px !important;
}
.location-page .price-badge .price-number,
.guide-page .price-badge .price-number,
.search-page .price-badge .price-number,
.advantage-page .price-badge .price-number {
font-weight: 700 !important;
letter-spacing: 0.2px !important;
color: #ffffff !important;
}
.location-page .price-badge .price-currency,
.guide-page .price-badge .price-currency,
.search-page .price-badge .price-currency,
.advantage-page .price-badge .price-currency {
font-weight: 700 !important;
margin-left: 2px !important;
color: #ffffff !important;
font-size: 16px !important;
}
/* Override old .property-listing .price rule (line 26) that might affect badge */
.property-listing .price-badge,
.property-listing .price-badge .price-number,
.property-listing .listing-content .price-badge {
position: relative !important;
float: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
}
/* ============================================================
APPLE MINIMAL SEARCH BOX - White, rounded, soft border, left icon
============================================================ */
/* ============================================================
PROPERTY DETAIL PAGE - Clean Apple-Style H1 Title
============================================================ */
/* Hide old gray header section */
html.property-listing-page .site-showcase .page-header.text-header,
html.property-detail-page .site-showcase .page-header.text-header {
display: none !important;
}
html.property-listing-page .site-showcase,
html.property-detail-page .site-showcase {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* New clean Apple-style H1 for property detail page */
html.property-listing-page .property-detail-title,
html.property-detail-page .property-detail-title {
font-family: "Playfair Display", "Cormorant Garamond", "Georgia", serif !important;
font-size: 32px !important;
font-weight: 500 !important;
color: #2C3E50 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
letter-spacing: 0.5px !important;
text-transform: none !important;
text-shadow: none !important;
}
@media (max-width: 767px) {
html.property-listing-page .property-detail-title,
html.property-detail-page .property-detail-title {
font-size: 24px !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
}
/* ============================================================
GUIDE ARTICLE PAGE - Clean Apple-Style H1 Title
============================================================ */
html.guide-page .site-showcase .page-header.text-header,
html.guide-page .parallax.page-header.text-header {
display: none !important;
}
html.guide-page .guide-article-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
}
@media (max-width: 767px) {
html.guide-page .guide-article-title {
font-size: 24px !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
}
/* ============================================================
INVESTMENT ARTICLE PAGE - Clean Apple-Style H1 Title
============================================================ */
html.investment-page .site-showcase .page-header.text-header,
html.investment-page .parallax.page-header.text-header {
display: none !important;
}
html.investment-page .investment-article-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
}
@media (max-width: 767px) {
html.investment-page .investment-article-title {
font-size: 24px !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
}
/* ============================================================
SERVICE ARTICLE PAGE - Clean Apple-Style H1 Title
============================================================ */
html.service-page .site-showcase .page-header.text-header,
html.service-page .parallax.page-header.text-header {
display: none !important;
}
html.service-page .service-article-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
}
/* Service article H2 styling - matches other service pages */
html.service-page .service-article-h2 {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 24px !important;
font-weight: 600 !important;
color: #374151 !important;
margin: 0 0 20px 0 !important;
line-height: 1.3 !important;
padding: 0 !important;
text-transform: none !important;
}
@media (max-width: 767px) {
html.service-page .service-article-title {
font-size: 24px !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
html.service-page .service-article-h2 {
font-size: 20px !important;
margin-bottom: 16px !important;
}
}
/* ============================================================
NEWS ARTICLE PAGE - Clean Apple-Style H1 Title
============================================================ */
html.news-page .site-showcase .page-header.text-header,
html.news-page .parallax.page-header.text-header,
html.guide-page.news-page .site-showcase .page-header.text-header,
html.guide-page.news-page .parallax.page-header.text-header {
display: none !important;
}
html.news-page .news-article-title,
html.guide-page.news-page .news-article-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
}
@media (max-width: 767px) {
html.news-page .news-article-title,
html.guide-page.news-page .news-article-title {
font-size: 24px !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
}
/* ============================================================
BLOG ARTICLE PAGE - Clean Apple-Style H1 Title
============================================================ */
html.blog-page .site-showcase .page-header.text-header,
html.blog-page .parallax.page-header.text-header,
html.guide-page.blog-page .site-showcase .page-header.text-header,
html.guide-page.blog-page .parallax.page-header.text-header {
display: none !important;
}
html.blog-page .blog-article-title,
html.guide-page.blog-page .blog-article-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
}
@media (max-width: 767px) {
html.blog-page .blog-article-title,
html.guide-page.blog-page .blog-article-title {
font-size: 24px !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
}
/* ============================================================
NEWS LISTING PAGE - Clean Apple-Style H1 Title
============================================================ */
html.news-listing-page .site-showcase .page-header.text-header,
html.news-listing-page .parallax.page-header.text-header,
html.news-listing-page .site-showcase {
display: none !important;
}
html.news-listing-page .news-listing-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 24px 0 32px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
}
@media (max-width: 767px) {
html.news-listing-page .news-listing-title {
font-size: 24px !important;
margin: 20px 0 24px 0 !important;
line-height: 1.3 !important;
}
}
/* ============================================================
NEWS LISTING PAGE - Article Title Styling (H3)
============================================================ */
.news-title {
font-size: 1.35rem; /* close to old H2 size */
line-height: 1.35;
font-weight: 600;
margin-bottom: 8px;
}
.news-title a {
color: inherit;
text-decoration: none;
}
.news-title a:hover {
text-decoration: underline;
}
.news-title small {
font-size: 0.85em;
font-weight: 400;
color: #666;
margin-left: 8px;
}
@media (max-width: 767px) {
.news-title {
font-size: 1.2rem;
line-height: 1.4;
}
}
/* ============================================================
NEWS LISTING PAGE - Intro Paragraph Styling
============================================================ */
.news-intro {
font-size: 16px;
line-height: 1.6;
color: #555;
margin: -16px 0 32px 0;
font-weight: 400;
max-width: 800px;
}
@media (max-width: 767px) {
.news-intro {
font-size: 15px;
margin: -12px 0 24px 0;
}
}
/* ============================================================
BLOG LISTING PAGE - Article Title Styling (H3)
============================================================ */
.blog-title {
font-size: 1.35rem; /* close to old H2 size */
line-height: 1.35;
font-weight: 600;
margin-bottom: 8px;
}
.blog-title a {
color: inherit;
text-decoration: none;
}
.blog-title a:hover {
text-decoration: underline;
}
.blog-title small {
font-size: 0.85em;
font-weight: 400;
color: #666;
margin-left: 8px;
}
@media (max-width: 767px) {
.blog-title {
font-size: 1.2rem;
line-height: 1.4;
}
}
/* ============================================================
GUIDE LISTING PAGE - Article Title Styling (H3)
============================================================ */
.guide-title {
font-size: 1.35rem; /* close to old H2 size */
line-height: 1.35;
font-weight: 600;
margin-bottom: 8px;
}
.guide-title a {
color: inherit;
text-decoration: none;
}
.guide-title a:hover {
text-decoration: underline;
}
.guide-title small {
font-size: 0.85em;
font-weight: 400;
color: #666;
margin-left: 8px;
}
@media (max-width: 767px) {
.guide-title {
font-size: 1.2rem;
line-height: 1.4;
}
}
/* ============================================================
GUIDE CARD TITLES β FINAL, CORRECT (H3 ONLY)
============================================================ */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.guideList h3.guide-title,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.guideList h3.guide-title a {
font-size: 24px !important;
font-weight: 600 !important;
color: #1d1d1f !important;
margin: 0 0 16px 0 !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
display: block !important;
}
/* DATE */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.guideList h3.guide-title small {
color: #999 !important;
font-size: 13px !important;
margin-left: 10px !important;
font-weight: 400 !important;
}
/* MOBILE */
@media (max-width: 767px) {
.fw.page .pageRight .pageRightBox .row .box-desktop-size.guideList h3.guide-title {
font-size: 20px !important;
}
}
/* ============================================================
BLOG & GUIDE LISTING PAGES - Subtle H2 Styling
============================================================ */
.blog-listing-title + .visually-subtle,
.guide-listing-title + .visually-subtle,
h2.visually-subtle {
font-size: 1.1rem !important;
line-height: 1.5 !important;
font-weight: 400 !important;
color: #555 !important;
margin: -12px 0 32px 0 !important;
max-width: 800px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
letter-spacing: normal !important;
}
@media (max-width: 767px) {
.blog-listing-title + .visually-subtle,
.guide-listing-title + .visually-subtle,
h2.visually-subtle {
font-size: 1rem !important;
margin: -8px 0 24px 0 !important;
}
}
/* ============================================================
BLOG LISTING PAGE - Clean Apple-Style H1 Title
============================================================ */
html.blog-listing-page .site-showcase .page-header.text-header,
html.blog-listing-page .parallax.page-header.text-header,
html.blog-listing-page .site-showcase {
display: none !important;
}
html.blog-listing-page .blog-listing-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 24px 0 32px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
}
@media (max-width: 767px) {
html.blog-listing-page .blog-listing-title {
font-size: 24px !important;
margin: 20px 0 24px 0 !important;
line-height: 1.3 !important;
}
}
/* ============================================================
SIDEBAR FILTER HEADING - Apple/Minimal Style, Right Aligned
============================================================ */
.location-page .sidebar.right-sidebar .sidebar-filter-heading,
.search-page .sidebar.right-sidebar .sidebar-filter-heading,
.advantage-page .sidebar.right-sidebar .sidebar-filter-heading,
.location-page aside.sidebar .sidebar-filter-heading,
.search-page aside.sidebar .sidebar-filter-heading,
.advantage-page aside.sidebar .sidebar-filter-heading {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
letter-spacing: -0.2px !important;
text-align: right !important;
transform: translateX(-1px) !important; /* Move 1px to the left */
}
/* Style the filter icon */
.location-page .sidebar-filter-heading .fa-filter,
.search-page .sidebar-filter-heading .fa-filter,
.advantage-page .sidebar-filter-heading .fa-filter {
margin-right: 8px !important;
font-size: 18px !important;
vertical-align: middle !important;
color: #2C3E50 !important;
}
@media (max-width: 767px) {
.location-page .sidebar.right-sidebar .sidebar-filter-heading,
.search-page .sidebar.right-sidebar .sidebar-filter-heading,
.advantage-page .sidebar.right-sidebar .sidebar-filter-heading,
.location-page aside.sidebar .sidebar-filter-heading,
.search-page aside.sidebar .sidebar-filter-heading,
.advantage-page aside.sidebar .sidebar-filter-heading {
font-size: 18px !important;
margin-bottom: 16px !important;
text-align: right !important;
transform: translateX(-1px) !important; /* Move 1px to the left */
}
.location-page .sidebar-filter-heading .fa-filter,
.search-page .sidebar-filter-heading .fa-filter,
.advantage-page .sidebar-filter-heading .fa-filter {
font-size: 16px !important;
margin-right: 6px !important;
}
}
/* ============================================================
Override global form#rfn blue background from style.css - CRITICAL FIX
============================================================ */
.location-page .sidebar.right-sidebar form#rfn,
.search-page .sidebar.right-sidebar form#rfn,
.advantage-page .sidebar.right-sidebar form#rfn,
.location-page aside.sidebar form#rfn,
.search-page aside.sidebar form#rfn,
.advantage-page aside.sidebar form#rfn,
.location-page .col-md-3 form#rfn,
.search-page .col-md-3 form#rfn,
.advantage-page .col-md-3 form#rfn,
.search-page aside.sidebar.right-sidebar.col-md-3 form#rfn,
.search-page .row .col-md-3 form#rfn,
.search-page .container .row .col-md-3 form#rfn,
.search-page .main .content .container .row .col-md-3 form#rfn {
background: #ffffff !important; /* Override blue background from style.css line 2079 */
border: 1px solid #DDD !important;
border-top: 1px solid #DDD !important;
border-left: 1px solid #DDD !important;
border-right: 1px solid #DDD !important;
border-bottom: 1px solid #DDD !important;
border-radius: 12px !important;
padding: 0 !important;
margin-bottom: 24px !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
box-shadow: none !important;
outline: none !important;
overflow: hidden !important;
height: auto !important;
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
left: 0 !important;
right: 0 !important;
}
/* Override global form#rfn input styles from style.css */
.location-page .sidebar.right-sidebar form#rfn input[type="text"],
.search-page .sidebar.right-sidebar form#rfn input[type="text"],
.advantage-page .sidebar.right-sidebar form#rfn input[type="text"],
.location-page aside.sidebar form#rfn input[type="text"],
.search-page aside.sidebar form#rfn input[type="text"],
.advantage-page aside.sidebar form#rfn input[type="text"] {
width: 100% !important; /* Override 192px from style.css */
border: none !important; /* Override border from style.css */
padding: 12px 16px 12px 42px !important; /* Override padding from style.css */
margin: 0 !important; /* Override margin from style.css */
background: transparent !important; /* Override #f5f5f5 from style.css */
float: none !important; /* Override float: left from style.css */
font-size: 14px !important; /* Override 12px from style.css */
}
/* Fix for search.php - prevent form from extending beyond sidebar container */
.search-page .sidebar.right-sidebar form#rfn,
.search-page aside.sidebar.right-sidebar.col-md-3 form#rfn,
.search-page .col-md-3 form#rfn {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex-shrink: 1 !important;
flex-grow: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
/* Ensure sidebar container itself has proper constraints and form stays within */
.search-page aside.sidebar.right-sidebar.col-md-3,
.search-page .sidebar.right-sidebar.col-md-3 {
box-sizing: border-box !important;
overflow: visible !important;
position: relative !important;
width: 25% !important; /* Bootstrap col-md-3 = 25% */
max-width: 25% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Prevent form from breaking out - constrain to parent width */
.search-page .col-md-3 form#rfn,
.search-page .row .col-md-3 form#rfn,
.search-page .container .row .col-md-3 form#rfn,
.search-page .main .content .container .row .col-md-3 form#rfn {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
}
/* Ensure parent containers don't cause overflow - constrain form to column width */
.search-page .main .content .container .row {
margin-left: -15px !important;
margin-right: -15px !important;
display: flex !important;
flex-wrap: wrap !important;
}
.search-page .main .content .container .row .col-md-3 {
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
width: 25% !important;
max-width: 25% !important;
flex: 0 0 25% !important;
overflow: hidden !important; /* Prevent form from breaking out */
}
/* Critical: Force form to respect parent width boundaries */
.search-page aside.sidebar.right-sidebar.col-md-3 form#rfn,
.search-page .col-md-3 aside.sidebar form#rfn,
.search-page .row .col-md-3 aside form#rfn {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
}
.location-page .sidebar.right-sidebar form#rfn::before,
.search-page .sidebar.right-sidebar form#rfn::before,
.advantage-page .sidebar.right-sidebar form#rfn::before {
content: "\f002";
font-family: "FontAwesome" !important;
position: absolute !important;
left: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important; /* Center vertically */
color: #999 !important;
font-size: 14px !important;
z-index: 1 !important;
pointer-events: none !important;
line-height: 1 !important; /* Prevent line-height from affecting position */
}
.location-page .sidebar.right-sidebar form#rfn input[type="text"],
.search-page .sidebar.right-sidebar form#rfn input[type="text"],
.advantage-page .sidebar.right-sidebar form#rfn input[type="text"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border: none !important;
padding: 12px 16px 12px 42px !important; /* Left padding for icon */
border-radius: 12px !important;
background: transparent !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
color: #222 !important;
margin: 0 !important;
float: none !important;
font-weight: 400 !important;
box-sizing: border-box !important;
min-height: 44px !important; /* Prevent height changes */
flex: 1 1 auto !important;
}
/* Ensure button doesn't cause width issues in search.php */
.search-page .sidebar.right-sidebar form#rfn button[type="submit"] {
flex-shrink: 0 !important;
flex-grow: 0 !important;
}
.location-page .sidebar.right-sidebar form#rfn input[type="text"]:focus,
.search-page .sidebar.right-sidebar form#rfn input[type="text"]:focus,
.advantage-page .sidebar.right-sidebar form#rfn input[type="text"]:focus {
outline: none;
}
.location-page .sidebar.right-sidebar form#rfn input[type="text"]::placeholder,
.search-page .sidebar.right-sidebar form#rfn input[type="text"]::placeholder,
.advantage-page .sidebar.right-sidebar form#rfn input[type="text"]::placeholder {
color: #999 !important;
}
.location-page .sidebar.right-sidebar form#rfn input[type="submit"],
.search-page .sidebar.right-sidebar form#rfn input[type="submit"],
.advantage-page .sidebar.right-sidebar form#rfn input[type="submit"],
.location-page .sidebar.right-sidebar form#rfn button[type="submit"],
.search-page .sidebar.right-sidebar form#rfn button[type="submit"],
.advantage-page .sidebar.right-sidebar form#rfn button[type="submit"] {
display: none !important; /* Hide submit button, icon is shown via ::before */
}
/* Fix for search form alignment and border issues - prevent border misalignment */
.location-page .sidebar.right-sidebar form#rfn:focus,
.search-page .sidebar.right-sidebar form#rfn:focus,
.advantage-page .sidebar.right-sidebar form#rfn:focus,
.location-page .sidebar.right-sidebar form#rfn:focus-within,
.search-page .sidebar.right-sidebar form#rfn:focus-within,
.advantage-page .sidebar.right-sidebar form#rfn:focus-within {
border: 1px solid #DDD !important; /* Ensure border stays consistent on all sides */
border-top: 1px solid #DDD !important; /* Explicitly set top border */
box-shadow: none !important;
outline: none !important;
}
/* Prevent any border/outline from appearing above the form */
.location-page .sidebar.right-sidebar form#rfn::after,
.search-page .sidebar.right-sidebar form#rfn::after,
.advantage-page .sidebar.right-sidebar form#rfn::after {
display: none !important;
}
/* Ensure input focus states don't add unwanted borders - remove blue border completely */
.location-page .sidebar.right-sidebar form#rfn input[type="text"]:focus,
.search-page .sidebar.right-sidebar form#rfn input[type="text"]:focus,
.advantage-page .sidebar.right-sidebar form#rfn input[type="text"]:focus {
border: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: none !important;
outline: none !important;
outline-offset: 0 !important;
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
}
/* Remove any blue border from form when input is focused - ensure consistent gray border */
.location-page .sidebar.right-sidebar form#rfn:focus-within,
.search-page .sidebar.right-sidebar form#rfn:focus-within,
.advantage-page .sidebar.right-sidebar form#rfn:focus-within {
border: 1px solid #DDD !important;
border-top: 1px solid #DDD !important;
border-left: 1px solid #DDD !important;
border-right: 1px solid #DDD !important;
border-bottom: 1px solid #DDD !important;
box-shadow: none !important;
outline: none !important;
outline-offset: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Specifically target search.php to remove any blue highlight and border */
.search-page .sidebar.right-sidebar form#rfn input[type="text"],
.search-page .sidebar.right-sidebar form#rfn input#refnr-input {
-webkit-tap-highlight-color: transparent !important;
tap-highlight-color: transparent !important;
border: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
/* Override any global input focus rules for search.php */
.search-page .sidebar.right-sidebar form#rfn input[type="text"]:focus,
.search-page .sidebar.right-sidebar form#rfn input#refnr-input:focus {
border: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
border-color: transparent !important;
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
/* ============================================================
APPLE MINIMAL PAGE HEADER - Remove white gap (not completely hidden)
============================================================ */
/* Gap fix handled in section above (line ~1103) using height: auto */
/* This section removed to avoid conflicts - showcase should be visible but with no gap */
/* ============================================================
APPLE MINIMAL DYNAMIC PAGE TITLE
============================================================ */
.location-page .page-title-dynamic,
.search-page .page-title-dynamic {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
/* Add 20px vertical spacing between header menu and page title on search page - desktop only */
@media (min-width: 768px) {
.search-page .page-title-dynamic {
margin-top: 20px !important;
}
}
/* ============================================================
APPLE MINIMAL SORTING DROPDOWN
============================================================ */
.location-page .sorting-wrapper,
.search-page .sorting-wrapper,
.sorting-wrapper {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.location-page .sort-label,
.search-page .sort-label,
.sort-label {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important; /* Bold for mobile and desktop */
color: #444 !important;
margin: 0 !important;
}
.location-page .sort-dropdown,
.search-page .sort-dropdown,
.sort-dropdown {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #222 !important;
background: #ffffff !important;
border: 1px solid #DDD !important;
border-radius: 8px !important;
padding: 10px 14px !important;
outline: none !important;
cursor: pointer !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23222' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 36px !important;
transition: border-color 0.2s ease;
}
.location-page .sort-dropdown:hover,
.search-page .sort-dropdown:hover,
.sort-dropdown:hover {
border-color: #999 !important;
}
.location-page .sort-dropdown:focus,
.search-page .sort-dropdown:focus,
.sort-dropdown:focus {
border-color: #1a3a7a !important;
}
/* ============================================================
HOMEPAGE SEARCH MODULE - UNIFIED WITH LOCATION PAGE STYLE
============================================================ */
/* Main container - unified styling */
/* ============================================
LUXURY FROSTED SEARCH MODULE β FINAL PATCH
============================================ */
.site-search-module {
background: rgba(255, 255, 255, 0.40) !important;
backdrop-filter: blur(18px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
border-radius: 18px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
position: relative !important;
z-index: 100 !important;
/* DO NOT CHANGE MARGINS HERE */
}
.site-search-module-inside {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
height: auto !important;
}
/* Mobile touch spacing + avoid cramped transition into content */
@media (max-width: 767px) {
.site-search-module {
border-radius: 16px !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
}
.site-search-module .bootstrap-select.btn-group > .dropdown-toggle,
.site-search-module .bootstrap-select.btn-group > .btn.dropdown-toggle,
.site-search-module select.form-control.input-lg {
min-height: 48px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.site-search-module button[type="submit"],
.site-search-module .btn-primary {
min-height: 48px !important;
}
}
/* Title - unified styling */
.site-search-module h3,
.site-search-module .col-md-3 h3,
.site-search-module-inside .col-md-3 h3 {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 3px 0 20px 0 !important;
padding-top: 3px !important;
padding: 3px 0 0 0 !important;
text-align: center !important;
}
/* ===========================================
APPLE-STYLE SEARCH MODULE DROPDOWNS
Scoped to .site-search-module only
HIGHEST PRIORITY - Override all conflicting styles
=========================================== */
/* ===========================================
APPLE-STYLE SEARCH MODULE DROPDOWNS
OVERRIDE ALL BOOTSTRAP DEFAULTS - HIGHEST PRIORITY
=========================================== */
/* Native select elements - Apple style - OVERRIDE ALL BOOTSTRAP */
.site-search-module select,
.site-search-module select.selectpicker,
.site-search-module select.form-control,
.site-search-module select.input-lg,
.site-search-module select.form-control.input-lg,
.site-search-module select.form-control.input-lg.selectpicker,
.site-search-module form select.form-control.input-lg.selectpicker,
.site-search-module .form-group select.form-control.input-lg.selectpicker,
.site-search-module .row select.form-control.input-lg.selectpicker {
/* Typography */
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #222 !important;
line-height: 1.5 !important;
/* Background - Override Bootstrap's #ffffff with shadow */
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
/* Border - Override Bootstrap's #cccccc and 3px radius */
border: 1px solid #DDD !important;
border-color: #DDD !important;
border-width: 1px !important;
border-radius: 8px !important;
border-style: solid !important;
/* Spacing */
padding: 10px 14px !important;
padding-left: 14px !important;
padding-right: 36px !important;
margin: 0 !important;
margin-bottom: 0 !important;
/* Size */
min-height: 44px !important;
height: auto !important;
width: 100% !important;
/* Shadow - Override Bootstrap's inset shadow */
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
/* Remove Bootstrap's transition, add our own */
-webkit-transition: border-color 0.2s ease !important;
transition: border-color 0.2s ease !important;
/* Appearance */
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
cursor: pointer !important;
outline: none !important;
vertical-align: middle !important;
}
.site-search-module select:hover,
.site-search-module select.selectpicker:hover,
.site-search-module select.form-control:hover,
.site-search-module select.form-control.input-lg:hover {
border-color: #bbb !important;
border: 1px solid #bbb !important;
}
.site-search-module select:focus,
.site-search-module select.selectpicker:focus,
.site-search-module select.form-control:focus,
.site-search-module select.form-control.input-lg:focus {
border-color: #bbb !important;
border: 1px solid #bbb !important;
outline: none !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(187, 187, 187, 0.1) !important;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(187, 187, 187, 0.1) !important;
}
/* Bootstrap Select dropdown toggle - Apple style - OVERRIDE ALL */
.site-search-module .bootstrap-select.btn-group > .dropdown-toggle,
.site-search-module .bootstrap-select.btn-group > .btn.dropdown-toggle {
/* Typography */
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #222 !important;
line-height: 1.5 !important;
/* Background - Override Bootstrap button defaults */
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
/* Border - Apple style */
border: 1px solid #DDD !important;
border-color: #DDD !important;
border-width: 1px !important;
border-radius: 8px !important;
border-style: solid !important;
/* Spacing */
padding: 10px 36px 10px 14px !important;
margin: 0 !important;
/* Size */
min-height: 44px !important;
height: auto !important;
width: 100% !important;
/* Shadow - Soft inner shadow */
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
/* Remove Bootstrap button styles */
text-align: left !important;
text-transform: none !important;
letter-spacing: normal !important;
/* Transition */
-webkit-transition: border-color 0.2s ease !important;
transition: border-color 0.2s ease !important;
/* Appearance */
outline: none !important;
cursor: pointer !important;
}
.site-search-module .bootstrap-select.btn-group > .dropdown-toggle:hover,
.site-search-module .bootstrap-select.btn-group > .btn.dropdown-toggle:hover {
border-color: #bbb !important;
border: 1px solid #bbb !important;
background: #ffffff !important;
background-color: #ffffff !important;
}
.site-search-module .bootstrap-select.btn-group > .dropdown-toggle:focus,
.site-search-module .bootstrap-select.btn-group > .btn.dropdown-toggle:focus,
.site-search-module .bootstrap-select.btn-group > .dropdown-toggle:active,
.site-search-module .bootstrap-select.btn-group > .btn.dropdown-toggle:active {
border-color: #bbb !important;
border: 1px solid #bbb !important;
outline: none !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(187, 187, 187, 0.1) !important;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(187, 187, 187, 0.1) !important;
background: #ffffff !important;
background-color: #ffffff !important;
}
/* Bootstrap Select dropdown menu - Apple style */
.site-search-module .bootstrap-select.btn-group .dropdown-menu {
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
border: 1px solid #DDD !important;
padding: 4px 0 !important;
margin-top: 4px !important;
background: #ffffff !important;
}
/* Bootstrap Select dropdown menu inner list */
.site-search-module .bootstrap-select.btn-group .dropdown-menu.inner {
border-radius: 8px !important;
overflow: hidden !important;
}
/* Dropdown menu list items - Apple style */
.site-search-module .bootstrap-select.btn-group .dropdown-menu.inner li a {
padding: 10px 14px !important;
font-size: 14px !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
color: #222 !important;
transition: background-color 0.15s ease !important;
}
.site-search-module .bootstrap-select.btn-group .dropdown-menu.inner li a:hover {
background-color: #f3f3f3 !important;
color: #222 !important;
}
.site-search-module .bootstrap-select.btn-group .dropdown-menu.inner li.selected a {
background-color: #f3f3f3 !important;
color: #222 !important;
font-weight: 500 !important;
}
/* Search button - unified with Location Page style (#1a3a7a) */
.site-search-module button[type="submit"],
.site-search-module .btn-primary {
background: #1a3a7a !important;
border: 1px solid #1a3a7a !important;
border-radius: 8px !important;
color: #ffffff !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 10px 20px !important;
min-height: 44px !important;
box-shadow: 0 1px 3px rgba(26, 58, 122, 0.2) !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
}
.site-search-module button[type="submit"]:hover,
.site-search-module .btn-primary:hover {
background: #153065 !important;
border-color: #153065 !important;
box-shadow: 0 2px 6px rgba(26, 58, 122, 0.3) !important;
transform: translateY(-1px) !important;
}
.site-search-module button[type="submit"]:focus,
.site-search-module .btn-primary:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(26, 58, 122, 0.3) !important;
}
.site-search-module button[type="submit"]:active,
.site-search-module .btn-primary:active {
transform: translateY(0) !important;
box-shadow: 0 1px 2px rgba(26, 58, 122, 0.2) !important;
}
/* Form group spacing - unified */
.site-search-module .form-group {
margin-bottom: 0 !important;
}
.site-search-module .row {
margin-left: -8px !important;
margin-right: -8px !important;
}
.site-search-module .row > [class*="col-"] {
padding-left: 8px !important;
padding-right: 8px !important;
margin-bottom: 12px !important;
}
/* Desktop: Horizontal layout - unified with Location Page */
@media (min-width: 992px) {
/* Override style.css absolute positioning */
.site-search-module {
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
height: auto !important;
padding: 24px !important;
margin: 24px 0 !important;
background: rgba(255, 255, 255, 0.40) !important;
backdrop-filter: blur(18px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
border-radius: 18px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
z-index: 100 !important;
/* DO NOT CHANGE MARGINS HERE */
}
/* Homepage hero slider: Move search bar 5px up */
body.home .site-search-module {
margin-top: 19px !important; /* Reduced from 24px to 19px (5px up) */
}
.site-search-module-inside {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
height: auto !important;
}
.site-search-module .row > [class*="col-"] {
margin-bottom: 0 !important;
}
.site-search-module h3,
.site-search-module .col-md-3 h3,
.site-search-module-inside .col-md-3 h3 {
font-size: 20px !important;
margin: 3px 0 20px 0 !important;
padding-top: 3px !important;
padding: 3px 0 0 0 !important;
text-align: center !important;
}
/* Desktop: Ensure consistent spacing between dropdowns */
.site-search-module .row > [class*="col-md-"] {
margin-bottom: 0 !important;
}
}
/* Mobile: Vertical layout - unified spacing (overrides old mobile styles) */
@media (max-width: 991px) {
.site-search-module {
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
width: 100% !important;
padding: 20px 15px !important;
margin: 15px 0 !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.40) !important;
backdrop-filter: blur(18px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
z-index: 100 !important;
}
.site-search-module-inside {
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
height: auto !important;
}
.site-search-module h3 {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
text-align: left !important;
}
.site-search-module .row > [class*="col-"] {
width: 100% !important;
margin-bottom: 12px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Mobile button full width - unified style */
.site-search-module button[type="submit"],
.site-search-module .btn-primary {
width: 100% !important;
background: #1a3a7a !important;
}
}
/* MOBILE TRANSPARENT HERO SEARCH BOX */
@media (max-width: 767px) {
.hero-container {
position: relative;
overflow: hidden;
}
/* make slider parallax visible behind */
.flexslider,
.flexslider .slides li {
height: 420px !important;
}
/* FLOATING SEARCH BOX */
.hero-search-wrapper {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 88%;
padding: 22px 20px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.70); /* transparency */
backdrop-filter: blur(14px); /* luxury blur */
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 10px 25px rgba(0,0,0,0.18);
z-index: 20;
}
/* HEADLINE STYLE */
.hero-search-wrapper h2 {
text-align: center;
font-size: 20px;
margin-bottom: 16px;
color: #1d2b53; /* deep navy luxury color */
font-weight: 700;
}
/* INPUT STYLE ON TRANSPARENT BOX */
.hero-search-wrapper input,
.hero-search-wrapper select {
background: rgba(255,255,255,0.9);
border: 1px solid #e0e0e0;
height: 52px;
border-radius: 10px;
}
/* SEARCH BUTTON */
.hero-search-wrapper button,
.hero-search-wrapper .search-btn {
height: 52px;
border-radius: 12px;
font-size: 18px;
}
/* CRITICAL: Show hero slider on mobile (override Bootstrap's hidden-xs) */
.site-showcase .hero-slider.hidden-xs,
.hero-slider.hidden-xs,
.site-showcase .hero-slider {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1 !important;
height: 420px !important;
min-height: 420px !important;
}
.site-showcase {
position: relative !important;
z-index: 1 !important;
display: block !important;
}
/* Ensure hero slider slides are visible */
.hero-slider .slides li {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
@media (max-width: 991px) {
.site-search-module button[type="submit"],
.site-search-module .btn-primary {
border-color: #1a3a7a !important;
margin-top: 0 !important;
}
/* Mobile dropdowns - unified style */
.site-search-module select,
.site-search-module .selectpicker,
.site-search-module .bootstrap-select,
.site-search-module .form-control {
width: 100% !important;
border-radius: 8px !important;
padding: 10px 14px !important;
min-height: 44px !important;
}
}
/* MOBILE TRANSPARENT HERO SEARCH BOX */
@media (max-width: 767px) {
.hero-container {
position: relative;
overflow: hidden;
}
/* make slider parallax visible behind */
.flexslider,
.flexslider .slides li {
height: 420px !important;
}
/* FLOATING SEARCH BOX */
.hero-search-wrapper {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 88%;
padding: 22px 20px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.70); /* transparency */
backdrop-filter: blur(14px); /* luxury blur */
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 10px 25px rgba(0,0,0,0.18);
z-index: 20;
}
/* HEADLINE STYLE */
.hero-search-wrapper h2 {
text-align: center;
font-size: 20px;
margin-bottom: 16px;
color: #1d2b53; /* deep navy luxury color */
font-weight: 700;
}
/* INPUT STYLE ON TRANSPARENT BOX */
.hero-search-wrapper input,
.hero-search-wrapper select {
background: rgba(255,255,255,0.9);
border: 1px solid #e0e0e0;
height: 52px;
border-radius: 10px;
}
/* SEARCH BUTTON */
.hero-search-wrapper button,
.hero-search-wrapper .search-btn {
height: 52px;
border-radius: 12px;
font-size: 18px;
}
}
/* Remove old block-heading completely */
.location-page .block-heading,
.search-page .block-heading {
display: none !important;
}
/* Hide image count on homepage property cards - desktop and mobile */
body.home .images-count,
.home .images-count,
body.home .property-block .images-count,
.home .property-block .images-count,
body.home .property-featured-image .images-count,
.home .property-featured-image .images-count {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
/* Hide tag section above map on homepage - desktop and mobile */
body.home .tag-section-hidden,
.home .tag-section-hidden,
body.home .page-section.tag-section-hidden,
.home .page-section.tag-section-hidden,
body.home .tag-section-hidden .container,
body.home .tag-section-hidden .row,
body.home .tag-section-hidden .col-md-3.col-sm-3,
body.home .tag-section-hidden .alttags,
.home .tag-section-hidden,
.home .tag-section-hidden .container,
.home .tag-section-hidden .row,
.home .tag-section-hidden .col-md-3,
.home .tag-section-hidden .col-sm-3,
.home .tag-section-hidden .alttags {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Hide tag links in general on homepage */
body.home .alttags,
.home .alttags,
body.home .alttags li,
.home .alttags li,
body.home .alttags a,
.home .alttags a {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* ============================================================
APPLE MINIMAL SIDEBAR BOXES - Modern minimal headers
============================================================ */
.location-page #srctp,
.location-page #topi,
.location-page #price_bl,
.location-page #location_bl,
.search-page #srctp,
.search-page #topi,
.search-page #price_bl,
.search-page #location_bl,
.advantage-page #srctp,
.advantage-page #topi,
.advantage-page #price_bl,
.advantage-page #location_bl {
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.08) !important;
border-radius: 12px !important;
margin: 0 0 20px 0 !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
overflow: hidden;
}
.location-page #srctp strong,
.location-page #topi strong,
.location-page #price_bl strong,
.location-page #location_bl strong,
.search-page #srctp strong,
.search-page #topi strong,
.search-page #price_bl strong,
.search-page #location_bl strong,
.advantage-page #srctp strong,
.advantage-page #topi strong,
.advantage-page #price_bl strong,
.advantage-page #location_bl strong {
background: #F7F7F7 !important; /* Soft grey background */
color: #2C3E50 !important; /* Modern title text */
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 14px 16px !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
margin: 0 !important;
display: block !important;
}
.location-page #srctp a,
.location-page #price_bl a,
.location-page #location_bl a,
.search-page #srctp a,
.search-page #price_bl a,
.search-page #location_bl a,
.advantage-page #srctp a,
.advantage-page #price_bl a,
.advantage-page #location_bl a {
padding: 12px 16px !important;
margin: 0 !important;
color: #444 !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
display: block !important;
text-decoration: none !important;
transition: background 0.2s ease;
}
.location-page #srctp a:hover,
.location-page #price_bl a:hover,
.location-page #location_bl a:hover,
.location-page #srctp a.acrnt,
.location-page #price_bl a.acrnt,
.location-page #location_bl a.acrnt,
.search-page #srctp a:hover,
.search-page #price_bl a:hover,
.search-page #location_bl a:hover,
.search-page #srctp a.acrnt,
.search-page #price_bl a.acrnt,
.search-page #location_bl a.acrnt,
.advantage-page #srctp a:hover,
.advantage-page #price_bl a:hover,
.advantage-page #location_bl a:hover,
.advantage-page #srctp a.acrnt,
.advantage-page #price_bl a.acrnt,
.advantage-page #location_bl a.acrnt {
background-color: #F7F7F7 !important;
color: #1a3a7a !important;
}
.location-page #srctp a i.fa,
.location-page #price_bl a i.fa,
.location-page #location_bl a i.fa,
.search-page #srctp a i.fa,
.search-page #price_bl a i.fa,
.search-page #location_bl a i.fa,
.advantage-page #srctp a i.fa,
.advantage-page #price_bl a i.fa,
.advantage-page #location_bl a i.fa {
margin-right: 8px !important;
color: #666 !important;
}
.location-page #srctp a em,
.location-page #price_bl a em,
.location-page #location_bl a em,
.search-page #srctp a em,
.search-page #price_bl a em,
.search-page #location_bl a em,
.advantage-page #srctp a em,
.advantage-page #price_bl a em,
.advantage-page #location_bl a em {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 13px !important;
color: #666 !important;
padding: 0 !important;
float: right !important;
font-style: normal !important;
}
.location-page #srctp a.acrnt em,
.location-page #price_bl a.acrnt em,
.location-page #location_bl a.acrnt em,
.location-page #srctp a:hover em,
.location-page #price_bl a:hover em,
.location-page #location_bl a:hover em,
.search-page #srctp a.acrnt em,
.search-page #price_bl a.acrnt em,
.search-page #location_bl a.acrnt em,
.search-page #srctp a:hover em,
.search-page #price_bl a:hover em,
.search-page #location_bl a:hover em,
.advantage-page #srctp a.acrnt em,
.advantage-page #price_bl a.acrnt em,
.advantage-page #location_bl a.acrnt em,
.advantage-page #srctp a:hover em,
.advantage-page #price_bl a:hover em,
.advantage-page #location_bl a:hover em {
color: #1a3a7a !important;
}
/* Bedrooms (#topi) special styling - rounded buttons */
.location-page #topi,
.search-page #topi,
.advantage-page #topi {
padding: 14px 12px 12px 12px !important;
}
.location-page #topi strong,
.search-page #topi strong,
.advantage-page #topi strong {
margin-bottom: 12px !important;
}
.location-page #topi a,
.search-page #topi a,
.advantage-page #topi a {
border-radius: 8px !important;
background: #F7F7F7 !important;
color: #444 !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 13px !important;
height: auto !important;
width: auto !important;
padding: 10px 14px !important;
margin: 4px !important;
border: 1px solid rgba(0,0,0,0.08) !important;
float: left !important;
text-align: center !important;
transition: all 0.2s ease !important;
}
.location-page #topi a:hover,
.search-page #topi a:hover,
.advantage-page #topi a:hover {
background: #1a3a7a !important;
color: #ffffff !important;
border-color: #1a3a7a !important;
}
.location-page #topi a.acrnt,
.search-page #topi a.acrnt,
.advantage-page #topi a.acrnt {
background: #1a3a7a !important;
color: #ffffff !important;
border-color: #1a3a7a !important;
}
.location-page #topi a em,
.search-page #topi a em,
.advantage-page #topi a em {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 11px !important;
color: inherit !important;
margin: 4px 0 0 0 !important;
float: none !important;
display: block !important;
}
.location-page #topi a:hover em,
.location-page #topi a.acrnt em,
.search-page #topi a:hover em,
.search-page #topi a.acrnt em,
.advantage-page #topi a:hover em,
.advantage-page #topi a.acrnt em {
color: inherit !important;
}
.location-page #topi a span,
.search-page #topi a span,
.advantage-page #topi a span {
font-size: 16px !important;
margin: 0 !important;
height: auto !important;
display: block !important;
}
/* ============================================================
APPLE MINIMAL PAGINATION - Unified styling
============================================================ */
.location-page .pagination {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
}
.location-page .pagination > li > a,
.location-page .pagination > li > span {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #444 !important;
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.08) !important;
border-radius: 8px !important;
padding: 8px 14px !important;
margin: 0 1px !important; /* 1px space between page numbers */
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.location-page .pagination > li > a:hover {
background: #F7F7F7 !important;
border-color: #999 !important;
color: #1a3a7a !important;
}
.location-page .pagination > li > span {
background: #1a3a7a !important;
color: #ffffff !important;
border-color: #1a3a7a !important;
font-weight: 600 !important;
}
/* Active page number styling - blue background (including page 1 when active) */
.location-page .pagination > li.active > a,
.location-page .pagination > li.active > span,
.location-page .pagination > li > a.active,
.location-page .pagination > li > span.active,
.location-page .pagination > li > span {
background: #1a3a7a !important;
color: #ffffff !important;
border-color: #1a3a7a !important;
font-weight: 600 !important;
}
.location-page .pagination > li > a:focus {
outline: none;
border-color: #1a3a7a !important;
}
.location-page .pagination {
margin-bottom: 60px !important; /* Match sidebar spacing: 60px (same as sidebar margin-top) */
margin-top: 20px !important;
line-height: 1.6 !important; /* Increase line height for 1-2px vertical spacing between wrapped lines */
}
/* Add vertical spacing between pagination lines when they wrap */
.location-page .pagination > li {
margin-bottom: 2px !important; /* 2px vertical space between lines when wrapped */
display: inline-block !important;
vertical-align: top !important;
margin-top: 0 !important;
}
/* Mobile: H1 padding-top and H2 font size reduction */
@media (max-width: 767px) {
/* Add 3px padding-top to H1 for more space from logo */
.location-page .page-title-dynamic {
padding-top: 3px !important;
}
/* Reduce H2 font size - make it 10px smaller than H1 or same size */
.location-page .seo-properties-headline {
font-size: calc(1em - 10px) !important;
line-height: 1.3 !important;
}
/* Mobile: Make pagination more visible with stronger borders and bold text */
.location-page .pagination > li > a,
.location-page .pagination > li > span {
border: 2px solid #1a3a7a !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 10px 16px !important;
background: #ffffff !important;
color: #1a3a7a !important;
}
.location-page .pagination > li > a:hover {
background: #1a3a7a !important;
color: #ffffff !important;
border-color: #1a3a7a !important;
}
.location-page .pagination > li > span {
background: #1a3a7a !important;
color: #ffffff !important;
border: 2px solid #1a3a7a !important;
font-weight: 700 !important;
}
.location-page .pagination {
margin-bottom: 30px !important;
margin-top: 25px !important;
}
}
/* Mobile: 10px padding-bottom for pagination container */
@media (max-width: 767px) {
.location-page article .col-md-12.text-center:has(ul.pagination),
.location-page article .col-md-12.text-center ul.pagination,
.location-page article > .col-md-12.text-center,
.location-page .col-md-12.text-center {
padding-bottom: 10px !important;
}
}
/* Desktop: 35px padding-bottom for pagination container */
@media (min-width: 768px) {
.location-page article .col-md-12.text-center:has(ul.pagination),
.location-page article > .col-md-12.text-center {
padding-bottom: 35px !important;
}
}
/* ============================================================
APPLE MINIMAL READ MORE / SHOW LESS TOGGLE
SCOPE to location-page only
============================================================ */
.location-page #listing-description {
max-height: 250px;
overflow: hidden;
position: relative;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
line-height: 1.65 !important;
font-size: 15px !important;
color: #555 !important;
margin: 60px auto 20px auto !important; /* Match sidebar spacing: 60px top (same as sidebar margin-top) */
padding: 0 10px !important;
max-width: 760px !important;
}
/* Mobile: Override general rule with increased spacing */
@media (max-width: 767px) {
.location-page #listing-description {
margin-top: 0 !important; /* Top margin handled by pagination margin-bottom */
margin-bottom: 15px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 5px !important; /* Add 5px padding to top */
padding-left: 15px !important;
padding-right: 15px !important;
}
.location-page #listing-description h3 {
margin-top: 5px !important;
padding-top: 0 !important;
}
}
/* Gradient fade at bottom - SCOPE to location-page only */
.location-page #listing-description::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
pointer-events: none;
transition: opacity 0.3s ease;
}
/* Hide gradient when expanded - SCOPE to location-page only */
.location-page #listing-description.no-fade::after,
.location-page #listing-description.expanded::after {
opacity: 0;
display: none;
}
/* Toggle button - SCOPE to location-page only */
.location-page .desc-toggle {
display: block !important;
margin: 10px auto 50px auto !important;
padding: 10px 22px !important;
background: #e9ecef !important;
color: #333 !important;
border: 1px solid #d0d0d0 !important;
border-radius: 12px !important;
font-size: 15px !important;
cursor: pointer !important;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
transition: all 0.2s ease !important;
font-weight: 400 !important;
outline: none !important;
}
/* Desktop: Reduce bottom margin of Read more button to bring CTA closer */
@media (min-width: 768px) {
.location-page .desc-toggle {
margin-bottom: 20px !important; /* Reduced from 50px to 20px on desktop */
}
}
/* Increase space between read more button and sidebar - Desktop */
.location-page .sidebar.right-sidebar {
margin-top: 60px !important; /* Increased spacing above sidebar (from default to 60px) */
}
/* Toggle button hover/focus - SCOPE to location-page only */
.location-page .desc-toggle:hover {
background: #dfe3e6 !important;
border-color: #b0b0b0 !important;
}
.location-page .desc-toggle:focus {
outline: 2px solid #1a3a7a !important;
outline-offset: 2px !important;
}
/* Expanded state - SCOPE to location-page only */
.location-page #listing-description.expanded {
max-height: none !important;
overflow: visible !important;
}
/* Mobile responsive for price badge, sorting, title, and read more - SCOPE to listing/guide pages only */
@media(max-width: 768px) {
.location-page .price-badge,
.guide-page .price-badge {
font-size: 16px !important;
padding: 6px 16px !important;
}
.location-page .price-badge .price-number,
.guide-page .price-badge .price-number {
font-size: 16px !important;
}
.location-page .price-badge .price-prefix,
.location-page .price-badge .price-currency,
.guide-page .price-badge .price-prefix,
.guide-page .price-badge .price-currency {
font-size: 14px !important;
}
.location-page .listing-title a,
.guide-page .listing-title a {
font-size: 20px !important;
}
.location-page .page-title-dynamic,
.search-page .page-title-dynamic {
font-size: 26px !important;
padding-top: 0 !important;
margin-top: 10px !important; /* Reduced spacing from header menu on mobile */
}
/* Reduce spacing between header and h1 on search/location pages - mobile only */
.search-page .main,
.search-page #content.content,
.search-page .content.full,
.location-page .main,
.location-page #content.content,
.location-page .content.full {
margin-top: 0 !important;
padding-top: 10px !important; /* Minimal spacing from header */
}
.search-page .container,
.location-page .container {
margin-top: 0 !important;
padding-top: 0 !important;
}
.search-page article.col-md-9,
.location-page article.col-md-9 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Reduce H2 property counter font size on mobile - 10px smaller than H1 */
.location-page .seo-properties-headline {
font-size: 16px !important; /* 26px - 10px = 16px */
line-height: 1.3 !important;
font-weight: 500 !important;
}
.location-page .sorting-wrapper,
.search-page .sorting-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.location-page .sort-dropdown,
.search-page .sort-dropdown {
width: 100%;
}
.location-page #listing-description {
padding: 5px 15px 0 15px !important; /* Add 5px padding-top */
margin: 0 auto 15px auto !important; /* Top margin handled by pagination margin-bottom */
font-size: 14px !important;
}
/* Add 5px margin to top of SEO text title (H3) */
.location-page #listing-description h3,
.location-page #listing-description h3[itemprop="headline"],
.location-page section#listing-description h3 {
margin-top: 5px !important;
padding-top: 0 !important;
}
.location-page .desc-toggle {
width: calc(100% - 30px) !important;
max-width: 300px !important;
margin: 10px auto 40px auto !important;
}
/* Increase space between read more button and sidebar - Mobile (max-width: 768px) */
.location-page .sidebar.right-sidebar {
margin-top: 50px !important; /* Increased spacing above sidebar */
}
.location-page .location-cta-wrapper {
margin: 30px 15px 40px 15px !important;
}
.location-page .location-cta-container {
height: 100px !important;
padding: 0 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.location-page .location-cta-button {
width: 100% !important;
max-width: 100% !important;
padding: 14px 20px !important;
font-size: 15px !important;
}
}
/* ============================================================
YEAR OF CONSTRUCTION - HIDE BY DEFAULT, SHOW WHEN CHECKED
============================================================ */
/* Hide year of construction by default on all property detail pages */
/* PHP will only output the element when show_building_year=1, but this CSS ensures it's hidden if it appears */
.detail-icon-item:has(img[alt="year"]):not(.show-building-year),
.detail-icon-item:has(img[alt="Year"]):not(.show-building-year),
.detail-icon-item:has(img[src*="year.png"]):not(.show-building-year),
.detail-icon-item:has(img[src*="year.PNG"]):not(.show-building-year) {
display: none !important;
}
/* Show when explicitly enabled via admin checkbox (PHP adds .show-building-year class) */
.detail-icon-item.show-building-year {
display: flex !important; /* Match other detail-icon-item display style */
}
.detail-icon-item.show-building-year img[alt="year"],
.detail-icon-item.show-building-year img[alt="Year"],
.detail-icon-item.show-building-year img[src*="year.png"],
.detail-icon-item.show-building-year img[src*="year.PNG"] {
display: block !important; /* Match other detail-icon display */
}
/* ============================================================
LOCATION CTA - SEPARATE MOBILE AND DESKTOP VERSIONS
============================================================ */
/* Base styles for both CTAs - will be overridden by specific mobile/desktop rules */
.location-page .location-cta-wrapper {
clear: both;
}
/* Mobile CTA - Show on mobile, hide on desktop */
.location-page .location-cta-mobile {
display: block;
}
/* Desktop CTA - Hide on mobile, show on desktop */
.location-page .location-cta-desktop {
display: none;
}
@media (min-width: 768px) {
/* Hide mobile CTA on desktop */
.location-page .location-cta-mobile {
display: none !important;
}
/* Show desktop CTA on desktop - Extended: 65% width (added back 5% from 60%) */
.location-page .location-cta-desktop {
display: block !important;
width: 65% !important; /* Extended from 60% to 65% (added back 5%) */
max-width: 65% !important; /* Prevent exceeding 65% */
margin-left: 5% !important; /* Center: (75% - 65%) / 2 = 5% margin on left */
margin-right: 0 !important;
margin-top: 10px !important; /* Reduced spacing from Read more button */
margin-bottom: 50px !important;
padding-left: 15px !important; /* Match Bootstrap column padding */
padding-right: 15px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
float: left !important; /* Float left like col-md-9 */
clear: both !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
}
/* Ensure container doesn't exceed wrapper width */
.location-page .location-cta-desktop .location-cta-container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important; /* No padding - wrapper handles it */
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Button fills container but container is constrained to 75% */
.location-page .location-cta-desktop .location-cta-button {
width: 100% !important; /* Full width of container (which is 75% of row) */
max-width: 100% !important;
padding: 14px 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
}
/* Mobile: Move CTA below sidebar and adjust spacing */
@media (max-width: 767px) {
/* Reduce space between last card and pagination by 3px */
.location-page .listing-card:last-child,
.location-page .property-listing ul li:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.location-page .property-listing {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.location-page .pagination {
margin-top: calc(20px - 3px) !important; /* Reduce by 3px: 20px - 3px = 17px */
margin-bottom: 50px !important; /* Match sidebar spacing: 50px (same as sidebar margin-top on mobile) */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Increase space between SEO text and pagination */
.location-page .seo-content-spacer {
margin-top: 0 !important; /* Reset, will be handled by pagination */
}
/* Increase space between pagination and SEO text section - Mobile only */
.location-page .pagination + .seo-content-spacer,
.location-page .pagination ~ .seo-content-spacer {
margin-top: 0 !important;
height: 0 !important;
display: block !important;
}
/* Override the mobile rule at line 7410 - increase spacing between pagination and SEO text */
.location-page #listing-description {
margin-top: 0 !important; /* Top margin handled by pagination margin-bottom */
margin-bottom: 15px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 5px !important; /* Add 5px padding to top of section */
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Add 5px margin to top of SEO text title (H3) */
.location-page #listing-description h3,
.location-page #listing-description h3[itemprop="headline"],
.location-page section#listing-description h3 {
margin-top: 5px !important;
padding-top: 0 !important;
}
/* Increase space between read more button and sidebar - Mobile (max-width: 767px) */
.location-page .desc-toggle {
margin-bottom: 30px !important; /* Keep bottom margin */
}
.location-page .row {
display: flex;
flex-direction: column;
}
.location-page article.col-md-9 {
order: 1;
}
.location-page aside.sidebar,
.location-page .sidebar.right-sidebar {
order: 2;
margin-top: 50px !important; /* Increased spacing above sidebar (from 30px to 50px) */
padding-top: 0 !important;
}
/* Also target the search form specifically for additional spacing */
.location-page aside.sidebar form#rfn {
margin-top: 0 !important; /* Reset form margin, spacing handled by parent */
}
/* Mobile CTA Styling */
.location-page .location-cta-mobile {
order: 3 !important; /* CTA appears after sidebar on mobile */
margin-top: 30px !important; /* Space above CTA (between sidebar and CTA) */
margin-bottom: 24px !important; /* 20% less than margin-top: 30px * 0.8 = 24px */
margin-left: 15px !important;
margin-right: 15px !important;
width: 100% !important;
max-width: 100% !important;
}
.location-page .location-cta-mobile .location-cta-container {
height: 100px !important;
padding: 0 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.location-page .location-cta-mobile .location-cta-button {
width: 100% !important;
max-width: 100% !important;
padding: 14px 20px !important;
font-size: 15px !important;
}
/* CRITICAL: Override ALL footer-wrapper spacing on mobile - Maximum specificity */
/* This must override any general .footer-wrapper { margin-top: 80px } rules */
html.location-page .footer-wrapper,
html.location-page body .footer-wrapper,
body.location-page .footer-wrapper,
html.location-page body .body .footer-wrapper,
body.location-page .body .footer-wrapper,
html.location-page .body .footer-wrapper,
body.location-page .body .footer-wrapper,
html.location-page div.footer-wrapper,
body.location-page div.footer-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Target footer element directly with maximum specificity */
html.location-page .footer-wrapper footer.site-footer-bottom1,
body.location-page .footer-wrapper footer.site-footer-bottom1,
html.location-page footer.site-footer-bottom1,
body.location-page footer.site-footer-bottom1,
html.location-page .footer-wrapper .site-footer-bottom1,
body.location-page .footer-wrapper .site-footer-bottom1,
html.location-page div.footer-wrapper footer,
body.location-page div.footer-wrapper footer {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove any spacing from main/content wrappers that might push footer down */
html.location-page .main,
body.location-page .main,
html.location-page #content.content,
body.location-page #content.content,
html.location-page .main.content,
body.location-page .main.content,
html.location-page main.main,
body.location-page main.main {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Remove spacing from row/container after CTA */
html.location-page .row:last-child,
body.location-page .row:last-child,
html.location-page .container:last-child,
body.location-page .container:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Ensure body/div wrappers don't add spacing */
html.location-page .body,
body.location-page .body,
html.location-page div.body,
body.location-page div.body {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Ensure main content area doesn't add extra spacing */
.location-page .main {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.location-page #content.content.full {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Remove any extra spacing from container/row after CTA */
.location-page .row:last-child,
.location-page .container:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
.location-page .location-cta-container {
height: 100px;
max-width: 100%;
margin: 0 auto;
padding: 0 25px;
background: #f8f9fa;
border-left: none !important; /* Remove blue vertical line */
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.location-page .location-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
background: #1a3a7a !important; /* Same blue as View details button */
color: #fff;
text-decoration: none;
border-radius: 12px !important; /* More rounded corners (increased from 4px) */
font-weight: 600;
font-size: 16px;
transition: background 0.3s ease;
border: none;
cursor: pointer;
width: 100%;
max-width: 100%;
}
/* This duplicate rule removed - desktop CTA styling is handled above with .location-cta-desktop class */
.location-page .location-cta-button:hover,
.location-page .location-cta-button:focus {
background: #0d5aa7 !important; /* Same hover blue as View details button */
color: #fff;
text-decoration: none;
}
.location-page .location-cta-button i {
font-size: 20px;
}
/* Homepage CTA - Mobile Only (between sidebar and footer) */
.homepage-cta-wrapper {
display: none !important; /* Hidden by default */
}
.homepage-cta-wrapper.mobile-only {
display: none !important; /* Hidden on desktop */
}
.homepage-cta-container {
max-width: 100%;
margin: 0 auto;
padding: 0 25px;
background: #f8f9fa;
border-left: none !important; /* Remove blue vertical line */
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
min-height: 80px;
}
.homepage-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
background: #1a3a7a !important; /* Same blue as View details button */
color: #fff;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
font-size: 16px;
transition: background 0.3s ease;
border: none;
cursor: pointer;
width: 100%;
max-width: 100%;
}
.homepage-cta-button:hover,
.homepage-cta-button:focus {
background: #0d5aa7 !important; /* Same hover blue as View details button */
color: #fff;
text-decoration: none;
}
.homepage-cta-button i {
font-size: 20px;
}
/* Homepage CTA in footer removed on mobile - kept above footer only */
/* CTA now only appears above footer, not inside footer on mobile */
@media (max-width: 767px) {
.homepage-cta-wrapper.mobile-only,
.footer-wrapper-homepage .homepage-cta-wrapper.mobile-only,
body.home .homepage-cta-wrapper.mobile-only,
html.home .homepage-cta-wrapper.mobile-only,
footer .homepage-cta-wrapper.mobile-only,
.site-footer-bottom1 .homepage-cta-wrapper.mobile-only {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* Apple-style spacing between pagination and SEO content - Desktop only */
.location-page .seo-content-spacer {
margin-top: 0 !important;
margin-bottom: 0 !important;
height: 0 !important;
clear: both !important;
display: block !important;
width: 100% !important;
visibility: visible !important;
}
/* This rule removed - conflicting with mobile spacing needs */
/* Mobile: No spacing */
@media (max-width: 767px) {
.location-page .seo-content-spacer {
margin-top: 0 !important;
display: block !important;
}
.location-page article .seo-content-spacer {
margin-top: 0 !important;
}
.location-page .pagination + .seo-content-spacer,
.location-page .pagination ~ .seo-content-spacer {
margin-top: 0 !important;
}
}
/* Desktop: 80px spacing */
@media (min-width: 768px) {
.location-page .seo-content-spacer {
margin-top: 80px !important;
}
.location-page article .seo-content-spacer {
margin-top: 80px !important;
}
.location-page .pagination + .seo-content-spacer,
.location-page .pagination ~ .seo-content-spacer {
margin-top: 80px !important;
}
}
.location-page .seo-content-spacer + section#listing-description,
.location-page .seo-content-spacer ~ section#listing-description {
margin-top: 0 !important;
}
/* ============================================================
OLD PRICE-LINE STYLES - COMMENTED OUT (No longer used)
============================================================ */
/*
.property-listing ul li.listing-card .listing-content .price-line,
.property-listing .listing-card .listing-content .price-line,
.property-listing ul .listing-card .price-line,
.listing-card .listing-content .price-line {
font-size: 20px !important;
font-weight: 700 !important;
color: #333 !important;
background: none !important;
padding: 0 !important;
margin-bottom: 12px !important;
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
position: relative !important;
float: none !important;
left: auto !important;
top: auto !important;
}
.property-listing ul li.listing-card .listing-content .price-line .price,
.property-listing .listing-card .listing-content .price-line .price,
.property-listing .listing-content .price-line .price,
.listing-card .listing-content .price-line .price,
.listing-content .price-line .price,
.price-line .price,
.property-listing .price-line .price {
color: #111 !important;
font-size: 20px !important;
font-weight: 700 !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
position: static !important;
float: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
display: inline-block !important;
}
.property-listing ul li.listing-card .listing-content .price-line .currency,
.property-listing .listing-card .listing-content .price-line .currency,
.listing-card .listing-content .price-line .currency,
.price-line .currency {
color: #666 !important;
font-size: 16px !important;
font-weight: 600 !important;
background: none !important;
padding: 0 !important;
}
.property-listing ul li.listing-card .listing-content .price-line .price-prefix,
.property-listing .listing-card .listing-content .price-line .price-prefix,
.listing-card .listing-content .price-line .price-prefix,
.price-line .price-prefix {
color: #666 !important;
font-size: 16px !important;
font-weight: 600 !important;
background: none !important;
padding: 0 !important;
}
*/
/* ============================================================
OVERRIDE BLUE TOP BAR - MAKE TRANSPARENT
Override inline style from header.php that sets background-color:#195385
============================================================ */
header.site-header .top-header,
.site-header > .top-header,
body header.site-header .top-header,
body .site-header .top-header {
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
height: auto !important;
min-height: 0 !important;
}
/* Override inline margin-top:5px from header tag */
header.site-header[style*="margin-top"],
body header.site-header[style*="margin-top"] {
margin-top: 0 !important;
}
/* Ensure site-header and top-header are transparent on mobile and desktop */
@media (max-width: 767px) {
.site-header,
.top-header,
#top-header,
header.site-header,
header.site-header .top-header {
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
header.site-header[style*="margin-top"] {
margin-top: 0 !important;
}
}
/* ============================================================
FLAG SPACING - 50% BIGGER FLAGS WITH 5PX TOP SPACING
============================================================ */
/* Make flags with 5px top spacing */
.horiz-nav.flagpoints img,
.horiz-nav.flagpoints li img,
.horiz-nav.flagpoints a img,
.horiz-nav.flagpoints .flags,
.horiz-nav.flagpoints img.flags,
.horiz-nav.flagpoints .img-responsive.flags,
.horiz-nav.flagpoints .img.flags {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin: 0 !important;
height: 34px !important; /* 25% smaller than 45px: 45px * 0.75 = 33.75px β 34px */
width: auto !important;
display: inline-block !important;
vertical-align: middle !important;
}
/* Add 15px white space between browser window and flags */
.horiz-nav.flagpoints {
margin-top: 15px !important; /* 15px white space from top (5px + 5px + 5px more) */
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1 !important;
display: inline-block !important;
vertical-align: middle !important;
}
.horiz-nav.flagpoints > li {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1 !important;
vertical-align: middle !important;
}
.horiz-nav.flagpoints > li > a {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
}
/* Override any other selectors that might add spacing */
.img.flags,
img.flags,
.img-responsive.flags,
a > img.flags,
.top-header img.flags {
margin: 0 !important;
padding: 0 !important;
height: 34px !important; /* 25% smaller */
}
/* Ensure top-header container has proper spacing */
.top-header {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
line-height: 1.2 !important;
}
/* Mobile: Same flags with 5px spacing */
@media (max-width: 767px) {
.horiz-nav.flagpoints img,
.horiz-nav.flagpoints li img,
.horiz-nav.flagpoints .flags {
margin: 0 !important;
padding: 0 !important;
height: 34px !important; /* 25% smaller on mobile too */
}
.horiz-nav.flagpoints {
margin-top: 15px !important; /* 15px white space on mobile too (5px + 5px + 5px more) */
margin-bottom: 0 !important;
padding: 0 !important;
}
.top-header {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* ============================================================
MOBILE MENU BURGER ICON - 35% + 30% BIGGER (MOBILE ONLY)
============================================================ */
/* Make mobile burger menu icon bigger: 18px -> 24px (35%) -> 31px (30% more) */
/* Ensure menu toggle stays hidden on desktop (visible-sm visible-xs classes handle this) */
@media (max-width: 991px) {
/* Mobile and tablet only */
.site-header .menu-toggle,
.site-header .visible-sm.menu-toggle,
.site-header .visible-xs.menu-toggle,
.visible-sm.menu-toggle,
.visible-xs.menu-toggle {
font-size: 31px !important; /* 30% more: 24px * 1.30 = 31.2px β 31px */
line-height: 1 !important;
}
.site-header .menu-toggle i,
.site-header .menu-toggle .fa-bars,
.visible-sm.menu-toggle i,
.visible-xs.menu-toggle i,
.visible-sm.menu-toggle .fa-bars,
.visible-xs.menu-toggle .fa-bars {
font-size: 31px !important; /* 30% more: 24px * 1.30 = 31.2px β 31px */
line-height: 1 !important;
}
}
/* Ensure menu toggle is hidden on desktop (larger screens) */
@media (min-width: 992px) {
.visible-sm.menu-toggle,
.visible-xs.menu-toggle,
.site-header .visible-sm.menu-toggle,
.site-header .visible-xs.menu-toggle {
display: none !important; /* Hide on desktop */
}
}
/* FIX FLEXSLIDER BREAKING BY THEME */
.property-slider-modern,
.property-images-modern,
.property-thumbs-modern {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
}
.property-images-modern .slides li,
.property-thumbs-modern .slides li {
display: block !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}
.property-images-modern .slides img {
width: 100% !important;
height: auto !important;
display: block !important;
}
.property-thumbs-modern .slides img {
width: 100px !important;
height: 80px !important;
object-fit: cover !important;
}
.flexslider .flex-direction-nav a {
opacity: 1 !important;
}
.flex-viewport {
height: auto !important;
overflow: hidden !important;
}
/* FORCE FLEXSLIDER TO WORK β OVERRIDE THE THEME */
.property-images-modern .slides,
.property-thumbs-modern .slides {
display: block !important;
width: 100% !important;
}
.property-images-modern .slides > li,
.property-thumbs-modern .slides > li {
float: left !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.property-thumbs-modern .slides > li {
width: auto !important;
}
/* viewport must scroll horizontally */
.flex-viewport {
overflow: hidden !important;
position: relative !important;
}
/* remove theme overrides */
.slides:before,
.slides:after {
display: none !important;
}
.property-images-modern,
.property-thumbs-modern {
width: 100% !important;
overflow: hidden !important;
position: relative !important;
}
.property-images-modern .slides li,
.property-thumbs-modern .slides li {
float: left !important;
display: block !important;
margin: 0 !important;
}
.property-images-modern img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
}
.property-thumbs-modern img {
width: 110px !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 4px;
}
.flexslider .slides:before,
.flexslider .slides:after {
content: none !important;
}
.flex-viewport {
height: auto !important;
overflow: hidden !important;
}
.flex-direction-nav a {
opacity: 1 !important;
}
/* Fix floating buttons (WhatsApp + Tawk.to) - Desktop and Mobile */
#whatsapp,
#tawkto,
.yu-whatsapp,
div[id*="tawk"],
iframe[id*="tawk"],
#tawkchat-container,
#tawkchat-container iframe {
position: fixed !important;
bottom: 20px !important;
z-index: 99999 !important;
}
/* Desktop: Remove blue background from WhatsApp container completely */
@media (min-width: 993px) {
.yu-whatsapp {
left: 20px !important; /* Match Tawk.to right spacing */
bottom: 20px !important; /* Match Tawk.to bottom spacing */
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
outline: none !important;
}
.yu-whatsapp a {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
display: inline-block !important;
box-shadow: none !important;
outline: none !important;
}
.yu-whatsapp img {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
box-shadow: none !important;
outline: none !important;
}
}
/* Mobile: Ensure WhatsApp and Tawk.to stay sticky - CRITICAL FIX */
@media (max-width: 767px) {
/* CRITICAL: Remove containing blocks from html/body on mobile */
html {
position: static !important; /* Override relative from line 8 */
overflow-x: hidden !important;
transform: none !important;
perspective: none !important;
filter: none !important;
will-change: auto !important;
}
body {
position: static !important; /* Override relative from line 16 */
overflow-x: hidden !important;
transform: none !important;
perspective: none !important;
filter: none !important;
will-change: auto !important;
}
/* Remove containing block from .body wrapper and all potential wrappers */
.body,
body.boxed .body,
.wrapper,
.site-wrapper,
.page-wrapper,
.container {
position: static !important;
transform: none !important;
perspective: none !important;
filter: none !important;
will-change: auto !important;
isolation: auto !important;
}
/* WhatsApp - bottom right icon (not full-width bar) */
.yu-whatsapp {
position: fixed !important;
right: 20px !important; /* Changed from left: 0 */
left: auto !important;
bottom: 20px !important;
top: auto !important;
z-index: 999999 !important;
width: auto !important; /* Changed from 100% */
transform: translateZ(0) !important; /* Create new stacking context */
background: transparent !important; /* Remove blue background */
padding: 0 !important;
border: none !important;
isolation: isolate !important; /* Isolate from parent transforms */
}
.yu-whatsapp a {
position: relative !important;
display: inline-block;
padding: 0;
background: transparent;
}
/* Tawk.to - right side positioning */
#tawkto,
div[id*="tawk"],
iframe[id*="tawk"],
#tawkchat-container,
#tawkchat-container iframe,
#tawkchat-container > div,
#tawkchat-container > div > iframe {
position: fixed !important;
right: 20px !important;
left: auto !important;
bottom: 20px !important;
z-index: 999999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: translateZ(0) !important; /* Create new stacking context */
isolation: isolate !important; /* Isolate from parent transforms */
}
/* Force fixed positioning even when nested in .body */
.body .yu-whatsapp,
.body #tawkto,
.body div[id*="tawk"],
.body iframe[id*="tawk"],
.body #tawkchat-container,
.body #tawkchat-container iframe {
position: fixed !important;
transform: translateZ(0) !important;
isolation: isolate !important;
}
/* Ensure no parent container breaks fixed positioning */
body > #whatsapp,
body > #tawkto,
body > .yu-whatsapp,
body > div[id*="tawk"] {
position: fixed !important;
transform: translateZ(0) !important;
isolation: isolate !important;
}
}
/* ============================================================
FLEXSLIDER GALLERY VISIBILITY FIXES
============================================================ */
/* Ensure parent containers don't collapse the gallery */
.property-detail-wrapper,
.property-detail-layout,
.left-column,
.single-property {
min-height: auto !important;
height: auto !important;
overflow: visible !important;
}
/* Flexslider gallery sizing - prevent collapse and 2000px viewport */
#property-images.flexslider {
min-height: 360px !important;
max-height: 720px !important;
height: auto !important;
overflow: hidden !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
}
#property-images .flex-viewport {
min-height: 360px !important;
max-height: 720px !important;
height: auto !important;
overflow: hidden !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
width: 100% !important;
}
/* FORCE VIEWPORT TO EXIST - if Flexslider doesn't create it, make sure it's visible */
#property-images .slides {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
zoom: 1 !important;
}
#property-images .slides li {
float: left !important;
width: 100% !important;
min-height: 360px !important;
}
#property-images .slides img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
}
/* --------------------------------------------------------------
SIMPLE PROPERTY GALLERY (desktop + mobile)
-------------------------------------------------------------- */
.property-gallery-modern {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 32px;
position: relative;
overflow: visible;
width: 100%;
max-width: 100%;
}
.property-gallery-modern .gallery-main {
width: 100%;
background: #f8fafc;
border-radius: 18px;
overflow: hidden;
position: relative;
min-height: 687px;
height: 750px;
box-shadow: 0 20px 60px rgba(15, 40, 65, 0.12);
display: block;
}
/* Allow badge to escape overflow when fixed */
.property-gallery-modern .gallery-main .gallery-price-badge {
will-change: position, top, right;
}
.property-gallery-modern .gallery-main img {
width: 100%;
height: 100%;
min-height: 687px;
height: 750px;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
will-change: transform;
/* Reduce watermark visibility on existing images */
filter: contrast(1.05) brightness(1.02);
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
z-index: 1;
border-radius: 18px;
}
/* Additional overlay to reduce watermark visibility */
.property-gallery-modern .gallery-main::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.01) 50%,
rgba(255, 255, 255, 0.03) 100%
);
pointer-events: none;
z-index: 5;
mix-blend-mode: overlay;
}
/* Ensure temporary images don't stack */
.property-gallery-modern .gallery-temp-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Green Price Badge - Sticky (Bright Green like screenshot) */
/* Green Price Badge - Sticky (Bright Green like screenshot) */
/* Green Price Badge - Sticky (Bright Green #66CC66 like screenshot) */
/* Gallery container - allow overflow for price badge */
.property-gallery-modern {
position: relative;
overflow: visible;
display: flex;
flex-direction: column;
gap: 18px;
}
.property-gallery-modern .gallery-price-badge {
position: absolute;
top: 20px;
right: 20px;
background: #33cc66; /* Same green as city hubs listings */
color: #ffffff;
padding: 16px 32px;
border-radius: 39px;
font-size: 23px;
font-weight: 700;
z-index: 150;
box-shadow: 0 2px 8px rgba(102, 204, 102, 0.3);
white-space: nowrap;
display: inline-block;
transition: top 0.1s ease-out, position 0.1s ease-out;
will-change: position, top, right;
}
/* Desktop: Price badge should be at same height as menu bar */
@media screen and (min-width: 768px) {
.property-gallery-modern .gallery-price-badge {
top: 60px !important; /* Match menu bar height (approximately 50-60px) */
}
}
/* Movable badge - positioned relative to gallery container */
.property-gallery-modern .gallery-price-badge-movable {
position: absolute !important;
top: 20px !important;
right: 20px !important;
z-index: 150 !important;
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important;
padding: 16px 32px !important;
border-radius: 39px !important;
font-size: 23px !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(102, 204, 102, 0.3) !important;
white-space: nowrap !important;
display: inline-block !important;
margin: 0 !important;
}
/* Desktop: Movable badge should be at same height as menu bar */
@media screen and (min-width: 768px) {
.property-gallery-modern .gallery-price-badge-movable {
top: 60px !important; /* Match menu bar height (approximately 50-60px) */
}
}
/* Navigation arrows */
.property-gallery-modern .gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
color: #333;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
opacity: 0.8;
pointer-events: auto !important;
user-select: none;
-webkit-user-select: none;
}
.property-gallery-modern .gallery-nav:hover {
opacity: 1;
background: rgba(255, 255, 255, 1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-50%) scale(1.1);
}
.property-gallery-modern .gallery-nav-prev {
left: 20px;
}
.property-gallery-modern .gallery-nav-next {
right: 20px;
}
.property-gallery-modern .gallery-nav svg {
width: 24px;
height: 24px;
}
.property-gallery-modern .gallery-thumbs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
overflow-x: visible;
overflow-y: visible;
width: 100%;
max-width: 100%;
justify-content: center;
align-items: center;
/* Thumbnails wrap to new lines when they reach gallery width - centered */
}
.property-gallery-modern .gallery-thumb {
border: none;
padding: 0;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: transparent;
transition: transform .2s ease, box-shadow .2s ease;
pointer-events: auto !important;
user-select: none;
-webkit-user-select: none;
position: relative;
z-index: 10;
flex-shrink: 0;
width: 100px;
height: 75px;
}
.property-gallery-modern .gallery-thumb img {
width: 100px;
height: 75px;
object-fit: cover;
display: block;
border-radius: 8px;
transition: opacity 0.2s ease;
}
.property-gallery-modern .gallery-thumb:hover img {
opacity: 0.85;
}
.property-gallery-modern .gallery-thumb.is-active {
box-shadow: 0 4px 12px rgba(10, 134, 102, 0.4);
border: 2px solid #0a8666;
transform: translateY(-2px);
}
.property-gallery-modern .gallery-thumb.is-active img {
opacity: 1;
}
/* Desktop: Thumbnails wrap to multiple lines - centered */
@media (min-width: 768px) {
.property-gallery-modern .gallery-thumbs {
overflow-x: visible !important;
overflow-y: visible !important;
flex-wrap: wrap !important;
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.property-gallery-modern {
overflow-x: visible !important;
width: 100% !important;
max-width: 100% !important;
}
}
.property-gallery-modern .gallery-placeholder {
padding: 60px 24px;
text-align: center;
border-radius: 18px;
background: #f3f7fb;
color: #6b7a90;
font-weight: 600;
}
@media (max-width: 767px) {
.property-gallery-modern .gallery-main {
min-height: 400px;
height: 475px;
border-radius: 14px;
position: relative;
overflow: hidden;
}
.property-gallery-modern .gallery-main img {
min-height: 400px;
height: 475px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: transform;
/* Reduce watermark visibility on mobile too */
filter: contrast(1.05) brightness(1.02);
z-index: 1;
}
.property-gallery-modern .gallery-temp-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Smaller navigation buttons on mobile */
.property-gallery-modern .gallery-nav {
width: 40px;
height: 40px;
}
.property-gallery-modern .gallery-nav svg {
width: 20px;
height: 20px;
}
.property-gallery-modern .gallery-nav-prev {
left: 10px;
}
.property-gallery-modern .gallery-nav-next {
right: 10px;
}
.property-gallery-modern .gallery-price-badge {
position: absolute !important;
top: 15px !important;
right: 15px !important;
font-size: 21px !important;
padding: 13px 26px !important;
border-radius: 34px !important;
background: #33cc66 !important; /* Same green as city hubs listings */
margin: 0 !important;
float: none !important;
transition: top 0.1s ease-out !important;
}
.property-gallery-modern .gallery-main {
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
.property-gallery-modern .gallery-thumbs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: visible;
gap: 8px;
padding-bottom: 0;
margin-top: 12px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 100%;
justify-content: center;
align-items: center;
/* Mobile: Thumbnails wrap to multiple lines - centered */
}
.property-gallery-modern .gallery-thumb {
flex-shrink: 0;
width: 80px;
height: 65px;
}
.property-gallery-modern .gallery-thumb img {
width: 80px;
height: 65px;
border-radius: 6px;
}
.property-gallery-modern .gallery-thumb.is-active {
border: 2px solid #0a8666;
}
.property-gallery-modern .gallery-thumb.is-active {
border: 2px solid #0a8666;
}
}
/* Remove any height: 0 or collapsed states */
#property-images.flexslider[style*="height: 0"],
#property-images.flexslider[style*="height:0"],
#property-images .slides[style*="height: 0"],
#property-images .slides[style*="height:0"] {
height: auto !important;
min-height: auto !important;
}
/* Thumbnails styling */
#property-thumbs.flexslider,
#property-thumbs.property-thumbs-modern {
min-height: 100px !important;
height: auto !important;
overflow: hidden !important;
position: relative !important;
}
#property-thumbs .slides li {
float: left !important;
display: block !important;
margin: 0 8px 0 0 !important;
}
#property-thumbs .slides img {
width: 120px !important;
height: 80px !important;
object-fit: cover !important;
display: block !important;
}
/* Disable Microsoft Edge SmartPreview (blue eye line) */
img {
-webkit-user-drag: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
pointer-events: auto !important;
}
/* Disable Edge image toolbar */
img::-ms-image-toolbar {
display: none !important;
}
/* ============================================
GUIDE PAGE STYLING - Modern UI System
============================================ */
/* Content Width Container - Increased by ~8% */
html.guide-page .guide-content-wrapper,
html.guide-page .guide-content {
margin: 0 auto;
padding: 0 15px;
overflow: visible !important; /* Allow sticky sidebar */
transform: none !important; /* Remove transform that breaks sticky */
}
/* Override padding for main content wrapper - match investment exactly */
html.guide-page .single-property .guide-content-wrapper,
html.guide-page .single-property .guide-content,
html.guide-page .left-column .guide-content-wrapper,
html.guide-page .left-column .guide-content {
padding: 24px 28px !important;
}
/* Row spacing for content and sidebar - REDUCED GAP */
html.guide-page .guide-row {
display: flex !important;
align-items: flex-start !important;
gap: 20px !important; /* Reduced from 30px to minimize white gap */
width: 100% !important;
overflow: visible !important;
}
/* Container width */
html.guide-page .container {
max-width: 1500px !important;
width: 100% !important;
overflow: visible !important;
}
html.guide-page .page {
overflow: visible !important;
}
/* Main content and sidebar widths */
html.guide-page .col-lg-9.col-md-8.col-sm-12 {
flex: 0 0 75% !important;
max-width: 75% !important;
width: 75% !important;
overflow: visible !important;
}
html.guide-page .col-lg-3.col-md-4.col-sm-12 {
flex: 0 0 25% !important;
max-width: 25% !important;
width: 25% !important;
overflow: visible !important;
position: relative !important;
float: none !important; /* CRITICAL: Remove float for sticky */
clear: none !important;
}
@media (min-width: 992px) {
html.guide-page .guide-content-wrapper,
html.guide-page .guide-content {
width: 100% !important;
}
}
/* Typography - Inter/SF Pro, improved line-height */
html.guide-page,
body.guide-page {
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
html.guide-page .guide-content-wrapper p,
html.guide-page .guide-content p,
html.guide-page .guide-section-content p,
body.guide-page p {
line-height: 1.62 !important; /* Updated to 1.62 */
font-size: 17px !important;
margin-bottom: 20px !important; /* Increased from 18px for better paragraph separation */
margin-top: 0 !important;
color: #333 !important;
text-shadow: none !important;
}
/* Links in guide content - ensure visibility and proper styling */
html.guide-page .guide-content-wrapper a,
html.guide-page .guide-content a,
html.guide-page .guide-content-sections a,
html.guide-page .guide-section-content a {
color: #195385 !important;
text-decoration: underline !important;
font-weight: 500 !important;
transition: color 0.2s ease !important;
}
html.guide-page .guide-content-wrapper a:hover,
html.guide-page .guide-content a:hover,
html.guide-page .guide-content-sections a:hover,
html.guide-page .guide-section-content a:hover {
color: #0d3d5c !important;
text-decoration: underline !important;
}
/* Preserve paragraph spacing in section cards */
html.guide-page .guide-section-content p:last-child {
margin-bottom: 0 !important;
}
html.guide-page .guide-content-wrapper,
html.guide-page .guide-content-wrapper li,
html.guide-page .guide-content-wrapper div {
line-height: 1.68 !important; /* Exact specification */
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
color: #333 !important;
}
body.guide-page h2,
body.guide-page h3 {
font-weight: 600 !important;
}
/* Hero Image Styling */
html.guide-page .guide-hero-image,
html.guide-page .hero-container {
margin: 0 0 25px 0 !important;
width: 100% !important;
overflow: hidden !important;
border-radius: 10px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
position: relative;
}
html.guide-page .guide-hero-image img,
html.guide-page .guide-hero-image img.hero-image,
html.guide-page .guide-hero-image .img-responsive,
html.guide-page .hero-image,
html.guide-page .property-detail-wrapper > .guide-hero-image img {
width: 100% !important;
height: 300px !important; /* Fixed height - matches landscape dimensions, crops portrait */
object-fit: cover !important; /* Auto-crop portrait to match landscape */
object-position: center !important;
border-radius: 12px !important; /* Consistent rounded corners */
display: block !important;
}
/* Main content wrapper frame - 2 thin lines frame + shadow effect (match investment exactly) */
html.guide-page .single-property,
html.guide-page .left-column .single-property,
html.guide-page .guide-content-wrapper,
html.guide-page .guide-content-wrapper.guide-content,
html.guide-page .guide-content {
background: #ffffff !important;
border-radius: 12px !important;
padding: 24px 28px !important;
margin-bottom: 28px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0,0,0,0.08) !important;
border: 1px solid #e5e7eb !important;
outline: none !important;
transition: box-shadow 0.3s ease !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Remove any borders from parent containers that might create extra lines */
html.guide-page .left-column,
html.guide-page .property-detail-layout .left-column {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
html.guide-page .single-property:hover,
html.guide-page .guide-content-wrapper:hover,
html.guide-page .guide-content-wrapper.guide-content:hover,
html.guide-page .guide-content:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0,0,0,0.12) !important;
}
/* Section Cards - NO borders (they're inside the main wrapper which already has 2 lines) */
html.guide-page .guide-section-card,
html.guide-page .guide-card {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
transition: none !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Ensure cards don't break content structure */
html.guide-page .guide-section-card *,
html.guide-page .guide-card * {
max-width: 100% !important;
}
/* Preserve paragraph and list spacing inside cards */
html.guide-page .guide-section-card p,
html.guide-page .guide-card p {
margin-bottom: 18px !important;
text-shadow: none !important;
}
html.guide-page .guide-section-card p:last-child,
html.guide-page .guide-card p:last-child {
margin-bottom: 0 !important;
}
html.guide-page .guide-section-card:hover,
html.guide-page .guide-card:hover {
box-shadow: none !important;
}
/* H1 heading styles - match investment.php exactly */
html.guide-page .guide-content-wrapper h1,
html.guide-page .guide-content-sections h1,
html.guide-page .left-column h1,
html.guide-page .single-property h1 {
font-size: 32px !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #e5e7eb !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.2 !important;
}
/* Heading styles defined above - removed duplicate */
html.guide-page .guide-section-title,
html.guide-page .guide-title,
html.guide-page .guide-section-card h2,
html.guide-page .guide-card h2,
html.guide-page .guide-section-card .guide-section-title,
html.guide-page .guide-card .guide-section-title,
html.guide-page .guide-content-sections h2,
html.guide-page .guide-content-wrapper h2,
html.guide-page .guide-content h2 {
font-size: 24px !important; /* Increased by +2px from 22px */
font-weight: 600 !important;
color: #374151 !important; /* Dark gray instead of pure black - subtle difference */
margin-top: 0 !important; /* Set to 0 to prevent margin collapse */
padding-top: 32px !important; /* Use padding instead for reliable spacing */
margin-bottom: 20px !important; /* Increased space below heading before border */
padding-bottom: 12px !important;
border-bottom: 2px solid #e5e7eb !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.4 !important;
letter-spacing: 0.3px !important;
display: block !important;
}
/* First heading in article - no top padding */
/* Only apply to the VERY FIRST h2 in the entire article */
html.guide-page .guide-content-sections > h2:first-of-type,
html.guide-page .guide-content-sections .guide-section-card:first-child h2,
html.guide-page .guide-content-sections .guide-card:first-child h2,
html.guide-page .guide-content-sections .guide-section-card:first-child .guide-section-title,
html.guide-page .guide-content-sections .guide-card:first-child .guide-section-title,
html.guide-page .guide-content-wrapper > h2:first-of-type,
html.guide-page .guide-content > h2:first-of-type {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Add extra space after heading border before first paragraph */
html.guide-page .guide-section-title + *,
html.guide-page .guide-section-card h2 + *,
html.guide-page .guide-card h2 + *,
html.guide-page .guide-content-sections h2 + p,
html.guide-page .guide-content-wrapper h2 + p,
html.guide-page .guide-content h2 + p {
margin-top: 24px !important; /* Generous space after heading before content starts */
}
/* Spacing consolidated above - all H2 headings now have consistent spacing */
html.guide-page .guide-section-card h2,
html.guide-page .guide-card h2 {
font-size: 24px !important; /* +2px increase */
}
html.guide-page .guide-section-card h3,
html.guide-page .guide-card h3 {
font-size: 22px !important;
font-weight: 600 !important;
color: #374151 !important; /* Dark gray for consistency */
}
/* Icons removed for better SEO - no decorative elements */
html.guide-page .guide-section-content {
line-height: 1.7 !important; /* Improved line-height */
font-size: 15px !important;
color: #333 !important;
}
html.guide-page .guide-section-content p {
margin-bottom: 20px !important; /* Increased from 16px for better paragraph separation */
margin-top: 0 !important;
line-height: 1.7 !important; /* Better readability */
}
html.guide-page .guide-section-content ul,
html.guide-page .guide-section-content ol {
margin-bottom: 16px !important;
padding-left: 24px !important;
list-style: disc !important;
}
html.guide-page .guide-section-content ol {
list-style: decimal !important;
}
html.guide-page .guide-section-content li {
margin-bottom: 8px !important;
line-height: 1.65 !important;
}
html.guide-page .guide-content-wrapper ul,
html.guide-page .guide-content-sections ul,
html.guide-page .guide-content ul,
html.guide-page .guide-card ul,
html.guide-page .guide-section-card ul {
list-style: disc !important;
padding-left: 24px !important;
}
html.guide-page .guide-content-wrapper ol,
html.guide-page .guide-content-sections ol,
html.guide-page .guide-content ol,
html.guide-page .guide-card ol,
html.guide-page .guide-section-card ol {
list-style: decimal !important;
padding-left: 24px !important;
}
/* Modern Breadcrumb Styling */
html.guide-page .breadcrumb {
padding: 12px 15px !important;
margin-bottom: 0 !important;
background: none !important;
border-radius: 0 !important;
font-size: 13px !important;
font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html.guide-page .breadcrumb li {
display: inline-block !important;
color: #6b7280 !important;
}
html.guide-page .breadcrumb li:not(:last-child):after {
content: " / ";
margin: 0 8px;
color: #9ca3af !important;
}
html.guide-page .breadcrumb li a {
color: #195385 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
html.guide-page .breadcrumb li a:hover {
color: #0d3d5c !important;
text-decoration: underline !important;
}
html.guide-page .breadcrumb li.active {
color: #1f2937 !important;
font-weight: 500 !important;
}
/* Guide Sidebar - OLD DUPLICATE RULE REMOVED - Using contact-sidebar class (replicated from detail.php) */
/* The sticky is now handled by html.guide-page .contact-sidebar rule (line 3629) */
/* Ensure all parent containers allow sticky - COMPREHENSIVE FIX - HIGHEST PRIORITY */
html.guide-page,
html.guide-page body {
overflow-x: hidden !important;
overflow-y: visible !important;
position: relative !important;
height: auto !important;
}
html.guide-page .main,
html.guide-page .main.articil {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
position: relative !important;
height: auto !important;
max-height: none !important;
}
html.guide-page #content,
html.guide-page #content.content,
html.guide-page #content.full {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
position: relative !important;
height: auto !important;
max-height: none !important;
}
html.guide-page .page {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
position: relative !important;
height: auto !important;
}
html.guide-page .container {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
position: relative !important;
height: auto !important;
}
/* EXCLUDE guides listing row to allow 2-column float grid */
html.guide-page .row:not(.fw.page .pageRight .pageRightBox .row),
html.guide-page .row.guide-row {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
position: relative !important;
height: auto !important;
display: flex !important; /* Ensure flex is set */
}
@media (min-width: 992px) {
/* Header container uses 1170px max-width with 15px gutters β mirror that grid everywhere */
.site-header .container,
.middle-header .container,
.main-menu-wrapper .container,
.guide-page .body > .container:first-of-type,
.guide-page .site-showcase .page-header .container,
.guide-page .site-showcase .page-header .row,
.guide-page .site-showcase .page-header .col-md-12,
.guide-page .guide-content-wrapper,
.guide-page .guide-content {
max-width: 1170px !important;
padding-left: 15px !important;
padding-right: 15px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.guide-page .body > .container:first-of-type .row,
.guide-page .site-showcase .page-header .row {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: block !important;
}
.guide-page .body > .container:first-of-type .breadcrumb {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 1170px !important;
box-sizing: border-box !important;
}
.guide-page .site-showcase .page-header .col-md-12,
.guide-page .site-showcase .page-header .col-md-12 h1 {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.guide-page .guide-hero-image {
max-width: 1170px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
html.guide-page .col-lg-3.col-md-4.col-sm-12 {
position: relative !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
float: none !important; /* Remove float */
clear: none !important; /* Remove clear */
}
/* Ensure all sidebar cards are visible */
html.guide-page .guide-sidebar .sidebar-card-modern,
html.guide-page .contact-sidebar .sidebar-card-modern,
html.guide-page .right-column .sidebar-card-modern,
html.guide-page .guide-sticky-wrapper .sidebar-card-modern,
html.guide-page .sidebar.right-sidebar.right-column.contact-sidebar .sidebar-card-modern,
html.guide-page .guide-sticky-wrapper .guide-sidebar .sidebar-card-modern {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
margin-bottom: 24px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: visible !important;
}
/* Contact Us form - ensure full visibility */
html.guide-page .guide-sidebar .asktoseller,
html.guide-page .guide-sidebar #gray2 {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* Ensure Contact Us form fields are visible */
html.guide-page .guide-sidebar .asktoseller form,
html.guide-page .guide-sidebar #gray2 form {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
html.guide-page .guide-sidebar .asktoseller textarea,
html.guide-page .guide-sidebar #gray2 textarea {
display: block !important;
visibility: visible !important;
height: auto !important;
min-height: 120px !important;
}
html.guide-page .guide-sidebar .asktoseller .sbmt,
html.guide-page .guide-sidebar #gray2 .sbmt {
display: block !important;
visibility: visible !important;
margin-top: 12px !important;
margin-bottom: 0 !important;
}
html.guide-page .guide-sidebar .asktoseller input[type="submit"],
html.guide-page .guide-sidebar #gray2 input[type="submit"] {
display: block !important;
visibility: visible !important;
width: 100% !important;
background: #1a3a7a !important; /* Navy blue - matches View Details button */
background-color: #1a3a7a !important;
color: #ffffff !important;
border: 1px solid #1a3a7a !important;
}
html.guide-page .guide-sidebar .asktoseller input[type="submit"]:hover,
html.guide-page .guide-sidebar #gray2 input[type="submit"]:hover {
background: #0d5aa7 !important; /* Navy blue hover - matches View Details button */
background-color: #0d5aa7 !important;
border-color: #0d5aa7 !important;
}
/* Bottom CTA Section */
html.guide-page .guide-cta-section {
background: #f8f9fb;
padding: 48px 0;
margin-top: 48px;
}
html.guide-page .cta-card {
background: #ffffff;
border-radius: 12px;
padding: 40px;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
max-width: 880px;
margin: 0 auto;
}
html.guide-page .cta-card h2,
html.guide-page .cta-card h3 {
font-size: 28px !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin-bottom: 16px !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html.guide-page .cta-card p {
font-size: 16px !important;
color: #6b7280 !important;
margin-bottom: 24px !important;
line-height: 1.6 !important;
}
html.guide-page .btn-cta-primary {
display: inline-block;
padding: 14px 32px;
background: #195385;
color: #ffffff !important;
text-decoration: none !important;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html.guide-page .btn-cta-primary:hover {
background: #0d3d5c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(25, 83, 133, 0.3);
color: #ffffff !important;
}
/* Responsive Layout */
@media (max-width: 991px) {
html.guide-page .guide-row {
flex-direction: column !important;
}
html.guide-page .col-lg-9.col-md-8.col-sm-12,
html.guide-page .col-lg-3.col-md-4.col-sm-12 {
max-width: 100% !important;
width: 100% !important;
flex: 0 0 100% !important;
}
html.guide-page .guide-sidebar {
padding-left: 0;
margin-top: 20px !important;
position: static !important;
top: auto !important;
width: 100% !important;
align-self: auto !important;
}
/* Ensure mobile sidebar cards are fully visible */
html.guide-page .guide-sidebar .sidebar-card-modern,
html.guide-page .contact-sidebar .sidebar-card-modern,
html.guide-page .right-column .sidebar-card-modern,
html.guide-page .guide-sticky-wrapper .guide-sidebar .sidebar-card-modern {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
margin-bottom: 16px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
}
html.guide-page .guide-content-wrapper {
max-width: 100%;
}
html.guide-page .guide-hero-image img,
html.guide-page .hero-image,
html.guide-page .property-detail-wrapper > .guide-hero-image img {
height: 300px !important; /* Fixed height - matches landscape, crops portrait */
object-fit: cover !important;
object-position: center !important;
}
html.guide-page .guide-hero-image {
margin: 24px 0 20px 0;
}
html.guide-page .cta-card {
padding: 32px 24px;
}
html.guide-page .cta-card h2 {
font-size: 24px !important;
}
html.guide-page .guide-section-card {
margin: 20px 0;
}
}
/* ============================================
GUIDE PAGE β EXPAND ALL PARENT CONTAINERS
FIX v6 β FINAL WIDTH EXPANSION PATCH
============================================ */
/* REMOVED - This was breaking the layout width */
/* Make sure no parent restricts width */
html.guide-page #content,
html.guide-page .main,
html.guide-page .page,
html.guide-page .page-content {
max-width: 100% !important;
width: 100% !important;
overflow: visible !important;
}
/* Fix Bootstrap grid overriding widths */
html.guide-page .col-lg-9.col-md-8.col-sm-12 {
flex: 0 0 74% !important; /* Slightly adjusted to reduce gap */
max-width: 74% !important;
width: 74% !important;
}
html.guide-page .col-lg-3.col-md-4.col-sm-12 {
flex: 0 0 26% !important; /* Slightly adjusted to reduce gap */
max-width: 26% !important;
width: 26% !important;
float: none !important; /* CRITICAL: Remove float for sticky */
clear: none !important;
}
/* Ensure no other layout wrapper collapses width - REDUCED GAP */
/* EXCLUDE guides listing row to allow 2-column float grid */
html.guide-page .row:not(.fw.page .pageRight .pageRightBox .row),
html.guide-page .guide-row,
html.guide-page #content .row:not(.fw.page .pageRight .pageRightBox .row) {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
display: flex !important;
align-items: flex-start !important;
gap: 20px !important; /* Reduced from 30px to minimize white gap */
}
/* CRITICAL: Remove float that breaks sticky positioning */
html.guide-page .col-md-9,
html.guide-page .col-lg-9,
html.guide-page .col-md-3,
html.guide-page .col-md-4,
html.guide-page .col-lg-3 {
float: none !important;
clear: none !important;
}
@media (max-width: 768px) {
/* Cards have full width with 16px horizontal padding */
html.guide-page .guide-section-card,
html.guide-page .guide-card {
padding: 20px 16px !important; /* 16px horizontal padding */
margin-bottom: 16px !important;
border-radius: 12px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Hero image maintains 16:9 safe ratio - reduced proportionally */
html.guide-page .guide-hero-image img,
html.guide-page .hero-image,
html.guide-page .property-detail-wrapper > .guide-hero-image img {
height: 240px !important; /* Fixed height for mobile - matches landscape, crops portrait */
border-radius: 12px !important;
object-fit: cover !important; /* Auto-crop portrait to match landscape */
object-position: center !important;
width: 100% !important;
}
/* Ensure proper spacing on mobile */
html.guide-page .guide-hero-image,
html.guide-page .hero-container {
margin: 20px 0 24px 0 !important;
}
html.guide-page .guide-section-title {
font-size: 22px !important; /* Slightly smaller on mobile */
}
/* Icons removed for better SEO */
html.guide-page .guide-sidebar {
margin-top: 24px; /* Spacing when it drops below */
}
html.guide-page .guide-cta-section {
padding: 32px 0;
margin-top: 32px;
}
html.guide-page .cta-card {
padding: 24px 20px;
}
html.guide-page .cta-card h2 {
font-size: 22px !important;
}
html.guide-page .btn-cta-primary {
padding: 12px 24px;
font-size: 15px;
}
}
/* ============================================
FINAL OVERRIDES - HERO SLIDER ARROWS & SOCIAL ICONS
Loaded last to ensure these styles take precedence
============================================ */
/* Hero Slider Arrows - Modern 2025 hover style */
.site-showcase .hero-slider.flexslider .flex-direction-nav a {
width: 56px !important;
height: 56px !important;
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 99999 !important;
opacity: 1 !important;
transform: scale(0.9) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
position: absolute !important;
top: 50% !important;
margin-top: -28px !important;
}
.site-showcase .hero-slider.flexslider:hover .flex-direction-nav a {
opacity: 1 !important;
transform: scale(1) !important;
}
.site-showcase .hero-slider.flexslider .flex-direction-nav .flex-prev {
left: 12px !important;
right: auto !important;
}
.site-showcase .hero-slider.flexslider .flex-direction-nav .flex-next {
right: 8px !important;
left: auto !important;
}
.site-showcase .hero-slider.flexslider .flex-direction-nav .flex-prev:before {
content: "β" !important;
color: #fff !important;
font-size: 24px !important;
font-weight: 700 !important;
opacity: 1 !important;
display: block !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
line-height: 1 !important;
}
.site-showcase .hero-slider.flexslider .flex-direction-nav .flex-next:before {
content: "βΆ" !important;
color: #fff !important;
font-size: 24px !important;
font-weight: 700 !important;
opacity: 1 !important;
display: block !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
line-height: 1 !important;
}
.site-showcase .hero-slider.flexslider .flex-direction-nav a:hover {
background: rgba(255, 255, 255, 0.25) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
transform: scale(1.1) !important;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15) !important;
}
/* Social Icons - Remove all blue circles, force clean grey style */
.site-header .h-social-icons a,
.middle-header .h-social-icons a,
.header-social .h-social-icons a,
.h-social-icons a {
background: none !important;
background-color: transparent !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #444 !important;
font-size: 22px !important;
text-decoration: none !important;
border: none !important;
box-shadow: none !important;
}
.site-header .h-social-icons a:hover,
.middle-header .h-social-icons a:hover,
.header-social .h-social-icons a:hover,
.h-social-icons a:hover {
background: none !important;
background-color: transparent !important;
color: #000 !important;
transform: translateY(-2px) !important;
}
.site-header .h-social-icons i,
.middle-header .h-social-icons i,
.header-social .h-social-icons i,
.h-social-icons i {
background: none !important;
background-color: transparent !important;
color: inherit !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
}
.h-social-icons {
display: flex !important;
gap: 18px !important;
align-items: center !important;
justify-content: flex-end !important;
}
/* ============================================
HEADER FLEX LAYOUT FIX - ENSURE HORIZONTAL ALIGNMENT
============================================ */
/* Logo container - prevent expansion */
.header-logo {
flex: 0 0 auto !important;
max-width: none !important;
width: auto !important;
display: flex !important;
align-items: center !important;
}
.header-logo .logo {
display: flex !important;
align-items: center !important;
width: auto !important;
max-width: none !important;
}
.header-logo .logo a {
display: flex !important;
align-items: center !important;
width: auto !important;
}
/* Phone and Email - ensure they stay inline */
.header-phone,
.header-email {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
display: flex !important;
align-items: center !important;
}
/* Ensure header-flex doesn't wrap */
.middle-header .container {
display: block !important;
}
.header-flex {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 28px !important;
}
/* Override logo table-cell display for flexbox */
.header-flex .logo a,
.header-logo .logo a {
display: flex !important;
vertical-align: baseline !important;
align-items: center !important;
float: none !important;
clear: none !important;
}
/* Ensure logo container doesn't expand */
.header-logo {
flex: 0 0 auto !important;
max-width: none !important;
width: auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
float: none !important;
clear: none !important;
}
.header-logo .logo {
display: flex !important;
align-items: center !important;
width: auto !important;
max-width: none !important;
float: none !important;
clear: none !important;
}
/* Ensure phone and email stay inline */
.header-phone,
.header-email {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
float: none !important;
clear: none !important;
white-space: nowrap !important;
}
/* Edge fix - Hide source element to prevent duplicate images */
.header-logo picture source,
.header-logo source,
picture source.yu-logo {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
position: absolute !important;
left: -9999px !important;
}
/* Ensure picture element only shows one image */
.header-logo picture {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
line-height: 0 !important;
}
/* Logo size - Reduced by 8% (78.26px from 85.06px) */
/* Desktop only - logo size increase by 5% */
@media (min-width: 769px) {
.site-header .logo img,
.site-header img.yu-logo,
.header-logo img,
.header-logo picture img,
.header-logo .yu-logo {
height: 90.59px !important; /* 86.28px * 1.05 = 90.594px rounded */
width: auto !important;
max-height: 90.59px !important;
object-fit: contain !important;
}
.logo img,
.yu-logo {
width: 255px !important; /* 243px * 1.05 = 255.15px rounded */
max-width: 255px !important;
height: auto !important;
object-fit: contain !important;
}
}
@media (max-width: 768px) {
.site-header .logo img,
.site-header img.yu-logo,
.header-logo img,
.header-logo .yu-logo {
height: 80.75px !important; /* 76.90px * 1.05 = 80.745px rounded */
max-height: 80.75px !important;
}
}
/* Phone and Email font size - increased by 15% */
.header-phone,
.header-email {
font-size: 17.25px !important;
}
.header-phone i,
.header-email i {
font-size: 20.7px !important;
}
.contact-info-blocks span,
.contact-info-blocks a {
font-size: 20.7px !important;
}
/* Add space between email/phone icons and text */
.header-email i {
margin-right: 8px !important;
}
.header-phone i {
margin-right: 8px !important;
}
/* ============================================
INVESTMENT PAGE - KEY TAKEAWAYS SIDEBAR
Match guide/service styling + ensure bullets show
============================================ */
html.investment-page .key-takeaways-box {
margin-bottom: 20px !important;
background: #f8f9fa !important;
border: 1px solid #e9ecef !important;
border-radius: 4px !important;
padding: 15px !important;
}
html.investment-page .key-takeaways-box .sidebar-modern-header {
font-size: 16px !important;
font-weight: 600 !important;
margin-bottom: 12px !important;
color: #333 !important;
}
html.investment-page .key-takeaways-list {
margin: 0 !important;
padding-left: 18px !important;
font-size: 13px !important;
line-height: 1.6 !important;
color: #555 !important;
list-style: disc !important;
list-style-type: disc !important;
}
html.investment-page .key-takeaways-list li {
margin-bottom: 8px !important;
list-style: disc !important;
list-style-type: disc !important;
display: list-item !important;
padding-left: 0 !important;
}
html.investment-page .key-takeaways-list li:last-child {
margin-bottom: 0 !important;
}
/* FORCE DESKTOP MENU LAYOUT - Override mobile styles on desktop */
/* This fixes the CSS at style.css:3739-3770 that forces mobile layout on all screens */
@media (min-width: 1025px) {
.main-menu-wrapper {
display: block !important;
position: relative !important;
height: auto !important;
background: #f8f8f8 !important;
z-index: 1000 !important; /* Higher z-index for dropdowns */
overflow: visible !important; /* Allow dropdowns to show */
}
.navigation {
height: 50px !important;
text-align: center !important;
display: block !important;
}
.navigation > ul > li {
float: left !important;
width: auto !important;
position: relative !important;
line-height: normal !important;
text-align: left !important;
}
.navigation > ul > li > a {
padding: 12px 4px !important; /* Reduced horizontal padding from 12px to 4px for tighter spacing */
border-bottom: 0 !important;
border-right: 1px solid rgba(0,0,0,.1) !important;
}
.navigation ul.sf-menu {
display: flex !important;
flex-direction: row !important;
visibility: visible !important;
opacity: 1 !important;
}
.menu-toggle {
display: none !important;
visibility: hidden !important;
}
}
/* Mobile Header - Reduce spacing and hide social icons */
@media (max-width: 768px) {
.middle-header {
padding: 4px 0 !important;
}
.header-flex {
padding: 2px 0 !important;
gap: 8px !important;
}
.header-social {
display: none !important;
}
.header-logo img,
.header-logo .yu-logo {
max-height: 58px !important;
height: 58px !important;
}
/* Reduce container padding */
.middle-header .container,
.top-header .container {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
}
/* Footer Mobile Social Icons - Style */
.footer-mobile-social {
display: none !important;
}
@media (max-width: 768px) {
.footer-mobile-social {
display: block !important;
}
.footer-mobile-social a {
display: inline-block !important;
margin: 0 10px !important;
font-size: 24px !important;
color: #444 !important;
text-decoration: none !important;
}
.footer-mobile-social a:hover {
color: #000 !important;
}
}
/* ----------------------------------------------
MOBILE HEADER SPACING FIX
Improves spacing between logo, flags and menu
Only applies on mobile (max-width 767px)
---------------------------------------------- */
@media (max-width: 767px) {
/* Header container padding - Reduced for less whitespace */
.site-header,
.header,
.middle-header,
.top-header {
padding-left: 16px !important;
padding-right: 16px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
box-sizing: border-box !important;
}
/* Reduce container padding */
.middle-header .container,
.top-header .container {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Header-flex - Tighter spacing for mobile */
.header-flex {
padding-top: 6px !important;
padding-bottom: 6px !important;
min-height: auto !important;
height: auto !important;
}
/* Logo image fix - Smaller on mobile */
.header-flex img,
.header-logo img,
.header-logo .yu-logo {
max-height: 48px !important;
height: auto !important;
}
/* Header wrapper (parent of header-flex) */
.middle-header,
.site-header,
.top-header {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Burger menu alignment */
.menu-toggle,
.mobile-menu-icon {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Logo size - Already handled above in header-flex img rule */
/* Flags spacing */
.top-header img.flag-icon,
.language-switcher img,
.header .flag-icon {
margin-left: 6px !important;
margin-right: 0 !important;
height: 26px !important;
width: auto !important;
}
/* Make right side (flags + burger) aligned evenly */
.header-right,
.middle-header .col-xs-6:last-child {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
}
/* Burger menu icon size & spacing */
.menu-toggle i,
.menu-toggle .fa-bars {
font-size: 32px !important;
line-height: 1 !important;
margin-left: 6px !important;
}
/* Reduced min-height to minimize whitespace */
.middle-header .container,
.top-header .container {
min-height: 50px !important;
}
}
/* MOBILE FOOTER SPACING IMPROVEMENTS */
@media (max-width: 767px) {
/* Space ABOVE Buyer Guide heading: 24px (mobile only) */
.site-footer-bottom1 .footer-col.footer-left .footer-head {
margin-top: 24px !important;
}
/* Space BELOW Buyer Guide heading: 8px (mobile only, reduced for tighter spacing) */
.site-footer-bottom1 .footer-col.footer-left .footer-head .h4,
.site-footer-bottom1 .footer-col.footer-left .footer-head span.h4 {
margin-bottom: 8px !important;
}
/* Additional spacing control for the list below heading */
.site-footer-bottom1 .footer-col.footer-left ul {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Override gap for footer-left column on mobile only */
.site-footer-bottom1 .footer-col.footer-left {
gap: 0 !important; /* Remove default 12px gap, use explicit margins instead */
}
/* Reduce space before footer logo - Cities section */
.site-footer-bottom1 .col-md-3 .h4,
.site-footer-bottom1 .col-sm-3 .h4 {
margin-bottom: 24px !important;
}
/* Logo spacing */
.footer-logo {
margin-top: 24px !important;
margin-bottom: 20px !important;
}
/* Increase space between icons and address - Mobile social icons */
.footer-mobile-social {
margin-top: 20px !important;
margin-bottom: 24px !important;
}
/* Footer address blocks spacing */
.site-footer-bottom1 .col-md-3 p {
margin-bottom: 28px !important;
line-height: 1.55 !important;
}
/* Copyright spacing */
.site-footer-bottom1 .container-fluid {
margin-top: 28px !important;
padding-top: 20px !important;
}
.site-footer-bottom1 .container-fluid .col-12 {
margin-bottom: 20px !important;
}
}
/* === FORCE BLOCK-HEADING TO MATCH FOOTER COLORS === */
/* Override ALL block-heading containers */
.block-heading,
.page-section .block-heading,
#featured-properties .block-heading,
.posts-archive .block-heading {
background-color: #efefef !important;
}
/* Override ALL block-heading h4 elements */
.block-heading h2,
.block-heading h4,
.page-section .block-heading h2,
.block-heading h4,
#featured-properties .block-heading h2,
.block-heading h4,
.posts-archive .block-heading h4 {
background-color: #efefef !important;
color: #1a1a1a !important; /* Increased contrast: darker from #333 */
}
/* Override all child elements inside block-heading h4 */
.block-heading h4 a,
.block-heading h4 span,
.block-heading h4 .heading-icon,
.block-heading h4 .heading-icon i {
background-color: transparent !important;
color: #1a1a1a !important; /* Increased contrast: darker from #333 */
}
/* Override inline styles in HTML - force grey background and dark text */
.block-heading h4[style*="color:white"],
.block-heading h4 a[style*="color:white"],
.block-heading h4 .heading-icon i[style*="color:white"] {
color: #1a1a1a !important; /* Increased contrast: darker from #333 */
background-color: transparent !important;
}
/* === PREMIUM LUXURY HEADLINES - H2/H3 === */
/* Premium weight, tight letter-spacing, compact line-height */
h2, h3 {
font-weight: 600 !important;
letter-spacing: -0.3px !important;
line-height: 1.1 !important;
}
/* === PREMIUM CARD SHADOWS & BORDER RADIUS === */
.property-block,
.posts-archive .post,
.post,
article.post {
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
/* === THINNER SEPARATOR LINES UNDER TITLES === */
.posts-archive .post,
.post,
article.post {
border-bottom: 1px solid rgba(227, 227, 227, 0.7) !important;
}
/* Separator lines under section titles - use rgba for border opacity */
hr,
.block-heading + *,
.post-title + *,
h2 + *,
h3 + * {
border-bottom: 1px solid rgba(227, 227, 227, 0.7) !important;
}
/* Also target any existing border-bottom rules */
.posts-archive .post:not(:last-child),
.post:not(:last-child) {
border-bottom: 1px solid rgba(227, 227, 227, 0.7) !important;
}
/* === WARMER GREY BODY TEXT (NOT PURE BLACK) === */
/* Match footer #333, but body text uses #444 for better readability */
body,
p,
.content,
.main,
.seo-text,
.post-content,
.property-info,
article,
.article-content {
color: #444 !important;
}
/* === LUXURY DARK NAVY BUTTONS (REPLACE HARSH BLUE) === */
/* Dark navy #0d1b2a - luxury brand standard, not harsh blue */
.btn-primary,
.btn-primary:not(:hover):not(:focus):not(:active),
a.btn-primary,
button.btn-primary {
background-color: #0d1b2a !important;
border-color: #0d1b2a !important;
color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
background-color: #1a2f47 !important;
border-color: #1a2f47 !important;
}
/* Hero slider button */
.hero-btn,
.hero-caption .hero-btn,
.flex-caption .btn,
.flex-caption a.btn {
background: #0d1b2a !important;
border-color: #0d1b2a !important;
color: #fff !important;
}
.hero-btn:hover,
.hero-caption .hero-btn:hover,
.flex-caption .btn:hover,
.flex-caption a.btn:hover {
background: #1a2f47 !important;
border-color: #1a2f47 !important;
}
/* === PREMIUM PROPERTY TITLE STYLES === */
/* Larger, tighter, premium typography for property card titles */
.property-info h4,
.property-info h4 a,
.property-block h4,
.property-block h4 a,
.property-listing h3,
.property-listing h3 a {
font-size: 19px !important;
line-height: 1.25 !important;
letter-spacing: 0.2px !important;
font-weight: 600 !important;
}
/* === TIGHTER CARD SPACING - LUXURY COMPOSITION === */
/* Increase card size to reduce gaps between cards */
.owl-carousel .owl-item.property-block,
.owl-carousel .owl-item .property-block,
.property-block {
margin-bottom: 0 !important;
}
/* Reduce owl-item padding for tighter rows */
.owl-carousel.owl-alt-controls .owl-item {
padding: 0 6px !important;
}
/* === LUXURY REAL ESTATE UI UPGRADE (OVERRIDES) === */
/* 1. GREY BAR STYLING */
.block-heading {
background-color: #c8c8c8 !important;
color: #333 !important;
border-radius: 6px !important;
padding: 12px 18px !important;
font-weight: 600 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
height: auto !important;
}
.block-heading h4 {
color: #333 !important;
background-color: transparent !important;
line-height: 1.5 !important;
height: auto !important;
padding: 0 !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
}
.block-heading .heading-icon {
background: transparent !important;
width: auto !important;
margin-right: 12px !important;
color: #333 !important;
}
/* 2. TYPOGRAPHY */
h2 {
font-size: 30px !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
color: #222 !important;
line-height: 1.3 !important;
}
body,
p,
.content,
.main,
.page-section p {
font-size: 16.2px !important;
line-height: 1.65 !important;
color: #3b3b3b !important;
}
/* 3. PREMIUM SPACING */
.page-section {
margin-bottom: 80px !important;
}
/* Reduce gap between "Read more" section and Buying Guide separator by 10px */
.home .page-section .seo-text {
margin-bottom: 12px !important; /* Reduced from 22px to 12px (10px reduction) */
}
/* Also reduce the page-section margin-bottom that contains seo-text */
.home .page-section[style*="margin-bottom:30px"] {
margin-bottom: 20px !important; /* Reduced from 30px to 20px (10px reduction) */
}
.page-section h2 {
margin-bottom: 18px !important;
}
.page-section p {
margin-bottom: 14px !important;
}
/* 4. LIST ITEMS */
ul li,
ol li {
color: #3b3b3b !important;
padding: 4px 0 !important;
margin-bottom: 10px !important;
}
ul li::marker,
ol li::marker {
color: #444 !important;
font-size: 0.9em !important;
}
/* 5. SECTION WRAPPER */
.container,
.page-section .container {
max-width: 1180px !important;
margin: 0 auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* ============================================
NEWS & BLOG CARDS - Image on top, text below (full width)
WITH MODERN TITLE & IMAGE STYLES PRESERVED
============================================ */
/* CARD WRAPPER */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList,
.col-md-12.col-sm-12.box-desktop-size.newsList,
.col-md-12.col-sm-12.box-desktop-size.blogList,
.col-md-12.col-sm-12.box-desktop-size.guideList {
background: #fff !important;
border-radius: 12px !important;
padding: 22px 24px 28px 24px !important;
margin-bottom: 20px !important;
box-shadow: 0px 6px 18px rgba(0,0,0,0.10) !important;
border: 1px solid #eee !important;
transition: all .25s ease !important;
display: block !important;
position: relative !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
/* CARD HOVER EFFECT */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList:hover,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList:hover,
.col-md-12.col-sm-12.box-desktop-size.newsList:hover,
.col-md-12.col-sm-12.box-desktop-size.blogList:hover,
.col-md-12.col-sm-12.box-desktop-size.guideList:hover {
transform: translateY(-4px) !important;
box-shadow: 0px 12px 32px rgba(0,0,0,0.18) !important;
}
/* MODERN TITLE STYLE - Apple-style typography (PRESERVED) */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h2,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h3.news-title,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h2,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h3.blog-title,
.col-md-12.col-sm-12.box-desktop-size.newsList h2,
.col-md-12.col-sm-12.box-desktop-size.newsList h3.news-title,
.col-md-12.col-sm-12.box-desktop-size.blogList h2,
.col-md-12.col-sm-12.box-desktop-size.blogList h3.blog-title,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h2 a,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h3.news-title a,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h2 a,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h3.blog-title a,
.col-md-12.col-sm-12.box-desktop-size.newsList h2 a,
.col-md-12.col-sm-12.box-desktop-size.newsList h3.news-title a,
.col-md-12.col-sm-12.box-desktop-size.blogList h2 a,
.col-md-12.col-sm-12.box-desktop-size.blogList h3.blog-title a {
font-size: 24px !important;
font-weight: 600 !important;
color: #1d1d1f !important;
margin: 0 0 16px 0 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
display: block !important;
width: 100% !important;
clear: both !important;
}
/* DATE STYLE (PRESERVED) */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h2 small,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h3.news-title small,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h2 small,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h3.blog-title small,
.col-md-12.col-sm-12.box-desktop-size.newsList h2 small,
.col-md-12.col-sm-12.box-desktop-size.newsList h3.news-title small,
.col-md-12.col-sm-12.box-desktop-size.blogList h2 small,
.col-md-12.col-sm-12.box-desktop-size.blogList h3.blog-title small {
color: #999 !important;
font-size: 13px !important;
margin-left: 10px !important;
font-weight: 400 !important;
}
/* IMAGE WRAPPER - Full width, under title */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList .news-image-wrapper,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList .news-image-wrapper,
.col-md-12.col-sm-12.box-desktop-size.newsList .news-image-wrapper,
.col-md-12.col-sm-12.box-desktop-size.blogList .news-image-wrapper,
.col-md-12.col-sm-12.box-desktop-size.guideList .news-image-wrapper,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList > .col-md-5,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList > .col-md-5,
.col-md-12.col-sm-12.box-desktop-size.newsList > .col-md-5,
.col-md-12.col-sm-12.box-desktop-size.blogList > .col-md-5,
.col-md-12.col-sm-12.box-desktop-size.guideList > .col-md-5,
.col-md-12.col-sm-12.box-desktop-size.guideList .content-row {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
display: block !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* MODERN IMAGE STYLE - Better proportions with hover effect (PRESERVED) */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList img,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList img,
.col-md-12.col-sm-12.box-desktop-size.newsList img,
.col-md-12.col-sm-12.box-desktop-size.blogList img,
.col-md-12.col-sm-12.box-desktop-size.guideList img {
width: 100% !important;
height: auto !important;
max-height: 300px !important;
min-height: 200px !important;
border-radius: 10px !important;
object-fit: cover !important;
transition: .25s ease !important;
display: block !important;
margin: 0 !important;
}
/* IMAGE HOVER EFFECT (PRESERVED) */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList:hover img,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList:hover img,
.col-md-12.col-sm-12.box-desktop-size.newsList:hover img,
.col-md-12.col-sm-12.box-desktop-size.blogList:hover img,
.col-md-12.col-sm-12.box-desktop-size.guideList:hover img {
transform: scale(1.04) !important;
}
/* TEXT WRAPPER - Full width, under image */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList .news-text-wrapper,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList .news-text-wrapper,
.col-md-12.col-sm-12.box-desktop-size.newsList .news-text-wrapper,
.col-md-12.col-sm-12.box-desktop-size.blogList .news-text-wrapper,
.col-md-12.col-sm-12.box-desktop-size.guideList .news-text-wrapper,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList > .col-md-7,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList > .col-md-7,
.col-md-12.col-sm-12.box-desktop-size.newsList > .col-md-7,
.col-md-12.col-sm-12.box-desktop-size.blogList > .col-md-7,
.col-md-12.col-sm-12.box-desktop-size.guideList > .col-md-7,
.col-md-12.col-sm-12.box-desktop-size.guideList .content-row > .col-md-7 {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
/* TEXT PARAGRAPH - Full width, 200 words, Modern Apple-style typography */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList p,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList p,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList .news-text-wrapper p,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList .news-text-wrapper p,
.col-md-12.col-sm-12.box-desktop-size.newsList p,
.col-md-12.col-sm-12.box-desktop-size.blogList p,
.col-md-12.col-sm-12.box-desktop-size.guideList p,
.col-md-12.col-sm-12.box-desktop-size.newsList .news-text-wrapper p,
.col-md-12.col-sm-12.box-desktop-size.blogList .news-text-wrapper p,
.col-md-12.col-sm-12.box-desktop-size.guideList .news-text-wrapper p,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList p.mobil-bosluk,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList p.mobil-bosluk,
.col-md-12.col-sm-12.box-desktop-size.newsList p.mobil-bosluk,
.col-md-12.col-sm-12.box-desktop-size.blogList p.mobil-bosluk,
.col-md-12.col-sm-12.box-desktop-size.guideList p.mobil-bosluk {
font-size: 16px !important;
line-height: 1.7 !important;
color: #4a4a4a !important;
margin: 0 !important;
padding: 0 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
/* Modern text styling - 200 words with ellipsis */
display: block !important;
overflow: visible !important;
text-overflow: clip !important;
-webkit-line-clamp: none !important;
line-clamp: none !important;
max-height: none !important;
}
/* Override inline box-shadow */
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList[style*="box-shadow"],
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList[style*="box-shadow"],
div.box-desktop-size.newsList[style*="box-shadow"],
div.box-desktop-size.blogList[style*="box-shadow"],
div.box-desktop-size.guideList[style*="box-shadow"] {
box-shadow: 0px 6px 18px rgba(0,0,0,0.10) !important;
}
/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList,
.col-md-12.col-sm-12.box-desktop-size.newsList,
.col-md-12.col-sm-12.box-desktop-size.blogList,
.col-md-12.col-sm-12.box-desktop-size.guideList {
padding: 16px !important;
}
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h2,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList h3.news-title,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h2,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList h3.blog-title,
.col-md-12.col-sm-12.box-desktop-size.newsList h2,
.col-md-12.col-sm-12.box-desktop-size.newsList h3.news-title,
.col-md-12.col-sm-12.box-desktop-size.blogList h2,
.col-md-12.col-sm-12.box-desktop-size.blogList h3.blog-title {
font-size: 20px !important;
}
.fw.page .pageRight .pageRightBox .row .box-desktop-size.newsList img,
.fw.page .pageRight .pageRightBox .row .box-desktop-size.blogList img,
.col-md-12.col-sm-12.box-desktop-size.newsList img,
.col-md-12.col-sm-12.box-desktop-size.blogList img,
.col-md-12.col-sm-12.box-desktop-size.guideList img {
max-height: 250px !important;
min-height: 150px !important;
}
}
/* =====================================================
ENSURE 2-COLUMN GRID LAYOUT FOR GUIDES
===================================================== */
/* CRITICAL: Fix body wrapper to not constrain layout */
.body {
width: 100% !important;
max-width: 100% !important;
overflow-x: visible !important;
box-sizing: border-box !important;
}
.body .container {
width: 100% !important;
max-width: 1170px !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
.body .main {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.body .main .container {
width: 100% !important;
max-width: 1170px !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
/* CRITICAL: Override ALL flex rules and force block for float-based grid */
html.guide-page .fw.page .pageRight .pageRightBox .row,
body.guide-page .fw.page .pageRight .pageRightBox .row,
.fw.page .pageRight .pageRightBox .row {
display: block !important;
width: 100% !important;
margin-left: -15px !important;
margin-right: -15px !important;
box-sizing: border-box !important;
overflow: visible !important; /* Allow floats to work */
clear: both !important;
flex-direction: unset !important;
align-items: unset !important;
gap: 0 !important;
}
/* Bootstrap clearfix for row - CRITICAL for float containment */
.fw.page .pageRight .pageRightBox .row:before,
.fw.page .pageRight .pageRightBox .row:after {
display: table !important;
content: " " !important;
}
.fw.page .pageRight .pageRightBox .row:after {
clear: both !important;
}
/* CRITICAL: Force columns to float side by side */
html.guide-page .fw.page .pageRight .pageRightBox .row .col-md-6.col-sm-6,
body.guide-page .fw.page .pageRight .pageRightBox .row .col-md-6.col-sm-6,
.fw.page .pageRight .pageRightBox .row .col-md-6.col-sm-6 {
width: 50% !important;
float: left !important;
display: block !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
position: relative !important;
min-height: 1px !important;
clear: none !important;
margin-bottom: 0 !important;
flex: unset !important;
flex-basis: unset !important;
}
@media (max-width: 767px) {
.fw.page .pageRight .pageRightBox .row .col-md-6.col-sm-6 {
width: 100% !important;
float: none !important;
margin-bottom: 20px !important;
}
}
/* =====================================================
MOBILE ONLY: Center all footer columns and text
===================================================== */
@media (max-width: 767px) {
/* Center footer grid */
.site-footer-bottom1 .footer-grid {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
/* Center all footer columns */
.site-footer-bottom1 .footer-col {
text-align: center !important;
align-items: center !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin: 0 auto !important;
}
/* Center footer headings */
.site-footer-bottom1 .footer-col .footer-head,
.site-footer-bottom1 .footer-col .footer-head h4,
.site-footer-bottom1 .footer-col .footer-head span,
.site-footer-bottom1 .footer-col .footer-head a {
text-align: center !important;
margin: 0 auto !important;
display: block !important;
}
/* Center footer lists */
.site-footer-bottom1 .footer-col ul {
text-align: center !important;
list-style: none !important;
padding-left: 0 !important;
margin: 0 auto !important;
display: inline-block !important;
}
.site-footer-bottom1 .footer-col ul li {
text-align: center !important;
display: block !important;
margin: 0 auto !important;
}
.site-footer-bottom1 .footer-col ul li a {
text-align: center !important;
display: inline-block !important;
}
/* Center footer addresses */
.site-footer-bottom1 .footer-col .footer-address {
text-align: center !important;
margin: 0 auto !important;
}
.site-footer-bottom1 .footer-col .footer-address p {
text-align: center !important;
margin: 0 auto !important;
}
.site-footer-bottom1 .footer-col .footer-address a {
text-align: center !important;
display: inline-block !important;
}
/* Center footer logo */
.site-footer-bottom1 .footer-col .footer-logo {
text-align: center !important;
margin: 0 auto !important;
}
.site-footer-bottom1 .footer-col .footer-logo a {
text-align: center !important;
display: inline-block !important;
margin: 0 auto !important;
}
/* Center footer logo image */
.site-footer-bottom1 .footer-col .footer-logo img {
margin: 0 auto !important;
display: block !important;
}
/* Center Google badge */
.site-footer-bottom1 .footer-col.footer-google .footer-head {
text-align: center !important;
margin: 0 auto !important;
}
.site-footer-bottom1 .footer-col.footer-google .footer-head a {
text-align: center !important;
display: inline-block !important;
margin: 0 auto !important;
}
.site-footer-bottom1 .footer-col.footer-google .footer-head img {
margin: 0 auto !important;
display: block !important;
}
/* Center contact info */
.site-footer-bottom1 .footer-col.footer-google .row {
text-align: center !important;
}
.site-footer-bottom1 .footer-col.footer-google .col-md-12 {
text-align: center !important;
}
.site-footer-bottom1 .footer-col.footer-google span,
.site-footer-bottom1 .footer-col.footer-google p,
.site-footer-bottom1 .footer-col.footer-google a {
text-align: center !important;
display: block !important;
margin: 0 auto !important;
}
/* Center social icons - Apple-style refined on mobile */
.site-footer-bottom1 .footer-col.footer-google .yu-icons {
text-align: center !important;
justify-content: center !important;
margin: 0 auto !important;
display: flex !important;
gap: 10px !important;
}
.site-footer-bottom1 .footer-col.footer-google .yu-icons a {
text-align: center !important;
margin: 0 auto !important;
font-size: 22px !important;
}
.site-footer-bottom1 .footer-col.footer-google .yu-icons a i {
font-size: 22px !important;
}
}
/* =====================================================
DESKTOP: Add more space above NEWS and BLOGS separators
===================================================== */
@media (min-width: 768px) {
/* Add more space above the block-heading for News and Blog sections */
.posts-archive .spacer-20 {
height: 40px !important; /* Increased from default 20px */
margin: 0 !important;
padding: 0 !important;
}
.posts-archive .block-heading {
margin-top: 20px !important;
padding-top: 0 !important;
}
}
/* =====================================================
MOBILE: Reduce property card shadow to minimum
===================================================== */
@media (max-width: 767px) {
/* Make property card shadow extremely thin on mobile */
.property-block,
#featured-properties .property-block,
#featured-properties ul li .property-block {
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; /* Very thin shadow */
border: 1px solid #e5e5e5 !important; /* Lighter border */
}
.property-block:hover {
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; /* Slightly more on hover but still thin */
}
}
/* Disable all full-width mobile bar overrides from theme */
@media (max-width: 767px) {
.yu-whatsapp {
width: auto !important;
left: auto !important;
right: 20px !important;
bottom: 20px !important;
background: none !important;
padding: 0 !important;
transform: translateZ(0) !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
}
/* === MOBILE FIX MIRROR: ENSURE OVERRIDE EVEN IF TAWK LOADS AFTER === */
@media (max-width: 767px) {
body .yu-whatsapp {
left: 20px !important;
right: auto !important;
bottom: 10px !important;
}
body iframe[id*="tawk"],
body div[id*="tawk"] {
right: 20px !important;
left: auto !important;
bottom: 20px !important;
}
}
/* Fix Sticky Column for Guide Pages */
html.guide-page .right-column,
html.guide-page .guide-sidebar {
align-self: flex-start !important;
height: auto !important;
position: relative !important;
}
/* Guide Sticky Wrapper */
html.guide-page .guide-sticky-wrapper {
position: sticky !important;
top: 120px !important;
z-index: 20 !important;
}
/* Allow sticky inside flex parent */
html.guide-page #content.content-full {
align-items: flex-start !important;
}
/* ============================================
GUIDE.PHP β FINAL STICKY FIX (ISOLATED)
============================================ */
/* 1) FIX ROOT CAUSE:
Body had overflow:hidden which kills sticky.
We restore normal scrolling only for guide pages.
*/
html.guide-page body {
overflow-x: visible !important;
overflow-y: visible !important;
}
/* 2) Container must allow sticky inside flex layouts */
html.guide-page .property-detail-layout {
overflow: visible !important;
align-items: flex-start !important;
}
/* 3) Apply sticky to the right sidebar only on guide.php */
html.guide-page .right-column.contact-sidebar,
html.guide-page .guide-sidebar,
html.guide-page .guide-right-sidebar {
position: sticky !important;
top: 120px !important;
height: auto !important;
align-self: flex-start !important;
z-index: 20 !important;
}
/* 4) Make sure no parent container blocks sticky */
html.guide-page .container,
html.guide-page #content.content-full,
html.guide-page .property-detail-wrapper {
overflow: visible !important;
transform: none !important;
}
/* ============================================
GUIDE PAGE - HERO IMAGE ABOVE FLEX LAYOUT
============================================ */
/* Hero image container - 60% width of text container (left-column is 75%, so 60% of 75% = 45% of container) */
html.guide-page .property-detail-wrapper > .guide-hero-image {
width: 45% !important; /* 60% of 75% left-column width */
max-width: 45% !important;
margin: 0 0 30px 0 !important; /* Align with left column start */
display: block !important;
position: relative !important;
}
/* Hero image - fixed height for both portrait and landscape (match landscape dimensions) */
html.guide-page .property-detail-wrapper > .guide-hero-image img {
width: 100% !important;
height: 300px !important; /* Fixed height - matches landscape, crops portrait */
max-width: 100% !important;
object-fit: cover !important; /* Auto-crop portrait to match landscape */
object-position: center !important;
border-radius: 12px !important;
display: block !important;
}
/* Remove flex from guide-content-wrapper (text only now) */
html.guide-page .guide-content-wrapper {
display: block !important;
flex-direction: unset !important;
}
/* Keep flex on property-detail-layout for sticky sidebar */
html.guide-page .property-detail-layout {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 30px !important;
}
/* ============================================
MOBILE LAYOUT - STACK TEXT AND SIDEBAR VERTICALLY
============================================ */
@media (max-width: 780px) {
/* Stack columns vertically on mobile - text first, then sidebar */
html.guide-page .property-detail-layout {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 20px !important; /* Keep gap as is */
}
/* Left column (text) - full width, comes first */
html.guide-page .property-detail-layout .left-column {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
order: 1 !important;
margin-bottom: -20px !important; /* Negative margin to cancel gap */
}
/* Right sidebar - keep visible but remove spacing issues */
html.guide-page .property-detail-layout .right-column,
html.guide-page .property-detail-layout .right-sidebar,
html.guide-page .property-detail-layout .sidebar.right-sidebar.right-column.contact-sidebar,
html.guide-page .guide-sticky-wrapper,
html.guide-page .guide-sidebar {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
order: 2 !important;
position: relative !important;
top: auto !important;
margin-top: 0 !important; /* Remove negative margin, use normal spacing */
padding-top: 0 !important;
}
/* Hide only the Request Brochure card that causes white space - KEEP Contact Us form visible */
html.guide-page .sidebar-card-modern:has(#brochure_request) {
display: none !important; /* Hide only Request Brochure card */
}
/* Add space above Your Company card */
html.guide-page .sidebar-card-modern:has(#seller),
html.guide-page #seller.sidebar-card-body {
margin-top: 30px !important; /* Add space above Your Company */
padding-top: 20px !important;
}
/* Hero image - full width on mobile */
html.guide-page .property-detail-wrapper > .guide-hero-image {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px 0 !important;
}
/* Hide ONLY the CTA card in guide-cta-section (the one with "Looking to Buy Property in Turkey?")
This does NOT affect the sidebar Contact Us form (askToSeller.php) */
html.guide-page .guide-cta-section .cta-card {
display: none !important;
}
}
/* Match homepage style: White background stripe for copyright section on guide pages */
html.guide-page .site-footer-bottom1 .container-fluid {
background: #ffffff !important;
padding: 20px 0 !important;
margin: 0 !important;
border-top: 1px solid rgba(255,255,255,.3) !important;
}
html.guide-page .site-footer-bottom1 .container-fluid .col-12 {
background: #ffffff !important;
}
/* Ensure footer grey background doesn't show below copyright - match homepage style */
html.guide-page .site-footer-bottom1 {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Add more space at bottom of grey footer section - extend grey background */
html.guide-page .site-footer-bottom1 .footer-grid,
html.guide-page .site-footer-bottom1 .footer-shell {
padding-bottom: 35px !important; /* Increased from default to give more space */
}
/* Apply same footer bottom padding globally to all pages (including homepage) */
.site-footer-bottom1 .footer-grid,
.site-footer-bottom1 .footer-shell {
padding-bottom: 35px !important;
}
/* Ensure container-fluid white background extends to bottom with no grey showing */
html.guide-page .site-footer-bottom1 .container-fluid {
margin-bottom: 0 !important;
padding-bottom: 20px !important;
}
/* ============================================
INVESTMENT PAGE - Apply guide.php layout style
============================================ */
/* Desktop layout - two columns with sidebar - MATCH GUIDE PAGES EXACTLY */
@media (min-width: 992px) {
html.investment-page .property-detail-layout {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 40px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
overflow: visible !important;
transform: none !important;
}
/* Left column - text content wrapper with max-width constraint */
html.investment-page .property-detail-layout .left-column {
max-width: 860px !important;
width: 860px !important;
flex: 0 0 860px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
transform: none !important;
}
html.investment-page .property-detail-layout .left-column .single-property {
overflow: visible !important;
transform: none !important;
}
/* Right column - sidebar container with max-width constraint */
html.investment-page .property-detail-layout .right-column {
max-width: 340px !important;
width: 340px !important;
flex: 0 0 340px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
transform: none !important;
}
/* Sticky sidebar for investment pages - apply to all sidebar containers */
html.investment-page .right-column.contact-sidebar,
html.investment-page .property-detail-layout .right-column.contact-sidebar,
html.investment-page .sidebar.right-sidebar.right-column.contact-sidebar,
html.investment-page .guide-right-sidebar,
html.investment-page .guide-sticky-wrapper {
position: sticky !important;
top: 120px !important;
z-index: 20 !important;
height: auto !important;
max-height: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
width: 100% !important;
align-self: flex-start !important;
overflow: visible !important;
transform: none !important;
}
/* Also ensure the contact-sidebar class works */
html.investment-page .contact-sidebar {
position: sticky !important;
top: 120px !important;
z-index: 20 !important;
height: max-content !important;
margin-top: 0 !important;
padding-top: 0 !important;
width: 100% !important;
}
/* Ensure first element in sidebar aligns */
html.investment-page .contact-sidebar > *:first-child,
html.investment-page .guide-sticky-wrapper > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Ensure sidebar containers are block on desktop */
html.investment-page .property-detail-layout,
html.investment-page .guide-content-wrapper,
html.investment-page .left-column,
html.investment-page .right-column,
html.investment-page .guide-right-sidebar,
html.investment-page .sidebar,
html.investment-page .right-sidebar {
display: block !important;
}
/* Left + Right columns must be flex container on desktop */
html.investment-page .property-detail-layout {
display: flex !important;
align-items: flex-start !important;
}
/* Prevent sticky from being blocked */
html.investment-page .property-detail-layout * {
overflow: visible !important;
transform: none !important;
position: static !important;
}
/* Exception: Hero image container can have overflow hidden */
html.investment-page .guide-hero-image {
overflow: hidden !important;
}
/* Hero image container for investment pages - match guide.php exactly */
html.investment-page .guide-hero-image,
html.investment-page .hero-container {
margin: 0 0 25px 0 !important;
width: 100% !important;
overflow: hidden !important;
border-radius: 10px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
position: relative !important;
}
/* Desktop: Hero image container - match guide.php exactly (45% width) */
@media (min-width: 992px) {
html.investment-page .property-detail-wrapper > .guide-hero-image {
width: 45% !important; /* 60% of 75% left-column width - same as guide.php */
max-width: 45% !important;
margin: 0 0 30px 0 !important; /* Align with left column start */
display: block !important;
position: relative !important;
}
/* Hero image - high quality, 60% width - match guide.php */
html.investment-page .property-detail-wrapper > .guide-hero-image img {
width: 100% !important;
height: auto !important; /* Auto height on desktop - same as guide.php */
max-width: 100% !important;
object-fit: cover !important;
border-radius: 12px !important;
display: block !important;
}
}
/* Hero image for investment pages - base styles (mobile uses 300px height) */
html.investment-page .guide-hero-image img,
html.investment-page .guide-hero-image img.hero-image,
html.investment-page .guide-hero-image .img-responsive,
html.investment-page .hero-image {
width: 100% !important;
object-fit: cover !important;
border-radius: 10px !important;
display: block !important;
}
/* Mobile: Fixed height for hero image */
@media (max-width: 991px) {
html.investment-page .guide-hero-image img,
html.investment-page .guide-hero-image img.hero-image,
html.investment-page .guide-hero-image .img-responsive,
html.investment-page .hero-image {
height: 300px !important;
}
}
/* Ensure parent containers don't block sticky */
html.investment-page #content.content-full,
html.investment-page .container,
html.investment-page .property-detail-wrapper,
html.investment-page .property-detail-layout {
overflow: visible !important;
transform: none !important;
}
}
/* Mobile layout for investment pages */
@media (max-width: 780px) {
html.investment-page .property-detail-layout {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
html.investment-page .left-column {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
order: 1 !important;
margin-bottom: -20px !important;
}
html.investment-page .right-column,
html.investment-page .right-sidebar,
html.investment-page .sidebar.right-sidebar.right-column.contact-sidebar,
html.investment-page .guide-sticky-wrapper,
html.investment-page .guide-sidebar {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
order: 2 !important;
position: relative !important;
top: auto !important;
margin-top: -20px !important;
padding-top: 0 !important;
}
/* Hide Request Brochure card on mobile */
html.investment-page .sidebar-card-modern:has(#brochure_request) {
display: none !important;
}
/* Add space above Your Company card */
html.investment-page .sidebar-card-modern:has(#seller) {
margin-top: 30px !important;
padding-top: 20px !important;
}
/* Hero image - full width on mobile */
html.investment-page .property-detail-wrapper > .guide-hero-image {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px 0 !important;
}
}
/* Apply same footer styling to investment pages as guide pages */
html.investment-page .site-footer-bottom1 .container-fluid {
background: #ffffff !important;
padding: 20px 0 !important;
margin: 0 !important;
border-top: 1px solid rgba(255,255,255,.3) !important;
}
html.investment-page .site-footer-bottom1 .container-fluid .col-12 {
background: #ffffff !important;
}
html.investment-page .site-footer-bottom1 {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
html.investment-page .site-footer-bottom1 .footer-grid,
html.investment-page .site-footer-bottom1 .footer-shell {
padding-bottom: 35px !important;
}
/* ============================================
INVESTMENT PAGE - MODERN SIDEBAR STYLING
Apply same modern sidebar styles as guide pages
============================================ */
/* Modern sidebar card styling for investment pages */
html.investment-page .guide-sidebar .sidebar-card-modern {
margin-bottom: 24px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* Contact Us form container - modern styling - COMPLETE OVERRIDE OF OLD STYLES */
html.investment-page .guide-sidebar .asktoseller,
html.investment-page .guide-sidebar #gray2,
html.investment-page #gray2.asktoseller {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
z-index: 1 !important;
overflow: visible !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Remove ALL old #gray2 styles from style.css - COMPLETE OVERRIDE */
html.investment-page #gray2,
html.investment-page #gray2.asktoseller {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-bottom-right-radius: 0 !important;
-moz-border-radius-bottomright: 0 !important;
border-bottom-right-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
z-index: 1 !important;
overflow: visible !important;
box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
-moz-filter: none !important;
}
html.investment-page #gray2 p.title,
html.investment-page #gray2 p.ask,
html.investment-page #gray2 .title,
html.investment-page #gray2 .title.ask {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.investment-page #gray2 p.ask {
background: transparent !important;
text-align: left !important;
padding: 0 !important;
margin: 0 !important;
}
/* Contact Us form - ensure it displays correctly */
html.investment-page .guide-sidebar .asktoseller form,
html.investment-page .guide-sidebar #gray2 form {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
/* Contact Us textarea - proper sizing */
html.investment-page .guide-sidebar .asktoseller textarea,
html.investment-page .guide-sidebar #gray2 textarea {
display: block !important;
visibility: visible !important;
height: auto !important;
min-height: 120px !important;
}
/* Contact Us submit button container */
html.investment-page .guide-sidebar .asktoseller .sbmt,
html.investment-page .guide-sidebar #gray2 .sbmt {
display: flex !important;
visibility: visible !important;
margin-top: 16px !important;
}
/* Override any old sidebar styles that might interfere */
html.investment-page .sidebar.right-sidebar,
html.investment-page .right-sidebar,
html.investment-page .contact-sidebar {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Remove old Contact Us styles that might be interfering - COMPLETE REMOVAL */
html.investment-page .asktoseller .title,
html.investment-page .asktoseller p.title,
html.investment-page .asktoseller .title.ask,
html.investment-page #gray2 .title,
html.investment-page #gray2 p.title,
html.investment-page #gray2 p.title.ask,
html.investment-page #gray2 .title.ask {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* Override old #gray2 input/textarea focus styles from style.css */
html.investment-page #gray2 input[type=text]:focus,
html.investment-page #gray2 textarea:focus,
html.investment-page .asktoseller input[type=text]:focus,
html.investment-page .asktoseller textarea:focus {
border: 1px solid #195385 !important;
box-shadow: 0 0 0 3px rgba(25, 83, 133, 0.1) !important;
outline: none !important;
}
/* Ensure modern header styling */
html.investment-page .asktoseller .sidebar-modern-header,
html.investment-page .asktoseller h3.sidebar-modern-header {
font-size: 18px !important;
font-weight: 600 !important;
color: #111 !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
/* Modern form field styling */
html.investment-page .guide-sidebar .fieldwrap {
margin-bottom: 16px !important;
}
html.investment-page .guide-sidebar .fmtext,
html.investment-page .guide-sidebar .fmtextarea {
width: 100% !important;
padding: 12px !important;
border: 1px solid #d1d5db !important;
border-radius: 6px !important;
font-size: 14px !important;
}
html.investment-page .guide-sidebar .sbmt input[type="submit"] {
background: #1a3a7a !important; /* Navy blue - matches View Details button */
color: #ffffff !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 6px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
}
html.investment-page .guide-sidebar .sbmt input[type="submit"]:hover {
background: #0d5aa7 !important; /* Navy blue hover - matches View Details button */
}
/* ============================================
INVESTMENT PAGE - MODERN TYPOGRAPHY
Apply same modern text and heading styles as guide pages
============================================ */
/* Modern font family for investment pages */
html.investment-page,
body.investment-page {
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Modern paragraph styling */
html.investment-page .guide-content-wrapper p,
html.investment-page .guide-content p,
html.investment-page .guide-section-content p,
html.investment-page .guide-content-sections p,
html.investment-page .left-column p,
html.investment-page .single-property p,
body.investment-page p {
line-height: 1.62 !important;
font-size: 17px !important;
margin-bottom: 18px !important;
color: #333 !important;
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Preserve paragraph spacing */
html.investment-page .guide-section-content p:last-child,
html.investment-page .guide-content-sections p:last-child {
margin-bottom: 0 !important;
}
/* Modern content wrapper styling */
html.investment-page .guide-content-wrapper,
html.investment-page .guide-content-wrapper li,
html.investment-page .guide-content-wrapper div,
html.investment-page .guide-content-sections,
html.investment-page .left-column {
line-height: 1.68 !important;
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
color: #333 !important;
}
/* Modern heading styles */
html.investment-page .guide-content-wrapper h2,
html.investment-page .guide-content-sections h2,
html.investment-page .left-column h2,
html.investment-page .single-property h2,
body.investment-page h2 {
font-size: 24px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 12px !important;
margin-top: 24px !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.4 !important;
}
html.investment-page .guide-content-wrapper h3,
html.investment-page .guide-content-sections h3,
html.investment-page .left-column h3,
html.investment-page .single-property h3,
body.investment-page h3 {
font-size: 22px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 10px !important;
margin-top: 20px !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.4 !important;
}
html.investment-page .guide-content-wrapper h4,
html.investment-page .guide-content-sections h4,
html.investment-page .left-column h4,
html.investment-page .single-property h4,
body.investment-page h4 {
font-size: 18px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 8px !important;
margin-top: 16px !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.4 !important;
}
/* Override old .articil h3 style for investment pages */
html.investment-page .articil h3,
html.investment-page .guide-content-wrapper .articil h3 {
color: #374151 !important;
font-weight: 600 !important;
line-height: 1.4 !important;
font-size: 22px !important;
}
/* Modern list styling */
html.investment-page .guide-content-wrapper ul,
html.investment-page .guide-content-sections ul,
html.investment-page .left-column ul {
margin-bottom: 18px !important;
padding-left: 24px !important;
line-height: 1.68 !important;
color: #333 !important;
list-style: disc !important;
list-style-type: disc !important;
}
html.investment-page .guide-content-wrapper ol,
html.investment-page .guide-content-sections ol,
html.investment-page .left-column ol {
margin-bottom: 18px !important;
padding-left: 24px !important;
line-height: 1.68 !important;
color: #333 !important;
list-style: decimal !important;
list-style-type: decimal !important;
}
html.investment-page .guide-content-wrapper li,
html.investment-page .guide-content-sections li,
html.investment-page .left-column li {
margin-bottom: 8px !important;
line-height: 1.65 !important;
color: #333 !important;
}
/* Modern link styling */
html.investment-page .guide-content-wrapper a,
html.investment-page .guide-content-sections a,
html.investment-page .left-column a {
color: #195385 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
html.investment-page .guide-content-wrapper a:hover,
html.investment-page .guide-content-sections a:hover,
html.investment-page .left-column a:hover {
color: #0d3d5c !important;
text-decoration: underline !important;
}
/* H1 heading styles - match guide.php with border separator */
html.investment-page .guide-content-wrapper h1,
html.investment-page .guide-content-sections h1,
html.investment-page .left-column h1,
html.investment-page .single-property h1 {
font-size: 32px !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #e5e7eb !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.2 !important;
}
/* ============================================
INVESTMENT PAGE - TEXT BOX FRAME WITH LINES
Add frame/border like guide section cards
============================================ */
/* Text content wrapper - 2 thin lines frame + shadow effect */
html.investment-page .single-property,
html.investment-page .left-column .single-property,
html.investment-page .guide-content-wrapper,
html.investment-page .guide-content-wrapper.guide-content,
html.investment-page .guide-content {
background: #ffffff !important;
border-radius: 12px !important;
padding: 24px 28px !important;
margin-bottom: 28px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0,0,0,0.08) !important;
border: 1px solid #e5e7eb !important;
outline: none !important;
transition: box-shadow 0.3s ease !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Remove any borders from parent containers that might create extra lines */
html.investment-page .left-column,
html.investment-page .property-detail-layout .left-column {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
html.investment-page .single-property:hover,
html.investment-page .guide-content-wrapper:hover,
html.investment-page .guide-content-wrapper.guide-content:hover,
html.investment-page .guide-content:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0,0,0,0.12) !important;
}
/* ============================================
INVESTMENT PAGE - WRAP IMAGES IN TEXT BOX
Style images like hero images
============================================ */
/* Wrap images inside text content with hero image styling */
html.investment-page .guide-content-sections img,
html.investment-page .guide-content-wrapper img,
html.investment-page .left-column img {
margin: 25px 0 !important;
width: 100% !important;
height: auto !important;
max-height: 400px !important;
object-fit: cover !important;
border-radius: 10px !important;
display: block !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
/* Wrap images in container like hero image */
html.investment-page .guide-content-sections p:has(img),
html.investment-page .guide-content-wrapper p:has(img) {
margin: 25px 0 !important;
padding: 0 !important;
}
html.investment-page .guide-content-sections img,
html.investment-page .guide-content-wrapper img {
margin: 0 !important;
}
/* ============================================
INVESTMENT PAGE - SIDEBAR BUTTON FONT SIZES
Match guide.php button styling
============================================ */
/* Sidebar buttons - match guide.php GREY button styling exactly */
html.investment-page .guide-sidebar .btn-brochure,
html.investment-page .guide-sidebar #brochure_request input[type="submit"],
html.investment-page .guide-sidebar input[type="submit"],
html.investment-page .guide-sidebar button[type="submit"],
html.investment-page .guide-sidebar .sbmt input[type="submit"],
html.investment-page .guide-sidebar .asktoseller input[type="submit"],
html.investment-page .guide-sidebar #gray2 input[type="submit"] {
background: #1a3a7a !important; /* Navy blue - matches View Details button */
background-image: none !important;
background-color: #1a3a7a !important;
color: #ffffff !important;
border: 1px solid #1a3a7a !important;
border-radius: 10px !important;
height: 46px !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 0.2px !important;
text-shadow: none !important;
width: 100% !important;
max-width: 200px !important;
padding: 0 !important;
margin: 0 auto 0 auto !important;
cursor: pointer !important;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
display: block !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
line-height: 1.5 !important;
text-align: center !important;
}
html.investment-page .guide-sidebar .btn-brochure:hover,
html.investment-page .guide-sidebar #brochure_request input[type="submit"]:hover,
html.investment-page .guide-sidebar input[type="submit"]:hover,
html.investment-page .guide-sidebar button[type="submit"]:hover,
html.investment-page .guide-sidebar .sbmt input[type="submit"]:hover,
html.investment-page .guide-sidebar .asktoseller input[type="submit"]:hover,
html.investment-page .guide-sidebar #gray2 input[type="submit"]:hover {
background: #0d5aa7 !important; /* Navy blue hover - matches View Details button */
background-image: none !important;
background-color: #0d5aa7 !important;
color: #ffffff !important;
text-shadow: none !important;
border-color: #0d5aa7 !important;
border-color: #9ca3af !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Fix spacing between textarea and send button - match guide.php */
html.investment-page .guide-sidebar .asktoseller .sbmt,
html.investment-page .guide-sidebar #gray2 .sbmt {
display: block !important;
visibility: visible !important;
margin-top: 12px !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* Ensure textarea has proper spacing from send button */
html.investment-page .guide-sidebar .asktoseller textarea,
html.investment-page .guide-sidebar #gray2 textarea,
html.investment-page .guide-sidebar .fmtextarea {
margin-bottom: 0 !important;
padding-bottom: 12px !important;
}
/* ============================================
INVESTMENT PAGE - YOUR COMPANY BOX STYLING
Match guide.php exactly
============================================ */
/* Your Company box - match guide.php styling */
html.investment-page #seller,
html.investment-page #seller.sidebar-card-body {
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
html.investment-page #seller strong {
display: none !important;
}
/* Logo wrapper with padding */
html.investment-page #seller .company-logo-wrapper {
padding: 16px !important;
margin-bottom: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Large logo - fills available width */
html.investment-page #seller .company-logo-large,
html.investment-page #seller img.company-logo-large,
html.investment-page #seller .company-logo-wrapper img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 140px !important;
min-height: 80px !important;
display: block !important;
margin: 0 auto !important;
object-fit: contain !important;
object-position: center !important;
}
/* Header styling */
html.investment-page #seller .sidebar-modern-header {
margin-bottom: 8px !important;
padding: 16px 20px !important;
font-weight: 600 !important;
font-size: 18px !important;
background: #f8f9fb !important;
border-bottom: 1px solid #e5e7eb !important;
margin: 0 0 0 0 !important;
color: #1f2937 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.3 !important;
text-align: left !important;
}
/* Phone line with icons - single line, side by side */
html.investment-page #seller .company-phone-line {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin-bottom: 12px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
padding: 0 20px !important;
}
html.investment-page #seller .company-phone-line .phone-icon-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
color: #195385 !important;
text-decoration: none !important;
transition: color 0.2s ease, transform 0.2s ease !important;
font-size: 16px !important;
flex-shrink: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
html.investment-page #seller .company-phone-line .phone-icon-link i {
font-size: 16px !important;
font-weight: normal !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
line-height: 1 !important;
}
html.investment-page #seller .company-phone-line .phone-icon-link:hover {
color: #0d5aa7 !important;
transform: scale(1.1) !important;
}
/* WhatsApp button in sidebar */
html.investment-page #seller .company-phone-line .whatsapp-icon-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: 24px !important;
padding: 12px 18px !important;
color: #25D366 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
font-size: 18px !important;
flex-shrink: 0 !important;
visibility: visible !important;
opacity: 1 !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2) !important;
background: rgba(37, 211, 102, 0.08) !important;
}
html.investment-page #seller .company-phone-line .whatsapp-icon-link svg {
width: 20px !important;
height: 20px !important;
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
fill: #25D366 !important;
}
html.investment-page #seller .company-phone-line .whatsapp-icon-link:hover {
color: #128C7E !important;
background: rgba(37, 211, 102, 0.12) !important;
box-shadow: 0 3px 12px rgba(37, 211, 102, 0.3) !important;
transform: translateY(-1px) !important;
}
html.investment-page #seller .company-phone-line .phone-number {
font-size: 16px !important;
color: #1f2937 !important;
font-weight: 500 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.5 !important;
white-space: nowrap !important;
}
/* Email line */
html.investment-page #seller .company-email-line {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 20px !important;
margin-bottom: 0 !important;
}
html.investment-page #seller .company-email-line i {
font-size: 16px !important;
color: #195385 !important;
flex-shrink: 0 !important;
}
html.investment-page #seller .company-email-line a {
font-size: 16px !important;
color: #195385 !important;
text-decoration: none !important;
font-weight: 500 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
transition: color 0.2s ease !important;
}
html.investment-page #seller .company-email-line a:hover {
color: #0d5aa7 !important;
text-decoration: underline !important;
}
/* Mobile adjustments for Your Company box */
@media (max-width: 767px) {
html.investment-page #seller .company-logo-large,
html.investment-page #seller img.company-logo-large,
html.investment-page #seller .company-logo-wrapper img {
width: 70% !important;
max-width: 70% !important;
height: auto !important;
max-height: 98px !important;
min-height: 56px !important;
margin: 0 auto !important;
}
}
/* ============================================
INVESTMENT PAGE - Apply guide.php layout style
============================================ */
/* Desktop layout - two columns with sidebar - MATCH GUIDE PAGES EXACTLY */
@media (min-width: 992px) {
html.service-page .property-detail-layout {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 40px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
overflow: visible !important;
transform: none !important;
}
/* Left column - text content wrapper with max-width constraint */
html.service-page .property-detail-layout .left-column {
max-width: 860px !important;
width: 860px !important;
flex: 0 0 860px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
transform: none !important;
}
html.service-page .property-detail-layout .left-column .single-property {
overflow: visible !important;
transform: none !important;
}
/* Right column - sidebar container with max-width constraint */
html.service-page .property-detail-layout .right-column {
max-width: 340px !important;
width: 340px !important;
flex: 0 0 340px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
transform: none !important;
}
/* Sticky sidebar for investment pages - apply to all sidebar containers */
html.service-page .right-column.contact-sidebar,
html.service-page .property-detail-layout .right-column.contact-sidebar,
html.service-page .sidebar.right-sidebar.right-column.contact-sidebar,
html.service-page .guide-right-sidebar,
html.service-page .guide-sticky-wrapper {
position: sticky !important;
top: 120px !important;
z-index: 20 !important;
height: auto !important;
max-height: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
width: 100% !important;
align-self: flex-start !important;
overflow: visible !important;
transform: none !important;
}
/* Also ensure the contact-sidebar class works */
html.service-page .contact-sidebar {
position: sticky !important;
top: 120px !important;
z-index: 20 !important;
height: max-content !important;
margin-top: 0 !important;
padding-top: 0 !important;
width: 100% !important;
}
/* Ensure first element in sidebar aligns */
html.service-page .contact-sidebar > *:first-child,
html.service-page .guide-sticky-wrapper > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Ensure sidebar containers are block on desktop */
html.service-page .property-detail-layout,
html.service-page .guide-content-wrapper,
html.service-page .left-column,
html.service-page .right-column,
html.service-page .guide-right-sidebar,
html.service-page .sidebar,
html.service-page .right-sidebar {
display: block !important;
}
/* Left + Right columns must be flex container on desktop */
html.service-page .property-detail-layout {
display: flex !important;
align-items: flex-start !important;
}
/* Prevent sticky from being blocked */
html.service-page .property-detail-layout * {
overflow: visible !important;
transform: none !important;
position: static !important;
}
/* Exception: Hero image container can have overflow hidden */
html.service-page .guide-hero-image {
overflow: hidden !important;
}
/* Hero image container for service pages - match guide.php exactly */
html.service-page .guide-hero-image,
html.service-page .hero-container {
margin: 0 0 25px 0 !important;
overflow: hidden !important;
border-radius: 10px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
position: relative !important;
}
/* Hero image container - 60% width of text container (left-column is 75%, so 60% of 75% = 45% of container) - match guide.php exactly */
html.service-page .property-detail-wrapper > .guide-hero-image,
html.service-page .container.property-detail-wrapper > .guide-hero-image,
html.service-page .property-detail-wrapper > .hero-container {
width: 45% !important; /* 60% of 75% left-column width - same as guide.php (results in ~513px width) */
max-width: 45% !important;
margin: 0 0 30px 0 !important; /* Align with left column start */
display: block !important;
position: relative !important;
}
/* Hero image for service pages - match guide.php exactly (300px height, same as guides) */
html.service-page .guide-hero-image img,
html.service-page .guide-hero-image img.hero-image,
html.service-page .guide-hero-image .img-responsive,
html.service-page .hero-image,
html.service-page .property-detail-wrapper > .guide-hero-image img {
width: 100% !important;
height: 300px !important; /* Fixed height - matches guide pages exactly */
object-fit: cover !important; /* Auto-crop portrait to match landscape */
object-position: center !important;
border-radius: 12px !important; /* Consistent rounded corners - match guide pages */
display: block !important;
}
/* Ensure parent containers don't block sticky */
html.service-page #content.content-full,
html.service-page .container,
html.service-page .property-detail-wrapper,
html.service-page .property-detail-layout {
overflow: visible !important;
transform: none !important;
}
}
/* ============================================
SERVICE PAGE - HERO IMAGE ABOVE FLEX LAYOUT (OUTSIDE MEDIA QUERY - MATCH GUIDE PAGES)
============================================ */
/* Hero image container - 60% width of text container (left-column is 75%, so 60% of 75% = 45% of container) - match guide.php exactly */
html.service-page .property-detail-wrapper > .guide-hero-image,
html.service-page .container.property-detail-wrapper > .guide-hero-image,
html.service-page .property-detail-wrapper > .hero-container {
width: 45% !important; /* 60% of 75% left-column width - same as guide.php (results in ~513px width) */
max-width: 45% !important;
margin: 0 0 30px 0 !important; /* Align with left column start */
display: block !important;
position: relative !important;
}
/* Mobile layout for investment pages */
@media (max-width: 780px) {
html.service-page .property-detail-layout {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
html.service-page .left-column {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
order: 1 !important;
margin-bottom: -20px !important;
}
html.service-page .right-column,
html.service-page .right-sidebar,
html.service-page .sidebar.right-sidebar.right-column.contact-sidebar,
html.service-page .guide-sticky-wrapper,
html.service-page .guide-sidebar {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
order: 2 !important;
position: relative !important;
top: auto !important;
margin-top: -20px !important;
padding-top: 0 !important;
}
/* Hide Request Brochure card on mobile */
html.service-page .sidebar-card-modern:has(#brochure_request) {
display: none !important;
}
/* Add space above Your Company card */
html.service-page .sidebar-card-modern:has(#seller) {
margin-top: 30px !important;
padding-top: 20px !important;
}
/* Hero image - full width on mobile */
html.service-page .property-detail-wrapper > .guide-hero-image {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px 0 !important;
}
}
/* Apply same footer styling to investment pages as guide pages */
html.service-page .site-footer-bottom1 .container-fluid {
background: #ffffff !important;
padding: 20px 0 !important;
margin: 0 !important;
border-top: 1px solid rgba(255,255,255,.3) !important;
}
html.service-page .site-footer-bottom1 .container-fluid .col-12 {
background: #ffffff !important;
}
html.service-page .site-footer-bottom1 {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
html.service-page .site-footer-bottom1 .footer-grid,
html.service-page .site-footer-bottom1 .footer-shell {
padding-bottom: 35px !important;
}
/* ============================================
INVESTMENT PAGE - MODERN SIDEBAR STYLING
Apply same modern sidebar styles as guide pages
============================================ */
/* Modern sidebar card styling for investment pages */
html.service-page .guide-sidebar .sidebar-card-modern {
margin-bottom: 24px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* Contact Us form container - modern styling - COMPLETE OVERRIDE OF OLD STYLES */
html.service-page .guide-sidebar .asktoseller,
html.service-page .guide-sidebar #gray2,
html.service-page #gray2.asktoseller {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
z-index: 1 !important;
overflow: visible !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Remove ALL old #gray2 styles from style.css - COMPLETE OVERRIDE */
html.service-page #gray2,
html.service-page #gray2.asktoseller {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-bottom-right-radius: 0 !important;
-moz-border-radius-bottomright: 0 !important;
border-bottom-right-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
z-index: 1 !important;
overflow: visible !important;
box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
-moz-filter: none !important;
}
html.service-page #gray2 p.title,
html.service-page #gray2 p.ask,
html.service-page #gray2 .title,
html.service-page #gray2 .title.ask {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.service-page #gray2 p.ask {
background: transparent !important;
text-align: left !important;
padding: 0 !important;
margin: 0 !important;
}
/* Contact Us form - ensure it displays correctly */
html.service-page .guide-sidebar .asktoseller form,
html.service-page .guide-sidebar #gray2 form {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
/* Contact Us textarea - proper sizing */
html.service-page .guide-sidebar .asktoseller textarea,
html.service-page .guide-sidebar #gray2 textarea {
display: block !important;
visibility: visible !important;
height: auto !important;
min-height: 120px !important;
}
/* Contact Us submit button container */
html.service-page .guide-sidebar .asktoseller .sbmt,
html.service-page .guide-sidebar #gray2 .sbmt {
display: flex !important;
visibility: visible !important;
margin-top: 16px !important;
}
/* Override any old sidebar styles that might interfere */
html.service-page .sidebar.right-sidebar,
html.service-page .right-sidebar,
html.service-page .contact-sidebar {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Remove old Contact Us styles that might be interfering - COMPLETE REMOVAL */
html.service-page .asktoseller .title,
html.service-page .asktoseller p.title,
html.service-page .asktoseller .title.ask,
html.service-page #gray2 .title,
html.service-page #gray2 p.title,
html.service-page #gray2 p.title.ask,
html.service-page #gray2 .title.ask {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* Override old #gray2 input/textarea focus styles from style.css */
html.service-page #gray2 input[type=text]:focus,
html.service-page #gray2 textarea:focus,
html.service-page .asktoseller input[type=text]:focus,
html.service-page .asktoseller textarea:focus {
border: 1px solid #195385 !important;
box-shadow: 0 0 0 3px rgba(25, 83, 133, 0.1) !important;
outline: none !important;
}
/* Ensure modern header styling */
html.service-page .asktoseller .sidebar-modern-header,
html.service-page .asktoseller h3.sidebar-modern-header {
font-size: 18px !important;
font-weight: 600 !important;
color: #111 !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
/* Modern form field styling */
html.service-page .guide-sidebar .fieldwrap {
margin-bottom: 16px !important;
}
html.service-page .guide-sidebar .fmtext,
html.service-page .guide-sidebar .fmtextarea {
width: 100% !important;
padding: 12px !important;
border: 1px solid #d1d5db !important;
border-radius: 6px !important;
font-size: 14px !important;
}
html.service-page .guide-sidebar .sbmt input[type="submit"] {
background: #1a3a7a !important; /* Navy blue - matches View Details button */
color: #ffffff !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 6px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
}
html.service-page .guide-sidebar .sbmt input[type="submit"]:hover {
background: #0d5aa7 !important; /* Navy blue hover - matches View Details button */
}
/* ============================================
INVESTMENT PAGE - MODERN TYPOGRAPHY
Apply same modern text and heading styles as guide pages
============================================ */
/* Modern font family for investment pages */
html.service-page,
body.service-page {
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Modern paragraph styling */
html.service-page .guide-content-wrapper p,
html.service-page .guide-content p,
html.service-page .guide-section-content p,
html.service-page .guide-content-sections p,
html.service-page .left-column p,
html.service-page .single-property p,
body.service-page p {
line-height: 1.62 !important;
font-size: 17px !important;
margin-bottom: 18px !important;
color: #333 !important;
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Preserve paragraph spacing */
html.service-page .guide-section-content p:last-child,
html.service-page .guide-content-sections p:last-child {
margin-bottom: 0 !important;
}
/* Modern content wrapper styling */
html.service-page .guide-content-wrapper,
html.service-page .guide-content-wrapper li,
html.service-page .guide-content-wrapper div,
html.service-page .guide-content-sections,
html.service-page .left-column {
line-height: 1.68 !important;
font-family: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
color: #333 !important;
}
/* Modern heading styles */
html.service-page .guide-content-wrapper h2,
html.service-page .guide-content-sections h2,
html.service-page .left-column h2,
html.service-page .single-property h2,
body.service-page h2 {
font-size: 24px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 12px !important;
margin-top: 24px !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.4 !important;
}
html.service-page .guide-content-wrapper h3,
html.service-page .guide-content-sections h3,
html.service-page .left-column h3,
html.service-page .single-property h3,
body.service-page h3 {
font-size: 22px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 10px !important;
margin-top: 20px !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.4 !important;
}
html.service-page .guide-content-wrapper h4,
html.service-page .guide-content-sections h4,
html.service-page .left-column h4,
html.service-page .single-property h4,
body.service-page h4 {
font-size: 18px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 8px !important;
margin-top: 16px !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.4 !important;
}
/* Override old .articil h3 style for investment pages */
html.service-page .articil h3,
html.service-page .guide-content-wrapper .articil h3 {
color: #374151 !important;
font-weight: 600 !important;
line-height: 1.4 !important;
font-size: 22px !important;
}
/* Modern list styling */
html.service-page .guide-content-wrapper ul,
html.service-page .guide-content-sections ul,
html.service-page .left-column ul {
margin-bottom: 18px !important;
padding-left: 24px !important;
line-height: 1.68 !important;
color: #333 !important;
list-style: disc !important;
list-style-type: disc !important;
}
html.service-page .guide-content-wrapper ol,
html.service-page .guide-content-sections ol,
html.service-page .left-column ol {
margin-bottom: 18px !important;
padding-left: 24px !important;
line-height: 1.68 !important;
color: #333 !important;
list-style: decimal !important;
list-style-type: decimal !important;
}
html.service-page .guide-content-wrapper li,
html.service-page .guide-content-sections li,
html.service-page .left-column li {
margin-bottom: 8px !important;
line-height: 1.65 !important;
color: #333 !important;
}
/* Modern link styling */
html.service-page .guide-content-wrapper a,
html.service-page .guide-content-sections a,
html.service-page .left-column a {
color: #195385 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
html.service-page .guide-content-wrapper a:hover,
html.service-page .guide-content-sections a:hover,
html.service-page .left-column a:hover {
color: #0d3d5c !important;
text-decoration: underline !important;
}
/* H1 heading styles - match guide.php with border separator */
html.service-page .guide-content-wrapper h1,
html.service-page .guide-content-sections h1,
html.service-page .left-column h1,
html.service-page .single-property h1 {
font-size: 32px !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #e5e7eb !important;
font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.2 !important;
}
/* ============================================
INVESTMENT PAGE - TEXT BOX FRAME WITH LINES
Add frame/border like guide section cards
============================================ */
/* Text content wrapper - match guide.php exactly */
html.service-page .single-property,
html.service-page .left-column .single-property,
html.service-page .guide-content-wrapper,
html.service-page .guide-content-wrapper.guide-content,
html.service-page .guide-content {
background: #ffffff !important;
border-radius: 12px !important;
padding: 24px 28px !important;
margin-bottom: 28px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0,0,0,0.08) !important;
border: 1px solid #e5e7eb !important;
outline: none !important;
transition: box-shadow 0.3s ease !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
html.service-page .single-property:hover,
html.service-page .guide-content-wrapper:hover,
html.service-page .guide-content-wrapper.guide-content:hover,
html.service-page .guide-content:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0,0,0,0.12) !important;
}
/* Remove any borders from parent containers that might create extra lines */
html.service-page .left-column,
html.service-page .property-detail-layout .left-column {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* ============================================
INVESTMENT PAGE - WRAP IMAGES IN TEXT BOX
Style images like hero images
============================================ */
/* Wrap images inside text content with hero image styling */
html.service-page .guide-content-sections img,
html.service-page .guide-content-wrapper img,
html.service-page .left-column img {
margin: 25px 0 !important;
width: 100% !important;
height: auto !important;
max-height: 400px !important;
object-fit: cover !important;
border-radius: 10px !important;
display: block !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
/* Wrap images in container like hero image */
html.service-page .guide-content-sections p:has(img),
html.service-page .guide-content-wrapper p:has(img) {
margin: 25px 0 !important;
padding: 0 !important;
}
html.service-page .guide-content-sections img,
html.service-page .guide-content-wrapper img {
margin: 0 !important;
}
/* ============================================
INVESTMENT PAGE - SIDEBAR BUTTON FONT SIZES
Match guide.php button styling
============================================ */
/* Sidebar buttons - match guide.php GREY button styling exactly */
html.service-page .guide-sidebar .btn-brochure,
html.service-page .guide-sidebar #brochure_request input[type="submit"],
html.service-page .guide-sidebar input[type="submit"],
html.service-page .guide-sidebar button[type="submit"],
html.service-page .guide-sidebar .sbmt input[type="submit"],
html.service-page .guide-sidebar .asktoseller input[type="submit"],
html.service-page .guide-sidebar #gray2 input[type="submit"] {
background: #1a3a7a !important; /* Navy blue - matches View Details button */
background-image: none !important;
background-color: #1a3a7a !important;
color: #ffffff !important;
border: 1px solid #1a3a7a !important;
border-radius: 10px !important;
height: 46px !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 0.2px !important;
text-shadow: none !important;
width: 100% !important;
max-width: 200px !important;
padding: 0 !important;
margin: 0 auto 0 auto !important;
cursor: pointer !important;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
display: block !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
line-height: 1.5 !important;
text-align: center !important;
}
html.service-page .guide-sidebar .btn-brochure:hover,
html.service-page .guide-sidebar #brochure_request input[type="submit"]:hover,
html.service-page .guide-sidebar input[type="submit"]:hover,
html.service-page .guide-sidebar button[type="submit"]:hover,
html.service-page .guide-sidebar .sbmt input[type="submit"]:hover,
html.service-page .guide-sidebar .asktoseller input[type="submit"]:hover,
html.service-page .guide-sidebar #gray2 input[type="submit"]:hover {
background: #0d5aa7 !important; /* Navy blue hover - matches View Details button */
background-image: none !important;
background-color: #0d5aa7 !important;
color: #ffffff !important;
text-shadow: none !important;
border-color: #0d5aa7 !important;
border-color: #9ca3af !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Fix spacing between textarea and send button - match guide.php */
html.service-page .guide-sidebar .asktoseller .sbmt,
html.service-page .guide-sidebar #gray2 .sbmt {
display: block !important;
visibility: visible !important;
margin-top: 12px !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* Ensure textarea has proper spacing from send button */
html.service-page .guide-sidebar .asktoseller textarea,
html.service-page .guide-sidebar #gray2 textarea,
html.service-page .guide-sidebar .fmtextarea {
margin-bottom: 0 !important;
padding-bottom: 12px !important;
}
/* ============================================
INVESTMENT PAGE - YOUR COMPANY BOX STYLING
Match guide.php exactly
============================================ */
/* Your Company box - match guide.php styling */
html.service-page #seller,
html.service-page #seller.sidebar-card-body {
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
html.service-page #seller strong {
display: none !important;
}
/* Logo wrapper with padding */
html.service-page #seller .company-logo-wrapper {
padding: 16px !important;
margin-bottom: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Large logo - fills available width */
html.service-page #seller .company-logo-large,
html.service-page #seller img.company-logo-large,
html.service-page #seller .company-logo-wrapper img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 140px !important;
min-height: 80px !important;
display: block !important;
margin: 0 auto !important;
object-fit: contain !important;
object-position: center !important;
}
/* Header styling */
html.service-page #seller .sidebar-modern-header {
margin-bottom: 8px !important;
padding: 16px 20px !important;
font-weight: 600 !important;
font-size: 18px !important;
background: #f8f9fb !important;
border-bottom: 1px solid #e5e7eb !important;
margin: 0 0 0 0 !important;
color: #1f2937 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.3 !important;
text-align: left !important;
}
/* Phone line with icons - single line, side by side */
html.service-page #seller .company-phone-line {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin-bottom: 12px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
padding: 0 20px !important;
}
html.service-page #seller .company-phone-line .phone-icon-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
color: #195385 !important;
text-decoration: none !important;
transition: color 0.2s ease, transform 0.2s ease !important;
font-size: 16px !important;
flex-shrink: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
html.service-page #seller .company-phone-line .phone-icon-link i {
font-size: 16px !important;
font-weight: normal !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
line-height: 1 !important;
}
html.service-page #seller .company-phone-line .phone-icon-link:hover {
color: #0d5aa7 !important;
transform: scale(1.1) !important;
}
/* WhatsApp button in sidebar */
html.service-page #seller .company-phone-line .whatsapp-icon-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: 24px !important;
padding: 12px 18px !important;
color: #25D366 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
font-size: 18px !important;
flex-shrink: 0 !important;
visibility: visible !important;
opacity: 1 !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2) !important;
background: rgba(37, 211, 102, 0.08) !important;
}
html.service-page #seller .company-phone-line .whatsapp-icon-link svg {
width: 20px !important;
height: 20px !important;
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
fill: #25D366 !important;
}
html.service-page #seller .company-phone-line .whatsapp-icon-link:hover {
color: #128C7E !important;
background: rgba(37, 211, 102, 0.12) !important;
box-shadow: 0 3px 12px rgba(37, 211, 102, 0.3) !important;
transform: translateY(-1px) !important;
}
html.service-page #seller .company-phone-line .phone-number {
font-size: 16px !important;
color: #1f2937 !important;
font-weight: 500 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
line-height: 1.5 !important;
white-space: nowrap !important;
}
/* Email line */
html.service-page #seller .company-email-line {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 20px !important;
margin-bottom: 0 !important;
}
html.service-page #seller .company-email-line i {
font-size: 16px !important;
color: #195385 !important;
flex-shrink: 0 !important;
}
html.service-page #seller .company-email-line a {
font-size: 16px !important;
color: #195385 !important;
text-decoration: none !important;
font-weight: 500 !important;
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
transition: color 0.2s ease !important;
}
html.service-page #seller .company-email-line a:hover {
color: #0d5aa7 !important;
text-decoration: underline !important;
}
/* Mobile adjustments for Your Company box */
@media (max-width: 767px) {
html.service-page #seller .company-logo-large,
html.service-page #seller img.company-logo-large,
html.service-page #seller .company-logo-wrapper img {
width: 70% !important;
max-width: 70% !important;
height: auto !important;
max-height: 98px !important;
min-height: 56px !important;
margin: 0 auto !important;
}
}
/* ============================================
PROPERTY UNIT TABS - Match General Details Style
Apply modern grid styling to extended unit tabs (2+1, 3+1, etc.)
============================================ */
/* Apply same modern grid style to unit tabs */
html.property-listing-page .tab-pane:not(#description) {
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
background: #ffffff !important;
border-radius: 12px !important;
border: 1px solid #e5e7eb !important;
padding: 24px !important;
margin-top: 24px !important;
margin-bottom: 24px !important;
}
/* Convert old Bootstrap columns to modern detail-icon-item style */
html.property-listing-page .tab-pane:not(#description) .col-md-2,
html.property-listing-page .tab-pane:not(#description) .col-md-4 {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex: 1 1 calc(16.666% - 14px) !important;
min-width: 120px !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
/* Price column - make it larger but still centered */
html.property-listing-page .tab-pane:not(#description) .col-md-4 {
flex: 1 1 calc(33.333% - 14px) !important;
min-width: 200px !important;
}
/* Modern icon styling - match detail-icon */
html.property-listing-page .tab-pane:not(#description) .iconimg {
width: 32px !important;
height: 32px !important;
margin-bottom: 8px !important;
filter: brightness(0) saturate(100%) invert(20%) !important;
display: block !important;
}
/* Icon container paragraph */
html.property-listing-page .tab-pane:not(#description) p {
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
/* Text span styling - match detail-icon-item span */
html.property-listing-page .tab-pane:not(#description) span {
font-size: 14px !important;
color: #333 !important;
font-weight: 500 !important;
line-height: 1.4 !important;
display: block !important;
}
/* Price styling - modern, prominent */
html.property-listing-page .tab-pane:not(#description) .fiyat {
font-size: 24px !important;
font-weight: 700 !important;
color: #195385 !important;
margin: 0 !important;
padding: 0 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
line-height: 1.2 !important;
}
/* Remove text-center class effect - use flexbox centering instead */
html.property-listing-page .tab-pane:not(#description).text-center {
text-align: left !important;
}
/* Mobile responsive */
@media (max-width: 767px) {
html.property-listing-page .tab-pane:not(#description) {
padding: 16px !important;
gap: 12px !important;
}
html.property-listing-page .tab-pane:not(#description) .col-md-2,
html.property-listing-page .tab-pane:not(#description) .col-md-4 {
flex: 1 1 calc(50% - 6px) !important;
min-width: auto !important;
}
html.property-listing-page .tab-pane:not(#description) .col-md-4 {
flex: 1 1 100% !important;
margin-top: 12px !important;
}
html.property-listing-page .tab-pane:not(#description) .fiyat {
font-size: 20px !important;
}
}
/* ============================================
UNIT CARDS - Modern Icon-Grid Card Layout
Matches General Details style
============================================ */
/* Unit Cards Section Container */
.unit-cards-section {
margin-top: 32px;
margin-bottom: 32px;
transition: opacity 0.3s ease;
}
.unit-cards-container {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Individual Unit Card - Modern Icon Grid Style */
.unit-card-modern {
background: #ffffff;
border-radius: 14px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
transition: all 0.3s ease;
display: none;
opacity: 0;
position: relative;
}
.unit-card-modern:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Unit Card Title (Property ID) - Always visible */
.unit-card-title {
font-size: 14px;
font-weight: 600;
color: #003366;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
padding-right: 140px; /* Make space for price badge */
}
/* Green Price Badge - Sticky to top right */
.unit-price-badge {
position: absolute;
top: 20px;
right: 20px;
background: #33cc66; /* Same green as city hubs listings */
color: #ffffff;
font-size: 18px;
font-weight: 700;
padding: 10px 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.2;
white-space: nowrap;
z-index: 10;
}
.unit-price-badge:hover {
box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
transform: translateY(-1px);
transition: all 0.2s ease;
}
/* Unit Card Grid - Uses same style as General Details */
.unit-card-modern .unit-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Tab Filtering Styles */
.unit-filter-tabs .unit-tab-link {
cursor: pointer;
user-select: none;
}
.unit-filter-tabs .unit-tab-link:hover {
text-decoration: none;
}
/* Mobile Responsive */
@media (max-width: 767px) {
.unit-cards-section {
margin-top: 24px;
margin-bottom: 24px;
}
.unit-card-modern {
padding: 16px;
border-radius: 12px;
}
.unit-card-modern .unit-card-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.unit-card-title {
font-size: 13px;
margin-bottom: 12px;
padding-bottom: 10px;
padding-right: 120px; /* Adjust for smaller badge on mobile */
}
.unit-price-badge {
top: 16px;
right: 16px;
font-size: 16px;
padding: 8px 12px;
border-radius: 6px;
}
}
/* ============================================
MOBILE ONLY: Unit Cards Positioning
Desktop behavior unchanged
============================================ */
@media (max-width: 768px) {
/* Ensure unit cards appear right after tabs on mobile */
.property-detail-page .unit-cards-section {
margin-top: 0 !important;
margin-bottom: 24px !important;
order: 1 !important; /* After tabs */
}
/* Hide General Details when unit tab is active (mobile only) */
.property-detail-page .tabs-modern ~ [data-tab-content="general"][style*="display: none"] {
display: none !important;
}
/* Ensure proper spacing after tabs on mobile */
.property-detail-page .tabs-modern {
margin-bottom: 0 !important;
order: 0 !important; /* Tabs first */
}
/* Make sure mobile clones appear after unit cards if visible, otherwise after tabs */
.property-detail-page .mobile-clone {
order: 2 !important; /* After unit cards */
}
/* Force unit cards to appear right after tabs, not after Your Company */
.property-detail-page .single-property {
display: flex !important;
flex-direction: column !important;
}
/* Ensure unit cards section is positioned correctly */
.property-detail-page .tabs-modern + .unit-cards-section {
order: 1 !important;
}
}
/* ====== LUXURY ANIMATED TABS (PROPERTY DETAIL PAGE) ====== */
.property-detail-page .nav-tabs-pills.unit-filter-tabs {
display: flex;
gap: 16px;
padding: 20px 0;
border: none !important;
background: transparent !important;
position: relative;
}
/* Base Tab Style */
.property-detail-page .unit-filter-tabs .unit-tab-link {
background: #f3f5f7;
color: #333 !important;
padding: 14px 30px;
border-radius: 14px;
font-size: 18px;
font-weight: 700;
display: inline-block;
transition: all 0.35s cubic-bezier(.25,.8,.25,1);
position: relative;
}
/* Hover Effect */
.property-detail-page .unit-filter-tabs .unit-tab-link:hover {
background: #e6e9ed;
color: #000 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Active Tab */
.property-detail-page .unit-filter-tabs li.active .unit-tab-link {
background: #1f4b7c !important;
color: #fff !important;
font-weight: 800;
box-shadow: 0 5px 15px rgba(31,75,124,0.32);
transform: translateY(-3px);
}
/* Animated Underline Container */
.property-detail-page .nav-tabs-pills-wrapper {
position: relative;
}
.property-detail-page .nav-tabs-pills.unit-filter-tabs {
position: relative;
}
/* The Underline Element */
.property-detail-page .unit-tabs-underline {
position: absolute;
bottom: -8px;
height: 4px;
background: #1f4b7c;
border-radius: 4px;
transition: all 0.35s cubic-bezier(.4,0,.2,1);
}
/* Reset Bootstrap inherited junk */
.property-detail-page .nav-tabs-pills.unit-filter-tabs li {
margin-bottom: 0 !important;
list-style: none;
}
/* Allow pointer and touch events */
.property-detail-page .unit-tab-link {
cursor: pointer;
user-select: none;
}
/* Mobile Responsive */
@media (max-width: 767px) {
.property-detail-page .unit-filter-tabs {
gap: 12px !important;
padding: 16px 0 !important;
flex-wrap: wrap;
}
.property-detail-page .unit-filter-tabs .unit-tab-link {
padding: 12px 20px !important;
font-size: 16px !important;
border-radius: 12px !important;
}
}
/* Tab Container Background */
.property-detail-layout .nav-tabs-pills {
background: #F8FAFC;
padding: 16px;
border-radius: 14px;
}
/* Property Description Title Spacing - Match General Details spacing from thumbnail bar */
.property-detail-page .property-description {
margin-top: 32px !important;
}
.property-detail-page .property-description .section-title {
margin-top: 0 !important;
margin-bottom: 16px !important;
}
/* ================================
CONTACT PAGE β LUXURY 2025 DESIGN
================================ */
.contact-wrapper {
max-width: 1280px;
margin: 0 auto;
padding: 40px 10px;
font-family: "Inter", sans-serif;
}
.contact-grid {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.contact-card {
flex: 1;
min-width: 350px;
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.contact-card h3 {
font-weight: 700;
margin-bottom: 20px;
color: #1a1a1a;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid #ddd;
font-size: 15px;
margin-bottom: 18px;
transition: all 0.25s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #0053a5;
box-shadow: 0 0 0 2px rgba(0,83,165,0.15);
outline: none;
}
.contact-submit {
background: #0b264f;
color: #fff;
padding: 14px 20px;
width: 100%;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: 0.3s ease;
}
.contact-submit:hover {
background: #093366;
}
.address-item {
margin-bottom: 22px;
font-size: 15px;
color: #333;
line-height: 1.6;
}
#contact-map {
margin-top: 40px !important;
border-radius: 20px;
overflow: hidden;
}
#contact-map iframe {
height: 280px !important;
border-radius: 0;
border: 0;
display: block;
}
/* Modern Contact Map */
.contact-map-wrapper {
width: 100%;
max-width: 1600px;
margin: 30px auto 0 auto;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 35px rgba(0,0,0,0.08);
}
.contact-map-wrapper iframe {
width: 100%;
height: 340px;
border: none;
display: block;
}
/* Responsive */
@media (max-width: 768px) {
.contact-map-wrapper iframe {
height: 280px;
}
}
/* Mobile */
@media (max-width: 768px) {
.contact-grid {
flex-direction: column;
}
}
.office-block {
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid #f0f0f0;
}
.office-block h4 {
font-size: 16px;
font-weight: 700;
margin: 0 0 4px;
color: #1A1A1A;
}
.office-block p {
font-size: 15px;
color: #444;
margin: 0 0 6px;
}
.contact-map-link {
display: inline-block;
font-size: 14px;
font-weight: 500;
color: #1a73e8;
text-decoration: none;
margin-top: 4px;
transition: 0.25s ease;
}
.contact-map-link:hover {
color: #0b59c7;
text-decoration: underline;
}
.office-contact p {
margin: 6px 0;
font-size: 15px;
color: #333;
}
.office-contact a {
color: #1a73e8;
text-decoration: none;
}
.office-contact a:hover {
text-decoration: underline;
}
/* ================================ */
/* EDITOR'S PICKS SECTION */
/* ================================ */
/* Wrapper */
.editors-picks-wrapper {
margin: 40px 0 37px 0; /* Bottom margin reduced by 3px (from 40px to 37px) to reduce space to Real Estate Services - total 5px reduction with featured-properties top margin */
}
.editors-picks-wrapper .home-section-title {
margin-top: 0;
margin-bottom: 30px;
}
/* Title */
.homepage-mini-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
}
/* GRID: 2 horizontal cards */
.editors-picks-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
/* CARD */
.ep-card {
display: block;
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.ep-card article {
display: block;
width: 100%;
height: 100%;
box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ep-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);
}
/* IMAGE */
.ep-image {
width: 100%;
height: 140px;
background-size: cover;
background-position: center;
}
/* TEXT */
.ep-info {
padding: 12px 14px;
}
/* Limit featured property card titles to 2 lines - Premium UI, Zero SEO Loss */
.editors-picks-wrapper .ep-title,
.editor-4-grid .ep-title,
.ep-title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important; /* Standard property for modern browsers */
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.4 !important;
max-height: calc(1.4em * 2) !important; /* 2 lines max */
}
.ep-title {
font-size: 15px;
font-weight: 600;
color: #333;
margin: 0;
}
.ep-price {
margin-top: 6px;
font-size: 14px;
font-weight: 700;
color: #0077cc;
}
/* ======================= */
/* MOBILE RESPONSIVE */
/* ======================= */
@media(max-width: 768px) {
.editors-picks-grid {
grid-template-columns: 1fr; /* single column */
}
.ep-image {
height: 160px; /* slightly larger for mobile UX */
}
/* MOBILE: Reduce bottom margin of Editors Picks to decrease spacing to Great Offers */
.editors-picks-wrapper {
margin-bottom: 10px !important; /* Reduced from 40px to 10px on mobile */
}
}
/* ================================ */
/* TOP PROPERTY SALES SECTION */
/* ================================ */
.top-property-sales-wrapper {
margin: 40px auto;
padding: 0 15px;
}
/* Home Section Title */
.home-section-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 25px;
margin-top: 40px;
text-align: left; /* Change to center if preferred */
color: #111;
}
@media (max-width: 768px) {
.home-section-title {
font-size: 26px;
margin-top: 25px;
margin-bottom: 20px;
}
}
.top-sales-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.top-sale-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: 0.2s;
}
.top-sale-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.top-sale-image {
display: block;
width: 100%;
overflow: hidden;
}
.top-sale-image img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.top-sale-info {
padding: 15px;
}
.top-sale-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
line-height: 1.3;
}
.top-sale-price {
font-size: 18px;
font-weight: 700;
color: #0077cc;
margin: 0;
}
/* Mobile Responsive */
@media(max-width: 992px) {
.top-sales-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 768px) {
.top-sales-grid {
grid-template-columns: 1fr;
}
.top-sale-image img {
height: 200px;
}
}
/* ================================ */
/* EDITOR PICKS 4-CARD WIDE LAYOUT */
/* ================================ */
/* 4-editor-pick-wide-cards container */
.editor-picks-4-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 40px 0;
}
/* single card */
.editor-pick-wide-card {
display: block;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
transition: transform .25s ease, box-shadow .25s ease;
}
.editor-pick-wide-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.ep4-image {
width: 100%;
height: 220px;
background-size: cover;
background-position: center;
}
.ep4-content {
padding: 18px 20px;
}
.ep4-title {
font-size: 20px;
font-weight: 600;
color: #222;
margin-bottom: 12px;
line-height: 1.35;
}
.ep4-price {
font-size: 18px;
font-weight: 700;
color: #0c7dbc;
}
/* responsive */
@media(max-width: 992px) {
.editor-picks-4-wrapper {
grid-template-columns: 1fr;
}
.ep4-image {
height: 180px;
}
}
/* ---- 4-card Editor Picks Grid ---- */
.editor-4-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 40px 0;
}
/* Desktop and Tablet: Keep 2 columns */
@media screen and (min-width: 769px) {
.editor-4-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ============================================ */
/* MOBILE: EDITOR PICKS - SINGLE COLUMN LAYOUT */
/* ============================================ */
@media only screen and (max-width: 768px) {
/* Force single column grid - target all possible parent containers */
body .container .row .col-md-12 .editors-picks-wrapper .editor-4-grid,
body .col-md-12 .editors-picks-wrapper .editor-4-grid,
body .editors-picks-wrapper .editor-4-grid,
body div.editor-4-grid,
body .editor-4-grid,
.container .row .col-md-12 .editors-picks-wrapper .editor-4-grid,
.col-md-12 .editors-picks-wrapper .editor-4-grid,
.editors-picks-wrapper .editor-4-grid,
div.editor-4-grid,
.editor-4-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-auto-flow: row !important;
grid-auto-columns: 1fr !important;
gap: 25px !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Force each card to full width - override any Bootstrap or other styles */
body .container .row .col-md-12 .editor-4-grid > .ep-card,
body .col-md-12 .editor-4-grid > .ep-card,
body .editor-4-grid > .ep-card,
body .editor-4-grid > a.ep-card,
body .editor-4-grid a.ep-card,
.container .row .col-md-12 .editor-4-grid > .ep-card,
.col-md-12 .editor-4-grid > .ep-card,
.editor-4-grid > .ep-card,
.editor-4-grid > a.ep-card,
.editor-4-grid a.ep-card {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
flex: none !important;
float: none !important;
margin: 0 auto 25px auto !important;
clear: both !important;
box-sizing: border-box !important;
grid-column: 1 / -1 !important;
}
/* Ensure wrapper and parent containers don't interfere */
body .container .row .col-md-12 .editors-picks-wrapper,
body .col-md-12 .editors-picks-wrapper,
body .editors-picks-wrapper,
.container .row .col-md-12 .editors-picks-wrapper,
.col-md-12 .editors-picks-wrapper,
.editors-picks-wrapper {
width: 100% !important;
max-width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
/* Override any Bootstrap column behavior */
body .col-md-12 .editor-4-grid,
.col-md-12 .editor-4-grid {
float: none !important;
position: relative !important;
}
/* Final override - ensure grid items are forced to single column */
.editor-4-grid * {
grid-column: 1 !important;
}
}
/* ============================================ */
/* FINAL MOBILE OVERRIDE - HIGHEST PRIORITY */
/* ============================================ */
@media only screen and (max-width: 768px) {
.editor-4-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.editor-4-grid .ep-card,
.editor-4-grid a.ep-card {
grid-column: 1 !important;
grid-row: auto !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* --- EDITORS PICKS RESPONSIVE FIX --- */
.editors-picks-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.editors-picks-grid {
grid-template-columns: 1fr !important; /* force 1 card per row */
}
.editors-card {
width: 100% !important;
grid-column: 1 / -1 !important;
}
}
.ep-image-wrapper {
width: 100%;
height: 220px;
border-radius: 10px;
overflow: hidden;
background-color: #f5f5f5;
}
.ep-image-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Mobile: Ensure consistent image heights for all Editors Pick cards */
@media (max-width: 768px) {
.ep-image-wrapper {
height: 200px !important;
min-height: 200px !important;
max-height: 200px !important;
}
.ep-image-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* Ensure all cards have the same image wrapper height */
.editor-4-grid .ep-card .ep-image-wrapper,
.editor-4-grid .ep-card:first-child .ep-image-wrapper,
.editor-4-grid .ep-card:nth-child(2) .ep-image-wrapper {
height: 200px !important;
min-height: 200px !important;
max-height: 200px !important;
}
}
/* ============================================================
EDITOR'S PICK 4 CARDS - UNIFORM THUMBNAIL SIZES
All thumbnails must be same size (like Featured Properties)
============================================================ */
/* Desktop: Uniform size - fill container completely */
.editor-4-grid .ep-card .ep-image-wrapper {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
background-color: #f5f5f5 !important;
overflow: hidden !important;
}
.editor-4-grid .ep-card .ep-image-img,
.editor-4-grid .ep-card .ep-image-wrapper img {
object-fit: cover !important; /* Fill container uniformly - same as Featured Properties */
object-position: center 30% !important; /* Show more of building (top-center area) */
width: 100% !important;
height: 100% !important;
display: block !important;
}
/* Mobile: Uniform size - fill container completely */
@media (max-width: 768px) {
.editor-4-grid .ep-card .ep-image-wrapper {
height: 200px !important;
min-height: 200px !important;
max-height: 200px !important;
background-color: #f5f5f5 !important;
overflow: hidden !important;
}
.editor-4-grid .ep-card .ep-image-img,
.editor-4-grid .ep-card .ep-image-wrapper img {
object-fit: cover !important; /* Fill container uniformly */
object-position: center 30% !important; /* Show more of building (top-center area) */
width: 100% !important;
height: 100% !important;
display: block !important;
}
}
/* ============================================================
TEMPORARY FIX - REMOVE GHOST LAYERS
============================================================ */
.site-search-module * {
transform: none !important;
transition: none !important;
}
/* Prevent ghost dropdowns caused by plugin wrapper */
.bootstrap-select,
.bs-select-wrapper,
.bs-container {
display: none !important;
}
select {
visibility: visible !important;
opacity: 1 !important;
}
/* ============================================================
ENSURE GREAT OFFERS SECTION VISIBILITY + RESTORE CARD DESIGN
============================================================ */
/* Ensure section is visible */
#featured-properties {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 18px !important;
margin-bottom: 20px !important;
}
#featured-properties .page-section {
display: block !important;
visibility: visible !important;
}
#featured-properties .block-heading {
display: block !important;
visibility: visible !important;
}
#featured-properties .owl-carousel {
display: block !important;
visibility: visible !important;
}
/* ============================================================
RESTORE ORIGINAL GREAT OFFERS CARD DESIGN
============================================================ */
/* Card container - original design */
#featured-properties li.item.property-block {
position: relative !important;
border-radius: 18px !important;
overflow: visible !important; /* Changed to visible to prevent clipping */
background: #fff !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important; /* Tiny subtle shadow (2px) */
padding: 0 !important;
padding-bottom: 10px !important; /* Increase height downward by 1cm (10px) */
display: flex !important;
flex-direction: column !important;
height: auto !important; /* Changed to auto to allow expansion */
min-height: auto !important;
transition: all 0.35s cubic-bezier(.25,.8,.25,1) !important;
margin: 0 !important;
list-style: none !important;
}
#featured-properties li.item.property-block:hover {
transform: translateY(-4px) scale(1.012) !important;
box-shadow: 0 16px 35px rgba(0,0,0,0.12) !important;
}
/* Card link wrapper - FIX: Remove height constraint to allow content to expand */
#featured-properties .property-block .property-card-link {
display: flex !important; /* Changed from block to flex */
flex-direction: column !important;
width: 100% !important;
height: auto !important; /* Changed from 100% to auto */
min-height: auto !important;
text-decoration: none !important;
color: inherit !important;
cursor: pointer !important;
overflow: visible !important; /* Prevent clipping */
}
/* Image container - use aspect-ratio for responsive design */
#featured-properties .property-block .property-featured-image {
aspect-ratio: 16/10 !important;
height: 240px !important; /* Increased by 1cm (10px) from 230px to 240px */
min-height: 240px !important;
border-top-left-radius: 18px !important;
border-top-right-radius: 18px !important;
overflow: hidden !important;
flex-shrink: 0 !important;
margin-bottom: 0 !important;
position: relative !important;
}
/* Images inside - High quality rendering for sharp, clear images */
#featured-properties .property-featured-image img,
#featured-properties .property-featured-image .newImg,
#featured-properties .property-featured-image .offers-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.45s ease !important;
/* High-quality image rendering for photos */
image-rendering: -webkit-optimize-contrast !important;
image-rendering: auto !important;
-ms-interpolation-mode: bicubic !important;
/* Hardware acceleration for smoother rendering */
-webkit-backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
backface-visibility: hidden !important;
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
/* Ensure images are loaded at full quality */
image-resolution: from-image !important;
}
/* Image hover zoom */
#featured-properties .property-block:hover .property-featured-image img,
#featured-properties .property-block:hover .property-featured-image .offers-img {
transform: scale(1.04) !important;
}
/* Content area - allow full expansion without height constraints */
#featured-properties .property-block .property-info {
padding: 22px 22px 24px 22px !important;
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
min-height: auto !important; /* Changed from 180px to auto */
height: auto !important; /* Allow natural height */
overflow: visible !important; /* Prevent clipping */
}
/* Title styling */
#featured-properties .property-info h2,
#featured-properties .property-info h3,
#featured-properties .property-info h4,
#featured-properties .property-info .title {
font-size: 19px !important;
font-weight: 700 !important; /* Increased from 600 for better readability */
line-height: 1.30 !important;
margin: 0 0 10px 0 !important;
color: #0f1d40 !important;
}
/* FIX: Limit property card titles to 2 lines without breaking layout */
#featured-properties .property-info h3,
#featured-properties .property-block .property-info h3,
#featured-properties .owl-item .property-info h3 {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important; /* Standard property for modern browsers */
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important; /* matches your 19px font */
max-height: calc(19px * 1.3 * 2) !important; /* 19px Γ 1.3 Γ 2 lines = ~49px */
min-height: calc(19px * 1.3 * 2) !important; /* stabilize card height for CLS */
margin-bottom: 10px !important; /* prevent info items squeezing upward */
}
/* Location text styling */
#featured-properties .property-info .location {
margin-bottom: 14px !important;
font-size: 14px !important;
color: #6b7280 !important;
display: block !important;
}
/* Property info list (Bedrooms, Bathrooms, Sq Mt) - allow full expansion */
#featured-properties .property-info .prop-info {
list-style: none !important;
padding: 0 !important;
margin: 8px 0 12px 0 !important; /* Increased bottom margin */
font-size: 14px !important;
overflow: visible !important; /* Prevent clipping */
height: auto !important; /* Allow natural height */
min-height: auto !important; /* Remove height constraints */
}
#featured-properties .property-info .prop-info li {
margin: 6px 0 !important;
display: flex !important;
align-items: center !important;
overflow: visible !important;
height: auto !important;
min-height: 32px !important; /* FIX: Increase min-height to accommodate emoji icons */
line-height: 1.5 !important; /* FIX: Proper line-height for emoji display */
}
#featured-properties .property-info .prop-info .label {
display: none !important; /* Hide label - using icons instead */
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* CRITICAL FIX: Force span.value to be visible - override ALL conflicting rules */
#featured-properties .property-info .prop-info .value,
#featured-properties .property-block .property-info .prop-info .value,
.property-block .property-info ul li .value,
.property-block .property-info .prop-info .value,
#featured-properties li.item.property-block .property-info .prop-info .value {
display: inline-block !important;
float: none !important;
width: auto !important;
min-width: auto !important;
color: #222 !important;
overflow: visible !important;
height: auto !important;
line-height: normal !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: normal !important;
margin: 0 !important;
padding: 0 !important;
}
/* Green price badge - DESIRED STYLE from line 802-815 */
#featured-properties .green-price-badge {
position: relative !important; /* From line 803 */
z-index: 1 !important;
pointer-events: none !important; /* From line 805 - Allow click to pass through to parent link */
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important; /* From line 807 */
border-radius: 12px !important; /* From line 808 */
padding: 8px 16px !important; /* From line 809 */
font-weight: 600 !important; /* From line 810 */
font-size: 15px !important; /* From line 811 */
text-align: center !important; /* From line 812 */
margin-top: 12px !important; /* From line 813 */
text-decoration: none !important; /* From line 814 */
display: inline-block !important;
}
/* Price wrapper positioning */
#featured-properties .property-price-wrapper,
#featured-properties .property-info .price {
margin-top: auto !important;
padding-top: 18px !important;
margin-bottom: 12px !important;
}
/* Owl carousel specific styling */
#featured-properties .owl-carousel.owl-alt-controls {
display: block !important;
visibility: visible !important;
overflow: hidden !important; /* Hide any overflow to prevent next card visibility */
}
#featured-properties .row {
overflow: hidden !important; /* Hide overflow at row level */
}
#featured-properties .owl-stage-outer {
padding-left: 0 !important;
padding-right: 0 !important; /* FIX: was 100px, causes misalignment */
overflow-x: hidden !important; /* Hide horizontal overflow to prevent next card visibility */
overflow-y: visible !important; /* Allow vertical overflow for shadows and card expansion */
}
/* Owl carousel list structure - DO NOT force display on li items - let Owl Carousel control it */
#featured-properties ul.owl-carousel {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* CRITICAL: Items must be visible for Owl to count them for initialization */
#featured-properties ul.owl-carousel:not(.owl-loaded) li.item {
display: list-item !important; /* Visible for Owl to detect and count */
float: none !important;
visibility: visible !important; /* Must be visible for Owl detection */
}
/* The li.item.property-block IS the card - REMOVED: This was forcing display before Owl initializes */
/* Items should only be visible AFTER Owl wraps them in .owl-item */
/* This rule moved to line 12932 where it only applies to .owl-item li.item.property-block */
/* Ensure Owl items have proper width - let Owl Carousel control display */
#featured-properties .owl-item {
/* Let Owl Carousel control display - DO NOT force display */
height: auto !important;
display: block !important; /* Owl Carousel will override this but need base value */
}
/* Owl wraps li.item.property-block, so target the li directly */
#featured-properties .owl-item li.item.property-block {
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* CRITICAL: After Owl Carousel initializes, ensure items are visible */
#featured-properties .owl-item.active li.item.property-block,
#featured-properties .owl-item li.item.property-block {
display: flex !important;
}
/* Images count badge */
#featured-properties .property-featured-image .images-count {
position: absolute !important;
top: 10px !important;
right: 10px !important;
background: rgba(0,0,0,0.6) !important;
color: #fff !important;
padding: 4px 8px !important;
border-radius: 4px !important;
font-size: 12px !important;
z-index: 2 !important;
pointer-events: none !important;
}
/* Ensure clearfix doesn't break layout */
#featured-properties .property-info .clear {
clear: both !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Fix for prop-info list display */
#featured-properties .property-info .prop-info {
display: block !important;
width: 100% !important;
}
/* Ensure green price badge is visible and properly positioned */
#featured-properties .property-info .green-price-badge {
margin-top: auto !important;
display: inline-block !important;
width: auto !important;
}
/* ============================================
GLOBAL PROPERTY IMAGE FIX (ALL CARDS + SLIDERS)
Restores proper card heights and prevents
vertical stretching across entire homepage.
============================================ */
/* Standard image container ratio */
.property-featured-image,
.property-featured-image .newImg,
.offers-img,
.editor-card-image,
.great-offers-image,
.featured-listings-image,
.img-offers-img {
width: 100% !important;
aspect-ratio: 16/10 !important; /* modern clean ratio */
height: auto !important;
overflow: hidden !important;
position: relative !important;
border-radius: 14px !important;
background: #f5f5f5 !important;
}
/* Force correct display of images inside containers */
.property-featured-image img,
.offers-img img,
.editor-card-image img,
.great-offers-image img,
.featured-listings-image img,
.img-offers-img img,
.property-block img,
.owl-carousel .item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* key fix */
object-position: center !important; /* Apple style */
display: block !important;
border-radius: 14px !important;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Remove ANY old overrides that broke the layout */
.property-featured-image img,
.offers-img img {
min-height: unset !important;
max-height: unset !important;
}
/* Prevent vertical stacking glitches */
.property-block,
.owl-item .property-block {
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
/* Restore normal spacing below images */
.property-content,
.property-info {
padding-top: 16px !important;
}
/* ============================================================
HERO SLIDER FLEXSLIDER - FINAL FIXES (LOADED LAST)
Ensure flexslider can control slides for autoplay and navigation
============================================================ */
/* CRITICAL: Hero slider must let flexslider control slide display */
/* DO NOT force display - let flexslider control visibility */
/* Flexslider sets display:none initially, then shows active slide */
/* Ensure hero slider container is visible and functional */
.hero-slider.flexslider {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
overflow: hidden !important;
}
/* Ensure flexslider viewport works */
.hero-slider.flexslider .flex-viewport {
display: block !important;
width: 100% !important;
overflow: hidden !important;
}
/* Navigation arrows - ensure they're visible and clickable */
.hero-slider.flexslider .flex-direction-nav {
display: block !important;
position: relative !important;
z-index: 10 !important;
}
.hero-slider.flexslider .flex-direction-nav a {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
cursor: pointer !important;
pointer-events: auto !important;
}
/* ============================================================
GREAT OFFERS OWL CAROUSEL - FINAL FIX (LOADED LAST)
Ensure Owl Carousel can control item visibility properly
============================================================ */
/* CRITICAL: Section must be visible */
#featured-properties {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* CRITICAL: Carousel must be visible */
#featured-properties .owl-carousel.owl-alt-controls {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* CRITICAL: Let Owl Carousel control li.item display - DO NOT force display:flex */
/* Before initialization, items need to be list-item for Owl to work */
#featured-properties ul.owl-carousel li.item {
display: block !important;
float: none !important;
}
/* After Owl initializes, active items should be visible */
/* Note: li.item.property-block is wrapped by owl-item, so target li directly */
#featured-properties .owl-item.active li.item.property-block,
#featured-properties .owl-item li.item.property-block {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
}
/* Ensure Owl stage and viewport work */
#featured-properties .owl-stage-outer {
display: block !important;
visibility: visible !important;
overflow: hidden !important;
}
/* Owl stage - BLOCK for float layout (Owl Carousel v1 uses float, not flex) */
#featured-properties .owl-stage {
display: block !important;
}
/* OWL RESET β Prevent crash */
#featured-properties .owl-carousel .owl-item {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ============================================================
PROPERTY DETAIL PAGE - REMOVE ALL TOOLTIPS (HARD KILL)
Kill native browser tooltips and Bootstrap tooltips
============================================================ */
/* Kill native browser tooltips on Property Detail page */
html.property-detail-page [title] {
pointer-events: auto;
}
html.property-detail-page [title]:hover::after,
html.property-detail-page [title]:hover::before {
display: none !important;
content: none !important;
}
/* ============================================================
PROPERTY DETAIL PAGE - CUSTOM TOOLTIPS FOR DETAIL ICONS
Black background, white text, instant appearance, larger size
============================================================ */
/* Hide native browser tooltips on detail icons */
html.property-detail-page .detail-icon-item img[title],
html.property-detail-page .detail-icon[title],
html.property-detail-page .property-details-grid img[title],
html.property-detail-page .unit-card-grid img[title] {
pointer-events: auto;
position: relative;
}
/* Prevent native tooltip display */
html.property-detail-page .detail-icon-item img[title]:hover,
html.property-detail-page .detail-icon[title]:hover,
html.property-detail-page .property-details-grid img[title]:hover,
html.property-detail-page .unit-card-grid img[title]:hover {
pointer-events: auto;
}
/* Custom tooltip container - positioned relative to icon */
html.property-detail-page .detail-icon-item {
position: relative !important;
}
/* Ensure detail icon images are positioned relative for tooltip */
html.property-detail-page .detail-icon-item img,
html.property-detail-page .property-details-grid img.detail-icon,
html.property-detail-page .unit-card-grid img.detail-icon {
position: relative !important;
}
/* Custom tooltip - black background, white text, instant appearance, MUCH LARGER TEXT */
/* Target ALL possible combinations to ensure tooltip shows */
html.property-detail-page .detail-icon-item:hover img[data-tooltip-text]::after,
html.property-detail-page .detail-icon-item:hover img[title]::after,
html.property-detail-page .detail-icon-item img[data-tooltip-text]:hover::after,
html.property-detail-page .detail-icon-item img[title]:hover::after,
html.property-detail-page .detail-icon[data-tooltip-text]:hover::after,
html.property-detail-page .detail-icon[title]:hover::after,
html.property-detail-page .property-details-grid img.detail-icon[data-tooltip-text]:hover::after,
html.property-detail-page .property-details-grid img.detail-icon[title]:hover::after,
html.property-detail-page .property-details-grid .detail-icon-item:hover img::after,
html.property-detail-page .unit-card-grid img.detail-icon[data-tooltip-text]:hover::after,
html.property-detail-page .unit-card-grid img.detail-icon[title]:hover::after,
html.property-detail-page .unit-card-grid .detail-icon-item:hover img::after {
content: attr(data-tooltip-text) !important;
position: absolute !important;
bottom: calc(100% + 10px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: 12px 18px !important;
background-color: #000000 !important;
color: #ffffff !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
white-space: nowrap !important;
border-radius: 6px !important;
z-index: 999999 !important;
pointer-events: none !important;
opacity: 1 !important;
transition: none !important;
animation: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
display: block !important;
visibility: visible !important;
text-align: center !important;
min-width: auto !important;
max-width: none !important;
}
/* Fallback - use title if data-tooltip-text not available */
html.property-detail-page .detail-icon-item:hover img[title]::after,
html.property-detail-page .detail-icon-item img[title]:hover::after,
html.property-detail-page .property-details-grid img.detail-icon[title]:hover::after,
html.property-detail-page .unit-card-grid img.detail-icon[title]:hover::after {
content: attr(title) !important;
font-size: 18px !important;
display: block !important;
visibility: visible !important;
padding: 12px 18px !important;
background-color: #000000 !important;
color: #ffffff !important;
position: absolute !important;
bottom: calc(100% + 10px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 999999 !important;
white-space: nowrap !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
/* Tooltip arrow pointing down - larger arrow */
html.property-detail-page .detail-icon-item:hover img[data-tooltip-text]::before,
html.property-detail-page .detail-icon-item:hover img[title]::before,
html.property-detail-page .detail-icon-item img[data-tooltip-text]:hover::before,
html.property-detail-page .detail-icon-item img[title]:hover::before,
html.property-detail-page .detail-icon[data-tooltip-text]:hover::before,
html.property-detail-page .detail-icon[title]:hover::before,
html.property-detail-page .property-details-grid img.detail-icon[data-tooltip-text]:hover::before,
html.property-detail-page .property-details-grid img.detail-icon[title]:hover::before,
html.property-detail-page .property-details-grid .detail-icon-item:hover img::before,
html.property-detail-page .unit-card-grid img.detail-icon[data-tooltip-text]:hover::before,
html.property-detail-page .unit-card-grid img.detail-icon[title]:hover::before,
html.property-detail-page .unit-card-grid .detail-icon-item:hover img::before {
content: '' !important;
position: absolute !important;
bottom: calc(100% + 4px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
border: 6px solid transparent !important;
border-top-color: #000000 !important;
z-index: 999998 !important;
pointer-events: none !important;
opacity: 1 !important;
transition: none !important;
animation: none !important;
display: block !important;
visibility: visible !important;
width: 0 !important;
height: 0 !important;
}
/* Ensure tooltip appears instantly without fade */
@keyframes none {
0%, 100% { opacity: 1; }
}
html.property-detail-page .detail-icon-item img[title]:hover::after,
html.property-detail-page .detail-icon-item img[title]:hover::before {
animation: none !important;
transition: none !important;
opacity: 1 !important;
}
/* Explicitly neutralize native tooltip rendering for images, SVGs, icons */
html.property-detail-page img[title],
html.property-detail-page svg[title],
html.property-detail-page i[title],
html.property-detail-page .detail-icon-item[title],
html.property-detail-page .detail-icon[title] {
/* Remove title attribute rendering */
pointer-events: auto;
}
html.property-detail-page img[title]:hover,
html.property-detail-page svg[title]:hover,
html.property-detail-page i[title]:hover,
html.property-detail-page .detail-icon-item[title]:hover,
html.property-detail-page .detail-icon[title]:hover {
/* Prevent any tooltip display */
cursor: default;
}
/* Prevent Bootstrap tooltip initialization on detail page icons */
html.property-detail-page .detail-icon-item[data-toggle="tooltip"],
html.property-detail-page .detail-icon[data-toggle="tooltip"] {
pointer-events: auto;
}
html.property-detail-page .detail-icon-item[data-toggle="tooltip"]:hover,
html.property-detail-page .detail-icon[data-toggle="tooltip"]:hover {
cursor: default;
}
/* ====== RESET GREAT OFFERS CAROUSEL (FINAL FIX) ====== */
/* Fix vertical stacking + width collapse + flex bugs */
#featured-properties .owl-carousel .item {
display: block !important;
float: left !important;
width: auto !important;
flex: none !important;
flex-basis: auto !important;
position: relative !important;
}
/* Ensure UL behaves like Owl expects */
#featured-properties .owl-carousel {
display: block !important;
overflow: hidden !important;
white-space: normal !important;
width: 100% !important;
}
/* Optional: fix property-block height if needed */
#featured-properties .property-block {
display: block !important;
height: auto !important;
}
/* Ensure images behave normally */
#featured-properties .property-featured-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* ============================================================
GREAT OFFERS THIS MONTH - FINAL CONSOLIDATED CSS
Overrides ALL conflicting rules from akkus.css and style.css
============================================================ */
/* Section container */
#content .featured-blocks #featured-properties.page-section {
padding-top: 15px !important;
padding-bottom: 15px !important;
margin-top: 80px !important; /* OVERRIDE: 60px spacing after what-we-do image */
margin-bottom: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Owl Carousel container */
#featured-properties ul.owl-carousel.owl-alt-controls {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
overflow: hidden !important;
}
/* Owl stage - FLEX with wrap for 2 rows */
#featured-properties .owl-carousel .owl-stage {
display: block !important; /* CRITICAL: Owl Carousel v1 uses float layout, NOT flexbox */
width: auto !important; /* Let Owl calculate width */
height: auto !important;
}
/* Owl items - proper carousel width (let Owl control it) */
#featured-properties .owl-carousel .owl-stage .owl-item {
float: left !important; /* CRITICAL: Owl Carousel v1 uses float layout */
width: 25% !important; /* Force uniform width: 4 items per view */
min-width: 0 !important;
margin-bottom: 0 !important; /* Remove margin causing misalignment */
padding: 0 10px !important; /* Consistent spacing between cards */
clear: none !important; /* Allow items to float side-by-side */
}
/* Override Owl Carousel's dynamic width setting - FIX: hidden to show exactly 4 cards */
#featured-properties .owl-carousel .owl-stage-outer {
overflow: hidden !important; /* FIX: was visible, now hidden to show exactly 4 cards */
}
/* CRITICAL: Override .owl-carousel .item { margin-left: 30px; } */
#featured-properties .owl-carousel .item,
#featured-properties .owl-carousel li.item,
#featured-properties .owl-carousel .owl-item .item {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* List items (li.item.property-block) - The card container itself */
/* UPDATED: Only apply AFTER Owl initializes to prevent vertical stacking */
#featured-properties ul.owl-carousel.owl-loaded li.item.property-block {
display: block !important;
float: none !important;
visibility: visible !important;
opacity: 1 !important;
box-sizing: border-box !important;
padding: 0 15px !important;
list-style: none !important;
width: 50% !important;
max-width: 50% !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 30px !important;
position: relative !important;
}
/* ============================================================
GREAT OFFERS CARD DESIGN - APPLY DESIRED STYLING (lines 773-849)
Scoped to #featured-properties to avoid affecting Editor's Picks
============================================================ */
/* Card container - DESIRED STYLE from lines 778-784 */
#featured-properties li.item.property-block {
position: relative !important;
border-radius: 18px !important; /* From line 780 */
overflow: hidden !important;
background: #fff !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
list-style: none !important;
transition: all 0.35s cubic-bezier(.25,.8,.25,1) !important; /* From line 783 */
}
/* Full card click - entire card is one link (from lines 787-794) - FIX: Remove height constraint */
#featured-properties .property-block .property-card-link {
display: flex !important; /* Changed from block to flex */
flex-direction: column !important;
width: 100% !important;
height: auto !important; /* Changed from 100% to auto */
min-height: auto !important;
text-decoration: none !important;
color: inherit !important;
cursor: pointer !important;
overflow: visible !important; /* Prevent clipping */
}
#featured-properties .property-block .property-card-link:hover {
text-decoration: none !important;
color: inherit !important;
}
/* Apple hover: soft shadow, micro zoom (from lines 818-821) */
#featured-properties li.item.property-block:hover {
transform: translateY(-4px) scale(1.012) !important; /* From line 819 */
box-shadow: 0 16px 35px rgba(0,0,0,0.12) !important; /* From line 820 */
}
/* Glass blur overlay (from lines 834-842) */
#featured-properties li.item.property-block:hover::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
backdrop-filter: blur(3px) !important;
opacity: 0.12 !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Image zoom transition (from lines 824-827) */
#featured-properties .property-featured-image img,
#featured-properties .property-featured-image {
transition: transform 0.45s ease !important; /* From line 826 */
}
/* Image zoom on hover (from lines 829-831) */
#featured-properties li.item.property-block:hover .property-featured-image img {
transform: scale(1.04) !important; /* From line 830 */
}
/* Image container - DESIRED STYLE: Use aspect-ratio for elegant, responsive design */
#featured-properties li.item.property-block .property-featured-image {
width: 100% !important;
aspect-ratio: 16/10 !important; /* DESIRED: More elegant ratio like second image */
height: auto !important;
max-height: none !important;
min-height: none !important;
overflow: hidden !important;
position: relative !important;
display: block !important;
border-top-left-radius: 18px !important;
border-top-right-radius: 18px !important;
}
/* Override ANY inline style attributes on image container */
#featured-properties li.item.property-block .property-featured-image[style] {
height: auto !important; /* Use aspect-ratio instead */
max-height: none !important;
min-height: none !important;
aspect-ratio: 16/10 !important;
}
/* Images inside - DESIRED STYLE: Use aspect-ratio */
#featured-properties li.item.property-block .property-featured-image img,
#featured-properties li.item.property-block .property-featured-image .offers-img,
#featured-properties li.item.property-block img.offers-img {
width: 100% !important;
height: 100% !important; /* Fill container with aspect-ratio */
max-height: none !important;
min-height: none !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.45s ease !important;
}
/* Image hover zoom effect - DESIRED STYLE */
#featured-properties li.item.property-block:hover .property-featured-image img,
#featured-properties li.item.property-block:hover .property-featured-image .offers-img {
transform: scale(1.04) !important;
}
/* Override inline styles on images */
#featured-properties li.item.property-block .property-featured-image img[style],
#featured-properties li.item.property-block img.offers-img[style] {
height: 100% !important; /* Use 100% to respect aspect-ratio */
max-height: none !important;
}
/* Property info section - DESIRED STYLE with proper padding */
#featured-properties li.item.property-block .property-info {
padding: 22px 22px 34px 22px !important; /* Increased bottom padding from 24px to 34px (1cm) to prevent clipping */
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
min-height: 180px !important;
overflow: visible !important; /* Prevent clipping */
}
/* Remove legacy Details button (from lines 845-849) */
#featured-properties .property-info .details,
#featured-properties .property-info .details-btn,
#featured-properties .property-info a[href*="details"] {
display: none !important;
}
/* Override ul li padding that conflicts */
#featured-properties ul.owl-carousel li.item.property-block {
padding: 0 10px !important;
margin-bottom: 0 !important;
}
/* Owl v1.3.3 Final Fix */
#featured-properties .owl-wrapper-outer {
overflow: hidden !important;
position: relative !important;
width: 100% !important;
}
#featured-properties .owl-wrapper {
width: auto !important;
display: block !important; /* CRITICAL: Owl Carousel v1 uses float layout, NOT flexbox */
transition: transform 0.5s ease !important;
}
#featured-properties .owl-item {
float: left !important;
width: auto !important;
display: block !important;
}
/* REMOVED: Hardcoded width breaks responsive layout - let Owl Carousel control width */
/* #featured-properties .item.property-block {
width: 490px !important;
margin-right: 20px !important;
flex-shrink: 0 !important;
} */
/* ============================================================
CRITICAL FIX: Prevent vertical stacking before Owl initializes
Hide items until Owl wraps them to prevent overflow breaking init
============================================================ */
/* BEFORE INITIALIZATION: Hide overflow and prevent stacking */
#featured-properties ul.owl-carousel {
overflow: hidden !important; /* CRITICAL: Hide stacked cards */
position: relative !important;
width: 100% !important;
}
/* BEFORE INITIALIZATION: Items must be visible for Owl to count them, but prevent stacking */
/* Use max-height and overflow to hide vertical stack visually while keeping items in DOM */
#featured-properties ul.owl-carousel:not(.owl-loaded) {
max-height: 700px !important; /* Increased from 400px to accommodate full card height (~596px) */
overflow: hidden !important; /* Hide overflow visually */
}
/* Items must be visible for Owl to detect and count them */
#featured-properties ul.owl-carousel:not(.owl-loaded) li.item {
display: list-item !important; /* Visible for Owl to count */
position: relative !important; /* Keep in document flow */
visibility: visible !important; /* Must be visible for Owl detection */
}
/* AFTER INITIALIZATION: Let Owl control visibility normally */
#featured-properties ul.owl-carousel.owl-loaded li.item {
position: static !important;
left: auto !important;
visibility: visible !important;
display: block !important; /* Owl will wrap in owl-item */
}
/* Items wrapped by Owl */
#featured-properties .owl-item li.item {
position: static !important;
left: auto !important;
visibility: visible !important;
}
/* Items inside owl-item (created by Owl after init) */
#featured-properties .owl-item li.item.property-block {
display: flex !important; /* Visible when wrapped by Owl */
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
}
/* ============================================================
FINAL FIX: Ensure items are visible for Owl to initialize
Remove ALL conflicting rules - items must be visible
============================================================ */
/* CRITICAL: Items MUST be visible for Owl Carousel to detect and count them */
/* This rule has highest specificity and comes LAST to override everything */
#featured-properties ul.owl-carousel li.item {
display: list-item !important; /* Visible for Owl to count */
visibility: visible !important; /* Must be visible for Owl detection */
position: relative !important; /* Keep in document flow */
}
/* Prevent vertical stacking visually with overflow hidden */
#featured-properties ul.owl-carousel:not(.owl-loaded) {
max-height: none !important; /* Do NOT limit height */
overflow: visible !important; /* Allow shadows and card bottoms */
}
/* After Owl initializes, let it control everything */
#featured-properties ul.owl-carousel.owl-loaded {
max-height: none !important;
overflow: visible !important;
}
/* Items wrapped by Owl after initialization */
#featured-properties .owl-item li.item {
display: block !important;
}
/* ============================================================
FINAL FIX: CARDS ALIGNMENT IN GREAT OFFERS CAROUSEL
Override all conflicting rules to ensure proper alignment
============================================================ */
/* Ensure proper card alignment - cards should fill owl-item width */
#featured-properties .owl-item li.item.property-block {
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important; /* Remove any margins causing misalignment */
padding: 0 !important; /* Remove padding that conflicts */
}
/* Ensure owl-item has proper spacing but no forced widths */
#featured-properties .owl-carousel .owl-item {
padding: 0 10px !important; /* Consistent spacing between cards */
width: auto !important; /* Let Owl Carousel control width */
float: none !important;
display: block !important;
}
/* Fix any overflow issues */
#featured-properties .owl-stage-outer {
overflow: hidden !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ============================================================
CRITICAL FIX: Override conflicting rules causing misalignment
Uses same selectors as problematic rules to ensure proper override
============================================================ */
/* Fix overflow - override line 12745 */
#featured-properties .owl-carousel .owl-stage-outer {
overflow: hidden !important; /* FIX: was visible, causes misalignment */
}
/* Fix width and margin - override lines 12768-12769 and 12773 */
/* This rule uses the exact same selector as the conflicting rule to override it */
#featured-properties ul.owl-carousel.owl-loaded li.item.property-block {
width: 100% !important; /* FIX: was 50% - this was forcing only 2 cards instead of 4 */
max-width: none !important; /* FIX: was 50% - this was limiting card width */
margin-bottom: 0 !important; /* FIX: was 30px - this was causing vertical misalignment */
}
/* ============================================================
ENSURE EXACTLY 4 CARDS ARE VISIBLE (NOT 5.4, NOT 2.5)
Owl Carousel with items: 4 will calculate each card as 25% width
============================================================ */
#featured-properties .owl-carousel {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
#featured-properties .owl-carousel .owl-stage-outer {
overflow: hidden !important; /* Hide partial 5th card - exactly 4 visible */
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure each card is properly sized - Owl calculates based on items: 4 */
#featured-properties .owl-carousel .owl-item {
width: auto !important; /* Let Owl Carousel calculate based on items: 4 = ~25% each */
flex-shrink: 0 !important;
flex-grow: 0 !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
/* Ensure cards fill their owl-item container */
#featured-properties .owl-item li.item.property-block {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Parent container - hide overflow to show exactly 4 cards */
#featured-properties .col-md-12 {
overflow: hidden !important;
width: 100% !important;
}
/* ============================================================
FINAL COMPREHENSIVE FIX: Great Offers Carousel
- Remove flexbox from Owl structure (fix dev tools highlighting)
- Ensure desired card design takes priority
- Exactly 4 cards visible
- Proper image/description/price badge sizing
- Cards slide by 4 at once
============================================================ */
/* ============================================================
1. FIX OWL STRUCTURE - Remove Flexbox (Use Float Layout)
============================================================ */
/* Remove flexbox from owl-stage - Owl v1.3.3 uses FLOAT layout */
#featured-properties .owl-stage {
display: block !important; /* NOT flex - Owl uses float */
position: relative !important;
width: auto !important; /* Owl calculates this */
overflow: visible !important;
}
/* Remove flexbox from owl-wrapper - Owl uses block layout */
#featured-properties .owl-wrapper {
display: block !important; /* NOT flex - Owl uses float */
position: relative !important;
width: auto !important; /* Owl calculates this */
transform-style: preserve-3d !important;
}
/* Ensure owl-item uses float (Owl's default layout method) */
#featured-properties .owl-carousel .owl-item {
display: block !important;
float: left !important; /* Owl's native layout */
position: relative !important;
width: auto !important; /* Owl sets inline width based on items: 4 */
min-width: 0 !important;
clear: none !important;
padding: 0 10px !important; /* Spacing between cards */
box-sizing: border-box !important;
}
/* Ensure stage-outer has proper isolation (fix dev tools highlighting) */
#featured-properties .owl-stage-outer {
display: block !important;
position: relative !important;
overflow: hidden !important; /* Hide partial 5th card */
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
z-index: 1 !important; /* Proper isolation layer */
}
/* ============================================================
2. ENSURE DESIRED CARD DESIGN TAKES PRIORITY
============================================================ */
/* Card container - desired design (from lines 12277-12290) - FIX: Change overflow to visible */
#featured-properties .owl-item li.item.property-block {
position: relative !important;
border-radius: 18px !important;
overflow: visible !important; /* Changed from hidden to visible to prevent clipping */
background: #fff !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.06) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
height: auto !important; /* Changed from 100% to auto to allow expansion */
min-height: auto !important;
width: 100% !important; /* Fill owl-item container */
max-width: 100% !important;
list-style: none !important;
transition: all 0.35s cubic-bezier(.25,.8,.25,1) !important;
box-sizing: border-box !important;
overflow: visible !important; /* Prevent clipping */
}
/* Card hover effect - desired design */
#featured-properties .owl-item li.item.property-block:hover {
transform: translateY(-4px) scale(1.012) !important;
box-shadow: 0 16px 35px rgba(0,0,0,0.12) !important;
}
/* Card link wrapper - FIX: Remove height constraint for owl-item */
#featured-properties .owl-item .property-block .property-card-link {
display: flex !important; /* Changed from block to flex */
flex-direction: column !important;
width: 100% !important;
height: auto !important; /* Changed from 100% to auto */
min-height: auto !important;
text-decoration: none !important;
color: inherit !important;
cursor: pointer !important;
overflow: visible !important; /* Prevent clipping */
}
/* ============================================================
3. IMAGE - Desired Design (aspect-ratio 16/10)
============================================================ */
/* Image container - desired design (from lines 12308-12317) */
#featured-properties .owl-item li.item.property-block .property-featured-image {
width: 100% !important;
aspect-ratio: 16/10 !important; /* Desired elegant ratio */
height: auto !important;
border-top-left-radius: 18px !important;
border-top-right-radius: 18px !important;
overflow: hidden !important;
flex-shrink: 0 !important;
margin-bottom: 0 !important;
position: relative !important;
display: block !important;
}
/* Override ANY inline styles on image container */
#featured-properties .owl-item .property-featured-image[style] {
height: auto !important; /* Use aspect-ratio instead */
aspect-ratio: 16/10 !important;
}
/* Images inside - desired design */
#featured-properties .owl-item .property-featured-image img,
#featured-properties .owl-item .property-featured-image .offers-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.45s ease !important;
}
/* Image hover zoom - desired design */
#featured-properties .owl-item li.item.property-block:hover .property-featured-image img,
#featured-properties .owl-item li.item.property-block:hover .property-featured-image .offers-img {
transform: scale(1.04) !important;
}
/* ============================================================
4. DESCRIPTION BOX - Desired Design (padding 22px 22px 24px 22px)
============================================================ */
/* Description area - desired design (from lines 12337-12343) */
#featured-properties .owl-item li.item.property-block .property-info {
padding: 22px 22px 24px 22px !important; /* Desired padding */
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
min-height: 180px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Title styling - desired design */
#featured-properties .owl-item .property-info h2,
#featured-properties .owl-item .property-info h3,
#featured-properties .owl-item .property-info h4,
#featured-properties .owl-item .property-info .title {
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.30 !important;
margin: 0 0 10px 0 !important;
color: #0f1d40 !important;
}
/* Location text styling - desired design */
#featured-properties .owl-item .property-info .location {
margin-bottom: 14px !important;
font-size: 14px !important;
color: #6b7280 !important;
display: block !important;
}
/* Property info list (Bedrooms, Bathrooms, Sq Mt) - desired design */
#featured-properties .owl-item .property-info .prop-info {
list-style: none !important;
padding: 0 !important;
margin: 8px 0 !important;
font-size: 14px !important;
}
#featured-properties .owl-item .property-info .prop-info li {
margin: 6px 0 !important;
display: flex !important;
align-items: center !important;
}
#featured-properties .owl-item .property-info .prop-info .label {
display: none !important; /* Hide label - using icons instead */
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* CRITICAL FIX: Force span.value to be visible in owl carousel */
#featured-properties .owl-item .property-info .prop-info .value,
#featured-properties .owl-item .property-block .property-info .prop-info .value,
#featured-properties .owl-item li.item.property-block .property-info .prop-info .value {
display: inline-block !important;
float: none !important;
width: auto !important;
min-width: auto !important;
color: #222 !important;
overflow: visible !important;
height: auto !important;
line-height: normal !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: normal !important;
margin: 0 !important;
padding: 0 !important;
}
/* ============================================================
5. PRICE BADGE - Desired Design (green badge)
============================================================ */
/* Green price badge - desired design (from lines 12389-12403) */
#featured-properties .owl-item .green-price-badge {
position: relative !important;
z-index: 1 !important;
pointer-events: none !important;
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important;
border-radius: 12px !important;
padding: 8px 16px !important;
font-weight: 600 !important;
font-size: 15px !important;
text-align: center !important;
margin-top: 12px !important;
text-decoration: none !important;
display: inline-block !important;
}
/* Price wrapper positioning - desired design */
#featured-properties .owl-item .property-price-wrapper,
#featured-properties .owl-item .property-info .price {
margin-top: auto !important;
padding-top: 18px !important;
margin-bottom: 12px !important;
}
/* ============================================================
6. ENSURE EXACTLY 4 CARDS VISIBLE - No Partial 5th Card
============================================================ */
/* Container - ensure proper width calculation */
#featured-properties .owl-carousel {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
display: block !important;
position: relative !important;
}
/* Hide overflow to show exactly 4 cards (no partial 5th) */
#featured-properties .owl-stage-outer {
overflow: hidden !important; /* Critical: Hide partial 5th card */
width: 100% !important;
}
/* Ensure Owl calculates correct item width for 4 items */
#featured-properties .owl-carousel .owl-item {
width: auto !important; /* Owl sets inline width = container_width / 4 */
min-width: 0 !important;
max-width: 25% !important; /* Force max 25% = 4 items */
}
/* ============================================================
7. OVERRIDE ALL CONFLICTING RULES - Ensure Clean Regulations
============================================================ */
/* Override any conflicting flexbox rules */
#featured-properties .owl-wrapper {
display: block !important; /* NOT flex */
}
#featured-properties .owl-stage {
display: block !important; /* NOT flex */
}
/* Override any conflicting width rules */
#featured-properties .owl-item li.item.property-block {
width: 100% !important; /* Fill owl-item */
max-width: 100% !important;
}
/* Override any conflicting padding/margin on cards */
#featured-properties ul.owl-carousel li.item.property-block {
padding: 0 !important; /* Remove conflicting padding */
margin: 0 !important; /* Remove conflicting margin */
}
/* Cards inside owl-item get spacing from owl-item padding, not card padding */
#featured-properties .owl-item {
padding: 0 10px !important; /* Spacing between cards */
}
/* ============================================================
8. FINAL ISOLATION - Fix Dev Tools Highlighting Issue
============================================================ */
/* Ensure each layer is properly isolated (fixes purple highlighting) */
#featured-properties .owl-stage-outer {
position: relative !important;
z-index: 1 !important;
}
#featured-properties .owl-wrapper {
position: relative !important;
z-index: auto !important;
}
#featured-properties .owl-item {
position: relative !important;
z-index: auto !important;
}
#featured-properties .owl-item li.item.property-block {
position: relative !important;
z-index: auto !important;
}
/* (Reverted Owl v1.31 layout fix block on user request) */
/* --- CRITICAL FIX: OwlCarousel v1 must not use flexbox --- */
#featured-properties .owl-stage,
#featured-properties .owl-wrapper,
#featured-properties .owl-carousel .owl-stage,
#featured-properties .owl-carousel .owl-wrapper {
display: block !important;
width: auto !important;
}
/* --- Force correct item layout (4 items visible) --- */
#featured-properties .owl-item {
float: left !important;
width: 25% !important;
min-width: 0 !important;
clear: none !important; /* CRITICAL: Allow items to float side-by-side */
position: relative !important;
box-sizing: border-box !important;
}
/* CRITICAL: Ensure wrapper expands for all items */
#featured-properties .owl-wrapper {
width: auto !important;
max-width: none !important;
display: block !important; /* NOT flex */
}
/* CRITICAL: Clear float fix for wrapper */
#featured-properties .owl-wrapper::after {
content: "" !important;
display: block !important;
clear: both !important;
visibility: hidden !important;
height: 0 !important;
}
/* ============================================
GREAT OFFERS CAROUSEL - STRICT ISOLATION
Prevent Owl wrapper from extending beyond section
============================================ */
/* CRITICAL: Isolate great-offers-wrapper from sections below */
.great-offers-wrapper {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important; /* Only clip horizontally for carousel */
overflow-y: visible !important; /* Allow vertical expansion to show full cards */
contain: none !important; /* REMOVED: contain: layout style paint was preventing vertical expansion */
isolation: isolate !important; /* Create stacking context */
box-sizing: border-box !important;
height: auto !important; /* Allow expansion to fit full card height */
min-height: auto !important;
}
/* CRITICAL: Strictly contain all Owl wrapper elements within great-offers-wrapper */
.great-offers-wrapper .owl-carousel {
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow-x: hidden !important; /* Only clip horizontally for carousel */
overflow-y: visible !important; /* Allow vertical expansion */
contain: none !important; /* REMOVED: contain: layout style paint was preventing vertical expansion */
box-sizing: border-box !important;
height: auto !important; /* Allow expansion to fit full card height */
min-height: auto !important;
}
.great-offers-wrapper .owl-wrapper-outer {
width: 1140px !important;
max-width: 1140px !important;
overflow: hidden !important;
position: relative !important;
overflow-x: hidden !important; /* Only clip horizontally for carousel */
overflow-y: visible !important; /* Allow vertical expansion */
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
height: auto !important; /* Allow expansion to fit full card height */
min-height: auto !important;
}
.great-offers-wrapper .owl-stage-outer {
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow-x: hidden !important; /* Only clip horizontally for carousel */
overflow-y: visible !important; /* Allow vertical expansion */
margin: 0 !important;
padding: 0 !important;
left: 0 !important;
right: 0 !important;
box-sizing: border-box !important;
height: auto !important; /* Allow expansion to fit full card height */
min-height: auto !important;
}
.great-offers-wrapper .owl-wrapper {
width: auto !important; /* CRITICAL: Allow expansion for all 12 items */
max-width: none !important; /* CRITICAL: Remove constraint */
position: relative !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.great-offers-wrapper .owl-stage {
width: auto !important;
max-width: none !important;
position: relative !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
left: 0 !important;
box-sizing: border-box !important;
}
/* PREVENT: Owl wrapper-outer from extending beyond great-offers-wrapper */
/* BUT: owl-wrapper (inner) MUST expand for all 12 items */
#featured-properties .owl-wrapper-outer,
#featured-properties .owl-stage-outer {
max-width: 100% !important;
overflow-x: hidden !important; /* Keep horizontal clipping for carousel */
overflow-y: visible !important; /* Allow vertical expansion to show full cards */
box-sizing: border-box !important;
height: auto !important; /* Allow expansion to fit full card height */
min-height: auto !important;
contain: none !important; /* REMOVED: prevent containment that blocks expansion */
}
/* CRITICAL: owl-wrapper MUST expand to fit all items */
#featured-properties .owl-wrapper {
max-width: none !important; /* Allow expansion */
width: auto !important; /* Let Owl calculate based on items */
box-sizing: border-box !important;
}
/* ISOLATE: Ensure no width calculation from sections below */
#featured-properties {
position: relative !important;
overflow: visible !important;
contain: none !important; /* REMOVED: contain: layout style was preventing vertical expansion */
box-sizing: border-box !important;
height: auto !important; /* Allow section to expand to fit full card height */
min-height: auto !important;
}
#featured-properties .container {
position: relative !important;
overflow: visible !important;
max-width: 1170px !important; /* Bootstrap container max-width */
width: 100% !important;
box-sizing: border-box !important;
}
#featured-properties .row {
position: relative !important;
overflow: hidden !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* CRITICAL: Clip visible area to container width (4 cards visible),
but allow wrapper to expand for all 12 items internally */
.great-offers-wrapper .owl-stage-outer {
width: 100% !important;
max-width: 1170px !important;
overflow: hidden !important; /* Clip to show only 4 cards */
box-sizing: border-box !important;
}
/* CRITICAL: Carousel is now OUTSIDE container, so it can use full screen width for calculations */
/* But we need to constrain the visible viewport to container width and center it */
.great-offers-wrapper {
width: 100% !important;
position: relative !important;
overflow: hidden !important; /* Clip at wrapper boundary */
/* Center the carousel content to align with container above */
display: flex !important;
justify-content: center !important;
}
/* Constrain visible viewport to container width (1170px), but allow wrapper to expand */
.great-offers-wrapper .owl-carousel {
width: 100% !important;
max-width: 1170px !important; /* Match Bootstrap container max-width */
margin: 0 auto !important; /* Center the carousel */
}
.great-offers-wrapper .owl-stage-outer {
width: 100% !important;
max-width: 1170px !important; /* Match Bootstrap container max-width */
margin: 0 auto !important; /* Center the viewport */
overflow: hidden !important;
box-sizing: border-box !important;
}
/* wrapper-outer IS the viewport - must constrain width and clip (Owl v1.31) */
.great-offers-wrapper .owl-wrapper-outer {
width: 1140px !important;
max-width: 1140px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Inner wrapper/stage expands for all 12 items */
.great-offers-wrapper .owl-wrapper,
.great-offers-wrapper .owl-stage {
width: auto !important;
max-width: none !important;
}
/* ============================================================
CRITICAL FIX: Great Offers Carousel - Override ALL Conflicts
Must be at the END of file to override everything
============================================================ */
/* REMOVE ALL conflicting rules - use ONLY float layout */
#featured-properties .owl-carousel .owl-item,
#featured-properties .owl-item,
.great-offers-wrapper .owl-carousel .owl-item,
.great-offers-wrapper .owl-item {
/* CRITICAL: Owl Carousel v1 REQUIRES float:left */
float: left !important;
clear: none !important;
position: relative !important;
display: block !important;
/* REMOVE flexbox completely */
flex-shrink: unset !important;
flex-grow: unset !important;
flex-basis: unset !important;
/* Let Owl set width inline - but ensure consistent calculation */
width: auto !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* Ensure wrapper/stage use block layout (NOT flex) */
#featured-properties .owl-wrapper,
#featured-properties .owl-stage,
.great-offers-wrapper .owl-wrapper,
.great-offers-wrapper .owl-stage {
display: block !important;
width: auto !important;
max-width: none !important;
}
/* Force uniform item widths using pixel calculation - match heading width */
.great-offers-wrapper .owl-stage-outer {
width: 1140px !important; /* Match heading content width */
max-width: 1140px !important;
margin: 0 auto !important;
}
/* Calculate exact width: 1140px Γ· 4 = 285px per item (heading width Γ· 4) */
.great-offers-wrapper .owl-carousel .owl-item {
width: 285px !important;
min-width: 285px !important;
max-width: 285px !important;
padding: 0 !important;
box-sizing: border-box !important;
/* CRITICAL: Force float to work - remove any position absolute that might interfere */
position: relative !important;
left: auto !important;
right: auto !important;
}
/* CRITICAL: Ensure section alignment with container below */
#featured-properties {
margin: 0 !important;
padding: 0 !important;
}
.great-offers-wrapper {
margin: 0 auto !important;
padding: 0 !important;
max-width: 100% !important;
}
/* CRITICAL: Ensure section alignment with container below */
#featured-properties {
margin: 0 !important;
padding: 0 !important;
}
.great-offers-wrapper {
margin: 0 auto !important;
padding: 0 !important;
max-width: 100% !important;
}
/* CRITICAL: Stop owl wrapper at great-offers-wrapper boundary */
.great-offers-wrapper {
overflow: hidden !important; /* Clip wrapper-outer at section boundary */
position: relative !important;
}
.great-offers-wrapper::after {
content: "" !important;
display: block !important;
clear: both !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* ============================================================
GREAT OFFERS β FINAL ALIGNMENT FIX (CSS-ONLY)
Root Cause: #featured-properties has max-width:1250px + owl-wrapper-outer has width:101%
Solution: Override to match Bootstrap container (1170px) exactly
============================================================ */
/* Step 1: Override #featured-properties max-width to match Bootstrap container */
@media (min-width: 1200px) {
#featured-properties {
max-width: 1170px !important; /* Override 1250px from line 1242 */
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Step 2: Override Owl theme's 101% width rule - force exact 1170px */
/* USE HIGHER SPECIFICITY to override #featured-properties rules */
#featured-properties .great-offers-wrapper .owl-carousel .owl-wrapper-outer,
.great-offers-wrapper .owl-carousel .owl-wrapper-outer {
width: 1140px !important; /* Match heading content width (1170px - 30px padding) */
max-width: 1140px !important;
margin-left: 0 !important; /* Remove auto - will be set in media query */
margin-right: auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Step 3: Ensure carousel root element matches heading width (1140px = 1170px - 30px padding) */
/* USE HIGHER SPECIFICITY to override #featured-properties rules */
#featured-properties .great-offers-wrapper .owl-carousel,
.great-offers-wrapper .owl-carousel {
width: 1140px !important; /* Match heading content width */
max-width: 1140px !important;
margin-left: 0 !important; /* Remove auto - will be set in media query */
margin-right: auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Step 4: Stage-outer must also be 1140px (viewport) to match heading */
/* USE HIGHER SPECIFICITY to override #featured-properties rules */
#featured-properties .great-offers-wrapper .owl-stage-outer,
.great-offers-wrapper .owl-stage-outer {
width: 1140px !important; /* Match heading content width */
max-width: 1140px !important;
margin-left: 0 !important; /* Remove auto - will be set in media query */
margin-right: auto !important;
padding: 0 !important; /* Override line 606 padding-right: 100px */
box-sizing: border-box !important;
overflow: hidden !important; /* CRITICAL: Hide overflow to prevent 5th card showing */
}
/* Step 5: Wrapper can expand for all items, but is clipped by stage-outer */
.great-offers-wrapper .owl-wrapper {
width: auto !important; /* Allow expansion for all 12 items */
max-width: none !important;
display: block !important;
float: none !important;
}
/* Step 6: Remove all padding/margin from items - exact 285px each (1140px Γ· 4) */
/* USE HIGHER SPECIFICITY to override #featured-properties rules */
#featured-properties .great-offers-wrapper .owl-item,
.great-offers-wrapper .owl-item {
padding: 0 !important;
margin: 0 !important;
width: 285px !important; /* 1140px (heading width) Γ· 4 = 285px per card */
min-width: 285px !important;
max-width: 285px !important;
float: left !important;
box-sizing: border-box !important;
}
/* Step 7: Belek alignment - flex centering */
.great-offers-wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
display: flex !important;
justify-content: center !important;
}
/* Step 8: Belek alignment - flex centering, carousel matches container */
@media (min-width: 1200px) {
/* Belek: flex centering instead of padding calc */
#featured-properties .great-offers-wrapper,
.great-offers-wrapper {
display: flex !important;
justify-content: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
position: relative !important;
}
#featured-properties .great-offers-wrapper .owl-carousel,
#featured-properties .great-offers-wrapper .owl-wrapper-outer,
#featured-properties .great-offers-wrapper .owl-stage-outer,
.great-offers-wrapper .owl-carousel,
.great-offers-wrapper .owl-wrapper-outer,
.great-offers-wrapper .owl-stage-outer {
margin-left: 0 !important;
margin-right: auto !important;
position: relative !important;
width: 1140px !important;
max-width: 1140px !important;
}
#featured-properties .great-offers-wrapper .owl-stage-outer,
.great-offers-wrapper .owl-stage-outer {
overflow: hidden !important;
clip-path: inset(0) !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
}
/* FINAL FIX: Ensure carousel doesn't overflow on left or right - force clipping */
/* USE HIGHER SPECIFICITY: Combine #featured-properties with .great-offers-wrapper */
#featured-properties .great-offers-wrapper {
overflow: hidden !important; /* Clip any overflow at wrapper level */
position: relative !important;
}
#featured-properties .great-offers-wrapper .owl-stage-outer,
.great-offers-wrapper .owl-stage-outer {
overflow: hidden !important;
position: relative !important;
/* Ensure exactly 1140px visible area - no more, no less */
max-width: 1140px !important;
width: 1140px !important;
padding-right: 0 !important; /* Override line 606 padding-right: 100px */
padding-left: 0 !important;
}
/* CRITICAL: Override ALL #featured-properties rules with higher specificity */
#featured-properties .great-offers-wrapper .owl-carousel,
#featured-properties .great-offers-wrapper .owl-wrapper-outer,
#featured-properties .great-offers-wrapper .owl-stage-outer {
width: 1140px !important;
max-width: 1140px !important;
margin-left: 0 !important; /* Will be set in media query */
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important; /* CRITICAL: Override line 606 padding-right: 100px */
overflow: hidden !important;
}
/* ULTRA-HIGH SPECIFICITY: Override conflicting #featured-properties rules from lines 606, 12424, 12647 */
#featured-properties .great-offers-wrapper .owl-stage-outer {
padding-right: 0 !important; /* Override line 606: padding-right: 100px */
padding-left: 0 !important;
width: 1140px !important;
max-width: 1140px !important;
overflow: hidden !important;
margin-left: 0 !important; /* Will be set in media query */
}
/* CRITICAL FIX: Prevent News/Blog sections from overlapping property cards */
/* Ensure property cards section has proper z-index and isolation */
/* CRITICAL: Override all conflicting rules - use highest specificity */
#featured-properties {
position: relative !important;
z-index: 10 !important; /* High z-index to stay above News/Blog */
isolation: isolate !important; /* Create new stacking context */
overflow: visible !important; /* Allow content to show */
margin-bottom: 80px !important; /* INCREASED: More space below to allow cards to unfold fully */
padding-bottom: 0 !important;
}
/* Override conflicting rule at line 1501 */
.home #featured-properties {
margin-bottom: 80px !important; /* Override line 1501: margin-bottom: 10px */
}
/* Ensure News/Blog sections don't overlap - visible and properly spaced */
/* FIX: Make News/Blog sections visible again */
.home .posts-archive,
.home .page-section:has(.posts-archive),
.home .page-section .container .row .col-md-6.posts-archive,
.posts-archive,
.page-section:has(.posts-archive),
.page-section .container .row .col-md-6.posts-archive {
position: relative !important;
z-index: 5 !important; /* Higher than 1 but still below property cards (z-index: 10) */
isolation: auto !important; /* Remove isolation that was hiding content */
margin-top: 50px !important;
padding-top: 20px !important;
overflow: visible !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure News/Blog section containers don't extend upward */
.home .page-section:has(.posts-archive),
.page-section:has(.posts-archive) {
margin-top: 50px !important;
padding-top: 0 !important;
position: relative !important;
z-index: 5 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
isolation: auto !important;
}
/* Ensure News/Blog content is visible */
.posts-archive .post,
.posts-archive article,
.posts-archive .block-heading,
.col-md-6.posts-archive .block-heading {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Override conflicting rule at line 1465 that removes margin */
.home .page-section:has(.posts-archive) {
margin-bottom: auto !important; /* Allow normal margin */
}
/* Ensure carousel cards are visible above News/Blog sections */
#featured-properties .great-offers-wrapper,
#featured-properties .owl-carousel,
#featured-properties .owl-stage-outer {
position: relative !important;
z-index: 11 !important; /* Even higher to ensure visibility */
}
/* Prevent News/Blog cards from overlapping property cards */
.posts-archive .post,
.posts-archive article.post,
.col-md-6.posts-archive {
position: relative !important;
z-index: 1 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* CRITICAL: Allow Owl Carousel to use transform for sliding (autoplay & swipe) */
/* DO NOT add any transform restrictions - Owl Carousel v1 needs full control */
.great-offers-wrapper .owl-wrapper {
position: relative !important;
/* Owl Carousel controls transform, left, and margin-left */
/* DO NOT override transform, left, or margin-left - it breaks sliding */
}
/* Ensure touch events work for swipe functionality */
.great-offers-wrapper .owl-carousel,
.great-offers-wrapper .owl-stage-outer {
touch-action: pan-y !important; /* Allow vertical touch, Owl handles horizontal */
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/* ============================================================
FINAL OVERRIDE: Force proper spacing between Property Cards and News/Blog
Highest specificity to override ALL conflicting rules
============================================================ */
/* CRITICAL: Increase space below property cards section - OVERRIDE ALL CONFLICTS */
.home #featured-properties,
#featured-properties {
margin-bottom: 80px !important; /* Large space to allow cards to unfold fully */
padding-bottom: 0 !important;
}
/* CRITICAL: Push News/Blog sections much further down - OVERRIDE ALL CONFLICTS */
.home .page-section:has(.posts-archive),
.home .page-section .container .row .col-md-6.posts-archive,
.home .posts-archive,
.page-section:has(.posts-archive),
.page-section .container .row .col-md-6.posts-archive,
.posts-archive {
margin-top: 80px !important; /* INCREASED: Push down significantly (60px = ~6cm) */
}
/* CRITICAL: Increase spacer-20 div height after featured-properties */
#featured-properties + .spacer-20 {
height: 60px !important; /* INCREASED: Create space between sections */
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* CRITICAL: Override conflicting rules that remove margins */
.home .page-section:has(.posts-archive) {
margin-top: 0px !important; /* Set to 0px to remove top spacing */
padding-top: 0px !important; /* Also remove top padding */
margin-bottom: auto !important;
}
/* Minimize gap between featured-properties and News/Blog section */
#featured-properties + .page-section,
#featured-properties ~ .page-section:has(.posts-archive) {
margin-top: 0px !important;
padding-top: 0px !important;
}
/* Override line 1501 rule that sets margin-bottom: 10px */
.home #featured-properties {
margin-bottom: 3px !important; /* Reduced by 7px more (was 10px, now 3px) */
}
/* Override line 1465 rule that removes margins */
.home .page-section:has(.posts-archive) {
margin-top: 0px !important; /* Changed from 60px to remove gap */
margin-bottom: auto !important;
}
/* ============================================================
ABSOLUTE FINAL FIX: Force span.value to be visible
Maximum specificity - override EVERYTHING including inline styles
============================================================ */
#featured-properties li.item.property-block a.property-card-link div.property-info ul.prop-info li span.value,
#featured-properties .property-block .property-info ul.prop-info li span.value,
#featured-properties .property-info .prop-info li .value,
#featured-properties .owl-item .property-block .property-info ul.prop-info li span.value,
#featured-properties .owl-item li.item.property-block a.property-card-link div.property-info ul.prop-info li span.value,
.property-block .property-info ul.prop-info li span.value,
.property-block .property-info ul li span.value {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
min-width: auto !important;
max-width: none !important;
height: auto !important;
color: #222 !important;
font-size: 14px !important;
line-height: normal !important;
overflow: visible !important;
float: none !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
font-weight: normal !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* ============================================================
CRITICAL FIX: Prevent emoji icon clipping in property cards
Increase line-height and ensure emojis display fully
============================================================ */
#featured-properties .property-info .prop-info li {
min-height: 36px !important; /* Increased from 32px to accommodate full emoji */
line-height: 1.6 !important; /* Increased line-height for emoji visibility */
padding: 4px 0 !important; /* Add vertical padding */
}
/* Ensure value spans have enough space for emoji + text */
#featured-properties .property-info .prop-info li .value,
.property-block .property-info ul li span.value {
line-height: 1.6 !important; /* Match parent line-height */
min-height: 24px !important; /* Ensure minimum height for emoji */
padding: 2px 0 !important; /* Add vertical padding */
vertical-align: middle !important;
}
/* Ensure ::before pseudo-elements (emojis) are fully visible */
#featured-properties .property-info .prop-info li .value:before,
.property-block .property-info ul li span:not(.label):before {
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
font-size: 20px !important; /* Larger emoji size */
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-right: 8px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ============================================================
CRITICAL FIX: Remove height constraints from Owl Carousel wrappers
Fixes clipping of property card content (bed icons, values)
============================================================ */
/* AFTER INITIALIZATION: Remove height constraint from carousel */
#featured-properties ul.owl-carousel.owl-loaded,
.great-offers-wrapper ul.owl-carousel.owl-loaded {
max-height: none !important; /* Remove 400px constraint */
height: auto !important; /* Allow carousel to expand to fit cards */
min-height: auto !important; /* Remove any min-height constraints */
overflow-x: hidden !important; /* Keep horizontal clipping for carousel */
overflow-y: visible !important; /* Allow vertical expansion to show full cards */
contain: none !important; /* REMOVED: prevent containment that blocks expansion */
}
/* Fix great-offers-wrapper height constraint - MUST allow vertical expansion */
.great-offers-wrapper {
height: auto !important; /* Remove 400px constraint - allow vertical expansion */
min-height: auto !important; /* Allow expansion */
max-height: none !important; /* Remove max-height constraint */
overflow-x: hidden !important; /* Keep horizontal clipping for carousel */
overflow-y: visible !important; /* Allow vertical expansion to show full cards */
contain: none !important; /* REMOVED: prevent containment that blocks expansion */
}
/* Fix owl-wrapper-outer - allow vertical expansion but keep horizontal clipping */
/* CRITICAL: height:auto allows container to expand to fit tallest card */
.great-offers-wrapper .owl-wrapper-outer,
#featured-properties .owl-wrapper-outer {
height: auto !important; /* Allow vertical expansion to fit card height */
min-height: auto !important; /* Remove height constraints */
max-height: none !important; /* Remove max-height constraints */
overflow-x: hidden !important; /* Keep horizontal clipping for carousel */
overflow-y: visible !important; /* Allow vertical expansion to show full cards */
contain: none !important; /* REMOVED: prevent containment that blocks expansion */
}
/* Fix owl-carousel container height - MUST expand to fit card height */
.great-offers-wrapper .owl-carousel,
#featured-properties .owl-carousel {
height: auto !important; /* Allow vertical expansion to fit card height */
min-height: auto !important; /* Remove height constraints */
max-height: none !important; /* Remove max-height constraints - CRITICAL FIX */
overflow-x: hidden !important; /* Keep horizontal clipping for carousel */
overflow-y: visible !important; /* Allow vertical expansion to show full cards */
contain: none !important; /* REMOVED: prevent containment that blocks expansion */
}
/* Ensure owl-stage-outer allows vertical expansion */
.great-offers-wrapper .owl-stage-outer,
#featured-properties .owl-stage-outer {
height: auto !important; /* Allow vertical expansion to fit card height */
min-height: auto !important; /* Remove height constraints */
max-height: none !important; /* Remove max-height constraints */
overflow-x: hidden !important; /* Keep horizontal clipping for carousel */
overflow-y: visible !important; /* Allow vertical expansion to show full cards */
contain: none !important; /* REMOVED: prevent containment that blocks expansion */
}
/* Ensure owl-wrapper allows vertical expansion */
.great-offers-wrapper .owl-wrapper,
#featured-properties .owl-wrapper {
height: auto !important; /* Allow vertical expansion */
min-height: auto !important; /* Remove height constraints */
}
/* Pull News/Blog content up by 4px within the page-section */
#featured-properties ~ .page-section .posts-archive,
.home #featured-properties + .page-section .posts-archive {
margin-top: -4px !important;
}
/* Prevent bedrooms from wrapping to 2 lines */
#featured-properties .property-info .prop-info li:nth-child(1) .value,
.property-block .property-info .prop-info li:nth-child(1) .value {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Prevent square meters from wrapping to 2 lines */
#featured-properties .property-info .prop-info li:nth-child(3) .value,
.property-block .property-info .prop-info li:nth-child(3) .value {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ============================================
MOBILE FIX: Great Offers Carousel - Show exactly 1 item
============================================ */
@media (max-width: 479px) {
/* Ensure wrapper doesn't expand beyond viewport */
.great-offers-wrapper {
overflow: hidden !important;
width: 100% !important;
}
/* Constrain carousel container on mobile */
.great-offers-wrapper .owl-carousel {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* CRITICAL: Constrain stage-outer viewport to show exactly 1 item */
.great-offers-wrapper .owl-stage-outer {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* wrapper-outer viewport - 1 item on mobile */
.great-offers-wrapper .owl-wrapper-outer {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* Ensure each item takes full viewport width on mobile */
.great-offers-wrapper .owl-item {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Property block should fit within item */
.great-offers-wrapper .property-block {
width: 100% !important;
max-width: 100% !important;
}
/* ============================================
MOBILE HD IMAGE QUALITY FIX
Ensure images are rendered at full HD quality on mobile (for photos)
============================================ */
#featured-properties .property-featured-image img,
#featured-properties .property-featured-image .offers-img {
/* High-quality smooth rendering for photos */
image-rendering: -webkit-optimize-contrast !important;
image-rendering: auto !important;
-ms-interpolation-mode: bicubic !important;
/* Prevent browser compression - force full quality */
-webkit-image-rendering: optimizeQuality !important;
/* Hardware acceleration for smooth rendering */
-webkit-transform: translateZ(0) scale(1) !important;
transform: translateZ(0) scale(1) !important;
/* Prevent subpixel rendering issues */
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
/* Ensure full-size images are used - no size constraints */
max-width: none !important;
width: 100% !important;
height: 100% !important;
/* Force high-resolution images for retina displays */
image-resolution: from-image 300dpi !important;
-webkit-image-resolution: from-image 300dpi !important;
/* Prevent any scaling that degrades quality */
object-fit: cover !important;
/* Ensure images load at full quality */
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
}
/* ============================================
MOBILE HD IMAGE QUALITY FIX - All Mobile Sizes
Ensure HD quality on all mobile devices (up to 768px)
============================================ */
@media (max-width: 768px) {
#featured-properties .property-featured-image img,
#featured-properties .property-featured-image .offers-img {
/* Force high-quality image rendering on all mobile devices */
image-rendering: -webkit-optimize-contrast !important;
image-rendering: auto !important;
-ms-interpolation-mode: bicubic !important;
/* Prevent browser compression */
-webkit-image-rendering: optimizeQuality !important;
/* Hardware acceleration */
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
/* Ensure full-size images load - no compression */
max-width: none !important;
width: 100% !important;
height: 100% !important;
/* High resolution for retina displays */
image-resolution: from-image 300dpi !important;
-webkit-image-resolution: from-image 300dpi !important;
object-fit: cover !important;
/* Prevent quality degradation from scaling */
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
}
/* ============================================
HERO SLIDER: Remove navigation arrows
============================================ */
.site-showcase .hero-slider.flexslider .flex-direction-nav,
.site-showcase .hero-slider.flexslider .flex-direction-nav a {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ============================================================
LUXURY OVERLAP FIX β SEARCH BAR POSITIONING OVER HERO (Belek)
DESKTOP ONLY - NOT FOR MOBILE/TABLET
============================================================ */
@media (min-width: 992px) {
/* Pull entire search section up to overlap hero bottom (Belek layout) */
body.home .site-showcase + .page-section.desktop-hero-system {
margin-top: -180px !important;
position: relative !important;
z-index: 10 !important;
}
/* ============================================
LUXURY SEARCH MODULE β PERFECT OVERLAP LEVEL
============================================ */
.search-luxury-wrapper {
margin-top: -105px !important; /* Additional pull for search bar */
position: relative !important;
z-index: 50 !important;
}
/* Ensure inner block has spacing */
.search-luxury-wrapper .site-search-module {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
}
/* ============================================
HERO CARD β MAX COMPACT PREMIUM VERSION
FINAL OVERRIDE - HIGHEST SPECIFICITY
============================================ */
@media (min-width: 992px) {
/* Main hero card container - FIXED SELECTOR (both classes on same element) */
.hero-caption.hero-right {
padding: 18px 22px !important; /* smaller padding */
max-width: 340px !important; /* 420 β 340 */
width: 340px !important;
row-gap: 6px !important; /* reduce spacing */
border-radius: 10px !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
background-color: rgba(255,255,255,0.06) !important;
box-shadow: 0 12px 30px rgba(0,0,0,0.16) !important;
}
/* Title */
.hero-caption.hero-right h2,
.hero-caption.hero-right .hero-title {
font-size: 26px !important;
line-height: 1.22 !important;
margin-bottom: 4px !important;
}
/* City name */
.hero-caption.hero-right .hero-city {
font-size: 15px !important;
margin-bottom: 6px !important;
}
/* Price badge */
.hero-caption.hero-right .hero-price {
height: 46px !important; /* thinner badge */
font-size: 18px !important;
padding: 0 18px !important;
margin-top: 2px !important;
margin-bottom: 6px !important;
}
/* View Details button */
.hero-caption.hero-right .hero-btn,
.hero-caption.hero-right a.btn {
height: 44px !important;
font-size: 16px !important;
padding: 0 18px !important;
margin-top: 4px !important;
}
}
/* ===========================================
RESTORE VISIBILITY - Bootstrap-select button only (NOT native select)
Native select must stay HIDDEN - bootstrap-select creates the visible button
=========================================== */
.site-search-module select.selectpicker {
display: none !important;
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.site-search-module .bootstrap-select {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
.site-search-module .bootstrap-select > .dropdown-toggle {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* ===========================================
APPLE-STYLE OVERRIDE - FINAL FORCE
Maximum specificity to override ALL Bootstrap defaults
=========================================== */
/* Force native select styling - OVERRIDE EVERYTHING */
.site-search-module form .form-group .row select.form-control.input-lg.selectpicker,
.site-search-module .container .site-search-module-inside form select.form-control.input-lg.selectpicker {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
color: #222 !important;
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid #DDD !important;
border-radius: 8px !important;
padding: 10px 36px 10px 14px !important;
min-height: 44px !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
/* Force Bootstrap Select toggle button styling */
.site-search-module .bootstrap-select.btn-group .btn.dropdown-toggle.selectpicker,
.site-search-module form .bootstrap-select.btn-group .btn.dropdown-toggle {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
color: #222 !important;
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid #DDD !important;
border-radius: 8px !important;
padding: 10px 36px 10px 14px !important;
min-height: 44px !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.site-search-module .bootstrap-select.btn-group .btn.dropdown-toggle:hover {
border-color: #bbb !important;
}
/* Force dropdown menu styling */
.site-search-module .bootstrap-select.btn-group .dropdown-menu,
.site-search-module .bootstrap-select.btn-group.open .dropdown-menu {
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
border: 1px solid #DDD !important;
background: #ffffff !important;
}
.site-search-module .bootstrap-select.btn-group .dropdown-menu.inner li a {
padding: 10px 14px !important;
font-size: 14px !important;
color: #222 !important;
}
.site-search-module .bootstrap-select.btn-group .dropdown-menu.inner li a:hover {
background-color: #f3f3f3 !important;
}
/* ===========================================
ULTIMATE APPLE-STYLE OVERRIDE - FINAL FORCE
Override ALL Bootstrap defaults including button styles
=========================================== */
/* Override Bootstrap button defaults for Bootstrap Select */
.site-search-module .bootstrap-select.btn-group .btn,
.site-search-module .bootstrap-select.btn-group .btn.dropdown-toggle,
.site-search-module .bootstrap-select.btn-group .btn.selectpicker {
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #222 !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
border: 1px solid #DDD !important;
border-color: #DDD !important;
border-radius: 8px !important;
border-width: 1px !important;
padding: 10px 36px 10px 14px !important;
min-height: 44px !important;
height: auto !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
text-shadow: none !important;
text-align: left !important;
vertical-align: middle !important;
cursor: pointer !important;
}
.site-search-module .bootstrap-select.btn-group .btn:hover,
.site-search-module .bootstrap-select.btn-group .btn.dropdown-toggle:hover {
border-color: #bbb !important;
background: #ffffff !important;
background-color: #ffffff !important;
color: #222 !important;
}
.site-search-module .bootstrap-select.btn-group .btn:focus,
.site-search-module .bootstrap-select.btn-group .btn.dropdown-toggle:focus,
.site-search-module .bootstrap-select.btn-group .btn:active,
.site-search-module .bootstrap-select.btn-group .btn.dropdown-toggle:active {
border-color: #bbb !important;
background: #ffffff !important;
background-color: #ffffff !important;
color: #222 !important;
outline: none !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(187, 187, 187, 0.1) !important;
}
/* Override Bootstrap dropdown menu defaults */
.site-search-module .bootstrap-select.btn-group .dropdown-menu {
border-radius: 8px !important;
border: 1px solid #DDD !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
background: #ffffff !important;
background-color: #ffffff !important;
padding: 4px 0 !important;
margin-top: 4px !important;
}
.site-search-module .bootstrap-select.btn-group .dropdown-menu.inner {
border-radius: 8px !important;
background: transparent !important;
}
.site-search-module .bootstrap-select.btn-group .dropdown-menu li a {
padding: 10px 14px !important;
font-size: 14px !important;
font-family: "Inter", "SF Pro Text", Arial, sans-serif !important;
color: #222 !important;
}
.site-search-module .bootstrap-select.btn-group .dropdown-menu li a:hover,
.site-search-module .bootstrap-select.btn-group .dropdown-menu li.selected a {
background-color: #f3f3f3 !important;
color: #222 !important;
}
/* =======================================
SPACING: EDITORS PICKS TO WHAT-WE-DO IMAGE
======================================= */
/* Force 10px spacing between editors picks and what-we-do image - HIGHEST PRIORITY */
body.home .page-section.what-we-do-section,
.home .page-section.what-we-do-section,
.page-section.what-we-do-section {
margin-top: 10px !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Override any conflicting rules */
body.home .main .content.full .page-section.what-we-do-section,
.home .main .content.full .page-section.what-we-do-section {
margin-top: 10px !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Also target by image src as fallback */
.page-section:has(img[src*="what-we-do-realbelek"]),
.page-section .show-desktop-only img[src*="what-we-do-realbelek"] {
margin-top: 0 !important; /* Image itself doesn't need margin */
}
.page-section:has(.show-desktop-only img[src*="what-we-do-realbelek"]) {
margin-top: 10px !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* =======================================
SPACING: WHAT-WE-DO IMAGE TO GREAT OFFERS HEADING
======================================= */
/* Force 60px spacing between image bottom and Great Offers heading - MAXIMUM PRIORITY */
body.home .main .content.full #featured-properties.page-section,
body.home #featured-properties.page-section,
.home .main .content.full #featured-properties.page-section,
.home #featured-properties.page-section,
#featured-properties.page-section {
margin-top: 25px !important;
padding-top: 0 !important;
}
/* Override ALL conflicting rules with maximum specificity */
body.home .page-section.what-we-do-section ~ .main #featured-properties,
body.home .what-we-do-section + .main #featured-properties,
.page-section.what-we-do-section ~ .main #featured-properties,
.what-we-do-section + .main #featured-properties,
.page-section.what-we-do-section ~ #featured-properties {
margin-top: 80px !important;
padding-top: 0 !important;
}
/* =======================================
FINAL OVERRIDE: 60PX SPACING - MAXIMUM PRIORITY
Must override ALL conflicting rules
======================================= */
body.home .main .content.full #featured-properties.page-section,
body.home #content .featured-blocks #featured-properties.page-section,
body.home #featured-properties.page-section,
body #featured-properties.page-section,
body.home #featured-properties,
body #featured-properties,
#featured-properties.page-section,
#featured-properties {
margin-top: 80px !important;
}
/* =======================================
SPACING: FEATURED PROPERTIES TO NEWS/BLOG
======================================= */
/* Force 60px spacing between featured properties bottom and news/blog heading */
body.home #featured-properties.page-section,
#featured-properties.page-section {
margin-bottom: 80px !important;
padding-bottom: 0 !important;
}
body.home .page-section.news-blog-section,
.home .page-section.news-blog-section,
.page-section.news-blog-section {
margin-top: 80px !important;
padding-top: 0 !important;
}
/* Target the news/blog section specifically */
body.home .page-section:has(.posts-archive .block-heading),
.page-section:has(.posts-archive .block-heading) {
margin-top: 80px !important;
}
/* Override conflicting rules with maximum specificity */
body.home #featured-properties + .page-section,
#featured-properties + .page-section,
body.home #featured-properties ~ .page-section:has(.posts-archive),
#featured-properties ~ .page-section:has(.posts-archive) {
margin-top: 80px !important;
padding-top: 0 !important;
}
/* =======================================
FINAL OVERRIDE: 60PX TO NEWS/BLOG
======================================= */
body.home #featured-properties.page-section,
#featured-properties.page-section {
margin-bottom: 80px !important;
}
body.home .page-section.news-blog-section,
.page-section.news-blog-section {
margin-top: 80px !important;
}
/* =======================================
SPACING: NEWS/BLOG HEADINGS TO ARTICLES
APPLE-STYLE MODERN & LUXURY SPACING
======================================= */
/* 24px spacing between heading and first article - APPLE STYLE */
body.home .posts-archive .block-heading,
.home .posts-archive .block-heading,
.posts-archive .block-heading,
body.home .page-section .posts-archive .block-heading,
.page-section .posts-archive .block-heading,
body.home .col-md-6.posts-archive .block-heading,
.col-md-6.posts-archive .block-heading {
margin-bottom: 24px !important;
padding-bottom: 0 !important;
}
/* 28px spacing between articles - APPLE STYLE LUXURY */
body.home .posts-archive .post,
body.home .posts-archive article.post,
.home .posts-archive .post,
.home .posts-archive article.post,
.posts-archive .post,
.posts-archive article.post,
body.home .page-section .posts-archive .post,
body.home .page-section .posts-archive article.post,
.page-section .posts-archive .post,
.page-section .posts-archive article.post,
body.home .col-md-6.posts-archive .post,
body.home .col-md-6.posts-archive article.post,
.col-md-6.posts-archive .post,
.col-md-6.posts-archive article.post {
margin-top: 0 !important;
margin-bottom: 28px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* =======================================
SPACING: NEWS/BLOG TO SEO TEXT SECTION
======================================= */
/* 30px spacing between news/blog articles and SEO text block */
body.home .page-section.news-blog-section,
.page-section.news-blog-section {
margin-bottom: 30px !important;
padding-bottom: 0 !important;
}
/* SEO Text Section - Responsive paragraph visibility */
.seo-text-paragraph-2 {
display: block !important; /* Visible on desktop by default */
}
@media (max-width: 767px) {
/* Hide paragraph 2 on mobile - show only first paragraph */
.seo-text-paragraph-2 {
display: none !important;
}
}
body.home .page-section.seo-text-section,
.page-section.seo-text-section,
body.home .page-section:has(.seo-text),
.page-section:has(.seo-text) {
margin-top: 15px !important; /* Reduced from 30px by 15px */
margin-bottom: 60px !important; /* Reduced spacing - negative margin on feature section will handle the rest */
background-color: transparent !important; /* Removed grey background */
padding: 30px 20px !important;
border-radius: 0 !important;
border-top: 1px solid #e5e5e7 !important; /* Thin hairline divider above */
border-bottom: 1px solid #e5e5e7 !important; /* Thin hairline divider beneath */
}
body.home .page-section.buying-guide-section,
.page-section.buying-guide-section,
body.home .page-section:has(.block-heading a[href*="guides"]),
.page-section:has(.block-heading a[href*="guides"]) {
margin-top: 30px !important;
padding-top: 0 !important;
}
/* =======================================
SPACING: BUYING GUIDE TO FOOTER
======================================= */
/* Increased spacing between Buying Guide section and footer */
body.home .page-section.buying-guide-section,
.page-section.buying-guide-section {
margin-bottom: 80px !important;
padding-bottom: 0 !important;
}
body.home .footer-wrapper,
.footer-wrapper {
margin-top: 80px !important;
}
/* Mobile override for location pages - Must override the 80px rule above */
@media (max-width: 767px) {
html.location-page .footer-wrapper,
html.location-page body .footer-wrapper,
body.location-page .footer-wrapper,
html.location-page div.footer-wrapper,
body.location-page div.footer-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* Mobile override for location pages - must come after general rule at line 16496 */
@media (max-width: 767px) {
html.location-page .footer-wrapper,
html.location-page body .footer-wrapper,
body.location-page .footer-wrapper,
html.location-page div.footer-wrapper,
body.location-page div.footer-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* =======================================
HEADER PREMIUM ALIGNMENT IMPROVEMENTS
======================================= */
/* Reduce top padding by 3-4px for tighter premium look */
.top-header,
header.site-header .top-header,
.site-header .top-header {
padding-top: 0 !important; /* Reduced from 2px (2px reduction) */
padding-bottom: 1px !important;
}
.middle-header {
padding-top: 1px !important; /* Reduced from 4px (3px reduction) */
padding-bottom: 4px !important;
}
/* Slight vertical alignment improvement for icons */
.header-flex {
align-items: center !important;
display: flex !important;
}
.header-phone,
.header-email {
display: flex !important;
align-items: center !important;
}
.header-phone i,
.header-email i {
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
}
.header-social,
.h-social-icons {
display: flex !important;
align-items: center !important;
}
.h-social-icons a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.h-social-icons i {
line-height: 1 !important;
display: inline-block !important;
vertical-align: middle !important;
}
/* Language flags vertical alignment */
.horiz-nav.flagpoints {
display: flex !important;
align-items: center !important;
}
.horiz-nav.flagpoints li {
display: flex !important;
align-items: center !important;
}
.horiz-nav.flagpoints li a {
display: flex !important;
align-items: center !important;
}
.horiz-nav.flagpoints img.flags {
display: block !important;
}
/* =======================================
HERO SLIDER HEIGHT +10% & SPACING FIX
======================================= */
/* Increase hero slider height by +10% */
.hero-slider,
.hero-slider .flex-viewport,
.hero-slider ul.slides,
.hero-slider .slides > li {
min-height: 570px !important; /* Increased by +10% from 518px */
height: 570px !important;
}
@media (min-width: 992px) {
.hero-slider .slides li {
height: 784px !important; /* Increased by +10% from 713px */
min-height: 784px !important;
}
}
/* Reduce white background below slider by 5px */
.site-showcase {
margin-bottom: -5px !important;
padding-bottom: 0 !important;
}
/* Ensure owl/flexslider container matches height */
.hero-slider.flexslider,
.hero-slider.flexslider .flex-viewport,
.hero-slider.flexslider .owl-wrapper,
.hero-slider.flexslider .owl-wrapper-outer {
height: 570px !important;
min-height: 570px !important;
}
@media (min-width: 992px) {
.hero-slider.flexslider,
.hero-slider.flexslider .flex-viewport,
.hero-slider.flexslider .owl-wrapper,
.hero-slider.flexslider .owl-wrapper-outer {
height: 784px !important;
min-height: 784px !important;
}
}
/* =======================================
HOMEPAGE INTRODUCTION TEXT IMPROVEMENTS
======================================= */
/* Simple padding and max-width for intro section */
.homepage-intro {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
box-sizing: border-box !important;
line-height: 1.65 !important; /* Softer luxury readability */
}
/* ==============================
INTRO SECTION LUXURY UPGRADE
(Typography + Spacing + Rhythm)
============================== */
.homepage-intro {
position: relative !important;
}
/* Add very light fade or 4% gray line before the text */
.homepage-intro::before {
content: "" !important;
display: block !important;
width: 100% !important;
height: 1px !important;
background: rgba(0, 0, 0, 0.04) !important; /* 4% gray line */
margin-bottom: 30px !important;
position: relative !important;
}
.homepage-intro p {
margin-bottom: 14px !important; /* Slightly tighter paragraph gap */
}
body.home .container:has(.homepage-intro),
.container:has(.homepage-intro) {
padding-bottom: 45px !important; /* More breathing room before next H2 */
}
/* ===============================
TOP PROPERTY SALES β ALIGNMENT FIX
Applies to Owl Carousel cards only (homepage)
=============================== */
/* Equalize image wrappers */
.editors-picks-wrapper .item .cover {
height: 240px !important; /* match your current responsive height */
display: block !important;
overflow: hidden !important;
}
/* Fix title height for perfect row alignment */
.editors-picks-wrapper .caption h4 {
min-height: 48px !important; /* enough for 2 lines */
display: flex !important;
align-items: flex-start !important;
line-height: 1.25 !important;
}
/* Fix subtitle (location) alignment */
.editors-picks-wrapper .caption h5,
.editors-picks-wrapper .caption .location {
min-height: 22px !important; /* prevent micro jumps */
display: block !important;
}
/* Fix price badge alignment */
.editors-picks-wrapper .gallery-price-badge {
bottom: 15px !important;
}
/* ============================
LUXURY POLISH FOR PROPERTY CARDS
============================ */
/* 1. Soft luxury shadow (barely visible, Apple-style) */
.editors-picks-wrapper .card,
#content .newHome .col-md-6 .property-box,
.property-listing-card {
box-shadow: 0 8px 28px rgba(0,0,0,0.08) !important;
transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
/* 2. On hover β subtle lift without grey overlay */
.editors-picks-wrapper .card:hover,
#content .newHome .col-md-6 .property-box:hover,
.property-listing-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
}
/* 3. Luxury title spacing (better readability) */
.editors-picks-wrapper .card .card-title,
#content .newHome .col-md-6 .property-box .property-title,
.property-listing-card .property-title {
line-height: 1.32 !important;
letter-spacing: -0.2px !important;
}
/* 4. Stronger image crispness */
.editors-picks-wrapper .card img,
#content .newHome .col-md-6 .property-box img,
.property-listing-card img {
image-rendering: -webkit-optimize-contrast !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
}
/* ===============================
HEADLINE CONTRAST INCREASE
News, Blog, Buying Guide, Great Offers headings
=============================== */
.posts-archive .block-heading h4 a,
.page-section .posts-archive .block-heading h4 a,
.block-heading h4 a[href="news"],
.block-heading h4 a[href="blogs"],
.block-heading h4 a[href="guides"],
#featured-properties .block-heading h2,
.block-heading h4,
#featured-properties .block-heading h4 span.heading-icon,
#featured-properties .block-heading h4 .heading-icon i {
color: #1a1a1a !important; /* Increased contrast from #333 to #1a1a1a */
font-weight: 600 !important; /* Slightly bolder for better visibility */
}
/* ===============================
GREAT OFFERS HEADING TO CARDS SPACING
=============================== */
#featured-properties .great-offers-wrapper {
margin-top: 10px !important; /* Space between heading and carousel cards */
}
/* ===============================
NEW 3-COLUMN SEO FOOTER STYLES
=============================== */
.footer-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
column-gap:45px;
row-gap:25px;
}
.site-footer-bottom1 .h4 {
margin:0 0 8px 0;
font-weight:600;
font-size:18px;
}
.site-footer-bottom1 ul {
padding-left:0;
list-style:none;
margin:0;
}
.site-footer-bottom1 ul li {
line-height:1.9;
}
.site-footer-bottom1 ul li a {
color:#333;
text-decoration:none;
}
.site-footer-bottom1 ul li a:hover {
opacity:0.6;
}
/* ============================================
FOOTER BADGES β PERFECT VERTICAL ALIGNMENT
============================================ */
.footer-badges {
display: flex !important;
justify-content: center !important;
align-items: center !important; /* vertical centering */
gap: 40px !important;
margin: 55px 0 10px 0 !important; /* Increased top margin by 15px (40px β 55px) */
}
/* Normalize badge heights */
.footer-badges img {
height: 50px !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Remove ANY previous alignment leaks */
.footer-badges a,
.footer-badges img {
vertical-align: middle !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* SOCIAL TEXT LINKS */
.footer-social {
text-align:center;
margin:20px 0 10px;
font-size:15px;
}
.footer-social a {
color:#333;
text-decoration:none;
}
.footer-social a:hover {
opacity:0.6;
}
/* COPYRIGHT */
.footer-copyright {
width: 100%;
background: #fff;
border-top: 1px solid rgba(0,0,0,0.08);
padding: 16px 0;
text-align: center;
font-size: 14px;
color: #555;
margin-top: 20px;
}
/* MOBILE */
@media (max-width:768px) {
/* REMOVED: Redundant footer-grid rule - using cleaner rule at line 16577 instead */
.footer-badges {
flex-direction:column;
gap:20px;
}
}
/* ============================================
FOOTER β LUXURY TIGHT LAYOUT + SEO OPTIMIZED
=============================================== */
/* Reduce general footer padding */
footer.footer,
.site-footer-bottom1 {
padding-top: 50px !important;
padding-bottom: 30px !important;
}
/* Tighter columns */
.footer-columns {
margin-bottom: 30px;
}
/* Headings β darker, premium, readable */
.footer-col h4,
.footer-head,
.footer-title {
color: #222 !important;
font-weight: 600;
margin-bottom: 18px;
letter-spacing: 0.3px;
}
/* Footer links */
footer a,
.site-footer-bottom1 a {
color: #555;
text-decoration: none;
transition: all 0.25s ease;
}
footer a:hover,
.site-footer-bottom1 a:hover {
color: #000;
text-decoration: underline;
}
/* Centered badge row spacing */
.footer-badges {
margin: 40px auto 15px auto !important; /* Increased top margin by 15px (25px β 40px) */
gap: 35px !important;
}
/* Reduce social row spacing */
.footer-social {
margin: 5px 0 15px 0 !important;
}
/* Copyright strip (luxury minimal) - styles consolidated above */
/* ================================
MOBILE OPTIMIZATION (CRITICAL)
================================= */
@media (max-width: 768px) {
footer.footer,
.site-footer-bottom1 {
padding-top: 35px !important;
padding-bottom: 25px !important;
}
.footer-columns {
margin-bottom: 20px;
}
.footer-badges {
margin: 20px auto 10px auto !important;
gap: 20px;
}
.footer-copyright {
padding: 14px 0;
}
}
/* ============================================================
FINAL FOOTER BADGE + SPACING FIX
============================================================ */
@media (max-width: 768px) {
/* Compress badge row properly */
.footer-badges,
.footer-logo-row {
padding: 5px 0 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
gap: 15px !important;
}
/* Force both logos to same height */
.footer-badges img,
.footer-logo-row img {
height: 28px !important;
width: auto !important;
max-height: 28px !important;
object-fit: contain !important;
}
/* Remove extra space on Company column */
.footer-col.company-col {
margin-bottom: 10px !important;
padding-bottom: 0 !important;
}
/* Make all lists have equal spacing */
.footer-col ul li {
margin-bottom: 8px !important;
}
}
/* ============================================================
Footer Column 4 β Legal & Support
Match Other Columns Exactly - Remove All Custom Overrides
============================================================ */
/* Links - match other columns exactly (.yu-footer li a) */
.footer-col.footer-legal ul li a {
color: #5e5e5e !important;
text-decoration: none !important;
line-height: 2 !important;
}
.footer-col.footer-legal ul li a:hover {
text-decoration: underline !important;
}
/* MOBILE FIX β full width stacking */
@media (max-width: 768px) {
.footer-col.footer-legal {
margin-bottom: 40px;
}
}
/* ============================================================
Legal & Support Column - Ensure Same Row Alignment
============================================================ */
.footer-col.footer-legal {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
width: 100% !important;
}
/* Ensure footer-legal is part of the grid row */
.footer-grid > .footer-col.footer-legal {
grid-column: auto !important;
display: flex !important;
flex-direction: column !important;
}
/* ============================================================
Legal & Support - Match Other Columns Exactly
Remove all custom font/style overrides
============================================================ */
/* Heading - match other columns (inherit from .yu-footer .h4) */
.footer-col.footer-legal .footer-head .h4,
.footer-col.footer-legal .footer-head span.h4 {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
}
/* Links - match exact styling from .yu-footer li a */
.footer-col.footer-legal ul li a {
color: #5e5e5e !important;
line-height: 2 !important;
font-size: inherit !important;
text-decoration: none !important;
}
.footer-col.footer-legal ul li a:hover {
text-decoration: underline !important;
}
/* ============================================================
Legal & Support - Force Match Other Columns
Override any custom styles to match exactly
============================================================ */
/* Ensure heading matches other columns */
.footer-col.footer-legal .footer-head .h4,
.footer-col.footer-legal .footer-head span.h4 {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
font-family: inherit !important;
}
/* Ensure links match other columns exactly */
.footer-col.footer-legal.footer-left ul li a,
.footer-col.footer-legal ul li a {
color: #5e5e5e !important;
line-height: 2 !important;
font-size: inherit !important;
font-family: inherit !important;
text-decoration: none !important;
}
/* ============================================================
Footer Column Line Height
============================================================ */
footer .footer-col a,
footer .footer-col div {
line-height: 1.65 !important;
}
/* ============================================================
Footer Badges and Social Spacing
============================================================ */
footer .footer-badges {
margin-top: 55px !important; /* Increased by 15px (40px β 55px) */
margin-bottom: 20px !important;
}
footer .footer-social {
margin-bottom: 40px !important;
}
/* ============================================================
Footer Grid Spacing
============================================================ */
footer .footer-grid {
margin-bottom: 60px !important;
}
/* ============================================================
Social icons row
============================================================ */
footer .footer-social,
footer .yu-icons {
margin-bottom: 40px !important;
}
/* ============================================
FOOTER MICRO-SPACING & TYPOGRAPHY FIX
============================================ */
/* Balanced 4-column layout */
footer .footer-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
column-gap: 75px !important; /* reduced from ~85 */
max-width: 1500px !important;
margin: 0 auto;
padding-left: 40px;
padding-right: 40px;
}
/* Same line height for all columns */
footer .footer-col a,
footer .footer-col div,
footer .footer-col p {
line-height: 1.68 !important;
}
/* Reduce spacing inside COMPANY column only */
footer .footer-col.company div,
footer .footer-col.company p {
margin-bottom: 6px !important;
}
/* Enhance legibility for LEGAL column */
footer .footer-col.legal a {
letter-spacing: 0.2px !important;
}
/* Add breathing room before badges */
footer .footer-grid {
margin-bottom: 55px !important;
}
/* ============================================
FOOTER β PERFECT CENTERING + SYMMETRY FIX
============================================ */
footer .footer-grid {
max-width: 1680px !important; /* was 1500px */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 60px !important; /* was 40px */
padding-right: 60px !important;
column-gap: 85px !important; /* was 75px */
}
/* Reduce visual weight of the Company column */
footer .footer-col.company p,
footer .footer-col.company div {
margin-bottom: 4px !important; /* was 6px (or inconsistent) */
}
/* Optional: Ensure parent container doesn't block centering */
footer .footer-shell,
footer .footer-wrapper {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
}
/* ============================================
GLOBAL FOOTER GRID OVERRIDE β FINAL AUTHORITY
============================================ */
footer .footer-grid,
.site-footer-bottom1 .footer-grid,
.footer-bottom .footer-grid,
html body footer .footer-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
max-width: 1680px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
column-gap: 85px !important;
row-gap: 10px !important;
}
/* Column typography normalization */
footer .footer-grid .footer-col * {
line-height: 1.68 !important;
margin-bottom: 5px !important;
}
/* COMPANY column tightening */
footer .footer-grid .footer-col.company * {
margin-bottom: 3px !important;
}
/* ============================================
FOOTER MICRO-ALIGNMENT FIX (Pixel Perfect)
============================================ */
/* Equalize all four columns */
footer .footer-grid > div {
padding-left: 6px !important;
padding-right: 6px !important;
}
/* Column 3 & 4: Equal width - margins removed for perfect alignment */
footer .footer-grid > div:nth-child(3),
footer .footer-grid > div:nth-child(4) {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Add breathing space inside the grid */
footer .footer-grid {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* ============================================================
FOOTER GLOBAL OVERRIDE β INLINE BLOCKERS FIX
Forced 4-column balanced layout, perfect centering
============================================================ */
/* Override inline styles on .footer-grid */
footer.site-footer-bottom1 .footer-shell .footer-grid,
.site-footer-bottom1 .footer-shell .footer-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
max-width: 1680px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
column-gap: 85px !important;
row-gap: 12px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Ensure outer containers do NOT constrain width */
footer.site-footer-bottom1,
.site-footer-bottom1,
footer.site-footer-bottom1 .footer-shell,
.site-footer-bottom1 .footer-shell {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Global column spacing normalization */
footer .footer-grid > div,
.site-footer-bottom1 .footer-grid > div {
padding-left: 6px !important;
padding-right: 6px !important;
line-height: 1.68 !important;
margin-bottom: 5px !important;
}
/* Tighten Company column (3rd column) */
/* Column 3 & 4: Equal width - margins removed for perfect alignment */
footer .footer-grid > div:nth-child(3),
.site-footer-bottom1 .footer-grid > div:nth-child(3),
footer .footer-grid > div:nth-child(4),
.site-footer-bottom1 .footer-grid > div:nth-child(4) {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ============================================================
FOOTER FULL RECONSTRUCTION ENGINE
Inline styles inside footer.php are IGNORED completely
============================================================ */
/* Target FOOTER GRID by attribute selector (beats inline) */
.footer-grid[class] {
all: unset !important; /* WIPES inline styles */
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
max-width: 1680px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
padding-top: 18px !important;
padding-bottom: 18px !important;
column-gap: 85px !important;
row-gap: 12px !important;
box-sizing: border-box !important;
}
/* Full reset for all children */
.footer-grid[class] > * {
all: unset !important;
display: block !important;
color: #333 !important;
font-family: inherit !important;
font-size: 15px !important;
line-height: 1.65 !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
/* Headings inside footer */
.footer-grid[class] > * > strong,
.footer-grid[class] > * > b,
.footer-grid[class] h4,
.footer-grid[class] h3 {
all: revert !important;
font-size: 16px !important;
font-weight: 700 !important;
margin-bottom: 10px !important;
display: block !important;
}
/* Links */
.footer-grid[class] a {
all: revert !important;
color: #444 !important;
text-decoration: none !important;
display: block !important;
margin-bottom: 6px !important;
font-size: 15px !important;
}
.footer-grid[class] a:hover {
color: #111 !important;
}
/* Column Adjustments - All columns equal width, no margins */
.footer-grid[class] > div:nth-child(3),
.footer-grid[class] > div:nth-child(4) {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure wrapper does not override width */
footer .site-footer-bottom1,
footer .footer-shell {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* ============================================================
FOOTER CORE STYLES (moved from footer.php for proper cascade control)
============================================================ */
.yu-footer li a, .yu-footer a {
color: #5e5e5e !important;
text-decoration: none !important;
line-height: 2;
}
.yu-footer .yu-icons a {
margin-right: 5px;
}
.footer-shell {
width: 100%;
margin: 0;
padding: 0;
}
.footer-grid {
max-width: 1680px !important;
margin: 0 auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
column-gap: 85px !important;
row-gap: 12px !important;
}
.yu-footer ul {
margin-top: 20px;
}
.yu-footer .h4 {
margin-top: 0;
}
.site-footer-bottom1 {
width: 100%;
}
.site-footer-bottom1 .footer-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer-bottom1 .footer-col.footer-left {
align-items: flex-start;
text-align: left;
}
.site-footer-bottom1 .footer-col.footer-google,
.site-footer-bottom1 .footer-col.footer-cities {
align-items: center;
text-align: center;
}
.site-footer-bottom1 .footer-col.footer-maximos {
align-items: center;
text-align: center;
}
.site-footer-bottom1 .footer-head {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 80px;
width: 100%;
}
.site-footer-bottom1 .footer-col.footer-google .footer-head,
.site-footer-bottom1 .footer-col.footer-cities .footer-head {
justify-content: center;
}
.site-footer-bottom1 .footer-col.footer-maximos .footer-head {
justify-content: center;
}
.site-footer-bottom1 .footer-head img {
height: 60px;
width: auto;
object-fit: contain;
}
.site-footer-bottom1 .footer-head.footer-logo {
justify-content: center;
}
.site-footer-bottom1 .footer-col ul {
padding-left: 0;
list-style: none;
margin: 0;
width: 100%;
}
/* Phone and Email Section - Wider and taller */
.footer-google .col-md-12.padding-tb20 {
width: 100%;
}
.footer-google .col-md-12.padding-tb20 span.h5,
.footer-google .col-md-12.padding-tb20 p {
display: block;
width: 100%;
line-height: 1.6;
padding: 4px 0;
}
.footer-google .col-md-12.padding-tb20 p a.h5 {
display: inline-block;
width: 100%;
font-size: inherit;
line-height: 1.6;
padding: 4px 0;
}
/* Social media icons alignment in Google column - Apple-style refined */
.footer-google .yu-icons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
.footer-google .yu-icons a {
display: inline-block;
color: #333;
transition: transform 0.2s ease, opacity 0.2s ease;
font-size: 26px;
}
.footer-google .yu-icons a:hover {
transform: translateY(-2px);
opacity: 0.7;
}
/* Mobile: Smaller, more refined Apple-style icons */
@media (max-width: 767px) {
.footer-google .yu-icons {
gap: 10px;
}
.footer-google .yu-icons a {
font-size: 22px;
}
.footer-google .yu-icons a i {
font-size: 22px;
}
}
.site-footer-bottom1 .footer-col li {
width: 100%;
line-height: 2;
}
/* Match spacing between About Us and Contact to list items (same as Popular Cities) */
.site-footer-bottom1 .footer-col.footer-maximos .footer-address > div p {
line-height: 2 !important;
margin: 0 !important;
}
/* Add 4px spacing between About Us and Contact */
.site-footer-bottom1 .footer-col.footer-maximos .footer-address > div p:last-child {
margin-top: 4px !important;
}
@media (max-width: 767px) {
.site-footer-bottom1 .yu-footer {
padding: 0 15px;
}
.site-footer-bottom1 .yu-footer .row {
gap: 15px;
}
.site-footer-bottom1 .yu-footer .row > [class*="col-"] {
align-items: center;
text-align: center;
}
}
.yu-whatsapp {
position: fixed;
left: 0;
bottom: 0;
background: #08255d;
padding: 10px 0px;
display: block;
z-index: 100000000;
border-top: 1px solid rgba(255,255,255,.1);
}
/* ============================================================================
FINAL FOOTER CSS ENGINE β MASTER OVERRIDE LAYER
Rebuilds entire footer regardless of previous CSS or removed inline styles.
Always place at the VERY BOTTOM of akkus.css.
============================================================================ */
/* 1) CORE GRID REBOOT β full reset */
footer .footer-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
max-width: 1680px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
padding-top: 24px !important;
padding-bottom: 24px !important;
column-gap: 85px !important;
row-gap: 12px !important;
box-sizing: border-box !important;
}
/* 2) CHILD RESET β all columns look identical */
footer .footer-grid > div {
margin: 0 !important;
padding-left: 6px !important;
padding-right: 6px !important;
color: #333 !important;
font-size: 15px !important;
line-height: 1.65 !important;
display: block !important;
}
/* 3) HEADINGS (Buyer Guide / Turkey Property / Company / Legal & Support) */
footer .footer-grid > div strong,
footer .footer-grid > div b,
footer .footer-grid > div h3,
footer .footer-grid > div h4 {
display: block !important;
font-weight: 700 !important;
font-size: 16px !important;
margin: 0 0 10px 0 !important;
color: #111 !important;
}
/* 4) LINKS */
footer .footer-grid a {
text-decoration: none !important;
color: #444 !important;
display: block !important;
margin-bottom: 7px !important;
font-size: 15px !important;
}
footer .footer-grid a:hover {
color: #111 !important;
}
/* 5) MICRO-ALIGNMENT β column spacing (pixel perfected)
------------------------------------------------------
Column 1 = Buyer Guide
Column 2 = Turkey Property Locations
Column 3 = Company
Column 4 = Legal & Support
*/
/* Column 3 & 4: Equal width - margins removed for perfect alignment */
footer .footer-grid > div:nth-child(3),
footer .footer-grid > div:nth-child(4) {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 6) FOOTER WRAPPER CLEANUP β no container interferes */
footer .site-footer-bottom1,
footer .footer-shell,
footer .yu-footer {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* 7) UL / LI FIX β in case footer uses lists */
footer .footer-grid ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Correct final spacing for footer lists */
footer .footer-grid li {
line-height: 1.65 !important;
margin-bottom: 6px !important;
}
footer .footer-grid li a {
line-height: 1.65 !important;
margin-bottom: 6px !important;
}
/* REMOVED: Duplicate mobile footer rule - using cleaner rule at line 16628 instead */
/* ============================================
FINAL FOOTER LIST SPACING FIX
Overrides leftover .yu-footer line-height rules
============================================ */
footer .footer-grid ul,
footer .footer-grid ul li,
footer .footer-grid ul li a {
line-height: 1.55 !important; /* Tighter, premium spacing */
margin-bottom: 4px !important; /* Perfect micro-spacing */
padding: 0 !important;
}
.site-footer-bottom1 {
background: #efefef;
color: #333;
padding: 40px 0;
}
/* ============================================================
FOOTER CONSISTENCY FIX β ALL INNER PAGES + MOBILE
Fixes narrowing on inner pages and mobile viewport issues
============================================================ */
/* Fix 1: Remove container constraints on ALL inner pages */
html.property-listing-page .site-footer-bottom1,
html.property-listing-page .site-footer-bottom1 .container,
html.property-listing-page .yu-footer,
html.location-page .site-footer-bottom1,
html.search-page .site-footer-bottom1,
html.service-page .site-footer-bottom1,
html.investment-page .site-footer-bottom1,
html.guide-page .site-footer-bottom1 {
max-width: 100% !important;
width: 100% !important;
}
/* Fix 2: Ensure Footer-Shell is Full Width on All Inner Pages */
html.property-listing-page .footer-shell,
html.location-page .footer-shell,
html.search-page .footer-shell,
html.service-page .footer-shell,
html.investment-page .footer-shell,
html.guide-page .footer-shell {
max-width: 100% !important;
width: 100% !important;
}
/* Fix 3: Allow Footer Grid to Expand to 1680px on Inner Pages (Match Homepage) */
html.property-listing-page .footer-grid,
html.location-page .footer-grid,
html.search-page .footer-grid,
html.service-page .footer-grid,
html.investment-page .footer-grid,
html.guide-page .footer-grid {
max-width: 1680px !important;
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
column-gap: 85px !important;
row-gap: 12px !important;
}
/* REMOVED: Duplicate mobile footer rule - using cleaner rule at line 16628 instead */
/* ============================================================
FOOTER STYLE REPLICATION β APPLY HOMEPAGE FOOTER TO ALL INNER PAGES
Ensures badges, social links, copyright match homepage exactly
============================================================ */
/* Apply all footer badges styling to inner pages */
html.property-listing-page .footer-badges,
html.location-page .footer-badges,
html.search-page .footer-badges,
html.service-page .footer-badges,
html.investment-page .footer-badges,
html.guide-page .footer-badges {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 40px !important;
margin: 55px 0 10px 0 !important; /* Increased top margin by 15px (40px β 55px) */
}
html.property-listing-page .footer-badges img,
html.location-page .footer-badges img,
html.search-page .footer-badges img,
html.service-page .footer-badges img,
html.investment-page .footer-badges img,
html.guide-page .footer-badges img {
height: 50px !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Apply footer social links styling to inner pages */
html.property-listing-page .footer-social,
html.location-page .footer-social,
html.search-page .footer-social,
html.service-page .footer-social,
html.investment-page .footer-social,
html.guide-page .footer-social {
text-align: center !important;
margin: 20px 0 10px !important;
font-size: 15px !important;
}
html.property-listing-page .footer-social a,
html.location-page .footer-social a,
html.search-page .footer-social a,
html.service-page .footer-social a,
html.investment-page .footer-social a,
html.guide-page .footer-social a {
color: #333 !important;
text-decoration: none !important;
}
html.property-listing-page .footer-social a:hover,
html.location-page .footer-social a:hover,
html.search-page .footer-social a:hover,
html.service-page .footer-social a:hover,
html.investment-page .footer-social a:hover,
html.guide-page .footer-social a:hover {
opacity: 0.6 !important;
}
/* Apply footer copyright styling to inner pages */
html.property-listing-page .footer-copyright,
html.location-page .footer-copyright,
html.search-page .footer-copyright,
html.service-page .footer-copyright,
html.investment-page .footer-copyright,
html.guide-page .footer-copyright {
width: 100% !important;
background: #fff !important;
border-top: 1px solid rgba(0,0,0,0.08) !important;
padding: 16px 0 !important;
text-align: center !important;
font-size: 14px !important;
color: #555 !important;
margin-top: 20px !important;
}
/* Apply footer headings styling to inner pages */
html.property-listing-page .footer-head .h4,
html.location-page .footer-head .h4,
html.search-page .footer-head .h4,
html.service-page .footer-head .h4,
html.investment-page .footer-head .h4,
html.guide-page .footer-head .h4,
html.property-listing-page .footer-head span.h4,
html.location-page .footer-head span.h4,
html.search-page .footer-head span.h4,
html.service-page .footer-head span.h4,
html.investment-page .footer-head span.h4,
html.guide-page .footer-head span.h4 {
margin: 0 0 8px 0 !important;
font-weight: 600 !important;
font-size: 18px !important;
}
/* Apply footer list styling to inner pages */
html.property-listing-page .site-footer-bottom1 ul,
html.location-page .site-footer-bottom1 ul,
html.search-page .site-footer-bottom1 ul,
html.service-page .site-footer-bottom1 ul,
html.investment-page .site-footer-bottom1 ul,
html.guide-page .site-footer-bottom1 ul {
padding-left: 0 !important;
list-style: none !important;
margin: 0 !important;
}
html.property-listing-page .site-footer-bottom1 ul li a,
html.location-page .site-footer-bottom1 ul li a,
html.search-page .site-footer-bottom1 ul li a,
html.service-page .site-footer-bottom1 ul li a,
html.investment-page .site-footer-bottom1 ul li a,
html.guide-page .site-footer-bottom1 ul li a {
color: #333 !important;
text-decoration: none !important;
}
html.property-listing-page .site-footer-bottom1 ul li a:hover,
html.location-page .site-footer-bottom1 ul li a:hover,
html.search-page .site-footer-bottom1 ul li a:hover,
html.service-page .site-footer-bottom1 ul li a:hover,
html.investment-page .site-footer-bottom1 ul li a:hover,
html.guide-page .site-footer-bottom1 ul li a:hover {
opacity: 0.6 !important;
}
/* =======================================================================
GLOBAL FOOTER EXPANSION ENGINE β STOP NARROW FOOTER ON ALL PAGES
This forces the footer to ALWAYS be full-width, ignoring inner-page CSS.
======================================================================= */
.site-footer-bottom1,
.site-footer-bottom1 .footer-grid,
.site-footer-bottom1 .container,
.site-footer-bottom1 .container-fluid,
footer.site-footer,
.yu-footer {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Remove ANY Bootstrap .container squeezing footer on inner pages */
html[class*="-page"] .site-footer-bottom1 .container,
html[class*="-page"] .site-footer-bottom1 .container-fluid,
html[class*="-page"] footer .container,
html[class*="-page"] footer .container-fluid,
html[class*="-page"] .yu-footer {
width: 100vw !important;
max-width: 100vw !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Reset footer-grid to full-width on ALL pages */
html[class*="-page"] .site-footer-bottom1 .footer-grid {
width: 100% !important;
max-width: 1680px !important;
margin: 0 auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
box-sizing: border-box !important;
}
/* =======================================================================
INNER PAGES FOOTER β FRESH CODE TO MATCH HOMEPAGE EXACTLY
Removes all narrowing and ensures perfect match with homepage
======================================================================= */
/* 1. REMOVE ALL MARGIN ADJUSTMENTS ON ALL COLUMNS β PERFECT EQUAL WIDTH */
html[class*="-page"] .footer-grid > div,
html.property-listing-page .footer-grid > div,
html.location-page .footer-grid > div,
html.search-page .footer-grid > div,
html.service-page .footer-grid > div,
html.investment-page .footer-grid > div,
html.guide-page .footer-grid > div,
html[class*="-page"] .footer-grid > div:nth-child(1),
html[class*="-page"] .footer-grid > div:nth-child(2),
html[class*="-page"] .footer-grid > div:nth-child(3),
html[class*="-page"] .footer-grid > div:nth-child(4) {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
/* 2. COMPANY SECTION β PROPER SPACING FOR ADDRESSES (MATCH HOMEPAGE) */
html[class*="-page"] .footer-grid .footer-col ul li[style*="margin-top"] {
margin-top: 12px !important;
margin-bottom: 8px !important;
line-height: 1.65 !important;
}
/* Office address headings (Istanbul Office, Antalya Office) */
html[class*="-page"] .footer-grid .footer-col ul li strong {
display: block !important;
margin-bottom: 4px !important;
font-weight: 600 !important;
color: #333 !important;
}
/* Address text lines β HIDE BR TAGS TO MATCH HOMEPAGE (single line addresses) */
html[class*="-page"] .footer-grid .footer-col ul li br {
display: none !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3. ENSURE FOOTER GRID IS EXACTLY 1680px ON INNER PAGES (MATCH HOMEPAGE) */
html[class*="-page"] .footer-grid,
html.property-listing-page .footer-grid,
html.location-page .footer-grid,
html.search-page .footer-grid,
html.service-page .footer-grid,
html.investment-page .footer-grid,
html.guide-page .footer-grid {
max-width: 1680px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
column-gap: 85px !important;
row-gap: 12px !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
}
/* 4. COMPANY COLUMN β MATCH HOMEPAGE EXACTLY */
html[class*="-page"] .footer-grid .footer-col ul li {
line-height: 1.65 !important;
margin-bottom: 6px !important;
}
html[class*="-page"] .footer-grid .footer-col ul li a {
line-height: 1.65 !important;
margin-bottom: 6px !important;
}
/* =======================================================================
FINAL INNER PAGES FOOTER OVERRIDE β AGGRESSIVE MATCH TO HOMEPAGE
Overrides ALL previous rules to ensure perfect match
======================================================================= */
/* Remove ALL margin adjustments β ensure all 4 columns are PERFECTLY equal */
html[class*="-page"] .footer-grid > *,
html.property-listing-page .footer-grid > *,
html.location-page .footer-grid > *,
html.search-page .footer-grid > *,
html.service-page .footer-grid > *,
html.investment-page .footer-grid > *,
html.guide-page .footer-grid > * {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* COMPANY SECTION β INCREASE SPACING FOR OFFICE ADDRESSES */
html[class*="-page"] .footer-grid .footer-col ul li[style*="margin-top"] {
margin-top: 12px !important;
margin-bottom: 0 !important;
padding-bottom: 8px !important;
line-height: 1.65 !important;
}
/* Office address block styling β match homepage */
html[class*="-page"] .footer-grid .footer-col ul li strong {
display: block !important;
margin-bottom: 4px !important;
margin-top: 0 !important;
font-weight: 600 !important;
color: #333 !important;
font-size: 15px !important;
}
/* Ensure footer wrapper is full-width */
html[class*="-page"] .footer-wrapper {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
/* COMPANY SECTION β ENHANCED SPACING FOR OFFICE ADDRESSES (MATCH HOMEPAGE) */
html[class*="-page"] .footer-grid .footer-col ul li[style*="margin-top"] {
margin-top: 12px !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.65 !important;
display: block !important;
}
/* Office address text (Istanbul Office, Antalya Office headings) */
html[class*="-page"] .footer-grid .footer-col ul li strong {
display: block !important;
margin-bottom: 6px !important;
margin-top: 0 !important;
padding-bottom: 2px !important;
font-weight: 600 !important;
color: #333 !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
/* Address line breaks β proper spacing between address lines */
html[class*="-page"] .footer-grid .footer-col ul li {
line-height: 1.65 !important;
}
/* HIDE BR TAGS IN FOOTER ADDRESSES ON INNER PAGES β MATCH HOMEPAGE STYLE */
html[class*="-page"] .footer-grid .footer-col ul li br {
display: none !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =======================================================================
MOBILE FOOTER β SINGLE COLUMN STACKED (THE EXACT RULE CONTROLLING MOBILE)
Breakpoint: 768px | This is the controlling rule - last in file
======================================================================= */
@media (max-width: 768px) {
/* MOBILE FOOTER - OVERRIDE ALL DESKTOP RULES - HIGHEST SPECIFICITY */
footer .footer-grid,
.site-footer-bottom1 .footer-grid,
footer.site-footer-bottom1 .footer-shell .footer-grid,
.site-footer-bottom1 .footer-shell .footer-grid,
footer.site-footer-bottom1.footer-shell.footer-grid,
.footer-bottom .footer-grid,
html body footer .footer-grid,
html[class*="-page"] .site-footer-bottom1 .footer-grid,
html.property-listing-page .footer-grid,
html.location-page .footer-grid,
html.search-page .footer-grid,
html.service-page .footer-grid,
html.investment-page .footer-grid,
html.guide-page .footer-grid {
grid-template-columns: 1fr !important;
display: grid !important;
padding-left: 20px !important;
padding-right: 20px !important;
column-gap: 0 !important;
row-gap: 30px !important;
text-align: center !important;
max-width: 100% !important;
width: 100% !important;
}
footer .footer-grid > div,
.site-footer-bottom1 .footer-grid > div,
footer.site-footer-bottom1 .footer-shell .footer-grid > div,
.site-footer-bottom1 .footer-shell .footer-grid > div {
padding: 0 !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* =======================================================================
FINAL MOBILE FOOTER OVERRIDE - ABSOLUTE LAST RULE - MAXIMUM SPECIFICITY
This MUST override everything to ensure 1 column on mobile
======================================================================= */
@media (max-width: 768px) {
/* Target EVERY possible footer grid selector with maximum specificity */
footer.site-footer-bottom1 .footer-shell .footer-grid,
footer.site-footer-bottom1 .footer-shell.yu-footer .footer-grid,
.site-footer-bottom1.footer-shell .footer-grid,
.site-footer-bottom1 .footer-shell.yu-footer .footer-grid,
.yu-footer.footer-shell .footer-grid,
footer .yu-footer .footer-grid,
html body footer.site-footer-bottom1 .footer-shell .footer-grid,
html[class*="-page"] footer.site-footer-bottom1 .footer-shell .footer-grid,
html.guide-page footer.site-footer-bottom1 .footer-shell .footer-grid {
grid-template-columns: 1fr !important;
display: grid !important;
padding-left: 20px !important;
padding-right: 20px !important;
column-gap: 0 !important;
row-gap: 30px !important;
text-align: center !important;
max-width: 100% !important;
width: 100% !important;
overflow: visible !important;
isolation: auto !important;
}
}
/* =======================================================================
FOOTER BADGES - ADDITIONAL 15px SPACING ABOVE LOGOS
Increases space above Maximos logo and Google badge by 15px
This creates more distance between the 4 footer grid columns
======================================================================= */
.footer-badges,
footer .footer-badges,
.site-footer-bottom1 .footer-badges,
html[class*="-page"] .footer-badges {
margin-top: 55px !important; /* Increased by 15px (from 40px) for better spacing between 4 grids */
}
/* =======================================================================
MOBILE FOOTER HEADING SPACING FIX - REDUCE TO 6PX FOR ALL GRIDS
Fix the 49.77px spacing issue (should be 6px)
======================================================================= */
@media (max-width: 767px) {
/* Reduce spacing between ALL footer grid headings and their items from 8px to 6px */
.site-footer-bottom1 .footer-col .footer-head .h4,
.site-footer-bottom1 .footer-col .footer-head span.h4,
.site-footer-bottom1 .footer-col.footer-left .footer-head .h4,
.site-footer-bottom1 .footer-col.footer-left .footer-head span.h4,
.site-footer-bottom1 .footer-col.footer-legal .footer-head .h4,
.site-footer-bottom1 .footer-col.footer-legal .footer-head span.h4 {
margin-bottom: 6px !important; /* Reduced from 8px to 6px */
}
/* Remove ALL extra spacing between footer-head and ul on mobile */
.site-footer-bottom1 .footer-col ul,
.site-footer-bottom1 .footer-col.footer-left ul,
.site-footer-bottom1 .footer-col.footer-legal ul {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove gap property that might be adding spacing */
.site-footer-bottom1 .footer-col,
.site-footer-bottom1 .footer-col.footer-left,
.site-footer-bottom1 .footer-col.footer-legal {
gap: 0 !important;
}
}
/* =======================================================================
MOBILE FOOTER LEGAL & SUPPORT GRID ALIGNMENT - MATCH GRIDS 1-3
Fix font-size, font-weight, and line-height to match other grids
======================================================================= */
@media (max-width: 767px) {
/* Ensure Legal & Support heading matches other grids */
.site-footer-bottom1 .footer-col.footer-legal .footer-head .h4,
.site-footer-bottom1 .footer-col.footer-legal .footer-head span.h4 {
font-size: 18px !important; /* Match other footer grid headings font-size */
font-weight: 600 !important; /* Match other footer grid headings font-weight */
line-height: 1.68 !important; /* Match other footer grid headings line-height */
}
/* Fix Grid 4 list items line-height to match other grids (25.2px = 1.68 Γ 15px, not 28.5px) */
.site-footer-bottom1 .footer-col.footer-legal ul li,
.footer-col.footer-legal ul li {
line-height: 1.68 !important; /* Match other grids: 25.2px (not 28.5px) */
}
.site-footer-bottom1 .footer-col.footer-legal ul li a,
.footer-col.footer-legal ul li a {
line-height: 1.68 !important; /* Match other grids: 25.2px (not 28.5px) */
color: #333 !important; /* Match other grids color */
}
}
/* =======================================================================
AGGRESSIVE MOBILE FOOTER SPACING FIX - REDUCE 49.77PX TO 6PX
The heading margin-bottom is 6px but actual spacing is 49.77px
Use negative margin on ul to eliminate the extra 43.77px
======================================================================= */
@media (max-width: 767px) {
/* Pull ul closer to heading by using negative margin to reduce total spacing from 49.77px to 6px */
.site-footer-bottom1 .footer-col ul,
.site-footer-bottom1 .footer-col.footer-left ul,
.site-footer-bottom1 .footer-col.footer-legal ul {
margin-top: -43.77px !important; /* Negative margin: 49.77px - 43.77px = 6px final spacing */
padding-top: 0 !important;
}
}
/* =======================================================================
DESKTOP FOOTER LEGAL & SUPPORT GRID ALIGNMENT - MATCH GRIDS 1-3
Fix font-size, font-weight, and line-height to match other grids on DESKTOP
Desktop-only rules (not in mobile media query)
======================================================================= */
/* Desktop: Ensure Legal & Support heading matches other grids (explicit values, not inherit) */
.site-footer-bottom1 .footer-col.footer-legal .footer-head .h4,
.site-footer-bottom1 .footer-col.footer-legal .footer-head span.h4,
.footer-col.footer-legal .footer-head .h4,
.footer-col.footer-legal .footer-head span.h4 {
font-size: 18px !important; /* Match other footer grid headings font-size (explicit, not inherit) */
font-weight: 600 !important; /* Match other footer grid headings font-weight (explicit, not inherit) */
line-height: 1.68 !important; /* Match other footer grid headings line-height (30.24px / 18px = 1.68) */
}
/* Desktop: Fix Grid 4 list items line-height to match other grids */
.site-footer-bottom1 .footer-col.footer-legal ul li,
.footer-col.footer-legal ul li {
line-height: 1.9 !important; /* Match other footer grid line-height (not 2, which is 28.5px) */
}
/* Desktop: Fix Grid 4 list item links to match other grids */
.site-footer-bottom1 .footer-col.footer-legal ul li a,
.footer-col.footer-legal ul li a,
.footer-col.footer-legal.footer-left ul li a {
line-height: 1.9 !important; /* Match other footer grid links line-height (not 2) */
color: #333 !important; /* Match other footer grid links color (not #5e5e5e) */
}
/* HERO SLIDER ARROW BACKGROUND FIX */
#property-images .flex-prev,
#property-images .flex-next {
background: rgba(255,255,255,.35) !important;
}
/* SOCIAL ICON SIZE RESERVATION β Prevent CLS */
.h-social-icons a svg,
.h-social-icons a i {
width: 20px;
height: 20px;
display: inline-block;
}
/* HONEYPOT SPAM PROTECTION β Hide honeypot fields from humans */
input[name="website_url"],
input[name="company_name"],
input[name="homepage"],
input[id*="website_url"],
input[id*="company_name"],
input[id*="homepage"] {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
tabindex: -1 !important;
visibility: hidden !important;
}
/* ============================================================
NEWS & BLOG CARD IMAGE ALIGNMENT FIX
Fix uneven image alignment - images align at top, titles don't push images down
============================================================ */
/* Make the container that holds title, image, and text use flexbox row with wrap */
.news-blog-post .col-md-12.col-sm-12 {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
}
/* Title takes full width (forces new line), stays at top */
.news-blog-post .col-md-12.col-sm-12 > h3 {
flex-basis: 100% !important;
width: 100% !important;
flex-shrink: 0 !important;
margin-bottom: 15px !important;
}
/* Image column: flex-shrink: 0, aligns at top */
.news-blog-post .col-md-12.col-sm-12 > .col-md-3.col-sm-4.col-xs-6 {
flex-shrink: 0 !important;
align-self: flex-start !important;
float: none !important;
}
/* Text column: flex: 1, aligns at top */
.news-blog-post .col-md-12.col-sm-12 > .col-md-9.col-sm-8.col-xs-6 {
flex: 1 !important;
align-self: flex-start !important;
float: none !important;
min-width: 0 !important;
}
/* ============================================================
NEWS & BLOG CARDS β UNIFORM HEIGHT & PERFECT ALIGNMENT
Make all cards same height, clamp titles/excerpts, ensure perfect image alignment
============================================================ */
/* ============================================================
APPLE-STYLE NEWS/BLOG CARDS (FADE + MOBILE + ALIGNMENT)
============================================================ */
/* ============================================================
APPLE-STYLE NEWS/BLOG CARDS (FADE + MOBILE + ALIGNMENT)
============================================================ */
/* CARD BASE β uniform height for perfect alignment */
.post.news-blog-post {
background: #fff;
border-radius: 16px;
padding: 24px 28px 32px;
margin-bottom: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
justify-content: space-between;
height: 220px; /* <-- Ensures all cards align perfectly */
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Hover elevation */
.post.news-blog-post:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}
/* FLEX layout for image + text */
.post-card-flex {
display: flex;
align-items: flex-start;
gap: 22px;
margin-top: 14px;
flex: 1;
}
/* IMAGE container - ensure consistent sizing */
.post-card-image {
width: 150px !important;
height: 112px !important;
flex-shrink: 0;
overflow: hidden;
border-radius: 12px;
}
/* IMAGE styling - force exact size for all thumbnails */
.post-card-image img {
width: 150px !important;
height: 112px !important;
object-fit: cover !important;
border-radius: 12px;
flex-shrink: 0;
max-width: 150px !important;
max-height: 112px !important;
min-width: 150px !important;
min-height: 112px !important;
display: block;
}
/* TEXT wrapper */
.post-card-text {
flex: 1;
position: relative;
}
/* TITLE spacing */
.post-title {
margin-bottom: 6px !important;
}
/* -------- APPLE FADE EFFECT ON EXCERPT -------- */
.post-summary {
font-size: 17px;
line-height: 1.5;
color: #444;
margin: 0;
padding: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
position: relative;
max-width: 100%;
}
/* Fade overlay like Apple News */
.post-summary::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 40%;
height: 1.4em;
background: linear-gradient(to right, rgba(255,255,255,0), #fff 70%);
}
/* EXCERPT link style */
.post-summary a {
text-decoration: none;
color: #444;
}
/* Hover underline */
.post-summary a:hover {
text-decoration: underline;
}
/* DIVIDER LINE */
.news-blog-divider {
margin-top: 14px !important;
margin-bottom: 0 !important;
opacity: 0.15;
}
/* ============================================================
MOBILE RESPONSIVE ADJUSTMENTS (iPhone 12β15 safe)
============================================================ */
@media (max-width: 767px) {
.post.news-blog-post {
padding: 20px 20px 26px;
height: auto; /* Cards expand naturally on mobile */
}
.post-card-flex {
flex-direction: column; /* Stack image above text */
align-items: flex-start;
gap: 14px;
}
.post-card-image img {
width: 100%;
height: auto;
max-height: 220px;
border-radius: 12px;
}
.post-summary {
font-size: 16px;
-webkit-line-clamp: 4; /* More text on mobile */
}
.post-summary::after {
width: 55%;
}
}
/* ============================================================
APPLE-STYLE BUYING GUIDE CARDS (SAME AS NEWS/BLOG)
============================================================ */
/* CARD BASE β uniform height for perfect alignment */
.post.buying-guide-post {
background: #fff;
border-radius: 16px;
padding: 24px 28px 32px;
margin-bottom: 5px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
justify-content: space-between;
height: 220px; /* <-- Ensures all cards align perfectly */
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Hover elevation */
.post.buying-guide-post:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}
/* ---------------------------------------- */
/* BUYING GUIDE CARDS - Use same layout as News/Blog */
/* ---------------------------------------- */
/* Buying Guide cards now use the same HTML structure (post-card-flex, post-card-image, post-card-text) */
/* So they automatically inherit the News/Blog CSS rules above */
/* Only add Buying Guide specific overrides if needed */
/* TITLE spacing for Buying Guide */
.post.buying-guide-post h3.post-title {
margin-bottom: 6px !important;
}
/* Mobile responsive adjustments for Buying Guide */
@media (max-width: 767px) {
.post.buying-guide-post {
padding: 20px 20px 26px;
height: auto; /* Cards expand naturally on mobile */
}
/* Buying Guide uses same post-card-flex structure, so it inherits mobile styles from News/Blog */
/* No additional overrides needed - mobile styles are handled by .post-card-flex rules above */
}
/* OLD RULES REMOVED - Replaced by Apple-style rules above */
/* ============================================================
INLINE STYLES MOVED TO EXTERNAL CSS FOR MAX SEO
All inline styles removed and moved here for better SEO
============================================================ */
/* Theme color overrides - moved from inline style block */
p.drop-caps.secondary:first-child:first-letter,
.accent-bg,
.fa.accent-color,
.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.label-primary,
.progress-bar,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus,
.panel-primary > .panel-heading,
.carousel-indicators .active,
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span,
hr.sm,
.flex-control-nav a:hover,
.flex-control-nav a.flex-active,
.accordion-heading .accordion-toggle.active,
.accordion-heading:hover .accordion-toggle,
.accordion-heading:hover .accordion-toggle.inactive,
.nav-tabs li a:hover,
.nav-tabs li a:active,
.nav-tabs li.active a,
.fc-event,
.site-header .social-icons a,
.navigation > ul > li > ul > li:hover > a,
.navigation > ul > li > ul > li > ul > li:hover a,
.block-heading h2,
.block-heading h4,
.single-property .price,
.timeline > li > .timeline-badge,
.pricing-column.highlight h3,
.site-footer-bottom .social-icons a:hover {
background-color: #195385 !important;
}
.contact-info-blocks > div,
.contact-info-blocks > div > span,
.breadcrumb > .active {
color: #333 !important;
}
.articil h3 {
color: #65531B !important;
}
/* Footer address spacing */
footer .footer-col li[itemprop="address"] {
margin-top: 10px;
}
/* Header spacing override */
header.site-header {
margin-top: 0 !important; /* Override inline style */
}
/* Header SVG icons - inline styles moved here */
.header-social svg,
.header-social a svg {
display: inline-block;
vertical-align: middle;
font-size: 20px;
}
/* Navigation menu SVG icons */
.navigation svg,
.sf-menu svg {
vertical-align: middle;
}
/* Advanced search box - hidden by default, shown via JS */
.advanced-search-box {
display: none !important;
}
.advanced-search-box.visible {
display: block !important;
}
/* Advanced search labels */
.advanced-search-box label.inline {
float: left;
margin-right: 10px;
}
/* Advanced search button container */
.advanced-search-button-container {
margin-top: 20px;
}
/* Hero slider background images - set via data attribute */
.hero-slide.parallax[data-bg-image] {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Ask to Seller form */
#askToSeller {
z-index: 10;
}
/* Honeypot fields - hidden from users */
#ask_homepage,
#ask_website_url,
#ask_company_name {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
tabindex: -1;
}
/* Ask form secure code input */
#ask_code {
color: #111;
}
/* Loading indicator */
#mload {
display: none;
}
#mload.active {
display: block;
}
/* Detail form title */
.detailBottomForm .title {
background-color: #6B5614 !important;
}
/* Detail form */
#detailform {
z-index: 10;
}
/* Detail form secure code */
#field_code {
color: #111;
}
/* Detail form submit button */
#detailform input[type="submit"] {
background-color: #1a3a7a !important; /* Navy blue - matches View Details button */
}
/* Detail form loading indicator */
#mdload2 {
display: none;
}
#mdload2.active {
display: block;
}
/* ============================================================
LISTING CARD IMAGE ASPECT RATIO FIX - PREVENT CLS
Fixed aspect-ratio container for background-image divs
============================================================ */
.listing-card .listing-image .image {
aspect-ratio: 4 / 3 !important;
width: 100% !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/**************************************************************
APPLEβSTYLE HEADINGS FOR ALL 4 HOMEPAGE SECTIONS
**************************************************************/
/* BASE: Applies to ALL section headings */
.section-heading,
.block-heading h2.section-heading,
.block-heading .section-heading,
.news-blog-block-heading h2.section-heading,
.posts-archive .block-heading h2.section-heading,
.buying-guide-section .block-heading h2.section-heading,
#featured-properties .block-heading h2.section-heading {
font-size: 24px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
line-height: 1.25 !important;
margin: 0 0 26px 0 !important;
padding: 0 !important;
letter-spacing: -0.2px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
text-decoration: none !important;
background-color: transparent !important;
background: transparent !important;
height: auto !important;
border-radius: 0 !important;
}
/* Remove hover color change (unwanted theme override) */
.section-heading:hover,
.block-heading h2.section-heading:hover,
.news-blog-block-heading h2.section-heading:hover,
.buying-guide-section .block-heading h2.section-heading:hover,
#featured-properties .block-heading h2.section-heading:hover {
color: #1a1a1a !important;
text-decoration: none !important;
background: transparent !important;
background-color: transparent !important;
}
/* ICON STYLE (uniform Apple tone) */
.section-heading .heading-icon i,
.block-heading .section-heading .heading-icon i,
.news-blog-block-heading .section-heading .heading-icon i,
.news-blog-block-heading .heading-icon i,
.posts-archive .block-heading .section-heading .heading-icon i,
.buying-guide-section .block-heading .section-heading .heading-icon i,
.buying-guide-section .heading-icon i,
#featured-properties .block-heading .section-heading .heading-icon i {
font-size: 20px !important;
color: #7d7d7d !important;
margin-right: 4px !important;
background: transparent !important;
background-color: transparent !important;
}
/* Heading icon container */
.section-heading .heading-icon,
.block-heading .section-heading .heading-icon,
.news-blog-block-heading .section-heading .heading-icon,
.posts-archive .block-heading .section-heading .heading-icon,
.buying-guide-section .block-heading .section-heading .heading-icon,
#featured-properties .block-heading .section-heading .heading-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
background-color: transparent !important;
width: auto !important;
margin-right: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* Links inside headings */
.section-heading a,
.block-heading .section-heading a,
.news-blog-block-heading .section-heading a,
.posts-archive .block-heading .section-heading a,
.buying-guide-section .block-heading .section-heading a,
#featured-properties .block-heading .section-heading a {
color: inherit !important;
text-decoration: none !important;
pointer-events: none !important;
background: transparent !important;
background-color: transparent !important;
}
/**************************************************************
SPECIFICITY BOOSTERS (Ensures patch ALWAYS overrides theme)
**************************************************************/
/* Override any conflicting background colors */
.block-heading h2.section-heading,
.block-heading .section-heading,
.news-blog-block-heading h2.section-heading,
.posts-archive .block-heading h2.section-heading,
.buying-guide-section .block-heading h2.section-heading,
#featured-properties .block-heading h2.section-heading {
background-color: transparent !important;
background: transparent !important;
}
/* Override any conflicting colors */
.block-heading h2.section-heading,
.block-heading .section-heading,
.news-blog-block-heading h2.section-heading,
.posts-archive .block-heading h2.section-heading,
.buying-guide-section .block-heading h2.section-heading,
#featured-properties .block-heading h2.section-heading {
color: #1a1a1a !important;
}
/**************************************************************
APPLE STYLE β FULL RESET + MODERN SECTION HEADINGS
**************************************************************/
/* Remove ALL background boxes used by theme */
.block-heading,
.block-heading * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Main Apple heading */
.section-heading {
font-size: 30px !important;
font-weight: 600 !important;
color: #111 !important;
margin: 0 0 28px 0 !important;
padding: 0 !important;
line-height: 1.22 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
text-transform: none !important;
letter-spacing: -0.3px !important;
/* Remove leftover theme styles */
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Icon next to heading */
.section-heading .heading-icon {
font-size: 22px !important;
color: #666 !important;
margin-right: 4px !important;
}
/* Icon inside heading-icon */
.section-heading .heading-icon i {
font-size: 22px !important;
color: #666 !important;
background: transparent !important;
}
/* Remove hover effects */
.section-heading:hover {
background: transparent !important;
color: #111 !important;
}
/* Remove link behavior */
.section-heading a {
color: inherit !important;
pointer-events: none !important;
text-decoration: none !important;
}
/**************************************************************
APPLE STYLE SECTION HEADINGS β GLOBAL OVERRIDE
**************************************************************/
/* 1. RESET All theme-generated heading wrappers */
.block-heading,
.block-heading *,
.news-blog-block-heading,
.news-blog-block-heading *,
.buying-guide-section .block-heading,
.buying-guide-section .block-heading * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* 2. Main Apple-style H2 heading */
.section-heading {
font-size: 30px !important;
font-weight: 600 !important;
color: #111 !important;
margin: 0 0 28px 0 !important;
padding: 0 !important;
line-height: 1.20 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
/* Apple clean reset */
text-transform: none !important;
letter-spacing: -0.3px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* 3. Optional icon β kept subtle (Apple style) */
.section-heading .heading-icon {
font-size: 22px !important;
color: #666 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Icon element inside heading-icon */
.section-heading .heading-icon i {
font-size: 22px !important;
color: #666 !important;
background: transparent !important;
}
/* 4. Remove hover effects entirely */
.section-heading:hover {
background: transparent !important;
color: #111 !important;
}
/* 5. Remove anchor/link behavior */
.section-heading a {
color: inherit !important;
pointer-events: none !important;
text-decoration: none !important;
}
/**************************************************************
NUCLEAR OVERRIDE β APPLE STYLE HEADINGS (Guaranteed)
**************************************************************/
/* 0. Reset EVERYTHING that may affect headings */
#featured-properties .block-heading *,
.posts-archive .block-heading *,
.buying-guide-section .block-heading *,
.news-blog-block-heading *,
.block-heading *,
.block-heading h2,
.block-heading h4,
.block-heading span,
.block-heading div {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
text-transform: none !important;
transition: none !important;
}
/* 1. Force Apple-style text on ALL section titles */
#featured-properties h2.section-heading,
.posts-archive h2.section-heading,
.buying-guide-section h2.section-heading,
.news-blog-block-heading h2.section-heading,
.section-heading,
.block-heading > h2,
.block-heading > h4,
.block-heading h2.section-heading {
font-size: 30px !important;
font-weight: 600 !important;
color: #111 !important;
line-height: 1.20 !important;
letter-spacing: -0.3px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 0 !important;
margin-bottom: 30px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* 2. Icons beside heading */
#featured-properties .section-heading .heading-icon,
.posts-archive .section-heading .heading-icon,
.buying-guide-section .section-heading .heading-icon,
.news-blog-block-heading .section-heading .heading-icon,
.section-heading .heading-icon {
font-size: 22px !important;
color: #888 !important;
display: inline-flex !important;
align-items: center !important;
}
/* Icon element inside heading-icon */
#featured-properties .section-heading .heading-icon i,
.posts-archive .section-heading .heading-icon i,
.buying-guide-section .section-heading .heading-icon i,
.news-blog-block-heading .section-heading .heading-icon i,
.section-heading .heading-icon i {
font-size: 22px !important;
color: #888 !important;
background: transparent !important;
}
/* 3. FULL HOVER DISABLE */
#featured-properties .section-heading:hover,
.posts-archive .section-heading:hover,
.buying-guide-section .section-heading:hover,
.news-blog-block-heading .section-heading:hover,
.section-heading:hover {
background: none !important;
color: #111 !important;
}
/* 4. Disable link behavior if heading contains */
.section-heading a,
.block-heading h2 a {
color: inherit !important;
text-decoration: none !important;
pointer-events: none !important;
}
/**************************************************************
FIX: REMOVE THEME'S PURPLE STRIP (pseudo elements)
**************************************************************/
.block-heading::before,
.block-heading::after,
.news-blog-block-heading::before,
.news-blog-block-heading::after,
#featured-properties .block-heading::before,
#featured-properties .block-heading::after,
.posts-archive .block-heading::before,
.posts-archive .block-heading::after,
.buying-guide-section .block-heading::before,
.buying-guide-section .block-heading::after {
content: none !important;
display: none !important;
background: none !important;
border: none !important;
height: 0 !important;
width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/**************************************************************
TRUE APPLE-STYLE HEADING
**************************************************************/
.section-heading,
.block-heading > h2.section-heading {
font-size: 30px !important;
font-weight: 600 !important;
color: #111 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 0 22px 0 !important;
line-height: 1.2 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
}
/* icon styling */
.section-heading .heading-icon {
font-size: 22px !important;
color: #777 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Icon element inside heading-icon */
.section-heading .heading-icon i {
font-size: 22px !important;
color: #777 !important;
background: transparent !important;
}
/* remove hover */
.section-heading:hover {
background: transparent !important;
color: #111 !important;
}
/* FULL OVERRIDE FOR SECTION HEADING WRAPPERS β APPLE STYLE */
.block-heading,
.block-heading * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Remove padding from the wrapper */
.block-heading {
padding: 0 !important;
margin-bottom: 25px !important;
}
/* Now apply the actual Apple-style typography */
.block-heading h2.section-heading,
.section-heading {
font-size: 28px !important;
font-weight: 700 !important;
color: #1f1f1f !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* ============================================================
FINAL FIX: Remove grey background from block-heading sections
Make all section headings white background + Apple style
OVERRIDE style.css .block-heading { background:#efefef; }
============================================================ */
/* Remove grey background from ALL block-heading containers - HIGHEST SPECIFICITY */
body.home .block-heading,
body.home #featured-properties .block-heading,
body.home .posts-archive .block-heading,
body.home .news-blog-block-heading,
body.home .buying-guide-section .block-heading,
body.home .page-section .block-heading,
.block-heading,
#featured-properties .block-heading,
.posts-archive .block-heading,
.news-blog-block-heading,
.buying-guide-section .block-heading,
.page-section .block-heading,
div.block-heading,
div#featured-properties div.block-heading,
div.posts-archive div.block-heading {
background: #ffffff !important;
background-color: #ffffff !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
height: auto !important;
min-height: auto !important;
padding: 0 !important;
margin-bottom: 30px !important;
}
/* Remove grey background from h4 inside block-heading */
.block-heading h4,
.block-heading h2,
#featured-properties .block-heading h4,
#featured-properties .block-heading h2,
.posts-archive .block-heading h4,
.posts-archive .block-heading h2,
.news-blog-block-heading h4,
.news-blog-block-heading h2,
.buying-guide-section .block-heading h4,
.buying-guide-section .block-heading h2 {
background: transparent !important;
background-color: transparent !important;
color: #1f1f1f !important;
}
/* Remove grey background from heading-icon - FULL PATH SELECTORS */
section#featured-properties.page-section .container .row .col-md-12 .block-heading .heading-icon,
section#featured-properties .container .row .col-md-12 .block-heading .heading-icon,
#featured-properties.page-section .container .row .col-md-12 .block-heading .heading-icon,
#featured-properties.page-section .container .row .block-heading .heading-icon,
#featured-properties.page-section .container .block-heading .heading-icon,
#featured-properties.page-section .block-heading .heading-icon,
#featured-properties .container .row .col-md-12 .block-heading .heading-icon,
#featured-properties .container .row .block-heading .heading-icon,
#featured-properties .container .block-heading .heading-icon,
#featured-properties .block-heading .heading-icon,
.container .row .col-md-6.posts-archive .block-heading.news-blog-block-heading .heading-icon,
.container .row .posts-archive .block-heading.news-blog-block-heading .heading-icon,
.container .posts-archive .block-heading.news-blog-block-heading .heading-icon,
.row .col-md-6.posts-archive .block-heading.news-blog-block-heading .heading-icon,
.row .posts-archive .block-heading.news-blog-block-heading .heading-icon,
.col-md-6.posts-archive .block-heading.news-blog-block-heading .heading-icon,
.posts-archive .block-heading.news-blog-block-heading .heading-icon,
.posts-archive .block-heading .heading-icon,
.news-blog-block-heading .heading-icon,
.page-section.buying-guide-section .container .row .col-md-12.posts-archive .block-heading .heading-icon,
.page-section.buying-guide-section .container .row .block-heading .heading-icon,
.page-section.buying-guide-section .container .block-heading .heading-icon,
.page-section.buying-guide-section .block-heading .heading-icon,
.buying-guide-section .container .row .col-md-12.posts-archive .block-heading .heading-icon,
.buying-guide-section .container .row .block-heading .heading-icon,
.buying-guide-section .container .block-heading .heading-icon,
.buying-guide-section .block-heading .heading-icon,
.block-heading .heading-icon {
background: transparent !important;
background-color: transparent !important;
}
/* Remove grey background from page sections */
#featured-properties.page-section,
.news-blog-section.page-section,
.buying-guide-section.page-section,
.page-section {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* OVERRIDE: Remove grey background from .block-heading containers - MAXIMUM SPECIFICITY */
/* This overrides line 9599: background-color: #efefef !important */
section#featured-properties.page-section .container .row .col-md-12 .block-heading,
section#featured-properties .container .row .col-md-12 .block-heading,
#featured-properties.page-section .container .row .col-md-12 .block-heading,
#featured-properties.page-section .container .row .block-heading,
#featured-properties.page-section .container .block-heading,
#featured-properties.page-section .block-heading,
#featured-properties .container .row .col-md-12 .block-heading,
#featured-properties .container .row .block-heading,
#featured-properties .container .block-heading,
#featured-properties .block-heading,
.page-section#featured-properties .block-heading,
.container .row .col-md-6.posts-archive .block-heading.news-blog-block-heading,
.container .row .posts-archive .block-heading.news-blog-block-heading,
.container .posts-archive .block-heading.news-blog-block-heading,
.row .col-md-6.posts-archive .block-heading.news-blog-block-heading,
.row .posts-archive .block-heading.news-blog-block-heading,
.col-md-6.posts-archive .block-heading.news-blog-block-heading,
.posts-archive .block-heading.news-blog-block-heading,
.posts-archive .block-heading,
.news-blog-block-heading,
.page-section.buying-guide-section .container .row .col-md-12.posts-archive .block-heading,
.page-section.buying-guide-section .container .row .block-heading,
.page-section.buying-guide-section .container .block-heading,
.page-section.buying-guide-section .block-heading,
.buying-guide-section .container .row .col-md-12.posts-archive .block-heading,
.buying-guide-section .container .row .block-heading,
.buying-guide-section .container .block-heading,
.buying-guide-section .block-heading,
body.home .page-section .block-heading,
.page-section .block-heading,
.container .row .block-heading,
.container .block-heading,
.row .block-heading,
.block-heading {
background: transparent !important;
background-color: transparent !important;
/* Override line 9752: background-color: #c8c8c8 !important */
/* Override line 9599: background-color: #efefef !important */
}
/* ============================================================
FINAL APPLE-STYLE HEADING OVERRIDE - MAXIMUM SPECIFICITY
OVERRIDES ALL EXISTING !important RULES (lines 9595-9777)
============================================================ */
/* FULL HTML STRUCTURE SELECTORS - Include ALL parent containers */
/* 1. Great Offers For This Month - FULL PATH */
section#featured-properties.page-section .container .row .col-md-12 .block-heading h2.section-heading,
section#featured-properties.page-section .container .row .col-md-12 .block-heading h2,
section#featured-properties .container .row .col-md-12 .block-heading h2.section-heading,
section#featured-properties.page-section .block-heading h2.section-heading,
section#featured-properties .block-heading h2.section-heading,
#featured-properties.page-section .container .row .col-md-12 .block-heading h2.section-heading,
#featured-properties.page-section .container .row .block-heading h2.section-heading,
#featured-properties.page-section .container .block-heading h2.section-heading,
#featured-properties.page-section .block-heading h2.section-heading,
#featured-properties .container .row .col-md-12 .block-heading h2.section-heading,
#featured-properties .container .row .block-heading h2.section-heading,
#featured-properties .container .block-heading h2.section-heading,
#featured-properties .block-heading h2.section-heading,
body.home section#featured-properties.page-section .block-heading h2.section-heading,
body.home #featured-properties.page-section .block-heading h2.section-heading,
body.home #featured-properties .block-heading h2.section-heading,
.page-section#featured-properties .block-heading h2.section-heading,
.page-section#featured-properties .block-heading h2,
/* 2. Real Estate Turkey News - FULL PATH */
.container .row .col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.container .row .posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.container .posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.row .col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.row .posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.col-md-6.posts-archive .block-heading h2.section-heading,
.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.posts-archive .block-heading h2.section-heading,
.posts-archive .news-blog-block-heading h2.section-heading,
.news-blog-block-heading h2.section-heading,
body.home .container .row .col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
body.home .posts-archive .block-heading.news-blog-block-heading h2.section-heading,
body.home .posts-archive .block-heading h2.section-heading,
/* 3. Blog - FULL PATH */
.container .row .col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
.posts-archive .block-heading.news-blog-block-heading h2.section-heading,
/* 4. Buying Guide - FULL PATH */
div.page-section.buying-guide-section .container .row .col-md-12.posts-archive .block-heading h2.section-heading,
.page-section.buying-guide-section .container .row .col-md-12.posts-archive .block-heading h2.section-heading,
.page-section.buying-guide-section .container .row .block-heading h2.section-heading,
.page-section.buying-guide-section .container .block-heading h2.section-heading,
.page-section.buying-guide-section .block-heading h2.section-heading,
.buying-guide-section .container .row .col-md-12.posts-archive .block-heading h2.section-heading,
.buying-guide-section .container .row .block-heading h2.section-heading,
.buying-guide-section .container .block-heading h2.section-heading,
.buying-guide-section .block-heading h2.section-heading,
body.home .page-section.buying-guide-section .block-heading h2.section-heading,
body.home .buying-guide-section .block-heading h2.section-heading,
/* 5. Generic fallbacks with maximum specificity */
body.home .page-section .container .row .block-heading h2.section-heading,
body.home .page-section .block-heading h2.section-heading,
.page-section .container .row .block-heading h2.section-heading,
.page-section .block-heading h2.section-heading,
.container .row .block-heading h2.section-heading,
.container .block-heading h2.section-heading,
.row .block-heading h2.section-heading,
.block-heading h2.section-heading,
.block-heading h2,
h2.section-heading,
.section-heading {
/* FONT STYLES - Apple-style typography (thin, clean, modern) */
/* Override line 2417: font-family: "Montserrat" */
/* Override line 9633-9637: h2, h3 rules (font-weight: 600) */
/* Override line 9780-9786: h2 rules (font-size: 30px, font-weight: 500, letter-spacing: 0.3px) */
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 32px !important; /* Slightly larger for Apple style - Override line 9781 font-size: 30px */
font-weight: 300 !important; /* Thin/light weight for Apple style - Override line 9634 font-weight: 600, line 9782 font-weight: 500 */
font-style: normal !important;
font-variant: normal !important;
text-transform: none !important;
letter-spacing: -0.8px !important; /* Tighter spacing for Apple style - Override line 9635 letter-spacing: -0.3px, line 9783 letter-spacing: 0.3px */
line-height: 1.15 !important; /* Tighter line height - Override line 9636 line-height: 1.1, line 9785 line-height: 1.3 */
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
/* COLOR - Override line 9611 color: #1a1a1a */
color: #1f1f1f !important;
/* LAYOUT */
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 0 30px 0 !important;
/* BACKGROUND & BORDERS - Override line 9599, 9610, 9752 */
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
border-radius: 0 !important;
/* SIZING - Override line 9758 height: auto */
height: auto !important;
min-height: auto !important;
max-height: none !important;
width: auto !important;
}
/* Icon styling - FULL PATH SELECTORS */
section#featured-properties.page-section .container .row .col-md-12 .block-heading h2.section-heading .heading-icon,
section#featured-properties .container .row .col-md-12 .block-heading h2.section-heading .heading-icon,
#featured-properties.page-section .container .row .col-md-12 .block-heading h2.section-heading .heading-icon,
#featured-properties.page-section .container .row .block-heading h2.section-heading .heading-icon,
#featured-properties.page-section .container .block-heading h2.section-heading .heading-icon,
#featured-properties.page-section .block-heading h2.section-heading .heading-icon,
#featured-properties .container .row .col-md-12 .block-heading h2.section-heading .heading-icon,
#featured-properties .container .row .block-heading h2.section-heading .heading-icon,
#featured-properties .container .block-heading h2.section-heading .heading-icon,
#featured-properties .block-heading h2.section-heading .heading-icon,
.container .row .col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading .heading-icon,
.container .row .posts-archive .block-heading.news-blog-block-heading h2.section-heading .heading-icon,
.container .posts-archive .block-heading.news-blog-block-heading h2.section-heading .heading-icon,
.row .col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading .heading-icon,
.row .posts-archive .block-heading.news-blog-block-heading h2.section-heading .heading-icon,
.col-md-6.posts-archive .block-heading.news-blog-block-heading h2.section-heading .heading-icon,
.posts-archive .block-heading.news-blog-block-heading h2.section-heading .heading-icon,
.posts-archive .block-heading h2.section-heading .heading-icon,
.news-blog-block-heading h2.section-heading .heading-icon,
.page-section.buying-guide-section .container .row .col-md-12.posts-archive .block-heading h2.section-heading .heading-icon,
.page-section.buying-guide-section .container .row .block-heading h2.section-heading .heading-icon,
.page-section.buying-guide-section .container .block-heading h2.section-heading .heading-icon,
.page-section.buying-guide-section .block-heading h2.section-heading .heading-icon,
.buying-guide-section .container .row .col-md-12.posts-archive .block-heading h2.section-heading .heading-icon,
.buying-guide-section .container .row .block-heading h2.section-heading .heading-icon,
.buying-guide-section .container .block-heading h2.section-heading .heading-icon,
.buying-guide-section .block-heading h2.section-heading .heading-icon,
body.home .page-section .block-heading h2.section-heading .heading-icon,
.page-section .block-heading h2.section-heading .heading-icon,
.container .row .block-heading h2.section-heading .heading-icon,
.container .block-heading h2.section-heading .heading-icon,
.row .block-heading h2.section-heading .heading-icon,
.block-heading h2.section-heading .heading-icon,
.section-heading .heading-icon,
h2.section-heading .heading-icon {
font-size: 22px !important;
color: #888 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
background-color: transparent !important;
width: auto !important;
height: auto !important;
min-width: auto !important;
min-height: auto !important;
margin: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.section-heading .heading-icon i,
.block-heading .section-heading .heading-icon i,
#featured-properties .section-heading .heading-icon i,
.posts-archive .section-heading .heading-icon i,
.news-blog-block-heading .section-heading .heading-icon i,
.buying-guide-section .section-heading .heading-icon i,
h2.section-heading .heading-icon i,
.section-heading .heading-icon .fa,
.block-heading .section-heading .heading-icon .fa {
color: #888 !important;
font-size: 22px !important;
background: transparent !important;
background-color: transparent !important;
font-weight: normal !important;
font-style: normal !important;
}
/* Hover effects for headings with clickable links - show pointer cursor */
.posts-archive .section-heading a.section-heading-link,
.news-blog-block-heading .section-heading a.section-heading-link,
.buying-guide-section .section-heading a.section-heading-link {
position: relative !important;
}
/* Remove hover effects for non-clickable headings - ALL SELECTORS */
.section-heading:hover,
.block-heading h2.section-heading:hover,
#featured-properties .section-heading:hover,
#featured-properties .block-heading h2.section-heading:hover,
.posts-archive .section-heading:hover,
.posts-archive .block-heading h2.section-heading:hover,
.posts-archive .block-heading.news-blog-block-heading h2.section-heading:hover,
.news-blog-block-heading .section-heading:hover,
.news-blog-block-heading h2.section-heading:hover,
.buying-guide-section .section-heading:hover,
.buying-guide-section .block-heading h2.section-heading:hover,
h2.section-heading:hover,
body.home .section-heading:hover,
body.home .block-heading h2.section-heading:hover {
background: transparent !important;
background-color: transparent !important;
text-decoration: none !important;
transform: none !important;
transition: none !important;
}
/* Clickable heading links - News, Blog, Buying Guide */
.section-heading-link,
.section-heading a.section-heading-link,
h2.section-heading a.section-heading-link,
.posts-archive .section-heading a.section-heading-link,
.news-blog-block-heading .section-heading a.section-heading-link,
.buying-guide-section .section-heading a.section-heading-link {
color: inherit !important;
text-decoration: none !important;
background: transparent !important;
cursor: pointer !important;
pointer-events: auto !important;
transition: color 0.25s ease, opacity 0.25s ease !important;
display: inline !important;
}
/* Hover effects for clickable headings */
.section-heading-link:hover,
.section-heading a.section-heading-link:hover,
h2.section-heading a.section-heading-link:hover,
.posts-archive .section-heading a.section-heading-link:hover,
.news-blog-block-heading .section-heading a.section-heading-link:hover,
.buying-guide-section .section-heading a.section-heading-link:hover {
color: #007AFF !important; /* Apple blue hover color */
opacity: 0.85 !important;
text-decoration: none !important;
background: transparent !important;
}
/* Remove old non-clickable link styling for other links */
.section-heading a:not(.section-heading-link),
.block-heading h2.section-heading a:not(.section-heading-link),
#featured-properties .section-heading a:not(.section-heading-link) {
color: inherit !important;
text-decoration: none !important;
pointer-events: none !important;
background: transparent !important;
}
/* Modern read more toggle - handled by homepage-read-more.css (loaded after this file) */
/* ============================================================
ADD SECOND LINE TO NEWS/BLOG CARDS (match Buying Guide)
Ensure .post-card-flex in News/Blog cards has border-bottom
============================================================ */
/* Ensure .post-card-flex in News/Blog cards has the border-bottom line */
.post.news-blog-post .post-title + .post-card-flex,
.post.news-blog-post .post-card-flex,
.news-blog-post .post-title + .post-card-flex,
.news-blog-post .post-card-flex {
border-bottom: 1px solid rgba(227, 227, 227, 0.7) !important;
padding-bottom: 0 !important; /* Ensure border is visible */
margin-bottom: 0 !important; /* Ensure border is visible */
}
/* Also ensure the border appears even if there's spacing */
.posts-archive .post.news-blog-post .post-card-flex,
.col-md-6.posts-archive .post.news-blog-post .post-card-flex,
body.home .posts-archive .post.news-blog-post .post-card-flex,
body.home .col-md-6.posts-archive .post.news-blog-post .post-card-flex {
border-bottom: 1px solid rgba(227, 227, 227, 0.7) !important;
}
/* ============================================================
FIX: Allow card shadows to be visible everywhere
Override overflow rules to prevent shadow clipping
============================================================ */
#featured-properties .owl-carousel,
.great-offers-wrapper .owl-carousel,
#featured-properties .owl-stage-outer,
.great-offers-wrapper .owl-stage-outer,
#featured-properties .owl-stage,
.great-offers-wrapper .owl-stage {
overflow: visible !important; /* Allow shadows to extend beyond container */
}
/* Fix: Ensure each owl item doesn't clip card shadow */
#featured-properties .owl-item,
.great-offers-wrapper .owl-item {
overflow: visible !important; /* Allow card shadows to be visible */
}
/* ============================================================
FIX: Ensure card shadows sit ON TOP of next section
Use z-index layering for proper shadow visibility
============================================================ */
.great-offers-wrapper {
position: relative !important;
z-index: 2 !important; /* Higher z-index so shadows appear above next section */
}
.page-section.news-blog-section {
position: relative !important;
z-index: 0 !important; /* Lower z-index so it sits behind card shadows */
}
/* Alternative: Make backgrounds transparent if needed */
.page-section.news-blog-section,
.page-section {
background: transparent !important;
}
/* ============================================================
GUARANTEED FIX: Card shadow clipping in OwlCarousel
Override Owl's inline styles that set overflow: hidden
============================================================ */
/* FIX shadow clipping for all Owl carousels */
.great-offers-wrapper .owl-stage-outer,
.featured-properties-section .owl-stage-outer,
#featured-properties .owl-stage-outer,
div.owl-stage-outer[style] {
overflow: visible !important; /* Override Owl's inline overflow: hidden */
}
/* FIX FEATURED PROPERTIES CARD SHADOW CLIPPING */
section#featured-properties.page-section,
section#featured-properties,
#featured-properties,
.page-section#featured-properties {
overflow: visible !important;
position: relative !important;
z-index: 5 !important;
}
/* ============================================================
LISTING PAGE β UI IMPROVEMENTS
============================================================ */
/* Location Description β Enhanced styling */
.property-listing-page .property-location-description,
.property-detail-page .property-location-description {
font-size: 17px !important;
line-height: 1.6 !important;
color: #444 !important;
margin-bottom: 20px !important;
display: flex !important;
align-items: flex-start !important;
}
.property-listing-page .property-location-description i.fa-map-marker,
.property-detail-page .property-location-description i.fa-map-marker {
margin-right: 10px !important;
margin-top: 3px !important;
color: #666 !important;
font-size: 18px !important;
flex-shrink: 0 !important;
}
.property-listing-page .property-location-description a,
.property-detail-page .property-location-description a {
color: #0066cc !important;
text-decoration: none !important;
}
.property-listing-page .property-location-description a:hover,
.property-detail-page .property-location-description a:hover {
text-decoration: underline !important;
}
/* ============================================
GUIDE PAGE H2 HEADING SPACING - MAXIMUM SPECIFICITY
Override all conflicting rules for better readability
============================================ */
/* H2 Headings - Force vertical spacing with maximum specificity */
/* Use padding-top instead of margin-top to prevent margin collapse */
html.guide-page .guide-content-sections h2,
html.guide-page .guide-content-wrapper h2,
html.guide-page .guide-content h2,
html.guide-page .single-property .guide-content-sections h2,
html.guide-page .single-property .guide-content-wrapper h2,
html.guide-page .single-property .guide-content h2,
html.guide-page .left-column .guide-content-sections h2,
html.guide-page .left-column .guide-content-wrapper h2,
html.guide-page .left-column .guide-content h2,
html.guide-page .guide-section-card h2,
html.guide-page .guide-card h2,
html.guide-page .guide-section-card .guide-section-title,
html.guide-page .guide-card .guide-section-title,
html.guide-page .guide-section-title,
html.guide-page .guide-title,
body.guide-page .guide-content-sections h2,
body.guide-page .guide-content-wrapper h2,
body.guide-page .guide-content h2 {
margin-top: 0 !important; /* Set to 0 to prevent collapse */
padding-top: 32px !important; /* Use padding instead for reliable spacing */
margin-bottom: 20px !important;
padding-bottom: 12px !important;
}
/* First H2 in article - no top padding */
/* Only apply to the VERY FIRST h2 in the entire article */
html.guide-page .guide-content-sections > h2:first-of-type,
html.guide-page .guide-content-wrapper > h2:first-of-type,
html.guide-page .guide-content > h2:first-of-type,
html.guide-page .single-property .guide-content-sections > h2:first-of-type,
html.guide-page .single-property .guide-content-wrapper > h2:first-of-type,
html.guide-page .single-property .guide-content > h2:first-of-type,
html.guide-page .left-column .guide-content-sections > h2:first-of-type,
html.guide-page .left-column .guide-content-wrapper > h2:first-of-type,
html.guide-page .left-column .guide-content > h2:first-of-type,
html.guide-page .guide-content-sections .guide-section-card:first-child h2,
html.guide-page .guide-content-sections .guide-card:first-child h2,
html.guide-page .guide-content-sections .guide-section-card:first-child .guide-section-title,
html.guide-page .guide-content-sections .guide-card:first-child .guide-section-title,
body.guide-page .guide-content-sections h2:first-of-type,
body.guide-page .guide-content-wrapper h2:first-of-type,
body.guide-page .guide-content h2:first-of-type {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Space after heading border before first paragraph - maximum specificity */
html.guide-page .guide-content-sections h2 + p,
html.guide-page .guide-content-wrapper h2 + p,
html.guide-page .guide-content h2 + p,
html.guide-page .single-property .guide-content-sections h2 + p,
html.guide-page .single-property .guide-content-wrapper h2 + p,
html.guide-page .single-property .guide-content h2 + p,
html.guide-page .left-column .guide-content-sections h2 + p,
html.guide-page .left-column .guide-content-wrapper h2 + p,
html.guide-page .left-column .guide-content h2 + p,
html.guide-page .guide-section-card h2 + *,
html.guide-page .guide-card h2 + *,
html.guide-page .guide-section-title + *,
html.guide-page .guide-title + *,
html.guide-page .guide-section-card .guide-section-title + *,
html.guide-page .guide-card .guide-section-title + *,
body.guide-page .guide-content-sections h2 + p,
body.guide-page .guide-content-wrapper h2 + p,
body.guide-page .guide-content h2 + p {
margin-top: 24px !important;
}
/* CRITICAL FIX: Force padding-top on guide-section-title inside cards */
/* This must override any first-child rules that might be resetting it */
html.guide-page .guide-section-card .guide-section-title,
html.guide-page .guide-card .guide-section-title,
html.guide-page .guide-section-card h2.guide-section-title,
html.guide-page .guide-card h2.guide-section-title {
padding-top: 32px !important;
margin-top: 0 !important;
}
/* Only remove padding for the VERY FIRST card in the entire article */
html.guide-page .guide-content-sections > .guide-section-card:first-child .guide-section-title,
html.guide-page .guide-content-sections > .guide-card:first-child .guide-section-title,
html.guide-page .guide-content-sections > .guide-section-card:first-child h2.guide-section-title,
html.guide-page .guide-content-sections > .guide-card:first-child h2.guide-section-title {
padding-top: 0 !important;
}
/* ============================================================
LEGAL PAGES - Clean Apple-Style H1 Title (matches guide pages)
============================================================ */
html.legal-page .guide-article-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 32px 0 24px 0 !important; /* ~32px gap below menu on desktop */
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
}
@media (max-width: 767px) {
html.legal-page .guide-article-title {
font-size: 24px !important;
margin-top: 28px !important; /* slightly tighter but still ~28β32px total on mobile */
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
}
/* Hide grey page-header on legal pages */
html.legal-page .site-showcase,
html.legal-page .parallax.page-header,
html.legal-page .page-header {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Legal page purpose line and updated date */
html.legal-page .legal-page-purpose {
color: #666 !important;
font-size: 16px !important;
line-height: 1.5 !important;
margin: -8px 0 12px 0 !important;
padding: 0 !important;
}
html.legal-page .legal-page-updated {
color: #888 !important;
font-size: 13px !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
}
/* Legal page micro-labels for scannability */
html.legal-page .legal-micro-label {
color: #888 !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
/* Legal page headings - slightly bolder */
html.legal-page .page-content h2 {
font-weight: 600 !important;
color: #222 !important;
margin-top: 40px !important;
margin-bottom: 16px !important;
}
html.legal-page .page-content h3 {
font-weight: 600 !important;
color: #333 !important;
margin-top: 24px !important;
margin-bottom: 12px !important;
}
/* Legal page body text - lighter (#444) */
html.legal-page .page-content {
color: #444 !important;
padding-bottom: 40px !important; /* ensure comfortable gap above footer */
}
html.legal-page .page-content p {
color: #444 !important;
line-height: 1.7 !important;
margin-bottom: 16px !important;
}
html.legal-page .page-content ul,
html.legal-page .page-content li {
color: #444 !important;
line-height: 1.7 !important;
}
/* Add spacing and visible bullets for lists */
html.legal-page .page-content ul {
margin-bottom: 20px !important;
list-style-type: disc !important;
list-style-position: outside !important;
margin-left: 20px !important;
padding-left: 20px !important;
}
html.legal-page .page-content ul ul {
list-style-type: circle !important;
}
html.legal-page .page-content li {
margin-bottom: 8px !important;
}
/* Legal page bottom "Last Updated" line as soft footer */
html.legal-page .page-content em {
display: block;
margin-top: 24px !important;
opacity: 0.85;
}
/* Page title, intro, and meta styling (for testimonials and similar pages) */
html.legal-page .page-title {
font-family: "Inter", "SF Pro Display", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 600 !important;
color: #2C3E50 !important;
margin: 32px 0 24px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
}
html.legal-page .page-intro {
color: #666 !important;
font-size: 16px !important;
line-height: 1.5 !important;
margin: -8px 0 12px 0 !important;
padding: 0 !important;
}
html.legal-page .page-meta {
color: #888 !important;
font-size: 13px !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
}
@media (max-width: 767px) {
html.legal-page .page-title {
font-size: 24px !important;
margin-top: 28px !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
}
/* Experience records styling - Card-based design for human readability */
html.legal-page .experience-explainer,
html.legal-page .experience-compliance {
margin: 40px 0 32px 0 !important;
padding: 0 !important;
}
html.legal-page .experience-explainer h2,
html.legal-page .experience-compliance h2 {
font-weight: 600 !important;
color: #222 !important;
margin-bottom: 16px !important;
margin-top: 0 !important;
}
/* Card-based experience records */
html.legal-page .experience-record {
background: #ffffff !important;
border: 1px solid #e6e6e6 !important;
border-radius: 6px !important;
padding: 20px 24px !important;
margin-bottom: 24px !important;
margin-top: 0 !important;
}
html.legal-page .experience-record:last-of-type {
margin-bottom: 0 !important;
}
html.legal-page .experience-record h3 {
margin-bottom: 12px !important;
margin-top: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
}
/* Grid layout for experience meta information */
html.legal-page .experience-meta {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px 24px !important;
margin-bottom: 12px !important;
list-style: none !important;
padding: 0 !important;
}
html.legal-page .experience-meta.experience-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px 24px !important;
}
/* Experience purpose sentence */
html.legal-page .experience-purpose {
font-size: 14px !important;
color: #666 !important;
line-height: 1.5 !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
font-style: italic !important;
}
html.legal-page .experience-meta li {
font-size: 14px !important;
color: #444 !important;
line-height: 1.5 !important;
margin: 0 !important;
}
html.legal-page .experience-meta li strong {
color: #222 !important;
font-weight: 600 !important;
}
html.legal-page .experience-meta li a {
color: #2D85D3 !important;
text-decoration: none !important;
}
html.legal-page .experience-meta li a:hover {
text-decoration: underline !important;
}
html.legal-page .experience-summary {
font-size: 15px !important;
line-height: 1.6 !important;
color: #333 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Page hint styling */
html.legal-page .page-hint {
color: #666 !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
font-style: italic !important;
}
/* Page framing sentence */
html.legal-page .page-framing {
color: #444 !important;
font-size: 15px !important;
line-height: 1.6 !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
font-weight: 400 !important;
}
/* Legal page scope clarification */
html.legal-page .legal-page-scope {
color: #666 !important;
font-size: 14px !important;
line-height: 1.5 !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
font-style: italic !important;
}
/* Responsive: stack meta on mobile */
@media (max-width: 767px) {
html.legal-page .experience-meta,
html.legal-page .experience-meta.experience-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
html.legal-page .experience-record {
padding: 16px 20px !important;
}
}
/* FRAMEWORK v1.1.1 - Heading Style Preservation */
.property-details-heading, h2.property-details-heading, h3.property-details-heading { font-size: 26px !important; font-weight: 600 !important; color: #000000 !important; margin-top: 32px !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid #e5e7eb !important; font-family: "Poppins", "Inter", "SF Pro Display", Arial, sans-serif !important; line-height: 1.4 !important; letter-spacing: 0.3px !important; }
.property-location-heading, h2.property-location-heading, h3.property-location-heading { font-size: 26px !important; font-weight: 600 !important; color: #000000 !important; margin-top: 32px !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid #e5e7eb !important; font-family: "Poppins", "Inter", "SF Pro Display", Arial, sans-serif !important; line-height: 1.4 !important; letter-spacing: 0.3px !important; }
.features-heading, h2.features-heading, h3.features-heading { font-size: 26px !important; font-weight: 600 !important; color: #000000 !important; margin-top: 32px !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid #e5e7eb !important; font-family: "Poppins", "Inter", "SF Pro Display", Arial, sans-serif !important; line-height: 1.4 !important; letter-spacing: 0.3px !important; }
.related-properties-heading, h2.related-properties-heading, h3.related-properties-heading { font-size: 26px !important; font-weight: 600 !important; color: #000000 !important; margin-top: 32px !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid #e5e7eb !important; font-family: "Poppins", "Inter", "SF Pro Display", Arial, sans-serif !important; line-height: 1.4 !important; letter-spacing: 0.3px !important; }
/* =========================================================
ACCESSIBILITY HOTFIX β SAFE FOR SEO & UI
Target: Lighthouse Accessibility 82 β ~88
========================================================= */
/* 1οΈβ£ Ensure semantic heading clarity (visual unchanged) */
h2.section-heading,
h3.section-subheading {
display: block;
}
/* Prevent misuse of lower headings styled as primary */
h4.section-heading,
h5.section-heading,
h6.section-heading {
font-size: 20px !important;
font-weight: 500 !important;
}
/* 2οΈβ£ Restore accessible link affordance (no visual break) */
.section-heading a,
.read-more-toggle-property,
.read-more-toggle,
a.read-more {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Keyboard focus visibility */
.section-heading a:focus,
.read-more-toggle-property:focus,
.read-more-toggle:focus,
a.read-more:focus {
outline: 2px solid #007aff;
outline-offset: 2px;
}
/* Hover remains Apple-style */
.section-heading a:hover,
.read-more-toggle-property:hover,
.read-more-toggle:hover,
a.read-more:hover {
opacity: 0.85;
}
/* 3οΈβ£ Fix color-only link distinction - exclude image links */
a:not(.btn):not(.button):not([class*="button"]) {
text-decoration-thickness: 1px;
}
/* Ensure images are always visible - override any conflicting rules */
img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-width: 100% !important;
height: auto !important;
}
/* Ensure images inside links are visible */
a img,
a > img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
text-decoration: none !important;
}
/* 4οΈβ£ Prevent ARIA misuse warnings - handled via HTML, CSS ensures proper display */
[role="heading"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
display: block;
}
/* 5οΈβ£ Lists: silence Lighthouse false-positives safely */
ul > div,
ul > section {
display: block;
}
/* ============================================================
ACCESSIBILITY FIXES FOR PAGESPEED INSIGHTS
Applied: 2026-01-XX
Target: Improve Accessibility score from ~88 to 94-97
============================================================ */
/* ============================================================
ACCESSIBILITY FIX #1: Green Price Badge Contrast
Change from #22c55e to #1e8f4d for WCAG 4.5:1+ contrast
============================================================ */
.green-price-badge,
.ep-card .green-price-badge,
.editor-picks-card .green-price-badge,
#featured-properties .green-price-badge,
#featured-properties .property-info .green-price-badge {
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important;
font-weight: 600 !important;
}
/* ============================================================
ACCESSIBILITY FIX #2: Light Grey Text Contrast (#999 β #666)
============================================================ */
/* Fix footer review text */
footer .site-footer-bottom1 span[style*="color: #999"],
footer .site-footer-bottom1 span[style*="color:#999"] {
color: #666 !important;
}
/* Global override for any #999 text */
[style*="color: #999"],
[style*="color:#999"],
[style*="color: rgb(153"],
[style*="color:rgba(153"] {
color: #666 !important;
}
/* ============================================================
ACCESSIBILITY FIX #3: Link Distinguishability
Add underlines to content and footer links
============================================================ */
/* Footer links */
.site-footer-bottom1 a,
footer a,
.footer-col a,
.footer-social a {
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
.site-footer-bottom1 a:hover,
footer a:hover,
.footer-col a:hover,
.footer-social a:hover {
text-decoration-thickness: 2px !important;
}
/* Content area links */
.content a,
#content a,
.main a:not(.property-card-link):not(.ep-card):not(.editor-picks-card):not(.read-more-toggle-intro-mobile):not(.read-more-toggle-seo-mobile):not(.read-more-toggle-why-turkey),
p a,
li a,
.ai-summary a,
.intro-mobile-collapsed a {
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
.content a:hover,
#content a:hover,
.main a:not(.property-card-link):not(.ep-card):not(.editor-picks-card):hover,
p a:hover,
li a:hover {
text-decoration-thickness: 2px !important;
}
/* Exclude decorative/button links */
.property-card-link,
.ep-card,
.editor-picks-card,
.read-more-toggle-intro-mobile,
.read-more-toggle-seo-mobile,
.read-more-toggle-why-turkey,
button,
.btn,
.nav-link,
.menu-item a {
text-decoration: none !important;
}
/* ============================================================
ACCESSIBILITY FIX #4: Owl Carousel List Structure
Hide text nodes before li elements
============================================================ */
.owl-carousel.great-offers-carousel,
.owl-carousel {
font-size: 0; /* Hide text nodes */
}
.owl-carousel.great-offers-carousel li,
.owl-carousel li {
font-size: 16px; /* Restore font size for li content */
}
/* Ensure proper list structure */
.owl-carousel.great-offers-carousel {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* ============================================================
ACCESSIBILITY FIX #5: Read More Button Styling
Style button elements to match link appearance
============================================================ */
.read-more-toggle-intro-mobile,
.read-more-toggle-seo-mobile,
.read-more-toggle-why-turkey {
background: none !important;
border: none !important;
padding: 0 !important;
font-family: inherit !important;
font-size: inherit !important;
color: inherit !important;
cursor: pointer !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
.read-more-toggle-intro-mobile:hover,
.read-more-toggle-seo-mobile:hover,
.read-more-toggle-why-turkey:hover {
text-decoration-thickness: 2px !important;
}
/* ============================================================
ACCESSIBILITY FIX #6: Desktop-Specific Contrast Fixes
Price Prefix & Link Text Contrast Improvements
============================================================ */
.price-prefix {
color: #ffffff !important; /* White text on green badge */
font-weight: 600 !important;
}
.link-text-homepage {
color: #195385 !important; /* Dark blue for better contrast */
font-weight: 500 !important;
}
.link-text-homepage:hover {
color: #0d3d5c !important; /* Darker on hover */
}
/* ============================================================
PSI ACCESSIBILITY FIXES - NO DESIGN CHANGES
============================================================ */
/* Screen reader only text - hidden visually, accessible to screen readers */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border-width: 0 !important;
}
/* Improved contrast for price badges - slightly darker green (minimal visual change) */
.price-badge {
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important;
}
/* Related property price badge contrast */
html.property-listing-page .related-property-price-badge {
background: #33cc66 !important; /* Same green as city hubs listings */
color: #ffffff !important;
}
html.property-listing-page .related-property-price-badge .price-prefix,
html.property-listing-page .related-property-price-badge .price-number {
color: #ffffff !important;
}
/* Link contrast - darker blue for better contrast */
a[href="/real-estate-in-belek"],
a[href="/advantages-close-to-the-beach"],
.city-hub-link a,
.property-advantage-confirmation a {
color: #0051a5 !important; /* Darker blue - was #0071e3, better contrast */
text-decoration: underline !important;
}
a[href="/real-estate-in-belek"]:hover,
a[href="/advantages-close-to-the-beach"]:hover,
.city-hub-link a:hover,
.property-advantage-confirmation a:hover {
color: #003d7a !important;
}
/* Button contrast - ensure buttons have good contrast */
.btn-brochure,
.btn-appointment,
form#askToSeller input[type="submit"],
form#detailform input[type="submit"] {
background: #1a3a7a !important; /* Navy blue - matches View Details button */
color: #ffffff !important;
border: 2px solid #1a3a7a !important;
}
.btn-brochure:hover,
.btn-appointment:hover,
form#askToSeller input[type="submit"]:hover,
form#detailform input[type="submit"]:hover {
background: #0d5aa7 !important; /* Navy blue hover - matches View Details button */
border-color: #0d5aa7 !important;
}
/* Unit tabs wrapper - fix list structure */
.nav-tabs-pills-wrapper {
position: relative;
}
.nav-tabs-pills-wrapper .unit-tabs-underline {
position: absolute;
bottom: -8px;
}
/* ============================================================
ACCESSIBILITY FIX #7: Enhanced List Structure Fixes
Hide text nodes in hero slider and owl carousels
============================================================ */
/* Hide any text nodes in owl carousels and hero slider */
.owl-carousel.great-offers-carousel,
.owl-carousel,
.hero-slider ul.slides {
font-size: 0 !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Restore font size for li content */
.owl-carousel.great-offers-carousel li,
.owl-carousel li,
.hero-slider ul.slides li {
font-size: 16px !important;
}
/* ============================================================
ACCESSIBILITY FIX #8: Read More Toggle SEO Button Styling
Style desktop read-more-toggle-seo button element
============================================================ */
.read-more-toggle-seo {
background: none !important;
border: none !important;
padding: 0 !important;
font-family: inherit !important;
font-size: inherit !important;
color: inherit !important;
cursor: pointer !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
.read-more-toggle-seo:hover {
text-decoration-thickness: 2px !important;
}