/* SA Map */

.map-section {
  position: relative;
  width: 100%;
  max-width: 800px; /* Adjust the maximum width as per your requirements */
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}

.map-container {
  position: relative;
  width: 100%;
  /* margin: 0 0; */
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */ /* Adjust the overlay color and transparency as needed */
  margin: 0px;
}

.map-image {
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
}

.dots-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin: 0;
}

.dots-container-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin: 0;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #b89243; /* Adjust the dot color as needed */
}

.dot-b {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #5387ec; /* Adjust the dot color as needed */
}

.flicker {
  animation: flickerAnimation 2s infinite;
}

.flicker-b {
  animation: flickerAnimation 2.7s infinite;
}

@keyframes flickerAnimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Adjust the position of each dot based on the province */
#dot1 {
  top: 240px;
  left: 562px;
}

#dot2 {
  top: 393px;
  left: 349px;
}

#dot3 {
  top: 360px;
  left: 515px;
}

#dot4 {
  top: 389px;
  left: 580px;
}

#dot5 {
  top: 481px;
  left: 257px;
}

#dot6 {
  top: 506px;
  left: 434px;
}

#dot7 {
  top: 522px;
  left: 612px;
}

#dot8 {
  top: 667px;
  left: 443px;
}

#dot9 {
  top: 743px;
  left: 152px;
}

#dot1-b {
  top: 261px;
  left: 532px;
}

#dot2-b {
  top: 358px;
  left: 428px;
}

#dot3-b {
  top: 385px;
  left: 501px;
}

#dot4-b {
  top: 362px;
  left: 588px;
}

#dot5-b {
  top: 509px;
  left: 211px;
}

#dot6-b {
  top: 479px;
  left: 472px;
}

#dot7-b {
  top: 487px;
  left: 629px;
}

#dot8-b {
  top: 668px;
  left: 472px;
}

#dot9-b {
  top: 744px;
  left: 178px;
}



@keyframes flickerAnimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


@media screen and (max-width: 600px)
{


.map-section {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}


}