/*!
 * Villa Agency – FULL CSS (refactored + mobile off-canvas + walkthrough + icons)
 * 00. Variables & helpers
 * 01. Reset & base
 * 02. Global styles
 * 03. Components (buttons, modal, floating actions)
 * 04. Header & navigation (dropdown + off-canvas)
 * 05. Preloader
 * 06. Sections
 * 07. Footer
 * 08. Page headers
 * 09. Single Property / Contact page
 * 10. Accessibility controls
 * 11. Walkthrough overlay
 * 12. Responsive
 * 13. Final overrides (mobile header/menu, icons, backdrop)
 */

/* =========================
   00) Variables & helpers
   ========================= */
   
:root{
  --primary:#e74c3c;
  --primary-hover:#cf3f30;
  --text:#fff;
  --text-on-primary:#fff;
  --backdrop:rgba(0,0,0,.55);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.2);
}

/* micro helpers */
.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{list-style:none;margin:0;padding:0}

/* =========================
   01) Reset & base
   ========================= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,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}
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;
  overflow-x:hidden;
}
a{text-decoration:none!important}
h1,h2,h3,h4,h5,h6{color:#1e1e1e;font-weight:700}
p{font-size:14px;line-height:28px;color:#4a4a4a}
img{width:100%;overflow:hidden}
::selection,::-moz-selection{background:#0071f8;color:#fff}

/* =========================
   02) Global styles
   ========================= */
