/* General Map Styles */
.map-container {
    width: 600px; /* Default width */
    height: 500px; /* Default height */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Adjustments for tablet vertical view */
@media (max-width: 768px) {
    .map-container {
        width: calc(100% - 60px); /* Set width to fill container with 30px offset on both sides */
        height: 500px; /* Keep the height */
        position: absolute;
        left: 50%; /* Center horizontally */
        bottom: 30px; /* 30px offset from the bottom */
        transform: translateX(-50%);
    }

    .map {
        width: 100%;
        height: 100%;
    }
}

/* Adjustments for smaller desktop windows */
@media (max-width: 1024px) {
    .map-container {
        width: 500px; /* Reduce width for smaller windows */
        height: 400px; /* Adjust height */
        margin-right: 0; /* Remove any offset */
        bottom: 30px; /* 30px offset from the bottom */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .map {
        width: 100%;
        height: 100%;
    }
}

/* Mobile view */
@media (max-width: 480px) {
    .map-container {
        width: 100%; /* Stretch across the full width of the container */
        height: 340px; /* Keep the height at 375px */
        position: absolute;
        bottom: 20px; /* Adjusted bottom offset */
        right: 0px;
        left: 0px; /* Ensure it starts from the left edge */
        margin-top: 0px; /* Add 30px gap from the icons above */
        transform: none;
    }

    .map {
        width: 100%;
        height: 100%;
    }