.map-container {
  position: relative;
  padding-bottom: 20%; /* Adjusted aspect ratio for a shorter height */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #f0f0f0; /* Optional: background color */
  border: 0.5px solid #1b263b; /* Optional: border styling */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: box shadow */
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .map-container {
    padding-bottom: 35%; /* Adjust aspect ratio for smaller screens */
  }
}

@media (max-width: 992px) {
  .map-container {
    padding-bottom: 30%; /* Adjust aspect ratio for tablet screens */
  }
}

@media (max-width: 768px) {
  .map-container {
    padding-bottom: 50%; /* Adjust aspect ratio for large mobile screens */
  }
}

@media (max-width: 576px) {
  .map-container {
    padding-bottom: 60%; /* Adjust aspect ratio for small mobile screens */
  }
}