.map-container {
  position: relative;
  width: 100%;
  padding-top: 150%; /* Ajusta este valor según la relación de aspecto de tu imagen */
}

.map-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pin {
  position: absolute;
  width: 2%;
  height: 2%;
  background-color:transparent; /* Color cyan semitransparente */
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
}


/* Posiciones específicas para cada pin */
.pin[data-region="REGION CABA"] {
  top: 36%;
  left: 68%;
}

.pin[data-region="REGIÓN SUR DE BUENOS AIRES"] {
  top: 37%;
  left: 62%;
  width: 6%;
  height: 3%;
}

.pin[data-region="REGIÓN NORTE DE BUENOS AIRES"] {
  top: 34%;
  left: 65%;
  height: 3%;
}

.pin[data-region="REGIÓN CUYO"] {
  top: 22%;
  left: 29%;
  width: 10%;
  height: 21%;
}

.pin[data-region="REGIÓN MAR DEL PLATA"] {
  top: 42%;
  left: 68%;
  height: 3%;
  width: 3%;
}

.pin[data-region="REGIÓN CÓRDOBA"] {
  top: 24%;
  left: 45%;
  width: 10%;
  height: 13%;
}

/* ENGLISH */
.pin[data-region="CABA REGION"] {
  top: 36%;
  left: 68%;
}

.pin[data-region="BA SOUTH REGION"] {
  top: 37%;
  left: 62%;
  width: 6%;
  height: 3%;
}

.pin[data-region="BA NORTH REGION"] {
  top: 34%;
  left: 65%;
  height: 3%;
}

.pin[data-region="CUYO REGION"] {
  top: 22%;
  left: 29%;
  width: 10%;
  height: 21%;
}

.pin[data-region="MAR DEL PLATA REGION"] {
  top: 42%;
  left: 68%;
  height: 3%;
  width: 3%;
}

.pin[data-region="CORDOBA REGION"] {
  top: 24%;
  left: 45%;
  width: 10%;
  height: 13%;
}
#regionList li {
  transition: color 0.3s ease;
}

#regionList li.highlight {
  color: #dee4ea !important;
  font-weight: bold;
}