/* Office for sate start======================================================== */
:root{
  --np-primary: var(--clr-primary);
  --np-text:var(--clr-black);
  --np-muted:var(--clr-black);
  --np-border:#e5e7eb;
  --np-bg:var(--clr-white);
  --np-radius:16px;
  --np-max:1200px;
}

/* Container */
.np-wrap{background:#fff;}
.np-container{
  max-width:var(--np-max);
  margin:auto;
  padding:0 16px;
}

/* Header */
.np-sec{padding:28px 0;}
.np-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.np-title {
    font-size: clamp(20px,2.5vw,32px);
    font-weight: 600;
    margin: 0;
    color: var(--np-text);
    font-family: 'Poppins';
}

/* Nav buttons */
.np-nav{display:flex;gap:8px;}
.np-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--np-border);
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:.2s;
}
.np-btn:hover{
  border-color:var(--np-primary);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* Slider */
.np-slider{overflow:hidden;position:relative;}
.np-track{
  display:flex;
  gap:16px;
  transition:transform .4s ease;
  will-change:transform;
}

/* Card */
.np-card{
  flex:0 0 calc((100% - 32px)/3);
  background:#fff;
  border:1px solid var(--np-border);
  border-radius:var(--np-radius);
  overflow:hidden;
  transition:.2s;
}
.np-card:hover{
  border-color:var(--np-primary);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Image */
.np-img{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#0b0f14,#1e293b);
}
.np-badges{
  position:absolute;top:10px;left:10px;display:flex;gap:6px;
}
.np-badge{
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.55);
}
.np-badge.primary{background:var(--np-primary);}

/* Body */
.np-body{padding:14px;display:flex;flex-direction:column;gap:8px;}
.np-price {
    font-size: 20px;
    font-weight: 600;
    color: var(--np-primary);
}
.np-specs {
    display: flex;
    gap: 18px;
    font-weight: 600;
    font-size: 13px;
}
.np-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--np-text);
}
.np-loc{
  font-size:13px;color:var(--np-muted);
}

/* Agent */
.np-agent{
  display:flex;align-items:center;gap:10px;margin-top:6px;
}
.np-avatar{
  width:40px;height:40px;border-radius:10px;
  background:rgba(2,178,238,.12);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
}
.np-agent small{color:var(--np-muted);font-size:12px;}
.np-agent strong{font-size:13px;}

/* CTA */
.np-cta{margin-top:auto;}
.np-cta button{
  width:100%;
  border:0;
  padding:11px;
  border-radius:10px;
  background:var(--np-primary);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.np-cta button a {
    color: white;
    text-decoration: none;
    color: white;
    font-weight: 600;
}
.np-cta button:hover{
  box-shadow:0 10px 24px rgba(2,178,238,.25);
}

/* Responsive */
@media(max-width:980px){
  .np-card{flex-basis:calc((100% - 16px)/2);}
}
@media(max-width:620px){
  .np-card{flex-basis:100%;}
}
/* Office for sate end======================================================== */