body {

  margin: 0;
  padding: 0;
}

.map-container {
  position: relative;
  width: 100%; /* Full width of the page */
  height: auto; /*correct scaling with the width */
  overflow: hidden;
}

.map-pin {
  position: absolute;
  width: 40px; /* Pin size */
  height: 40px;
  background-image: url('../Icons/teal.png'); /* Pin image path*/
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transform: translate(-50%, -50%); /* Center the pin */

}

/* Glow effect for each pin*/
.map-pin::before {
  content: '';
  position: absolute; 
  top: 50%; /* center the glow horizontally and veritcally around the pin*/
  left: 50%;
  width: 80px;/* The glow size */
  height: 80px;
  background-color: var(--color-main-transparent); /* Glow color */
  border-radius: 50%;
  z-index: -1; /* Ensure the glow is behind the pin */
  animation: pulse 1.5s infinite; /* Add the pulsing effect*/
}

.map-pin:hover::before {
  animation: pulse 1.5s infinite; /* Add the pulsing effect*/
}

/* Pulsing Effect in The background of each pin*/
@keyframes pulse {
  0% {
    opacity: 0.7;
    transform: translate(-55%, -50%) scale(1); /*start with a scale of 1*/
  }

  50% {
    opacity: 0.5;
    transform: translate(-55%, -50%) scale(1.2); /*scale to 1.2 at 50%*/
  }

  100% {
    opacity: 0.7;
    transform: translate(-55%, -50%) scale(1); /*return to scale of 1*/
  }
}

/*Pulsing Effect for the active pin */
@keyframes pulse-2 {
  0% {
    opacity: 0.7;
    transform: translate(-55%, -50%) scale(1);
  }

  50% {
    opacity: 0.5;
    transform: translate(-55%, -50%) scale(1.2);
  }

  100% {
    opacity: 0.7;
    transform: translate(-55%, -50%) scale(1);
  }
}


.map-pin.active {
  background-image: url('../Icons/pink.png');
}

.map-pin.active::before {
  background-color: rgba(255, 20, 147, 0.5); /* Pink glow color */
  animation: pulse-2 1.5s infinite; /* Persistent pink pulsating glow */
}


.emoji {
  font-size: 6rem;
  margin-top: 0; /* Default for smaller screens */
}

@media (min-width: 768px) {
  .emoji {
    margin-top: -4rem; /* Applies only for screens md or larger */
  }
}

.info-box{
  /* Without this, the highest element will be aligned to the top of the page
  instead of bottom of navbar when scrolled */
  scroll-margin-top: 60px;
}