.map-card-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: #b2bec3;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
}
.map-card-close:hover {
  color: #ff7675;
}

input.contact-input,
textarea.contact-input {
  background: #181c2a !important;
  color: #fff !important;
  border: 1px solid #444a63 !important;
}

input.contact-input::placeholder,
textarea.contact-input::placeholder {
  color: #b2bec3 !important;
  opacity: 1 !important;
}

input.contact-input:focus::placeholder,
textarea.contact-input:focus::placeholder {
  color: #fff !important;
}

@media (max-width: 767.98px) {
  .map-card,
  div.map-card,
  section .map-card,
  .map-section .map-card {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  .map-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .map-container {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Makes it a perfect square */
    height: auto !important;
    max-width: 100vw !important;
    overflow: hidden;
  }
  .map-container iframe {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: 100vw !important;
    border-radius: 14px !important;
    display: block;
  }
}