/* =========================
     Map Section Styles
     ========================= */
.map-section {
  position: relative;
  margin-top: 80px;
  background: #537bbd;
}
@media screen and (min-width: 769px) {
  .map-section {
    margin-top: 90px;
  }
}

/* =========================
     Heading & Buttons
     ========================= */
.map-heading,
.map-buttons {
  padding: 16px 24px;
  background: #e7e4de;
  border-radius: 8px;
}
.map-heading h1 {
  font-size: clamp(19px, 5vw, 26px);
  font-weight: 700;
  line-height: 125%;
  margin: 0;
}

/* =========================
     Map Filter
     ========================= */
.map-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  /* margin: 20px auto; */
    margin:20px 0;
  @media screen and (min-width: 769px) {
    margin: 0;
  max-width: calc(100% - 60px);
    position: absolute;
    top: clamp(20px, 5vw, 50px);
    left: clamp(20px, 5vw, 50px);
  z-index: 2;
  }

}
.map-filter button {
  background-color: #f5f4f2;
  border-radius: 16px;
  color: #220d07;
  font-size: 15px;
  line-height: 150%;
  border: 0;
  padding: 4px 12px;
  margin: 0 6px;
  position: relative;
}
.map-filter button.active {
  background-color: #eeb201;
}

/* =========================
     Map Buttons
     ========================= */
.map-buttons button:not([data-filter="all"]) {
  padding: 4px 12px 4px 34px;
}
.map-buttons button[data-filter="location"]:before {
  content: "";
  display: block;
  width: 11px;
  height: 14px;
  background: url(../images/location-pin.png) no-repeat center/contain;
  position: absolute;
  top: 8px;
  left: 12px;
  filter: brightness(0);
}
.map-buttons button[data-filter="experience"]:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url(../images/star-pin.png) no-repeat center/contain;
  position: absolute;
  top: 8px;
  left: 12px;
  filter: brightness(0);
}

/* =========================
     Marker Cluster & Map Controls
     ========================= */
.marker-cluster {
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
  background: #fdfdfd;
  border: 2px solid #87351b;
  border-radius: 50%;
  color: #171b1a;
  text-align: center;
}
.leaflet-control-minimap {
  border-radius: 50%;
  border-color: #a94222;
  box-shadow: none;
}
.leaflet-touch .leaflet-bar {
  margin-right: 20px;
  margin-bottom: 20px;
  border: 0;
}
.leaflet-touch .leaflet-bar a {
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  margin: 6px 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
}

/* =========================
     Mapbox Popup
     ========================= */
.mapboxgl-popup {
  max-width: 467px !important;
  width: 100% !important;
}
.mapboxgl-popup-close-button {
  color: #220d07;
  font-size: 24px;
  font-weight: 300;
}
.mapboxgl-popup-close-button:hover,
.mapboxgl-popup-close-button:focus {
  background: transparent;
  color: #000;
  box-shadow: none;
  outline: none;
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.mapboxgl-popup-content {
  padding: 20px;
  margin: 0;
}
.mapboxgl-popup-content .popup-content {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.mapboxgl-popup-content .popup-image {
  flex-basis: 95px;
}
.mapboxgl-popup-content .popup-image img {
  height: 149px;
  object-fit: cover;
}
.mapboxgl-popup-content .popup-text {
  flex-basis: calc(100% - 95px);
  padding-left: 20px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
}
.mapboxgl-popup-content .popup-text .popup-type {
  font-weight: 600;
  letter-spacing: 1px;
  color: #87351b;
  text-transform: capitalize;
  display: flex;
  align-items: center;
}
.mapboxgl-popup-content .popup-text .popup-type img,
.mapboxgl-popup-content .popup-text .popup-type span {
  max-height: 21px;
  object-fit: contain;
  margin-right: 8px;
}
.mapboxgl-popup-content .popup-text h4 {
  color: #220d07;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 138%;
  margin: 8px 0;
}
.mapboxgl-popup-content .popup-text p {
  color: #413634;
  margin: 8px 0 16px 0;
}
.mapboxgl-popup-content .popup-text a {
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  color: #87351b;
  text-decoration: none;
  position: relative;
  padding-right: 40px;
  letter-spacing: 1px;
}
.mapboxgl-popup-content .popup-text a:after {
  content: "";
  display: block;
  width: 27px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg width='27' height='16' viewBox='0 0 27 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='27' height='16' rx='8' fill='%2387351B'/%3E%3Cpath d='M17.6562 4.5V10.1875C17.6562 10.3615 17.5871 10.5285 17.464 10.6515C17.3409 10.7746 17.174 10.8438 17 10.8438C16.8259 10.8438 16.659 10.7746 16.5359 10.6515C16.4129 10.5285 16.3437 10.3615 16.3437 10.1875V6.08594L10.4643 11.9643C10.341 12.0876 10.1738 12.1568 9.99943 12.1568C9.82508 12.1568 9.65787 12.0876 9.53459 11.9643C9.4113 11.841 9.34204 11.6738 9.34204 11.4995C9.34204 11.3251 9.4113 11.1579 9.53459 11.0346L15.414 5.15625H11.3125C11.1384 5.15625 10.9715 5.08711 10.8484 4.96404C10.7254 4.84097 10.6562 4.67405 10.6562 4.5C10.6562 4.32595 10.7254 4.15903 10.8484 4.03596C10.9715 3.91289 11.1384 3.84375 11.3125 3.84375H17C17.174 3.84375 17.3409 3.91289 17.464 4.03596C17.5871 4.15903 17.6562 4.32595 17.6562 4.5Z' fill='%23FDFDFD'/%3E%3C/svg%3E%0A")
    no-repeat center/contain;
  position: absolute;
  top: 0;
  right: 0;
}

/* =========================
     Leaflet Pane
     ========================= */
.leaflet-pane .leaflet-zoom-animated g .leaflet-interactive:first-child {
  stroke: #a94222;
  fill: none;
  border-radius: 50%;
}

/* =========================
     Responsive Styles
     ========================= */
@media (max-width: 991px) {
  .map-section {
    background: transparent;
    /* padding-top: 72px; */
  }
  .map-filter {
    /* width: 100%; */
    /* top: 10px; */
    /* padding: 20px; */
  }
  .map-heading h1 {
    /* font-size: 19px; */
  }
}
@media (max-width: 768px) {
  .map-filter {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    /* margin: 0 0; */
  }
  .map-heading,
  .map-buttons {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .map-buttons {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    /* margin-top: 12px; */
  }
  .map-filter button:first-child {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .mapboxgl-popup-content {
    width: 335px !important;
  }
  .mapboxgl-popup-content .popup-text {
    font-size: 12px;
  }
  .mapboxgl-popup-content .popup-text h4 {
    font-size: 15px;
    line-height: 125%;
  }
  .mapboxgl-popup-content .popup-text a {
    font-size: 16px;
    line-height: 100%;
  }
  .mapboxgl-popup-content .popup-image img {
    height: 114px;
  }
}