.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:#1e1e1e;color:#fff;font-size:14px;font-weight:400;
  height:50px;line-height:50px;padding:0 30px 0 0;border-radius:25px;transition:.3s
}
.icon-button a i{
  background:#c02f03;height:50px;width:50px;text-align:center;border-radius:50%;
  line-height:50px;display:inline-block;margin:0 15px 0 -1px
}
.icon-button a:hover{color:#c02f03}
.icon-button a:hover i{color:#fff}

.main-button a{
  display:inline-block;background:#1e1e1e;color:#fff;font-size:14px;font-weight:500;
  height:40px;line-height:40px;padding:0 30px;border-radius:25px;transition:.3s
}
.main-button a:hover{background:#c02f03;color:#fff}

/* demo toggle */
.toggle-container{display:flex;justify-content:center;margin:20px 0;gap:15px}
.toggle-container .btn{font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:.2s}
.toggle-container .btn:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.25)}

/* =========================
   03) Components
   ========================= */
.btn-pill{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:var(--text-on-primary);
  padding:.6rem 1.1rem;border:none;border-radius:999px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .12s,background .12s
}
.btn-pill:hover{background:var(--primary-hover);transform:translateY(-1px)}
.btn-pill:focus{outline:2px solid #fff;outline-offset:2px}

/* App modal */
.site-modal-backdrop{position:fixed;inset:0;display:none;place-items:center;background:var(--backdrop);z-index:1000}
.site-modal-backdrop[data-open="true"]{display:grid}
.site-modal{width:min(680px,92vw);background:#fff;color:#222;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.site-modal__header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#fafafa;border-bottom:1px solid #eee}
.site-modal__title{margin:0;font-size:1.125rem;font-weight:800}
.site-modal__body{padding:1.25rem;line-height:1.55}
.site-modal__footer{padding:1rem 1.25rem;background:#fafafa;border-top:1px solid #eee;display:flex;gap:.5rem;justify-content:flex-end}
.icon-btn{background:transparent;border:none;padding:.4rem .55rem;border-radius:999px;cursor:pointer}
.icon-btn:focus{outline:2px solid var(--primary);outline-offset:2px}
body.modal-open{overflow:hidden}

/* Floating actions – same size for both icons */
.floating-btn,.walkthrough-fab{
  position:fixed;width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;transition:transform .2s,box-shadow .2s;
  z-index:2000;border-radius:50%;border:none
}
.floating-btn img,.walkthrough-fab img{width:50px;height:50px;object-fit:contain;display:block}
.floating-btn:hover,.walkthrough-fab:hover{transform:scale(1.05);box-shadow:0 4px 10px rgba(0,0,0,.3)}
/* co-location bottom-left */
.floating-btn{bottom:20px;left:20px}
.walkthrough-fab{bottom:20px;left:90px}

/* tooltips */
.walkthrough-fab::after{
  content:attr(data-tooltip);position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  background:#333;color:#fff;font-size:13px;padding:6px 10px;border-radius:6px;opacity:0;white-space:nowrap;pointer-events:none;transition:opacity .3s,transform .3s
}
.walkthrough-fab:hover::after{opacity:1;transform:translateX(-50%) translateY(-5px)}
.floating-btn a::after{
  content:attr(data-tooltip);position:absolute;top:70px;left:50%;transform:translateX(-50%);
  background:#333;color:#fff;font-size:13px;padding:6px 10px;border-radius:6px;opacity:0;white-space:nowrap;pointer-events:none;transition:opacity .3s,transform .3s
}
.floating-btn a:hover::after{opacity:1;transform:translateX(-50%) translateY(5px)}

/* =========================
   04) Header & navigation
   ========================= */
.sub-header{background:#fff;padding:10px 0;border-bottom:1px solid #eee}

.background-header{
  background:#fff;height:80px!important;position:fixed!important;top:0!important;left:0;right:0;
  box-shadow:0 0 10px rgba(0,0,0,.15)!important;transition:.5s
}
.header-area{position:relative;background:#fff;height:10px;z-index:100;transition:.5s}
.header-area .main-nav{background:transparent;display:flex;overflow:hidden}
.header-area .main-nav .logo{display:inline-block;transition:.3s}
.header-area .main-nav .logo h1{line-height:100px;font-size:28px;text-transform:uppercase;color:#1e1e1e;font-weight:700;letter-spacing:2px;margin-top:20px}

.header-area .main-nav ul.nav{margin-top:50px;margin-left:5%;justify-content:right;transition:.3s;position:relative;z-index:1001}
.header-area .main-nav .nav li{padding:0 10px;line-height:100px}
.header-area .main-nav .nav li:last-child{padding-right:0}
.header-area .main-nav .nav li a{
  display:block;padding:0 20px;font-weight:500;font-size:15px;height:40px;line-height:40px;
  text-transform:capitalize;color:#1e1e1e;transition:.4s;border:transparent;letter-spacing:.25px
}
.header-area .main-nav .nav li a:hover{color:#c02f03}
.header-area .main-nav .nav li a.active{color:#c02f03}

.header-area .main-nav .nav li:last-child a{
  background:#1e1e1e;color:#fff;font-size:14px;font-weight:400;text-transform:none;border-radius:20px;padding-left:10px
}
.header-area .main-nav .nav li:last-child a i{
  background:#c02f03;display:inline-block;width:40px;height:40px;text-align:center;line-height:40px;margin-right:10px;border-radius:50%;margin-left:-1px
}
.header-area .main-nav .nav li:last-child:hover a{background:#1e1e1e}
.header-area .main-nav .nav li:last-child:hover a i{color:#fff}

/* Hamburger (with precise X) */
.header-area .main-nav .menu-trigger{
  cursor:pointer;position:absolute;top:23px;right:20px;width:28px;height:28px;text-indent:-9999em;z-index:99;display:none
}
.background-header .main-nav .menu-trigger{top:22px}
.background-header .main-nav ul.nav{margin-top:20px}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span::before,
.header-area .main-nav .menu-trigger span::after{
  position:absolute;left:0;right:0;margin:auto;width:24px;height:2px;background:#1e1e1e;content:"";
  transform-origin:50% 50%;transition:transform .22s ease,top .22s ease,background .22s ease
}
.header-area .main-nav .menu-trigger span{top:50%;transform:translateY(-50%)}
.header-area .main-nav .menu-trigger span::before{top:-8px}
.header-area .main-nav .menu-trigger span::after{top:8px}
.header-area .main-nav .menu-trigger.active span{background:transparent}
.header-area .main-nav .menu-trigger.active span::before,
.header-area .main-nav .menu-trigger.active span::after{top:0}
.header-area .main-nav .menu-trigger.active span::before{transform:rotate(45deg)}
.header-area .main-nav .menu-trigger.active span::after{transform:rotate(-45deg)}

/* Dropdown (desktop) */
.header-area .main-nav .nav li.dropdown{position:relative}

/* בסיס הדרופדאון */
.header-area .main-nav .nav li .dropdown-menu{
  display:none;position:absolute;top:100%;left:0;background:#fff;min-width:180px;border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:999
}
.header-area .main-nav .nav li .dropdown-menu li a{
  display:block;padding:10px 20px;font-size:15px;color:#1e1e1e;white-space:nowrap;background:transparent
}
.header-area .main-nav .nav li .dropdown-menu li a:hover,
.header-area .main-nav .nav .dropdown-menu a:focus {background:#f7f7f7;color:#c02f03}

/* --- קרת ממורכזת שמפעילה את התפריט (בדסקטופ בלבד) --- */
@media (min-width:768px){
  /* למנוע פתיחה מריחוף על כל ה-li */
  .header-area .main-nav .nav li.dropdown:hover > .dropdown-menu{display:none!important}

  /* מוסיפים מקום לחץ מימין לטקסט */
  .header-area .main-nav ul.nav>li{position:relative}
  .header-area .main-nav ul.nav>li>a{padding-right:28px}

  /* הכפתור-חץ */
  .header-area .main-nav ul.nav li.dropdown > .submenu-toggle{
    display:block;position:absolute;right:6px;top:25%;transform:translateY(-50%);
    width:22px;height:22px;background:transparent;border:0;padding:0;cursor:pointer;line-height:1;appearance:none
  }
  /* ציור החץ */
  .header-area .main-nav ul.nav li.dropdown > .submenu-toggle::before{
    content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;
    border-right:2px solid #1e1e1e;border-bottom:2px solid #1e1e1e;transform:rotate(45deg);transition:transform .2s ease
  }
  /* חץ פתוח */
  .header-area .main-nav ul.nav li.dropdown.open > .submenu-toggle::before,
  .header-area .main-nav ul.nav li.dropdown > .submenu-toggle[aria-expanded="true"]::before{
    transform:rotate(-135deg)
  }

  /* דרופדאון נפתח רק על hover של הכפתור או על מצב .open (ללא hover על הטקסט) */
  .header-area .main-nav ul.nav li.dropdown > .submenu-toggle:hover + .dropdown-menu{display:block}
  .header-area .main-nav ul.nav li.dropdown.open > .dropdown-menu{display:block!important}
}



/* =========================
   05) Preloader
   ========================= */
.js-preloader{
  position:fixed;inset:0;background:rgba(0,0,0,.99);display:flex;align-items:center;justify-content:center;
  opacity:1;visibility:visible;z-index:9999;transition:opacity .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}
.preloader-inner .dot{position:absolute;width:16px;height:16px;top:12px;left:15px;background:#c02f03;border-radius:50%;animation:dot 2.8s infinite}
.preloader-inner .dots{transform:translateX(0);margin:12px 0 0 31px;animation:dots 2.8s infinite}
.preloader-inner .dots span{display:block;float:left;width:16px;height:16px;margin-left:16px;background:#c02f03;border-radius:50%}

/* =========================
   06) Sections (shortened originals kept)
   ========================= */
.main-banner .item{background-position:center;background-repeat:no-repeat;background-size:cover;padding:220px 20% 320px;margin-top:0}
.main-banner .item-1{background-image:url(../images/banner-01.jpg)}
.main-banner .item-2{background-image:url(../images/banner-02.jpg)}
.main-banner .item-3{background-image:url(../images/banner-03.jpg)}
.main-banner .item span.category{background:#fff;color:#1e1e1e;font-size:16px;font-weight:500;text-transform:capitalize;padding:6px 15px;display:inline-block;margin-bottom:30px}
.main-banner .item span.category em{font-style:normal;color:#c02f03}
.main-banner .item h2{font-size:62px;font-weight:700;text-transform:uppercase;color:#fff;line-height:72px;width:50%;margin:0}
.main-banner .owl-dots{position:absolute;bottom:60px;left:20%}
.main-banner .owl-dots .owl-dot{width:10px;height:10px;background:#fff;border-radius:50%;margin-right:10px;transition:.5s}
.main-banner .owl-dots .active{background:#c02f03}
.main-banner .owl-nav{position:absolute;top:50%;width:100%;transform:translateY(-50px)}
.main-banner .owl-nav .owl-prev i,.main-banner .owl-nav .owl-next i{
  width:50px;height:50px;line-height:50px;font-size:24px;display:inline-block;color:#fff;background:rgba(255,255,255,.2);border-radius:50%;transition:.3s
}
.main-banner .owl-nav .owl-prev i{position:absolute;left:45px}
.main-banner .owl-nav .owl-next i{position:absolute;right:45px}
.main-banner .owl-nav .owl-prev i:hover,.main-banner .owl-nav .owl-next i:hover{background:rgba(255,255,255,.5)}

/* ... (שאר הסקשנים המקוריים: .featured, .video, .fun-facts, .best-deal, .properties, .contact)
   הושארו כפי שהיו – ללא שינוי פונקציונלי. */

/* =========================
   07) Footer
   ========================= */
footer.footer-no-gap{margin-top:0}
footer{margin-top:150px;background:#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:.3s;position:relative;z-index:3}
footer p a:hover{opacity:.75}
footer .social-icons{text-align:center;margin-top:5.5%}
footer .social-icons a{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 6px;background:#cdcdcd;border-radius:50%;
  color:#000;font-size:16px;transition:.3s
}

/* =========================
   08) Page headers
   ========================= */
.page-heading{background:url(../images/page-heading-bg.jpg) center bottom/cover no-repeat;padding:110px 0;text-align:center}
.page-heading span{background:#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}

/* =========================
   09) Single Property / Contact
   ========================= */
/* (נשמר כבקובץ המקורי; ללא שינוי פונקציונלי) */

/* =========================
   10) Accessibility controls
   ========================= */
.icon-btn.auto,.icon-btn.manual{display:none!important}
body[data-icons="auto"] .icon-btn.auto{display:inline-flex!important}
body[data-icons="both"] .icon-btn.auto,
body[data-icons="both"] .icon-btn.manual{display:inline-flex!important}

#a11y-controls{position:fixed;right:16px;bottom:16px;z-index:99999;display:flex;gap:8px;align-items:center}
.a11y-fab{border:0;border-radius:999px;padding:10px 14px;background:#c02f03;color:#fff;font:600 14px/1.1 system-ui,Arial;box-shadow:0 6px 18px rgba(0,0,0,.2);cursor:pointer}
.a11y-fab[aria-pressed="true"]{outline:3px solid rgba(255,106,58,.35)}
.a11y-fab:focus-visible{outline:3px solid #1e90ff}

/* Keep main nav above layers */
.header-area .main-nav .nav{position:relative;z-index:1001}
.header-area .main-nav .nav li a{pointer-events:auto}

/* =========================
   11) Walkthrough overlay
   ========================= */
.tw-overlay[hidden]{display:none}
.tw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000001}
.tw-dialog{width:min(420px,92vw);background:#fff;color:#222;border-radius:14px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tw-dialog h2{margin:0 0 8px;font-size:1.35rem}
.tw-dialog p{margin:0 0 18px;line-height:1.5}
.tw-actions{display:flex;gap:10px;justify-content:flex-end}
.tw-btn{padding:10px 16px;border-radius:8px;border:1px solid #e1e1e1;background:#f7f7f7;cursor:pointer;font-weight:600}
.tw-btn:focus{outline:3px solid #4c9ffe;outline-offset:2px}
.tw-btn-primary{background:#ff6a3d;border-color:#ff6a3d;color:#fff}
.tw-btn-primary:hover{filter:brightness(.93)}
.tw-btn-ghost{background:#fff}
.tw-quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.tw-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  cursor: pointer;
  font: inherit;
}
.tw-chip:focus { outline: 3px solid #2684ff; outline-offset: 2px; }
/* 🔄 מכולת הכרטיסים – בשורה אחת, בלי ירידת שורה */
.intro-actions,
.intro-cards {                  /* מכסה גם מי שנשאר עם השם הישן */
  display: flex;
  flex-wrap: nowrap;            /* אל תשבור שורה */
  gap: 18px;
  margin-top: 18px;
  padding-bottom: 6px;          /* מקום ל-scrollbar */
  -webkit-overflow-scrolling: touch;
}

/* 🧩 כל כרטיס – רוחב גמיש + מינימום נוח */
.intro-action,
.intro-card {
  flex: 1 1 0;                  /* 3 כרטיסים יחלקו את השורה */
  min-width: 280px;             /* לא להימעך מתחת לזה */
}

/* ✨ בקטנים מאוד – אפשר להקטין מינימום עוד קצת (רשות) */
@media (max-width: 420px) {
  .intro-action,
  .intro-card { min-width: 240px; }
}

/* כפתור הצ'קר האוטומטי */
.auto-checker-fab {
  position: fixed;
  bottom: 120px;          /* אפשר לשנות לפי מיקום שאתה רוצה */
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 9999;
}

.auto-checker-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* האייקון בפנים */
.auto-checker-fab img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* tooltip */
.auto-checker-fab[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 70px;
  right: 50%;
  transform: translateX(50%);
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.9;
}

/* =========================
   12) Responsive
   ========================= */
@media (max-width:1200px){
  .best-deal .info-table ul li span{float:none;width:100%}
  .contact-page .section-heading{margin-right:100px}
}

@media (max-width:992px){
  .sub-header{display:none}
  .header-area .main-nav .logo h1{line-height:100px}
  .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 .item h2{width:100%}
  .featured .section-heading{margin:100px 0 0}
  .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}
}

/* =========================
   13) Final overrides – Mobile header/menu & backdrop
   ========================= */

/* backdrop element (created ב-JS) */
#offcanvas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;display:none}
body.nav-open #offcanvas-backdrop{display:block}

body.nav-open #a11y-controls,
body.nav-open .floating-btn,
body.nav-open .walkthrough-fab{z-index:10!important}

/* Mobile compact header (menu left, logo right) */
:root{ --header-h:56px; --trigger-size:28px; }

@media (max-width:767px){
  .background-header{height:var(--header-h)!important}
  .header-area{height:var(--header-h);padding:0 12px}
  .header-area .container,.header-area .row,.header-area .col-12,.header-area .main-nav{
    height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 8px;width:100%
  }

  /* logo right */
  .header-area .main-nav .logo{order:2;margin-left:auto;position:absolute!important;right:16px;top:50%;transform:translateY(-50%);z-index:1000003}
  .header-area .main-nav .logo h1{margin:0;line-height:1!important;font-size:22px}

  /* hamburger left */
  .header-area .main-nav .menu-trigger{
    display:block!important;order:1;position:absolute!important;left:16px;top:50%;transform:translateY(-50%);
    font-size:0;width:var(--trigger-size);height:var(--trigger-size);text-indent:-9999px;z-index:1000003
  }
  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span::before,
  .header-area .main-nav .menu-trigger span::after{
    position:absolute;left:0;right:0;margin:auto;width:24px;height:2px;background:#1e1e1e;content:"";transform-origin:50% 50%
  }
  .header-area .main-nav .menu-trigger span{top:50%;transform:translateY(-50%)}
  .header-area .main-nav .menu-trigger span::before{top:-8px}
  .header-area .main-nav .menu-trigger span::after{top:8px}

  /* open state – move to top-right and show X */
  body.nav-open .header-area .main-nav .menu-trigger{position:fixed!important;right:16px;left:auto;top:calc(var(--header-h)/2 - var(--trigger-size)/2);transform:none}
  .header-area .main-nav .menu-trigger.active span{background:transparent}
  .header-area .main-nav .menu-trigger.active span::before,
  .header-area .main-nav .menu-trigger.active span::after{top:0}
  .header-area .main-nav .menu-trigger.active span::before{transform:rotate(45deg)}
  .header-area .main-nav .menu-trigger.active span::after{transform:rotate(-45deg)}

  /* logo fixed to top-left when open */
  body.nav-open .header-area .main-nav .logo{
    position:fixed!important;left:16px;right:auto;top:calc(var(--header-h)/2 - 14px);transform:none;pointer-events:none
  }

  /* side drawer under the white bar */
  .header-area .main-nav .nav{
    position:fixed!important;top:var(--header-h);left:-280px;width:260px;height:calc(100dvh - var(--header-h));
    background:#fff;padding:14px 14px 16px;display:block!important;overflow-y:auto;box-shadow:2px 0 20px rgba(0,0,0,.18);transition:left .28s ease;z-index:1000002
  }
  body.nav-open .header-area .main-nav .nav{left:0}

  /* dropdowns in drawer – tap to open (class .open via JS) */
  .header-area .main-nav .nav li{height:auto;line-height:48px;border-top:1px solid #eee;background:#fff}
  .header-area .main-nav .nav li a{display:block;height:48px;line-height:48px;color:#1e1e1e}
  .header-area .main-nav .nav li .dropdown-menu{position:static!important;display:none!important;padding:6px 0 10px 12px;border:0;box-shadow:none;background:#fff;margin:0}
  .header-area .main-nav .nav li.open > .dropdown-menu{display:block!important}
  .header-area .main-nav .nav li .dropdown-menu li{line-height:42px}
  .header-area .main-nav .nav li .dropdown-menu li a{height:42px;line-height:42px}

  /* simple chevron in drawer */
  .header-area .main-nav .nav li.dropdown > a::after{
    content:"›";float:right;margin-right:6px;font-weight:700;transform:rotate(90deg);transition:transform .15s ease
  }
  .header-area .main-nav .nav li.dropdown.open > a::after{transform:rotate(-90deg)}
}
/* --- FIX: dropdown לא ייחתך ולא יישב מתחת לתמונה (דסקטופ) --- */
.header-area{
  position: relative;
  z-index: 5000;              /* מעל ה-banner/תמונה */
}
.header-area .main-nav{
  overflow: visible !important; /* מבטל חיתוך של תתי-תפריטים */
}

/* הדרופדאון עצמו מעל הכל */
@media (min-width: 768px){
  .header-area .main-nav .nav li .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    z-index: 6000;            /* גבוה מהתמונה/סליידר */
  }
  .header-area .main-nav .nav li.dropdown.open > .dropdown-menu,
  .header-area .main-nav .nav li.dropdown:hover > .dropdown-menu{
    display: block;
  }
}

/* בסיס ל-dropdown */
.header-area .main-nav .nav li.dropdown {
  position: relative;
}

.header-area .main-nav .nav li.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 999;
      height: fit-content;

}


/*!
 * Villa Agency – FULL CSS (refactored + mobile off-canvas + walkthrough + icons)
 * Includes:
 * 00. Variables & helpers
 * 01. Reset & base
 * 02. Global styles
 * 03. Components (buttons, modal, floating actions)
 * 04. Header & navigation (dropdown + off-canvas)
 * 05. Preloader
 * 06. Sections (Banner, Featured, Video, Fun Facts, Best Deal, Properties, Contact)
 * 07. Footer
 * 08. Page headers
 * 09. Single Property / Contact page
 * 10. Accessibility controls (+ floating icons)
 * 11. Walkthrough overlay
 * 12. Responsive (≤1200, ≤992, ≤767)
 * 13. FINAL OVERRIDES (mobile header/menu, icons co-located)
*/

/* =====================================================
   00) Variables & helpers
   ===================================================== */
:root{
  --primary:#e74c3c;
  --primary-hover:#cf3f30;
  --text:#fff;
  --text-on-primary:#fff;
  --backdrop:rgba(0,0,0,.55);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.2);
}

.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 { list-style:none; padding:0; margin:0; }

/* =====================================================
   01) Reset & base elements
   ===================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, 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; }

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;
  overflow-x:hidden;
}

a { text-decoration:none !important; }
h1, h2, h3, h4, h5, h6 { color:#1e1e1e; font-weight:700; margin:0; }
p { font-size:14px; line-height:28px; color:#4a4a4a; }
img { width:100%; overflow:hidden; }

::selection, ::-moz-selection { background:#0071f8; color:#fff; }

/* =====================================================
   02) Global styles
   ===================================================== */
.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:#1e1e1e; color:#fff;
  font-size:14px; font-weight:400; height:50px; line-height:50px;
  padding:0 30px 0 0; border-radius:25px; transition:.3s;
}
.icon-button a i{
  background:#c02f03; height:50px; width:50px; text-align:center; border-radius:50%;
  line-height:50px; display:inline-block; margin:0 15px 0 -1px;
}
.icon-button a:hover{ color:#c02f03; }
.icon-button a:hover i{ color:#fff; }

.main-button a{
  display:inline-block; background:#1e1e1e; color:#fff; font-size:14px; font-weight:500;
  height:40px; line-height:40px; padding:0 30px; border-radius:25px; transition:.3s;
}
.main-button a:hover{ background:#c02f03; color:#fff; }

/* Demo toggle group */
.toggle-container{ display:flex; justify-content:center; margin:20px 0; gap:15px; }
.toggle-container .btn{ font-weight:600; box-shadow:0 4px 10px rgba(0,0,0,.15); transition:.2s; }
.toggle-container .btn:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.25); }

/* =====================================================
   03) Components (buttons, modal, floating actions)
   ===================================================== */
.btn-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--primary); color:var(--text-on-primary);
  padding:.6rem 1.1rem; border:none; border-radius:999px;
  font-weight:700 ; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .12s, background .12s;
}
.btn-pill:hover{ background:var(--primary-hover); transform:translateY(-1px); }
.btn-pill:focus{ outline:2px solid #fff; outline-offset:2px; }

/* App modal */
.site-modal-backdrop{ position:fixed; inset:0; display:none; place-items:center; background:var(--backdrop); z-index:1000; }
.site-modal-backdrop[data-open="true"]{ display:grid; }
.site-modal{ width:min(680px, 92vw); background:#fff; color:#222; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.site-modal__header{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; background:#fafafa; border-bottom:1px solid #eee; }
.site-modal__title{ margin:0; font-size:1.125rem; font-weight:800; }
.site-modal__body{ padding:1.25rem; line-height:1.55; }
.site-modal__footer{ padding:1rem 1.25rem; background:#fafafa; border-top:1px solid #eee; display:flex; gap:.5rem; justify-content:flex-end; }
.icon-btn{ background:transparent; border:none; padding:.4rem .55rem; border-radius:999px; cursor:pointer; }
.icon-btn:focus{ outline:2px solid var(--primary); outline-offset:2px; }
body.modal-open{ overflow:hidden; }

/* Floating actions (both same size) */
.floating-btn, .walkthrough-fab,.auto-checker-fab{
  position:fixed; width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; transition:transform .2s, box-shadow .2s;
  z-index:2000; border-radius:50%; border:none;
}

.floating-btn img, .walkthrough-fab img,.auto-checker-fab img{ width:50px; height:50px; object-fit:contain; display:block;    border-radius: 50%; }
.floating-btn:hover, .walkthrough-fab:hover,.auto-checker-fab:hover{ transform:scale(1.05); box-shadow:0 4px 10px rgba(0,0,0,.3); }

/* Default co-located positions (bottom-left, side-by-side) */
.floating-btn{ bottom:20px; left:20px; }
.auto-checker-fab{ bottom:20px; left:90px; }
.walkthrough-fab{ bottom:20px;  left: 160px}

/* Tooltips */
.walkthrough-fab::after{
  content:attr(data-tooltip); position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
  background:#333; color:#fff; font-size:13px; padding:6px 10px; border-radius:6px; opacity:0; white-space:nowrap; pointer-events:none; transition:opacity .3s, transform .3s;
}
.walkthrough-fab:hover::after{ opacity:1; transform:translateX(-50%) translateY(-5px); }
.floating-btn a::after{
  content:attr(data-tooltip); position:absolute; top:70px; left:50%; transform:translateX(-50%);
  background:#333; color:#fff; font-size:13px; padding:6px 10px; border-radius:6px; opacity:0; white-space:nowrap; pointer-events:none; transition:opacity .3s, transform .3s;
}
.floating-btn a:hover::after{ opacity:1; transform:translateX(-50%) translateY(5px); }

/* =====================================================
   04) Header & navigation (dropdown + off-canvas)
   ===================================================== */
.sub-header{ background:#fff; padding:10px 0; border-bottom:1px solid #eee; }

.background-header{
  background:#fff; height:80px!important; position:fixed!important; top:0!important; left:0; right:0;
  box-shadow:0 0 10px rgba(0,0,0,.15)!important; transition:.5s;
}
.header-area{ position:relative; background:#fff; height:10px; z-index:100; transition:.5s; }
.header-area .main-nav{ background:transparent; display:flex; overflow:hidden; }
.header-area .main-nav .logo{ display:inline-block; transition:.3s; }
.header-area .main-nav .logo h1{ line-height:100px; font-size:28px; text-transform:uppercase; color:#1e1e1e; font-weight:700; letter-spacing:2px; margin-top:20px; }

.header-area .main-nav ul.nav{ margin-top:50px; margin-left:5%; justify-content:right; transition:.3s; position:relative; z-index:1001; }
.header-area .main-nav .nav li{ padding:0 10px; line-height:100px; }
.header-area .main-nav .nav li:last-child{ padding-right:0; }
.header-area .main-nav .nav li a{
  display:block; padding:0 20px; font-weight:500; font-size:15px; height:40px; line-height:40px;
  text-transform:capitalize; color:#1e1e1e; transition:.4s; border:transparent; letter-spacing:.25px;
}
.header-area .main-nav .nav li a:hover{ color:#c02f03; }
.header-area .main-nav .nav li a.active{ color:#c02f03; }

.header-area .main-nav .nav li:last-child a{
  background:#1e1e1e; color:#fff; font-size:14px; font-weight:400; text-transform:none;
  border-radius:20px; padding-left:10px;
}
.header-area .main-nav .nav li:last-child a i{
  background:#c02f03; display:inline-block; width:40px; height:40px; text-align:center; line-height:40px;
  margin-right:10px; border-radius:50%; margin-left:-1px;
}
.header-area .main-nav .nav li:last-child:hover a{ background:#1e1e1e; }
.header-area .main-nav .nav li:last-child:hover a i{ color:#fff; }

/* Hamburger */
.header-area .main-nav .menu-trigger{
  cursor:pointer; position:absolute; top:23px; right:20px; width:32px; height:40px; text-indent:-9999em; z-index:99; display:none;
}
.background-header .main-nav .menu-trigger{ top:22px; }
.background-header .main-nav ul.nav{ margin-top:20px; }
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after{
  transition:.4s; background:#1e1e1e; position:absolute; width:30px; height:2px; left:0; display:block;
}
.header-area .main-nav .menu-trigger span{ top:16px; }
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after{ content:""; width:75%; }
.header-area .main-nav .menu-trigger span:before{ top:-10px; transform-origin:33% 100%; }
.header-area .main-nav .menu-trigger span:after{ top:10px; transform-origin:33% 0; }
.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after{ background:transparent; width:100%; }
.header-area .main-nav .menu-trigger.active span:before{ transform:translateY(6px) translateX(1px) rotate(45deg); background:#1e1e1e; }
.header-area .main-nav .menu-trigger.active span:after{ transform:translateY(-6px) translateX(1px) rotate(-45deg); background:#1e1e1e; }

/* Dropdown (desktop hover) */
.header-area .main-nav .nav li.dropdown{ position:relative; }
.header-area .main-nav .nav li .dropdown-menu{
  display:none; position:absolute; top:100%; left:0; background:#fff; min-width:180px;
  border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:999;
}
.header-area .main-nav .nav li .dropdown-menu li a{ display:block; padding:10px 20px; font-size:15px; color:#1e1e1e; white-space:nowrap; background:transparent; }
.header-area .main-nav .nav li .dropdown-menu li a:hover{ background:#f7f7f7; color:#c02f03; }
.header-area .main-nav .nav li.dropdown:hover > .dropdown-menu,
.header-area .main-nav .nav li.dropdown.open > .dropdown-menu{ display:block; }

/* Off-canvas (mobile – CSS side, JS toggles class .nav-open on <body>) */
.main-nav .dropdown .dropdown-menu{ position:fixed; top:0; right:-250px; width:250px; height:100%; background:#fff; box-shadow:-2px 0 8px rgba(0,0,0,.2); padding:20px; transition:right .3s ease; display:block; z-index:2000; }
.main-nav .dropdown.open > .dropdown-menu{ right:0; }
.main-nav .dropdown .dropdown-menu li{ margin:15px 0; }
.main-nav .dropdown .dropdown-menu li a{ color:#333; font-size:16px; display:block; }

/* =====================================================
   05) Preloader
   ===================================================== */
.js-preloader{
  position:fixed; inset:0; background:rgba(0,0,0,.99);
  display:flex; align-items:center; justify-content:center;
  opacity:1; visibility:visible; z-index:9999; transition:opacity .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:#c02f03; border-radius:50%; animation:dot 2.8s infinite; }
.preloader-inner .dots{ transform:translateX(0); margin:12px 0 0 31px; animation:dots 2.8s infinite; }
.preloader-inner .dots span{ display:block; float:left; width:16px; height:16px; margin-left:16px; background:#c02f03; border-radius:50%; }

/* =====================================================
   06) Sections
   ===================================================== */
/* Banner */
.main-banner .item{ background-position:center; background-repeat:no-repeat; background-size:cover; padding:220px 20% 320px; margin-top:0; }
.main-banner .item-1{ background-image:url(../images/banner-01.jpg); }
.main-banner .item-2{ background-image:url(../images/banner-02.jpg); }
.main-banner .item-3{ background-image:url(../images/banner-03.jpg); }
.main-banner .item span.category{ background:#fff; color:#1e1e1e; font-size:16px; font-weight:500; text-transform:capitalize; padding:6px 15px; display:inline-block; margin-bottom:30px; }
.main-banner .item span.category em{ font-style:normal; color:#c02f03; }
.main-banner .item h2{ font-size:62px; font-weight:700; text-transform:uppercase; color:#fff; line-height:72px; width:50%; margin:0; }
.main-banner .owl-dots{ position:absolute; bottom:60px; left:20%; }
.main-banner .owl-dots .owl-dot{ width:10px; height:10px; background:#fff; border-radius:50%; margin-right:10px; transition:.5s; }
.main-banner .owl-dots .active{ background:#c02f03; }
.main-banner .owl-nav{ position:absolute; top:50%; width:100%; transform:translateY(-50px); }
.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i{
  width:50px; height:50px; line-height:50px; font-size:24px; display:inline-block; color:#fff;
  background:rgba(255,255,255,.2); border-radius:50%; transition:.3s;
}
.main-banner .owl-nav .owl-prev i{ position:absolute; left:45px; }
.main-banner .owl-nav .owl-next i{ position:absolute; right:45px; }
.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover{ background:rgba(255,255,255,.5); }

/* 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:#c02f03;
  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:#c02f03; background:#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,.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; }

/* Video */
.video{ background:url(../images/video-bg.jpg) center/cover no-repeat; padding:100px 0 250px; 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,.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:#fff; border-radius:50%; display:inline-block; text-align:center; line-height:52px; color:#c02f03;
  outline:15px solid rgba(254,85,37,.5); font-size:18px;
}

/* Fun Facts */
.fun-facts{ text-align:center; margin-top:125px; }
.fun-facts .counter{ background:#ffeee9; position:relative; border-radius:10px; width:270px; padding:20px 0; display:inline-block; }
.fun-facts .counter p{ text-align:left; font-size:16px; color:#1e1e1e; font-weight:600; line-height:28px; display:inline-flex; }
.fun-facts .counter h2{ margin-right:25px; font-size:40px; color:#c02f03; display:inline-flex; }
.fun-facts .counter:after{ position:absolute; width:50px; height:50px; background:#c02f03; border-radius:50%; content:''; right:-25px; top:-25px; }

/* Best Deal */
.best-deal{ background:#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:#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:#c02f03 !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,.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:black; 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:transparent; }
.best-deal .tabs-content h4{ font-size:17px; font-weight:600; margin-bottom:30px; }
.best-deal .icon-button{ margin-top:30px; }

/* Properties */
.properties .item{ background:#fafafa; border-radius:10px; padding:30px; margin-bottom:30px; }
.properties .item img{ border-radius:10px; }
.properties .item span.category{ background:#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{ border-bottom:1px solid #eaeaea; margin-bottom:30px; padding-bottom:30px; }
.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 h6{ font-size:20px; color:#c02f03; margin-top:30px; display:inline-block; float:right; }
.properties .item .main-button{ text-align:center; }

/* Contact section */
.contact{ background:url(../images/contact-bg.jpg) center/cover no-repeat; padding:100px 0 250px; position:relative; }
.contact .section-heading h2{ color:#fff; }
.contact-content{ margin-top:-240px; position:relative; z-index:1; }
.contact-content #map{ border-radius:10px; margin-bottom:60px; }
.contact-content .item{ border-radius:10px; box-shadow:0 0 15px rgba(0,0,0,.15); padding:35px 30px; background:#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:#aaa; font-weight:400; }
.contact-content #contact-form{ margin-left:30px; border-radius:10px; box-shadow:0 0 15px rgba(0,0,0,.15); padding:35px 30px; background:#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:#f6f6f6; border:none; font-size:14px; padding:0 15px; }
.contact-content #contact-form textarea{ width:100%; height:150px; max-height:180px; border-radius:22px; background:#f6f6f6; border:none; margin-bottom:40px; font-size:14px; padding:15px; }
.contact-content #contact-form button{ background:#1e1e1e; height:44px; border-radius:22px; padding:0 20px; color:#fff; border:none; font-size:15px; font-weight:500; transition:.5s; }
.contact-content #contact-form button:hover{ background:#c02f03; }

/* Form validation helpers */
.form-group .error-message{ display:none; color:#d00; font-size:.9em; margin-bottom:30px; }
.form-group.has-error .error-message{ display:block; margin-bottom:30px; }
.form-group.has-error input, .form-group.has-error textarea{ border-color:#d00; background:#fff5f5; margin-bottom:5px; }

/* =====================================================
   07) Footer
   ===================================================== */
footer.footer-no-gap{ margin-top:0; }
footer{ margin-top:150px; background:#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:.3s; position:relative; z-index:3; }
footer p a:hover{ opacity:.75; }

/* Social icons */
footer .social-icons{ text-align:center; margin-top:5.5%; }
footer .social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin:0 6px; background:#cdcdcd; border-radius:50%;
  color:#000; font-size:16px; transition:.3s;
}

/* =====================================================
   08) Page headers
   ===================================================== */
.page-heading{ background:url(../images/page-heading-bg.jpg) center bottom/cover no-repeat; padding:110px 0; text-align:center; }
.page-heading span{ background:#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; }

/* =====================================================
   09) Single Property / Contact Page
   ===================================================== */
.single-property .main-image img{ float:none; }
.single-property .main-content h4{ font-size:25px; margin:25px 0 40px; padding-bottom:40px; border-bottom:1px solid #eee; }
.single-property .main-content span.category{ background:#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:60px 0 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:#c02f03; background:#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,.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; }

/* Contact page specific */
.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,.15); padding:35px 30px; background:#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:#aaa; font-weight:400; }
.contact-page #contact-form{ margin-left:30px; border-radius:10px; box-shadow:0 0 15px rgba(0,0,0,.15); padding:35px 30px; background:#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:#f6f6f6; border:none; font-size:14px; padding:0 15px; }
.contact-page #contact-form textarea{ width:100%; height:150px; max-height:180px; border-radius:22px; background:#f6f6f6; border:none; margin-bottom:40px; font-size:14px; padding:15px 15px; }
.contact-page #contact-form button{ background:#1e1e1e; height:44px; border-radius:22px; padding:0 20px; color:#fff; border:none; font-size:15px; font-weight:500; transition:.5s; }
.contact-page #contact-form button:hover{ background:#c02f03; }

/* =====================================================
   10) Accessibility controls (manual/auto icons)
   ===================================================== */
.icon-btn.auto, .icon-btn.manual{ display:none !important; }
body[data-icons="auto"] .icon-btn.auto{ display:inline-flex !important; }
body[data-icons="both"] .icon-btn.auto,
body[data-icons="both"] .icon-btn.manual{ display:inline-flex !important; }

/* Floating controls region */
#a11y-controls{ position:fixed; right:16px; bottom:16px; z-index:99999; display:flex; gap:8px; align-items:center; }
.a11y-fab{ border:0; border-radius:999px; padding:10px 14px; background:#c02f03; color:#fff; font:600 14px/1.1 system-ui,Arial; box-shadow:0 6px 18px rgba(0,0,0,.2); cursor:pointer; }
.a11y-fab[aria-pressed="true"]{ outline:3px solid rgba(255,106,58,.35); }
.a11y-fab:focus-visible{ outline:3px solid #1e90ff; }

/* Keep main nav above layers */
.header-area .main-nav .nav{ position:relative; z-index:1001; }
.header-area .main-nav .nav li a{ pointer-events:auto; }

/* =====================================================
   11) Walkthrough welcome overlay
   ===================================================== */
.tw-overlay[hidden]{ display:none; }
.tw-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; z-index:1000001;
}
.tw-dialog{ width:min(420px, 92vw); background:#fff; color:#222; border-radius:14px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.tw-dialog h2{ margin:0 0 8px; font-size:1.35rem; }
.tw-dialog p{ margin:0 0 18px; line-height:1.5; }
.tw-actions{ display:flex; gap:10px; justify-content:flex-end; }
.tw-btn{ padding:10px 16px; border-radius:8px; border:1px solid #e1e1e1; background:#f7f7f7; cursor:pointer; font-weight:600; }
.tw-btn:focus{ outline:3px solid #4c9ffe; outline-offset:2px; }
.tw-btn-primary{ background:#ff6a3d; border-color:#ff6a3d; color:#fff; }
.tw-btn-primary:hover{ filter:brightness(.93); }
.tw-btn-ghost{ background:#fff; }


/* =====================================================
   12) Responsive
   ===================================================== */
/* ≤1200px */
@media (max-width:1200px){
  .best-deal .info-table ul li span{ float:none; width:100%; }
  .contact-page .section-heading{ margin-right:100px; }
}

/* ≤992px */
@media (max-width:992px){
  .sub-header{ display:none; }
  .header-area .main-nav .logo h1{ line-height:100px; }
  .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 .item h2{ width:100%; }
  .featured .section-heading{ margin:100px 0 0; }
  .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; }
}

/* ≤767px (mobile core) */
@media (max-width:767px){
  .background-header .main-nav{ box-shadow:0 0 15px rgba(0,0,0,.15); border-radius:0 0 25px 25px; width:100%; }
  .background-header .main-nav .nav, .header-area .main-nav .nav{ background:#fff; }
  .background-header .main-nav .nav li a, .header-area .main-nav .nav li a{
    line-height:50px; height:50px; font-weight:400; color:#1e1e1e; background:#fff; border-radius:0 0 25px 25px;
  }
  .background-header .main-nav .nav li, .header-area .main-nav .nav li{
    border-top:1px solid #ddd; background:#f1f0fe; height:50px; border-radius:0 0 25px 25px;
  }
  .header-area{ padding:0 15px; height:80px; box-shadow:none; text-align:center; }
  .header-area .container{ padding:0; }
  .header-area .menu-trigger{ display:block !important; }
  .header-area .main-nav .nav{ float:none; width:100%; display:none; margin-left:0; }
  .header-area .main-nav .nav li{ width:100%; background:#fff; padding-left:0 !important; padding-right:0 !important; }

  /* Floating buttons (keep co-located) */
  .floating-btn{ bottom:20px; left:20px; top:auto; }
  .walkthrough-fab{ bottom:20px; left:90px; }
}

/* =====================================================
   13) FINAL OVERRIDES (mobile header/menu, icons, backdrop)
   ===================================================== */

/* Offcanvas backdrop under the drawer */
#offcanvas-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:99; }

/* When nav is open, push down other floating layers slightly */
body.nav-open #a11y-controls,
body.nav-open .floating-btn,
body.nav-open .walkthrough-fab{ z-index:10 !important; }

/* Mobile compact header: menu left, logo right, same vertical line */
@media (max-width:767px){
  .header-area{ height:56px; padding:0 12px; }
  .background-header{ height:56px !important; }

  .header-area .container,
  .header-area .row,
  .header-area .col-12,
  .header-area .main-nav{
    height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 8px; width:100%;
  }

  /* Logo right */
  .header-area .main-nav .logo{ order:2; margin-left:auto; position:absolute !important; right:16px; top:50%; transform:translateY(-50%); z-index:1000003; }
  .header-area .main-nav .logo h1{ margin:0; line-height:1 !important; font-size:22px; }

  /* Hamburger left */
  .header-area .main-nav .menu-trigger{
    order:1; position:absolute !important; left:16px; top:50%; transform:translateY(-50%);
    font-size:0; width:28px; height:28px; text-indent:-9999px; z-index:1000003;
  }
  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span::before,
  .header-area .main-nav .menu-trigger span::after{
    position:absolute; left:0; right:0; margin:auto; width:24px; height:2px; background:#1e1e1e; content:""; transform-origin:50% 50%;
  }
  .header-area .main-nav .menu-trigger span{ top:50%; transform:translateY(-50%); }
  .header-area .main-nav .menu-trigger span::before{ top:-8px; }
  .header-area .main-nav .menu-trigger span::after { top: 8px; }

  /* Drawer (left) */
  .header-area .main-nav .nav{
    position:fixed !important; top:0; left:-280px; width:260px; height:100dvh; background:#fff;
    padding:64px 14px 16px; display:block !important; overflow-y:auto;
    box-shadow:2px 0 20px rgba(0,0,0,.18); transition:left .28s ease; z-index:1000002;
  }
  body.nav-open .header-area .main-nav .nav{ left:0; }

  /* When open – move X to top-right, logo fixed on top-left inside */
  body.nav-open .header-area .main-nav .menu-trigger{ position:fixed !important; right:16px; left:auto; top:16px; transform:none; }
  body.nav-open .header-area .main-nav .logo{ position:fixed !important; left:16px; right:auto; top:16px; transform:none; }

  /* Dropdowns inside drawer (tap-to-open, requires JS to toggle .open) */
  .header-area .main-nav .nav li{ height:auto; line-height:48px; border-top:1px solid #eee; background:#fff; }
  .header-area .main-nav .nav li a{ display:block; height:48px; line-height:48px; color:#1e1e1e; }
  .header-area .main-nav .nav li .dropdown-menu{ position:static !important; display:none !important; padding:6px 0 10px 12px; border:0; box-shadow:none; background:#fff; margin:0; }
  .header-area .main-nav .nav li.open > .dropdown-menu{ display:block !important; }
  .header-area .main-nav .nav li .dropdown-menu li{ line-height:42px; }
  .header-area .main-nav .nav li .dropdown-menu li a{ height:42px; line-height:42px; }

  /* Chevron indicator */
  .header-area .main-nav .nav li.dropdown > a::after{
    content:"›"; float:right; margin-right:6px; font-weight:700; transform:rotate(90deg); transition:transform .15s ease;
  }
  .header-area .main-nav .nav li.dropdown.open > a::after{ transform:rotate(-90deg); }
}
/* ==== Off-canvas מתחת להדר + מיושר לצד ==== */
:root{
  --header-h: 56px;          /* גובה הפס הלבן במובייל */
  --trigger-size: 28px;      /* גודל ההמבורגר/✖ */
}

@media (max-width: 767px){
  /* ההדר עצמו */
  .header-area{ height: var(--header-h); padding:0; }
  .header-area .main-nav{ align-items:center; }

  /* המבורגר סגור (שמאל, מיושר אנכית לאמצע הפס) */
  .header-area .main-nav .menu-trigger{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:var(--trigger-size); height:var(--trigger-size); text-indent:-9999px;
  }

  /* פתוח – ✖ מימין, מיושר לאמצע הפס הלבן */
  body.nav-open .header-area .main-nav .menu-trigger{
    position:fixed; left:auto; right:16px;
    top:calc(var(--header-h)/2 - var(--trigger-size)/2);
    transform:none;
  }

  /* הלוגו סגור – מימין, מיושר לאמצע הפס */
  .header-area .main-nav .logo{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
  }
  /* פתוח – הלוגו עובר לשמאל, מיושר לפס */
  body.nav-open .header-area .main-nav .logo{
    position:fixed; left:16px; right:auto;
    top:calc(var(--header-h)/2 - 14px); transform:none;
    pointer-events:none;
  }

  /* המגירה: מתחילה מתחת לפס הלבן ונהיית בגובה המסך פחות הפס */
  .header-area .main-nav .nav{
    position:fixed !important;
    top:var(--header-h);               /* עד כאן הבקשה "למטה מיושר עם הפס הלבן" */
    left:-280px;                       /* סגור – מחוץ למסך */
    width:260px;
    height:calc(100dvh - var(--header-h));
    background:#fff;
    padding:14px 14px 16px;
    overflow-y:auto;
    box-shadow:2px 0 20px rgba(0,0,0,.18);
    transition:left .28s ease;
    z-index:1000002;
    
  }
  body.nav-open .header-area .main-nav .nav{ left: -21px;top:6px; }  /* פתוח – מיושר לצד */

  /* ה-backdrop – מתחיל גם הוא מתחת לפס הלבן ומופיע רק כשהמגירה פתוחה */
  #offcanvas-backdrop{
    display:none;
    position:fixed; inset:var(--header-h) 0 0 0;  /* לא מכסה את הפס הלבן */
    background:rgba(0,0,0,.35);
    z-index:99;                                   /* מתחת למגירה */
  }
  body.nav-open #offcanvas-backdrop{ display:block; }
}
/* ===== Native dialog styling ===== */
#intro-dialog {
  border: none;
  width: min(960px, 92vw);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

#intro-dialog::backdrop {
  background: rgba(0,0,0,.78); /* בק-דרופ כהה */
}

/* תוכן פנימי */
.intro-content {
  display: flex;
  flex-direction: column;
  padding: 24px 56px 18px 24px; /* מקום ל-X */
}

.intro-header { position: relative; }
.intro-header h2 { margin: 0 0 6px; font-size: 1.6rem; }
.intro-header p  { margin: 0; color: #555; }

/* כפתור X עליון ימני */
.intro-close {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px;
  border: 1px solid black; border-radius: 10px;
  background: #fff; font-size: 20px; line-height: 1;
  cursor: pointer;
}
/* .intro-close:focus { outline: 3px solid #2684ff; outline-offset: 2px; } */

/* --- שורת כפתורים מודרנית --- */
.intro-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
  height: 430px;

}
@media (max-width: 980px) { .intro-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .intro-actions { grid-template-columns: 1fr; } }

.intro-action {
  display: flex; align-items: center; gap: 18px;
  min-height:70%; padding: 18px 20px;
  border: 1px solid black; border-radius: 16px;
  background: linear-gradient(180deg,#fff 0%, #fafafa 100%);
  text-align: left; color: inherit; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  
}
.intro-action:hover { background:cornsilk;transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.12);  }
.intro-action:focus-visible { outline: 3px solid #2684ff; outline-offset: 2px; }

.ia-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 14px;
  background: #fff4ef; border: 1px solid #ffd9cc;
}
.ia-icon img { width: 44px; height: 44px; object-fit: contain; }

.ia-content h3 { margin: 0 0 4px; font-size: 1.3rem; }
.ia-content p  { margin: 0; color: #555; font-size: .95rem; line-height: 1.35; }
/* === Card layout: icon ABOVE title === */
.intro-action,
.intro-card {
  /* הופך את תוכן הכרטיס לעמודה אנכית מרכזית */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* טיפה יותר גבוה כדי שיהיה מרווח יפה כשהאייקון מעל */
  min-height: 230px;
  padding: 22px 22px;
  gap: 12px;
}

/* האייקון – גדול ומרווח מלמטה */
.ia-icon {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background: #fff4ef;
  border: 1px solid #ffd9cc;
  display: grid;
  place-items: center;
}

/* תמונת האייקון בתוך המסגרת */
.ia-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* הטקסט – מיושר למרכז */
.ia-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ia-content h3 {
  margin: 6px 0 6px;
  font-size: 1.25rem;     /* אפשר לעלות ל-1.35rem אם תרצה כותרת גדולה יותר */
  line-height: 1.2;
  text-align: center;
}

.ia-content p {
  margin: 0;
  color: #555;
  font-size: .95rem;
  line-height: 1.4;
  text-align: center;
  max-width: 28ch;        /* שומר על שורות קצרות ונקיות */
}

/* במסכים קטנים – אפשר להנמיך טיפה את הגובה המינימלי */
@media (max-width: 420px) {
  .intro-action,
  .intro-card {
    min-height: 210px;
  }
}
/* =====================================================
   14) managemnt Action Button 
   ===================================================== */

/* סגנון FAB אחיד עם הקיימים */
.u-fab{
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eee;                 /* רקע אפור בהיר כמו אצלך */
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  display: grid;
  place-items: center;
  text-decoration: none;
  z-index: 10000;
  transition: transform .15s ease;
  border: #FF6A3D solid 2px;
}
.u-fab:hover{ transform: translateY(-1px); }
.u-fab img{ width: 40px; height: 40px; }
/* גוף המודאל */
.site-modal-backdrop [role="dialog"] {
  background: #fff;
  color: #333;
  max-width: 500px;     /* 👈 יותר קומפקטי */
  width: auto;          /* 👈 מתאים לגודל התוכן */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  padding: 2rem;
  font-family: 'Poppins', sans-serif;
  animation: fadeInScale .3s ease;
  position: relative;   /* 👈 חשוב לכפתור ה־X */
}

/* כפתור סגירה (X) בפינה */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--primary, #e74c3c);
}

/* כותרת */
.site-modal-backdrop h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--primary, #e74c3c);
}

/* ביטול הכפתור התחתון */
.site-modal-backdrop footer {
  display: none;   /* 👈 לא צריך אותו יותר */
}
.a11y-issues li {
list-style: disc !important;
}