.map-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio, adjust if needed */
    overflow: hidden;
    background-color: #f0f0f0; /* Optional: Background color for better visibility */
}

.map-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the content fits within the container */
}

@media (max-width: 768px) {
    .map-wrapper {
        padding-top: 75%; /* Adjust for different aspect ratios on mobile, e.g., 4:3 */
    }
}

.stateCount {
    border: 1px solid #ddd; /* Bootstrap border utility */
    border-radius: 0.25rem; /* Bootstrap rounded utility */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Bootstrap shadow-sm utility */
    background-color: #f8f9fa; /* Bootstrap bg-light utility */
    display: inline-block; /* Bootstrap d-inline-block utility */
    padding: 0.5rem; /* Bootstrap p-2 utility */
    text-align: left; /* Bootstrap text-left utility */
}

.stateCount p {
    font-weight: bold; /* Bootstrap's font-weight-bold */
}