:root{
  --ndr-red:#F97316;      /* screenshot ke close */
  --ndr-text:#5f5f5f;
  --ndr-dark:#2b2b2b;

  --ndr-white:#ffffff;
  --ndr-black:#0b0b0b;
  --ndr-overlay: rgba(0,0,0,.45);     /* full hero subtle shade */
  --ndr-panel: rgba(0,0,0,.55);       /* dark box behind text */
  
  --nd-red: #F97316;;       /* maroon/red tone */
  --nd-red-dark:#F97316;;
  --nd-text:#5f5f5f;
  --nd-title:#a63a37;
  --nd-line:#d9d9d9;
  --nd-strip-h: 120px;


}

.office-locations-section{
  background:#fff;
}

.office-title{
  font-weight:800;
  font-size: 46px;
  letter-spacing:.5px;
  color:var(--nd-red);
}

.office-subtitle{
  color:#666;
  font-size:18px;
  max-width: 900px;
  margin: 0 auto;
}

/* Map container look (centered like screenshot) */
.office-map-wrap{
  max-width: 1120px;
  border: 1px solid #e6e6e6;
  background:#fff;
  padding: 18px;
}

.office-map{
  height: 420px;
  width: 100%;
  background:#f2f2f2;
}

/* Leaflet control styling to resemble “Map | Satellite” tabs feel */
.leaflet-control-layers{
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
}
.leaflet-control-layers-toggle{
  width: 44px !important;
  height: 44px !important;
}
.leaflet-control-layers-expanded{
  padding: 10px 12px !important;
}
.leaflet-control-layers label{
  font-size: 14px;
  margin: 6px 0;
}

/* Custom pin (SVG inside divIcon) alignment */
.ndr-pin{
  width: 34px;
  height: 34px;
  transform: translate(-50%, -100%); /* point pin bottom to location */
}

/* Popup like “logo-style card” */
.ndr-popup{
  min-width: 220px;
  font-family: Arial, Helvetica, sans-serif;
}
.ndr-popup .ndr-popup-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}
.ndr-logo-dot{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c93a3a, #8e1f1f);
  position: relative;
}
.ndr-logo-dot::after{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 50%;
  background:#fff;
  opacity:.15;
}
.ndr-popup .ndr-brand{
  font-weight: 700;
  font-size: 16px;
  letter-spacing:.2px;
}
.ndr-popup .ndr-popup-body{
  padding: 10px;
  color:#666;
  font-size: 13px;
  line-height: 1.35;
}
.ndr-popup .ndr-address{
  margin: 0;
}
.leaflet-popup-content-wrapper{
  border-radius: 10px !important;
}
.leaflet-popup-content{
  margin: 10px 12px !important;
}
