@font-face {
  font-family: "loyal";
  src: url("../new-fonts/eighties/Eighties-Comeback/OTF/EightiesComeback - Semi Bold Semi Condensed.otf")
    format("opentype");
}

@font-face {
  font-family: "loyal-black";
  src: url("../new-fonts/eighties/Eighties-Comeback/OTF/EightiesComeback - Black.otf")
    format("opentype");
}

/* Make the map take full width horizontally */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.map-fullwidth {
  width: 100%;
  height: 500px; /* You can adjust the height as needed */
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  border-radius: 15px;
  overflow: hidden;
  margin: 50px auto; /* Center with some top & bottom spacing */
  max-width: 1200px; /* Optional: limits the width on very large screens */
}

.map-fullwidth iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.map-heading {
  font-size: 4rem;
  color: #ffeb78ff; /* Dark pink from your palette */
  margin: 0;
  text-align: center;
  font-family: "loyal", sans-serif;
}

.map-wrapper {
  width: 100%;
  max-width: 1200px; /* Optional: limits width on large screens */
  margin: 50px auto; /* Top & bottom spacing */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px; /* Space between heading and map */
}

@media (max-width: 900px) {
  .map-fullwidth {
    height: 300px; /* Still horizontal */
  }

  .map-heading {
    font-size: 1.8rem;
  }
  
}

/* Mobile */
@media (max-width: 600px) {
  .map-fullwidth {
    height: 500px; /* Taller, more vertical layout */
  }

  .map-heading {
    font-size: 2.2rem;
  }

  
}