*{box-sizing:border-box}

:root{
  --blue:#0878f9;
  --navy:#071b45;
  --text:#405675;
  --green:#109b55;
}

html,body{margin:0;padding:0}

body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--navy);
  background:#fff;
}

.prop-container{
  padding-left:3.05%;
  padding-right:3.05%;
}

.trending-section{
  padding:25px 0 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 18%,rgba(220,242,255,.55),transparent 27%),
    linear-gradient(110deg,#f6fbff 0%,#ffffff 55%,#f7fbff 100%);
}

.section-header{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  text-align:center;
}

.heading-area{width:100%}

.heading-area h1{
  margin:0;
  color:var(--navy);
  font-size:42px;
  line-height:1.04;
  font-weight:800;
  letter-spacing:-.9px;
}

.heading-area h1 span{color:var(--blue)}

.heading-area p{
  margin:9px 0 0;
  color:#405675;
  font-size:20px;
  line-height:1.2;
}

.slider-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:0 0 2px;
}

.slides-track{
  --card-gap:18px;
  display:flex;
  align-items:stretch;
  gap:var(--card-gap);
  width:max-content;
  transform:translate3d(0,0,0);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.project-card{
  flex:0 0 var(--card-width,calc((100vw - 6.1vw - 54px)/4));
  width:var(--card-width,calc((100vw - 6.1vw - 54px)/4));
  min-width:0;
  background:#fff;
  border:1px solid #e7edf4;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(27,59,91,.09);
  transition:transform .22s ease,box-shadow .22s ease;
}

.project-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(27,59,91,.13);
}

.project-image{
  position:relative;
  width:100%;
  aspect-ratio:474/204;
  overflow:hidden;
  background:#edf5fb;
}

.project-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.project-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  padding:5px 11px;
  border-radius:6px;
  color:#fff;
  font-size:13px;
  line-height:1.1;
  font-weight:700;
  white-space:nowrap;
  cursor:text;
  outline:none;
  user-select:text;
}

.badge-green{background:#10a957}
.badge-blue{background:#0878f9}
.badge-red{background:#ff4b4b}
.badge-orange{background:#ff9d00}

.project-badge:focus{
  box-shadow:0 0 0 3px rgba(8,120,249,.25);
}

.project-content{padding:11px 16px 14px}

.project-content h2{
  margin:0 0 7px;
  color:var(--navy);
  font-size:20px;
  line-height:1.12;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.location{
  display:flex;
  align-items:center;
  min-width:0;
  color:var(--text);
  font-size:15px;
  line-height:1.2;
}

.location i{
  flex:0 0 auto;
  margin-right:7px;
  color:var(--blue);
  font-size:15px;
}

.location span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.card-footer{
  margin-top:16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}

.price{
  color:var(--green);
  font-size:24px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

.price span{
  font-size:12px;
  vertical-align:top;
  margin-left:2px;
}

.property-type{
  margin-top:9px;
  color:var(--text);
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
}

.details-btn{
  flex:0 0 auto;
  height:42px;
  padding:0 12px;
  border:1.4px solid #67adff;
  border-radius:7px;
  background:#fff;
  color:var(--blue);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  transition:.2s ease;
}

.details-btn:hover{
  background:#f5faff;
  border-color:var(--blue);
}

.details-btn i{font-size:16px}

.card-nav-arrow{
  position:absolute;
  top:50%;
  z-index:20;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:23px;
  line-height:1;
  box-shadow:0 5px 18px rgba(29,70,110,.18);
  cursor:pointer;
  transform:translateY(-50%);
  transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;
}

.card-nav-arrow:hover:not(:disabled){
  transform:translateY(-50%) scale(1.05);
  box-shadow:0 8px 22px rgba(29,70,110,.24);
}

.card-nav-arrow:disabled{
  opacity:.32;
  cursor:default;
  pointer-events:none;
}

.card-nav-prev{left:9px}
.card-nav-next{right:9px}

@media(max-width:1199px){
  .heading-area h1{font-size:36px}
  .heading-area p{font-size:18px}
  .project-content h2{font-size:18px}
  .project-content{padding-left:13px;padding-right:13px}
  .price{font-size:21px}
  .property-type{font-size:13px}
  .details-btn{height:40px;padding:0 10px;font-size:12px}
}

@media(max-width:991px){
  .heading-area h1{font-size:32px}
  .heading-area p{font-size:17px}
  .slides-track{--card-gap:14px}
  .card-nav-arrow{width:44px;height:44px;font-size:20px}
  .card-nav-prev{left:7px}
  .card-nav-next{right:7px}
  .project-content h2{font-size:17px}
  .location{font-size:13px}
  .price{font-size:20px}
  .property-type{font-size:12px}
  .details-btn{font-size:11.5px}
}

@media(max-width:767px){
  .prop-container{padding-left:14px;padding-right:14px}
  .trending-section{padding-top:20px;padding-bottom:24px}
  .section-header{margin-bottom:16px}
  .heading-area h1{font-size:28px;letter-spacing:-.7px}
  .heading-area p{font-size:15.5px;margin-top:7px}
  .slides-track{--card-gap:10px}
  .project-card{
    flex-basis:var(--card-width,calc((100vw - 28px - 10px)/2));
    width:var(--card-width,calc((100vw - 28px - 10px)/2));
    border-radius:9px;
  }
  .project-image{aspect-ratio:1.72/1}
  .project-badge{
    top:7px;
    left:7px;
    min-height:25px;
    padding:4px 7px;
    border-radius:5px;
    font-size:10px;
  }
  .project-content{padding:9px 10px 11px}
  .project-content h2{font-size:15.5px;margin-bottom:6px}
  .location{font-size:11.5px}
  .location i{font-size:12.5px;margin-right:5px}
  .card-footer{display:block;margin-top:10px}
  .price{font-size:19px}
  .property-type{font-size:10.5px;margin-top:6px}
  .details-btn{
    width:max-content;
    height:34px;
    margin-top:9px;
    padding:0 9px;
    font-size:10.5px;
    gap:6px;
  }
  .details-btn i{font-size:14px}
  .card-nav-arrow{
    width:36px;
    height:36px;
    font-size:17px;
  }
  .card-nav-prev{left:8px}
  .card-nav-next{right:8px}
}

@media(max-width:479px){
  .heading-area h1{font-size:26px}
  .heading-area p{font-size:14.5px}
  .project-content{padding:8px 8px 10px}
  .project-content h2{font-size:14.5px}
  .location{font-size:10.8px}
  .price{font-size:18px}
  .property-type{font-size:10px}
  .details-btn{height:32px;font-size:10px;padding:0 8px}
  .project-badge{
    top:6px;
    left:6px;
    min-height:23px;
    padding:3px 6px;
    font-size:9px;
  }
  .card-nav-arrow{width:34px;height:34px;font-size:16px}
  .card-nav-prev{left:6px}
  .card-nav-next{right:6px}
}

@media(prefers-reduced-motion:reduce){
  .slides-track,.project-card,.card-nav-arrow{transition:none}
}