/* ---------------------------------------------------
   Slider layout  –  matches 2nd reference screenshot
--------------------------------------------------- */

/* outer wrapper */
.slider-wrapper{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4rem;
}

/* each row */
.slider-row{
  position:relative;
  display:flex;
  align-items:center;
}

/* scroll area */
.property-slider{
  display:flex;
  gap:3rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  flex:1;
  scroll-behavior:smooth;
}
.property-slider::-webkit-scrollbar{display:none}

/* card */
.property-card{
  position:relative;
  flex:0 0 380px;          /* width on desktop */
  border-radius:8px;
  overflow:hidden;
  scroll-snap-align:start;
}
.property-card img{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}

/* blue gradient overlay */
.card-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:1.3rem 1.4rem;
  background:linear-gradient(to top,
            rgba(0,82,255,0.92) 0%,
            rgba(0,82,255,0.75) 40%,
            rgba(0,82,255,0)   100%);
}
.card-overlay span{
  display:block;
  font-family:"Playfair Display",serif; /* any elegant serif you like */
  font-size:1.35rem;
  line-height:1.2;
  color:#fff;
  font-weight:600;
}

/* arrows */
.arrow{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%);
  width:64px!important;
  height:64px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  background:#000!important;
  color:#fff!important;
  font-size:2rem!important;
  border:none!important;
  cursor:pointer!important;
  z-index:10!important;
}
.arrow.prev{ left:-32px!important; }
.arrow.next{ right:-32px!important; }

.arrow.next.top-row,
.arrow.prev.bottom-row{
  display:none!important;
}

/* ----------  responsive  ---------- */
@media(max-width:1280px){
  .property-card{flex:0 0 320px;}
}
@media(max-width:1024px){
  .property-card{
    flex:0 0 280px;
    border-radius:6px;
  }
  .property-card img{height:300px;}
}
@media(max-width:640px){
  .property-card{flex:0 0 85vw;}
  .property-card img{height:260px;}
  .arrow{display:none!important;}     /* hide arrows on narrow mobile */
}

@media(max-width:430px){
    .slider-wrapper {
        gap: 1rem;
    }
}




