.district-map-section {
  position: relative;
  padding: 40px 20px;
  text-align: center;
  background: url("assets/mapbg.jpg") no-repeat center center;
  background-size: cover;
}

.district-map-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); /* transparency */
  z-index: 1;
}

.map-heading {
  position: relative;
  z-index: 2;
  font-size: 2.2rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}

.map-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;   /* 🟢 map තව පොඩි කරලා */
  margin: 0 auto;     /* 🟢 මැද්දට ගහලා */
}

.map-container svg {
  width: 100%;
  height: auto;
  display: block;
}

:root{
  --map-base: #2ecc71;    /* 🟢 main green */
  --map-hover: #f4d03f;   /* 🟡 hover color (yellow-ish) */
}

.land{
  fill: var(--map-base);
  stroke: #fff;
  stroke-width: .5;
  transition: .25s ease;
  cursor: pointer;
}

/* hover color */
.district:hover .land{
  fill: var(--map-hover);
}

.land{ fill: var(--map-base) !important; }
.district:hover .land{ fill: var(--map-hover) !important; }


.district-name {
  font-size: 25px;
  font-weight: bold;
  fill: rgb(250, 250, 249);
  opacity: 0;          /* hide default */
  pointer-events: none;
  text-anchor: center; /* 🟢 නම center align */
  text-shadow: 2px 2px 5px rgb(253, 16, 16);
}

.district:hover .district-name {
  opacity: 1;          /* hover → නම පේනවා */
}

/* Tooltip styles */
.tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: yellow;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px;
  pointer-events: none;
  display: none;
  z-index: 10;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
  .map-heading {
    font-size: 1.6rem;
  }
  .map-container {
    max-width: 100%;
  }
  .district-name {
    font-size: 12px;
  }
}