/* Parent must define height */
.list-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;     /* full screen on mobile */
    overflow: hidden;
}

/* Hero Image */
.list-hero .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* 🔥 important */
    object-position: center;
    z-index: 1;
}


/* Blur effect */
.blur {
    filter: blur(3px);
}


/* Blur effect */
.list-hero .hero-image.blur {
    filter: blur(5px);
    transform: scale(1.05); /* prevents blur edges */
}

/* Content above image */
.list-hero > *:not(img) {
    position: relative;
    z-index: 2;
}






.map-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* .map-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
} */

/* Marker style */
.marker {
  position: absolute;
  width: 3vw; /* responsive size */
  max-width: 27px;
  transform: translate(-50%, -100%);
  cursor: pointer;
  transition: transform 0.3s ease;
  text-align: center;
}

.marker img {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}

/* Tooltip (place name) */
.marker .tooltip {
  position: absolute;
  bottom: 105%; /* Just above the marker */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Show tooltip on hover */
.marker:hover .tooltip {
  opacity: 1;
}

/* Lift effect */
.marker:hover {
  transform: translate(-50%, -110%) scale(1.1);
}




/* Tablets */
@media (max-width: 992px) {
  .marker {
  
     max-width: 15px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .marker {
   
     max-width: 15px;
  }
  #network .tab-btn {
      padding: 2px 16px;
     
    }
}
/* Smaller markers on mobile */
@media (max-width: 576px) {
      #network .tab-btn {
      padding: 2px 16px;
     
    }
  .marker {
    width: 40%;
     max-width: 20px;
  }

  .marker img{
    width: 40%;

  }
  .marker .tooltip {
    font-size: 11px;
    bottom: 108%;
  }
}




  .tab-btn {
   
    color: #65c6cb;
    /* border-radius: 5px; */

    /* margin-bottom: 10px; */
  }

  /* Hover effect */
  .tab-btn:hover {
    background-color: #65c6cb;
    color: white;
  }

    .tab-btn .active {
    background-color: #65c6cb;
    color: white;
  }

  
    
    #network .tab-btn {
      /* border-radius: 20px; */
      font-weight: 500;
      padding: 9px 16px;
      transition: 0.3s;
    }