/* 1. Container for responsiveness */
        .map-container {
            /* Sets a fixed aspect ratio for the map (4:3 in this case) */
            position: relative;
            padding-bottom: 50%; /* (height/width) * 100% = (450/600)*100 = 75% */
            height: 0;
            overflow: hidden;
            margin: 0 auto; /* This centers the container horizontally */
            max-width: 800px; /* Optional: Set a max width so it doesn't get too large */
        }

        /* 2. Style the iframe to fill the container and be centered */
        .map-container iframe {
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%; /* Makes the map fill the width of the container */
            height: 80%; /* Makes the map fill the height of the container */
        }

        /* Optional: for full width on smaller screens */
        @media (max-width: 600px) {
            .map-container {
                padding-bottom: 100%; /* Change aspect ratio to 1:1 on small screens */
            }
        }