/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header (responsive, flex, sticky shrink + drawer)
05. banner (responsive, overlay, owl tweaks)
06. featured
07. video
08. fun facts
09. best deal
10. properties (cards)
11. contact (home)
12. footer
13. page header
14. properties (filters + pagination)
15. single property
16. contact page
17. responsive helpers
--------------------------------------------- */

/* 
---------------------------------------------
01) font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

/* 
---------------------------------------------
02) reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

ul, li { padding: 0; margin: 0; list-style: none; }
header, nav, section, article, aside, footer, hgroup { display: block; }
* { box-sizing: border-box; }

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none !important; }

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
}

ul { margin-bottom: 0; }

p { font-size: 14px; line-height: 28px; color: #4a4a4a; }

img { width: 100%; overflow: hidden; }

/* 
---------------------------------------------
03) global styles
--------------------------------------------- 
*/
::selection { background: #0071f8; color: #fff; }
::-moz-selection { background: #0071f8; color: #fff; }

.section { margin-top: 120px; }

.section-heading { margin-bottom: 70px; }
.section-heading h2 {
  font-size: 40px; font-weight: 700; text-transform: capitalize;
  margin-top: 20px; line-height: 56px;
}
.section-heading h2 em { font-style: normal; color: #0071f8; }
.section-heading h6 { color: #ee626b; font-size: 15px; text-transform: uppercase; font-weight: 700; }

.icon-button a {
  display: inline-block; background-color: #1e1e1e; color: #fff;
  font-size: 14px; font-weight: 400; height: 50px; line-height: 50px;
  padding: 0 30px 0 0; border-radius: 25px; transition: all .3s;
}
.icon-button a i {
  background-color: #D63032; height: 50px; width: 50px; text-align: center;
  border-radius: 50%; line-height: 50px; display: inline-block; margin-right: 15px; margin-left: -1px;
}
.icon-button a:hover { color: #D63032; }
.icon-button a:hover i { color: #fff; }

.main-button a {
  display: inline-block; background-color: #1e1e1e; color: #fff;
  font-size: 14px; font-weight: 500; height: 40px; line-height: 40px;
  padding: 0 30px; border-radius: 25px; transition: all .3s;
}
.main-button a:hover { background-color: #D63032; color: #fff; }

/* Pre-loader */
.js-preloader {
  position: fixed; inset: 0; background-color: rgba(0,0,0,0.99);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; visibility: visible; z-index: 9999; transition: opacity 0.25s ease;
}
.js-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes dot { 50% { transform: translateX(96px); } }
@keyframes dots { 50% { transform: translateX(-31px); } }
.preloader-inner { position: relative; width: 142px; height: 40px; background: transparent; }
.preloader-inner .dot {
  position: absolute; width: 16px; height: 16px; top: 12px; left: 15px; background: #D63032;
  border-radius: 50%; transform: translateX(0); animation: dot 2.8s infinite;
}
.preloader-inner .dots { transform: translateX(0); margin-top: 12px; margin-left: 31px; animation: dots 2.8s infinite; }
.preloader-inner .dots span {
  display: block; float: left; width: 16px; height: 16px; margin-left: 16px; background: #D63032; border-radius: 50%;
}

/* 
---------------------------------------------
04) header (responsive, flex, sticky shrink + drawer)
--------------------------------------------- 
*/
/* ===== 04) HEADER — sticky + mobile drawer (canonical) ===== */
.sub-header{background:#fff;padding:10px 0;border-bottom:1px solid #eee;}
.sub-header ul li{display:inline-block;}
.sub-header ul.social-links{ text-align:right; }
.sub-header ul.social-links li{ margin-left:8px; }
.sub-header ul.social-links li a{
  display:inline-block;width:30px;height:30px;background:#cdcdcd;border-radius:50%;
  text-align:center;line-height:30px;color:#fff;font-size:14px;transition:.3s;
}
.sub-header ul.social-links li a:hover{ background:#D63032; }
.sub-header ul.info li{font-size:14px;color:#7a7a7a;border-right:1px solid #eee;margin-right:25px;padding-right:25px;}
.sub-header ul.info li:last-child{margin-right:0;padding-right:0;border-right:none;}
.sub-header ul.info li i{font-size:20px;color:#D63032;margin-right:8px;}

.header-area{position:relative;background:#fff;height:88px;z-index:1000;transition:.5s;}
.background-header{
  background:#fff;height:72px!important;position:fixed!important;top:0;left:0;right:0;
  box-shadow:0 0 10px rgba(0,0,0,.15)!important;
}

.header-area .main-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;
}
.header-area .main-nav .logo{display:flex;align-items:center;padding:12px 0;}
.site-logo{height:64px;width:auto;display:block;}
.header-area.background-header .site-logo{height:48px;}

.header-area .main-nav .nav{
  display:flex;align-items:center;justify-content:flex-end;flex-basis:100%;
  position:relative;z-index:999;transition:.3s;
}
.header-area .main-nav .nav li{padding:0 10px;height:88px;line-height:88px;display:flex;align-items:center;}
.background-header .main-nav .nav li{height:72px;line-height:72px;}
.header-area .main-nav .nav li a{
  display:block;padding:0 20px;font-weight:500;font-size:15px;height:40px;line-height:40px;
  color:#1e1e1e;transition:.4s;text-transform:capitalize;letter-spacing:.25px;
}
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active,
.background-header .main-nav .nav li a.active{ color:#D63032; }

/* login should look like a normal item */
.header-area .main-nav .nav li a.login-link{
  background:transparent !important;color:#1e1e1e !important;border-radius:0 !important;
  height:40px !important;line-height:40px !important;padding:0 20px !important;
}

/* Hamburger (mobile only) */
.header-area .main-nav .menu-trigger{
  display:none;position:relative;width:36px;height:28px;margin-left:auto;border:0;background:transparent;cursor:pointer;z-index:1103;
}
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span::before,
.header-area .main-nav .menu-trigger span::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:#1e1e1e;transition:transform .2s,opacity .2s;
}
.header-area .main-nav .menu-trigger span{top:50%;transform:translateY(-50%);}
.header-area .main-nav .menu-trigger span::before{top:-9px;}
.header-area .main-nav .menu-trigger span::after{ top: 9px; }
.header-area .main-nav .menu-trigger.is-open span{opacity:0;}
.header-area .main-nav .menu-trigger.is-open span::before{transform:translateY(9px) rotate(45deg);}
.header-area .main-nav .menu-trigger.is-open span::after{ transform:translateY(-9px) rotate(-45deg); }

/* Drawer overlay */
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.nav-overlay.is-open{opacity:1;pointer-events:auto;}

/* Mobile drawer */
@media (max-width: 991.98px){
  .sub-header{display:block;}
  .header-area{height:80px;}
  .site-logo{height:56px;}
  .header-area.background-header .site-logo{height:44px;}

  .header-area .main-nav .menu-trigger{display:inline-flex;}

  .header-area .main-nav .nav{
    display:block !important;position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);
    background:#fff;border-left:1px solid #eee;padding:82px 16px 24px;overflow-y:auto;
    transform:translateX(100%);transition:transform .25s;z-index:1102;
  }
  .header-area .main-nav .nav.is-open{ transform:translateX(0); }
  .header-area .main-nav .nav li{height:auto;line-height:inherit;border-top:1px solid #eee;padding:0;}
  .header-area .main-nav .nav li a{display:block;padding:14px 6px;height:auto;line-height:inherit;background:transparent !important;color:#1e1e1e !important;}
  .header-area .main-nav .nav li:last-child{display:block;}
}

/* Desktop reset */
@media (min-width: 992px){
  .header-area .main-nav .nav{
    position:static;transform:none !important;padding:0;background:transparent;display:flex !important;
  }
  .nav-overlay{display:none !important;}
}

/* ===== 05) BANNER — image sharp, text always on top ===== */
.main-banner .item{
  position:relative;min-height:68vh;height:clamp(520px,76vh,900px);overflow:hidden;padding:0 5%;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.main-banner .banner-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
}
.main-banner .banner-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.15) 100%);
}
.main-banner .header-text{
  position:absolute;z-index:2;left:clamp(16px,6vw,120px);right:clamp(16px,6vw,120px);
  top:clamp(32px,9vh,120px);max-width:980px;margin:0;padding:clamp(12px,1.8vw,22px);
  background:rgba(17,17,17,.28);border-radius:12px;backdrop-filter:saturate(120%) blur(2px);-webkit-backdrop-filter:saturate(120%) blur(2px);
}
.main-banner .header-text .category{display:inline-block;background:#fff;color:#111;border-radius:8px;padding:6px 12px;font-weight:600;margin-bottom:10px;}
.main-banner .header-text .category em{color:#d61f45;font-style:normal;}
.main-banner .header-text .banner-title,
.main-banner .header-text h2{color:#fff;font-weight:800;text-transform:uppercase;line-height:1.12;text-shadow:0 2px 6px rgba(0,0,0,.4);font-size:clamp(28px,5.2vw,64px);margin:0;}

.main-banner .owl-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(14px,5vh,32px);z-index:3;}
.main-banner .owl-dots .owl-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.75);margin:0 6px;}
.main-banner .owl-dots .owl-dot.active{background:#D63032;}
.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;line-height:44px;font-size:20px;color:#fff;
  background:rgba(0,0,0,.28);border-radius:50%;
}
.main-banner .owl-nav .owl-prev i{left:16px;}
.main-banner .owl-nav .owl-next i{right:16px;}
.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover{background:rgba(0,0,0,.45);}

@media (max-width:768px){
  .main-banner .item{height:65vh;min-height:440px;}
  .main-banner .banner-img{object-position:center 30%;}
  .main-banner .header-text{left:16px;right:16px;top:auto;bottom:10%;text-align:center;background:rgba(0,0,0,.35);}
  .main-banner .header-text .banner-title{font-size:clamp(22px,5.2vw,34px);}
}

/* 
---------------------------------------------
06) featured
--------------------------------------------- 
*/
.featured .left-image { position: relative; }
.featured .left-image img { padding-left: 55px; }
.featured .left-image a {
  display: inline-block; width: 110px; height: 110px; line-height: 110px;
  background-color: #D63032; border-radius: 50%; text-align: center; position: absolute; left: 0; bottom: -55px;
}
.featured .section-heading { margin: 0 10px 60px; }
.featured .section-heading h2 { width: 70%; }
.featured .accordion {
  margin: 0 10px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: none;
  border: none !important;
}
.featured .accordion-header { border-bottom: 1px solid #eaeaea; }
.featured .accordion-button { box-shadow: none; font-size: 17px; font-weight: 500; color: #1e1e1e; }
.featured .accordion-button:not(.collapsed) { color: #D63032; background-color: #fafafa; outline: none; }
.featured .accordion-button::after { display: none; }
.featured #headingThree { border-bottom: none; }
.featured .accordion-item:last-of-type .accordion-collapse { border-top: 1px solid #eaeaea; }
.featured .info-table { border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 35px 30px; }
.featured .info-table ul li { display: block; margin-bottom: 35px; padding-bottom: 35px; border-bottom: 1px solid #eee; }
.featured .info-table ul li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.featured .info-table ul li img { float: left; margin-right: 25px; }
.featured .info-table ul li h4 { font-size: 22px; font-weight: 600; }
.featured .info-table ul li h4 span { font-size: 15px; color: #aaa; font-weight: 400; }

/* 
---------------------------------------------
07) video
--------------------------------------------- 
*/
.video {
  background-image: url(../images/video-bg.jpg);
  background-repeat: no-repeat; background-size: cover; background-position: center center;
  padding: 100px 0 250px 0; position: relative;
}
.video-content { margin-top: -240px; }
.video .section-heading h2 { color: #fff; }
.video-content .video-frame { position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.15); border-radius: 10px; }
.video-content .video-frame img { border-radius: 10px; }
.video-content .video-frame a {
  position: absolute; left: 50%; top: 50%; transform: translate(-26px, -26px);
  width: 52px; height: 52px; background-color: #fff; border-radius: 50%;
  display: inline-block; text-align: center; line-height: 52px; color: #D63032;
  outline: 15px solid rgba(254, 85, 37, 0.5); font-size: 18px;
}

/* 
---------------------------------------------
08) fun facts
--------------------------------------------- 
*/
.fun-facts { text-align: center; margin-top: 125px; }
.fun-facts .counter {
  background-color: #ffeee9; position: relative; border-radius: 10px; width: 270px; padding: 20px 0; display: inline-block;
}
.fun-facts .counter h2, .fun-facts .counter p { display: inline-flex; vertical-align: middle; }
.fun-facts .counter p { text-align: left; font-size: 16px; color: #1e1e1e; font-weight: 600; line-height: 28px; }
.fun-facts .counter h2 { margin-right: 25px; font-size: 40px; color: #D63032; }
.fun-facts .counter:after {
  position: absolute; width: 50px; height: 50px; background-color: #D63032; border-radius: 50%;
  content: ''; right: -25px; top: -25px;
}

/* 
---------------------------------------------
09) best deal
--------------------------------------------- 
*/
.best-deal { background-color: #fafafa; padding: 100px 0; }
.best-deal .tab-content img { padding: 0 45px; }
.best-deal .tabs-content .nav-link {
  font-size: 16px; font-weight: 500; background-color: #1e1e1e !important; border-radius: 5px;
  height: 50px; line-height: 50px; display: inline-block; padding: 0 25px; color: #fff;
}
.best-deal .tabs-content .nav-tabs .nav-link.active { background-color: #D63032 !important; color: #fff; }
.best-deal .tabs-content ul.nav-tabs {
  border-bottom: none !important; margin-bottom: 80px; align-items: end; justify-content: end; margin-top: -130px;
}
.best-deal .tabs-content ul.nav-tabs li { padding-right: 0; border-right: none; margin-left: 20px; }
.best-deal .info-table { border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 35px 30px; }
.best-deal .info-table ul li {
  display: block; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #eee;
  text-align: left; font-size: 15px; color: #aaa; font-weight: 400;
}
.best-deal .info-table ul li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.best-deal .info-table ul li span { font-size: 20px; color: #1e1e1e; font-weight: 700; float: right; display: inline-block; }
.best-deal .tabs-content { padding: 0; background-color: transparent; }
.best-deal .tabs-content h4 { font-size: 17px; font-weight: 600; margin-bottom: 30px; }
.best-deal .icon-button { margin-top: 30px; }

/* 
---------------------------------------------
10) properties (cards)
--------------------------------------------- 
*/
.properties .item { background-color: #fafafa; border-radius: 10px; padding: 30px; margin-bottom: 30px; }
.properties .item img { border-radius: 10px; }
.properties .item span.category {
  background-color: #fbd9cf; font-weight: 500; border-radius: 5px; font-size: 14px; color: #1e1e1e;
  padding: 5px 12px; display: inline-block; margin-top: 25px;
}
.properties .item h4 { font-size: 19px; margin: 25px 0; }
.properties .item h4 a { color: #1e1e1e; }
.properties .item ul li { display: inline-block; font-size: 15px; color: #4a4a4a; margin-right: 20px; }
.properties .item ul li span { font-weight: 600; color: #1e1e1e; }
.properties .item ul { border-bottom: 1px solid #eaeaea; margin-bottom: 30px; padding-bottom: 30px; }
.properties .item h6 { font-size: 20px; color: #D63032; display: inline-block; float: right; margin-top: 30px; }
.properties .item .main-button { text-align: center; }

/* 
---------------------------------------------
11) contact (home)
--------------------------------------------- 
*/
.contact {
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat; background-size: cover; background-position: center center;
  padding: 100px 0 250px 0; position: relative;
}
.contact .section-heading h2 { color: #fff; }
.contact-content { margin-top: -240px; position: relative; z-index: 1; }
.contact-content .item {
  border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 35px 30px; background-color: #fff;
}
.contact-content .phone { margin-right: 15px; }
.contact-content .email { margin-left: 15px; }
.contact-content .item img { float: left; margin-right: 25px; vertical-align: middle; }
.contact-content .item h6 { font-size: 20px; font-weight: 600; vertical-align: middle; }
.contact-content .item h6 span { font-size: 15px; color: #aaaaaa; font-weight: 400; }
.contact-content #contact-form {
  margin-left: 30px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 35px 30px; background-color: #fff;
}
.contact-content #contact-form label { font-size: 15px; color: #3a3a3a; margin-bottom: 15px; }
.contact-content #contact-form input {
  width: 100%; height: 44px; border-radius: 22px; background-color: #f6f6f6; border: none;
  margin-bottom: 30px; font-size: 14px; padding: 0 15px;
}
.contact-content #contact-form textarea {
  width: 100%; height: 150px; max-height: 180px; border-radius: 22px; background-color: #f6f6f6; border: none;
  margin-bottom: 40px; font-size: 14px; padding: 15px 15px;
}
.contact-content #contact-form button {
  background-color: #1e1e1e; height: 44px; border-radius: 22px; padding: 0 20px; color: #fff;
  border: none; font-size: 15px; font-weight: 500; transition: all .5s;
}
.contact-content #contact-form button:hover { background-color: #D63032; }

/* 
---------------------------------------------
12) footer
--------------------------------------------- 
*/
footer.footer-no-gap { margin-top: 0; }
footer { margin-top: 150px; background-color: #1e1e1e; min-height: 100px; }
footer p { text-align: center; line-height: 100px; color: #fff; font-size: 16px; font-weight: 400; }
footer p a { color: #fff; transition: all .3s; position: relative; z-index: 3; }
footer p a:hover { opacity: 0.75; }

/* 
---------------------------------------------
13) page header
--------------------------------------------- 
*/
.page-heading {
  background-image: url(../images/page-heading-bg.jpg);
  background-position: center bottom; background-repeat: no-repeat; background-size: cover;
  padding: 110px 0; text-align: center;
}
.page-heading span {
  background-color: #fff; color: #1e1e1e; font-size: 14px; font-weight: 500; text-transform: uppercase;
  padding: 10px 25px; display: inline-block; margin-bottom: 30px;
}
.page-heading span a { color: #1e1e1e; }
.page-heading h3 { font-size: 48px; font-weight: 900; text-transform: uppercase; color: #fff; }

/* 
---------------------------------------------
14) properties (filters + pagination)
--------------------------------------------- 
*/
.properties ul.properties-filter { list-style: none; text-align: center; margin-bottom: 70px; }
.properties ul.properties-filter li { display: inline-block; margin: 5px 8px; }
.properties ul.properties-filter li a {
  display: inline-block; text-align: center; font-size: 15px; text-transform: capitalize; font-weight: 500;
  color: #fff; background-color: #1e1e1e; padding: 12px 25px; border-radius: 5px; transition: all .3s;
}
.properties ul.properties-filter li a.is_active { background-color: #D63032; color: #fff; }
.properties ul.properties-filter li a.is_active:hover { color: #fff; }
.properties ul.properties-filter li a:hover { color: #D63032; }

.properties ul.pagination { margin-top: 50px; text-align: center; width: 100%; display: inline-block; }
.properties ul.pagination li { display: inline-block; margin: 0 5px; }
.properties ul.pagination li a {
  display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center;
  background-color: #1e1e1e; color: #fff; font-size: 15px; font-weight: 600; border-radius: 50%; transition: all .3s;
}
.properties ul.pagination li a:hover,
.properties ul.pagination li a.is_active { background-color: #D63032; color: #fff; }

/* 
---------------------------------------------
15) single property
--------------------------------------------- 
*/
.single-property .main-image img { float: none; }
.single-property .main-content h4 {
  font-size: 25px; margin-top: 25px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee;
}
.single-property .main-content span.category {
  background-color: #fbd9cf; font-weight: 500; border-radius: 5px; font-size: 14px; color: #1e1e1e;
  padding: 5px 12px; display: inline-block; margin-top: 40px;
}
.single-property .accordion {
  margin-top: 60px; margin-left: 0; margin-right: 0;
  --bs-accordion-border-radius: 10px; --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa; --bs-accordion-border-color: none; border: none !important;
}
.single-property .accordion-header { border-bottom: 1px solid #eaeaea; }
.single-property .accordion-button { box-shadow: none; font-size: 17px; font-weight: 500; color: #1e1e1e; }
.single-property .accordion-button:not(.collapsed) { color: #D63032; background-color: #fafafa; outline: none; }
.single-property .accordion-button::after { display: none; }
.single-property #headingThree { border-bottom: none; }
.single-property .accordion-item:last-of-type .accordion-collapse { border-top: 1px solid #eaeaea; }
.single-property .info-table { border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 35px 30px; margin-left: 60px; }
.single-property .info-table ul li {
  display: block; margin-bottom: 35px; padding-bottom: 35px; border-bottom: 1px solid #eee;
}
.single-property .info-table ul li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.single-property .info-table ul li img { float: left; margin-right: 25px; }
.single-property .info-table ul li h4 { font-size: 22px; font-weight: 600; }
.single-property .info-table ul li h4 span { font-size: 15px; color: #aaa; font-weight: 400; }

/* 
---------------------------------------------
16) contact page
--------------------------------------------- 
*/
.contact-page #map { margin-top: 100px; }
.contact-page .section-heading { margin-bottom: 40px; margin-right: 280px; }
.contact-page p { margin-bottom: 50px; }
.contact-page .item {
  border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 35px 30px; background-color: #fff; display: inline-block; min-width: 360px;
}
.contact-page .phone { margin-bottom: 30px; }
.contact-page .item img { float: left; margin-right: 25px; vertical-align: middle; }
.contact-page .item h6 { font-size: 20px; font-weight: 600; vertical-align: middle; }
.contact-page .item h6 span { font-size: 15px; color: #aaaaaa; font-weight: 400; }
.contact-page #contact-form {
  margin-left: 30px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 35px 30px; background-color: #fff;
}
.contact-page #contact-form label { font-size: 15px; color: #3a3a3a; margin-bottom: 15px; }
.contact-page #contact-form input {
  width: 100%; height: 44px; border-radius: 22px; background-color: #f6f6f6; border: none; margin-bottom: 30px; font-size: 14px; padding: 0 15px;
}
.contact-page #contact-form textarea {
  width: 100%; height: 150px; max-height: 180px; border-radius: 22px; background-color: #f6f6f6; border: none; margin-bottom: 40px; font-size: 14px; padding: 15px 15px;
}
.contact-page #contact-form button {
  background-color: #1e1e1e; height: 44px; border-radius: 22px; padding: 0 20px; color: #fff;
  border: none; font-size: 15px; font-weight: 500; transition: all .5s;
}
.contact-page #contact-form button:hover { background-color: #D63032; }

.description ul { padding-left: 1.5rem; list-style-type: disc; margin-bottom: 1rem; }
.description li { margin-bottom: 8px; font-size: 16px; }

/* 
---------------------------------------------
17) responsive helpers
--------------------------------------------- 
*/
body { overflow-x: hidden; }

@media (max-width: 1200px) {
  .header-area .main-nav .nav li { padding-left: 5px; padding-right: 5px; }
  .best-deal .info-table ul li span { float: none; width: 100%; }
  .contact-page .section-heading { margin-right: 100px; }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li a { padding-left: 3px; padding-right: 3px; }
  .header-area .main-nav .nav li:last-child a { padding-right: 15px; }
  .main-banner .header-text { max-width: 820px; }
  .featured .section-heading { margin: 100px 0 60px; }
  .featured .accordion { margin: 0; }
  .featured .info-table { margin-top: 45px; }
  .fun-facts .counter { margin-bottom: 45px; }
  .best-deal .section-heading { text-align: center; }
  .best-deal .tabs-content ul.nav-tabs { margin-top: 0; justify-content: center; }
  .best-deal .info-table { margin-bottom: 45px; }
  .best-deal .tab-content img { padding: 0; }
  .best-deal .tabs-content h4 { margin-top: 45px; }
  .properties .item h6 { text-align: center; margin-bottom: 15px; }
  .properties .item .main-button { text-align: center; }
  .properties .item ul li { margin-right: 10px; font-size: 13px; }
  .contact-content .phone { margin-right: 0; margin-bottom: 20px; }
  .contact-content .email { margin-left: 0; margin-bottom: 45px; }
  .contact-content #contact-form { margin-left: 0; }
  .single-property .info-table { margin-left: 0; margin-top: 45px; }
  .contact-page .section-heading { margin-right: 0 !important; }
  .contact-page #contact-form { margin-left: 0; margin-top: 60px; }
  .best-deal .info-table ul li span { float: right !important; width: auto !important; }
}

@media (max-width: 767px) {
  .best-deal .tabs-content .nav-link { font-size: 14px; padding: 0 15px; height: 44px; line-height: 44px; }
  .best-deal .tabs-content ul.nav-tabs li { margin: 0 5px; }
  .properties ul.properties-filter li a { font-size: 14px; padding: 10px 15px; }
  .properties ul.properties-filter li { margin: 5px; }
  .header-area .main-nav .nav li:last-child { display: none; }

  .contact-content { margin-top: 0; padding-top: 30px; }
  .contact { padding-bottom: 100px; }

  footer p {
    font-size: 14px; line-height: 1.6; padding: 0 15px; word-break: break-word; white-space: normal;
  }
}

/* Prevent content jump; padding can be set via script when header becomes fixed */
body.has-sticky-offset { }


/* keep slider text above any page overlays */
.main-banner .header-text { position: relative; z-index: 3; }

/* base overlay state (non-open) must not intercept taps */
.nav-overlay { opacity: 0; pointer-events: none; }

/* only clickable when open (class is added by JS) */
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* make sure drawer sits above slider when open */
@media (max-width: 991.98px){
  .header-area { z-index: 1200; }
}


/* --- Header layering so drawer never hides slider text --- */
.header-area { z-index: 1000; }

/* Hamburger (hidden on desktop) */
.menu-trigger{
  position: relative; z-index: 1103;
  width: 36px; height: 28px; cursor: pointer;
  background: transparent; border: 0; padding: 0; margin-left: auto;
  display: none;
}
.menu-trigger span,
.menu-trigger span::before,
.menu-trigger span::after{
  content:""; display:block; position:absolute; left:0; right:0;
  height:2px; background:#1e1e1e; transition:transform .2s ease, opacity .2s ease;
}
.menu-trigger span{ top:50%; transform:translateY(-50%); }
.menu-trigger span::before{ top:-9px; }
.menu-trigger span::after{ top:9px; }
.menu-trigger.is-open span{ opacity:0; }
.menu-trigger.is-open span::before{ transform:translateY(9px) rotate(45deg); }
.menu-trigger.is-open span::after{ transform:translateY(-9px) rotate(-45deg); }

/* Drawer overlay (click to close) */
.nav-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1100;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.nav-overlay.is-open{ opacity: 1; pointer-events: auto; }

/* Mobile drawer (off-canvas) */
@media (max-width: 991.98px){
  .menu-trigger{ display: inline-flex; }
  .header-area .main-nav .nav{
    display: block !important;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84vw, 360px);
    background: #fff; border-left: 1px solid #eee;
    padding: 82px 16px 24px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
    z-index: 1102;
  }
  .header-area .main-nav .nav.is-open{ transform: translateX(0); }

  .header-area .main-nav .nav li{
    display:block; border-bottom:1px solid #f0f0f0; height:auto; line-height:inherit; padding:0;
  }
  .header-area .main-nav .nav li a{
    display:block; padding:14px 6px; height:auto; line-height:inherit;
    background:transparent !important; color:#1e1e1e !important;
  }
}

/* Desktop reset */
@media (min-width: 992px){
  .header-area .main-nav .nav{
    position: static; transform:none!important; padding:0; background:transparent;
    display:flex!important;
  }
  .nav-overlay{ display:none!important; }
}

/* Dark theme support if used */
:root[data-theme="dark"] .menu-trigger span,
:root[data-theme="dark"] .menu-trigger span::before,
:root[data-theme="dark"] .menu-trigger span::after{ background:#e6e9ef; }
:root[data-theme="dark"] .header-area .main-nav .nav{
  background:#10151b; border-left-color:#1b2430;
}
:root[data-theme="dark"] .header-area .main-nav .nav li{ border-bottom-color:#1b2430; }
:root[data-theme="dark"] .header-area .main-nav .nav li a{ color:#e6e9ef!important; }

/* --- Slider layering so text is always visible --- */
.main-banner .item{ position: relative; min-height: 68vh; height: clamp(520px, 76vh, 900px); overflow: hidden; }
.main-banner .banner-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.main-banner .banner-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.22) 100%); }
.main-banner .header-text{ position: relative; z-index: 3; } /* sits above image+overlay */

.main-banner .header-text.banner-top{
  position: absolute;
  top: clamp(32px, 9vh, 120px);
  left: clamp(16px, 6vw, 120px);
  right: clamp(16px, 6vw, 120px);
  max-width: 980px; margin: 0;
  background: rgba(17,17,17,.28);
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  padding: clamp(12px, 1.8vw, 22px);
  border-radius: 12px;
}

.main-banner .header-text .category{
  display:inline-block; background:#fff; color:#111;
  border-radius:8px; padding:6px 12px; font-weight:600; margin-bottom:10px;
}
.main-banner .header-text .category em{ color:#d61f45; font-style:normal; }
.main-banner .header-text .banner-title{
  color:#fff; margin:0; line-height:1.05; letter-spacing:.4px; text-transform:uppercase;
  text-shadow:0 2px 6px rgba(0,0,0,.45); font-weight:800; font-size: clamp(28px, 5.2vw, 64px);
}

/* Mobile: less cropping + centered text */
@media (max-width: 768px){
  .main-banner .item{ height: 65vh; min-height: 440px; }
  .main-banner .banner-img{ object-position: center 30%; }
  .main-banner .header-text.banner-top{
    left: 16px; right: 16px; top: auto; bottom: 10%;
    text-align: center; background: rgba(0,0,0,.35);
  }
  .main-banner .header-text .banner-title{ font-size: clamp(22px, 5.2vw, 34px); }
}


/* base flex for the header bar */
.header-area .main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* logo first, then trigger, nav is off-canvas on mobile */
  gap:16px;
  position:relative;
}

/* keep logo normal */
.site-logo{ height:64px; width:auto; display:block; }

/* the hamburger */
.header-area .main-nav .menu-trigger{
  display:none;              /* hidden on desktop */
  position:relative;
  width:36px; height:28px;
  cursor:pointer;
  background:transparent; border:0; padding:0;
  margin-left:auto;          /* <-- pushes it to the right */
  z-index:1103;
}
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span::before,
.header-area .main-nav .menu-trigger span::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; background:#1e1e1e;
  transition:transform .2s ease, opacity .2s ease;
}
.header-area .main-nav .menu-trigger span{ top:50%; transform:translateY(-50%); }
.header-area .main-nav .menu-trigger span::before{ top:-9px; }
.header-area .main-nav .menu-trigger span::after{  top: 9px; }
.header-area .main-nav .menu-trigger.is-open span{ opacity:0; }
.header-area .main-nav .menu-trigger.is-open span::before{ transform:translateY(9px) rotate(45deg); }
.header-area .main-nav .menu-trigger.is-open span::after{  transform:translateY(-9px) rotate(-45deg); }

/* mobile drawer */
@media (max-width: 991.98px){
  .header-area .main-nav .menu-trigger{ display:inline-flex; }

  .header-area .main-nav .nav{
    display:block !important;         /* ensure visible for the drawer */
    position:fixed; top:0; right:0; bottom:0;
    width:min(84vw, 360px);
    background:#fff;
    border-left:1px solid #eee;
    padding:82px 16px 24px;            /* space for header */
    overflow-y:auto;
    transform:translateX(100%);        /* hidden by default */
    transition:transform .25s ease;
    z-index:1102;
  }
  .header-area .main-nav .nav.is-open{ transform:translateX(0); }

  .header-area .main-nav .nav li{
    display:block; border-bottom:1px solid #f0f0f0;
    height:auto; line-height:inherit; padding:0;
  }
  .header-area .main-nav .nav li a{
    display:block; padding:14px 6px; height:auto; line-height:inherit;
    background:transparent !important; color:#1e1e1e !important;
  }
}

/* desktop: put nav back to normal */
@media (min-width: 992px){
  .header-area .main-nav .nav{
    position:static; transform:none !important; padding:0; background:transparent;
    display:flex !important;
  }
}

/* overlay under the drawer, above content */
.nav-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:1100;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }

/* slider text safety */
.main-banner .header-text{ z-index:2; }
